/* spine-nav.css - the station strip of the Journey of a Drop (docs/plan/C2_TARGET_STATE.md §4; A_MASTER_PRODUCT_SPEC §2):
   13 marks on a hairline, the current mark a filled drop, previous/next links and the "You are here" line. Rendered as DOM at
   build time (scripts/build-entities.mjs), enhanced by js/spine-nav.mjs (keyboard only). Tokens only (roles.css aliases of
   design/tokens.css): brass on oxblood, Plex Mono labels, the display face for the station number. No icons, no colour-only
   meaning (DESIGN_SYSTEM §10): the current mark is filled AND named AND marked aria-current.
   Lane 9, 2026-09-30. Served standalone as /sections/spine-nav.css until main folds it into the sections bundle. */
/* the legacy top bar rule `nav{position:fixed;display:grid;...}` (styles.css, with !important on its background and border) applies to
   every <nav>: the strip states its own flow, box and ground explicitly */
/* the record page's masthead has no plate: the title block gives up the plate-height box masthead.css reserves for the film
   mastheads (min-height 10.5 rem + its bottom padding), which stood as an empty pause above the strip (Lane 12, 2026-09-30) */
.rp-masthead.rp-mast-record .rp-mast-title{min-height:0;padding-bottom:var(--rp-space-scale-6)}
/* and the record section gives up the legacy `.sec{padding:clamp(4.5rem,9vw,7.5rem) 0!important}` above the strip (a 120 px pause at
   1440): one step of the scale between the masthead's hairline and the strip's own */
.sec.rp-record-sec{padding-top:var(--rp-space-scale-8)!important}
/* Lane 25 (2026-09-30): the breadcrumb above a record's kicker - the records, then the index of its kind (/records, /records/<kind>) */
.rp-mast-crumb{margin:0 0 var(--rp-space-scale-3);font:400 var(--rp-type-scale-label)/1.6 var(--rp-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--rp-text-muted)}
.rp-mast-crumb a{display:inline-block;min-height:24px;color:var(--rp-brass);text-decoration:none;border-bottom:1px solid transparent}
.rp-mast-crumb a:hover{border-bottom-color:var(--rp-brass)}
.rp-mast-crumb a:focus-visible{outline:var(--rp-focus-ring);outline-offset:2px}
.rp-spine-band{max-width:var(--rp-space-container-max);margin:0 auto var(--rp-space-scale-12);padding:0 var(--rp-space-container-padding)}
.rp-spine-nav{position:static!important;display:block!important;z-index:auto!important;grid-template-columns:none!important;align-items:normal!important;top:auto!important;left:auto!important;right:auto!important;width:auto!important;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;margin:0;padding:var(--rp-space-scale-4) 0 var(--rp-space-scale-3);background:none!important;border-image:none!important;border-top:1px solid var(--rp-hair)!important;border-bottom:1px solid var(--rp-hair)!important;transition:none!important;color:var(--rp-text-muted)}
/* Lane 27: the legacy top bar gives every <nav> 36 px side padding at desktop widths, which inset the strip from the text column (the
   next-station link stopped 36 px short of the right edge at 1440): the strip spans the column */
.rp-spine-nav{padding-left:0!important;padding-right:0!important}
.rp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Lane 27: Greek letters in a label set in capitals stay lower case (β-damascenone, never "Β-DAMASCENONE": a capital beta reads as a B) */
.rp-gk{text-transform:none}
/* Lane 25: Lane 22's proposed line, moved here from causal-debugger.css so every strip page holds still - the deferred legacy
   `p{max-width:68ch}` (styles.css) wrapped the "You are here" line at 1440 after first paint (a 0.12 layout shift on every record page) */
