/* ==========================================================================
   Dishfast Backlog — 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. Three pairs failed WCAG AA outright — muted text at 4.49:1, the
        accent at 3.45:1 and the Should priority at 4.39:1 — on a site where
        every deploy is gated on AA. All three now resolve from a verified
        scale.

   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 {
  --surface:      var(--ground);
  --surface-2:    var(--surface);
  --ink-soft:     var(--muted);
  --hair:         var(--rule);
  --hair-strong:  var(--rule);

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

  /* MoSCoW. The old --muted, --accent and --should all failed AA here
     (4.49, 3.45 and 4.39 against the ground); every one now resolves from
     a scale solved to clear 5.0:1. */
  --must:         var(--sem-must);
  --must-bg:      var(--sem-must-soft);
  --should:       var(--sem-should);
  --should-bg:    var(--sem-should-soft);
  --could:        var(--sem-could);
  --could-bg:     var(--sem-could-soft);

  --good:         var(--sem-good);
  --good-bg:      var(--sem-good-soft);
  --warn-bg:      var(--sem-should-soft);

  --chip:         var(--surface);
  --chip-ink:     var(--muted);

  /* Gherkin keyword / and / scenario. */
  --gk-key:       var(--sem-must);
  --gk-and:       var(--sem-should);
  --gk-scn:       var(--sem-could);

  --shadow:       var(--nav-shadow);
  --serif:        var(--font-heading);
  --sans:         var(--font-body);
  --mono:         ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:var(--accent-ink);text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:600;text-wrap:balance;margin:0}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(14px,3vw,32px)}

/* header */
header.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.topbar{display:flex;align-items:center;gap:18px;padding:12px 0}
.brand{display:flex;align-items:baseline;gap:10px;margin-right:auto}
.brand .mark{font-size:22px}
.brand h1{font-size:20px;letter-spacing:-.01em}
.brand .sub{font-size:12px;color:var(--muted);font-family:var(--mono);letter-spacing:.02em}
nav.views{display:flex;gap:2px;flex-wrap:wrap}
nav.views button{font-family:var(--sans);font-size:13.5px;color:var(--muted);background:none;border:0;
  padding:7px 12px;border-radius:8px;cursor:pointer;white-space:nowrap}
nav.views button:hover{color:var(--ink);background:var(--surface-2)}
nav.views button[aria-selected="true"]{color:var(--accent-ink);background:var(--accent-soft);font-weight:600}
.tgl{border:1px solid var(--hair-strong);background:var(--surface);color:var(--ink-soft);
  width:34px;height:34px;border-radius:9px;cursor:pointer;font-size:15px;display:grid;place-items:center}
.tgl:hover{border-color:var(--accent)}

/* layout */
.layout{display:grid;grid-template-columns:264px 1fr;gap:26px;padding:22px 0 80px;align-items:start}
@media(max-width:880px){.layout{grid-template-columns:1fr}.rail{position:static !important;order:-1}}
.rail{position:sticky;top:70px;display:flex;flex-direction:column;gap:16px}

/* stat tiles */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:11px 12px}
.tile .n{font-family:var(--serif);font-size:26px;line-height:1;font-variant-numeric:tabular-nums}
.tile .l{font-size:11px;color:var(--muted);margin-top:5px;letter-spacing:.03em;text-transform:uppercase}
.tile.wide{grid-column:1/-1}
.pbar{display:flex;height:8px;border-radius:99px;overflow:hidden;margin-top:9px;background:var(--hair)}
.pbar i{display:block}
.pbar .m{background:var(--must)}.pbar .s{background:var(--should)}.pbar .c{background:var(--could)}
.plegend{display:flex;gap:12px;margin-top:8px;font-size:11.5px;color:var(--muted);flex-wrap:wrap}
.plegend b{color:var(--ink);font-variant-numeric:tabular-nums}
.dot{display:inline-block;width:8px;height:8px;border-radius:99px;margin-right:5px;vertical-align:middle}

/* epic nav */
.epicnav{background:var(--surface);border:1px solid var(--hair);border-radius:12px;overflow:hidden}
.epicnav .hd{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:11px 13px 7px}
.epicnav button{display:flex;width:100%;align-items:center;gap:9px;text-align:left;border:0;background:none;
  padding:8px 13px;cursor:pointer;color:var(--ink-soft);font-family:var(--sans);font-size:13px;border-left:3px solid transparent}
