/* Account — the Clean theme.
 *
 * The modern look from the clean-theme plan: system font, white or
 * near-black cards, hairline separators, one blue accent, soft layered
 * shadows, rounded corners. Scoped under [data-theme="clean"] throughout for
 * the same reason retro.css is scoped — both sheets are always linked, so an
 * unscoped rule here would win over the other theme's the instant someone
 * switched back.
 *
 * The house tokens themselves (--bg, --surface, --text, --accent, --focus,
 * --radius, --shadow-*, --font-body…) come from css/kit/clean-tokens.css,
 * light and dark, linked before this file (clean-theme plan, section 4).
 * This file restates only the avatar hue tints, which are app-local, and
 * expresses every component from plan section 4.4 against Account's own
 * markup. No web font is declared here: this theme asks for the faces the
 * device already has, which is the whole point of the system stack.
 */

:root[data-theme="clean"] {
  --hue-0-bg: #ffe0ef; --hue-0-fg: #9b1350;
  --hue-1-bg: #dcecff; --hue-1-fg: #0b4ea2;
  --hue-2-bg: #dcf5e4; --hue-2-fg: #146c2e;
  --hue-3-bg: #ffeed0; --hue-3-fg: #7a4a00;
  --hue-4-bg: #ece0ff; --hue-4-fg: #5227a8;
  --hue-5-bg: #ffe4d6; --hue-5-fg: #8f3a00;
  --hue-6-bg: #d6f5f0; --hue-6-fg: #0f5f57;
  --hue-7-bg: #fbf3cf; --hue-7-fg: #6b5500;
  --hue-8-bg: #e6f5d6; --hue-8-fg: #3f5f00;
  --hue-9-bg: #ffe2e2; --hue-9-fg: #a3121f;
}

/* Dark, chosen. Keep byte-identical to the block under the media query
   below (clean-theme plan, section 6; tests/kit/css-helpers.js
   darkBlocksIdentical checks it). */
:root[data-theme="clean"][data-scheme="dark"] {
  --hue-0-bg: #3d1030; --hue-0-fg: #ffb3dd;
  --hue-1-bg: #0a2440; --hue-1-fg: #a8d4ff;
  --hue-2-bg: #0d3020; --hue-2-fg: #9fe6b4;
  --hue-3-bg: #3a2a08; --hue-3-fg: #ffd98a;
  --hue-4-bg: #2a1a45; --hue-4-fg: #d4bbff;
  --hue-5-bg: #3d2010; --hue-5-fg: #ffc0a0;
  --hue-6-bg: #0d3330; --hue-6-fg: #99ebe0;
  --hue-7-bg: #3a3410; --hue-7-fg: #ffef8a;
  --hue-8-bg: #223808; --hue-8-fg: #cdf59a;
  --hue-9-bg: #3d1418; --hue-9-fg: #ffb3b8;
}

/* Dark, from the system while the scheme is "system" (or unset). */
@media (prefers-color-scheme: dark) {
:root[data-theme="clean"]:not([data-scheme="light"]) {
  --hue-0-bg: #3d1030; --hue-0-fg: #ffb3dd;
  --hue-1-bg: #0a2440; --hue-1-fg: #a8d4ff;
  --hue-2-bg: #0d3020; --hue-2-fg: #9fe6b4;
  --hue-3-bg: #3a2a08; --hue-3-fg: #ffd98a;
  --hue-4-bg: #2a1a45; --hue-4-fg: #d4bbff;
  --hue-5-bg: #3d2010; --hue-5-fg: #ffc0a0;
  --hue-6-bg: #0d3330; --hue-6-fg: #99ebe0;
  --hue-7-bg: #3a3410; --hue-7-fg: #ffef8a;
  --hue-8-bg: #223808; --hue-8-fg: #cdf59a;
  --hue-9-bg: #3d1418; --hue-9-fg: #ffb3b8;
}
}

[data-theme="clean"] body {
  background-color: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ============================== Controls =================================
 * First, so every later rule with its own look out-specifies it. Without a
 * plain-button rule any bare button falls back to the browser's own chrome,
 * which matches neither theme. This is the plan's "Secondary button".
 */
/* :not(.wp-segment) so this doesn't reach into Kit's appearance control: its
   segments are plain <button>s meant to render as transparent labels over
   one sliding thumb (css/kit/appearance.css), not as this app's outlined
   secondary button (review F3). */
[data-theme="clean"] button:not(.wp-segment),
[data-theme="clean"] .button {
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-alt);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: var(--weight-medium);
}

