/* Chaitanya app stylesheet (extracted from index.html in milestone 04 U10).
   Touch-first rules: 16px+ inputs (no mobile zoom-on-focus), 44px+ tap targets,
   single column. Theme variables live on body; body.theme-dark overrides them. */
* { box-sizing: border-box; }
body {
  --bg: #f6f3ee;
  --surface: #fffaf2;
  --surface-strong: #f0e7d8;
  --border: #cdbfae;
  --text: #241f1b;
  --muted: #6e6258;
  --primary: #2f6f62;
  --primary-border: #2f6f62;
    /* UX-9: one step darker than the old #3b8677 (white-on was 4.32:1, under AA).
     White on #35796b measures 5.12:1 (≥4.5:1); dark theme's #3a5a9f is 6.68:1. */
  --primary-active: #35796b;
  --primary-active-border: #2f6f62;
  --warning-surface: #fff3db;
  --warning-border: #e1b85b;
  margin: 0;
  font-family: system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  color-scheme: light;
}
body.theme-dark {
  --bg: #1a1a2e;
  --surface: #23233c;
  --surface-strong: #20203a;
  --border: #44446a;
  --text: #eaeaea;
  --muted: #b6b5cc;
  --primary: #3a5a9f;
  --primary-border: #3a5a9f;
  --primary-active: #3a5a9f;
  --primary-active-border: #6d8ee0;
  --warning-surface: #2d2d4a;
  --warning-border: #665c2d;
  color-scheme: dark;
}
main.app-shell {
  min-height: 100dvh;
  max-width: 44rem;
  margin: 0 auto;
  /* 7.5rem bottom: clears the view switcher (~3.5rem) AND the floating controls
     (bottom 4.4rem + 44px tall ≈ 7.2rem) — bottom-anchored content (R15) would
     otherwise slide under them. */
  padding: 0.75rem calc(0.75rem + env(safe-area-inset-right))
    calc(7.5rem + env(safe-area-inset-bottom) + var(--keyboard-inset, 0px))
    calc(0.75rem + env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--bg);
  color: var(--text);
}
.status { margin: 0.25rem 0; font-size: 0.85rem; color: var(--muted); }
/* Low-key build-identity line (decision-queue §B "version string"). Quieter than the
   save status above it — smaller and dimmed so it reads as debug metadata, not chrome. */
.debug-line { margin: 0.1rem 0 0; font-size: 0.72rem; opacity: 0.7; }
.feedback-banner {
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--warning-border);
  border-radius: 8px;
  background: var(--warning-surface);
}
.workspace {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
}
.view-panel {
  width: 100%;
}
/* R15 retrofit: the capture screen is bottom-anchored and grows UP. DOM order
   stays input-first (autofocus + reading order), column-reverse flips the visual
   stack so the input row sits at the bottom edge, nearest the thumb, with the
   note body, suggestions, and picker stacking upward above it. */
.capture-panel {
  align-self: flex-end;
  display: flex;
  flex-direction: column-reverse;
}
/* Ranked suggestions read best-first; shown ABOVE the input they too reverse, so
   the best match lands directly above the input (shortest thumb travel). */
.capture-panel > ul.suggestions,
.picker ul.suggestions {
  display: flex;
  flex-direction: column-reverse;
}
.browse-placeholder {
  padding-bottom: 0.5rem;
}
.browse-placeholder h1 {
  margin: 0 0 0.4rem;
  font-size: 1.45rem;
  letter-spacing: 0;
}
.empty-state { margin: 0 0 0.8rem; opacity: 0.72; }
.capture-row { display: flex; gap: 0.5rem; }
.capture-input {
  flex: 1;
  width: 100%;
  min-height: 44px;
  font-size: 1.1rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
}
/* Note-body editors (capture draft + item detail). The shell auto-grows these to
   fit their content (JS writes the inline height to the scroll height on input —
   views::autosize_textarea); this rule supplies the comfortable *default* height
   before the first keystroke, caps the growth with `max-height`, and hands off to an
   inner scrollbar past that cap. `resize: none` because the height is managed for you
   — a manual drag handle would fight the auto-grow.

   A future UI-framework migration should PRESERVE: (1) the 16px (1rem) font — smaller
   triggers mobile zoom-on-focus, the whole stylesheet's touch-first rule; (2) the
   auto-grow contract — a max-height + `overflow-y: auto` is what keeps a long note
   from pushing the bottom-anchored layout off-screen; (3) the theme tokens so it
   restyles with light/dark like every other surface. */
