/* ==========================================================================
   WaveStore Backlog Explorer — work sample
   ==========================================================================
   D60. The document's own palette and type stack are gone; everything below
   resolves from site.css, which is loaded first. The layout, spacing and
   information density are unchanged — those were built for reading dense
   backlog data and the site's system has no better answer for them.

   Three defects this fixes, all measured before the change:

     1. The type stack asked for "Iowan Old Style" and "Avenir Next", which
        exist only on Apple machines. Everywhere else the document silently
        fell back, so its typography varied by visitor OS and matched the
        site on no platform at all.

     2. Theming ran off prefers-color-scheme, so a visitor whose OS was dark
        got a dark document between two light pages. The site locks / light
        (US-013) and /agencies dark, both via data-theme; this now does the
        same and follows the toggle instead of the operating system.

     3. This document's palette happened to pass AA. Dishfast's did not,
        and neither had ever been checked. Both now inherit a scale that is
        verified by scripts/contrast.py on every run.

   The semantic names below are the document's own vocabulary mapped onto the
   site's scale, so priority and coverage still read as distinct colours
   rather than collapsing into a single accent.
   ========================================================================== */

:root {
  --paper:        var(--ground);
  --surface:      var(--ground);
  --surface-2:    var(--surface);
  --ink-2:        var(--muted);
  --line:         var(--rule);
  --line-2:       var(--rule);

  --accent-soft:  var(--sem-could-soft);
  --accent-ink:   var(--accent);

  /* madder / ochre / verdigris were this document's priority and status
     colours. Mapped onto the site scale, keeping the same three roles. */
  --madder:       var(--sem-must);
  --madder-soft:  var(--sem-must-soft);
  --ochre:        var(--sem-should);
  --ochre-soft:   var(--sem-should-soft);
  --verdigris:    var(--sem-good);
  --verdigris-soft: var(--sem-good-soft);

  /* Gherkin keyword / outcome / string. */
  --gk-key:       var(--sem-could);
  --gk-out:       var(--sem-should);
  --gk-str:       var(--sem-good);

  --shadow:       var(--nav-shadow);
  --serif:        var(--font-heading);
  --sans:         var(--font-body);
  --mono:         ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* masthead */
.mast{border-bottom:1px solid var(--line);background:var(--surface)}
.mast-in{max-width:1560px;margin:0 auto;padding:18px 24px 0;display:flex;flex-direction:column;gap:14px}
.brand{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.brand h1{font-family:var(--serif);font-weight:600;font-size:26px;margin:0;letter-spacing:-.01em}
.brand .sub{color:var(--muted);font-size:13px}
.theme-btn{margin-left:auto;background:none;border:1px solid var(--line);color:var(--ink-2);
  border-radius:999px;padding:5px 12px;font:inherit;font-size:12px;cursor:pointer}
.theme-btn:hover{border-color:var(--accent);color:var(--accent-ink)}

.stats{display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface-2)}
.stat{padding:9px 16px;border-right:1px solid var(--line);flex:1 1 auto;min-width:104px}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--mono);font-size:19px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat span{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-top:1px}
.stat.warn b{color:var(--ochre)} .stat.crit b{color:var(--madder)}

.tabs{display:flex;gap:2px}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:10px 14px;
  font:inherit;font-size:13px;color:var(--muted);cursor:pointer;letter-spacing:.01em}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--accent-ink);border-bottom-color:var(--accent);font-weight:600}

/* shell */
.shell{max-width:1560px;margin:0 auto;padding:20px 24px 64px}
.cols{display:grid;grid-template-columns:236px minmax(320px,1fr) minmax(380px,1.15fr);gap:20px;align-items:start}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px}
.rail{position:sticky;top:16px;padding:14px;display:flex;flex-direction:column;gap:16px;max-height:calc(100vh - 40px);overflow:auto}
.fgroup>h3{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 8px}
.search{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:7px;
  background:var(--paper);color:var(--ink);font:inherit;font-size:13px}
select.search{cursor:pointer}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{border:1px solid var(--line);background:var(--paper);color:var(--ink-2);border-radius:999px;
  padding:3px 10px;font:inherit;font-size:12px;cursor:pointer;transition:all .12s}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.chip.w[aria-pressed="true"]{background:var(--ochre-soft);border-color:var(--ochre);color:var(--ochre)}
.chip.c[aria-pressed="true"]{background:var(--madder-soft);border-color:var(--madder);color:var(--madder)}
.reset{background:none;border:0;color:var(--muted);font:inherit;font-size:12px;cursor:pointer;text-decoration:underline;padding:0;text-align:left}

/* list */
.listwrap{overflow:hidden}
.listhead{padding:9px 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted);
  display:flex;justify-content:space-between;align-items:center;background:var(--surface-2)}
.list{max-height:calc(100vh - 150px);overflow:auto}
.ep{padding:7px 14px;background:var(--surface-2);border-bottom:1px solid var(--line-2);
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  position:sticky;top:0;z-index:1;font-weight:600}
.row{display:grid;grid-template-columns:58px 1fr auto;gap:10px;align-items:baseline;
  width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line-2);
  border-left:3px solid transparent;padding:9px 14px;font:inherit;cursor:pointer;color:inherit}
