/* Report layout: source rail. Author: Imad A. Adel.
   One stylesheet, three layouts, selected by [data-variant] on <html>. The baseline's
   own rules are untouched; everything here is additive and scoped to a variant.
   SAMPLE data only. */

/* ===================================================================== shared */
:root[data-variant] .kpistrip .kc-head-t::after{content:' · SAMPLE';color:var(--muted);
  font-weight:600;letter-spacing:.06em}

/* the page must never
   force a horizontal scroll at any of the four widths */
:root[data-variant] .shell,
:root[data-variant] .main{min-width:0}
:root[data-variant] .plot-box{min-width:0}
/* a grid item keeps min-width:auto, so a pane whose min-content is wider than the
   track pushes the track past the viewport. Every item this file places in a grid
   has to give that up explicitly, and the tracked crumb has to be allowed to break. */
:root[data-variant] .pane,
:root[data-variant] .kpistrip,
:root[data-variant] #housecol,
:root[data-variant] #houserail,
:root[data-variant] #housespine{min-width:0}
:root[data-variant] #housecol{max-width:100%}
:root[data-variant] .crumb,
:root[data-variant] .pane-head h1{overflow-wrap:anywhere}
/* min-width:0 alone is not enough here: the pane still takes its automatic minimum
   size from a <select> whose longest option is wider than the track, and grows the
   grid item past the viewport. An explicit max-width:100% is what actually holds it. */
:root[data-variant] .pane,
:root[data-variant] .kpistrip{max-width:100%}
/* the printed equations run 15 px past a 320 px viewport on the served page as well:
   the reader cannot reach them because the document clips rather than scrolls. The
   formula is the part that cannot break, so it gets the scroll. (F-WP12-01) */
:root[data-variant] .eq-row{min-width:0;max-width:100%}
:root[data-variant] .eq-f{overflow-x:auto;max-width:100%}
/* the baseline's equation grid carries a 300 px track floor, which is wider than a
   320 px viewport once the panel padding is taken out. minmax(min(100%,N),1fr) is the
   form that collapses instead of overflowing. Same defect on the served page. */
:root[data-variant] .eq-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
/* the readout header holds a status flag whose tracked capitals do not wrap */
/* The first build removed the ring on a programmatically focused pane heading, on the
   theory that a ring belongs to a real Tab landing. That is wrong for the case that
   matters: pressing Enter on a section button moves focus to the heading, and that is
   exactly when a keyboard user needs to be told where they have landed. The served page
   draws it; this page keeps it. */
/* the bold emphasis inside the guide note renders near-black on a warm dark panel:
   about 1.2:1, which is unreadable. Live on the served page as well. (F-WP12-02) */
:root[data-variant] .guide-note b,
:root[data-variant] .guide-note strong{color:var(--ink)}
:root[data-variant] .kpistrip > *{min-width:0;max-width:100%}
:root[data-variant] .kpistrip .kc-head{flex-wrap:wrap;min-width:0;max-width:100%}
:root[data-variant] .kpistrip .flag{white-space:normal;overflow-wrap:anywhere}

/* =================================================================== R1 rail */
/* Reading column with a persistent source rail. The provenance of a claim sits
   beside the claim rather than at the end of the page. */
:root[data-variant="R1"] .main{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(min(100%,268px),300px);
  gap:26px;align-items:start}
:root[data-variant="R1"] #housecol{grid-column:1;display:flow-root}
:root[data-variant="R1"] .pane{max-width:min(72ch,100%)}
:root[data-variant="R1"] .kpistrip{max-width:min(72ch,100%)}
:root[data-variant="R1"] #houserail{
  grid-column:2;position:sticky;top:18px;align-self:start;
  border:1px solid var(--line);border-radius:10px;background:var(--panel);
  padding:16px 17px;font-size:.82rem;line-height:1.7}
:root[data-variant="R1"] #houserail h2{
  font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px}
