/* Review Manager — styled on the Icon Car Wash Design System.
   Tokens from project/tokens.json: black page, #1A1A1A cards, #333 hairlines,
   electric cyan #009ACE as the single accent, Open Sans 300–800.
   The brand is dark-first; the Light theme uses the system's light values.
   Existing component classes keep their names; only the values changed. */

@font-face { font-family: "Open Sans"; src: url("/static/fonts/opensans-normal-latin.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; src: url("/static/fonts/opensans-normal-latin-ext.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; src: url("/static/fonts/opensans-italic-latin.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }

:root {
  /* ---- Icon brand tokens */
  --icon-black:#000000; --icon-cyan:#009ace; --icon-cyan-bright:#25b4e5; --icon-cyan-deep:#00789f; --icon-navy:#0d2b3e; --icon-white:#ffffff; --icon-gold:#c9a84c;
  --icon-gray-dark:#1a1a1a; --icon-gray-mid:#333333; --icon-gray-800:#0f0f0f; --icon-gray-600:#242424; --icon-gray-500:#3d3d3d; --icon-gray-400:#5c5c5c; --icon-gray-300:#8a8a8a; --icon-gray-200:#b8b8b8; --icon-gray-100:#e4e4e4;
  --icon-cyan-08:rgba(0,154,206,.08); --icon-cyan-16:rgba(0,154,206,.16); --icon-cyan-32:rgba(0,154,206,.32);
  --status-success:#2fbf71; --status-warning:#c9a84c; --status-error:#e03b3b; --status-info:#009ace;
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-xl:20px; --radius-pill:999px;
  --ease-out:cubic-bezier(.16,1,.3,1); --duration-fast:140ms; --duration-base:220ms;
  --font-brand:"Open Sans","Helvetica Neue",Arial,sans-serif;
  --tracking-eyebrow:.18em; --tracking-label:.03em;

  /* ---- Semantic (dark = brand default) mapped onto the app's existing variable names */
  color-scheme: dark;
  --bg:var(--icon-black); --surface:var(--icon-gray-dark); --surface-2:var(--icon-gray-600); --sunken:var(--icon-gray-800);
  --ink:var(--icon-white); --ink-2:var(--icon-gray-200); --muted:var(--icon-gray-300); --line:var(--icon-gray-mid); --line-soft:var(--icon-gray-600);
  --accent:var(--icon-cyan); --accent-hover:var(--icon-cyan-bright); --accent-press:var(--icon-cyan-deep); --accent-ink:var(--icon-white);
  /* Accent used AS TEXT (links, headings, counts). Cyan on black is 6.5:1; on white it is only 3.2:1,
     so the light theme swaps in the deep cyan (5.0:1) and puts black text on cyan fills (6.5:1). */
  --accent-text:var(--icon-cyan); --accent-text-hover:var(--icon-cyan-bright);
  --good:var(--status-success); --warn:var(--status-warning); --serious:#ec835a; --critical:var(--status-error);
  --good-bg:rgba(47,191,113,.16); --good-line:rgba(47,191,113,.36); --warn-bg:rgba(201,168,76,.16); --warn-line:rgba(201,168,76,.36);
  --serious-bg:rgba(236,131,90,.16); --serious-line:rgba(236,131,90,.36); --critical-bg:rgba(224,59,59,.16); --critical-line:rgba(224,59,59,.36);
  --secondary-fg:var(--icon-white); --secondary-border:var(--icon-gray-500);
  --washu:#2a78d6; --icon:#eb6834; --wa:#1baf7a;   /* chart identity palette (validated), not brand colours */
  --star:var(--icon-cyan); --star-off:var(--icon-gray-500);
  --shadow-raised:0 8px 24px rgba(0,0,0,.7); --focus-ring:0 0 0 3px rgba(37,180,229,.45);
  --radius:var(--radius-lg);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { color-scheme: light;
    --bg:var(--icon-white); --surface:var(--icon-white); --surface-2:#f5f6f7; --sunken:#edeff1;
    --ink:var(--icon-black); --ink-2:var(--icon-gray-500); --muted:var(--icon-gray-400); --line:#d9dde0; --line-soft:#e9ecee;
    --secondary-fg:var(--icon-black); --secondary-border:#b8bec4; --star-off:#d9dde0;
    --good:#1f9a59; --warn:#8a6a1e; --critical:#c62f2f; --serious:#b8562c;
    --shadow-raised:0 8px 24px rgba(13,43,62,.14); --accent-text:var(--icon-cyan-deep); --accent-text-hover:#005f7e; --accent-ink:var(--icon-black); --star:var(--icon-cyan-deep); }
}
:root[data-theme="light"] { color-scheme: light;
  --bg:var(--icon-white); --surface:var(--icon-white); --surface-2:#f5f6f7; --sunken:#edeff1;
  --ink:var(--icon-black); --ink-2:var(--icon-gray-500); --muted:var(--icon-gray-400); --line:#d9dde0; --line-soft:#e9ecee;
  --secondary-fg:var(--icon-black); --secondary-border:#b8bec4; --star-off:#d9dde0;
  --good:#1f9a59; --warn:#8a6a1e; --critical:#c62f2f; --serious:#b8562c;
  --shadow-raised:0 8px 24px rgba(13,43,62,.14); --accent-text:var(--icon-cyan-deep); --accent-text-hover:#005f7e; --accent-ink:var(--icon-black); --star:var(--icon-cyan-deep); }

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; }
html { -webkit-text-size-adjust:100%; }
body { font:400 14px/1.5 var(--font-brand); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; }
a { color:var(--accent-text); text-decoration:none; transition:color var(--duration-fast) var(--ease-out); } a:hover { color:var(--accent-text-hover); text-decoration:underline; }
::selection { background:var(--icon-cyan); color:var(--icon-white); }
:focus-visible { outline:2px solid var(--icon-cyan-bright); outline-offset:2px; }
h1 { font-size:24px; font-weight:700; letter-spacing:0; margin:0 0 12px; line-height:1.15; }
h2 { font-size:18px; font-weight:700; margin:0 0 10px; }
/* Card headings = brand eyebrow: cyan, uppercase, wide tracking */
h3 { font-size:12px; font-weight:700; margin:0 0 10px; color:var(--accent-text); text-transform:uppercase; letter-spacing:var(--tracking-eyebrow); }
code { font:12.5px ui-monospace,"SFMono-Regular",Menlo,monospace; background:var(--surface-2); padding:1px 5px; border-radius:var(--radius-sm); }

/* ---- nav: black, hairline bottom, sticky, blur */
nav.top { background:rgba(0,0,0,.8); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--icon-gray-mid); padding:0 24px; display:flex; gap:2px; align-items:center; height:56px; position:sticky; top:0; z-index:5; color:var(--icon-white); }
:root[data-theme="light"] nav.top { background:rgba(0,0,0,.92); }
nav.top .brand { display:inline-flex; align-items:center; gap:12px; margin-right:18px; color:var(--icon-white); }
.mark { font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:15px; line-height:1; color:var(--icon-white); white-space:nowrap; }
.mark em { font-style:normal; color:var(--icon-cyan); }
.mark.big { font-size:26px; text-align:center; color:var(--ink); margin-bottom:6px; }
.mark::before { content:""; display:inline-block; width:22px; height:3px; background:var(--icon-cyan); border-radius:2px; margin-right:10px; vertical-align:middle; transform:skewX(-20deg); }
.mark.big::before { display:block; width:56px; height:4px; margin:0 auto 14px; }
nav.top a.item { color:var(--icon-gray-200); padding:0 12px; height:56px; display:inline-flex; gap:8px; align-items:center; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:var(--tracking-label); border-bottom:2px solid transparent; transition:color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
nav.top a.item:hover { color:var(--icon-white); text-decoration:none; }
nav.top a.item.active { color:var(--icon-white); border-bottom-color:var(--icon-cyan); }
nav.top .spacer { flex:1; } nav.top .meta { color:var(--icon-gray-300); font-size:12px; font-weight:300; margin-right:12px; }
nav.top form { margin:0; }
nav.top button, nav.top .theme-toggle { background:none; border:1px solid var(--icon-gray-500); color:var(--icon-white); height:32px; padding:0 12px; border-radius:var(--radius-md); cursor:pointer; font:600 11px/1 var(--font-brand); text-transform:uppercase; letter-spacing:var(--tracking-label); transition:background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
nav.top button:hover, nav.top .theme-toggle:hover { background:var(--icon-cyan-08); border-color:var(--icon-cyan); }
nav.top .theme-toggle { margin-right:8px; }
.count { background:var(--icon-cyan); color:var(--accent-ink); font-size:11px; font-weight:700; padding:0 7px; border-radius:var(--radius-pill); min-width:20px; height:18px; display:inline-flex; align-items:center; justify-content:center; line-height:1; letter-spacing:0; }
.count.neutral { background:transparent; color:var(--ink-2); border:1px solid var(--line); }
main { max-width:1280px; margin:0 auto; padding:24px clamp(16px,3vw,40px) 64px; }
.page-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; } .page-head h1 { margin:0; } .page-head .right { margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* ---- cards & tiles: surface value + hairline carries elevation, no shadow at rest */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px 20px; margin-bottom:16px; }
.card.table-scroll { overflow-x:auto; }
.grid { display:grid; gap:16px; } .grid.two { grid-template-columns:1fr 1fr; } .grid.three { grid-template-columns:repeat(3,1fr); } .grid.side { grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
@media (max-width:900px) { .grid.two, .grid.three, .grid.side { grid-template-columns:1fr; } }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:16px; }
.tile { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px 18px; }
.tile .v { font-size:28px; font-weight:800; letter-spacing:-.01em; line-height:1.05; color:var(--ink); }
.tile .l { color:var(--muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; margin-top:8px; }
.tile .sub { color:var(--ink-2); font-size:12px; font-weight:300; margin-top:4px; }
.tile.bad .v { color:var(--critical); } .tile.warn .v { color:var(--serious); }

/* ---- tabs = filter chips (pill), active = cyan */
.tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.tabs a { height:32px; padding:0 14px; border-radius:var(--radius-pill); border:1px solid var(--line); background:transparent; color:var(--ink-2); display:inline-flex; gap:8px; align-items:center; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:var(--tracking-label); transition:all var(--duration-fast) var(--ease-out); }
.tabs a:hover { text-decoration:none; background:var(--icon-cyan-08); border-color:var(--icon-cyan); color:var(--ink); }
.tabs a.active { background:var(--icon-cyan-16); border-color:var(--icon-cyan); color:var(--ink); }
.tabs a.active .count.neutral { border-color:var(--icon-cyan-32); color:var(--ink); }
.tabs.saved a { text-transform:none; letter-spacing:0; font-weight:500; height:28px; padding:0 12px; } .tabs.saved { align-items:center; }

/* ---- controls */
.filters { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px; align-items:center; }
.filters select, .filters input:not([type=checkbox]):not([type=radio]), select, input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], textarea {
  height:36px; padding:0 10px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--sunken); color:var(--ink); font:400 14px/1.4 var(--font-brand); transition:border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
:root[data-theme="light"] select, :root[data-theme="light"] input, :root[data-theme="light"] textarea { background:var(--icon-white); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) select, :root:not([data-theme="dark"]) input, :root:not([data-theme="dark"]) textarea { background:var(--icon-white); } }
select:focus, input:focus, textarea:focus { outline:none; border-color:var(--icon-cyan); box-shadow:var(--focus-ring); }
.filters input[type=search] { min-width:240px; }
textarea { width:100%; min-height:130px; height:auto; padding:10px; resize:vertical; line-height:1.5; }
label.inline { display:inline-flex; gap:6px; align-items:center; color:var(--ink-2); }
input[type=checkbox] { accent-color:var(--icon-cyan); }
button.primary, button.ghost, button.danger, .filters button { height:36px; padding:0 16px; border-radius:var(--radius-md); font:700 12px/1 var(--font-brand); text-transform:uppercase; letter-spacing:var(--tracking-label); cursor:pointer; transition:background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
button.primary { background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent); }
button.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); } button.primary:active { background:var(--accent-press); transform:scale(.98); }
button.ghost, .filters button { background:transparent; color:var(--secondary-fg); border:1px solid var(--secondary-border); }
button.ghost:hover, .filters button:hover { background:var(--icon-cyan-08); border-color:var(--icon-cyan); }
button.danger { background:transparent; color:var(--critical); border:1px solid var(--critical); } button.danger:hover { background:var(--critical-bg); }
button.small { height:28px; padding:0 10px; font-size:11px; }
button:disabled { opacity:.4; pointer-events:none; }

/* ---- tables */
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
th { font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); font-weight:600; white-space:nowrap; border-bottom:1px solid var(--line); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
tr.clickable { cursor:pointer; transition:background var(--duration-fast) var(--ease-out); } tr.clickable:hover { background:var(--icon-cyan-08); }
tbody tr:last-child td { border-bottom:0; }
.brand-row td { padding-top:14px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-2); border-bottom:0; }
th.sortable { cursor:pointer; user-select:none; }
th.sortable:hover { color:var(--ink); }
th.sortable::after { content:"\2195"; opacity:.35; margin-left:4px; font-size:10px; }
th.sortable[aria-sort="ascending"]::after { content:"\2191"; opacity:1; color:var(--accent-text); }
th.sortable[aria-sort="descending"]::after { content:"\2193"; opacity:1; color:var(--accent-text); }
tr.sort-hidden { display:none; }
th a.sort { color:inherit; text-decoration:none; } th a.sort:hover { color:var(--ink); } th a.sort.on { color:var(--accent-text); }

