/* ════════════════════════════════════════════════════════════════
   DD design system — designed 2026-05-13.

   Goals that drove every rule:
     1. ONE content width across all pages (no per-page overrides)
     2. Header layout that never reflows when auth state changes
     3. Type scale + spacing scale used consistently (no ad-hoc px)
     4. State patterns (loading / empty / error / success) defined
        once, used everywhere
     5. Focus states + accessibility from the start, not bolted on
     6. Mobile considered, not retrofitted

   Visual identity preserved from prior design (per Curtis):
     - Dark base (#0a0a14) with cobalt + violet gradient accents
     - Brand: ✨ gradient mark + "Diversified Dreams" wordmark
     - Glass-card aesthetic (subtle blur, low-opacity surfaces)
   ════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────
   Design tokens
   ────────────────────────────────────────────── */
:root {
  /* Color — surfaces */
  --bg-base:           #0a0a14;
  --bg-surface-1:      rgba(255, 255, 255, 0.03);
  --bg-surface-2:      rgba(255, 255, 255, 0.06);
  --bg-surface-3:      rgba(255, 255, 255, 0.09);
  --bg-inset:          rgba(0, 0, 0, 0.25);
  --bg-header:         rgba(10, 10, 20, 0.72);

  /* Color — borders */
  --border-faint:      rgba(255, 255, 255, 0.06);
  --border-subtle:     rgba(255, 255, 255, 0.10);
  --border-strong:     rgba(255, 255, 255, 0.18);

  /* Color — accents */
  --accent-primary:    #4f7df7;       /* cobalt */
  --accent-primary-rgb: 79, 125, 247;
  --accent-secondary:  #14b8a6;       /* teal */
  --accent-tertiary:   #a855f7;       /* violet — AI / ideation */
  --accent-tertiary-rgb: 168, 85, 247;

  /* Color — status */
  --status-success:    #10b981;
  --status-success-rgb: 16, 185, 129;
  --status-warning:    #f59e0b;
  --status-warning-rgb: 245, 158, 11;
  --status-error:      #ef4444;
  --status-error-rgb:  239, 68, 68;
  --status-info:       #4f7df7;

  /* Color — text */
  --text-primary:      #e8ecf5;
  --text-secondary:    #98a2b3;
  --text-tertiary:     #6b7587;
  --text-disabled:     #3d4555;
  --text-on-accent:    #ffffff;

  /* Typography */
  --font-sans: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-display:  28px;   /* page hero title */
  --fs-section:  18px;   /* card / section title */
  --fs-body:     15px;   /* default body */
  --fs-small:    13px;   /* labels, small text, nav */
  --fs-meta:     12px;   /* meta / footer / mono code */

  --lh-tight:    1.25;   /* headings */
  --lh-body:     1.55;   /* body */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semi:     600;

  /* Spacing — 4-based scale, no in-between values allowed */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* Radii */
  --r-sm:   6px;    /* inputs, small buttons, chips */
  --r-md:  10px;    /* buttons, controls */
  --r-lg:  14px;    /* cards */
  --r-full: 9999px; /* pills */

  /* Shadows */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.25);
  --shadow-focus: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.30);

  /* Motion */
  --motion-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --content-width: 1180px;   /* widened 2026-05-18 to accommodate the 7-link
                                primary nav (Home / Intake / Ideation / Catalog
                                / Promote / Config / Settings) plus the
                                380px account slot without nav overflowing
                                into the user-email chip. */
  --gutter:        var(--sp-5);
  --account-slot:  380px;   /* reserved width for signed-in account area;
                               wider than the 320px the redesign shipped with
                               so a typical 30+ char email fits without ellipsis
                               truncation AND has breathing room from the nav. */
}


/* ──────────────────────────────────────────────
   Reset + base
   ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* The HTML `hidden` attribute should always hide; never let class CSS
   override it. (Bit me once — won't again.) */
[hidden] { display: none !important; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--bg-base);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Atmospheric backdrop */
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(circle at 18% 0%,   rgba(79, 125, 247, 0.10), transparent 55%),
    radial-gradient(circle at 82% 100%, rgba(168, 85, 247, 0.07), transparent 55%);
  pointer-events: none;
  z-index: 0;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color var(--motion-fast);
}
a:hover { color: var(--accent-tertiary); }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }


/* Global keyboard-focus ring — every interactive element gets a
   visible outline when keyboard-focused. Mouse focus is suppressed. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: 3px;
}


/* ──────────────────────────────────────────────
   Layout shell — page-wide structure
   ────────────────────────────────────────────── */
