/* Brutally Honest Reports viewer */

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --text: #16191d;
  --muted: #5d6671;
  --border: #d9dde3;
  --accent: #0b4fc4;
  --accent-soft: #e3ecfb;
  --code-bg: #eef0f3;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);

  --g-a: #137a3e;  --g-a-bg: #dcf3e5;
  --g-b: #0b5fae;  --g-b-bg: #dcebfa;
  --g-c: #8a5a00;  --g-c-bg: #fbeecb;
  --g-d: #b04a00;  --g-d-bg: #fde3cf;
  --g-f: #b3141b;  --g-f-bg: #fbdcdc;

  --sev-critical: #b3141b; --sev-critical-bg: #fbdcdc;
  --sev-high: #b04a00;     --sev-high-bg: #fde3cf;
  --sev-medium: #8a5a00;   --sev-medium-bg: #fbeecb;
  --sev-low: #4d5763;      --sev-low-bg: #e7eaee;
  /* Issue bar: colour-blind-safe ramp (dark purple, crimson, amber, grey) that also steps in lightness. */
  --bar-critical: #56106e; --bar-high: #c03a51; --bar-medium: #f59e0b; --bar-low: #cdd3da;

  --ok: #137a3e; --err: #b3141b;
  --assigned-bg: #f4effc; --assigned-line: #c9b5ee;
  --other-bg: #fdf0f0; --other-line: #efc3c3; --other-hatch: rgba(179, 20, 27, .08);
  --radius: 10px;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1317; --surface: #161b21; --surface-2: #1d242c; --text: #e7eaee; --muted: #9aa4af;
    --border: #2c343e; --accent: #7cb7ff; --accent-soft: #1b2b44; --code-bg: #212932;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --g-a: #6fd89a; --g-a-bg: #133322; --g-b: #7cb7ff; --g-b-bg: #16283f; --g-c: #f2c150; --g-c-bg: #3a2e10;
    --g-d: #ff9d5c; --g-d-bg: #3d2413; --g-f: #ff8a8a; --g-f-bg: #421a1c;
    --sev-critical: #ff8a8a; --sev-critical-bg: #421a1c; --sev-high: #ff9d5c; --sev-high-bg: #3d2413;
    --sev-medium: #f2c150; --sev-medium-bg: #3a2e10; --sev-low: #b3bcc6; --sev-low-bg: #262d36;
    --bar-critical: #c084fc; --bar-high: #f0607a; --bar-medium: #fbbf24; --bar-low: #5b6470;
    --ok: #6fd89a; --err: #ff8a8a;
    --assigned-bg: #221c30; --assigned-line: #4a3d6b;
    --other-bg: #2e1a1c; --other-line: #6b3a3e; --other-hatch: rgba(255, 138, 138, .08);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1317; --surface: #161b21; --surface-2: #1d242c; --text: #e7eaee; --muted: #9aa4af;
  --border: #2c343e; --accent: #7cb7ff; --accent-soft: #1b2b44; --code-bg: #212932;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --g-a: #6fd89a; --g-a-bg: #133322; --g-b: #7cb7ff; --g-b-bg: #16283f; --g-c: #f2c150; --g-c-bg: #3a2e10;
  --g-d: #ff9d5c; --g-d-bg: #3d2413; --g-f: #ff8a8a; --g-f-bg: #421a1c;
  --sev-critical: #ff8a8a; --sev-critical-bg: #421a1c; --sev-high: #ff9d5c; --sev-high-bg: #3d2413;
  --sev-medium: #f2c150; --sev-medium-bg: #3a2e10; --sev-low: #b3bcc6; --sev-low-bg: #262d36;
  --bar-critical: #c084fc; --bar-high: #f0607a; --bar-medium: #fbbf24; --bar-low: #5b6470;
  --ok: #6fd89a; --err: #ff8a8a;
  --assigned-bg: #221c30; --assigned-line: #4a3d6b;
  --other-bg: #2e1a1c; --other-line: #6b3a3e; --other-hatch: rgba(255, 138, 138, .08);
  color-scheme: dark;
}

* { box-sizing: border-box; }
:root { --stick: 16px; }
.has-sitenav { --stick: 60px; } /* sticky items sit below the tabs, the only sticky part of the header */
html { scroll-padding-top: var(--stick); }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 var(--sans); -webkit-text-size-adjust: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.6rem; letter-spacing: -.01em; }
h2 { font-size: 1.2rem; margin-top: 1.8em; }
h3 { font-size: 1.02rem; }
code, pre, .mono { font-family: var(--mono); font-size: .88em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.nowrap { white-space: nowrap; }
.clip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Top bar */
.top { position: relative; z-index: 11; display: flex; align-items: center; gap: 16px; padding: 10px 20px;
  background: var(--surface); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 650; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: var(--text); color: var(--surface);
  font-size: .8rem; font-weight: 800; letter-spacing: .02em; }
.has-sitenav .top { border-bottom: 0; padding-bottom: 6px; }
.home-link { padding: 4px 8px; border-radius: 6px; color: var(--text); font-size: .95rem; white-space: nowrap; }
.home-link:hover { background: var(--surface-2); text-decoration: none; }
.nav-menu { position: relative; min-width: 0; }
.nav-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 4px 8px;
  border: 1px solid transparent; border-radius: 6px; color: var(--text); }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::after { content: "▾"; color: var(--muted); font-size: .8em; }
.nav-menu > summary:hover, .nav-menu[open] > summary { border-color: var(--border); background: var(--surface-2); }
.nav-menu ul { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 100%; width: max-content; max-width: min(380px, calc(100vw - 32px)); max-height: 60vh;
  overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: var(--shadow); font-size: .9rem; font-weight: 400; }
