/* Lumen portal stylesheet, generated by scripts/build-css.mjs. Edit packages/ui/fonts.css, packages/ui/tokens.css, packages/ui/mark.css, packages/ui/portal.css. */
/* Lumen's typeface, self-hosted.
   ------------------------------------------------------------------------
   IBM Plex Sans and IBM Plex Mono, SIL OFL 1.1 (see fonts/OFL.txt). One
   superfamily rather than two unrelated ones: the mono is the sans's own
   sibling, so a rule id sitting next to a sentence is the same voice at a
   different width.

   Self-hosted rather than fetched from a font CDN, deliberately. Lumen audits
   sites for third-party requests and privacy exposure; a tool that does that
   while phoning a font CDN on every page load is not one a consultant should
   trust. Self-hosting also means the extension works offline and the exported
   client report renders correctly on a plane.

   The sans is the variable build (400–700 on the weight axis), which is what
   makes the design system's 650 weight a real weight rather than a synthetic
   bold rounded to 700.

   `fonts/` is replaced per delivery path: see The Three
   Delivery Paths Rule in DESIGN.md. Nothing here may be the only copy of a
   src: the fallback stack in tokens.css carries every surface where the font
   cannot load. */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lumen: the operator's console.

   THESIS: an audit is an investigation in progress, not a report that appears
   at the end. This world refuses the light document page the category ships: 
   Sitebulb's and Semrush's white sheet of tables, and commits to the dark
   instrument surface a consultant leaves open on a second monitor while a
   crawl runs. Evidence glows against it; the ground itself never competes.

   OWN-WORLD: near-black grounds in five steps, violet as the single product
   voice, and one sealed severity ramp. Structure is carried by hairlines a
   shade above the ground, not by shadow. Uppercase tracked labels mark
   provenance (SCANNER EVIDENCE, LUMEN INTERPRETATION) because on this surface
   the reader must always know whether a sentence is measurement or reading.

   Replaces the light "category standard, played straight" world recorded in
   the previous DESIGN.md. The operator pinned this direction with six mockups,
   which is the exit that commitment explicitly reserved for them.

   TWO RULES THIS PALETTE ENFORCES, CARRIED OVER UNCHANGED
   1. One primary. Violet is the product's own voice: navigation, primary
      actions, focus, selection, progress. It never means severity.
   2. Severity has its own ramp and nothing else uses it. A red button that is
      not destructive is a bug.

   CONTRAST: computed, never eyeballed. Every text token clears 4.5:1 on all
   four grounds; each semantic text color clears 4.5:1 on its own wash and on
   every ground; white clears 4.5:1 on the primary. The ramp values are fills
   for bars, rails and dots and clear 3:1 against the surface; they are never
   text on a tint. */
:root{
  /* Grounds, darkest to lightest. The backdrop is what the overlay dims the
     host page to; canvas is the app field; surface is a card. */
  --wqa-backdrop:#07070B;
  --wqa-canvas:#0E0E14;
  --wqa-surface:#15151E;
  --wqa-surface-raised:#22222E;
  --wqa-sunken:#1B1B25;        /* table heads, inset rows, hover */

  --wqa-ink:#E9E9F2;           /* 15.0:1 on surface */
  --wqa-ink-soft:#A8A8BD;      /* 7.8:1 */
  --wqa-ink-faint:#8B8BA3;     /* 5.5:1 — the floor, do not darken */
  --wqa-line:#2E2E3D;          /* hairline between rows */
  --wqa-line-strong:#3A3A4C;   /* control borders, panel edges */

  /* One primary. White clears 4.5:1 on it, which is why it is this violet and
     not the brighter one: every lighter candidate fails its own button. Hover
     deepens rather than lightens, for the same reason. */
  --wqa-brand:#7350F5;
  --wqa-brand-strong:#6741E8;
  --wqa-brand-soft:#1E1838;
  --wqa-brand-line:#3A2E6B;
  --wqa-brand-text:#A896FF;    /* the primary as text, 7.3:1 on surface */
  /* One name per color. --wqa-accent and --wqa-violet were this primary under
     other names, and the side panel used --wqa-accent as text in four places:
     the fill as ink, about 4.1:1, which no search for the fill used as text
     would ever find. */

  /* Semantic TEXT colors: safe on their own wash and on every ground. */
  --wqa-critical:#FF6B78;
  --wqa-critical-soft:#2A1418;
  --wqa-warn:#F0A93A;
  --wqa-warn-soft:#2A1F0F;
  --wqa-ok:#45D68F;
  --wqa-ok-soft:#0F2419;
  --wqa-info:#A896FF;
  --wqa-info-soft:#1E1838;
  --wqa-muted:#8B8BA3;

  /* Severity ramp: fills for bars, rails and dots. Not text on a tint. */
  --wqa-sev-critical:#E14356;
  --wqa-sev-high:#FF5C6C;
  --wqa-sev-medium:#F0A93A;
  --wqa-sev-low:#D8873C;
  --wqa-sev-info:#7A7A94;

  --wqa-focus:#7350F5;

  --wqa-r-xs:6px;
  --wqa-r-sm:8px;
  --wqa-r:10px;
  --wqa-r-float:12px;   /* shells that actually float: the workspace, the coach */
  --wqa-r-lg:14px;
  --wqa-r-pill:999px;

  /* On a dark ground a drop shadow reads as smudge, so elevation is carried by
     the ground stepping lighter and by a hairline. These stay for the few
     elements that genuinely float above the surface. */
  --wqa-shadow:0 1px 2px rgba(0,0,0,.40);
  --wqa-shadow-md:0 2px 6px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.35);
  --wqa-shadow-lg:0 28px 64px -16px rgba(0,0,0,.72);

  --wqa-space-1:4px;
  --wqa-space-2:8px;
  --wqa-space-3:12px;
  --wqa-space-4:16px;
  --wqa-space-5:24px;

  /* IBM Plex Sans and its own monospace sibling, self-hosted (packages/ui/
     fonts.css). The stack behind them is load-bearing, not decoration: the
     overlay is injected into third-party pages whose CSP we do not control, so
     every surface must stay legible when the face does not arrive. */
  --wqa-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --wqa-draw:var(--wqa-sans);
  --wqa-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  /* Coverage still hatches what was not surveyed: not knowing is not the same
     as being broken, and that distinction stays visual. Light-on-dark now. */
  --wqa-hatch:repeating-linear-gradient(45deg,transparent 0 6px,rgba(233,233,242,.07) 6px 7px);
  --wqa-grain:none;

  /* The browser's own chrome, themed from the palette instead of left at the
     defaults. Scrollbars, carets, checkboxes and select menus ship with a
     light appearance that belongs to no design system, and on a near-black
     ground they are the one part of the product that still looks like the
     browser: `color-scheme` turns them dark, `accent-color` keeps a checked
     box violet rather than the browser's blue: the only place a color that
     is not ours would carry meaning, and `scrollbar-color` names the thumb
     against a transparent track, so a scroller reads as part of the panel it
     sits in rather than as a pale rail down the side of it.

     They live here because these are inherited properties and every surface
     inherits this block: the two compiled sheets link it, and the report
     embeds it. The two injected surfaces cannot take them this way: their
     host elements carry `all:initial` as an inline style, which outranks
     `:host`, so the overlay's .workspace and the coach's .coach alias the
     same three values on the first element that inline style does not reach. */
  color-scheme:dark;
  accent-color:var(--wqa-brand);
  scrollbar-color:var(--wqa-ink-faint) transparent;

  --wqa-paper:var(--wqa-canvas);--wqa-surface-strong:var(--wqa-surface-raised);--wqa-rule:var(--wqa-line-strong);--wqa-rule-soft:var(--wqa-line);--wqa-live:var(--wqa-ok);--wqa-danger:var(--wqa-critical);--wqa-warning:var(--wqa-warn);--wqa-radius:var(--wqa-r);
}