.epicnav button:hover{background:var(--surface-2)}
.epicnav button[aria-current="true"]{background:var(--accent-soft);color:var(--accent-ink);border-left-color:var(--accent);font-weight:600}
.epicnav .en{font-family:var(--mono);font-size:11px;color:var(--muted);min-width:22px}
.epicnav button[aria-current="true"] .en{color:var(--accent-ink)}
.epicnav .ename{flex:1;line-height:1.25}
.epicnav .ecount{font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--muted);background:var(--chip);
  border-radius:99px;padding:1px 8px}

/* toolbar */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.search{flex:1;min-width:200px;position:relative}
.search input{width:100%;padding:10px 12px 10px 34px;border:1px solid var(--hair-strong);border-radius:10px;
  background:var(--surface);color:var(--ink);font-family:var(--sans);font-size:14px}
.search input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.search svg{position:absolute;left:11px;top:11px;width:16px;height:16px;stroke:var(--muted);fill:none}
.filtergroup{display:flex;gap:5px;align-items:center}
.filtergroup .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-right:2px}
.fchip{font-family:var(--sans);font-size:12.5px;border:1px solid var(--hair-strong);background:var(--surface);
  color:var(--ink-soft);padding:6px 11px;border-radius:99px;cursor:pointer;font-variant-numeric:tabular-nums}
.fchip:hover{border-color:var(--accent)}
.fchip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.linkbtn{background:none;border:0;color:var(--accent-ink);font-size:12.5px;cursor:pointer;font-family:var(--sans);padding:6px}
.count{font-size:12.5px;color:var(--muted);margin-left:auto;font-variant-numeric:tabular-nums}

/* epic group + story rows */
.egroup{margin-bottom:26px;scroll-margin-top:130px}
/* flex-wrap added, D60. .egoal carries min-width:100%, which is the usual
   way of forcing a flex item onto its own line — but it only works in a
   wrapping container. Without it the goal text pushed the row 180px past
   the viewport. Pre-existing in the source document, not introduced here. */
.ehead{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;padding:0 2px 8px;border-bottom:2px solid var(--hair-strong);margin-bottom:10px}
.ehead .enum{font-family:var(--mono);font-size:12px;color:var(--accent-ink);background:var(--accent-soft);
  padding:3px 8px;border-radius:6px}
.ehead h2{font-size:20px;letter-spacing:-.01em}
.ehead .egoal{font-size:12.5px;color:var(--muted);flex:1;min-width:100%;margin-top:2px;line-height:1.4}
.rows{display:flex;flex-direction:column;gap:7px}
.story{background:var(--surface);border:1px solid var(--hair);border-radius:11px;overflow:hidden;box-shadow:var(--shadow)}
.srow{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;width:100%;text-align:left;
  background:none;border:0;font-family:var(--sans);color:var(--ink)}
.srow:hover{background:var(--surface-2)}
.srow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.sid{font-family:var(--mono);font-size:12px;color:var(--muted);min-width:52px}
.stitle{flex:1;font-size:14.5px;font-weight:500;line-height:1.3}
.sfeat{font-size:11.5px;color:var(--muted);white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
@media(max-width:620px){.sfeat{display:none}}
.pill{font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;white-space:nowrap;letter-spacing:.01em}
.pill.Must{background:var(--must-bg);color:var(--must)}
.pill.Should{background:var(--should-bg);color:var(--should)}
.pill.Could{background:var(--could-bg);color:var(--could)}
.size{font-family:var(--mono);font-size:11.5px;font-weight:600;width:26px;height:22px;display:grid;place-items:center;
  border-radius:6px;background:var(--chip);color:var(--chip-ink)}
.caret{width:16px;height:16px;stroke:var(--muted);fill:none;transition:transform .18s ease;flex-shrink:0}
.story[open] .caret{transform:rotate(90deg)}
.sbody{padding:2px 16px 18px;border-top:1px solid var(--hair);display:none;font-size:13.5px}
.story[open] .sbody{display:block}
.us{font-style:italic;color:var(--ink-soft);background:var(--surface-2);border-left:3px solid var(--accent);
  padding:11px 14px;border-radius:0 8px 8px 0;margin:14px 0}
.us .k{font-style:normal;font-weight:600;color:var(--accent-ink)}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 18px;margin:12px 0}
.meta .m{font-size:12px}
.meta .mk{text-transform:uppercase;letter-spacing:.05em;font-size:10.5px;color:var(--muted);margin-bottom:2px}
.meta .mv{color:var(--ink-soft);line-height:1.4}
.gk{font-family:var(--mono);font-size:12.5px;line-height:1.55;background:var(--surface-2);border:1px solid var(--hair);
  border-radius:9px;padding:12px 14px;overflow-x:auto;white-space:pre;color:var(--ink-soft);margin-top:4px}