.nav-menu.end ul { left: auto; right: 0; }
.nav-menu li a, .menu-btn { display: block; width: 100%; padding: 6px 10px; border: 0; border-radius: 5px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-menu li a small { display: block; color: var(--muted); font-size: .82em; overflow: hidden; text-overflow: ellipsis; }
.nav-menu li a:hover, .menu-btn:hover { background: var(--surface-2); text-decoration: none; }
.nav-menu li a[aria-current] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-menu li a[aria-current] small { font-weight: 400; }
.menu-group { padding: 8px 10px 2px; color: var(--muted); font-size: .76rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.menu-signout { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }
.menu-signout form { margin: 0; }
.site-switch > summary, .site-only { font-weight: 600; }
.site-only { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 8px; }
.site-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-burger, .phone-only { display: none; }
.sitenav { position: sticky; top: 0; z-index: 10; display: flex; gap: 4px; padding: 0 20px; overflow-x: auto; scrollbar-width: none;
  background: var(--surface); border-bottom: 1px solid var(--border); }
.sitenav::-webkit-scrollbar { display: none; }
.sitenav a { padding: 9px 12px; border-bottom: 2px solid transparent; color: var(--muted); font-size: .92rem; white-space: nowrap; }
.sitenav a:hover { color: var(--text); text-decoration: none; border-bottom-color: var(--border); }
.sitenav a[aria-current] { color: var(--text); font-weight: 650; border-bottom-color: var(--accent); }
.back-link { display: inline-block; margin-bottom: 10px; color: var(--muted); font-size: .9rem; }
.back-link:hover { color: var(--accent); }
.who { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: .9rem; white-space: nowrap; }
.theme-toggle { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text); width: 30px; height: 30px; cursor: pointer; }
form.inline { display: inline; margin: 0; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 24px 20px 64px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.eyebrow { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
.ext::after { content: " ↗"; font-size: .85em; }

/* Buttons & form controls */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-size: .9rem; cursor: pointer; white-space: nowrap; }
.btn:hover { text-decoration: none; background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { background: #b3261e; border-color: #b3261e; color: #fff; }
.btn.danger:hover { filter: brightness(1.08); }
.website-delete { margin-top: 18px; }
.website-delete h2 { margin: 0; }
.btn.block { display: flex; justify-content: center; width: 100%; margin-top: 8px; }
.btn.link, button.link { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; width: 100%; }
label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--muted); }
.error { color: var(--err); } .ok { color: var(--ok); }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
a.card { color: inherit; display: block; }
a.card:hover { text-decoration: none; border-color: var(--accent); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.site-card { padding: 18px; position: relative; }
.site-card:hover { border-color: var(--accent); background: var(--accent-soft); }
/* The heading link covers the whole card; severity counts sit above it as their own links. */
.site-card .card-link { color: inherit; }
.site-card .card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.site-card .card-link:hover { text-decoration: none; }
/* The site name's link covers the whole card (::after above); every other link on the card sits above it. */
.site-card a:not(.card-link) { position: relative; z-index: 1; }
a.count:hover { text-decoration: none; box-shadow: 0 0 0 1px currentColor; }
.site-card h2 { margin: 0 0 2px; font-size: 1.1rem; overflow-wrap: anywhere; }
.site-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 14px 0; }
.facts div { min-width: 0; }
.facts dt { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.facts dd { margin: 0; font-weight: 600; }
.facts.inline { margin: 10px 0 0; }
.open-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.open-line .label { font-size: .8rem; color: var(--muted); margin-right: 4px; }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); }

/* Grades, severities, statuses */
.badge { display: inline-flex; align-items: baseline; gap: 6px; }
a.badge:hover { text-decoration: none; }
a.badge:hover .grade { outline: 2px solid currentColor; outline-offset: 1px; }
.grade { display: inline-block; min-width: 2.3em; text-align: center; font-weight: 750; border-radius: 6px; padding: 1px 6px; font-size: .9rem; }
.score { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .85rem; }
.g-a { color: var(--g-a); background: var(--g-a-bg); } .g-b { color: var(--g-b); background: var(--g-b-bg); }
.g-c { color: var(--g-c); background: var(--g-c-bg); } .g-d { color: var(--g-d); background: var(--g-d-bg); }
.g-f { color: var(--g-f); background: var(--g-f-bg); } .g-none { color: var(--muted); background: var(--surface-2); }
.sev { display: inline-block; font-size: .7rem; font-weight: 750; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; }
.sev-critical { color: var(--sev-critical); background: var(--sev-critical-bg); }
.sev-high { color: var(--sev-high); background: var(--sev-high-bg); }
.sev-medium { color: var(--sev-medium); background: var(--sev-medium-bg); }
.sev-low { color: var(--sev-low); background: var(--sev-low-bg); }
.count { font-size: .8rem; padding: 2px 8px; border-radius: 999px; }
.status { font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; }
.st-open { color: var(--sev-high); border-color: currentColor; }
.st-likely_fixed { color: var(--g-b); border-color: currentColor; }
.st-fixed { color: var(--g-a); background: var(--g-a-bg); border-color: transparent; }
.st-wontfix { color: var(--muted); }
.delta { font-size: .8rem; font-weight: 650; font-variant-numeric: tabular-nums; margin-left: 6px; }
.delta.up { color: var(--g-a); } .delta.down { color: var(--g-f); } .delta.flat { color: var(--muted); }
.chip { display: inline-block; font-size: .75rem; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); margin-right: 4px; white-space: nowrap; }
/* One chip per line (the Users table's websites) */
.chip-stack .chip { display: block; width: fit-content; margin: 0 0 4px; }
.chip-stack .chip:last-child { margin-bottom: 0; }
/* Long names are cut at 32 characters (the length of "Pigeon Forge Chamber of Commerce"); the full name is in the tooltip */
.users .chip-stack .chip { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; }
/* Website names on the Websites page are cut at 32 characters */
.site-name { display: inline-block; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* Users, Companies and Websites: the row under the pointer is highlighted */
table.list.users tbody tr:hover > * { background: var(--accent-soft); }
a.chip:hover { text-decoration: none; border-color: var(--accent); }
/* Who fixes it: Content / Site code / Server & hosting */
.chip.fg, .count.fg { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-weight: 600; }
.count.fg { color: var(--text); }
.fg-line { margin-top: 6px; }
/* Mark fixed by client */
.warn-text { color: var(--sev-critical); font-weight: 650; }
.cf-form { display: inline; margin: 0; }
.cf-btn { padding: 4px 12px; font-size: .85rem; }
.cf-btn.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 650; }
.f-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.cf-side { margin-top: 12px; }
.i-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.chip.cf { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 650; }
.chip.new { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 650; }
.chip.sitewide { background: var(--sev-high-bg); color: var(--sev-high); border-color: transparent; font-weight: 650; }
.result { font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.r-fail { color: var(--sev-critical); } .r-warn { color: var(--sev-medium); }

/* Stats strip */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.stat.wide { grid-column: span 2; }
.stat .label { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: 6px; }
.stat-num { font-size: 1.6rem; font-weight: 700; }
.stat-main .grade { font-size: 1.3rem; }

/* Tables */
.table-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
thead th { background: var(--surface-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 650; white-space: nowrap; }
tbody tr:last-child > * { border-bottom: 0; }
tbody th { font-weight: 600; }
.matrix td, .matrix th { white-space: nowrap; }
.matrix tbody th { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.matrix td:nth-last-child(4) { background: var(--accent-soft); }
tr.total > * { font-weight: 700; background: var(--surface-2); }
.md-cell code { word-break: break-word; }
.bar { display: inline-block; width: 60px; height: 6px; border-radius: 3px; background: var(--surface-2); vertical-align: middle; margin-right: 8px; overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: currentColor; }

/* Round page */
.rounds { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px; }
.round-chip { font-size: .8rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); white-space: nowrap; }
.round-chip .grade { font-size: .72rem; padding: 0 4px; min-width: 0; margin-left: 4px; }
.round-chip.current { border-color: var(--accent); background: var(--accent-soft); font-weight: 650; }
a.round-chip:hover { text-decoration: none; border-color: var(--accent); }
.doc-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.audit-list { display: grid; gap: 10px; }
.audit-card { display: flex !important; gap: 16px; padding: 14px 16px; }
.ac-grade { min-width: 110px; }
.ac-title { font-weight: 600; margin-bottom: 2px; }
.ac-title .muted { font-weight: 400; }
.ac-verdict { font-size: .9rem; }
.ac-meta { margin-top: 6px; }

/* Report */
.report-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 32px; }
.toc-inner { position: sticky; top: var(--stick); font-size: .88rem; }
.toc-title { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
.toc ol { list-style: none; padding: 0; margin: 0 0 12px; }
.toc li a { display: block; padding: 3px 8px; border-left: 2px solid var(--border); color: var(--muted); }
.toc li a:hover, .toc li a.active { color: var(--text); border-left-color: var(--accent); text-decoration: none; }
.report-head { display: flex; gap: 24px; justify-content: space-between; align-items: flex-start; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 14px; }
.report-head h1 { margin: 0 0 4px; }
.rh-main { min-width: 0; }
.rh-main .ext { word-break: break-all; }
.i-url { overflow-wrap: anywhere; }
.target { margin-top: 10px; font-size: .9rem; }
.target .label { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.rh-grade { text-align: center; min-width: 140px; }
.big-grade { font-size: 2.6rem; font-weight: 800; line-height: 1; padding: 12px 18px; border-radius: 12px; display: inline-block; }
.big-score { font-size: 1.3rem; font-weight: 700; margin: 6px 0 4px; }
.big-score span { font-size: .85rem; color: var(--muted); font-weight: 400; }
.sev-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 8px; }
.verdict { font-size: 1.05rem; }
.callout { background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: 6px; padding: 10px 14px; margin: 12px 0; }
.callout.warn { border-left-color: var(--sev-medium); }
.callout p { margin: 0; }
details.block { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin: 10px 0; }
details.block > summary { cursor: pointer; padding: 8px 14px; font-weight: 600; font-size: .9rem; }
details.block > :not(summary) { padding: 0 14px 10px; }
details.passed > summary { color: var(--g-a); }
.blockers { padding-left: 1.3em; }
.blockers > li { margin-bottom: 14px; }
.blocker-label { font-size: .8rem; font-weight: 700; color: var(--sev-critical); text-transform: uppercase; letter-spacing: .03em; }
.cat { margin-top: 22px; }
.cat h3 { display: flex; justify-content: space-between; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.cat-score { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.finding { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--sev-low); border-radius: 8px; padding: 12px 16px; margin: 10px 0; }
.sevb-critical { border-left-color: var(--sev-critical) !important; } .sevb-high { border-left-color: var(--sev-high) !important; }
.sevb-medium { border-left-color: var(--sev-medium) !important; } .sevb-low { border-left-color: var(--sev-low) !important; }
.f-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.f-check { color: var(--muted); }
.check-link { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.check-link:hover { color: var(--accent); text-decoration-style: solid; }
.check-page { max-width: 820px; display: grid; gap: 8px; }
.check-page h2 { margin-bottom: 6px; }
.check-issues { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.f-name { font-weight: 650; }
.f-issue { margin-left: auto; font-size: .8rem; font-family: var(--mono); }
.f-summary { margin: 6px 0 8px; font-weight: 500; }
.f-part { margin-top: 8px; }
.f-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin-bottom: 2px; }
.f-part.fix { background: var(--g-a-bg); border-radius: 6px; padding: 8px 12px; }
.f-part.fix .f-label { color: var(--g-a); }
.f-part.notes { background: var(--accent-soft); border-radius: 6px; padding: 8px 12px; }
details.guide { border-color: var(--accent); margin-top: 10px; }
details.guide > summary { color: var(--accent); }
details.guide .md h4 { font-size: .95rem; margin: 16px 0 6px; }
details.guide .md table { font-size: .88rem; }
pre.outline { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; overflow-x: auto; }
.rewrite { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; margin: 8px 0; }
.rw-head { display: flex; gap: 8px; align-items: center; }

/* Markdown content */
.md > :first-child { margin-top: 0; } .md > :last-child { margin-bottom: 0; }
.md p { margin: .5em 0; }
.md ul, .md ol { padding-left: 1.4em; margin: .4em 0; }
.md li { margin: .2em 0; }
.md code { background: var(--code-bg); padding: 1px 5px; border-radius: 4px; word-break: break-word; }
.md pre { background: var(--code-bg); border-radius: 8px; padding: 10px 12px; overflow-x: auto; font-size: .85rem; position: relative; }
.md pre code { background: none; padding: 0; word-break: normal; }
.md table { display: block; overflow-x: auto; margin: .6em 0; border: 1px solid var(--border); border-radius: 8px; }
.md blockquote { margin: .6em 0; padding: 4px 14px; border-left: 3px solid var(--border); color: var(--muted); }
.md h1 { font-size: 1.5rem; } .md h2 { font-size: 1.2rem; } .md h3 { font-size: 1.05rem; margin-top: 1.2em; }
.copy { position: absolute; top: 6px; right: 6px; font-size: .72rem; padding: 2px 8px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; }
article.doc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 28px; }

/* Issues */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tab { padding: 8px 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--text); text-decoration: none; }
.tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 650; }
.tab .n { font-size: .78rem; background: var(--surface-2); border-radius: 999px; padding: 0 7px; margin-left: 4px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 8px; }
.filters label { width: auto; }
.filters label.grow { flex: 1 1 220px; }
.filters select { min-width: 140px; }
[hidden] { display: none !important; }
/* Fields, dropdowns and buttons in a filter bar share one height and line up along the bottom. */
.filters input, .filters select, .filters .btn { height: 38px; }
.filters select { padding-top: 0; padding-bottom: 0; }
.filters .btn { padding-top: 0; padding-bottom: 0; }
.filters > .muted { line-height: 38px; }
.filters label.check { min-height: 38px; }
.filters label.check input { height: auto; }
.site-search { margin-bottom: 16px; }
.site-search label.grow { flex: 1 1 260px; max-width: 520px; }
.page-group { font-size: 1.05rem; margin: 26px 0 8px; }
/* Issue notes popup */
.notes-btn.has { border-color: var(--accent); color: var(--accent); }
.notes-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 20px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text); box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.notes-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.check-dialog { width: min(780px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow-y: auto; padding: 20px 24px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.check-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.company-dialog { width: min(720px, calc(100vw - 32px)); overflow-y: auto; }
.company-dialog .site-picks { max-height: 32vh; overflow-y: auto; }
.page-dialog { width: min(860px, calc(100vw - 32px)); overflow-y: auto; }
.page-dialog .dialog-title { margin: 0 0 4px; font-size: 1.2rem; }
.page-dialog .user-form.card { border: 0; box-shadow: none; padding: 0; background: none; }
.page-dialog .site-picks { max-height: 30vh; overflow-y: auto; }
.page-dialog .company-form .dialog-actions { margin-top: 0; }
.page-dialog .form-actions { position: sticky; bottom: -20px; margin: 0 -20px -20px; padding: 12px 20px; background: var(--surface); border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px; }
.check-dialog .page-head { margin-top: 0; }
.check-dialog h1 { font-size: 1.35rem; }
.check-dialog .check-page { max-width: none; }
.check-dialog .dialog-actions { position: sticky; bottom: -20px; margin: 12px -24px -20px; padding: 12px 24px; background: var(--surface); border-top: 1px solid var(--border); }
.notes-dialog h2 { margin: 0 0 8px; font-size: 1.05rem; }
.notes-dialog textarea { width: 100%; min-height: 12em; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.pg-btn { padding: 4px 12px; font-size: .85rem; }
.issue-list { display: grid; gap: 6px; }
details.issue { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--sev-low); border-radius: 8px; }
details.issue > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 14px; cursor: pointer; list-style: none; }
details.issue > summary::-webkit-details-marker { display: none; }
details.issue > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
details.issue[open] > summary::before { transform: rotate(90deg); }
.i-name { font-weight: 600; }
.i-seen { margin-left: auto; }
.i-body { padding: 0 16px 14px 34px; }
.i-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.i-foot .btn { padding: 4px 12px; }
.copying .copy, .copying .i-foot { display: none; }
.copy-buffer { position: fixed; top: 0; left: -9999px; }

/* Issue page */
.head-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.issue-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.side { padding: 16px; position: sticky; top: var(--stick); }
.side h2 { margin-top: 0; }
.stack { display: grid; gap: 10px; }
.stack-facts { flex-direction: column; }
.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--border); }
.timeline > li { position: relative; margin: 0 0 16px 18px; }
.timeline > li::before { content: ""; position: absolute; left: -25px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--border); border: 2px solid var(--bg); }
.timeline > li.hit { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid; border-radius: 8px; padding: 10px 14px; }
.timeline > li.hit::before { background: var(--accent); }
.timeline > li.miss { color: var(--muted); padding: 2px 0; }
.tl-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Login */
.login-body .wrap { display: grid; place-items: center; min-height: 70vh; }
.login { width: 100%; max-width: 380px; padding: 28px; display: grid; gap: 14px; }
.login-stack { width: 100%; max-width: 560px; display: grid; gap: 20px; justify-items: center; }
.login-hero { text-align: center; }
.login-hero-title { margin: 0; font-size: 1.9rem; font-weight: 750; line-height: 1.15; letter-spacing: -.01em; }
.login-hero-sub { margin: 6px 0 0; color: var(--muted); font-size: 1rem; }
.login h1 { margin: 0; }
.login p { margin: 0; }