/* The paper half. A printed report and an exported workbook are paper
   documents, and a dark ground is the first thing a browser strips when it
   prints, so the same tokens take ink-on-white values here. The report inlines
   this file and inverts on this block alone; packages/ui/palette.js reads it for
   the workbook's tab colors. It was a private block in packages/crawl/report.js
   while the workbook hardcoded values of its own, and the two had come to show a
   client three different violets. */
@media print{
  :root{
    --wqa-canvas:#FFFFFF;--wqa-surface:#FFFFFF;--wqa-surface-raised:#FFFFFF;--wqa-sunken:#F9FAFB;
    --wqa-ink:#101828;--wqa-ink-soft:#475467;--wqa-ink-faint:#667085;
    --wqa-line:#EAECF0;--wqa-line-strong:#D0D5DD;
    --wqa-brand-soft:#F4F3FF;--wqa-brand-line:#D9D6FE;--wqa-brand-text:#5925DC;
    --wqa-critical:#B42318;--wqa-critical-soft:#FEF3F2;
    --wqa-warn:#B54708;--wqa-warn-soft:#FFFAEB;
    --wqa-ok:#067647;--wqa-ok-soft:#ECFDF3;
    --wqa-info:#5925DC;--wqa-info-soft:#F4F3FF;
  }
}

/* The Lumen mark, wherever a surface shows it.
 *
 * One definition, because there were two: the side panel drew a violet tile
 * with a white circle in it, packages/ui/web.css drew the same thing a pixel
 * larger, and the extension's own icon was a bar chart in a square. Three
 * near-variants of a logo read as three products.
 *
 * The drawing lives in packages/ui/mark.svg and is inlined here at build time,
 * the same way the font faces are, so the panel, the gallery, the web app and
 * the browser's own icon are all the same figure and cannot drift apart.
 */
.brand-mark{
  display:block;flex:0 0 auto;width:28px;height:28px;
  background:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%20128%22%20width%3D%22128%22%20height%3D%22128%22%20role%3D%22img%22%20aria-label%3D%22Lumen%22%3E%20%3Crect%20class%3D%22lumen-tile%22%20width%3D%22128%22%20height%3D%22128%22%20rx%3D%2230%22%20fill%3D%22%237350F5%22%2F%3E%20%3Cg%20class%3D%22lumen-slots%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%3E%20%3Cpath%20d%3D%22M64%2020v9%22%2F%3E%3Cpath%20d%3D%22M64%2099v9%22%2F%3E%3Cpath%20d%3D%22M20%2064h9%22%2F%3E%3Cpath%20d%3D%22M99%2064h9%22%2F%3E%20%3Cpath%20d%3D%22M33%2033l6.4%206.4%22%2F%3E%3Cpath%20d%3D%22M88.6%2088.6l6.4%206.4%22%2F%3E%3Cpath%20d%3D%22M95%2033l-6.4%206.4%22%2F%3E%3Cpath%20d%3D%22M39.4%2088.6L33%2095%22%2F%3E%20%3C%2Fg%3E%20%3Ccircle%20class%3D%22lumen-ring%22%20cx%3D%2264%22%20cy%3D%2264%22%20r%3D%2230%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%2211%22%2F%3E%20%3Cpath%20class%3D%22lumen-beam%22%20d%3D%22M85.2%2042.8A30%2030%200%200%201%2085.2%2085.2%22%20fill%3D%22none%22%20stroke%3D%22%23C3B2FF%22%20stroke-width%3D%2211%22%20stroke-linecap%3D%22butt%22%2F%3E%20%3C%2Fsvg%3E) center/contain no-repeat;
  color:transparent;font-size:0
}

