/* =============================================================
   Chill Domains — customer dashboard styles (loaded only on /account/*)
   Adds: form-field, chips, callouts, account-table, fact-list,
   action-list, ns-list, radio-row, form-inline.
   Reuses tokens from styles.css (no new --color-*, --space-*, etc).
   ============================================================= */

/* ---------- Form fields (label-wraps-input pattern) ---------- */
/* The marketing site uses <div class="field"><label>…</label><input>…</div>.
   Dashboard pages use <label class="form-field">…</label> instead, so the
   click target is the whole field. These rules give the dashboard pattern
   the same visual treatment as .field on the marketing pages. */
.form-field {
  display: grid;
  gap: 0.4rem;
}
.form-field__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-ink-2);
}
.form-field__input,
.form-field select,
.form-field textarea,
.form-field input {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--bg-card);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  color: var(--color-ink);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  font-family: inherit;
}
.form-field__input:focus,
.form-field select:focus,
.form-field textarea:focus,
.form-field input:focus {
  outline: none;
  border-color: var(--color-sage-2);
  box-shadow: 0 0 0 4px rgba(143,179,154,0.22);
}
.form-field textarea { min-height: 5.5rem; resize: vertical; }
.form-field input[disabled],
.form-field select[disabled],
.form-field textarea[disabled] {
  background: var(--color-cream-2);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Inline form rows (DNS editor "add record", labels "create", glue "add IP") */
.form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  align-items: end;
}
.form-inline .form-field { flex: 1 1 12rem; min-width: 9rem; }
.form-inline button { white-space: nowrap; }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.6rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  border-radius: var(--radius-pill);
  background: var(--color-cream-2);
  color: var(--color-ink-2);
  border: 1px solid var(--color-line-2);
  line-height: 1.25;
  white-space: nowrap;
}
.chip--ok      { background: var(--color-sage-3);   color: #2c4733; border-color: var(--color-sage-2); }
.chip--info    { background: #DBE5EF;               color: var(--color-ink); border-color: #B9CADB; }
.chip--warn    { background: var(--color-coral-3);  color: #6a2f17; border-color: var(--color-coral-2); }
.chip--danger  { background: #F2C8C8;               color: #6a2222; border-color: var(--color-danger); }
.chip--muted   { background: var(--color-cream-2);  color: var(--text-muted); border-color: var(--color-line); }

/* ---------- Callouts (alert banners) ---------- */
.callout {
  background: var(--bg-card);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-ink-2);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-4);
}
.callout p { margin: 0; }
.callout p + p { margin-top: var(--space-3); }
.callout--ok    { border-left-color: var(--color-sage-2);  background: #F4F8F1; }
.callout--warn  { border-left-color: var(--color-coral-2); background: #FCEFE5; }
.callout--danger{ border-left-color: var(--color-danger);  background: #FBEEEE; }

/* ---------- Account tables (domain list, billing, audit, etc.) ---------- */
.account-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
.account-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.account-table th,
.account-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-line);
  vertical-align: middle;
}
.account-table thead th {
  background: var(--color-mist);
  font-weight: 600;
  font-size: var(--fs-xs);
  color: var(--color-ink-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.account-table tbody tr:hover { background: var(--color-cream-3); }
.account-table tbody tr:last-child td { border-bottom: 0; }
.account-table code { font-size: var(--fs-sm); color: var(--color-ink-2); }

/* ---------- Dashboard filter bar (search + quick filters) ---------- */
.domain-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-4);
}
.domain-filter input[type="search"] {
  flex: 1 1 16rem;
  min-width: 12rem;
  padding: 0.65rem 1rem;
  background: var(--bg-card);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius);
  font: inherit;
  color: var(--color-ink);
}
.domain-filter__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip--btn {
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.chip--btn:hover { border-color: var(--color-sage-2); }
.chip--btn.is-active {
  background: var(--color-ink);
  color: var(--color-cream);
  border-color: var(--color-ink);
}

/* ---------- Responsive account tables (stack to cards ≤760px) ----------
   Each <td> carries data-label="…" so we can paint the column header
   inline when the columns stack. Rows become bordered cards. */
@media (max-width: 760px) {
  .account-table thead { display: none; }
  .account-table,
  .account-table tbody,
  .account-table tr,
  .account-table td { display: block; width: 100%; }
  .account-table tr {
    border-bottom: 1px solid var(--color-line);
    padding: var(--space-3) 0;
  }
  .account-table tr:last-child { border-bottom: 0; }
  .account-table td {
    border-bottom: 0;
    padding: 0.25rem var(--space-4);
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
  }
  .account-table td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    flex: 0 0 7rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
  }
  .account-table .account-table__actions { text-align: left !important; margin-top: var(--space-2); }
}

/* ---------- Fact list (key/value pairs on the domain overview) ---------- */
.fact-list {
  display: grid;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0;
}
.fact-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-line);
}
.fact-row:last-child { border-bottom: 0; }
.fact-row dt {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.fact-row dd {
  margin: 0;
  color: var(--color-ink);
  word-break: break-word;
}

/* ---------- Action lists (right-rail buttons on domain page) ---------- */
.action-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}
.action-list .btn,
.action-list button {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}
.action-list form { display: block; }
.action-list button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--color-cream-2);
  border-color: var(--color-line);
  color: var(--text-muted);
}