/* Narrow screens */
@media (max-width: 900px) {
  .report-layout, .issue-layout { grid-template-columns: 1fr; }
  .toc { display: none; }
  .side { position: static; }
}
@media (max-width: 640px) {
  .wrap { padding: 16px 16px 48px; }
  .top { padding: 8px 16px; gap: 4px; }
  .home-link { padding: 4px; }
  .brand span:last-child { display: none; }
  .site-switch { position: static; }
  .site-switch ul { left: 16px; right: 16px; top: calc(100% - 2px); width: auto; max-width: none; }
  .who.signed-in > .help-menu, .who.signed-in > .theme-toggle, .user-name { display: none; }
  .user-burger { display: inline; }
  .user-menu > summary::after { content: none; }
  li.phone-only { display: block; }
  .sitenav { padding: 0 8px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .stat.wide { grid-column: auto; }
  .report-head { flex-direction: column; padding: 16px; }
  .rh-grade { text-align: left; }
  .sev-row { justify-content: flex-start; }
  .audit-card { flex-direction: column; gap: 6px; }
  .i-seen { margin-left: 0; width: 100%; }
  .i-body { padding-left: 16px; }
  .f-issue { margin-left: 0; }
  article.doc { padding: 16px; }
  h1 { font-size: 1.35rem; }
}

/* Site page: Fix these first, score trend, labelled critical counts */
.fix-first { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; counter-reset: ff; }
.fix-first li { counter-increment: ff; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--sev-low); border-radius: 8px; }
.fix-first a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 14px; color: var(--text); }
.fix-first a::before { content: counter(ff) "."; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 1.4em; }
.fix-first a:hover { text-decoration: none; background: var(--surface-2); }
.ff-pages { margin-left: auto; }
.sep-dot { color: var(--muted); margin: 0 2px; }
.trend-stat { grid-column: span 2; }
svg.trend { display: block; width: 100%; max-width: 420px; height: auto; overflow: visible; }
.trend-grid { stroke: var(--border); stroke-width: 1; }
.trend-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.trend-hit { fill: transparent; }
.trend-pt:hover .trend-dot { r: 6; }
.trend-text { fill: var(--muted); font-size: 11px; }
.trend-val { fill: var(--text); font-size: 12px; font-weight: 650; }