.gk .kw{color:var(--gk-key);font-weight:600}.gk .kw2{color:var(--gk-and)}.gk .scn{color:var(--gk-scn);font-weight:600}
.gk .tbl{color:var(--muted)}
.seclbl{text-transform:uppercase;letter-spacing:.05em;font-size:10.5px;color:var(--muted);margin:16px 0 3px}
.tag{display:inline-block;font-family:var(--mono);font-size:10.5px;padding:1px 6px;border-radius:5px;
  background:var(--good-bg);color:var(--good);margin-left:2px}
.tag.u{background:var(--warn-bg);color:var(--should)}
.empty{text-align:center;color:var(--muted);padding:60px 20px;font-size:14px}

/* generic content views */
.view{display:none}
.view.active{display:block}
.page-h{margin:6px 0 4px;font-size:26px;letter-spacing:-.01em}
.page-sub{color:var(--muted);font-size:13.5px;margin-bottom:20px;max-width:70ch}
.card{background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow)}
table.grid{width:100%;border-collapse:collapse;font-size:13px}
.tblwrap{overflow-x:auto;border:1px solid var(--hair);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
table.grid th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  padding:11px 14px;border-bottom:1px solid var(--hair-strong);font-weight:600;background:var(--surface-2);white-space:nowrap}
table.grid td{padding:11px 14px;border-bottom:1px solid var(--hair);vertical-align:top;color:var(--ink-soft);line-height:1.45}
table.grid tr:last-child td{border-bottom:0}
.did{font-family:var(--mono);font-weight:600;color:var(--accent-ink)}
.arrow{color:var(--accent);font-weight:700}
.gcite{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:720px){.twocol{grid-template-columns:1fr}}
.checklist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.checklist li{display:flex;gap:9px;font-size:13.5px;color:var(--ink-soft);line-height:1.4}
.checklist li::before{content:"\2713";color:var(--good);font-weight:700;flex-shrink:0}
.nfrcat{font-family:var(--mono);font-size:11px;color:var(--accent-ink);white-space:nowrap}
.ncid{font-family:var(--mono);font-weight:600;color:var(--must)}
.ownerchip{font-size:11px;background:var(--chip);color:var(--chip-ink);padding:2px 8px;border-radius:99px;white-space:nowrap;font-weight:600}
.covsum{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.covsum .b{background:var(--surface);border:1px solid var(--hair);border-radius:11px;padding:12px 16px;box-shadow:var(--shadow)}
.covsum .b .n{font-family:var(--serif);font-size:24px;line-height:1}
.covsum .b .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:4px}
.covsum .b.good .n{color:var(--good)} .covsum .b.warn .n{color:var(--must)}
footer{border-top:1px solid var(--hair);color:var(--muted);font-size:12px;padding:18px 0 40px;text-align:center}
footer .mono{font-family:var(--mono)}
@media(prefers-reduced-motion:reduce){*{transition:none !important}}

/* ---------------------------------------------------------------
   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-di1"]{margin:0 0 2px}
[data-sx="x-di2"]{background:var(--must)}
[data-sx="x-di3"]{background:var(--should)}
[data-sx="x-di4"]{background:var(--could)}
[data-sx="x-di5"]{font-size:15px;color:var(--muted)}
[data-sx="x-di6"]{font-size:12.5px;color:var(--ink-soft)}
[data-sx="x-di7"]{font-size:16px;margin:18px 0 8px}
[data-sx="x-di8"]{color:var(--ink)}
[data-sx="x-di9"]{font-size:16px;margin:22px 0 8px}
[data-sx="x-di10"]{margin-bottom:12px}
[data-sx="x-di11"]{font-weight:400}
[data-sx="x-di12"]{font-size:16px;margin:6px 0 8px}
[data-sx="x-di13"]{margin-top:0}
[data-sx="x-di14"]{font-size:16px;margin:20px 0 8px}
[data-sx="x-di15"]{color:var(--accent-ink)}
[data-sx="x-di16"]{display:flex;gap:14px;align-items:flex-start}
[data-sx="x-di17"]{font-family:var(--serif);font-size:22px;color:var(--accent)}
[data-sx="x-di18"]{flex:1}
[data-sx="x-di19"]{color:var(--ink-soft);font-size:13.5px;line-height:1.5}
[data-sx="x-di20"]{padding-top:8px}