.capture-body,
.detail-note-body {
  width: 100%;
  min-height: 7rem;
  max-height: 24rem;
  overflow-y: auto;
  resize: none;
  font-size: 1rem;
  line-height: 1.45;
  font-family: inherit;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
}
.capture-body { margin: 0.5rem 0; }
.detail-note-body { display: block; margin: 0.25rem 0 0; }
.capture-body:focus-visible,
.detail-note-body:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.note-editor { margin: 0.75rem 0; }
/* Heading row: the "Note" label plus the quiet auto-save affordance (4.3), so the
   user can see edits persist on their own with no save button. */
.note-editor-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
}
.note-editor-head h3 { margin: 0; }
.autosave-hint { font-size: 0.72rem; color: var(--muted); font-style: italic; }
/* LD-3: while a save failure is outstanding the hint stops promising automatic
   saves — warning-banner tokens (same as .export-stale-warning) so it reads as a
   caution right where the user is typing, not quiet chrome. */
.autosave-hint-failed {
  color: var(--text);
  font-style: normal;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--warning-border);
  border-radius: 8px;
  background: var(--warning-surface);
}
/* Inline-editable item title (4.2). Display mode is a full-width button styled to read as
   the h2 heading (no button chrome) — focusable and keyboard-activatable (Enter/Space opens
   the editor), with a 44px touch target and a visible focus ring. Edit mode reuses
   `.capture-input` (44px tap target, theme tokens) and just scales the type up to the heading
   size so the text doesn't jump between the two modes. A framework migration should PRESERVE:
   the 44px min-height (touch-first) and the theme-token colors so it restyles with light/dark. */
.detail-title-cell { margin: 0.3rem 0 0.6rem; }
.detail-title {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0.2rem 0.4rem;
  text-align: left;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  color: inherit;
  cursor: text;
  overflow-wrap: anywhere;
}
.detail-title:hover { border-color: var(--border); }
.detail-title:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.reach-left .detail-title { text-align: right; }
.detail-title-input {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}
.detail-title-input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.reach-left .detail-title-input { text-align: right; }
/* Flavor toggles (Task / Note): independent pressed/unpressed buttons — the pressed
   look mirrors the view-switcher's active state (theme tokens, light/dark safe).
   State is carried by aria-pressed; `.active` is the matching visual class. */
.flavor-toggles {
  display: flex;
  gap: 0.4rem;
  margin: 0.4rem 0 0.6rem;
}
.flavor-toggle.active {
  background: var(--primary-active);
  border-color: var(--primary-active-border);
  color: #fff;
}
/* One-tap status cycle: shows "current → next"; the next state is muted so the
   CURRENT state reads first.
   TODO(user-decision): confirm status vocabulary + cycle order + colors (per-state
   accent colors would land here). */
