:root {
    /* =============== Design tokens — single source of truth ===============
       Dark teal system. Every color in the app must come from a token here;
       no hex literals in components. The generic legacy names (--bg, --surface,
       --primary, …) are mapped onto the new tokens at the bottom of this block
       so per-route CSS written before this system flips to dark automatically.
       New code should reference the named tokens directly. See DESIGN.md. */

    /* ---- Surfaces (depth is this ramp, never a shadow) ---- */
    --surface-base:   #0A0E17;   /* app background, sidebar */
    --surface-raised: #0E1420;   /* header bar, right rail */
    --surface-panel:  #111827;   /* cards, section panels */
    --surface-input:  #0C121D;   /* select / input fills */
    --surface-hover:  #16203046; /* row and item hover (26% tint) */

    /* ---- Borders ---- */
    --border-subtle:  #1C2534;   /* panel outlines, dividers */
    --border-strong:  #2A3648;   /* input borders, secondary button */
    --border-focus:   #2DD4BF;   /* :focus-visible ring */

    /* ---- Text ---- */
    --text-primary:   #E6EAF2;   /* headings, values, body */
    --text-secondary: #94A3B8;   /* helper copy, field labels */
    --text-muted:     #64748B;   /* eyebrow labels, counts */
    --text-on-accent: #06121A;   /* text on a teal fill */

    /* ---- Accent — teal is the ONLY identity / active / primary-action color ---- */
    --accent:       #2DD4BF;
    --accent-hover: #5EEAD4;
    --accent-dim:   #2DD4BF1F;   /* 12% tint — active-state fills, focus ring */

    /* ---- Signal — violet = motion UI only; green = pass states only ---- */
    --signal-motion:  #8B5CF6;
    --signal-success: #10B981;

    /* ---- Workspace dots ---- */
    --ws-dev:         #8B5CF6;
    --ws-adranava:    #2DD4BF;
    --ws-boredlisted: #F97316;
    --ws-admin:       #64748B;

    /* ---- Geometry ---- */
    --radius-input: 6px;    /* inputs, buttons */
    --radius-panel: 10px;   /* panels, cards */
    --radius-pill:  999px;  /* pills, badges */

    /* ---- Legacy aliases: old generic names → new tokens ----
       Lets pre-existing per-route CSS inherit the dark theme untouched.
       These will be retired as each file is swept onto named tokens. */
    --bg:            var(--surface-base);
    --surface:       var(--surface-panel);
    --text:          var(--text-primary);
    --muted:         var(--text-secondary);
    --border:        var(--border-subtle);
    --primary:       var(--accent);
    --primary-dark:  var(--accent-hover);
    --primary-soft:  var(--accent-dim);
    --success-bg:    #10B9811F;      /* 12% green tint */
    --success-text:  var(--signal-success);
    --error-bg:      #F871711F;      /* 12% red tint */
    --error-text:    #F87171;        /* dark-mode danger (not in spec palette; see DESIGN.md) */
    --radius:        var(--radius-panel);
    --shadow:        none;           /* spec: no shadows anywhere — neutralizes legacy usages */
}

* { box-sizing: border-box; }

body {
    margin: 0;
    /* One geometric sans. Swap in self-hosted Inter (variable woff2 + one
       @font-face) later without touching anything else. */
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--surface-base);
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.5;
    min-height: 100vh;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* Visible keyboard focus everywhere. Components may override with a ring. */
:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.container {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---- Header: fixed 56px bar — logo | centered nav | actions ---- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    height: 56px;
    padding: 0 20px;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border-subtle);
}

.brand {
    justify-self: start;
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* Wordmark is 206×40; painted at 26px tall inside the 56px bar, width derived
   from the aspect ratio so it stays undistorted. */
.brand__logo {
    display: block;
    height: 26px;
    width: auto;
}

/* Centered primary nav. Active item is primary text with a 2px accent
   underline flush to the header's bottom border. */
.top-nav {
    justify-self: center;
    display: flex;
    gap: 2px;
}

.top-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 56px;
    padding: 0 12px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 120ms ease-out;
}