/* ---- review bits */
.stars { color:var(--star); letter-spacing:1px; white-space:nowrap; font-size:13px; } .stars.bad { color:var(--critical); } .stars .off { color:var(--star-off); }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.dot.WashU { background:var(--washu); } .dot.ICON { background:var(--icon); } .dot.WA { background:var(--wa); }
.pill { display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 10px; border-radius:var(--radius-pill); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-label); border:1px solid var(--line); color:var(--ink-2); white-space:nowrap; }
.pill.good { color:var(--good); border-color:var(--good-line); background:var(--good-bg); }
.pill.warn { color:var(--warn); border-color:var(--warn-line); background:var(--warn-bg); }
.pill.serious { color:var(--serious); border-color:var(--serious-line); background:var(--serious-bg); }
.pill.bad { color:var(--critical); border-color:var(--critical-line); background:var(--critical-bg); }
.pill.me { color:var(--accent-text); border-color:var(--icon-cyan); background:var(--icon-cyan-08); }
.pill.emp { color:var(--accent-text); border-color:var(--icon-cyan-32); background:var(--icon-cyan-08); text-transform:none; letter-spacing:0; font-weight:600; }
.pill.small { height:20px; font-size:10px; padding:0 8px; } .pill.small.emp { font-size:11px; }
.pill .x { background:none; border:0; color:inherit; cursor:pointer; padding:0 2px; font-size:13px; line-height:1; }
.src { display:inline-flex; width:16px; height:16px; border-radius:50%; align-items:center; justify-content:center; font-size:10px; font-weight:700; border:1px solid var(--line); color:var(--ink-2); vertical-align:-3px; margin-right:2px; }
.src.g { color:#4285f4; } .src.f { color:#1877f2; }
.muted { color:var(--muted); } .small { font-size:12px; } .ink2 { color:var(--ink-2); }
.review-text { white-space:pre-wrap; line-height:1.6; font-size:16px; }
.snippet { color:var(--ink); max-width:560px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.quote { background:var(--sunken); border:1px solid var(--line); border-left:2px solid var(--icon-cyan); padding:12px 14px; border-radius:var(--radius-sm); white-space:pre-wrap; }
.msg { background:var(--surface); border:1px solid var(--line); padding:10px 14px; border-radius:var(--radius-md); margin-bottom:14px; }
.msg.ok { border-color:var(--good-line); background:var(--good-bg); } .msg.err { border-color:var(--critical-line); background:var(--critical-bg); }
.pager { display:flex; gap:16px; justify-content:center; margin-top:14px; align-items:center; }
.login { max-width:400px; margin:72px auto; padding:32px 28px; } .login .logo { display:block; margin:0 auto 10px; height:44px; width:auto; } .login .sub { text-align:center; color:var(--muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:var(--tracking-eyebrow); margin:0 0 22px; } .login p { margin:10px 0; }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip { height:28px; border:1px solid var(--line); background:transparent; border-radius:var(--radius-sm); padding:0 10px; cursor:pointer; font:500 12.5px/1 var(--font-brand); color:var(--ink-2); display:inline-flex; align-items:center; transition:all var(--duration-fast) var(--ease-out); }
.chip:hover { background:var(--icon-cyan-08); border-color:var(--icon-cyan); color:var(--ink); }
.chip.suggested { border-color:var(--icon-cyan); color:var(--accent-text); font-weight:600; }
.composer-foot { display:flex; gap:10px; align-items:center; margin-top:10px; flex-wrap:wrap; } .composer-foot .right { margin-left:auto; color:var(--muted); font-size:12px; font-weight:300; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:13px; } .kv dt { color:var(--muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; padding-top:2px; } .kv dd { margin:0; }
.bars { display:grid; grid-template-columns:auto 1fr auto; gap:6px 10px; align-items:center; font-size:12.5px; } .bars .bar { height:6px; background:var(--surface-2); border-radius:var(--radius-pill); overflow:hidden; } .bars .bar i { display:block; height:100%; background:var(--icon-cyan); border-radius:var(--radius-pill); }
.chart-wrap { position:relative; height:240px; width:100%; } .chart-wrap.tall { height:300px; } .chart-wrap.short { height:170px; }
.chart-wrap canvas { max-width:100%; }
.grid > * { min-width:0; }                          /* a wide data table never widens its grid cell (and the chart in it) */
details.data summary { cursor:pointer; color:var(--muted); font-size:12px; margin-top:8px; }
details.data > table, details.data > div { display:block; overflow-x:auto; max-width:100%; }
details.data table th, details.data table td { white-space:nowrap; }
.chart-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:-4px 0 10px; }
.seg { display:inline-flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; font-size:12px; }
.seg .seg-label { padding:0 10px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:var(--tracking-label); border-right:1px solid var(--line); height:30px; display:inline-flex; align-items:center; }
.seg a { padding:0 12px; height:30px; display:inline-flex; align-items:center; color:var(--ink-2); text-decoration:none; border-right:1px solid var(--line); font-weight:600; }
.seg a:last-of-type { border-right:0; } .seg a:hover { background:var(--icon-cyan-08); color:var(--ink); text-decoration:none; }
.seg a.on { background:var(--icon-cyan-16); color:var(--ink); } .seg a.off { opacity:.45; pointer-events:none; }
.seg .muted { padding:0 10px; border-left:1px solid var(--line); height:30px; display:inline-flex; align-items:center; }
.legend { display:flex; gap:12px; font-size:12px; color:var(--ink-2); margin-bottom:6px; } .legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
.site-link { color:var(--ink); font-weight:600; } .site-link:hover { color:var(--accent-text); }
details.inline-form summary { list-style:none; display:inline-block; } details.inline-form summary::-webkit-details-marker { display:none; }
.ms-btn { display:flex; gap:10px; align-items:center; justify-content:center; width:100%; height:44px; padding:0 14px; border-radius:var(--radius-md); border:1px solid var(--secondary-border); background:transparent; color:var(--ink); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:var(--tracking-label); text-decoration:none; transition:all var(--duration-fast) var(--ease-out); }
.ms-btn:hover { background:var(--icon-cyan-08); border-color:var(--icon-cyan); text-decoration:none; color:var(--ink); }
.or { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.14em; margin:16px 0 8px; } .or:before, .or:after { content:""; flex:1; border-top:1px solid var(--line); }
@media (max-width:760px) { main { padding:12px; } nav.top { padding:0 12px; } nav.top .meta { display:none; } nav.top a.item { padding:0 10px; font-size:11px; } .snippet { max-width:none; }
  table.inbox td, table.inbox th { padding:8px 6px; } .tiles { grid-template-columns:repeat(2,1fr); } }

/* ---- inbox reply column */
.reply-cell { max-width:360px; }
.reply-cell .snip { color:var(--ink-2); font-size:12.5px; line-height:1.45; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.reply-cell .by { color:var(--muted); font-size:11px; font-weight:300; margin-top:3px; }
a.cta { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:var(--radius-md); background:var(--accent); color:var(--accent-ink); font:700 11px/1 var(--font-brand); text-transform:uppercase; letter-spacing:var(--tracking-label); text-decoration:none; white-space:nowrap; }
a.cta:hover { background:var(--accent-hover); color:var(--accent-ink); text-decoration:none; }
a.cta.urgent { background:var(--critical); } a.cta.urgent:hover { background:#f04b4b; }
.cta-note { display:block; color:var(--muted); font-size:11px; font-weight:300; margin-top:4px; }
/* ---- date range control */
.range-custom { display:inline-flex; gap:6px; align-items:center; } .range-custom input[type=date] { width:140px; padding:0 8px; }
.filters .sep { width:1px; height:24px; background:var(--line); margin:0 4px; }
details.inline-form .popover { position:absolute; z-index:6; margin-top:6px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:14px 16px; min-width:320px; box-shadow:var(--shadow-raised); }
details.inline-form { position:relative; }
.site-picks { columns:2; font-size:12.5px; margin:8px 0 10px; } .site-picks label { display:block; margin:2px 0; }

/* ---- multi-select */
details.ms { position:relative; display:inline-block; }
details.ms summary { list-style:none; display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 10px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--sunken); color:var(--ink); font:400 14px/1 var(--font-brand); cursor:pointer; white-space:nowrap; max-width:220px; }
details.ms summary::-webkit-details-marker { display:none; } details.ms summary .ms-label { overflow:hidden; text-overflow:ellipsis; } details.ms summary .ms-caret { color:var(--muted); font-size:11px; }
details.ms[open] summary { border-color:var(--icon-cyan); box-shadow:var(--focus-ring); }
details.ms .ms-menu { position:absolute; z-index:7; top:40px; left:0; min-width:min(240px, calc(100vw - 32px)); max-width:calc(100vw - 32px); max-height:320px; overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:8px; box-shadow:var(--shadow-raised); }
details.ms .ms-menu label { display:flex; gap:8px; align-items:center; padding:5px 6px; border-radius:4px; font-size:13px; cursor:pointer; white-space:nowrap; } details.ms .ms-menu label:hover { background:var(--icon-cyan-08); }
details.ms .ms-tools { display:flex; gap:6px; padding:0 6px 6px; border-bottom:1px solid var(--line-soft); margin-bottom:4px; } details.ms .ms-tools button { background:none; border:0; color:var(--accent-text); font:600 11px/1 var(--font-brand); text-transform:uppercase; letter-spacing:var(--tracking-label); cursor:pointer; padding:4px 0; }
:root[data-theme="light"] details.ms summary { background:var(--icon-white); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) details.ms summary { background:var(--icon-white); } }
.dist-legend { display:flex; gap:14px; font-size:12px; color:var(--ink-2); margin:0 0 8px; } .dist-legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
.star-cell { font-variant-numeric:tabular-nums; }

/* Report recipients: one column per edition */
.recip-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:6px; } .recip-head h3 { display:flex; align-items:center; gap:8px; margin-bottom:4px; } .recip-head p { margin:0; }
.recip-list { list-style:none; margin:8px 0 12px; padding:0; border-top:1px solid var(--line); }
.recip-list li { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--line); font-size:13px; }
.recip-list .who { display:flex; flex-direction:column; min-width:0; } .recip-list .who span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recip-list li.empty { justify-content:center; padding:14px 0; }
.recip-add textarea { min-height:68px; font-size:13px; margin-bottom:8px; }

/* ---- accessibility: skip link, reduced motion */
.skip { position:absolute; left:-9999px; top:8px; z-index:20; background:var(--accent); color:var(--accent-ink); padding:8px 12px; border-radius:var(--radius-md); font-weight:700; }
.skip:focus { left:8px; }
main:focus { outline:none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }

/* ---- nav sync status */
nav.top a.sync { text-decoration:none; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; } nav.top a.sync.bad { color:#f0a0a0; }
@media (max-width:1100px) { nav.top .meta.who { display:none; } } @media (max-width:900px) { nav.top a.sync { display:none; } }
.sync-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--icon-gray-400); } .sync-dot.ok { background:var(--status-success); } .sync-dot.stale { background:var(--status-warning); } .sync-dot.fail { background:var(--status-error); }
nav.top .meta.who { margin-right:8px; }
nav.top .keys-help { width:32px; padding:0; }