@media (hover: hover) {
  [data-theme="clean"] button:not(.wp-segment):where(:not(:disabled)):hover,
  [data-theme="clean"] .button:hover {
    background-color: var(--surface-alt);
  }
}

[data-theme="clean"] button:not(.wp-segment):where(:not(:disabled)):active,
[data-theme="clean"] .button:active {
  opacity: 0.85;
}

[data-theme="clean"] input,
[data-theme="clean"] select,
[data-theme="clean"] textarea {
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-alt);
  border-radius: var(--radius-sm);
}

[data-theme="clean"] input:focus-visible,
[data-theme="clean"] select:focus-visible,
[data-theme="clean"] textarea:focus-visible {
  border-color: var(--focus);
  box-shadow: var(--ring);
}

[data-theme="clean"] ::placeholder { color: var(--text-faint); opacity: 1; }

[data-theme="clean"] .field-row > label,
[data-theme="clean"] .field-label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
}

/* Primary button. :not(.wp-segment) mirrors the plain button rule above,
   (0,2,1), and lifts this one to (0,3,0) so it wins: without it a primary
   button rendered outlined like any other (review A3b). */
[data-theme="clean"] .primary:not(.wp-segment) {
  background-color: var(--accent);
  color: var(--accent-text);
  border: 1px solid var(--accent);
  font-weight: var(--weight-medium);
}

@media (hover: hover) {
  [data-theme="clean"] .primary:not(.wp-segment):where(:not(:disabled)):hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: var(--shadow-1);
  }
}

/* Danger button: outlined, fills on hover — the iOS idiom for a destructive
   action, next to a filled primary. :not(.wp-segment) out-specifies the
   plain button rule, as on .primary (review RB-1). */
[data-theme="clean"] .danger:not(.wp-segment) {
  background-color: var(--surface);
  /* --danger-soft-text, not --danger: in dark --danger is a fill (3.3:1 on
     --surface); --danger-soft-text is the pair built for danger-hued text. */
  color: var(--danger-soft-text);
  border: 1px solid var(--danger);
  font-weight: var(--weight-medium);
}

@media (hover: hover) {
  [data-theme="clean"] .danger:not(.wp-segment):where(:not(:disabled)):hover {
    background-color: var(--danger);
    color: var(--danger-text);
  }
}

/* Link / text button: no chrome, underline on hover. button.link-btn
   :not(.wp-segment), (0,3,1), out-specifies the plain button rule above,
   (0,2,1): at (0,2,0) the link button wore the secondary button's border
   and fill (RA8-2). */
[data-theme="clean"] button.link-btn:not(.wp-segment) {
  color: var(--link);
  font-weight: var(--weight-medium);
  background: none;
  border: 0;
  padding: 0.25rem 0;
  box-shadow: none;
}

@media (hover: hover) {
  [data-theme="clean"] button.link-btn:not(.wp-segment):where(:not(:disabled)):hover {
    background: none;
    text-decoration: underline;
  }
}

/* The password Show toggle (RAU1b-1): room for a box at rest, and when
   pressed (the password is shown) an outlined accent-soft chip with no
   underline, so the state is not colour alone. The rest padding carries
   the border's width, so pressing moves nothing. (0,5,1) out-specifies
   the link button and its hover (0,4,1). */
[data-theme="clean"] button.link-btn.pw-toggle:not(.wp-segment) {
  padding: calc(0.25rem + 1px) calc(0.6rem + 1px);
  border-radius: var(--radius-sm);
}

[data-theme="clean"] button.link-btn.pw-toggle[aria-pressed="true"]:not(.wp-segment) {
  color: var(--accent-soft-text);
  background-color: var(--accent-soft);
  padding: 0.25rem 0.6rem;
  border: 1px solid currentColor;
  text-decoration: none;
}

/* A disabled button looks it: faded, a not-allowed cursor, and no hover or
   press change (the :hover and :active rules above skip it). Without this a
   disabled Allow looked ready to press (RA8-1). */
