/* ============================================================================
   11-scan.css — states for the scan layer (.abstract)
   ----------------------------------------------------------------------------
   SCOPE: ONLY the states 11-scan.js toggles — current, read, and the focus
   affordances a jump depends on. The abstract's BASE appearance (box, type,
   spacing, rule, numbering) belongs to the tiling agent. Nothing here should
   be the reason the abstract looks like anything at all.

   Load AFTER the base stylesheet and after 03-motion.css (timing tokens are
   read from it, with fallbacks so this file also stands alone).

   Everything except the focus rings is scoped to `html.scan-js`, a class added
   by 11-scan.js. With JS off, none of it applies and the abstract is a plain
   list of working anchor links.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
/* Reused from 03-motion.css. Under prefers-reduced-motion that file already
   collapses every duration to 1ms, so these transitions die with it — there is
   no second timing system here. The fallbacks only matter if 03-motion.css is
   absent. */

html.scan-js .abstract a[href^="#"] {
  transition:
    color            var(--mo-fast, 160ms) var(--mo-ease, cubic-bezier(.2, 0, 0, 1)),
    background-color var(--mo-fast, 160ms) var(--mo-ease, cubic-bezier(.2, 0, 0, 1)),
    box-shadow       var(--mo-base, 220ms) var(--mo-ease, cubic-bezier(.2, 0, 0, 1));
}

/* ------------------------------------------------------- current section */
/* Marked by .is-on on the row (the <li>, or the <a> if there is no <li>) and
   aria-current="location" on the <a>.

   Contrast, measured against --card #FDFBF6 and --wash #F2EBDA:
     --acctxt #634E18 on #FDFBF6 -> 7.15:1   (AAA)
     --acctxt #634E18 on #F2EBDA -> 6.35:1   (AA large + AA normal)
   The 2px bronze inset rule and the weight change mean the state is never
   signalled by colour alone. */

/* `.is-on` lands on the <li> when the row has one, on the <a> otherwise, so
   every state rule is written for both shapes. */
html.scan-js .abstract .is-on > a,
html.scan-js .abstract a.is-on {
  color: var(--acctxt, #634E18);
  background-color: var(--wash, #F2EBDA);
  box-shadow: inset 2px 0 0 0 var(--acc, #8A6E2A);
}

html.scan-js .abstract .is-on > a > b,
html.scan-js .abstract a.is-on > b {
  color: var(--acctxt, #634E18);
  font-weight: 700;
}

/* The gloss (the second, explanatory span) must stay legible in every state —
   it is real text, not decoration. --ink2 #5E574B on #F2EBDA is 6.09:1.
   NOTE: --ink3 #756F61 is only 3.52:1 on --card and is therefore deliberately
   NOT used for any text in this file. */
html.scan-js .abstract .is-on > a > span,
html.scan-js .abstract a.is-on > span {
  color: var(--ink2, #5E574B);
}

/* ---------------------------------------------------------- read already */
/* Marked by .is-done. Deliberately quiet: a read row is still a jump target,
   so its text keeps full contrast (--ink2 on --card = 7.10:1) and only the
   leading rule changes. Dimming read rows below AA to "grey them out" is the
   obvious move and it is wrong. */

html.scan-js .abstract .is-done > a,
html.scan-js .abstract a.is-done {
  color: var(--ink2, #5E574B);
  box-shadow: inset 2px 0 0 0 var(--rule, #E0D8C8);
}

html.scan-js .abstract .is-done > a > b,
html.scan-js .abstract a.is-done > b {
  font-weight: 500;
}

/* Hover must never be mistaken for "current": it borrows the wash but not the
   bronze rule. */
html.scan-js .abstract a[href^="#"]:hover {
  background-color: var(--wash, #F2EBDA);
  color: var(--acctxt, #634E18);
}

/* --------------------------------------------------------------- focus */
/* NOT scoped to .scan-js — a keyboard user must see a ring whether or not the
   controller ran. Deliberately not transitioned: a fading focus ring reads as
   lag (same rule 03-motion.css follows). */

.abstract a[href^="#"]:focus-visible {
  outline: 2px solid var(--acc, #8A6E2A);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Fallback for browsers without :focus-visible. */
.abstract a[href^="#"]:focus {
  outline: 2px solid var(--acc, #8A6E2A);
  outline-offset: 2px;
}
.abstract a[href^="#"]:focus:not(:focus-visible) {
  outline: none;
}

/* The jump target. 11-scan.js borrows tabindex="-1" on the section's heading
   and focuses it, so the reader is TAKEN to the section rather than merely
   scrolled near it. The ring marks the arrival, then releases on blur.
   `[data-scan-tab]` is set and removed by the controller, so this can never
   apply to a heading the author made focusable on purpose. */
.sect [data-scan-tab]:focus {
  outline: 2px solid var(--acc, #8A6E2A);
  outline-offset: 4px;
  border-radius: 2px;
}
.sect [data-scan-tab]:focus:not(:focus-visible) {
  /* Arriving by mouse: keep it, but quieter — the reader still needs to see
     where they landed, and this is a navigation, not an accidental focus. */
  outline: 2px solid var(--rule, #E0D8C8);
}