.status-cycle { margin-right: 0.4rem; }
.status-cycle-current { font-weight: 600; }
.status-cycle-arrow, .status-cycle-next { color: var(--muted); }
button {
  min-height: 44px;
  min-width: 44px;
  font-size: 1rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-strong);
  color: inherit;
}
button:disabled { opacity: 0.4; }
button.primary { background: var(--primary); border-color: var(--primary-border); color: #fff; }
/* UX-2: native form controls do NOT inherit the body font — the detail panel's
   State/Urgency/Importance selects and the due-date input fell back to ~13px,
   re-triggering iOS zoom-on-focus against the stylesheet's own first rule.
   1rem (16px) stops the zoom; 44px restores the touch-target rule in one stroke. */
select,
input[type="date"] {
  font-size: 1rem;
  min-height: 44px;
}
/* UX-15: screen-reader-only announcement region (standard clip pattern) — visually
   removed but still read by assistive tech. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.reach-left .capture-row { flex-direction: row-reverse; }
.reach-left .capture-row .capture-input { text-align: right; }

/* Global capture-from-anywhere bar (§B): a compact quick-capture surface at the
   bottom (thumb) edge of every non-capture panel. Column layout so the target label
   sits above its input row; handedness mirrors the input/button order like the
   capture page. Light styling only — framework migration will restyle it. */
.quick-capture {
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}
.quick-capture-target {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.quick-capture-target-name { font-weight: 600; color: inherit; }
.quick-capture-row { display: flex; gap: 0.5rem; }
.reach-left .quick-capture-row { flex-direction: row-reverse; }
.reach-left .quick-capture-row .capture-input { text-align: right; }

/* The capture page's live target list (§B): what this surface is capturing into,
   updating as items land. Capped + scrollable so a long list never pushes the
   bottom-anchored input off-screen (same contract as the note bodies). */
.capture-target-list { margin: 0 0 0.5rem; }
.capture-target-label {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.capture-target-name { font-weight: 600; color: var(--text); }
.capture-target-empty { margin: 0.25rem 0; }
.capture-target-items {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 40vh;
  overflow-y: auto;
}
.capture-target-item { margin: 0.2rem 0; }
.capture-target-item .row-title {
  width: 100%;
  text-align: left;
  background: var(--surface);
  font-weight: 500;
  overflow-wrap: anywhere;
}
ul.suggestions { list-style: none; margin: 0.5rem 0; padding: 0; }
ul.suggestions li { margin: 0.25rem 0; }
ul.suggestions button { width: 100%; text-align: left; background: var(--surface); }
/* UX-10: solid --muted, not opacity 0.6 (which blended to ≈4.27:1 at 13.6px).
   Measured: #6e6258 on --surface #fffaf2 = 5.69:1 light; #b6b5cc on #23233c =
   7.60:1 dark (and ≥4.8:1 on the combo-active --surface-strong in both themes). */
ul.suggestions .hint { color: var(--muted); font-size: 0.85rem; }
/* The keyboard-highlighted (active) combo-box option: theme-token accent so it reads
   clearly in light and dark. `combo-active` is set by arrow-key navigation; a mouse/tap
   still selects any option directly (44px target preserved by the base button rule). */
ul.suggestions li.combo-active > button {
  border-color: var(--primary);
  background: var(--surface-strong);
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.picker {
  margin: 0.75rem 0;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-strong);
}
.picker-title { margin: 0 0 0.5rem; font-weight: 600; overflow-wrap: anywhere; }
.picker-warn {
  border: 1px solid var(--warning-border);
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
  background: var(--warning-surface);
}
.picker > button { margin: 0.5rem 0.5rem 0 0; }
ul.browse-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.browse-row {
  margin: 0.4rem 0;
  padding-left: calc(var(--depth, 0) * 1rem);
}
.row-main {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}
.row-disclosure {
  flex-shrink: 0;
  /* UX-7: was 2rem × 36px — under the stylesheet's 44px touch rule. The glyph
     stays small (transparent hit area); only the tappable box grows. */
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 0.85rem;
  background: none;
  border: none;
  opacity: 0.75;
}
.row-title {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.row-meta {
  flex-shrink: 0;
  font-size: 0.78rem;
  opacity: 0.68;
}
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.3rem;
}
.row-actions button {
  min-height: 36px;
  font-size: 0.82rem;
  padding: 0.25rem 0.55rem;
}
.placement-sheet,
.delete-sheet {
  position: fixed;
  left: calc(0.75rem + env(safe-area-inset-left));
  right: calc(0.75rem + env(safe-area-inset-right));
  bottom: calc(6.4rem + env(safe-area-inset-bottom) + var(--keyboard-inset, 0px));
  z-index: 12;
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
}
.view-switcher {
  position: fixed;
  left: calc(0.75rem + env(safe-area-inset-left));
  right: calc(0.75rem + env(safe-area-inset-right));
  bottom: calc(0.75rem + env(safe-area-inset-bottom) + var(--keyboard-inset, 0px));
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
  max-width: 44rem;
  margin: 0 auto;
}
.view-switcher button {
  min-width: 0;
  padding: 0.35rem 0.25rem;
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}
.view-switcher button.active {
  background: var(--primary-active);
  border-color: var(--primary-active-border);
  color: #fff;
}
.floating-control {
  position: fixed;
  bottom: calc(4.4rem + env(safe-area-inset-bottom) + var(--keyboard-inset, 0px));
  z-index: 11;
}
.handedness-swap {
  width: 44px;
  padding: 0;
  border-radius: 999px;
}
.reach-right .handedness-swap {
  left: calc(0.75rem + env(safe-area-inset-left));
}
.reach-left .handedness-swap {
  right: calc(0.75rem + env(safe-area-inset-right));
}
.theme-toggle {
  min-width: 64px;
  padding: 0 0.6rem;
  font-size: 0.82rem;
}
/* The theme toggle sits just INBOARD of the reach corner: the capture FAB (4.1) claims
   the true corner, so the toggle is offset by the FAB's width (44px) + a 0.5rem gap. */
.reach-right .theme-toggle {
  right: calc(0.75rem + 44px + 0.5rem + env(safe-area-inset-right));
}
.reach-left .theme-toggle {
  left: calc(0.75rem + 44px + 0.5rem + env(safe-area-inset-left));
}
/* Thumb-corner capture button (4.1): a round FAB in the current-handed reach corner,
   in the floating-control band (bottom 4.4rem) beside the theme toggle. Circular 44px
   touch target, primary-tinted so it reads as the main quick action, theme-token styled.
   Handedness mirrors it like the other floating controls; it never overlaps the
   view-switcher (below it), the bottom-anchored capture UI (above it), or the opposite
   corner's handedness swap. */
.capture-fab {
  width: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 999px;
  font-size: 1.4rem;
  line-height: 1;
  background: var(--primary);
  border-color: var(--primary-border);
  color: #fff;
}
.reach-right .capture-fab {
  right: calc(0.75rem + env(safe-area-inset-right));
}
.reach-left .capture-fab {
  left: calc(0.75rem + env(safe-area-inset-left));
}
.capture-fab:focus-visible {
  outline: 2px solid var(--primary-active-border);
  outline-offset: 2px;
}
@media (max-width: 380px) {
  .view-switcher button { font-size: 0.68rem; }
}
/* Top-right cluster (milestone 05 + U7): the fixed anchor holding the read-only
   sync-status chip and the backup/export controls beside it, stacked and right-aligned.
   Sized so it never covers the bottom-anchored primary UI. */
.top-right-cluster {
  position: fixed;
  top: calc(0.5rem + env(safe-area-inset-top));
  right: calc(0.75rem + env(safe-area-inset-right));
  z-index: 11;
  max-width: min(15rem, calc(100vw - 1.5rem));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}
/* Read-only sync-status chip: one line when collapsed, expands into a compact detail
   panel. Inherits the theme tokens like every other surface. */
.sync-status {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
/* Backup/export controls: two chip-styled pills (binary + Markdown) matching the
   sync chip, sitting just below it in the cluster. */
.export-controls {
  display: inline-flex;
  gap: 0.35rem;
}
.export-control {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  /* Respect the stylesheet's 44px touch-first target (was 30px — too small to tap on mobile). */
  min-height: 44px;
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
  white-space: nowrap;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.export-control:hover { color: var(--text); border-color: var(--primary); }
/* The import pill outside Ready: still clickable (the click explains why it can't
   run yet) but visibly dimmed — aria-disabled, never disabled, so the feedback path
   stays reachable. */
.export-control[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.export-control[aria-disabled="true"]:hover { color: var(--muted); border-color: var(--border); }
/* Stale-backup warning beside the export pills: shown while a save failure is
   outstanding (exports serve the persisted blob, which then lags the live model).
   Warning-banner colors so it reads as a caution, not chrome. */
.export-stale-warning {
  max-width: 15rem;
  margin: 0;
  padding: 0.3rem 0.6rem;
  font-size: 0.72rem;
  text-align: right;
  color: var(--text);
  border: 1px solid var(--warning-border);
  border-radius: 8px;
  background: var(--warning-surface);
}
.sync-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  /* UX-7: was 34px — the hardest reach in the app (top corner) at the smallest
     size; 44px per the stylesheet's touch-target rule. */
  min-height: 44px;
  min-width: 0;
  padding: 0.2rem 0.65rem;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
}
/* One line, truncated gracefully — the chip must never wrap or push the layout. */
.sync-chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sync-dot { flex-shrink: 0; font-size: 0.95rem; line-height: 1; }
.sync-dot.local { color: var(--muted); }
.sync-dot.syncing { color: var(--primary); }
.sync-dot.ok { color: var(--primary-active); }
.sync-dot.error { color: var(--warning-border); }
.sync-panel {
  margin-top: 0.35rem;
  width: 15rem;
  max-width: calc(100vw - 1.5rem);
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-strong);
  font-size: 0.8rem;
}
.sync-detail { margin: 0; }
.sync-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.15rem 0;
}
.sync-detail-row dt { color: var(--muted); }
.sync-detail-row dd {
  margin: 0;
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}
/* UX-1 (HIGH): the last-sync-error TEXT was set in --warning-border — a pale
   border token that measured 1.53:1 light / 2.36:1 dark on the panel background
   (nearly invisible). Restyled to the readable text-on-warning-surface pattern
   (same as .autosave-hint-failed / .export-stale-warning): --text on
   --warning-surface measures 14.84:1 light / 11.01:1 dark (AA needs 4.5:1). */
.sync-detail-error dd {
  color: var(--text);
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--warning-border);
  border-radius: 8px;
  background: var(--warning-surface);
}
/* The manual "Sync now" action (milestone 07 U6) — the panel's one primary action,
   visually distinct from the plain Collapse button below it. */
.sync-now {
  margin-top: 0.5rem;
  width: 100%;
  /* UX-7: was 36px — raised to the 44px touch-target rule. */
  min-height: 44px;
  font-size: 0.8rem;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.sync-now:disabled { color: var(--muted); border-color: var(--border); cursor: default; }
/* Signed out there is no sync affordance — just the pointer at the account chip. */
.sync-signed-out-hint {
  margin: 0.5rem 0 0;
  color: var(--muted);
  text-align: center;
}
.sync-collapse {
  margin-top: 0.5rem;
  width: 100%;
  /* UX-7: was 36px — raised to the 44px touch-target rule. */
  min-height: 44px;
  font-size: 0.8rem;
}
/* Account widget (milestone 07 U3): reuses the sync chip/panel shell; these rules
   only style the login/register form inside the panel. */
.account-glyph { color: var(--muted); }
.account-line {
  margin: 0 0 0.5rem;
  overflow-wrap: anywhere;
}
.account-mode {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}
.account-mode-button {
  flex: 1;
  /* UX-7: was 36px — raised to the 44px touch-target rule. */
  min-height: 44px;
  font-size: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.account-mode-button.active {
  color: var(--text);
  border-color: var(--primary);
}
.account-input {
  width: 100%;
  box-sizing: border-box;
  /* UX-7: was 40px — raised to the 44px touch-target rule. */
  min-height: 44px;
  margin-bottom: 0.45rem;
  padding: 0.3rem 0.55rem;
  /* UX-2: was 0.85rem (~13.6px) — sub-16px inputs re-trigger iOS zoom-on-focus,
     against the stylesheet's own first rule. */
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}
.account-action {
  width: 100%;
  /* UX-7: was 40px — raised to the 44px touch-target rule. */
  min-height: 44px;
  font-size: 0.8rem;
}
.account-server {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  color: var(--muted);
}
.account-server summary {
  cursor: pointer;
  margin-bottom: 0.4rem;
  overflow-wrap: anywhere;
}
.account-origin { color: var(--text); }
.account-server-actions {
  display: flex;
  gap: 0.35rem;
}
.account-server-actions .account-action { flex: 1; }
/* UX-1 (HIGH): the inline auth error/status line was set in --warning-border
   (1.53:1 light / 2.36:1 dark — the "why sign-in failed" text was functionally
   invisible at night). Restyled to the readable text-on-warning-surface pattern:
   --text on --warning-surface measures 14.84:1 light / 11.01:1 dark. */
.account-notice {
  margin: 0.5rem 0 0;
  padding: 0.3rem 0.55rem;
  color: var(--text);
  border: 1px solid var(--warning-border);
  border-radius: 8px;
  background: var(--warning-surface);
  overflow-wrap: anywhere;
}