/* ---------- Nameserver list ---------- */
.ns-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}
.ns-list code {
  display: inline-block;
  background: var(--color-cream-2);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

/* ---------- Radio rows (nameserver mode picker, bulk actions) ---------- */
.radio-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--bg-card);
  cursor: pointer;
  margin-bottom: var(--space-3);
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.radio-row:hover { border-color: var(--color-sage-2); }
.radio-row input[type="radio"] { margin-top: 0.25rem; flex-shrink: 0; }
.radio-row input[type="radio"]:checked + span strong { color: var(--color-coral-2); }
.radio-row span { display: block; }
.radio-row .muted {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ---------- Details elements (collapsible sections) ---------- */
details > summary {
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
  list-style: none;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: "+";
  display: inline-block;
  width: 1em;
  font-weight: 700;
  color: var(--color-coral-2);
}
details[open] > summary::before { content: "–"; }
details[open] > summary { border-color: var(--color-sage-2); }

/* ---------- Dashboard-page tweaks ---------- */
.page-account .page-header { padding-top: var(--space-7); }
.page-account main { padding-bottom: var(--space-8); }

/* The action button row on /account/ home uses inline forms; keep them
   from breaking the row layout into vertical buttons. */
.page-account form[action$="/logout"] { display: inline-flex; }

/* Code in dashboard pages should be readable, not a tiny monospace blob. */
.page-account code {
  font-size: 0.95em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  background: var(--color-cream-2);
  padding: 0.05em 0.35em;
  border-radius: 4px;
}
.page-account pre code,
.page-account .account-table code { background: transparent; padding: 0; }

/* Smaller screens — collapse 2-col fact rows */
@media (max-width: 640px) {
  .fact-row { grid-template-columns: 1fr; gap: var(--space-1); }
  .fact-row dt { font-size: var(--fs-xs); }
  .form-inline { flex-direction: column; align-items: stretch; }
}

/* =============================================================
   Accessibility — focus-visible, reduced-motion, contrast
   ============================================================= */

/* Strong, visible focus ring for keyboard nav across every interactive
   element in the dashboard. We use :focus-visible (not :focus) so a
   pointer click doesn't paint an outline — the ring only shows when
   the user actually tabbed there. Falls back to :focus on older
   browsers via the bare selector below. */
.page-account a:focus-visible,
.page-account button:focus-visible,
.page-account .btn:focus-visible,
.page-account input:focus-visible,
.page-account select:focus-visible,
.page-account textarea:focus-visible,
.page-account details > summary:focus-visible,
.page-account .radio-row:focus-within {
  outline: 3px solid var(--color-coral-2);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(232,154,117,0.25);
  border-radius: var(--radius-sm);
}

/* Inputs already get a sage focus ring from the .form-field__input rule —
   keep that for pointer/touch and overlay the coral ring for keyboard. */
.page-account .form-field__input:focus-visible,
.page-account .form-field select:focus-visible,
.page-account .form-field textarea:focus-visible {
  outline-offset: 0;
  border-color: var(--color-coral-2);
}

/* Buttons: keep the existing visual but with a clearer keyboard ring. */
.page-account .btn:focus-visible {
  outline-offset: 3px;
}

/* Honor reduced-motion preference — disable the transform-on-hover
   effects and any animation. */
@media (prefers-reduced-motion: reduce) {
  .page-account *,
  .page-account *::before,
  .page-account *::after {
    transition: none !important;
    animation: none !important;
  }
  .page-account .btn:hover { transform: none; }
}

/* Touch-target minimums. WCAG 2.5.5 recommends 44×44 CSS pixels for
   interactive controls. Our .btn--sm sits at ~36px — bump it on touch
   devices so it's tappable without missing. */
@media (hover: none) and (pointer: coarse) {
  .page-account .btn--sm,
  .page-account button[type="submit"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* High-contrast chip text rescue. The default chip text colors above are
   contrast-checked against their backgrounds for WCAG AA (4.5:1), but
   chip--info hovered around 4.3:1 — bump to a darker ink. */
.chip--info {
  color: var(--color-ink-3);
  border-color: #9DB1C9;
}

/* When a form has just had an error flash, scroll-margin keeps the
   callout out from under the sticky header (if any) on browsers that
   honor it. Harmless otherwise. */
.callout[role="alert"],
.callout[role="status"] {
  scroll-margin-top: var(--space-5);
}

/* Skip-link is in styles.css but never had a visible-on-focus rule for
   the account body class. Mirror what the marketing site does. */
.page-account .skip-link:focus {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  padding: var(--space-3) var(--space-4);
  background: var(--color-ink);
  color: var(--color-cream);
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
}