/* ---- toast notices */
.toast { position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:30; display:flex; gap:12px; align-items:center; background:var(--icon-gray-dark); color:var(--icon-white); border:1px solid var(--icon-gray-500); border-left:3px solid var(--status-success); padding:10px 14px; border-radius:var(--radius-md); box-shadow:var(--shadow-raised); font-size:13.5px; max-width:min(560px, calc(100vw - 32px)); }
.toast.err { border-left-color:var(--status-error); }
.toast button { background:none; border:1px solid var(--icon-gray-500); color:var(--icon-white); border-radius:var(--radius-sm); padding:4px 10px; cursor:pointer; font:700 11px/1 var(--font-brand); text-transform:uppercase; letter-spacing:var(--tracking-label); }
.toast .toast-undo { border-color:var(--icon-cyan); color:var(--icon-cyan-bright); } .toast .toast-x { border:0; font-size:16px; padding:0 4px; }

/* ---- banners on the review page */
.banner { padding:10px 14px; border-radius:var(--radius-md); border:1px solid var(--line); background:var(--surface); margin-bottom:12px; font-size:13.5px; }
.banner.red { border-color:var(--critical-line); background:var(--critical-bg); } .banner.blue { border-color:var(--icon-cyan-32); background:var(--icon-cyan-08); }
.banner.gold { border-color:var(--warn-line); background:var(--warn-bg); } .banner.gray { border-color:var(--line-strong, var(--line)); background:var(--surface-2); }