.top-nav__link:hover { color: var(--text-primary); }

.top-nav__link.is-active { color: var(--text-primary); }

.top-nav__link.is-active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    background: var(--accent);
}

.header-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-input);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 120ms ease-out, color 120ms ease-out;
}

.icon-btn:hover { background: var(--surface-hover); color: var(--text-primary); }

.icon-btn__glyph { display: block; width: 18px; height: 18px; }

/* ---- Account menu: the header chip is the trigger, the panel drops below ---- */
.user-menu { position: relative; }

.user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 6px 0 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-input);
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

.user-chip:hover { background: var(--surface-hover); }

.user-chip__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background: var(--accent-dim);
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
}

.user-chip__meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.user-chip__name { font-size: 13px; color: var(--text-primary); }
.user-chip__role { font-size: 11px; color: var(--text-muted); }

.user-chip__caret {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--text-muted);
    transition: transform 120ms ease-out;
}

/* Panel is hidden until the menu is hovered, focused, or clicked open.
   :focus-within covers the keyboard, so the menu still works without JS. */
.user-menu__panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 70;
    min-width: 200px;
    padding: 6px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-panel);
    background: var(--surface-raised);
    box-shadow: 0 12px 28px rgba(2, 6, 12, 0.45);
}

/* Bridges the 6px gap below the trigger, so travelling from the chip down to
   an item does not cross dead space and collapse a hover-opened panel. */
.user-menu__panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -6px;
    height: 6px;
}

.user-menu:hover .user-menu__panel,
.user-menu:focus-within .user-menu__panel,
.user-menu.is-open .user-menu__panel { display: block; }

/* An explicit click-to-close wins over the hover rule until the pointer leaves. */
.user-menu.is-dismissed .user-menu__panel { display: none; }

/* The caret mirrors the panel: up whenever it is showing, down whenever it is
   not — including the dismissed-but-still-hovered state, where the hover rule
   would otherwise leave it flipped over a closed panel. */
.user-menu:hover .user-chip__caret,
.user-menu:focus-within .user-chip__caret,
.user-menu.is-open .user-chip__caret { transform: rotate(180deg); }

.user-menu.is-dismissed .user-chip__caret { transform: none; }

.user-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: var(--text-secondary);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.user-menu__item:hover { background: var(--surface-hover); color: var(--text-primary); }
.user-menu__item:hover .user-menu__icon { color: var(--text-primary); }

.user-menu__item.is-active { color: var(--accent); }
.user-menu__item.is-active .user-menu__icon { color: var(--accent); }

.user-menu__icon {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--text-muted);
}

/* Sign out sits last, ruled off from the account items above it. */
.user-menu__form {
    margin: 6px 0 0;
    padding-top: 6px;
    border-top: 1px solid var(--border-subtle);
}

/* Desktop reads Settings from the header menu, so the sidebar drops its
   Account band. The mobile drawer keeps it (see the responsive block). */
.app-nav__group--account { display: none; }

.inline-form { display: inline; margin: 0; }

/* Burger — opens the mobile nav drawer. Desktop keeps the static sidebar, so
   it only appears under the 900px breakpoint (see the responsive block). */
.burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-input);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.burger:hover { background: var(--surface-hover); color: var(--text-primary); }

/* ---- Mobile nav drawer: identity header, sign-out footer, scrim ----
   All three are drawer-only furniture — hidden until the sidebar becomes a
   drawer, then revealed by the responsive block. */
.nav-user,
.nav-signout,
.nav-scrim { display: none; }

.nav-user {
    align-items: center;
    gap: 10px;
    padding: 4px 4px 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.nav-user__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: var(--radius-pill);
    background: var(--accent-dim);
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
}

.nav-user__meta {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
}

.nav-user__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-user__role { font-size: 11px; color: var(--text-muted); }

.nav-signout {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}

.nav-signout__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: var(--text-secondary);
    text-align: left;
    cursor: pointer;
}

.nav-signout__btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.nav-signout__btn:hover .app-nav__icon { color: var(--text-primary); }