:root[data-variant="R1"] #houserail h2 + *{margin-top:0}
:root[data-variant="R1"] #houserail dl{display:grid;grid-template-columns:1fr;gap:9px;margin:0}
:root[data-variant="R1"] #houserail dt{font-size:.68rem;color:var(--muted)}
:root[data-variant="R1"] #houserail dd{margin:0 0 2px;overflow-wrap:anywhere}
:root[data-variant="R1"] #houserail a{color:var(--blue)}
:root[data-variant="R1"] #houserail .railsep{
  border:0;border-top:1px solid var(--line);margin:15px 0}
:root[data-variant="R1"] #houserail .railkv{
  display:flex;justify-content:space-between;gap:10px;padding:3px 0}
:root[data-variant="R1"] #houserail .railkv b{font-variant-numeric:tabular-nums}
@media(max-width:1060px){
  :root[data-variant="R1"] .main{grid-template-columns:minmax(0,1fr)}
  :root[data-variant="R1"] .pane,
  :root[data-variant="R1"] .kpistrip{max-width:100%}
  :root[data-variant="R1"] #housecol{grid-column:1}
  :root[data-variant="R1"] #houserail{grid-column:1;position:static;order:-1}
}

/* ============================================================== R2 document */
/* One continuous document with a contents spine. Every section is present; the
   spine tracks the reading position instead of switching panes. */
:root[data-variant="R2"] .nav{display:none}
:root[data-variant="R2"] .shell{display:block}
:root[data-variant="R2"] .pane{display:block!important;
  border-top:1px solid var(--line);padding-top:26px;margin-top:30px;scroll-margin-top:96px}
:root[data-variant="R2"] .pane:first-of-type{border-top:0;margin-top:0;padding-top:0}
:root[data-variant="R2"] .main{
  display:grid;grid-template-columns:minmax(min(100%,176px),200px) minmax(0,1fr);
  gap:30px;align-items:start;max-width:1180px;margin:0 auto}
:root[data-variant="R2"] #housespine{
  grid-column:1;position:sticky;top:18px;align-self:start;font-size:.8rem;line-height:1.5}
:root[data-variant="R2"] #housecol{grid-column:2;display:flow-root}
:root[data-variant="R2"] #housespine ol{list-style:none;margin:0;padding:0;
  border-left:1px solid var(--line)}
:root[data-variant="R2"] #housespine li{margin:0}
:root[data-variant="R2"] #housespine a{
  display:flex;gap:9px;padding:7px 12px;margin-left:-1px;color:var(--muted);
  text-decoration:none;border-left:2px solid transparent}
:root[data-variant="R2"] #housespine a:hover{color:var(--ink)}
:root[data-variant="R2"] #housespine a.here{
  color:var(--ink);font-weight:700;border-left-color:var(--blue)}
:root[data-variant="R2"] #housespine .sn{
  font-variant-numeric:tabular-nums;color:var(--faint);min-width:1.1em}
:root[data-variant="R2"] #housespine a.here .sn{color:var(--blue)}
/* the baseline hides the readout while the overview is the entry pane, because the
   hero repeats it. In a continuous document the overview is always present, so the
   docked bar is the only place the numbers stay in view. */
:root[data-variant="R2"] .kpistrip{display:block}

/* the live readout shrinks to a docked three-value bar */
:root[data-variant="R2"] .kpistrip{
  position:sticky;top:0;z-index:5;padding:9px 14px;margin:0 0 6px;
  width:100%;justify-content:flex-start}