/* ---- rating change highlights */
.pill.chg.down { color:var(--critical); border-color:var(--critical-line); background:var(--critical-bg); text-transform:none; letter-spacing:0; }
.pill.chg.up { color:var(--accent-text); border-color:var(--icon-cyan-32); background:var(--icon-cyan-08); text-transform:none; letter-spacing:0; }
tr.chg-down > td:first-child { box-shadow:inset 3px 0 0 var(--critical); } tr.chg-up > td:first-child { box-shadow:inset 3px 0 0 var(--icon-cyan); }
tr.removed td { opacity:.75; } tr.removed .snippet { text-decoration:line-through; text-decoration-color:var(--muted); }
tr.just-replied td { background:var(--good-bg); }
tr.kb-sel td { background:var(--icon-cyan-08); } tr.kb-sel > td:first-child { box-shadow:inset 3px 0 0 var(--icon-cyan); }

/* ---- inline composer */
.toolbar { display:flex; gap:10px; align-items:center; margin:-6px 0 12px; flex-wrap:wrap; } .toolbar .right { margin-left:auto; }
.composer-row td { background:var(--sunken); padding:12px 16px 14px; cursor:default; }
.composer .composer-head { display:flex; gap:8px; align-items:center; margin-bottom:8px; } .composer .composer-head .right { margin-left:auto; }
.composer textarea { min-height:84px; margin-top:8px; }
.warn-box { margin:8px 0; padding:10px 12px; border:1px solid var(--warn-line); background:var(--warn-bg); border-radius:var(--radius-md); font-size:13px; }
.warn-box ul { margin:4px 0 8px 18px; padding:0; } .warn-box li { margin:2px 0; }
details.hint { align-self:center; margin-left:4px; flex-basis:auto; }
details.hint summary { cursor:pointer; list-style:none; } details.hint summary::-webkit-details-marker { display:none; }
details.hint summary::before { content:"\24D8  "; } details.hint[open] { flex-basis:100%; }
details.hint p { margin:6px 0 0; max-width:60ch; color:var(--ink-2); }