/* The emblem: the same figure without its tile, for a masthead. packages/ui/mark.js
 * derives it from mark.svg. The side panel hero drew it as a conic gradient
 * instead, in the violet fill rather than the violet ink and with no beam, which
 * made it the dimmest of four different emblems across the product. The surface
 * sets the size. */
.brand-emblem{
  display:block;flex:0 0 auto;
  background:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2216%2016%2096%2096%22%20width%3D%2296%22%20height%3D%2296%22%20role%3D%22img%22%20aria-label%3D%22Lumen%22%3E%20%3Cg%20class%3D%22lumen-slots%22%20stroke%3D%22%23A896FF%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.7%22%3E%20%3Cpath%20d%3D%22M64%2020v9%22%2F%3E%3Cpath%20d%3D%22M64%2099v9%22%2F%3E%3Cpath%20d%3D%22M20%2064h9%22%2F%3E%3Cpath%20d%3D%22M99%2064h9%22%2F%3E%20%3Cpath%20d%3D%22M33%2033l6.4%206.4%22%2F%3E%3Cpath%20d%3D%22M88.6%2088.6l6.4%206.4%22%2F%3E%3Cpath%20d%3D%22M95%2033l-6.4%206.4%22%2F%3E%3Cpath%20d%3D%22M39.4%2088.6L33%2095%22%2F%3E%20%3C%2Fg%3E%20%3Ccircle%20class%3D%22lumen-ring%22%20cx%3D%2264%22%20cy%3D%2264%22%20r%3D%2230%22%20fill%3D%22none%22%20stroke%3D%22%23A896FF%22%20stroke-width%3D%223%22%2F%3E%20%3Cpath%20class%3D%22lumen-beam%22%20d%3D%22M85.2%2042.8A30%2030%200%200%201%2085.2%2085.2%22%20fill%3D%22none%22%20stroke%3D%22%23E9E9F2%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22butt%22%2F%3E%20%3C%2Fsvg%3E) center/contain no-repeat;
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--wqa-brand) 45%,transparent));
  color:transparent;font-size:0
}

/* Lumen client portal.

   THESIS: the operator's console, opened to the client. The same near-black
   grounds, one violet voice, hairlines instead of shadow and one severity ramp
   as the Site Audit overlay, at a reading density a business owner can take in
   at arm's length: 14px body rather than the console's 13px, and a headline a
   step larger, because the portal is read more than it is operated.

   Every color is a token from packages/ui/tokens.css. The only values this sheet
   writes itself are geometry. */

[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wqa-canvas);color:var(--wqa-ink);font:400 14px/1.55 var(--wqa-sans);min-height:100vh}
a{color:var(--wqa-brand-text);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--wqa-ink)}
:focus-visible{outline:2px solid var(--wqa-focus);outline-offset:2px}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em;line-height:1.25}
p{margin:0}
code,.mono{font-family:var(--wqa-mono);font-size:12.5px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:10;background:var(--wqa-brand);color:#fff;padding:8px 12px;border-radius:var(--wqa-r-sm)}
.skip:focus{top:12px}
.meta{color:var(--wqa-ink-faint);font-size:12.5px}
.meta.block,.block{display:block}
.hint{color:var(--wqa-ink-faint);font-size:12.5px;margin-top:10px}
.empty{color:var(--wqa-ink-faint);padding:6px 0}
.lede{color:var(--wqa-ink-soft);max-width:72ch;margin-top:6px}

/* --- The lockup ---------------------------------------------------------- */
.lockup{display:flex;align-items:center;gap:10px;color:var(--wqa-ink);text-decoration:none;min-width:0}
.lockup:hover{color:var(--wqa-ink)}
.lockup-name{font-weight:650;font-size:16px;letter-spacing:-.01em}
.lockup-by{color:var(--wqa-ink-faint);font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- Buttons --------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:8px 14px;border-radius:var(--wqa-r-sm);border:1px solid var(--wqa-line-strong);background:var(--wqa-surface);color:var(--wqa-ink);font:600 13px/1.2 var(--wqa-sans);text-decoration:none;cursor:pointer;transition:background .12s ease,border-color .12s ease;white-space:nowrap}
.btn:hover{background:var(--wqa-sunken);color:var(--wqa-ink)}
.btn-primary{background:var(--wqa-brand);border-color:var(--wqa-brand);color:#fff}
.btn-primary:hover{background:var(--wqa-brand-strong);border-color:var(--wqa-brand-strong);color:#fff}
.btn-quiet{background:var(--wqa-brand-soft);border-color:transparent;color:var(--wqa-brand-text)}
.btn-quiet:hover{background:var(--wqa-brand-line);color:var(--wqa-ink)}
.btn-danger{border-color:var(--wqa-critical);color:var(--wqa-critical)}
.btn-danger:hover{background:var(--wqa-critical-soft);color:var(--wqa-critical)}
.btn-sm{min-height:30px;padding:5px 10px;font-size:12.5px}
.btn-block{width:100%}
.btn[disabled]{opacity:.48;cursor:default}
.linkish{background:none;border:0;padding:0;font:inherit;font-size:12.5px;font-weight:600;color:var(--wqa-brand-text);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.linkish:hover{color:var(--wqa-ink)}
form.inline{display:inline}

/* Google's sign-in button, in the dark form its branding rules describe. */
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:42px;padding:9px 16px;border-radius:var(--wqa-r-sm);border:1px solid var(--wqa-line-strong);background:var(--wqa-backdrop);color:var(--wqa-ink);font:600 14px/1.2 var(--wqa-sans);text-decoration:none;transition:background .12s ease,border-color .12s ease}
.btn-google:hover{background:var(--wqa-sunken);border-color:var(--wqa-ink-faint);color:var(--wqa-ink)}
.g-mark{width:18px;height:18px;flex:0 0 auto}

/* --- Fields ---------------------------------------------------------------- */
.form{display:grid;gap:14px}
.form-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:4px 0 16px}
.form-row .grow{flex:1 1 280px}
.form-row .narrow-field{flex:0 0 170px}
.form-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:start}
.form-actions{display:flex;align-items:center;gap:12px;align-self:end;min-height:38px}
.field{display:grid;gap:6px;min-width:0}
.field>span{font-size:12.5px;font-weight:600;color:var(--wqa-ink-soft)}
.field small{color:var(--wqa-ink-faint);font-size:12px}
input,select,textarea{width:100%;min-height:38px;padding:8px 12px;border-radius:var(--wqa-r-sm);border:1px solid var(--wqa-line-strong);background:var(--wqa-surface);color:var(--wqa-ink);font:400 14px/1.4 var(--wqa-sans)}
input::placeholder{color:var(--wqa-ink-faint)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--wqa-focus);outline-offset:1px;border-color:var(--wqa-brand)}
input[type=file]{padding:5px 8px;color:var(--wqa-ink-soft)}
input[type=file]::file-selector-button{margin-right:10px;padding:5px 10px;border-radius:var(--wqa-r-xs);border:1px solid var(--wqa-line-strong);background:var(--wqa-sunken);color:var(--wqa-ink);font:600 12.5px var(--wqa-sans);cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--wqa-surface-raised)}
input[readonly]{background:var(--wqa-sunken)}
.field-error{color:var(--wqa-critical);font-size:13px}
.copy-row{display:flex;gap:8px}
.copy-row input{flex:1}