.app {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--border-faint);
  background: var(--bg-header);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Header grid — three zones that never reflow:
     [brand+nav fluid-left]  [account fixed-right]

   The account zone is ALWAYS 320px wide whether signed in or signed
   out. When signed out, the slot is empty but its width is reserved,
   so nav position stays identical. (This is the bug the old design
   shipped — fixed for good here.) */
.app-header-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--sp-4) var(--gutter);
  display: grid;
  grid-template-columns: 1fr var(--account-slot);
  align-items: center;
  gap: var(--sp-6);   /* was sp-5; more breathing room between active nav-link
                         pill (left column) and account chip (right column) so
                         they don't read as one merged visual element. */
}

.app-header-left {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-width: 0;   /* allow flex children to truncate if needed */
}

.app-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
}

.app-main {
  flex: 1;
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--sp-7) var(--gutter) var(--sp-8);
}

.app-footer {
  border-top: 1px solid var(--border-faint);
  padding: var(--sp-5) var(--gutter);
  text-align: center;
  font-size: var(--fs-meta);
  color: var(--text-tertiary);
}

.app-footer code { color: var(--text-secondary); }


/* ──────────────────────────────────────────────
   Brand
   ────────────────────────────────────────────── */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: var(--fw-semi);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-decoration: none;
  flex-shrink: 0;
}
.brand:hover { color: var(--text-primary); }

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-tertiary));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.brand-name { font-size: var(--fs-body); white-space: nowrap; }


/* ──────────────────────────────────────────────
   Nav
   ────────────────────────────────────────────── */
.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.nav-link {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-small);
  color: var(--text-secondary);
  border-radius: var(--r-sm);
  transition: color var(--motion-fast), background var(--motion-fast);
}
.nav-link:hover { color: var(--text-primary); background: var(--bg-surface-1); }
.nav-link.is-active {
  color: var(--accent-primary);
  background: rgba(var(--accent-primary-rgb), 0.10);
}


/* ──────────────────────────────────────────────
   Account chip + sign-out — header right slot
   ────────────────────────────────────────────── */
.account {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;   /* allow inner email to truncate gracefully if absurdly long */
}

.account-email {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--text-secondary);
  padding: var(--sp-1) var(--sp-3);
  background: var(--bg-surface-1);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 290px;   /* fits a typical 30-35 char email without ellipsis;
                         absurdly long emails still truncate with tooltip in
                         HTML carrying the full value. */
}

.account-signout {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-meta);
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  transition: color var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast);
  flex-shrink: 0;
}
.account-signout:hover {
  color: var(--text-primary);
  background: var(--bg-surface-1);
  border-color: var(--border-strong);
}

/* Sign in link — sibling of .account, shown in the header right slot when
   signed out. Mirrors .account-signout visual treatment so the auth slot
   always has a consistent affordance. Only index.html currently uses this;
   other pages have in-page sign-in cards. */
.account-signin {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-meta);
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: color var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast);
  flex-shrink: 0;
}
.account-signin:hover {
  color: var(--text-primary);
  background: var(--bg-surface-1);
  border-color: var(--border-strong);
}


/* ──────────────────────────────────────────────
   Page header — title + subtitle at top of main
   ────────────────────────────────────────────── */
.page-header { margin-bottom: var(--sp-6); }