.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    width: 100%;
    padding: 0;
    border: 0;
    background: rgba(2, 6, 12, 0.6);
    cursor: pointer;
}

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-input);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}

/* Primary: teal fill, dark text. No gradient, no shadow. */
.btn-primary {
    background: var(--accent);
    color: var(--text-on-accent);
}

.btn-primary:hover { background: var(--accent-hover); }

/* Secondary: outlined, fills on hover. */
.btn-ghost {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.btn-ghost:hover { background: var(--surface-hover); border-color: var(--border-strong); }

.btn-lg { height: 44px; padding: 0 22px; font-size: 14px; }
.btn-block { width: 100%; }

/* Main */
.main {
    flex: 1;
    padding: 48px 20px 64px;
}

/* Edge-to-edge variant: the view owns its own width and padding, so full-bleed
   rules (section dividers, background bands) can reach the viewport edge. */
.main--bare {
    padding: 0;
}

/* Hero */
.hero {
    text-align: center;
    padding: 48px 0 24px;
}

.hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1.2;
    letter-spacing: -0.03em;
    margin: 0 0 16px;
}

.lede {
    color: var(--muted);
    font-size: 1.1rem;
    max-width: 560px;
    margin: 0 auto 28px;
}

.hero-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Feature cards */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 48px;
}

.feature-card {
    background: var(--surface-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-panel);
    padding: 20px;
}

.feature-card h3 { margin: 0 0 8px; font-size: 16px; }
.feature-card p { margin: 0; color: var(--text-secondary); font-size: 13px; }

/* ---- Image-generation cost visualisation ---- */
/* Occupies the space of the removed tool card: spans two grid tracks when the
   row is wide enough, collapses to one on narrow viewports. */
.cost-viz { grid-column: span 2; display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 720px) { .cost-viz { grid-column: span 1; } }

.cost-viz__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cost-viz__head h3 { margin: 0; }
.cost-viz__hint { font-size: 11px; color: var(--text-muted); }