/* --- Banners and states ---------------------------------------------------- */
.banner{margin:0 0 18px;padding:10px 14px;border-radius:var(--wqa-r-sm);border:1px solid var(--wqa-line-strong);background:var(--wqa-surface);font-size:13.5px}
.banner[data-tone=ok]{background:var(--wqa-ok-soft);border-color:color-mix(in srgb,var(--wqa-ok) 40%,transparent);color:var(--wqa-ok)}
.banner[data-tone=critical]{background:var(--wqa-critical-soft);border-color:color-mix(in srgb,var(--wqa-critical) 40%,transparent);color:var(--wqa-critical)}
/* What was not surveyed is hatched, not greyed and not colored as a failure. */
.unsurveyed{display:grid;gap:4px;padding:16px 18px;border-radius:var(--wqa-r);border:1px dashed var(--wqa-line-strong);background:var(--wqa-hatch),var(--wqa-surface);color:var(--wqa-ink-soft)}
.unsurveyed b{color:var(--wqa-ink);font-weight:600}
.unsurveyed[data-tone=warn]{border-color:color-mix(in srgb,var(--wqa-warn) 55%,transparent)}
.unsurveyed[data-tone=ok]{border-style:solid;background:var(--wqa-surface)}

/* --- The one pill ---------------------------------------------------------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:var(--wqa-r-pill);border:1px solid transparent;background:var(--wqa-sunken);color:var(--wqa-ink-soft);font:600 11.5px/normal var(--wqa-sans);white-space:nowrap;word-break:normal;vertical-align:middle}
.pill[data-tone=ok]{background:var(--wqa-ok-soft);color:var(--wqa-ok)}
.pill[data-tone=warn]{background:var(--wqa-warn-soft);color:var(--wqa-warn);border-color:color-mix(in srgb,var(--wqa-sev-medium) 35%,transparent)}
.pill[data-tone=critical]{background:var(--wqa-critical-soft);color:var(--wqa-critical);border-color:color-mix(in srgb,var(--wqa-sev-high) 35%,transparent)}
.pill[data-tone=critical-solid]{background:var(--wqa-sev-critical);color:#fff}
.pill[data-tone=brand]{background:var(--wqa-brand-soft);color:var(--wqa-brand-text);border-color:var(--wqa-brand-line)}
.pill[data-tone=muted]{background:transparent;color:var(--wqa-ink-faint);border-color:var(--wqa-line-strong)}
.pill[data-tone=outline]{background:transparent;color:var(--wqa-ink-soft);border-color:var(--wqa-line-strong)}

.conf{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--wqa-ink-soft);white-space:nowrap}
.conf-dot{width:8px;height:8px;border-radius:50%;background:var(--wqa-line-strong);flex:0 0 auto}
.conf[data-confidence=confirmed] .conf-dot{background:var(--wqa-ok)}
.conf[data-confidence=corroborated] .conf-dot{background:transparent;box-shadow:inset 0 0 0 2px var(--wqa-ok)}
.conf[data-confidence=inferred] .conf-dot{background:var(--wqa-sev-medium)}

/* --- The public frame ------------------------------------------------------ */
body.public{display:flex;flex-direction:column}
.public-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(16px,4vw,48px);border-bottom:1px solid var(--wqa-line)}
.public-bar-link{color:var(--wqa-ink-faint);font-size:13px;text-decoration:none}
.public-bar-link:hover{color:var(--wqa-ink)}
.public-main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:clamp(28px,6vw,72px) clamp(16px,4vw,48px)}
.public-main:focus{outline:none}
.public-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:20px clamp(16px,4vw,48px);border-top:1px solid var(--wqa-line);color:var(--wqa-ink-faint);font-size:12.5px}
.public-foot nav{display:flex;gap:18px}
.public-foot a{color:var(--wqa-ink-soft)}

