/* ==========================================================================
   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}