/* ============================================================================
   RETRIVIUM — shell
   ----------------------------------------------------------------------------
   The persistent frame: skip link, section bar, and the layout adjustments
   every surface needs so the bar never covers content.

   Why this exists: §10.2 asks for chrome that RECEDES during an item. The build
   shipped no chrome at all, so Map, Progress and the concept pages were
   reachable only from hard-coded footer links on particular screens, and from
   the item screen nothing was reachable. Receding and absent are not the same
   thing; only one of them produces a dead end.
   ============================================================================ */

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -4rem;
  z-index: var(--z-overlay);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-action);
  color: var(--color-action-text);
  font-size: var(--text-md);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { top: var(--space-4); }

/* A flash is an acknowledgement, not an event. Ink, no colour, no motion — the
   same reason nothing fires on a correct answer. */
.flash {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  width: 100%;
  max-width: var(--app-max);
  margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface-high);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-md);
}
.flash--alert { border-left: 3px solid var(--color-attention); }

/* ---------------------------------------------------------------- section bar
   Phone: fixed to the bottom, inside the thumb arc, above the home indicator.
   Wider: a centred pill that floats clear of the content column. */
.nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border);
  transition: opacity var(--dur-base) var(--ease-out);
}

.nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  /* 44px floor for the target itself, before the safe-area inset. */
  min-height: 3.25rem;
  padding-block: var(--space-2);
  color: var(--color-text-subtle);
  text-decoration: none;
}
.nav__glyph { width: 20px; height: 20px; fill: currentColor; }
.nav__label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
}

/* Position and weight carry the current section as well as colour — a state
   readable only in colour is a state that vanishes from a screenshot
   (PRINCIPLES 7). */
.nav__item--here {
  color: var(--nav-ink-here, var(--color-text));
  font-weight: var(--weight-semi);
  box-shadow: inset 0 2px 0 var(--color-state);
}
.nav__item--here .nav__label { font-weight: var(--weight-semi); }

/* During an item. Receded by token remap rather than by opacity, for the reason
   `.band--quiet` gives: at the alpha that actually reads as quiet, body text
   lands under 4.5:1. Not hidden either — the learner may still leave, and a
   surface with no exit is the defect this bar exists to fix. */
.nav--quiet {
  --nav-ink-here: var(--color-text-subtle);
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  border-top-color: var(--color-border-soft);
}
.nav--quiet .nav__item--here { box-shadow: none; font-weight: var(--weight-medium); }
.nav--quiet:hover,
.nav--quiet:focus-within {
  --nav-ink-here: var(--color-text);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
}

/* ------------------------------------------------------------------- clearance
   The bar is fixed, so every scrolling surface reserves its height. */
:root { --nav-height: calc(3.25rem + env(safe-area-inset-bottom, 0px)); }

.app-shell { padding-bottom: var(--nav-height); }
.page-shell { padding-bottom: calc(var(--nav-height) + var(--space-6)); }
.action-bar { bottom: var(--nav-height); }

@media (min-width: 46rem) {
  .nav {
    inset-inline: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: var(--space-4);
    width: min(28rem, calc(100% - 2rem));
    grid-auto-columns: 1fr;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-2);
    overflow: hidden;
  }
  .nav__item--here { box-shadow: inset 0 0 0 999px var(--color-state-wash); }
  :root { --nav-height: calc(3.25rem + var(--space-8)); }
}

/* ------------------------------------------------------------ shared surfaces
   Primitives the non-session surfaces share. Named for what they are, not for
   the page that first needed them. */
.rv-panel {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}
.rv-panel--quiet {
  --color-text: var(--color-text-muted);
  --color-text-muted: var(--color-text-subtle);
  background: none;
  border-style: dashed;
}
.rv-panel h2 { font-size: var(--text-xl); }
.rv-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-4);
}
.rv-panel__actions .btn { width: auto; padding-inline: var(--space-6); }

.rv-callout {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-attention);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunk);
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

.fact-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-4);
}
.fact-row dt {
  font-size: var(--text-2xs);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-subtle);
}
.fact-row dd { font-size: var(--text-md); }

/* Explanations on demand. The methodology copy that used to compete with the
   retrieval demand lives behind these. */
.explainer { border-top: 1px solid var(--color-border-soft); }
.explainer:first-of-type { border-top: 0; }
.explainer > summary {
  padding-block: var(--space-3);
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.explainer > summary::marker { color: var(--color-text-subtle); }
.explainer > :not(summary) {
  padding-bottom: var(--space-4);
  max-width: var(--measure);
  font-size: var(--text-md);
  color: var(--color-text-muted);
}
.explainer__list { display: grid; gap: var(--space-2); counter-reset: rung; }
.explainer__list li { padding-left: var(--space-6); position: relative; }
.explainer__list li::before {
  counter-increment: rung;
  content: counter(rung);
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

/* The rung, always with its name. The number alone needs a glossary. */
.rung-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  margin-top: var(--space-3);
  font-size: var(--text-md);
}
.rung-line__target { color: var(--color-text-subtle); }

.segmented {
  display: inline-flex;
  margin-top: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.segmented button {
  min-height: 2.75rem;
  padding-inline: var(--space-5);
  font-size: var(--text-md);
  color: var(--color-text-muted);
  border-right: 1px solid var(--color-border-soft);
}
.segmented button:last-child { border-right: 0; }
.segmented button[aria-pressed="true"] {
  background: var(--color-state-wash);
  color: var(--color-text);
  font-weight: var(--weight-semi);
}

/* --------------------------------------------------------------- wide session
   §7.5 puts `produce`, `debug` and `integrate` on the desktop, and a 30rem
   column is a hostile host for code. The habit-cue argument in [UXB §1.2] is
   about the physical place, not the column width. */
@media (min-width: 64rem) {
  .app-shell--wide { max-width: 52rem; }
}