/*
 * Shell chrome modernization -- spec §7.2 (docs/superpowers/specs/
 * 2026-08-11-summary-answer-sheet-design.md, "Amendment: presentation
 * polish + shell chrome"). Owner: rail/tabs/header "look low quality, not
 * modern." Visual reference (binding): the chrome-mock section of
 * summary-answer-sheet-preview.html (session scratchpad).
 *
 * Loaded AFTER components.css (frontend/index.html) -- every rule below
 * reuses components.css's own selectors so plain source order decides
 * ties in this file's favor without needing extra specificity. Two
 * consequences that matter and were verified live, not just reasoned
 * about on paper:
 *
 *   1. Where components.css itself relies on source order to break a tie
 *      between two same-specificity selectors on one element --
 *      `.rail-item:hover` vs `.rail-item.active` (hovering the active
 *      item must still LOOK active), `.rail-badge` vs `.rail-badge-
 *      inbound` (the two-part prescriber-requests chip must keep its own
 *      look) -- this file's rules for those same selectors appear in the
 *      SAME relative order, or the cross-file cascade re-resolves the tie
 *      the other way once this file is spliced in later in the document.
 *   2. Same-specificity + later-file is enough to win a property fight
 *      even against a selector that reads as "more specific" in the other
 *      file (`.rail-badge-inbound` alone is still only one class). Every
 *      override that must NOT touch the inbound badge says so explicitly
 *      via `:not(.rail-badge-inbound)` rather than relying on read-order
 *      intuition.
 *
 * Deliberately NOT changed here -- the mock is a simplified, single-
 * category illustration; the real components carry prior, approved
 * design decisions the mock doesn't model:
 *   - `.profile-tab.active` keeps plain `--ink` text, not `--accent-ink`.
 *     The tab strip has a real per-category accent/wash system (tabcat-
 *     ai/clin/fin/adm, components.css §A.2) forcing every active tab's
 *     text to one accent-ink would fight the coral/amber/gray washes it
 *     sits on -- components.css's own §A.2 comment explains admin stays
 *     neutral-ink specifically for cross-wash legibility. Only the
 *     tablist's structural chrome (baseline weight, corner radius,
 *     badge-pill treatment) is modernized below; category coloring is
 *     untouched.
 *   - `.rail-badge-inbound` keeps its own accent look in every state
 *     (rest AND active-parent) -- excluded via `:not()` from both the new
 *     quiet-default and active-accent badge rules.
 *
 * color-mix() usage: a static 8-digit hex (#RRGGBBAA) fallback is
 * declared first, color-mix() second, on the same property -- browsers
 * without color-mix() support drop that second declaration as invalid and
 * keep the hex above it; the trial's Chrome-family audience takes the
 * color-mix() value. The hex alpha channel is the exact equivalent of
 * "mix with transparent" (alpha == the mix percentage), not a flattened
 * opaque color.
 */

/* ---------- Nav rail (§7.2 "Nav rail items") ---------- */
/* :hover before .active mirrors components.css's own order for this pair
   so a hovered-AND-active item still resolves to the active look (tied
   specificity, source order decides) across the two files combined. */
.rail-item {
  border: 1px solid transparent; /* reserved so hover/active borders don't shift layout */
}
.rail-item:hover {
  background: var(--surface);
  border-color: var(--divider);
}
.rail-item.active {
  background: var(--teal-tint);
  color: var(--accent-ink);
  border-color: #0f766e59;
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  /* box-shadow (inset accent bar) unchanged from components.css -- already
     matches spec; redeclared so the focus-visible combo below reads
     clearly as "the same bar, plus a ring." */
  box-shadow: inset 3px 0 0 var(--accent);
}
/* components.css's global `button:focus-visible` rule sets its own
   box-shadow (the focus ring) -- box-shadow doesn't stack across separate
   rules, so without this the ring would fully replace the inset accent
   bar instead of joining it for this one state. */
.rail-item.active:focus-visible {
  box-shadow: var(--focus-ring), inset 3px 0 0 var(--accent);
}

.rail-icon {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--divider);
}
.rail-item.active .rail-icon {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

/* Quiet bordered-surface by default; only the currently-active item's own
   (non-inbound) badge gets the loud filled treatment -- see file header
   re: why `.rail-badge-inbound` is excluded from both rules. */
.rail-badge:not(.rail-badge-inbound) {
  background: var(--surface);
  color: var(--ink-muted);
  border: 1px solid var(--divider);
}
.rail-item.active .rail-badge:not(.rail-badge-inbound) {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.rail-group {
  letter-spacing: .1em;
  margin: 18px 10px 8px; /* .rail-group:first-child (0,2,0) still wins its own margin-top -- untouched */
}

/* ---------- Profile tabs (§7.2 "Profile tabs") ---------- */
/* Category-accent underline/wash (tabcat-ai/clin/fin/adm) is untouched --
   see file header. Only the tablist's own chrome (baseline weight, tab
   corner radius, badge-pill styling) changes. `--line` (not `--divider`)
   matches this component's own existing border token throughout. */
.profile-tabs {
  border-bottom: 2px solid var(--line);
}
.profile-tab {
  border-radius: 8px 8px 0 0;
}
/* `.profile-tab-badge.alert` (allergy/safety severity) is untouched: two
   classes there outrank this file's one-class selector regardless of
   source order, so the risk-red variant keeps winning with no `:not()`
   needed. */
.profile-tab-badge {
  background: var(--teal-tint);
  color: var(--accent-ink);
  border-color: transparent;
}

/* ---------- Header buttons + mode pills (§7.2 "Header buttons") ---------- */
.top-action {
  height: 30px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.top-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(15, 30, 40, .10);
}
/* Same box-shadow-doesn't-stack issue as the rail's active+focus combo:
   without this, tabbing to a button the mouse already rests over would
   lose the focus ring to the hover shadow above. */
.top-action:hover:focus-visible {
  box-shadow: var(--focus-ring), 0 2px 6px rgba(15, 30, 40, .10);
}
/* Ink-mix borders on the four toned buttons -- the tones/inks themselves
   are untouched ("the tones stay" per spec; the color:inherit lesson in
   components.css's own tone-hover comment still stands, unmodified). */
.top-action.tone-feedback {
  border-color: #8a580666;
  border-color: color-mix(in srgb, var(--warn-ink) 40%, transparent);
}
.top-action.tone-guide {
  border-color: #0f766e66;
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.top-action.tone-danger {
  border-color: #b23c2e66;
  border-color: color-mix(in srgb, var(--risk-ink) 40%, transparent);
}
.top-action.tone-admin {
  border-color: #4f457566;
  border-color: color-mix(in srgb, var(--stale-ink) 40%, transparent);
}

.mode-pill {
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Review fix (chrome minor, orchestrator inline): :hover matches disabled
   controls, so the lift fired on busy demo-reset/logout — and .top-action
   had NO disabled affordance at all (seven other button families do).
   Both closed here in the house idiom. */
.top-action:disabled { opacity: .5; cursor: default; }
.top-action:disabled:hover { transform: none; box-shadow: none; }