.door{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:clamp(32px,6vw,88px);align-items:start}
.door-emblem{width:64px;height:64px;margin-bottom:22px}
.door h1{font-size:clamp(30px,4.2vw,46px);line-height:1.08;letter-spacing:-.03em;max-width:17ch}
.door-lede{margin-top:18px;color:var(--wqa-ink-soft);font-size:17px;line-height:1.55;max-width:56ch}
.door-list{margin:32px 0 0;padding:0;border-top:1px solid var(--wqa-line);max-width:60ch}
.door-list>div{display:grid;grid-template-columns:minmax(0,15ch) minmax(0,1fr);gap:24px;padding:16px 0;border-bottom:1px solid var(--wqa-line)}
.door-list dt{font-weight:600;color:var(--wqa-ink)}
.door-list dd{margin:0;color:var(--wqa-ink-soft)}
.door-note{margin-top:24px;color:var(--wqa-ink-faint);font-size:13.5px}
.signin{background:var(--wqa-surface);border:1px solid var(--wqa-line);border-radius:var(--wqa-r-float);padding:28px;display:grid;gap:16px}
.signin h2{font-size:18px}
.or{display:flex;align-items:center;gap:12px;color:var(--wqa-ink-faint);font-size:12.5px;margin:2px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--wqa-line)}
.signin-foot{font-size:13px;margin-top:14px}
.signin .signin-foot{margin-top:0}
.narrow{max-width:440px;margin:0 auto;display:grid;gap:16px}
.narrow h1{font-size:26px;letter-spacing:-.02em}
.narrow .hint{margin-top:-8px}
.message{max-width:560px;margin:0 auto;display:grid;gap:14px}
.message h1{font-size:26px}
.message p{color:var(--wqa-ink-soft)}
.prose{max-width:70ch;margin:0 auto}
.prose h1{font-size:30px;letter-spacing:-.02em}
.prose h2{font-size:17px;margin:32px 0 8px}
.prose h3{font-size:15px;margin:20px 0 6px}
.prose p{color:var(--wqa-ink-soft);margin:0 0 10px}
.prose pre{background:var(--wqa-surface);border:1px solid var(--wqa-line);border-radius:var(--wqa-r-sm);padding:12px 14px;overflow-x:auto;margin:0 0 12px}

/* --- The signed-in frame --------------------------------------------------- */
.shell{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;gap:18px;padding:18px 14px;background:var(--wqa-surface);border-right:1px solid var(--wqa-line);scrollbar-width:thin}
.identity{display:grid;gap:2px;padding:12px 10px;border-radius:var(--wqa-r-sm);background:var(--wqa-sunken)}
.identity-name{font-weight:600;font-size:13.5px;overflow-wrap:anywhere}
.identity-meta{color:var(--wqa-ink-faint);font-size:12px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.identity-switch{font-size:12px;margin-top:4px}
.nav-group{display:grid;gap:2px}
.nav-label{margin:12px 10px 4px;color:var(--wqa-ink-faint);font-size:12px;font-weight:600}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--wqa-r-sm);color:var(--wqa-ink-soft);font-size:13.5px;font-weight:500;text-decoration:none;transition:background .12s ease}
.nav-item:hover{background:var(--wqa-sunken);color:var(--wqa-ink)}
.nav-item[aria-current=page]{background:var(--wqa-brand-soft);color:var(--wqa-ink)}
.nav-item[aria-current=page] .ico{color:var(--wqa-brand-text)}
.nav-meta{margin-left:auto;color:var(--wqa-ink-faint);font-size:11.5px}
.ico{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.side-foot{margin-top:auto;display:grid;gap:10px;padding-top:14px;border-top:1px solid var(--wqa-line)}
.who{display:grid;gap:1px;padding:6px 10px;border-radius:var(--wqa-r-sm);color:var(--wqa-ink);text-decoration:none}
.who:hover,.who[aria-current=page]{background:var(--wqa-sunken);color:var(--wqa-ink)}
.who-name{font-weight:600;font-size:13px;overflow-wrap:anywhere}
.who-meta{color:var(--wqa-ink-faint);font-size:12px;overflow-wrap:anywhere}
.side-foot form{padding:0 10px}
.main{padding:28px clamp(16px,3vw,40px) 56px;min-width:0;max-width:1320px}
.main:focus{outline:none}

.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.page-head h1{font-size:24px;letter-spacing:-.02em;overflow-wrap:anywhere}
.page-actions{display:flex;flex-wrap:wrap;gap:8px}
.period{color:var(--wqa-ink-faint);font-size:12.5px;margin:-8px 0 14px}
.freshness{color:var(--wqa-ink-faint);font-size:12.5px;margin-top:14px}
.update-admin{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}

.panel{background:var(--wqa-surface);border:1px solid var(--wqa-line);border-radius:var(--wqa-r);padding:18px 20px;margin-bottom:16px;min-width:0}
.panel>h2{font-size:15px;margin-bottom:10px}
.panel>h2+.panel-note{margin-top:-6px}
.panel-note{color:var(--wqa-ink-faint);font-size:12.5px;margin-bottom:12px}
.panel[data-tone=brand]{border-color:var(--wqa-brand-line);background:var(--wqa-brand-soft)}
details.panel>summary{cursor:pointer;font-weight:600}
.band{margin-bottom:22px;min-width:0}
.band-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.band-head h2{font-size:15px}
.more{font-size:13px;font-weight:600;text-decoration:none}
.more:hover{text-decoration:underline}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:0 16px;align-items:start}
.year{font-size:13px;color:var(--wqa-ink-faint);margin:14px 0 4px}
.year:first-of-type{margin-top:0}