/* Issues grouped by problem */
.problem > summary .chip { margin-left: auto; }
.problem-body { padding: 0 12px 12px 30px; }
.problem-body .clip { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-acc > summary .clip { max-width: 50ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Issue references in report text (P547.31207), linked to the issue */
.issue-ref, .audit-ref { font-family: var(--mono); font-size: .92em; white-space: nowrap; }

/* Questions: source references stay hidden until Show sources is clicked */
.jargon { display: none; }
.show-sources .jargon { display: inline; color: var(--muted); }

@media print {
  .top, .sitenav, .back-link, .startup-dialog, .toc, .actions, .rounds, .copy, .theme-toggle, [data-copy-block], .cf-form, [data-notes-open], .to-top, .doc-float { display: none !important; }
  .report-layout { display: block; }
  body { background: #fff; }
  details.block, details.issue { break-inside: avoid; }
}

/* Questions for the client */
.q-topic { margin: 28px 0 10px; font-size: 1.1rem; }
/* The how-to line above the questions, bigger than the usual small print. */
.q-intro { font-size: 1.1rem; }
.question { padding: 14px 16px; margin-bottom: 12px; border-left: 4px solid var(--border); }
.question.answered { border-left-color: var(--accent); }
.question.done { border-left-color: var(--ok); }
.question.client-hidden { border-left-style: dashed; background: var(--surface-2); }
.question.client-hidden .q-text { opacity: .7; }
/* Assigned questions keep the left edge's answered/completed colour; the answer box keeps its plain background.
   Assigned to the viewer: tinted purple. Assigned to someone else: tinted red and crosshatched ("not your question"). */
.question.assigned-mine { background-color: var(--assigned-bg); border-top-color: var(--assigned-line); border-right-color: var(--assigned-line); border-bottom-color: var(--assigned-line); }
.question.assigned-other { background-color: var(--other-bg); border-top-color: var(--other-line); border-right-color: var(--other-line); border-bottom-color: var(--other-line);
  background-image: repeating-linear-gradient(45deg, var(--other-hatch) 0 1.5px, transparent 1.5px 10px), repeating-linear-gradient(-45deg, var(--other-hatch) 0 1.5px, transparent 1.5px 10px); }
.q-head { display: flex; gap: 10px; align-items: flex-start; }
.q-no { font-family: var(--mono); font-weight: 700; color: var(--muted); padding-top: 2px; min-width: 2.6em; }
.q-text { flex: 1; min-width: 0; }
.q-text p { margin: 0; }
.q-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.q-actions label.assign { flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-size: .9rem; max-width: 100%; }
.q-actions label.assign select { width: auto; min-width: 160px; max-width: 100%; padding: 5px 8px; }
label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--text); font-size: .9rem; cursor: pointer; }
label.check input { width: auto; margin: 0; }
.btn .n { font-size: .75rem; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 0 7px; }
.answered { margin-top: 36px; }
.answered-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.answered-list > li { border-top: 1px solid var(--border); padding-top: 12px; }
.answered-list > li:first-child { border-top: 0; padding-top: 0; }
.a-q { display: flex; gap: 10px; align-items: flex-start; }
.a-q .md { flex: 1; min-width: 0; }
.a-q .md p { margin: 0; }
.q-line { margin-top: 6px; }
.count.q-open { background: var(--accent-soft); color: var(--accent); }
.count.q-done { background: var(--g-a-bg); color: var(--g-a); }
.q-form { padding-bottom: 72px; }
.save-float { position: fixed; right: 24px; bottom: 24px; z-index: 20; display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 6px 6px 14px; box-shadow: 0 4px 16px rgba(16, 24, 40, .18); }
.save-float .btn { border-radius: 999px; padding: 9px 18px; }
.save-status { font-size: .85rem; color: var(--muted); }
.save-status:empty { display: none; }
.save-float.dirty { border-color: var(--accent); }
.ok-callout { border-left-color: var(--ok); }
@media (max-width: 600px) { .save-float { right: 16px; bottom: 16px; } }
.subhead { margin: 4px 0 0; color: var(--muted); font-size: 1rem; }
/* Users screen */
.users tbody th { font-weight: 600; }
details.pw > summary { cursor: pointer; white-space: nowrap; list-style: none; }
details.pw > summary::-webkit-details-marker { display: none; }
details.pw[open] > summary { margin-bottom: 8px; }
details.pw form { min-width: 240px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--accent); }
.icon-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
details.pw[open] > summary.icon-btn { background: var(--accent-soft); border-color: var(--accent); }
.icon { display: block; flex: none; }
.users .row-actions { white-space: nowrap; text-align: right; }
.users .row-actions > * { vertical-align: top; }
.users .row-actions details.pw { display: inline-block; position: relative; margin-left: 6px; text-align: left; }
.users .row-actions details.pw[open] > summary { margin-bottom: 0; }
/* The password form opens as a popover under the key, so the row's icons stay put. The table is stacked into cards
   on narrow screens rather than scrolled sideways, so its wrapper needn't clip the popover. */
.users-wrap { overflow: visible; }
.users .row-actions details.pw form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: 260px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); white-space: normal; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Narrow screens: each user is a card, its fields stacked with their labels, so nothing scrolls sideways. */
@media (max-width: 760px) {
  .users thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .users, .users tbody, .users tr, .users tbody th, .users td { display: block; width: auto; }
  .users tr { padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .users tbody tr:last-child { border-bottom: 0; }
  .users tbody th, .users td { border: 0; padding: 3px 0; white-space: normal; }
  .users tbody th { font-size: 1rem; padding-bottom: 6px; }
  .users td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 650; }
  .users .row-actions { text-align: left; padding-top: 8px; }
  .users .row-actions details.pw form { left: 0; right: auto; width: min(260px, calc(100vw - 110px)); min-width: 0; }
}
.user-form { padding: 18px; max-width: 900px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; }
.site-picks { min-width: 0; } /* a fieldset is as wide as its content by default, which widened the page on phones */
@media (max-width: 600px) { .form-row { grid-template-columns: minmax(0, 1fr); } .form-row input { min-width: 0; width: 100%; } }
.user-form p { margin: 0; }
.site-picks { border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; margin: 0; display: grid; grid-template-columns: 1fr; gap: 6px; max-height: 260px; overflow-y: auto; }
.site-picks legend { font-size: .85rem; color: var(--muted); padding: 0 6px; }
/* Role and access checkboxes on the user forms: a box like the companies and websites, but never scrolled */
.site-picks.role-picks, .page-dialog .site-picks.role-picks { display: block; max-height: none; overflow: visible; }
.role-picks .form-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
code.secret { font-size: 1.05rem; padding: 2px 8px; user-select: all; }
.pager { display: flex; align-items: center; gap: 12px; margin-top: 14px; }