/* Stat tiles */
.stat-row { display: flex; flex-wrap: wrap; gap: 10px; }
.stat {
    flex: 1 1 120px;
    background: var(--surface-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-input);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stat__value { font-size: 22px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.02em; }
.stat__value--fail { color: #DC2626; }
.stat__label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* Cost-per-image bar chart. Rendered as inline SVG so bar geometry lives in
   element attributes, not inline styles the strict CSP would strip. Fills come
   from these classes (never an inline style). */
.cost-chart { margin: 0; }
.cost-chart__title { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.cost-chart__svg { display: block; width: 100%; height: 120px; }
.cost-bar { fill: var(--accent); transition: fill 120ms ease; }
.cost-bar:hover { fill: var(--accent-hover); }
.cost-chart__axis {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 10px;
    color: var(--text-muted);
}

/* Cost composition: stacked SVG bar + legend */
.comp__title { font-size: 12px; color: var(--text-secondary); margin: 0 0 8px; }
.comp__bar {
    height: 14px;
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.comp__svg { display: block; width: 100%; height: 100%; }
.comp-fill--image  { fill: #0D9488; }
.comp-fill--text   { fill: #7C3AED; }
.comp-fill--output { fill: #EA580C; }
.comp-fill--ok     { fill: #16A34A; }
.comp-fill--fail   { fill: #DC2626; }
.comp__legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.comp__item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.comp__dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.comp__dot--image  { background: #0D9488; }
.comp__dot--text   { background: #7C3AED; }
.comp__dot--output { background: #EA580C; }
.comp__dot--ok     { background: #16A34A; }
.comp__dot--fail   { background: #DC2626; }
.comp__name { color: var(--text-secondary); }
.comp__amt { margin-left: auto; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.comp__pct { color: var(--text-muted); margin-left: 6px; }

/* Auth card */
.auth-card {
    background: var(--surface-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-panel);
    max-width: 440px;
    margin: 24px auto;
    padding: 32px;
}

.auth-card h1 {
    margin: 0 0 4px;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
}

.muted { color: var(--muted); font-size: 0.95rem; }
.center { text-align: center; }

/* Forms */
.field { margin-bottom: 16px; }

label {
    display: block;
    font-weight: 500;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-input);
    font-size: 13px;
    font-family: inherit;
    background: var(--surface-input);
    color: var(--text-primary);
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim);
}

.hint {
    color: var(--text-secondary);
    font-size: 12px;
    margin: 6px 0 0;
}

.field-error {
    color: var(--error-text);
    font-size: 0.85rem;
    margin: 6px 0 0;
}

/* Checkbox row (e.g. "Keep me logged in") */
.checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    font-weight: 400;
    font-size: 0.95rem;
    cursor: pointer;
}

.checkbox input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--primary);
}

form .btn-block { margin-top: 8px; }

/* Honeypot: visually removed, still in the DOM for bots */
.hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* Social sign-in */
.divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 16px;
    color: var(--muted);
    font-size: 0.85rem;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.social-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.btn-social:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

.btn-social svg { flex-shrink: 0; }

/* Alerts */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-input);
    margin-bottom: 16px;
    font-size: 13px;
    border: 1px solid transparent;
}

.alert-success { background: var(--success-bg); color: var(--success-text); border-color: var(--signal-success); }
.alert-error { background: var(--error-bg); color: var(--error-text); border-color: var(--error-text); }

/* Dashboard */
.dashboard h1 { margin: 0 0 8px; letter-spacing: -0.02em; }
.dashboard .lede { margin: 0 0 8px; }

/* Footer */
.site-footer {
    border-top: 1px solid var(--border-subtle);
    padding: 20px 0;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}

/* ---- App shell: sidebar | main | optional right rail, under the header ---- */
.app-shell {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    min-height: calc(100vh - 56px);
}

.app-shell.has-rail {
    grid-template-columns: 220px minmax(0, 1fr) 240px;
}

.app-sidebar {
    position: sticky;
    top: 56px;
    height: calc(100vh - 56px);
    overflow-y: auto;
    padding: 16px 12px;
    background: var(--surface-base);
    border-right: 1px solid var(--border-subtle);
}

.app-content {
    min-width: 0;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
}

.app-rail {
    position: sticky;
    top: 56px;
    height: calc(100vh - 56px);
    overflow-y: auto;
    padding: 20px;
    background: var(--surface-raised);
    border-left: 1px solid var(--border-subtle);
}

/* ---- Right-rail summary primitives (read-only) ---- */
.rail-group + .rail-group {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
}

.rail-eyebrow {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.rail-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
}

.rail-label { font-size: 12px; color: var(--text-secondary); }
.rail-value { font-size: 12px; color: var(--text-primary); text-align: right; }

/* ---- Sidebar navigation ---- */
.app-nav__group + .app-nav__group { margin-top: 20px; }

.app-nav__title {
    margin: 0 0 8px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Collapsible band inside a section (Assets / Create / My Work). Native
   <details>, so the chevron and the open/closed state cost no JS. */
.app-nav__subgroup { margin-top: 12px; }

.app-nav__subtitle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
}

/* Safari still paints the default disclosure triangle without this. */
.app-nav__subtitle::-webkit-details-marker { display: none; }

.app-nav__subtitle:hover { color: var(--text-secondary); }

.app-nav__chevron {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: currentColor;
    transition: transform 120ms ease-out;
}

/* Chevron points down when open, right when collapsed. */
.app-nav__subgroup:not([open]) .app-nav__chevron { transform: rotate(-90deg); }

.app-nav__list,
.app-nav__sublist { list-style: none; margin: 0; padding: 0; }

/* Indent so an item's icon lines up with its subgroup's label. */
.app-nav__subgroup .app-nav__list { padding-left: 20px; }

.app-nav__item { margin: 2px 0; }

.app-nav__link {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background 120ms ease-out, color 120ms ease-out;
}

/* Leading line-icon; muted until the row is hovered/active. */
.app-nav__icon {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--text-muted);
}

a.app-nav__link:hover { background: var(--surface-hover); color: var(--text-primary); }
a.app-nav__link:hover .app-nav__icon { color: var(--text-primary); }

.app-nav__link.is-active {
    background: var(--accent-dim);
    color: var(--accent);
    font-weight: 600;
}

.app-nav__link.is-active .app-nav__icon { color: var(--accent); }

.app-nav__link.is-disabled { color: var(--text-muted); cursor: default; }

.app-nav__sublist {
    margin: 2px 0 2px 8px;
    padding-left: 10px;
    border-left: 1px solid var(--border-subtle);
}

.app-nav__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-nav__soon {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--border-strong);
    padding: 1px 8px;
    border-radius: var(--radius-pill);
}

/* Workspace section: right-aligned count badge, left colour dot. */
.app-nav__count {
    margin-left: auto;
    min-width: 18px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: right;
}

.app-nav__link.is-active .app-nav__count { color: var(--accent); }

.app-nav__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    flex: 0 0 auto;
}

/* Space colour dots — painted by class (not an inline style) so they survive
   the strict CSP that strips inline style attributes. Shared by the sidebar
   (.app-nav__dot) and the task rows/detail (.dot). Palette mirrors
   space_color()/space_color_class() in helpers.php. */
.space-dot--indigo { background: #6366F1; }
.space-dot--teal   { background: #2DD4BF; }
.space-dot--orange { background: #F97316; }
.space-dot--gray   { background: #64748B; }
.space-dot--blue   { background: #3B82F6; }
.space-dot--green  { background: #10B981; }
.space-dot--red    { background: #F87171; }
.space-dot--purple { background: #8B5CF6; }
.space-dot--pink   { background: #EC4899; }

/* ---- Responsive: collapse rail (<1280) then sidebar (<900) ---- */
@media (max-width: 1280px) {
    .app-shell.has-rail { grid-template-columns: 220px minmax(0, 1fr); }
    .app-rail { display: none; }
}

/* Under 900px the sidebar leaves the grid and becomes an off-canvas drawer
   opened by the header burger (app-nav.js toggles `nav-open` on <body>).
   Identity and sign-out move into the drawer, so the header's user chip is
   dropped rather than duplicated. */
@media (max-width: 900px) {
    /* The sidebar becomes a fixed drawer parked off the right edge (`.app-sidebar`
       below: position: fixed; transform: translateX(100%)). Some engines — iOS
       Safari notably — count that off-screen box as page width and let the whole
       page be dragged sideways, leaving an empty strip on the right. Clip the
       page's own horizontal overflow at the root so it can't. `clip`, not
       `hidden`: hidden on the root turns it into a scroll container and the
       sticky header scrolls away with the page; clip removes the horizontal
       scroll while leaving sticky intact. The week strip keeps its own
       `overflow-x: auto`, which is a nested scroll container and unaffected. */
    html, body { overflow-x: clip; }

    .app-shell,
    .app-shell.has-rail { grid-template-columns: 1fr; }

    .top-nav { display: none; }
    /* Identity and the account items live in the drawer at this width. */
    .user-menu { display: none; }
    .app-nav__group--account { display: block; }
    .burger { display: inline-flex; }

    .app-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        width: min(320px, 86vw);
        height: 100%;
        padding: 16px 12px calc(16px + env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--surface-raised);
        border-right: 0;
        border-left: 1px solid var(--border-subtle);
        /* Hidden from tab order and assistive tech until opened. */
        visibility: hidden;
        transform: translateX(100%);
        transition: transform 200ms ease-out, visibility 200ms ease-out;
    }

    .nav-user { display: flex; }
    .nav-signout { display: block; }

    body.nav-open { overflow: hidden; }
    body.nav-open .app-sidebar { visibility: visible; transform: translateX(0); }
    body.nav-open .nav-scrim { display: block; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
    .app-sidebar { transition: none; }
}

/* Profile photo inside the header chip and drawer avatars (phase17). The
   containers are already circular with overflow hidden; the image just needs to
   fill them without distorting. object-fit matters because the source is a
   square centre-crop but the container could change size later. */
.user-chip__avatar__img,
.nav-user__avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}