.page-title {
  font-size: var(--fs-display);
  font-weight: var(--fw-semi);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  background: linear-gradient(120deg, var(--text-primary), #c9d4e8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--sp-2);
}

.page-subtitle {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  max-width: 640px;
}


/* ──────────────────────────────────────────────
   Cards
   ────────────────────────────────────────────── */
.card {
  background: var(--bg-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.card + .card { margin-top: var(--sp-5); }

.card-header {
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
  border-bottom: 1px solid var(--border-faint);
}

.card-title {
  font-size: var(--fs-section);
  font-weight: var(--fw-semi);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.card-subtitle {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  margin-top: var(--sp-1);
}

.card-body { padding: var(--sp-5); }

.card-footer {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border-faint);
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
}


/* ──────────────────────────────────────────────
   Buttons — primary / secondary / ghost / danger
                + sizes (default, sm)
   ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  line-height: 1;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition:
    transform var(--motion-fast),
    background var(--motion-fast),
    border-color var(--motion-fast),
    color var(--motion-fast),
    box-shadow var(--motion-fast),
    opacity var(--motion-fast);
  user-select: none;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: translateY(1px); }

.btn--primary {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-tertiary));
  color: var(--text-on-accent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset, 0 6px 18px rgba(var(--accent-primary-rgb), 0.30);
}
.btn--primary:hover:not(:disabled) { filter: brightness(1.08); }

.btn--secondary {
  background: var(--bg-surface-2);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}
.btn--secondary:hover:not(:disabled) { background: var(--bg-surface-3); border-color: var(--border-strong); }

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}
.btn--ghost:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-surface-1); }

.btn--danger {
  background: linear-gradient(135deg, var(--status-warning), var(--status-error));
  color: var(--text-on-accent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset, 0 6px 18px rgba(var(--status-error-rgb), 0.25);
}
.btn--danger:hover:not(:disabled) { filter: brightness(1.08); }

.btn--sm { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-small); border-radius: var(--r-sm); }
.btn--full { width: 100%; }


/* ──────────────────────────────────────────────
   Form fields — label + input + help/error text
   ────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field + .field { margin-top: var(--sp-4); }

.field-label {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}
.field-label .field-optional { color: var(--text-tertiary); font-weight: var(--fw-regular); }

.field-input,
.field-textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: 1.4;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast);
}
.field-textarea { min-height: 120px; resize: vertical; line-height: 1.5; }

/* Native <select> dark-mode fix — applies wherever a <select> appears.
   color-scheme tells the browser to render the OS-native dropdown control
   in dark variant; the explicit option bg+color makes the dropdown list
   readable on Chromium/Firefox (Safari ignores option styling — accepted
   trade-off). Hex literals are opaque so the OS-rendered option list
   doesn't inherit token-based rgba transparency (which falls through to
   the OS default light gray on Chromium Windows). */
select { color-scheme: dark; }
select option {
  background-color: #1a1f2e;   /* opaque dark surface */
  color: #e8ecf5;              /* matches --text-primary */
}

.field-input::placeholder,
.field-textarea::placeholder { color: var(--text-tertiary); }

.field-input:focus,
.field-textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-focus);
  background: var(--bg-surface-1);
}

.field-help {
  font-size: var(--fs-meta);
  color: var(--text-tertiary);
}

.field-error {
  font-size: var(--fs-meta);
  color: #fca5a5;
}

.field-input[aria-invalid="true"],
.field-textarea[aria-invalid="true"] {
  border-color: rgba(var(--status-error-rgb), 0.6);
}


/* Checkbox */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.checkbox-row input[type="checkbox"] {
  width: 18px; height: 18px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--accent-primary);
}
.checkbox-row label {
  font-size: var(--fs-small);
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  line-height: 1.5;
}
.checkbox-row label small {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-meta);
  color: var(--text-tertiary);
}


/* ──────────────────────────────────────────────
   Chips — pills used for tags, vocab entries, etc.
   ────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  background: rgba(var(--accent-tertiary-rgb), 0.12);
  border: 1px solid rgba(var(--accent-tertiary-rgb), 0.30);
  border-radius: var(--r-full);
  font-size: var(--fs-small);
  color: var(--text-primary);
  line-height: 1.4;
}

.chip-remove {
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--status-error-rgb), 0.20);
  color: #fca5a5;
  border: none;
  border-radius: var(--r-full);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--motion-fast);
}
.chip-remove:hover { background: rgba(var(--status-error-rgb), 0.35); }


/* ──────────────────────────────────────────────
   Status badge — inline label for state/category
   ────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  border-radius: var(--r-sm);
  border: 1px solid currentColor;
  background: transparent;
  line-height: 1.4;
}
.badge--info    { color: var(--status-info); }
.badge--success { color: var(--status-success); }
.badge--warning { color: var(--status-warning); }
.badge--error   { color: var(--status-error); }


/* ──────────────────────────────────────────────
   Banner — full-width inline notice in a card
   ────────────────────────────────────────────── */
.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  border: 1px solid;
  font-size: var(--fs-small);
  line-height: 1.5;
}
.banner-icon { flex-shrink: 0; font-size: 16px; line-height: 1; }
.banner-body { flex: 1; min-width: 0; }
.banner-title { font-weight: var(--fw-semi); margin-bottom: 2px; color: var(--text-primary); }
.banner-text { color: var(--text-secondary); }

.banner--info    { background: rgba(var(--accent-primary-rgb), 0.06);  border-color: rgba(var(--accent-primary-rgb), 0.25); }
.banner--success { background: rgba(var(--status-success-rgb), 0.06);  border-color: rgba(var(--status-success-rgb), 0.25); }
.banner--warning { background: rgba(var(--status-warning-rgb), 0.06);  border-color: rgba(var(--status-warning-rgb), 0.25); }
.banner--error   { background: rgba(var(--status-error-rgb), 0.06);    border-color: rgba(var(--status-error-rgb), 0.25); }