.rp-spine-here,.rp-spine-steps{max-width:none}
.rp-spine-here{margin:0 0 var(--rp-space-scale-3);font:400 var(--rp-type-scale-label)/1.6 var(--rp-mono);letter-spacing:.04em;color:var(--rp-text-muted)}
.rp-spine-here-k{margin-right:.6em;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.rp-spine-here-n{font-family:var(--rp-display);font-weight:var(--rp-num-weight);font-variant-numeric:lining-nums tabular-nums;font-size:1.1em;color:var(--rp-brass)}
.rp-spine-here-what{color:var(--rp-text)}
/* the marks: a flex row on a hairline; each mark a dot with its name under it; the row scrolls sideways on a phone */
.rp-spine-marks{position:relative;display:flex;gap:0;margin:0;padding:var(--rp-space-scale-2) 0 0;list-style:none;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.rp-spine-marks::before{content:"";position:absolute;left:0;right:0;top:calc(var(--rp-space-scale-2) + 5px);height:1px;background:var(--rp-hair)}
.rp-spine-mark{position:relative;flex:1 0 4.8rem;min-width:4.8rem;margin:0;text-align:center}   /* Lane 21 (N6): 4.8rem, was 4.2rem: a ten-letter label (EXTRACTION, PERCEPTION) is about 4.1rem wide in the mono face and touched its neighbour in a 4.2rem mark; 4.8rem leaves at least 10 px between labels. 13 x 4.8rem = 62.4rem: one row at 1440, else the row scrolls sideways as before (the keyboard path is unchanged) */
.rp-spine-mark>a,.rp-spine-mark>span{display:block;padding:0 .25rem;color:inherit;text-decoration:none}
.rp-spine-dot{display:block;width:11px;height:11px;margin:0 auto;border:1px solid var(--rp-brass-dim);border-radius:50%;background:var(--rp-ground);box-sizing:border-box}
.rp-spine-name{display:block;margin-top:.5rem;padding:0 .15rem;font:400 .62rem/1.3 var(--rp-mono);letter-spacing:.06em;text-transform:uppercase;white-space:normal;overflow-wrap:normal}
.rp-spine-no{display:block;font-family:var(--rp-display);font-weight:var(--rp-num-weight);font-variant-numeric:lining-nums tabular-nums;font-size:.8rem;line-height:1;color:var(--rp-brass-dim);margin-top:.3rem}
.rp-spine-mark>a:hover .rp-spine-dot,.rp-spine-mark>a:focus-visible .rp-spine-dot{border-color:var(--rp-brass);background:var(--rp-wash-hover)}
.rp-spine-mark>a:hover .rp-spine-name,.rp-spine-mark>a:focus-visible .rp-spine-name{color:var(--rp-text)}
.rp-spine-mark>a:focus-visible{outline:var(--rp-focus-ring);outline-offset:2px;border-radius:var(--rp-radius-control)}
/* the current station: the drop (the loader's vocabulary: a filled teardrop), the name in cream */
.rp-spine-mark[aria-current] .rp-spine-dot{width:12px;height:12px;border-color:var(--rp-brass);background:var(--rp-brass);border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.rp-spine-mark[aria-current] .rp-spine-name,.rp-spine-mark[aria-current] .rp-spine-no{color:var(--rp-text)}
/* a station with no page yet: the mark stays on the line, the name muted, no link */
.rp-spine-mark>span .rp-spine-name{opacity:.7}
.rp-spine-steps{display:flex;justify-content:space-between;gap:var(--rp-space-scale-4);margin:var(--rp-space-scale-4) 0 0;font:400 var(--rp-type-scale-label)/1.6 var(--rp-mono);letter-spacing:.04em}
.rp-spine-steps a{color:var(--rp-brass);text-decoration:none;border-bottom:1px solid transparent}
.rp-spine-steps a:hover,.rp-spine-steps a:focus-visible{border-bottom-color:var(--rp-brass)}
.rp-spine-steps a:focus-visible{outline:var(--rp-focus-ring);outline-offset:2px}
.rp-spine-steps a[rel="next"]{margin-left:auto;text-align:right}
@media (prefers-reduced-motion:no-preference){.rp-spine-dot{transition:background var(--rp-dur-fast) var(--rp-ease),border-color var(--rp-dur-fast) var(--rp-ease)}}

/* ------------------------------------------------------------ evidence chips ------------------------------------------------------------ */
/* A_MASTER_PRODUCT_SPEC §4 and C2 §2: a <details> whose <summary> is the chip (one or two Plex Mono words in the .rp-label-honest
   manner: "documented · 2014", "measured", "modeled") and whose body is the citation with a link and the date read. No tooltips,
   no icons, no colour-only meaning; Expert mode may open them by default (a later toggle). These rules belong in roles.css once
   main folds the entity pages into the sections bundle; they ride here so the standalone pages need no bundle rebuild. */
.rp-evidence{margin:var(--rp-space-scale-3) 0 0;font:400 var(--rp-type-scale-label)/1.6 var(--rp-mono);letter-spacing:.04em;color:var(--rp-on-muted)}
.rp-evidence>summary{display:inline-block;cursor:pointer;list-style:none;padding:0 0 .1em;border-bottom:1px solid var(--rp-on-rule);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--rp-on-muted)}
.rp-evidence>summary::-webkit-details-marker{display:none}
.rp-evidence>summary::after{content:"\00a0\00b7\00a0source";font-weight:400;letter-spacing:.08em;text-transform:none;opacity:.8}
.rp-evidence[open]>summary{border-bottom-color:var(--rp-on-accent);color:var(--rp-on)}
.rp-evidence[open]>summary::after{content:"\00a0\00b7\00a0 close"}   /* the space ends the escape (\00a0c would be one code point) */
.rp-evidence>summary:hover{color:var(--rp-on)}
.rp-evidence>summary:focus-visible{outline:var(--rp-focus-ring);outline-offset:3px}
.rp-evidence-body{margin:.7em 0 0;max-width:var(--rp-measure);text-transform:none;letter-spacing:.04em}
.rp-evidence-body p{margin:0 0 .5em;font-size:inherit;line-height:inherit}
/* Lane 27: the reading-size rule of roles.css (html.rp-type main :is(p:not([class]), …){font-size:body!important}) also caught the
   chip bodies, so an opened chip printed its citation in 19.5 px mono under a 13 px label; the body takes the small step of the
   scale (14 px at 390), a size between the label and the reading text (decided on Opus - recheck on Fable) */
html.rp-type main .rp-evidence .rp-evidence-body p{font-size:var(--rp-type-scale-small)!important;line-height:1.6!important}
.rp-evidence-body a{color:var(--rp-on-accent);text-decoration:underline;text-decoration-color:var(--rp-on-rule);text-underline-offset:.2em}
.rp-evidence-body a:hover{text-decoration-color:currentColor}
.rp-evidence-body q{font-style:italic;overflow-wrap:anywhere}
/* Lane 27: long source URLs and identifiers wrap inside the column at 390 instead of running off it */
.rp-evidence-body a,.rp-sources li,.rp-sources a{overflow-wrap:anywhere}
.rp-evidence-where{opacity:.8}
/* the field list of a record page (Expert data): a definition list, the term in Plex Mono, the value in the body face */
.rp-record{margin:0 0 var(--rp-space-scale-8);padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--rp-space-scale-4) 0}
.rp-record>div{margin:0;padding:var(--rp-space-scale-3) 0 0;border-top:1px solid var(--rp-hair)}
.rp-record dt{margin:0 0 .25em;font:500 var(--rp-type-scale-label)/1.4 var(--rp-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rp-text-muted)}
.rp-record dd{margin:0;font:400 var(--rp-body-size)/var(--rp-body-lh) var(--rp-body);color:var(--rp-text)}
.rp-record dd .rp-null{color:var(--rp-text-muted);font-style:italic}
.rp-record dd ul{margin:.3em 0 0;padding-left:1.2em}
.rp-record dd li::marker{color:var(--rp-brass);font-family:var(--rp-display)}
@media (min-width:900px){.rp-record{grid-template-columns:1fr 1fr;gap:var(--rp-space-scale-4) var(--rp-space-scale-8)}.rp-record>div.rp-record-wide{grid-column:1 / -1}}
/* Lane 20 (2026-09-30): the fixed notices of the new record types (a teaching accord's disclaimer, a fragrance's trademark notice,
   a regulation's "not compliance advice") and the accord's components table. Tokens only; no colour-only meaning (the label says it). */
.rp-notice{margin:0 0 var(--rp-space-scale-6);padding:var(--rp-space-scale-3) var(--rp-space-scale-4);border:1px solid var(--rp-brass-dim);border-left:3px solid var(--rp-brass);font:400 var(--rp-body-size)/var(--rp-body-lh) var(--rp-body);color:var(--rp-text)}
.rp-notice-k{display:block;margin:0 0 .3em;font:500 var(--rp-type-scale-label)/1.4 var(--rp-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rp-brass)}
.rp-table-wrap{overflow-x:auto;margin:.4em 0 0;-webkit-overflow-scrolling:touch}
.rp-record-table{width:100%;border-collapse:collapse;font:400 var(--rp-body-size)/1.45 var(--rp-body);color:var(--rp-text)}
.rp-record-table caption{caption-side:bottom;padding:.6em 0 0;text-align:left;font:400 var(--rp-type-scale-label)/1.6 var(--rp-mono);letter-spacing:.04em;color:var(--rp-text-muted)}
.rp-record-table th,.rp-record-table td{padding:.55em .8em .55em 0;border-top:1px solid var(--rp-hair);text-align:left;vertical-align:top}
.rp-record-table thead th{font:500 var(--rp-type-scale-label)/1.4 var(--rp-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rp-text-muted);border-top:0}
.rp-record-table tbody th{font-weight:500}
.rp-record-table .rp-evidence{margin-top:.3em}
.rp-record-table .rp-evidence>summary{letter-spacing:.06em}
.rp-record-table .rp-evidence>summary::after{content:none}
.rp-record-table .rp-evidence[open]>summary::after{content:none}
/* Lane 27: on a phone the components table stacks: each component is a block (its name across the top, then role, teaching parts
   and volatility side by side, each labelled), so nothing scrolls sideways and no word is broken; the caption follows the rows */
@media (max-width:600px){
  .rp-components,.rp-components tbody,.rp-components caption{display:block;width:100%}
  .rp-components thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rp-components tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.2em .8em;padding:.6em 0;border-top:1px solid var(--rp-hair)}
  .rp-components tbody th,.rp-components td{display:block;padding:0;border-top:0;overflow-wrap:break-word}
  .rp-components tbody th{grid-column:1 / -1}
  .rp-components td::before{content:attr(data-label);display:block;font:500 var(--rp-type-scale-label)/1.4 var(--rp-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rp-text-muted)}
  .rp-components .rp-evidence>summary{letter-spacing:.04em}
}