/* ---- activity timeline */
.timeline { list-style:none; margin:0; padding:0; } .timeline li { display:grid; grid-template-columns:140px 1fr; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-soft); font-size:13px; }
.timeline li:last-child { border-bottom:0; } .timeline .when { color:var(--muted); font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.timeline li.rating_changed .what strong, .timeline li.removed .what strong { color:var(--critical); } .timeline li.reply_posted .what strong, .timeline li.restored .what strong { color:var(--good); }
.quote-lite { white-space:pre-wrap; color:var(--ink-2); border-left:2px solid var(--line); padding-left:8px; margin-top:4px; }
.tile.good .v { color:var(--good); }

/* ---- weekly table & grids */
.grid.four { grid-template-columns:repeat(4,1fr); } @media (max-width:1100px) { .grid.four { grid-template-columns:repeat(2,1fr); } } @media (max-width:700px) { .grid.four { grid-template-columns:1fr; } }
table.weekly th.grp { text-align:center; border-left:1px solid var(--line); color:var(--ink); } table.weekly th.grp.qtd { color:var(--accent-text); }
table.weekly td:nth-child(9), table.weekly th:nth-child(9):not(.grp) { border-left:1px solid var(--line); }

/* ---- keyboard help */
.keys-help-panel { position:fixed; inset:0; z-index:25; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:16px; }
.keys-help-panel .card { max-width:460px; width:100%; } .kv.keys dt { font-family:ui-monospace,Menlo,monospace; text-transform:none; letter-spacing:0; font-size:12px; color:var(--ink); }

/* ---- phones: inbox rows become cards, filters stack */
@media (max-width:760px) {
  .filters { gap:6px; } .filters input[type=search] { min-width:0; width:100%; } .filters .sep { display:none; }
  table.inbox, table.inbox tbody, table.inbox tr, table.inbox td { display:block; width:100%; }
  table.inbox thead { display:none; }
  table.inbox tr.clickable { border-bottom:1px solid var(--line); padding:10px 12px; }
  table.inbox td { border:0; padding:3px 0 !important; }
  table.inbox td[data-label]::before { content:attr(data-label); display:block; font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-bottom:1px; }
  table.inbox td[data-label="Rating"]::before, table.inbox td[data-label="Review"]::before { display:none; }
  table.inbox td[data-label="Rating"] { display:flex; gap:10px; align-items:center; } table.inbox td:nth-child(4), table.inbox td:nth-child(5) { display:inline-block; width:auto; margin-right:16px; }
  table.inbox .reply-cell { max-width:none; } table.inbox .snippet { -webkit-line-clamp:4; }
  tr.chg-down > td:first-child, tr.chg-up > td:first-child, tr.kb-sel > td:first-child { box-shadow:none; } tr.chg-down { box-shadow:inset 3px 0 0 var(--critical); } tr.chg-up { box-shadow:inset 3px 0 0 var(--icon-cyan); }
  .composer-row td { padding:10px 12px !important; }
  .page-head .right { margin-left:0; width:100%; } .timeline li { grid-template-columns:1fr; gap:2px; }
  .toolbar .right { margin-left:0; }
  .review-text { font-size:15px; }
}

/* ---- print: reports on paper */
@media print {
  :root { --bg:#fff; --surface:#fff; --surface-2:#f3f4f6; --sunken:#f3f4f6; --ink:#111; --ink-2:#333; --muted:#666; --line:#ccc; --line-soft:#e5e5e5; --accent:#0a6fa3; color-scheme:light; }
  nav.top, .filters, .tabs, .toolbar, .pager, .toast, .keys-help-panel, .skip, form, .chip, button, .theme-toggle { display:none !important; }
  main { max-width:none; padding:0; } .card, .tile { break-inside:avoid; border-color:#ccc; box-shadow:none; }
  details.data { display:block; } details.data summary { display:none; } details.data[open] > *, details.data > table { display:table; }
  .grid.two, .grid.side, .grid.three, .grid.four { grid-template-columns:1fr 1fr; } .chart-wrap { height:220px; }
  a { color:inherit; text-decoration:none; } a[href]::after { content:""; }
  body { font-size:12px; } h1 { font-size:20px; }
  /* wide data tables: wrap instead of clipping; no keyboard-selection highlight on paper */
  .table-scroll, .data-scroll { overflow:visible !important; } table { width:100%; table-layout:auto; } th, td { white-space:normal !important; word-break:break-word; }
  tr.kb-sel td { background:none !important; } tr.kb-sel > td:first-child { box-shadow:none !important; }
  .mobile-only { display:none !important; }
}

/* ---- nav layout: one row on wide screens; below 1100px the brand and controls stay on
   the first row and the section links move to a second, horizontally scrollable row,
   so nothing (Sign out included) is ever pushed off-screen. */
nav.top .nav-items { display:flex; gap:2px; align-items:center; min-width:0; }
@media (max-width:1100px) {
  nav.top { flex-wrap:wrap; height:auto; row-gap:0; padding-top:0; }
  nav.top .brand { height:52px; }
  nav.top .nav-items { order:3; flex:1 0 100%; overflow-x:auto; scrollbar-width:none; margin:0 -12px; padding:0 12px; border-top:1px solid var(--icon-gray-mid); }
  nav.top .nav-items::-webkit-scrollbar { display:none; }
  nav.top a.item { height:44px; flex:0 0 auto; white-space:nowrap; }
}
@media (max-width:760px) { nav.top .keys-help { display:none; } nav.top .brand { margin-right:8px; } }
@media (max-width:420px) {
  .mark { font-size:13px; } .mark::before { width:14px; margin-right:6px; }
  nav.top button, nav.top .theme-toggle { padding:0 9px; } nav.top .theme-toggle { margin-right:6px; }
}

/* ---- sortable headers are buttons for keyboard users */
th.sortable { cursor:pointer; } th.sortable:focus-visible { outline:2px solid var(--icon-cyan-bright); outline-offset:-2px; }

.mobile-only { display:none; } @media (max-width:760px) { .mobile-only { display:inline-flex; gap:6px; align-items:center; } }
/* multiselect menus that would run past the right edge open leftwards (set by base.html) */
details.ms .ms-menu.flip { left:auto; right:0; }

/* admin tag order arrows */
button.arrow { padding:0 8px; min-width:30px; height:28px; } button.arrow:disabled { opacity:.3; cursor:default; }
.tags-grid .card { min-width:0; } @media (max-width:1250px) { .grid.tags-grid { grid-template-columns:1fr; } }

/* ===== Marketing Requests additions ===== */
.catalog { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; margin-bottom:22px; }
.catalog a.type { display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:14px 16px; color:var(--ink); transition:border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
.catalog a.type:hover { text-decoration:none; border-color:var(--icon-cyan); background:var(--icon-cyan-08); }
.catalog a.type b { display:block; font-size:14px; margin-bottom:4px; } .catalog a.type span { color:var(--muted); font-size:12.5px; line-height:1.4; display:block; }
.catalog a.type .sla { display:block; margin-top:8px; font-size:11px; color:var(--accent-text); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.cat-head { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-eyebrow); color:var(--accent-text); margin:18px 0 10px; }
.field { margin-bottom:14px; } .field label { display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:5px; }
.field input[type=text], .field input[type=number], .field input[type=date], .field input[type=email], .field select { width:100%; max-width:520px; }
.field input[type=date] { height:36px; padding:0 10px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--sunken); color:var(--ink); font:400 14px var(--font-brand); }
.field textarea { max-width:640px; min-height:90px; } .field .help { color:var(--muted); font-size:12px; margin-top:4px; } .field .err { color:var(--critical); font-size:12px; margin-top:4px; font-weight:600; }
.field.req label::after { content:" *"; color:var(--critical); }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0 20px; }
.checks label { display:inline-flex; align-items:center; gap:6px; margin:0 14px 6px 0; font-size:13px; text-transform:none; letter-spacing:0; color:var(--ink); }
.sizegrid td, .sizegrid th { padding:6px 6px; text-align:center; } .sizegrid th:first-child, .sizegrid td:first-child { text-align:left; }
.sizegrid input { width:56px; height:32px; text-align:center; padding:0 4px; font-variant-numeric:tabular-nums; }
.sizegrid td.c { font-variant-numeric:tabular-nums; } .sizegrid td.c.out { background:var(--critical-bg); color:var(--critical); font-weight:700; } .sizegrid td.c.low { background:var(--warn-bg); color:var(--warn); font-weight:600; } .sizegrid td.c.zero { color:var(--muted); opacity:.55; }
.people-rows .prow { display:grid; grid-template-columns:minmax(160px,1fr) 150px auto; gap:8px; align-items:center; margin-bottom:8px; }
.people-rows .prow .items { display:flex; gap:6px; flex-wrap:wrap; } .people-rows .prow .items label { display:inline-flex; gap:4px; align-items:center; font-size:12px; text-transform:none; letter-spacing:0; color:var(--ink-2); margin:0; }
.people-rows .prow .items input { width:48px; height:30px; text-align:center; padding:0 2px; }
.status { display:inline-flex; align-items:center; height:22px; padding:0 10px; border-radius:var(--radius-pill); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; border:1px solid var(--line); color:var(--ink-2); white-space:nowrap; }
.status.submitted { color:var(--accent-text); border-color:var(--icon-cyan); background:var(--icon-cyan-08); }
.status.in_progress { color:var(--ink); border-color:var(--icon-gray-300); } .status.ordered, .status.shipped { color:var(--warn); border-color:var(--warn-line); background:var(--warn-bg); }
.status.fulfilled { color:var(--good); border-color:var(--good-line); background:var(--good-bg); } .status.on_hold { color:var(--serious); border-color:var(--serious-line); background:var(--serious-bg); }
.status.declined { color:var(--critical); border-color:var(--critical-line); background:var(--critical-bg); }
.rush { color:var(--critical); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.06em; } .due-over { color:var(--critical); font-weight:600; }
.tag { display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; border:1px solid currentColor; border-radius:3px; padding:1px 5px; white-space:nowrap; }
.tag.WashU { color:var(--washu); } .tag.ICON { color:var(--icon); } .tag.WA { color:var(--wa); }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; margin:0; font-size:13.5px; } .kv dt { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.1em; font-weight:600; padding-top:2px; } .kv dd { margin:0; white-space:pre-wrap; }
.timeline li.status .what strong { color:var(--accent-text); } .timeline li.internal { background:var(--warn-bg); border-radius:var(--radius-sm); padding-left:8px; }
.attach { display:flex; gap:10px; flex-wrap:wrap; } .attach a { display:block; border:1px solid var(--line); border-radius:var(--radius-md); padding:6px 10px; font-size:12.5px; } .attach img { max-height:120px; max-width:180px; display:block; border-radius:var(--radius-sm); margin-bottom:4px; }
.inline-form { display:inline; } details.inline-form summary { cursor:pointer; color:var(--accent-text); font-size:13px; font-weight:600; list-style:none; } details.inline-form[open] summary { margin-bottom:8px; }
details.inline-form .box { background:var(--sunken); border:1px solid var(--line); border-radius:var(--radius-md); padding:12px; margin:6px 0 12px; }
.note { background:var(--surface-2); border-left:3px solid var(--icon-cyan); padding:9px 12px; border-radius:0 var(--radius-md) var(--radius-md) 0; font-size:13.5px; margin:10px 0; }
.msg.err { color:var(--critical); background:var(--critical-bg); border:1px solid var(--critical-line); padding:8px 12px; border-radius:var(--radius-md); margin-bottom:12px; }
.ms-btn { display:flex; align-items:center; justify-content:center; gap:10px; height:40px; border:1px solid var(--secondary-border); border-radius:var(--radius-md); color:var(--ink); font-weight:600; } .ms-btn:hover { text-decoration:none; border-color:var(--icon-cyan); background:var(--icon-cyan-08); }
.or { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.14em; margin:14px 0; } .or::before, .or::after { content:""; flex:1; border-top:1px solid var(--line); }
.small { font-size:12.5px; } .muted { color:var(--muted); }
.bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
@media (max-width:700px) { .people-rows .prow { grid-template-columns:1fr; } .kv { grid-template-columns:1fr; } .timeline li { grid-template-columns:1fr; } }
@media (max-width:760px) { .card { overflow-x:auto; } .page-head .right { margin-left:0; } nav.top { flex-wrap:wrap; height:auto; padding-block:6px; } nav.top .nav-items { order:3; width:100%; display:flex; overflow-x:auto; } nav.top a.item { height:40px; } }

/* ===== Review fixes (2026-10-11) ===== */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
a.btn { display:inline-flex; align-items:center; height:36px; padding:0 16px; border-radius:var(--radius-md); font:700 12px/1 var(--font-brand); text-transform:uppercase; letter-spacing:var(--tracking-label); text-decoration:none; }
a.btn.primary { background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent); } a.btn.primary:hover { background:var(--accent-hover); text-decoration:none; }
a.btn.ghost { color:var(--secondary-fg); border:1px solid var(--secondary-border); } a.btn.ghost:hover { background:var(--icon-cyan-08); border-color:var(--icon-cyan); text-decoration:none; }
.field label.checks, .checks label, label.checks { display:inline-flex; align-items:center; gap:6px; font-size:13px; text-transform:none; letter-spacing:0; color:var(--ink); font-weight:400; }
.field .checks { margin-top:2px; }
/* brand tags: readable in both themes */
.tag.WashU { color:#5a9bea; } .tag.ICON { color:#f08a5c; } .tag.WA { color:#3ccf96; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .tag.WashU { color:#1f5fb0; } :root:not([data-theme="dark"]) .tag.ICON { color:#b8471a; } :root:not([data-theme="dark"]) .tag.WA { color:#157a56; } }
:root[data-theme="light"] .tag.WashU { color:#1f5fb0; } :root[data-theme="light"] .tag.ICON { color:#b8471a; } :root[data-theme="light"] .tag.WA { color:#157a56; }
details.inline-form.card, details.inline-form.block { display:block; }
details.inline-form.card summary { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-eyebrow); color:var(--accent-text); }
td.actions { text-align:right; white-space:nowrap; }
.field input[type=date] { background:var(--sunken); }
:root[data-theme="light"] .field input[type=date] { background:var(--icon-white); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .field input[type=date] { background:var(--icon-white); } }
.timeline li { grid-template-columns:max-content 1fr; }
.sizegrid td.c .req { color:var(--muted); font-size:10.5px; line-height:1.2; }
.sizegrid td.c.out .req, .sizegrid td.c.low .req { color:inherit; }
.legend .sw { display:inline-block; width:12px; height:12px; border-radius:2px; vertical-align:-2px; margin-right:4px; border:1px solid var(--line); }
.legend .sw.out { background:var(--critical-bg); border-color:var(--critical); } .legend .sw.low { background:var(--warn-bg); border-color:var(--warn); }
.legend { margin:-4px 0 14px; }
.tabs a.warn .count { color:var(--critical); }
.prow.bad input, .prow.bad select { border-color:var(--critical); }
.prow .err { color:var(--critical); font-weight:600; }
.people-rows .prow.pieces { grid-template-columns:minmax(140px,1fr) 130px minmax(0,2fr) auto; }
.cat-group summary.cat-head { cursor:pointer; list-style:none; } .cat-group summary.cat-head::before { content:"▸ "; } .cat-group[open] summary.cat-head::before { content:"▾ "; }
.msg.err a { color:inherit; text-decoration:underline; }
nav.top a.item.mobile-only { display:none; }
.toast.err { background:var(--critical); color:#fff; }
@media (max-width:900px) { .grid.side.home .home-side { order:-1; } }
@media (max-width:760px) {
  details.inline-form .box, details.inline-form .box.wide { min-width:0 !important; max-width:calc(100vw - 48px); }
  .people-rows .prow.pieces { grid-template-columns:1fr; }
  nav.top a.item.mobile-only { display:inline-flex; }
  td.actions { white-space:normal; }
}
@media (max-width:1100px) { nav.top a.item.mobile-only { display:inline-flex; } }

/* ---- Spend approvals, art library, print shops (agent step 1) */
.status.awaiting_approval { color:var(--serious); border-color:var(--serious-line); background:var(--serious-bg); }
.approval-box { border:1px solid var(--serious-line); background:var(--serious-bg); border-radius:var(--radius); padding:12px 14px; margin-bottom:12px; }
.approval-box .amt { font-size:22px; font-weight:800; letter-spacing:-.01em; }
.approval-box .actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.approval-history li { padding:6px 0; border-top:1px solid var(--line); font-size:13px; }
.approval-history li:first-child { border-top:0; }
.shop { font-size:13px; line-height:1.45; }
.asset-list a { display:block; }
/* The status pill rule above also matched timeline rows of kind "status" (li.status): fixed 22px height, uppercase,
   nowrap -> overlapping lines. Reset those rows to ordinary timeline rows. */
.timeline li.status, .timeline li.status.in_progress, .timeline li.status.submitted { display:grid; height:auto; padding:8px 0; border:0; border-bottom:1px solid var(--line-soft); border-radius:0;
  font-size:13px; font-weight:400; text-transform:none; letter-spacing:0; white-space:normal; color:inherit; background:none; }
.timeline li.status:last-child { border-bottom:0; }
.bar select { max-width:100%; min-width:0; }
/* ---- Row editors (People, Sites, Print shops, Stock): open as a centred panel instead of inside the table
   cell, which stretched the table sideways (2,300px on People at laptop width). */
td.actions details.inline-form[open] > summary { margin-bottom:0; }
td.actions details.inline-form[open]::before { content:""; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:40; }
td.actions details.inline-form[open] > .box { position:fixed; z-index:41; top:8vh; left:50%; transform:translateX(-50%); width:min(760px, calc(100vw - 32px));
  max-height:84vh; overflow:auto; margin:0; padding:18px 20px 20px; background:var(--surface); box-shadow:var(--shadow-raised); border-radius:var(--radius-lg); text-align:left; white-space:normal; }
td.actions details.inline-form[open] > .box .checks { flex-wrap:wrap; }
td.actions details.inline-form[open] > .box .modal-close { position:sticky; top:0; float:right; margin:-6px -8px 0 0; }
td.actions details.inline-form .box .bar label.small input, td.actions details.inline-form .box .bar label.small select { margin-top:2px; }