/* ──────────────────────────────────────────────
   Result panel — for promote / ideation / backfill output
   ────────────────────────────────────────────── */
.result {
  padding: var(--sp-4);
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.result-title { font-size: var(--fs-section); font-weight: var(--fw-semi); color: var(--text-primary); }
.result-meta { font-size: var(--fs-meta); color: var(--text-tertiary); }
.result pre {
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  background: rgba(0, 0, 0, 0.35);
  border-radius: var(--r-sm);
  font-size: var(--fs-meta);
  color: var(--text-secondary);
  max-height: 360px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.result--error { border-color: rgba(var(--status-error-rgb), 0.4); }
.result--error .result-title { color: #fca5a5; }


/* ──────────────────────────────────────────────
   Empty state — for "no items yet" contexts
   ────────────────────────────────────────────── */
.empty {
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  color: var(--text-tertiary);
  font-size: var(--fs-small);
}
.empty-icon { font-size: 28px; margin-bottom: var(--sp-2); display: block; }
.empty-title { font-size: var(--fs-body); color: var(--text-secondary); margin-bottom: var(--sp-1); }


/* ──────────────────────────────────────────────
   Loading — spinner + skeleton
   ────────────────────────────────────────────── */
.spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--border-subtle);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 600ms linear infinite;
  display: inline-block;
}
.spinner--lg { width: 24px; height: 24px; border-width: 3px; }

@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  height: 12px;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--bg-surface-1), var(--bg-surface-2), var(--bg-surface-1));
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }


/* ──────────────────────────────────────────────
   Dashboard tile grid (Command Center)
   ────────────────────────────────────────────── */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
}

.tile {
  display: block;
  padding: var(--sp-5);
  background: var(--bg-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  color: var(--text-primary);
  text-decoration: none;
  transition: transform var(--motion-base), border-color var(--motion-base), background var(--motion-base);
}
.tile:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-primary-rgb), 0.45);
  background: var(--bg-surface-2);
  color: var(--text-primary);
}
.tile--primary {
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.14), rgba(var(--accent-tertiary-rgb), 0.10));
  border-color: rgba(var(--accent-primary-rgb), 0.35);
}
.tile-icon { font-size: 22px; margin-bottom: var(--sp-2); display: block; }
.tile-title { font-size: var(--fs-body); font-weight: var(--fw-semi); margin-bottom: 2px; }
.tile-desc { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.5; }


/* ──────────────────────────────────────────────
   Auth — sign-in / sign-up card layout
   ────────────────────────────────────────────── */
.auth-card { max-width: 440px; margin: var(--sp-7) auto 0; }
.auth-card .field + .field { margin-top: var(--sp-3); }
.auth-card .auth-submit { margin-top: var(--sp-5); }
.auth-switch {
  text-align: center;
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}


/* ──────────────────────────────────────────────
   Utilities
   ────────────────────────────────────────────── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.text-mono       { font-family: var(--font-mono); }
.text-secondary  { color: var(--text-secondary); }
.text-tertiary   { color: var(--text-tertiary); }
.muted           { opacity: 0.6; }


/* ──────────────────────────────────────────────
   Responsive — mobile under 720px
   ────────────────────────────────────────────── */
@media (max-width: 720px) {
  :root { --content-width: 100%; --account-slot: auto; }

  .app-header-inner {
    grid-template-columns: 1fr auto;
    padding: var(--sp-3) var(--sp-4);
    gap: var(--sp-3);
  }
  .app-header-left { gap: var(--sp-3); }

  /* Nav becomes a horizontal scroll row on mobile to preserve all links */
  .nav { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .nav-link { font-size: var(--fs-meta); padding: var(--sp-2); white-space: nowrap; }

  /* Brand text hides on very narrow viewports — just the mark */
  .brand-name { display: none; }

  .app-main { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
  .card-header, .card-body, .card-footer { padding: var(--sp-4); }
  .page-title { font-size: 24px; }
  .account-email { max-width: 140px; }
}

/* iOS safe-area for notch */
@supports (padding: max(0px)) {
  .app-header { padding-top: max(0px, env(safe-area-inset-top)); }
  .app-main   { padding-bottom: max(var(--sp-8), env(safe-area-inset-bottom)); }
}