.row:hover{background:var(--surface-2)}
.row[aria-current="true"]{background:var(--accent-soft);border-left-color:var(--accent)}
.row.u{border-left-color:var(--ochre)}
.row.nr{border-left-color:var(--madder)}
.row .rid{font-family:var(--mono);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.row[aria-current="true"] .rid{color:var(--accent-ink)}
.row .rt{font-size:13.5px;line-height:1.35}
.row .rm{font-family:var(--mono);font-size:10.5px;color:var(--muted);white-space:nowrap}
.empty{padding:40px 20px;text-align:center;color:var(--muted);font-size:13px}

/* detail */
.detail{position:sticky;top:16px;max-height:calc(100vh - 40px);overflow:auto;padding:22px 24px 28px}
.d-id{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em}
.d-title{font-family:var(--serif);font-size:24px;font-weight:600;margin:4px 0 12px;line-height:1.2;text-wrap:balance}
.d-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.tag{font-size:11.5px;padding:2.5px 9px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);background:var(--surface-2)}
.tag.a{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.tag.w{background:var(--ochre-soft);border-color:var(--ochre);color:var(--ochre)}
.tag.c{background:var(--madder-soft);border-color:var(--madder);color:var(--madder)}
.tag.g{background:var(--verdigris-soft);border-color:var(--verdigris);color:var(--verdigris)}
.d-sec{margin-top:18px}
.d-sec>h4{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 7px}
.d-story{font-family:var(--serif);font-size:17px;line-height:1.5;max-width:62ch}
.d-note{border-left:3px solid var(--accent);background:var(--accent-soft);padding:10px 14px;
  border-radius:0 6px 6px 0;font-size:13.5px;margin-top:14px}
.gherkin{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:14px 16px;
  font-family:var(--mono);font-size:12.5px;line-height:1.75;overflow-x:auto;white-space:pre;margin:0}
.k{color:var(--gk-key);font-weight:600}
.sc{color:var(--ink);font-weight:600}
.ex{color:var(--gk-out)}
.q{color:var(--gk-str)}
.unk{background:var(--ochre-soft);color:var(--ochre);padding:0 4px;border-radius:3px;font-weight:600}
.d-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.d-field .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:3px}
.d-field .v{font-size:13.5px}
.callout{border:1px solid var(--ochre);background:var(--ochre-soft);color:var(--ochre);
  border-radius:8px;padding:11px 14px;font-size:13px}
.callout.c{border-color:var(--madder);background:var(--madder-soft);color:var(--madder)}
.deps{display:flex;flex-wrap:wrap;gap:5px}
.dep{font-family:var(--mono);font-size:11.5px;border:1px solid var(--line);background:var(--paper);
  border-radius:5px;padding:2px 7px;cursor:pointer;color:var(--accent-ink)}
.dep:hover{border-color:var(--accent);background:var(--accent-soft)}
.placeholder{color:var(--muted);text-align:center;padding:80px 20px;font-family:var(--serif);font-size:16px}

/* tables */
.tblwrap{overflow-x:auto;padding:2px}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);
  padding:9px 12px;border-bottom:1px solid var(--line);background:var(--surface-2);position:sticky;top:0}
td{padding:10px 12px;border-bottom:1px solid var(--line-2);vertical-align:top}
tr:last-child td{border-bottom:0}
td.mono{font-family:var(--mono);font-size:11.5px;white-space:nowrap;color:var(--muted)}
.pane{padding:0;overflow:hidden}
.pane-head{padding:16px 20px;border-bottom:1px solid var(--line)}
.pane-head h2{font-family:var(--serif);font-size:20px;margin:0 0 4px;font-weight:600}
.pane-head p{margin:0;color:var(--muted);font-size:13px;max-width:78ch}
.hidden{display:none!important}

@media (max-width:1180px){
  .cols{grid-template-columns:210px 1fr}
  .detail{position:fixed;inset:auto 0 0 0;top:0;z-index:40;max-height:100vh;border-radius:0;
    border-left:0;box-shadow:var(--shadow)}
  .detail.closed{display:none}
  .closebar{display:flex!important}
}
@media (max-width:720px){
  .cols{grid-template-columns:1fr}
  .rail{position:static;max-height:none}
  .list{max-height:none}
  .shell{padding:14px}
  .mast-in{padding:14px 14px 0}
  .row{grid-template-columns:52px 1fr}
  .row .rm{display:none}
}
.closebar{display:none;justify-content:flex-end;margin-bottom:8px}

/* ---------------------------------------------------------------
   Extracted from style= attributes, D59. The CSP forbids inline
   styles, and that applies to attributes injected through innerHTML
   just as much as to ones written in the markup.
   --------------------------------------------------------------- */
[data-sx="x-wa1"]{color:var(--ochre)}
[data-sx="x-wa2"]{color:var(--madder)}
[data-sx="x-wa3"]{font-size:13.5px}

/* Back to the site — D103. These documents were a dead end: reachable from
   either audience, with no route out of them at all. Two origins each serve
   their own copy now, so a root-relative "/" lands the reader back where they
   came from and never crosses audiences.

   Sits above the title rather than beside it: the masthead is a column, and a
   back link belongs at the top-left of a document, which is where a reader
   looks for one. Muted until hover so it does not compete with the h1 it sits
   over. 44px tall for the tap target even though the text is 12.5px. */
.backlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;
  align-self:flex-start;color:var(--muted);font-size:12.5px;text-decoration:none;
  letter-spacing:.02em}
.backlink:hover{color:var(--accent-ink)}
.backlink:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}