/* --- Stat tiles: one hairlined instrument, not floating cards ---------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--wqa-line);border:1px solid var(--wqa-line);border-radius:var(--wqa-r);overflow:hidden;margin-bottom:16px}
.tile{display:grid;align-content:start;gap:4px;padding:16px 18px;background:var(--wqa-surface);min-width:0}
.tile-label{color:var(--wqa-ink-faint);font-size:12.5px;font-weight:500}
.tile-value{font-size:26px;font-weight:650;letter-spacing:-.03em;line-height:1.1}
.tile-delta{font-size:12.5px;font-weight:600;color:var(--wqa-ink-faint)}
.tile-delta[data-tone=good]{color:var(--wqa-ok)}
.tile-delta[data-tone=bad]{color:var(--wqa-critical)}
.tile-vs{color:var(--wqa-ink-faint);font-weight:400}
.tile-note{color:var(--wqa-ink-faint);font-size:12px}
.spark{width:100%;height:28px;margin-top:6px;overflow:visible}
.spark path{fill:none;stroke:var(--wqa-brand);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--wqa-line);border:1px solid var(--wqa-line);border-radius:var(--wqa-r);overflow:hidden;margin-bottom:16px}
.strip>div{display:grid;gap:4px;padding:14px 16px;background:var(--wqa-surface)}
.strip-value{font-size:22px;font-weight:650;letter-spacing:-.02em}

/* --- Charts ------------------------------------------------------------------ */
.chart{margin:4px 0 0}
.chart-frame{padding-left:44px}
.plot{position:relative;height:200px;margin-top:8px}
.plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.plot .grid{stroke:var(--wqa-line);stroke-width:1}
.plot .wash{fill:var(--wqa-brand);fill-opacity:.1}
.plot .line{fill:none;stroke:var(--wqa-brand);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.y-tick{position:absolute;right:calc(100% + 8px);transform:translateY(50%);color:var(--wqa-ink-faint);font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1}
.end-dot,.probe{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--wqa-brand);box-shadow:0 0 0 2px var(--wqa-surface);transform:translate(-50%,50%);pointer-events:none}
.crosshair{position:absolute;top:0;bottom:0;width:1px;background:var(--wqa-line-strong);pointer-events:none}
.chart-tip{position:absolute;top:0;z-index:2;display:grid;gap:2px;min-width:120px;padding:8px 10px;border-radius:var(--wqa-r-sm);border:1px solid var(--wqa-line-strong);background:var(--wqa-surface-raised);box-shadow:var(--wqa-shadow-md);pointer-events:none;font-size:12.5px}
.chart-tip b{font-size:15px;font-weight:650;font-variant-numeric:tabular-nums}
.chart-tip span{color:var(--wqa-ink-faint)}
.x-axis{position:relative;height:26px}
.x-axis span{position:absolute;top:8px;transform:translateX(-50%);color:var(--wqa-ink-faint);font-size:11.5px;white-space:nowrap}
.x-axis span.first{transform:none}
.x-axis span.last{transform:translateX(-100%)}
.chart-table{margin-top:6px}
.chart-table summary{cursor:pointer;color:var(--wqa-ink-faint);font-size:12.5px;width:max-content}
.chart-table summary:hover{color:var(--wqa-ink)}
.chart-table .table-wrap{max-height:280px;margin-top:8px}

.bars{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.bars li{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr) 5rem;align-items:center;gap:12px;font-size:13px}
.bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--wqa-ink-soft)}
.bar-track{height:14px}
.bar{display:block;height:100%;background:var(--wqa-brand);border-radius:0 4px 4px 0}
.bar-value{text-align:right;font-variant-numeric:tabular-nums;color:var(--wqa-ink)}

/* --- Tables -------------------------------------------------------------------- */
.table-wrap{overflow:auto;border:1px solid var(--wqa-line);border-radius:var(--wqa-r);scrollbar-width:thin}
table.data{width:100%;border-collapse:collapse;font-size:13px}
.data th{position:sticky;top:0;text-align:left;font-size:12px;font-weight:600;color:var(--wqa-ink-faint);background:var(--wqa-sunken);padding:9px 12px;border-bottom:1px solid var(--wqa-line);white-space:nowrap}
.data td{padding:10px 12px;border-bottom:1px solid var(--wqa-line);color:var(--wqa-ink-soft);vertical-align:top}
.data tr:last-child td{border-bottom:0}
.data tbody tr:hover td{background:var(--wqa-sunken)}
.data .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.data .key{color:var(--wqa-ink);max-width:44ch;overflow-wrap:anywhere}
.data .key a{color:var(--wqa-ink)}
.data .key a:hover{color:var(--wqa-brand-text)}
.data .row-action{text-align:right;white-space:nowrap}
.data .row-action>*+*{margin-left:12px}
.data .empty{text-align:center;padding:18px}
.data.compact td,.data.compact th{padding:7px 12px}
.table-wrap+.form-row{margin-top:16px}
.evidence{display:block;margin-top:6px;color:var(--wqa-ink-faint);overflow-wrap:anywhere;white-space:pre-wrap}