[data-theme="clean"] button:disabled:where(:not(.wp-segment)),
[data-theme="clean"] .button:disabled:where(:not(.wp-segment)) {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

[data-theme="clean"] .errors {
  background-color: var(--danger-soft);
  color: var(--danger-soft-text);
  border: 1px solid var(--danger);
}

[data-theme="clean"] .muted,
[data-theme="clean"] .person-sub {
  color: var(--text-muted);
}

/* Empty state (4.4): muted centred copy in a dashed border box. Specificity
   over .card-list > li (0,1,1): an empty placeholder is the one <li> in the
   list and reads as its own component, not a plain grouped-list row. */
[data-theme="clean"] .card-list > li.empty,
[data-theme="clean"] .empty {
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

/* ============================== The chrome =============================== */

/* Top bar: --surface with a bottom hairline; on scroll nothing changes
   shape (plan 4.4). */
[data-theme="clean"] #topbar {
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
}

[data-theme="clean"] #brand {
  color: var(--text);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}

/* ================================= Nav ===================================
 * Inactive text-muted, active accent with an accent-soft pill behind the
 * icon and label (plan 4.4, "Nav").
 */

[data-theme="clean"] #nav {
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
}

[data-theme="clean"] .nav-link {
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
}

@media (hover: hover) {
  [data-theme="clean"] .nav-link:hover {
    background-color: var(--surface-alt);
  }
}

[data-theme="clean"] .nav-link[aria-current="page"] {
  /* --accent-soft-text, not --accent: in dark, --accent is a fill, not a
     text colour (3.3:1 on a plain surface; --accent-soft-text is the pair
     built for text on --accent-soft). */
  color: var(--accent-soft-text);
  background-color: var(--accent-soft);
  font-weight: var(--weight-semibold);
}

/* ============================== Panels ====================================
 * Card / panel: --surface, a hairline border, --radius, --shadow-1 (4.4).
 */
[data-theme="clean"] .panel {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

[data-theme="clean"] .view-title { color: var(--text); }

[data-theme="clean"] .panel h2,
[data-theme="clean"] .panel h3 { color: var(--text); }

/* ============================ Cards and rows =============================
 * "List row (grouped list)" (4.4): the group itself is one --surface box
 * with a hairline border; the rows inside are plain, separated only by a
 * hairline inset from the left edge, and take the group's own rounded
 * corners at the first/last position via the group's overflow clip — not a
 * box of their own each (review F4: card-list was rendering as cards inside
 * cards, e.g. panel > .card > .app-link).
 */

[data-theme="clean"] .card-list {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  /* base.css's flex gap is the retro card-stack's spacing between separate
     boxes; the grouped list has no gap between its rows. */
  gap: 0;
}

/* Higher specificity than .card/.person-row/.sess-row below (one more
   compound), so it always wins regardless of source order. */
[data-theme="clean"] .card-list > li {
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* The hairline between rows is inset from the left; the row itself is not
   (a margin moved every row after the first, QC-12). A 1px image along the
   top, short of the left edge by --space-4, draws only the line. */
[data-theme="clean"] .card-list > li + li {
  background-image: linear-gradient(var(--border), var(--border));
  background-repeat: no-repeat;
  background-position: right top;
  background-size: calc(100% - var(--space-4)) 1px;
}

[data-theme="clean"] .card,
[data-theme="clean"] .person-row,
[data-theme="clean"] .sess-row {
  color: var(--text);
}

[data-theme="clean"] .sess-current {
  /* --link, not --accent, as text: --accent is a fill in dark (3.3:1 on
     --surface), --link is the pair built to sit on --surface as text. The
     3px inset rule (a status colour on a plain surface, as the toast uses)
     is the "current" mark now that rows carry no box of their own. */
  color: var(--link);
  box-shadow: inset 3px 0 0 0 var(--accent);
}

/* A plain full-width row, not a second outlined button — whether it's the
   sole link in a panel (Home's Admin section) or nested in a card-list row
   (Home's Apps). */
[data-theme="clean"] .app-link {
  background-color: transparent;
  border: 0;
  color: var(--link);
  font-weight: var(--weight-medium);
}

@media (hover: hover) {
  [data-theme="clean"] .app-link:hover {
    background-color: var(--surface-alt);
  }
}

[data-theme="clean"] .code {
  color: var(--link);
}

/* ================================ Badges =================================
 * accent-soft + accent-soft-text, radius-full, text-xs, weight medium (4.4).
 */

[data-theme="clean"] .badge {
  background-color: var(--accent-soft);
  color: var(--accent-soft-text);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

/* ================================ Avatars ================================ */

[data-theme="clean"] .avatar {
  background-color: var(--surface-alt);
  color: var(--text-muted);
}

[data-theme="clean"] .avatar[data-hue="0"] { background-color: var(--hue-0-bg); color: var(--hue-0-fg); }
[data-theme="clean"] .avatar[data-hue="1"] { background-color: var(--hue-1-bg); color: var(--hue-1-fg); }
[data-theme="clean"] .avatar[data-hue="2"] { background-color: var(--hue-2-bg); color: var(--hue-2-fg); }
[data-theme="clean"] .avatar[data-hue="3"] { background-color: var(--hue-3-bg); color: var(--hue-3-fg); }
[data-theme="clean"] .avatar[data-hue="4"] { background-color: var(--hue-4-bg); color: var(--hue-4-fg); }
[data-theme="clean"] .avatar[data-hue="5"] { background-color: var(--hue-5-bg); color: var(--hue-5-fg); }
[data-theme="clean"] .avatar[data-hue="6"] { background-color: var(--hue-6-bg); color: var(--hue-6-fg); }
[data-theme="clean"] .avatar[data-hue="7"] { background-color: var(--hue-7-bg); color: var(--hue-7-fg); }
[data-theme="clean"] .avatar[data-hue="8"] { background-color: var(--hue-8-bg); color: var(--hue-8-fg); }
[data-theme="clean"] .avatar[data-hue="9"] { background-color: var(--hue-9-bg); color: var(--hue-9-fg); }

/* ================================= Toast ==================================
 * Toast: --surface-raised, --shadow-3, --radius, a 3px left rule in the
 * status colour, the status -soft-text for the icon (4.4).
 */

[data-theme="clean"] .toast {
  background-color: var(--surface-raised);
  box-shadow: var(--shadow-3);
  border-radius: var(--radius);
  border-left: 3px solid var(--info);
}

[data-theme="clean"] .toast-info { color: var(--info-soft-text); border-left-color: var(--info); }
[data-theme="clean"] .toast-success { color: var(--success-soft-text); border-left-color: var(--success); }
[data-theme="clean"] .toast-error { color: var(--danger-soft-text); border-left-color: var(--danger); }

/* ============================ Compact widths =============================
 * The tab bar gets the frosted backdrop iOS gives it, with an opaque
 * fallback first so a browser without backdrop-filter still gets a bar you
 * cannot read the page through.
 */

@media (max-width: 700px) {
  [data-theme="clean"] #nav {
    background-color: var(--surface);
    border-bottom: 0;
    border-top: 1px solid var(--border);
  }
  [data-theme="clean"] .nav-link {
    border: 0;
    border-radius: 0;
    background: none;
  }
  [data-theme="clean"] .nav-link[aria-current="page"] {
    /* The pill stays at this width too (4.4 "Nav" asks for it on phones as
       much as anywhere): --accent-soft behind the icon+label, sized to the
       stacked layout rather than the wide nav's full-width pill. */
    background-color: var(--accent-soft);
    color: var(--accent-soft-text);
    border-radius: var(--radius-sm);
  }
}

@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
  @media (max-width: 700px) {
    [data-theme="clean"] #nav {
      background-color: color-mix(in srgb, var(--surface) 82%, transparent);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      backdrop-filter: saturate(180%) blur(20px);
    }
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  [data-theme="clean"] #nav {
    border-bottom: 0;
    border-right: 1px solid var(--border);
  }
}