/* Unanswered-questions count on Questions for client links */
.badge-red { display: inline-block; min-width: 1.45em; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: #d1242f; color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.45; text-align: center; vertical-align: 1px; }

/* Glossary */
.glossary dl { margin: 0; }
.g-term { padding: 12px 0; border-bottom: 1px solid var(--border); scroll-margin-top: var(--stick); }
.g-term:target { background: var(--accent-soft); border-radius: 6px; padding-left: 10px; padding-right: 10px; }
.g-term dt { font-weight: 700; }
.g-full { font-weight: 400; color: var(--muted); }
.g-term dd { margin: 4px 0 0; }
.g-term .md p { margin: 0 0 4px; }
.glossary section h2:first-child { margin-top: 0; }
.glossary section + section h2 { margin-top: 1.6em; }

/* Back-to-top button (shown by app.js once scrolled; sits above the questions Save bar when there is one) */
.to-top { position: fixed; right: 24px; bottom: 24px; z-index: 19; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: #d1242f; color: #fff; font-size: 1.5rem; font-weight: 700;
  line-height: 1; text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s, background .15s; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover, .to-top:focus-visible { background: #a91b24; color: #fff; text-decoration: none; }
.to-top:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Raised only while the Save bar shows (no JavaScript); the Questions page hides it, so the button drops back to the corner. */
body:has(.save-float:not([hidden])) .to-top { bottom: 88px; }
@media (max-width: 600px) { .to-top { right: 16px; bottom: 16px; } body:has(.save-float:not([hidden])) .to-top { bottom: 80px; } }

/* Sortable table headings (buttons added by app.js) */
.sort-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.sort-btn:hover { color: var(--accent); }
.sort-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.sort-ind::after { content: "↕"; opacity: .35; font-size: .85em; }
th[aria-sort="ascending"] .sort-ind::after { content: "▲"; opacity: 1; }
th[aria-sort="descending"] .sort-ind::after { content: "▼"; opacity: 1; }
.round-open { text-decoration: none; font-size: .85em; margin-left: 2px; }

/* ---- Content rewriter (lib/content.php) ---- */
.cst-draft { color: var(--sev-medium); border-color: currentColor; }
.cst-queued_prompts, .cst-queued_finalize { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.cst-needs_revision { color: var(--sev-high); border-color: currentColor; }
.cst-verified_content, .cst-verified_research { color: var(--g-a); background: var(--g-a-bg); border-color: transparent; }
.count.cst-draft, .count.cst-queued_prompts, .count.cst-queued_finalize, .count.cst-needs_revision, .count.cst-verified_content, .count.cst-verified_research { border: 1px solid var(--border); }
.stat-num.small-num { font-size: 1.15rem; }
.status-form { margin: 14px 0 6px; }
.status-form .mono { margin-left: auto; }
.meta-table th { width: 190px; white-space: nowrap; vertical-align: top; }
.meta-table td { overflow-wrap: anywhere; }
.small-btn { padding: 3px 10px; font-size: .8rem; }
.doc-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 22px 0 10px; }
mark.ph { background: var(--sev-medium-bg); color: var(--sev-medium); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.q-ph { margin: 6px 0 2px 3.4em; }
.content-list th[scope="row"] { min-width: 260px; }
dd.plain { font-weight: 400; }
/* On a phone the layout is one column; keep long URLs and the schema from widening the page. */
.report-layout > * { min-width: 0; }
.report-head .ext, .report-head .small a { overflow-wrap: anywhere; }
.status-form .mono, .md a { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .meta-table th { width: auto; white-space: normal; }
  .q-ph { margin-left: 0; }
  .report-head { flex-direction: column; }
}
/* Placeholders that a question fills link to it, and back; the linked spot is outlined. */
a.ph { background: var(--sev-medium-bg); color: var(--sev-medium); border-radius: 4px; padding: 0 3px; font-weight: 600; text-decoration: underline dotted; text-underline-offset: 3px; }
a.ph:hover { text-decoration-style: solid; }
a.q-no { color: var(--muted); text-decoration: none; }
a.q-no:hover { color: var(--accent); text-decoration: underline; }
a.ph, .question { scroll-margin-top: 90px; }
a.ph:target { outline: 2px solid var(--accent); outline-offset: 2px; }
.question:target { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Why we're asking: each rule or reason, what it means, and how this page did on it. */
.why-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.why-list li > div { margin-top: 2px; }
.rule-code { font-family: var(--mono); font-weight: 700; padding: 0 5px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border); }
a.rule-code { text-decoration: none; }
a.rule-code:hover { border-color: var(--accent); }
.rule-result { color: var(--muted); margin-top: 3px; }
.rr { font-weight: 650; padding: 0 6px; border-radius: 999px; font-size: .75rem; border: 1px solid currentColor; }
.rr-pass { color: var(--ok); }
.rr-partial, .rr-blocked { color: var(--sev-medium); }
.rr-fail { color: var(--err); }
.rr-na { color: var(--muted); }
.md tr[id] { scroll-margin-top: 90px; }
.md tr:target > * { background: var(--accent-soft); }
/* The Questions page's content picker uses round chips for whole page titles, so they wrap. */
.rounds .round-chip { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
/* Questions page: the Show dropdown and a heading for each kind of question. */
.q-source { margin: 4px 0 8px; }
.q-source-head { margin: 26px 0 6px; padding-top: 14px; border-top: 2px solid var(--border); }
.q-section:first-of-type .q-source-head { border-top: 0; padding-top: 0; }
.q-section .rounds { margin-top: 8px; }
:not(pre) > code { overflow-wrap: anywhere; } /* long inline code (URLs, file paths) wraps instead of widening the page on phones */
/* Phones: long words (URLs written as text) wrap, and a fix's Impact chip can run over more than one line. */
.md, .q-text, h1, h2 { overflow-wrap: anywhere; }
.f-label .chip { white-space: normal; }
.q-source label.grow select { width: 100%; max-width: 100%; min-width: 0; } /* Questions page: the Content dropdown fits long page titles */
/* Websites cards: a section per thing the login can see (Brutally Honest report, Content rewriter). Headings only when both show. */
.card-section + .card-section { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.card-section h3 { margin: 0 0 4px; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.card-section h3 .badge { text-transform: none; letter-spacing: 0; }
.card-section .facts { margin-top: 6px; }
.chip.warn-chip { color: var(--sev-medium); background: var(--sev-medium-bg); border-color: transparent; }
.site-top + .card-section > h3 { margin-top: 10px; }
.stat .sub-label { margin-top: 10px; }
.answer-first li { border-left-color: var(--accent); }
.card-section h3 a { color: inherit; text-decoration: none; } .card-section h3 a:hover { color: var(--accent); text-decoration: underline; }
/* A content question that repeats one asked first: which one, and its answer. */
.same-as { margin: 6px 0 2px 3.4em; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 6px; }
.same-as-answer { margin-top: 4px; }
.same-as-answer > :last-child { margin-bottom: 0; }
@media (max-width: 600px) { .same-as { margin-left: 0; } }
/* Audit page sidebar: the page's content rewrite stage and Queue content rewrite. */
.rewrite-box { margin-top: 10px; display: grid; gap: 6px; justify-items: start; }
.rewrite-box form { width: 100%; }
.rewrite-box .btn.link { padding: 0; }
.rewrite-box p { margin: 0; }
.chip.rw-queued, .chip.rw-scheduled { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 650; }
.chip.rw-in_progress { background: var(--sev-medium-bg); color: var(--sev-medium); border-color: transparent; font-weight: 650; }
.chip.rw-completed, .chip.rw-approved { background: var(--g-a-bg); color: var(--g-a); border-color: transparent; font-weight: 650; }
/* Cabin description and Facebook post tabs: plain text as it will be pasted. */
.plain-post { white-space: normal; line-height: 1.6; }
.fb-post { max-width: 560px; }
.toc-inner .toc-title + .btn.block { margin-top: 4px; }
.toc-inner .btn.block + .toc-title { margin-top: 12px; }
.entry-url { margin-top: 2px; overflow-wrap: anywhere; font-weight: 400; }
/* Questions page: a repeat of an earlier question (answered at the original, no answer box of its own). */
.question.same-as-q { background: var(--surface-2); border-left-style: dashed; border-left-color: var(--border); }
.question.same-as-q .q-text { color: var(--muted); }
.chip.same-chip { background: transparent; border-style: dashed; color: var(--muted); }
.chip.research, .qw-tag { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 650; }

/* ===================== ViewerV2 ===================== */

/* Reports hub: rounds, reports and On this page on the left, the report on the right */
.hub { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; }
.hub-rail { position: sticky; top: var(--stick); display: grid; gap: 18px; font-size: .9rem; max-height: calc(100vh - var(--stick) - 18px); overflow: auto; padding-bottom: 12px; }
.hub-round label { color: var(--muted); }
.hub-docs { display: grid; gap: 2px; }
.hub-doc { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--text); border: 1px solid transparent; }
.hub-doc:hover { background: var(--surface-2); text-decoration: none; }
.hub-doc.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 650; }
.hub-links { display: grid; gap: 6px; border-top: 1px solid var(--border); padding-top: 12px; }
.hub-versions ol { list-style: none; padding: 0; margin: 0; }
.hub-versions a { display: block; padding: 3px 8px; border-left: 2px solid var(--border); color: var(--muted); }
.hub-versions a:hover, .hub-versions a.active { color: var(--text); border-left-color: var(--accent); text-decoration: none; }
.hub-head { margin-bottom: 8px; }
.hub-head h1 { margin-bottom: 4px; }
.hub-main { min-width: 0; }
.hub-round select { font-size: .85rem; padding: 6px 8px; }
.hub .md td a { overflow-wrap: normal; word-break: normal; }
.hub .md td { min-width: 6em; }
.hub-rail .hub-toc { display: block; border-top: 1px solid var(--border); padding-top: 12px; font-size: .88rem; }
.hub-rail .hub-toc ol { margin-bottom: 0; }
.toc li.lvl-3 a, .hub-toc-mobile li.lvl-3 { padding-left: 20px; font-size: .95em; }
.hub-toc-mobile { display: none; margin-bottom: 12px; }
.hub-toc-mobile ol { list-style: none; padding: 0 0 0 4px; margin: 8px 0 0; display: grid; gap: 4px; }
@media (max-width: 1200px) {
  .hub { grid-template-columns: 230px minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 900px) {
  .hub { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hub-rail .hub-toc { display: none; }
  .hub-toc-mobile { display: block; }
  .hub-rail { position: static; max-height: none; grid-template-columns: minmax(0, 1fr); }
  .hub-docs { display: flex; flex-wrap: wrap; gap: 6px; }
  .hub-doc { border-color: var(--border); }
  .hub-versions { display: none; }
}

/* Questions workspace */
.qw-progress { padding: 14px 16px; margin-bottom: 14px; display: grid; gap: 8px; }
.qw-progress-text { font-size: 1.05rem; }
.qw-progress progress { width: 100%; height: 10px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.qw-progress progress::-webkit-progress-bar { background: var(--surface-2); border-radius: 999px; }
.qw-progress progress::-webkit-progress-value { background: var(--ok); border-radius: 999px; transition: width .3s; }
.qw-progress progress::-moz-progress-bar { background: var(--ok); border-radius: 999px; }
.qw-how { margin: 0; }

.qw-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.seg-item { padding: 6px 12px; border-radius: 7px; color: var(--muted); font-size: .9rem; white-space: nowrap; }
.seg-item:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.seg-item.active { background: var(--accent); color: var(--surface); font-weight: 650; }
.seg-item .n { font-size: .75rem; opacity: .85; margin-left: 2px; }
.qw-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.qw-filters label { flex-direction: row; align-items: center; gap: 6px; }
.qw-filters select { width: auto; max-width: 290px; padding: 5px 8px; }

.qw { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; }
.qw-index { position: sticky; top: var(--stick); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.qw-index > summary { cursor: pointer; padding: 10px 14px; font-weight: 650; list-style: none; }
.qw-index > summary::-webkit-details-marker { display: none; }
@media (min-width: 901px) { .qw-index > summary { display: none; } }
.qw-search { padding: 10px 10px 4px; }
.qw-search input { padding: 6px 10px; }
.qw-list { max-height: calc(100vh - 170px); overflow: auto; padding: 4px 0 8px; }
.qw-group { display: flex; justify-content: space-between; gap: 8px; padding: 12px 14px 4px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.qw-gcount { font-family: var(--mono); font-weight: 600; text-transform: none; }
.qw-items { list-style: none; margin: 0; padding: 0 6px; }
.qw-item { display: grid; grid-template-columns: 12px 2.8em minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 7px 8px; border-radius: 7px; color: var(--text); font-size: .88rem; line-height: 1.35; }
.qw-item:hover { background: var(--surface-2); text-decoration: none; }
.qw-item.active { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.qw-item .dot { width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; border: 2px solid var(--muted); }
.qw-item.st-draft .dot { border-color: var(--accent); background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
.qw-item.st-done .dot { border-color: var(--ok); background: var(--ok); }
.qw-item.st-same .dot { border-style: dashed; }
.qw-item.st-done .qw-text { color: var(--muted); }
.qw-no { font-family: var(--mono); font-size: .82rem; font-weight: 700; color: var(--muted); }
.qw-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qw-who { font-size: .68rem; font-weight: 700; border-radius: 999px; padding: 1px 6px; background: var(--surface-2); color: var(--muted); }
.qw-tag { font-size: .68rem; border-radius: 999px; padding: 1px 6px; white-space: nowrap; }
.qw-item.mine .qw-who { background: var(--assigned-line); color: var(--text); }
.qw-note, .qw-keys { padding: 4px 14px; margin: 6px 0 0; }
kbd { font-family: var(--mono); font-size: .8em; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; background: var(--surface-2); }

.qw-cards { min-width: 0; }
.qw-card { padding: 18px 20px; }
.qw-card.st-draft { border-left-color: var(--accent); }
.qw-card.st-done { border-left-color: var(--ok); }
.qw-card-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.qw-state { font-weight: 650; border-radius: 999px; padding: 1px 9px; background: var(--surface-2); white-space: nowrap; }
.qw-state.st-draft { background: var(--accent-soft); color: var(--accent); }
.qw-state.st-done { background: var(--g-a-bg); color: var(--g-a); }
.qw-chips:empty { display: none; }
.qw-chips { margin: 6px 0 0; }
.qw-card .why { margin: 12px 0; }
.qw-notes { margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 8px 8px 0; }
.qw-notes .md > :last-child { margin-bottom: 0; }
.qw-on .qw-cards .qw-card { display: none; margin: 0; }
.qw-on .qw-cards .qw-card.active { display: block; }
.qw-on .question:target { outline: 0; }
.qw-on .qw-card .q-text { font-size: 1.12rem; line-height: 1.5; }
.qw-on .qw-card textarea { min-height: 170px; }
.qw-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.qw-nav .qw-status { flex: 1; text-align: right; color: var(--muted); }
.qw-nav .qw-status.ok { color: var(--ok); }
.qw-nav .qw-status.err { color: var(--err); }
.qw-nav button:disabled { opacity: .45; cursor: default; }
.qw-on.q-form { padding-bottom: 24px; }
.answered > details > summary { cursor: pointer; }

@media (max-width: 900px) {
  .qw { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .qw-index { position: sticky; top: var(--stick); z-index: 5; }
  .qw-list { max-height: 60vh; }
  .qw-bar { align-items: stretch; }
  .seg { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; }
  .qw-filters select { max-width: 100%; }
  .qw-card { padding: 14px; }
  .qw-nav .qw-status { order: -1; flex-basis: 100%; text-align: left; }
  .qw-nav [data-qw-next] { margin-left: auto; }
}

@media print {
  .hub-rail, .hub-toc, .hub-toc-mobile, .qw-index, .qw-nav, .save-float, .qw-bar { display: none !important; }
  .hub, .qw { display: block; }
  .qw-on .qw-cards .qw-card { display: block; break-inside: avoid; margin-bottom: 12px; }
}

/* Websites tiles: grade box + name, open-issues bar, foot lines pinned to the bottom so a row lines up. */
.site-card.tile { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; }
/* Folder tab above each card. Fixed colours: --accent turns pale in the dark theme. */
.site-cards { padding-top: 22px; row-gap: 40px; }
.tile-tab { position: absolute; bottom: calc(100% + 1px); left: 16px; padding: 3px 14px 2px; border-radius: 7px 7px 0 0; background: #cfe3ff; color: #000; font-size: .72rem; font-weight: 700; letter-spacing: .04em; line-height: 1.35; pointer-events: none; }
.tile-tab-competitor { background: #5b6675; color: #fff; }
/* The tab shows the site's address (Ray, 2026-11-06): a long one is cut short with an ellipsis. */
.tile-tab { max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .02em; }
.tile-head { display: flex; gap: 14px; align-items: center; min-width: 0; }
.tile-grade { flex: none; width: 58px; height: 58px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.tile-grade b { font-size: 1.45rem; font-weight: 800; }
.tile-grade span { font-size: .72rem; font-weight: 600; opacity: .85; }
.tile-name { min-width: 0; }
.tile-name h2 { margin: 0; font-size: 1.05rem; line-height: 1.25; overflow-wrap: anywhere; } /* the address is the heading now */
.tile-url { color: var(--muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-staging { font-size: .8rem; }
.tile-staging-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 0 5px; border-radius: 4px; border: 1px solid currentColor; margin-right: 2px; }
.tile-meta { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.tile-issues-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.tile-issues-head a { color: var(--text); font-size: .95rem; letter-spacing: 0; }
.tile-bar { display: block; width: 100%; height: 8px; border-radius: 999px; overflow: hidden; background: var(--surface-2); position: relative; z-index: 1; }
.tile-bar .bar-critical { fill: var(--bar-critical); } .tile-bar .bar-high { fill: var(--bar-high); }
.tile-bar .bar-medium { fill: var(--bar-medium); } .tile-bar .bar-low { fill: var(--bar-low); }
.tile-bar a:hover rect { opacity: .75; }
.sev-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 7px; font-size: .8rem; }
.sev-legend .leg { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.sev-legend .leg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sev-legend .leg b { color: var(--text); }
.leg-critical::before { background: var(--bar-critical) !important; } .leg-high::before { background: var(--bar-high) !important; }
.leg-medium::before { background: var(--bar-medium) !important; } .leg-low::before { background: var(--bar-low) !important; }
.sev-legend .leg:hover { color: var(--accent); text-decoration: none; }
.tile-foot { margin-top: auto; border-top: 1px solid var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.md img { display: block; max-width: 100%; height: auto; border-radius: 8px; }
.startup-dialog { width: min(480px, calc(100vw - 32px)); }
.startup-dialog form { margin: 0; }
.startup-dialog h2 { font-size: 1.25rem; }
.startup-dialog label.check { margin-top: 4px; }
.sites-guide { margin: 4px 0 0; font-size: .92rem; }
.tile-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .85rem; }
/* Key numbers above Open issues, as name / value pairs. */
.tile-urls { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 0 14px; align-items: start; }
.tile-facts { display: grid; grid-template-columns: auto auto; gap: 1px 10px; margin: 0; min-width: 0; align-content: start; }
.tile-facts dt, .tile-facts dd { white-space: nowrap; }
.tile-urls > .tile-facts + .tile-facts { border-left: 1px solid var(--border); padding-left: 14px; }
.tile-facts > div { display: contents; }
.tile-facts dt { color: var(--muted); }
.tile-facts dd { margin: 0; font-weight: 600; text-align: right; }
.tile-facts dd .badge { font-size: .8rem; }
.tile-reports { flex-wrap: nowrap; align-items: baseline; }
.tile-report-list { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); min-width: 78px; }
.tile-label a { color: inherit; } .tile-label a:hover { color: var(--accent); }
.tile-more { margin-left: auto; font-size: .82rem; }
.tile-line .badge .grade { font-size: .78rem; }

/* Screenshots (?p=screenshots): simplescan images, a grid of top-of-page thumbnails per folder. */
.shot-run label { flex-direction: row; align-items: center; gap: 6px; }
.shot-seg { margin-bottom: 8px; }
.shot-section { margin-top: 18px; }
.shot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.shot { margin: 0; overflow: hidden; display: flex; flex-direction: column; }
.shot.shot-wide { grid-column: 1 / -1; }
.shot img { display: block; width: 100%; height: 260px; object-fit: cover; object-position: top; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.shot.shot-wide img { height: 420px; }
.shot a:hover img { opacity: .9; }
.shot figcaption { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.shot-page { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.shot-bad { background: var(--sev-critical-bg); color: var(--sev-critical); border-color: transparent; }

/* Presentations (?p=presentations): a report's slideshow in a 16:9 frame, and the site's other decks. */
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.deck-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.deck-card:hover, .deck-card:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.deck-poster { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #0b0f17, #1b2b44); color: #fff; }
.deck-play { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding-left: 4px; border-radius: 50%; background: rgba(255, 255, 255, .14); font-size: 1.3rem; transition: background .15s; }
.deck-card:hover .deck-play { background: var(--accent); }
.deck-type { position: absolute; left: 10px; bottom: 10px; font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .45); }
.deck-round { position: absolute; right: 10px; top: 10px; font-size: .75rem; font-weight: 650; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff; }
.deck-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.deck-title { font-weight: 600; }
.deck-desc { color: var(--text); }
.deck-dialog { width: min(1280px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 16px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); }
.deck-dialog::backdrop { background: rgba(0, 0, 0, .7); }
.deck-dialog:not([open]) { display: none; }
.deck-dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.deck-dialog-head h2 { margin: 0 0 2px; font-size: 1.15rem; }
.deck-dialog-head p { margin: 0; }
.deck-dialog-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.deck-frame { aspect-ratio: 16 / 9; width: 100%; max-height: calc(100vh - 200px); margin: 0 auto; border-radius: 8px; overflow: hidden; background: #0b0f17; }
.deck-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.deck-help { margin: 8px 0 0; }
.deck-help kbd { display: inline-block; padding: 0 5px; border: 1px solid var(--border); border-radius: 4px; font: .8rem/1.5 monospace; }

/* Messages (?p=messages, message, message-new): the top-bar link, the inbox, a conversation and the forms. */
.msg-link { color: var(--text); display: inline-flex; align-items: center; gap: 4px; }
.msg-link:hover { text-decoration: none; color: var(--accent); }
.msg-icon { font-size: 1.05rem; line-height: 1; }
/* Unread messages: the Messages link becomes a solid red button with its count, so it stands out (Ray, 2026-11-06). */
.msg-link.has-unread { background: #d1242f; color: #fff; font-weight: 700; padding: 4px 10px 4px 9px; border-radius: 999px; box-shadow: 0 1px 3px rgba(209, 36, 47, .35); }
.msg-link.has-unread:hover { background: #a61b24; color: #fff; }
.msg-link.has-unread .badge-red { background: #fff; color: #d1242f; margin-left: 2px; }
.msg-inbox { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.msg-inbox li + li { border-top: 1px solid var(--border); }
.msg-inbox a { display: grid; gap: 3px; padding: 12px 16px; color: var(--text); }
.msg-inbox a:hover { background: var(--surface-2); text-decoration: none; }
.msg-top { display: flex; justify-content: space-between; gap: 12px; }
.msg-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-inbox .unread .msg-subject { font-weight: 700; }
.msg-when { white-space: nowrap; }
.msg-snippet { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.msg-inbox .unread .msg-snippet { color: var(--text); }
.msg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 7px; vertical-align: 2px; }
.msg-members { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.msg-thread { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; max-width: 820px; }
.msg { padding: 12px 16px; }
.msg.mine { background: var(--accent-soft); }
.msg.new { border-left: 3px solid var(--accent); }
.msg-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.msg-body { overflow-wrap: anywhere; line-height: 1.5; }
.chip.msg-new { background: var(--accent); color: var(--surface); border-color: transparent; }
.msg-form { padding: 16px 18px; max-width: 820px; display: grid; gap: 12px; }
.msg-form p { margin: 0; }
.msg-to { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.msg-to legend { font-size: .85rem; color: var(--muted); padding: 0; margin-bottom: 6px; }
.msg-group { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.msg-group-name { flex-basis: 100%; font-weight: 650; font-size: .85rem; }
.msg-group label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--text); font-size: .95rem; }
.msg-group input[type=checkbox] { width: auto; }
@media (max-width: 640px) {
  .msg-label { display: none; }
}
.msg-group.msg-all { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 20px; align-items: start; }
.msg-group.msg-all .msg-group-name { grid-column: 1 / -1; }
.msg-group.msg-all label.check { display: block; padding-left: 22px; text-indent: -22px; line-height: 1.4; }
.msg-group.msg-all label.check input { margin: 0 6px 0 0; vertical-align: -1px; }
/* Send a Message popup (Questions, Issues, Reports) */
.msg-dialog { width: min(720px, calc(100vw - 32px)); overflow-y: auto; }
.msg-dialog h2 { margin: 0; }
.msg-dialog .msg-form { padding: 0; max-width: none; }
.msg-dialog-note:empty { display: none; }
.msg-dialog-note.bad { color: var(--err); }
/* Mark read / unread on inbox rows: the button sits at the row's right, over the link's padding. */
.msg-inbox li { position: relative; }
.msg-inbox a { padding-right: 130px; }
.msg-mark { position: absolute; right: 14px; bottom: 10px; margin: 0; }
.msg-mark .btn { padding: 2px 10px; font-size: .8rem; }
@media (max-width: 640px) {
  .msg-inbox a { padding-right: 16px; padding-bottom: 42px; }
}
/* Users screen: failed sign-ins beside the Logins count */
.fail-count { color: var(--err); margin-left: 4px; }

/* View Fullscreen: a content document alone in its own tab, full width, no sidebar. */
.doc-tool-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.fullscreen-doc { background: var(--bg, #fff); }
.fs-wrap { max-width: 1400px; margin: 0 auto; padding: 24px 32px 64px; }
.fs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 20px; }
.fs-head h1 { margin: 4px 0 0; }
.fullscreen-doc .content-doc { max-width: none; }
.fullscreen-doc:fullscreen { overflow-y: auto; }
@media print { .fs-head .btn { display: none; } }

/* Tables in documents (Markdown). .md's overflow-wrap: anywhere let the browser squeeze a column to a letter or two
   ("Heal / thy / Afte..."), so table cells only break between words; headings are plain and wrap; md() marks short
   values (tc-short) to keep on one line and long text (tc-long) to keep a readable width. */
.md th, .md td { overflow-wrap: break-word; line-height: 1.45; }
.md thead th { white-space: normal; text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--text); min-width: 4.5em; vertical-align: bottom; }
.md td { min-width: 4.5em; }
.md td.tc-short { white-space: nowrap; }
.md td.tc-long { min-width: 16em; }
.md tbody tr:nth-child(even) > * { background: rgba(127, 127, 127, .045); }
.md tbody tr:hover > * { background: var(--accent-soft); }

/* Report pages: Send a Message, Print and Download again at the end of the report. */
.doc-end-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
@media print { .doc-end-actions { display: none; } }

/* A message's Reference URL, above its text. */
.msg-ref { margin: 2px 0 6px; overflow-wrap: anywhere; }

/* Additional prompts box on Research and Document entries. */
.prompts-box { margin: 12px 0 16px; }
.prompts-box summary { font-weight: 600; }
.prompts-box textarea { width: 100%; font: inherit; }

/* Documents used on a content page: a numbered list. */
.docs-used ol { margin: 0; padding-left: 1.4em; list-style: decimal; }
.docs-used li { margin: 1px 0; }

/* Versions tab on a content entry. */
.versions-list tr.current > * { background: var(--accent-soft); }

/* Content page tools box (replaces the back-to-top button there): up arrow, edit, download, print. */
.doc-float { position: fixed; right: 24px; bottom: 24px; z-index: 19; display: flex; flex-direction: column; gap: 2px; padding: 5px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.doc-float .df-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); cursor: pointer; text-decoration: none; padding: 0; }
.doc-float .df-btn:hover, .doc-float .df-btn:focus-visible { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.doc-float .df-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.doc-float .df-btn:disabled { opacity: .4; cursor: not-allowed; background: transparent; color: var(--text); }
.doc-float .df-btn .icon { width: 20px; height: 20px; }
@media (max-width: 600px) { .doc-float { right: 12px; bottom: 12px; } }
.doc-float .df-tools { display: flex; flex-direction: column; gap: 2px; }
.doc-float.closed .df-tools { display: none; }
.doc-float .df-toggle { border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; height: 26px; color: var(--muted); }
.doc-float.closed .df-toggle { border-top: 0; border-radius: 8px; height: 30px; }
.doc-float .df-toggle .icon { transition: transform .15s; }
.doc-float.closed .df-toggle .icon { transform: rotate(180deg); }

/* The tools box is red, like the old back-to-top button (Ray, 2026-11-06). */
.doc-float { background: #d1242f; border-color: #d1242f; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.doc-float .df-btn { color: #fff; }
.doc-float .df-btn:hover, .doc-float .df-btn:focus-visible { background: #a91b24; color: #fff; }
.doc-float .df-btn:focus-visible { outline-color: #fff; }
.doc-float .df-btn:disabled { color: #fff; opacity: .45; background: transparent; }
.doc-float .df-toggle { color: #fff; border-top-color: rgba(255, 255, 255, .35); }

/* Questions: Assign to, Hide from client and Done in one group box. */
.q-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; padding: 8px 12px 10px; border: 1px solid var(--border); border-radius: 8px; min-width: 0; }
.q-group legend { padding: 0 6px; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* Questions side list: 100 at a time, loaded a page at a time, with a pager under it (Ray, 2026-11-08). */
.qw-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 2px; border-top: 1px solid var(--border); }
.qw-pager [aria-disabled="true"] { opacity: .4; cursor: default; pointer-events: none; }
.qw-find input { width: 14em; max-width: 100%; }

/* Websites as a list (list icon beside the search) */
.view-toggle { display: inline-flex; align-items: center; padding: 6px 10px; }
.site-list td, .site-list th { vertical-align: middle; }
.site-list .leg { margin-right: 6px; font-size: .8rem; }
table.site-list tbody tr:hover > * { background: var(--accent-soft); }