.doc-list{list-style:none;margin:0;padding:0}
.doc-list li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 0;border-bottom:1px solid var(--wqa-line)}
.doc-list li:last-child{border-bottom:0}
.doc-list .ico{color:var(--wqa-ink-faint)}
.doc-list a{font-weight:600;color:var(--wqa-ink);text-decoration:none}
.doc-list a:hover{color:var(--wqa-brand-text);text-decoration:underline}
.doc-list .meta{margin-left:auto}
.doc-list .meta a{font-weight:500;color:var(--wqa-brand-text)}

/* --- Audits, scans and the plan -------------------------------------------------- */
.audit-line{display:grid;gap:12px}
.next-tasks{list-style:none;margin:0;padding:0;border-top:1px solid var(--wqa-line)}
.next-tasks li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--wqa-line)}
.meter{height:6px;border-radius:var(--wqa-r-pill);background:var(--wqa-info-soft);overflow:hidden;margin:6px 0 12px}
.meter>span{display:block;height:100%;background:var(--wqa-brand);transform-origin:left;transition:transform .3s ease}
.meter.indeterminate>span{width:35%;animation:sweep 1.4s ease-in-out infinite}
@keyframes sweep{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
.progress-line{font-variant-numeric:tabular-nums}
.brief{border-left:3px solid var(--wqa-brand);background:var(--wqa-surface);border-radius:0 var(--wqa-r) var(--wqa-r) 0;padding:14px 18px;margin-bottom:16px}
.brief .label,.label{color:var(--wqa-ink-faint);font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.attention{list-style:none;margin:0;padding:0}
.attention li{display:grid;grid-template-columns:8.5rem minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--wqa-line)}
.attention li:last-child{border-bottom:0}
.attention .area{color:var(--wqa-ink-faint);font-size:12.5px}

.plan-size{color:var(--wqa-ink-soft);margin-bottom:12px}
.plan-size b{color:var(--wqa-ink)}
.phase-rail{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--wqa-line);border:1px solid var(--wqa-line);border-radius:var(--wqa-r);overflow:hidden}
.phase-rail a{display:flex;gap:10px;padding:12px 14px;background:var(--wqa-surface);color:var(--wqa-ink);text-decoration:none;height:100%}
.phase-rail a:hover{background:var(--wqa-sunken)}
.phase-rail a>span:last-child{display:grid;gap:2px}
.pn{color:var(--wqa-brand-text);font-weight:650;font-variant-numeric:tabular-nums}
.phase{padding-top:18px;margin-top:18px;border-top:1px solid var(--wqa-line)}
.phase-head{display:flex;gap:14px;align-items:baseline}
.phase-head h3{font-size:17px}
.phase-head p{color:var(--wqa-ink-soft);margin-top:4px;max-width:72ch}
.phase-exit{margin:10px 0 0 30px;color:var(--wqa-ink-soft);font-size:13px}
.stream{margin:16px 0 0 30px}
.stream-name{font-size:13.5px;color:var(--wqa-ink-soft);font-weight:600;margin-bottom:4px}
.tasks{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--wqa-line)}
.task{padding:14px 0;border-bottom:1px solid var(--wqa-line);display:grid;gap:8px}
.task-ask{border-bottom-style:dashed}
.task-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.task-top h4{font-size:14px;font-weight:600;flex:1 1 20ch}
.task-desc{color:var(--wqa-ink-soft);max-width:80ch}
.task-do{max-width:80ch}
.task-facts{display:flex;flex-wrap:wrap;gap:6px 24px;margin:0;font-size:12.5px}
.task-facts div{display:flex;gap:6px}
.task-facts dt{color:var(--wqa-ink-faint)}
.task-facts dd{margin:0;color:var(--wqa-ink-soft)}
.task-urls summary{cursor:pointer;color:var(--wqa-brand-text);font-size:12.5px;font-weight:600;width:max-content}
.task-urls ul{margin:8px 0 0;padding-left:18px;color:var(--wqa-ink-soft);font-size:13px}
.url-list a{font-family:var(--wqa-mono);font-size:12px;overflow-wrap:anywhere}

.review-summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:12px}
.review-avg{font-size:26px;font-weight:650}
.stars{color:var(--wqa-ink);letter-spacing:1px}
.stars-off{color:var(--wqa-line-strong)}
.reviews{list-style:none;margin:0;padding:0}
.reviews li{padding:12px 0;border-top:1px solid var(--wqa-line);display:grid;gap:4px}
.review-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}

/* --- Admin --------------------------------------------------------------------- */
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.checklist li{display:flex;gap:10px;align-items:flex-start;color:var(--wqa-ink-soft)}
.check{width:16px;height:16px;border-radius:50%;flex:0 0 auto;margin-top:2px;border:1.5px dashed var(--wqa-line-strong)}
.checklist li[data-ok=yes] .check{border:0;background:var(--wqa-ok)}
.checklist li[data-ok=yes]{color:var(--wqa-ink-faint)}
.sources{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.source{display:grid;gap:8px;align-content:start;padding:14px;border:1px solid var(--wqa-line);border-radius:var(--wqa-r-sm);background:var(--wqa-canvas)}
.source h3{font-size:13.5px}
.source-current{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;overflow-wrap:anywhere}
.source .form-row{margin:0}
.steps{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--wqa-ink-soft)}
.upload-status{font-size:12.5px;color:var(--wqa-ink-faint)}