[data-theme="clean"] .badge-quiet {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--text-muted);
}
[data-theme="clean"] .invite-url {
  color: var(--link);
}

/* =========================== Agents (agent access) ======================== */

[data-theme="clean"] .scope-group-name { color: var(--text); }
[data-theme="clean"] .scope-row { color: var(--text); }
@media (hover: hover) {
  [data-theme="clean"] .scope-row:hover { background-color: var(--surface-alt); }
}
[data-theme="clean"] .key-value {
  background-color: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
}

/* ===================== Friend link QR, new sign-in notice ================= */

/* Black on white in both schemes, not the tokens (RAF2-3): a light-on-dark
   QR is reversed and many scanners do not read it. */
[data-theme="clean"] .qr rect { fill: #fff; }
[data-theme="clean"] .qr path { fill: #000; }
[data-theme="clean"] .notice { border-left: 4px solid var(--warning); }

/* ===================== Schedule editor (FEAT-account-8) ==================== */

[data-theme="clean"] .sched-day {
  background-color: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

[data-theme="clean"] .sched-day-label { color: var(--text); }

[data-theme="clean"] .sched-interval {
  background-color: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
}

[data-theme="clean"] .sched-time-label { color: var(--text-muted); }

/* The sticky Save/Clear band (RAX1-7): the panel's own surface. */
[data-theme="clean"] #availability-panel > .form-actions {
  background-color: var(--surface);
  border-top: 1px solid var(--border);
}