:root[data-variant="R2"] .kpistrip .mirror-row,
:root[data-variant="R2"] .kpistrip .kc-actions,
:root[data-variant="R2"] .kpistrip #k_gs{display:none}
:root[data-variant="R2"] .kpistrip .kc-grid{
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline}
:root[data-variant="R2"] .kpistrip .kc{padding:0;border:0;background:transparent;min-width:0}
:root[data-variant="R2"] .kpistrip .kc .v{font-size:1.05rem}
@media(max-width:860px){
  :root[data-variant="R2"] .main{grid-template-columns:minmax(0,1fr)}
  /* one column: every grid item must come back to it, or an item still asking for
     column 2 opens an implicit zero-width track and collapses the whole document */
  :root[data-variant="R2"] .main > *{grid-column:1}
  :root[data-variant="R2"] #housespine{
    grid-row:auto;position:static;order:-1;border:1px solid var(--line);
    border-radius:9px;padding:6px}
  :root[data-variant="R2"] #housespine ol{display:flex;flex-wrap:wrap;border-left:0}
  :root[data-variant="R2"] #housespine a{border-left:0;border-bottom:2px solid transparent;
    padding:6px 9px}
  :root[data-variant="R2"] #housespine a.here{border-bottom-color:var(--blue)}
}

/* ================================================================ R3 header */
/* The result first. The readout becomes a full-width band under the top bar and
   the sections become a horizontal strip. */
:root[data-variant="R3"] .shell{display:block}
:root[data-variant="R3"] .nav{
  display:flex;overflow-x:auto;gap:2px;position:sticky;top:0;z-index:6;
  border-bottom:1px solid var(--line);border-right:0;padding:0 8px;
  background:var(--panel);width:auto;height:auto;scrollbar-width:thin}
:root[data-variant="R3"] .nav .nav-group{display:none}
:root[data-variant="R3"] .nav .nav-item{
  white-space:nowrap;border:0;border-bottom:2px solid transparent;border-radius:0;
  padding:12px 13px;font-size:.78rem}
:root[data-variant="R3"] .nav .nav-item.active{
  border-bottom-color:var(--blue);background:transparent;font-weight:700}
:root[data-variant="R3"] #houserhead{
  border-bottom:1px solid var(--line);background:var(--panel);padding:16px 22px}
:root[data-variant="R3"] #houserhead .rh-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,164px),1fr));
  gap:14px 26px;max-width:1240px;margin:0 auto}
:root[data-variant="R3"] #houserhead .rh-k{
  font-size:.6rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted)}
:root[data-variant="R3"] #houserhead .rh-v{
  font-family:'IBM Plex Mono',monospace;font-size:1.5rem;font-weight:600;margin-top:3px;
  overflow-wrap:break-word}
:root[data-variant="R3"] #houserhead .rh-s{font-size:.72rem;color:var(--faint);margin-top:2px}
:root[data-variant="R3"] .main{max-width:1240px;margin:0 auto;padding-top:18px}
:root[data-variant="R3"] .kpistrip{position:static;margin-bottom:18px}
:root[data-variant="R3"] .kpistrip .kc-grid{display:none}
/* R3 promotes the numbers, it does not delete the document. Hiding the whole hero band
   took the H1, the abstract and the compare link with it, which left the entry section
   with no heading at all. Only the stat cards go — the result band above repeats them. */
:root[data-variant="R3"] .pane .hero-band .hero-stats{display:none}
:root[data-variant="R3"] .pane .hero-band{padding-top:6px}
:root[data-variant="R3"] .pane .plot-box{--h:440px}
@media(max-width:700px){
  :root[data-variant="R3"] #houserhead .rh-v{font-size:1.2rem}
}

/* F-WP12-04: text coloured from --navy/--navy2, which the dark palette maps to
   background shades. Text takes the panel ink; backgrounds keep their tokens. */
:root:not([data-theme="light"]) .gcard h3,
:root:not([data-theme="light"]) .fignum,
:root:not([data-theme="light"]) .eq-name,
:root:not([data-theme="light"]) .eq-row .eq-f,
:root:not([data-theme="light"]) .note b,
:root:not([data-theme="light"]) .note .co-k,
:root:not([data-theme="light"]) .note .wk{color:var(--ink)}
:root:not([data-theme="light"]) .neg{color:#F08378}

/* reduced motion: nothing here animates, and the spine must not smooth-scroll */
@media (prefers-reduced-motion:reduce){
  :root[data-variant] html{scroll-behavior:auto}
}