/* --- The fold ------------------------------------------------------------------ */
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side,.main{min-width:0}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 16px;border-right:0;border-bottom:1px solid var(--wqa-line);overflow:visible}
  .side .lockup{order:1}
  .identity{order:2;padding:0;background:none;margin-left:auto;text-align:right}
  .identity-switch{display:none}
  .nav-group{order:3;flex:1 1 100%;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .nav-group+.nav-group{margin-top:-4px}
  .nav-label{display:none}
  .nav-item{flex:0 0 auto;padding:7px 10px}
  .nav-meta{display:none}
  .side-foot{order:4;flex:1 1 100%;margin:0;padding-top:10px;display:flex;align-items:center;justify-content:space-between}
  .who{padding:0}
  .side-foot form{padding:0}
  .main{padding:22px 16px 48px}
  .door{grid-template-columns:1fr}
  .door-list>div{grid-template-columns:1fr;gap:4px}
  .stream,.phase-exit{margin-left:0}
}
@media (max-width:560px){
  .page-head h1{font-size:21px}
  .tile-value{font-size:23px}
  .bars li{grid-template-columns:minmax(0,1fr) 4rem;gap:4px 10px}
  .bar-label{grid-column:1 / -1}
  .attention li{grid-template-columns:1fr auto}
  .attention .area{grid-column:1 / -1}
  .chart-frame{padding-left:36px}
  .plot{height:170px}
  .signin{padding:20px}
  .public-bar-link{display:none}
  .lockup-by{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* --- Filters: one row above what they scope ---------------------------------- */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 14px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.filters-action{margin-left:auto}
.chip{display:inline-flex;align-items:center;min-height:32px;padding:5px 12px;border-radius:var(--wqa-r-pill);border:1px solid var(--wqa-line-strong);background:transparent;color:var(--wqa-ink-soft);font:600 12.5px/1.2 var(--wqa-sans);text-decoration:none;max-width:24ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background .12s ease,border-color .12s ease}
.chip:hover{background:var(--wqa-sunken);color:var(--wqa-ink)}
.chip[aria-current]{background:var(--wqa-brand-soft);border-color:var(--wqa-brand-line);color:var(--wqa-brand-text)}
.vitals-verdict{display:flex;align-items:center;gap:8px;margin-bottom:12px}
h3.sub{font-size:14px;margin:18px 0 4px}
.field.wide{grid-column:1 / -1}
textarea{min-height:76px;resize:vertical;font-family:var(--wqa-mono);font-size:12.5px}
.strip>div>span:last-child:not(.strip-value){margin-top:2px}
.source-key{display:grid;gap:8px;margin-top:6px;padding-top:12px;border-top:1px solid var(--wqa-line)}
.source-key h4{font-size:13px;font-weight:600;color:var(--wqa-ink-soft)}

/* --- Updates: an editorial feed, the date in the margin ----------------------- */
.feed{list-style:none;margin:0;padding:0}
.update{display:grid;grid-template-columns:10rem minmax(0,1fr);gap:8px 28px;padding:22px 0;border-top:1px solid var(--wqa-line)}
.feed>.update:first-child{border-top:0;padding-top:4px}
.update-when{display:grid;align-content:start;gap:2px;color:var(--wqa-ink-soft);font-size:13px;font-variant-numeric:tabular-nums}
.update-body{max-width:68ch;min-width:0}
.update-body h2{font-size:18px;letter-spacing:-.015em;margin-bottom:8px}
.update-body h2 a{color:var(--wqa-ink);text-decoration:none}
.update-body h2 a:hover{color:var(--wqa-brand-text);text-decoration:underline}
.update-body p{color:var(--wqa-ink-soft);margin:0 0 10px;line-height:1.65}
.feed.compact .update{grid-template-columns:7rem minmax(0,1fr);padding:0}
.feed.compact .update-body h2{font-size:15px;margin:0}
.prose-input{font-family:var(--wqa-sans);font-size:14px;line-height:1.55}
.check-row{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--wqa-ink-soft)}
.check-row input{width:16px;height:16px;min-height:0;margin:0}
.check-row.wide{grid-column:1 / -1}

/* --- Tasks: a list with who has each item --------------------------------------- */
.task-list{list-style:none;margin:4px 0 0;padding:0;border-top:1px solid var(--wqa-line)}
.task-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 20px;align-items:start;padding:14px 0;border-bottom:1px solid var(--wqa-line)}
.task-item:last-child{border-bottom:0}
.task-title{font-weight:600;color:var(--wqa-ink)}
.task-item.is-done .task-title{color:var(--wqa-ink-soft);text-decoration:line-through;text-decoration-color:var(--wqa-line-strong)}
.task-notes{color:var(--wqa-ink-soft);white-space:pre-line;margin:4px 0 6px;max-width:72ch;font-size:13.5px}
.task-side{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 12px}
.task-edit{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.task-edit select,.task-edit input{width:auto;min-height:30px;padding:4px 8px;font-size:12.5px}
.overdue{color:var(--wqa-warn);font-weight:600}
.waiting{margin-bottom:6px}
.work-band .split{align-items:start}
@media (max-width:700px){
  .update{grid-template-columns:1fr;gap:4px}
  .update-when{grid-auto-flow:column;justify-content:start;gap:10px}
  .feed.compact .update{grid-template-columns:1fr}
  .task-item{grid-template-columns:1fr}
  .task-side{justify-content:flex-start}
}

.change-list{list-style:none;margin:8px 0 0;padding:0}
.change-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--wqa-line)}
.change-list li:last-child{border-bottom:0}
.narrow-panel{max-width:760px}