/* Broadsheet: the platform's own look, for the pages served on the platform
 * host and none of an agency's. Newsprint set for the web: Source Serif 4 in
 * near-black ink on paper white, cyan as the one working accent and magenta
 * as the rarer second, near-square corners, and hierarchy carried by the
 * serif scale and whitespace rather than boxes and dividers. The tokens and
 * component classes are the design system's (docs/ has the handoff); a page
 * takes every colour, font, spacing and radius from the variables below.
 *
 * This sheet has ONE look in any browser theme, on purpose: it is a public
 * front door, not the working app, so fluent.css and its light/dark toggle
 * are not loaded beside it.
 */
:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #0088b0;
  --color-accent-2: #d6006c;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);
  /* The boundary of a control (an input, an outlined button) has to reach
     3:1 against the paper, which the hairline divider does not; the divider
     stays for the rules between rows and sections. */
  --color-control-border: color-mix(in srgb, #201e1d 50%, transparent);

  /* The accent is a fill and a caret. As text on the paper it is 3.65:1,
     so text, links, the focus ring and the primary button use the 700 step
     (5.7:1, and 5.7:1 under paper-coloured text); hover goes to 800. */

  /* Tonal ramps on one shared lightness scale, so the same step of any role
     has the same visual weight. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #898585;   /* 3:1 on the paper, for dashed and outlined borders */
  --color-neutral-600: #6a6767;   /* 4.5:1 on the paper and the surface, for quiet text */
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #e9f8ff;
  --color-accent-200: #cbeeff;
  --color-accent-300: #99e0ff;
  --color-accent-400: #62c5ee;
  --color-accent-500: #38a6cf;
  --color-accent-600: #1186ac;
  --color-accent-700: #006786;
  --color-accent-800: #004961;
  --color-accent-900: #0a303e;

  --color-accent-2-100: #fff1f4;
  --color-accent-2-200: #ffdee6;
  --color-accent-2-300: #ffc0d0;
  --color-accent-2-400: #ff90b1;
  --color-accent-2-500: #ff458e;
  --color-accent-2-600: #d82071;
  --color-accent-2-700: #aa0b56;
  --color-accent-2-800: #790e3d;
  --color-accent-2-900: #4b1528;

  /* The third process ink, for the print treatments only. */
  --color-process-yellow: #edbb00;

  --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-heading-weight: 600;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;

  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-6: 30px;
  --space-8: 40px;

  --radius-sm: 1px;
  --radius-md: 2px;
  --radius-lg: 4px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.55; font-weight: 400;
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-800); }
/* The words the console's Site text tab may change (data-copy, lib/copy.js).
   A word too wide for its line breaks inside itself rather than widening its
   column and pushing a phone's page sideways. Only a word wider than its
   line is ever broken, so words that fit are drawn exactly as before. */
[data-copy] { overflow-wrap: anywhere; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
/* Muted text is 65% ink: 55% was 3.65:1 on the paper. */
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 65%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
  white-space: nowrap;
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent-700); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-800); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-900); }
.btn-secondary { border-color: var(--color-control-border); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent-800); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-block { width: 100%; margin-top: var(--space-2); }
/* An action that reads as a link: a real button, styled like the text
 * around it. Replaces <a href="#" onclick>, which is a link to nowhere. */
.link-like, button.link-like {
  display: inline; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: var(--color-accent-700); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---- Forms ---- */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-control-border); border-radius: var(--radius-md);
}
.input::placeholder { color: color-mix(in srgb, var(--color-text) 65%, transparent); opacity: 1; }
.input:hover { border-color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
select.input { appearance: auto; }
.field-error { color: var(--color-accent-2-700); font-size: 13.5px; line-height: 20px; margin: 6px 0 0; }
.field-error:empty { display: none; }
.msg .error { color: var(--color-accent-2-700); font-size: 14px; line-height: 22px; margin-top: 10px; }
.msg .success { color: var(--color-accent-800); font-size: 14.5px; line-height: 22px; margin-top: 10px; }

/* ---- Tags ---- */
.tag {
  display: inline-flex; align-items: center; font-size: 11px; line-height: 1.4;
  letter-spacing: 0.02em; padding: 3px 10px;
  font-family: var(--font-body); font-weight: 400;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent-700); color: var(--color-accent-700); }

/* ---- Navigation ---- */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
}
.nav-brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto; color: var(--color-text); text-decoration: none;
}
.nav-brand .mark { flex: none; display: block; color: var(--color-text); }
/* The platform's logo: the name set in the heading face with two lines of
   struck-out text beneath it, the first as wide as the name. Everything is in
   em, so it takes its size from the font-size of whatever holds it, and its
   inks are the page's own: the ink of its text, and the accent at the 700 step,
   the cyan of the buttons and links it sits beside (and 5.7:1 as the ".com"). */
.pra-logo {
  display: inline-block; width: fit-content; white-space: nowrap;
  font-family: var(--font-heading); font-weight: 600;
  line-height: 1; letter-spacing: -0.025em; color: var(--color-text);
}
.nav-brand .pra-logo { font-size: 20px; }
.pra-logo .word { display: block; }
.pra-logo .org { font-weight: 400; color: var(--color-accent-700); }
.pra-logo .bars { display: flex; gap: 0.16em; height: 0.268em; margin-top: 0.214em; }
.pra-logo .bars + .bars { margin-top: 0.16em; }
.pra-logo .bars i { display: block; flex: 0 0 0; background: var(--color-text); }
.pra-logo .bars .c { background: var(--color-accent-700); }
.pra-logo .bars .sp { background: none; }
.pra-logo .r1 i:nth-child(1) { flex-grow: 133; }
.pra-logo .r1 i:nth-child(2) { flex-grow: 74; }
.pra-logo .r1 i:nth-child(3) { flex-grow: 324; }
.pra-logo .r2 i:nth-child(1) { flex-grow: 236; }
.pra-logo .r2 i:nth-child(2) { flex-grow: 103; }
.pra-logo .r2 i:nth-child(3) { flex-grow: 44; }
.pra-logo .r2 i:nth-child(4) { flex-grow: 139; }
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent-700); }

/* The agency header as brandHtml() (theme.js) renders it, for the agency
   pages set on this sheet: the mark or the agency's own logo, then its name
   with one quiet line beneath. fluent.css styles the same markup for its
   pages. */
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; margin-right: auto; color: inherit; text-decoration: none; }
.brand .mark { flex: none; display: block; color: var(--color-text); }
.brand .mark svg { display: block; width: 30px; height: 30px; }
.brand .mark-logo img { display: block; max-height: 36px; max-width: 180px; object-fit: contain; }
.brand .text { display: flex; flex-direction: column; min-width: 0; }
.brand .name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; line-height: 22px; }
.brand .name em { font-style: normal; }
.brand .brand-sub { display: block; font-size: 12.5px; line-height: 16px; color: var(--color-neutral-700); }
.brand .brand-sub .scope { font-weight: 400; }

/* ---- Tables ---- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 400;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* ---- Front-page furniture ---- */
.kick {
  display: block; font-size: 13px; line-height: 14px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-neutral-700);
  font-feature-settings: "tnum" 1;
}
.rule-head { height: 5px; border: 0; margin: 0; border-top: 2px solid var(--color-text); border-bottom: 1px solid var(--color-text); }
.rule-cut { height: 0; border: 0; border-top: 1px solid var(--color-text); margin: 0; }
.just { text-align: justify; hyphens: auto; }

/* ---- The platform's working pages: onboarding and the console ----
   The same idiom carried into pages with forms, tabs and tables. Sections
   are separated by whitespace and, where the design prints furniture, by
   the thick-thin head rule and the single cut rule above; nothing is boxed. */
.h2 { font-family: var(--font-heading); font-weight: 600; font-size: 28px; line-height: 34px; letter-spacing: -.015em; }
.h3 { font-family: var(--font-heading); font-weight: 600; font-size: 20px; line-height: 26px; }
.hint, .field-hint, .muted { font-size: 13.5px; line-height: 20px; color: var(--color-neutral-700); margin: 6px 0 0; }
/* .field-error is set once, with the form controls above. */
.req-mark { color: var(--color-accent-2-700); font-weight: 600; }
code, .code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px;
  background: var(--color-surface); padding: 1px 6px; border-radius: var(--radius-md);
}

/* Tabs: text on a rule, the current one underlined in the accent. */
.tabs { display: flex; flex-wrap: wrap; gap: 10px 28px; border-bottom: 1px solid var(--color-text); }
.tabs .tab, .tabs > button, .tabs .tab-group > button {
  padding: 0 0 12px; margin: 0 0 -1px; background: none; border: 0; border-radius: 0; cursor: pointer;
  font-family: var(--font-heading); font-weight: 600; font-size: 17px; line-height: 22px;
  color: var(--color-neutral-600); border-bottom: 2px solid transparent; text-decoration: none;
  box-shadow: none;
}
.tabs .tab:hover, .tabs > button:hover, .tabs .tab-group > button:hover { color: var(--color-text); background: none; }
.tabs .tab.on, .tabs > button.active, .tabs .tab-group > button.active { color: var(--color-text); border-bottom-color: var(--color-accent); }
.tabs.sub { border-bottom-color: var(--color-divider); }
.tabs.sub .tab, .tabs.sub > button, .tabs.sub .tab-group > button { font-size: 15px; }
/* A named group of tabs inside the bar (Setup, Settings, Platform only): a
   group with a name to a screen reader, a plain run of buttons on screen.
   The panel draws the same wrapper, so both pages read the same way; the
   buttons inside it are no longer children of the bar, which is why they are
   named again above. The rule between groups is a Fluent flourish and has no
   place on paper, so it is left out here. */
.tabs .tab-group { display: flex; align-items: center; gap: 28px; }
.tabs .tabs-divider { display: none; }
.tabs .tabs-group-label {
  font-family: var(--font-heading); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: var(--color-neutral-700); padding: 0 0 12px; margin-right: -14px;
}

/* Figures on a rule: the head rule above, the cut rule below. */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px;
  padding: 18px 0 22px; margin: 0;
  border-top: 2px solid var(--color-text); border-bottom: 1px solid var(--color-text);
  position: relative;
}
.stats::before { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 1px solid var(--color-text); }
.stat .k { font-size: 12px; line-height: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-700); }
.stat .v { font-family: var(--font-heading); font-weight: 600; font-size: 30px; line-height: 36px; margin-top: 6px; }
.stat.warn .v { color: var(--color-accent-2-700); }

/* Notes: a sentence with a rule down its left, ink for information and the
   second accent for a warning. Never a filled box. */
.note, .callout {
  font-size: 14.5px; line-height: 22px; margin: 16px 0; padding: 2px 0 2px 14px;
  border-left: 3px solid var(--color-text); color: var(--color-neutral-800);
}
.note strong, .callout strong { color: var(--color-text); }
.callout strong { display: block; }
.callout.warn { border-left-color: var(--color-accent-2-700); }
.callout.warn strong { color: var(--color-accent-2-700); }
.note ul { margin: 6px 0 0; padding-left: 18px; }

/* Progress and results. */
.spinner {
  width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 4px;
  border: 2px solid var(--color-divider); border-top-color: var(--color-accent); border-radius: 50%;
  animation: bs-spin .7s linear infinite;
}
@keyframes bs-spin { to { transform: rotate(360deg); } }
.error { color: var(--color-accent-2-700); font-size: 14.5px; line-height: 22px; margin-top: 10px; }
.success { color: var(--color-accent-800); font-size: 14.5px; line-height: 22px; margin-top: 10px; }
.ok-text { color: var(--color-accent-800); font-weight: 600; }
.error-text { color: var(--color-accent-2-700); font-weight: 600; }
.toast-host { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: var(--color-text); color: var(--color-bg); font-size: 14px; line-height: 20px;
  padding: 10px 16px; border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s;
}
.toast.in { opacity: 1; transform: translateY(0); }
.toast-error { background: var(--color-accent-2-800); }

/* The colour-scheme picker (schemePickerHtml in theme.js): each scheme as a
   picture of the reviewer queue. The picture's own styles are injected by
   theme.js; these dress the card around it. */
.swatch-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 8px; }
.swatch, .scheme {
  display: flex; flex-direction: column; align-items: stretch; gap: 7px; position: relative;
  padding: 8px; text-align: left; cursor: pointer; font-family: var(--font-body);
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  box-shadow: none; color: var(--color-text);
}
.swatch:hover, .scheme:hover { border-color: var(--color-neutral-600); background: var(--color-surface); }
.swatch-colours { display: flex; height: 8px; border: 1px solid var(--color-divider); }
.swatch-colours span { flex: 1 1 0; min-width: 0; }
.swatch-name { font-family: var(--font-heading); font-weight: 600; font-size: 13.5px; line-height: 18px; text-align: left; }
.swatch-note { font-size: 12px; line-height: 16px; color: var(--color-neutral-700); }
.swatch.selected, .scheme.on { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.swatch.selected::after, .scheme.on::after {
  content: "\2713"; position: absolute; top: -8px; right: -8px; width: 20px; height: 20px;
  background: var(--color-accent-700); color: var(--color-bg); font-size: 12px; line-height: 20px; text-align: center;
  border-radius: var(--radius-md);
}

/* The polite live region api.js mirrors every toast into, for screen readers only. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The red "Demo website" strip applyDemoBanner (agency.js) puts above the
   header of a site created from a CSV import, for the agency pages set on
   this sheet. The header here is not sticky, so nothing needs offsetting. */
.demo-banner {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 4px 12px; min-height: 30px; padding: 4px clamp(14px, 3vw, 28px);
  background: #C0392B; color: #FFFFFF;
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.3; text-align: center;
}
.demo-banner strong { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 640px) { .demo-banner span { display: none; } }
.demo-banner .link-like, .demo-banner button.link-like {
  color: #FFFFFF; text-decoration: underline; font: inherit; margin-left: 6px; padding: 0;
}

/* ---- The agency's own administration, drawn by adminpanel.js ------------
   The platform console draws an opened agency's administration (the same
   markup the agency's admin page draws under fluent.css) inside a .manage
   block, and this is that markup in the Broadsheet look: the strip of
   figures, the page heads, the tables with a coloured edge, the folded
   add-forms, the row menus. It lives here rather than in the console's own
   <style> because these are the panel's class names, not the console's. */
.manage { margin-top: 8px; }
.manage .panel > .page-head:first-child, .manage .panel > .figure-strip:first-child { margin-top: 26px; }
.manage .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 42px; }
.manage .page-head h1 { font-size: 28px; line-height: 34px; }
.manage .page-head h2 { font-family: var(--font-heading); font-weight: 600; font-size: 20px; line-height: 26px; }
.manage .page-head .count { font-size: 15px; font-weight: 400; color: var(--color-neutral-600); margin-left: 6px; }
.manage .page-head .tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.manage .page-head .tools input, .manage .filter-bar input, .manage .filter-bar select { width: auto; min-height: 38px; }
.manage .page-head .search { width: 260px; }
.manage .page-sub { margin: 8px 0 0; font-size: 15px; line-height: 24px; color: var(--color-neutral-800); max-width: 70ch; }
.manage .filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 20px; }
.manage .figure-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 24px; margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--color-text); }
.manage .figure-strip .k { font-size: 12px; line-height: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-700); }
.manage .figure-strip .v { font-family: var(--font-heading); font-weight: 600; font-size: 30px; line-height: 36px; margin: 6px 0 14px; }
.manage .figure-strip .warn .v, .manage .figure-strip .danger .v { color: var(--color-accent-2-700); }
.manage .figure-strip .ok .v { color: var(--color-accent-800); }
/* A table wider than the panel scrolls inside its own card, as it does on
   the admin page. Without this the whole console widened instead, and the
   tab bar and the headings slid sideways with it. */
.manage .table-card { margin-top: 14px; overflow-x: auto; }
.manage table th.edge, .manage table td.edge { width: 3px; padding: 0; }
.manage table td.edge.accent { background: var(--color-accent); }
.manage table td.edge.amber { background: var(--color-process-yellow); }
.manage table td.edge.red { background: var(--color-accent-2-700); }
.manage table tbody tr.clickable { cursor: pointer; }
.manage table td.num, .manage table th.num { text-align: right; }
.manage .desc-cell { max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The heading a cell carries for itself ("Plan: Free"), drawn only where the
   table's own headings are hidden: a row stacked into a block on a phone
   turns the switch on, and nowhere else does.
   A page of its own that labels cells this way has to turn the switch on for
   them, because this rule reaches every td[data-label] on the sheet and each
   property cascades for itself: a page that writes its own content but no
   display gets the display from here, which is none until --cell-label says
   otherwise. The plan comparison on platform.html is the one such page, and
   it sets --cell-label: inline beside its own ::before. */
td[data-label]::before {
  content: attr(data-label) ": ";
  display: var(--cell-label, none);
  color: var(--color-neutral-700); font-weight: 600;
}
.manage .menu-cell { text-align: right; }
/* Outranks the console's own filled-button rule (.wrap button:not(...)). */
.wrap .manage table button.row-menu { background: transparent; color: var(--color-text); border-color: transparent; padding: 2px 10px; font-size: 18px; line-height: 1; }
.wrap .manage table button.row-menu:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.manage .sub-line { font-size: 13px; line-height: 18px; color: var(--color-neutral-600); margin-top: 2px; white-space: normal; }
.manage .small { font-size: 13px; color: var(--color-neutral-600); }
.manage .tnum { font-variant-numeric: tabular-nums; }
.manage .nowrap { white-space: nowrap; }
.manage .flag-line { font-size: 13px; font-weight: 600; margin-top: 2px; }
.manage .flag-line.danger, .manage .flag-line.warn { color: var(--color-accent-2-700); }
.manage .status-dot { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--color-neutral-700); }
.manage .status-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--color-neutral-500)); flex-shrink: 0; }
.manage .status-dot.info { --dot: var(--color-accent); color: var(--color-text); }
.manage .status-dot.ok { --dot: var(--color-accent-700); color: var(--color-text); }
.manage .status-dot.warn { --dot: var(--color-process-yellow); color: var(--color-text); font-weight: 600; }
.manage .status-dot.danger { --dot: var(--color-accent-2-700); color: var(--color-accent-2-700); font-weight: 600; }
.manage .due-cell { display: inline-block; text-align: right; }
.manage .due-cell.danger b, .manage .due-cell.warn b { color: var(--color-accent-2-700); }
.manage .due-cell .done { color: var(--color-neutral-600); }
.manage .pill, .manage .badge { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 13px; border: 1px solid var(--color-divider); }
.manage .pill.warn, .manage .badge.warn, .manage .pill.danger, .manage .badge.danger { color: var(--color-accent-2-700); border-color: var(--color-accent-2-300); }
.manage .empty { padding: 24px 0; color: var(--color-neutral-600); }
.manage .add-fold { margin-top: 0; }
.manage .add-fold > summary { cursor: pointer; list-style: none; font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--color-neutral-700); }
.manage .add-fold > summary::-webkit-details-marker { display: none; }
.manage .add-fold > summary:hover, .manage .add-fold[open] > summary { color: var(--color-text); }
.manage .add-fold[open] { padding-bottom: 8px; }
.manage .card { margin-top: 20px; }
.manage .card h1 { font-size: 28px; line-height: 34px; }
.manage .notice-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; padding: 12px 16px; border-left: 3px solid var(--color-process-yellow); background: color-mix(in srgb, var(--color-process-yellow) 10%, transparent); }
.manage .notice-bar .text { font-size: 15px; line-height: 22px; }
.manage .notice-bar .muted { margin: 0; }
.manage .form-grid.cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; }
.wrap .manage table .body-preview { display: block; max-height: 60px; overflow: hidden; font-size: 13.5px; line-height: 20px; color: var(--color-neutral-600); white-space: pre-line; }
.manage .inline-link { font-size: 15px; }
/* A row just added, saved or brought back, lit once as it is scrolled to. */
@keyframes manageRowAdded {
  from { background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
  to   { background: transparent; }
}
.manage .row-added > td { animation: manageRowAdded 1.8s ease-out 1; }
.manage #requestDetail { border-top: 1px solid var(--color-divider); padding-top: 20px; }
.manage #requestDetail .row { display: flex; align-items: baseline; justify-content: space-between; }
.manage #rdTitle { font-family: var(--font-heading); font-size: 24px; }
.manage .checklist { border: 1px solid var(--color-control-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.manage .checklist-search { border: 0; border-bottom: 1px solid var(--color-divider); border-radius: 0; }
.manage .checklist-list { max-height: 190px; overflow-y: auto; padding: 4px 8px; }
.manage .checklist-item { display: flex; gap: 10px; align-items: flex-start; padding: 6px 4px; margin: 0; font-size: 15px; line-height: 22px; color: var(--color-text); cursor: pointer; }
.manage .checklist-item input { margin-top: 5px; }
.manage .checklist-item-hint { display: block; font-size: 13px; color: var(--color-neutral-600); }
.manage .checklist-empty { padding: 10px; }
.manage label { margin-top: 14px; }
.manage label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 22px; color: var(--color-text); }
/* The seven working-day boxes on Hours and closed days: one wrapping row with
   no frame, as fluent.css draws them on the admin page, the legend in the
   look of the console's other field labels. */
.manage fieldset.cal-days { display: flex; flex-wrap: wrap; gap: 6px 22px; border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
.manage fieldset.cal-days legend { padding: 0; margin-bottom: 8px; font-size: 13px; line-height: 18px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.manage fieldset.cal-days label { margin: 0; }
.manage .btn-row { margin-top: 16px; }

/* The drop zone the admin panel's Verification tab draws (adminpanel.js),
   for the console, which mounts the panel on this sheet. */
.drop-zone {
  border: 1.5px dashed var(--rule, #b8b8b8); border-radius: 6px; padding: 22px; text-align: center;
  cursor: pointer; background: transparent;
}
.drop-zone:hover, .drop-zone.drag-over { border-color: var(--accent, #0b7285); }
.drop-zone:focus-within { border-color: var(--accent, #0b7285); outline: 2px solid var(--accent, #0b7285); outline-offset: 2px; }
.drop-zone p { margin: 2px 0; }

/* The page could not reach the server (requireLogin in public/js/api.js).
   The twin of the bar in fluent.css, in this sheet's own ink. */
.unreachable {
  position: fixed; top: 0; left: 0; right: 0; z-index: 950;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 10px clamp(14px, 3vw, 28px);
  background: var(--color-surface); color: var(--color-text);
  border-bottom: 1px solid var(--color-text);
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.4; text-align: center;
}
.unreachable p { margin: 0; }

/* A reduced motion preference, which this sheet had no answer to at all.
   The working pages honour it in fluent.css; these are the front door, and
   the spinner and the toast are what moves here.
   docs/accessibility-audit.md tracks both. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  /* The spinner carried its meaning in the turning, so standing still it
     keeps the accent edge that says which part of it is the head. */
  .spinner { border-top-color: var(--color-accent); }
  .toast { opacity: 1; transform: none; }
}

/* ---- Print ----
   A blog post and a help article are read on paper too. The furniture goes
   and the type is black on white; the page's own styles do the rest. */
@media print {
  html, body { background: #FFFFFF; color: #000000; }
  .nav, .demo-banner, .unreachable, .toast-host, .skip, .btn, .button, button { display: none !important; }
  a[href] { color: #000000; text-decoration: underline; }
  h1, h2, h3, .h2, .h3 { break-after: avoid; page-break-after: avoid; }
  p, li, blockquote, .callout, .note { break-inside: avoid; page-break-inside: avoid; }
}

/* ---- Phones -------------------------------------------------------------
   The working pages stack their lists below 560px (fluent.css), and the
   console draws the same lists on this sheet, so the same rules live here:
   each row becomes one block, the column headings go, and a cell that would
   lose its meaning without them prints its data-label first ("Plan: Free").
   The console's own lists, the agency list and the post list among them,
   carry stack-on-phone too, so these are not scoped to the panel.

   The tab bars wrapped into four or five rows. Each group now takes a row of
   its own, headed by its name, and a tab's underline sits under its own
   words rather than floating where the bar's rule is not. */
@media (max-width: 560px) {
  .table-card.stack-on-phone table, .table-card.stack-on-phone tbody,
  .table-card.stack-on-phone tr, .table-card.stack-on-phone td { display: block; }
  .table-card.stack-on-phone thead { display: none; }
  .table-card.stack-on-phone tr { position: relative; padding: 12px 0; border-bottom: 1px solid var(--color-divider); }
  .table-card.stack-on-phone tbody tr:last-child { border-bottom: 0; }
  .table-card.stack-on-phone td { padding: 2px 0; border: 0; text-align: left; width: auto; }
  /* A block reads from the left, whatever the column did: the figure and the
     row's last cell were set to the right for a table that is no longer one. */
  .wrap .table-card.stack-on-phone td:last-child { text-align: left; }
  .manage .table-card.stack-on-phone td.num { text-align: left; }
  .manage .table-card.stack-on-phone .due-cell { text-align: left; }
  .table-card.stack-on-phone td.edge { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; padding: 0; }
  .table-card.stack-on-phone td.menu-cell { position: absolute; right: 0; top: 8px; }
  .table-card.stack-on-phone td.cb-col { position: absolute; left: 0; top: 14px; }
  .table-card.stack-on-phone.with-cb tr { padding-left: 30px; }
  .table-card.stack-on-phone td[data-label] { --cell-label: inline; }
  .table-card.stack-on-phone td[data-label]:empty { display: none; }
  /* A cell held on one line has a whole line to itself in a block, so
     holding it can only push the card sideways. */
  .manage .table-card.stack-on-phone .desc-cell { max-width: none; white-space: normal; overflow: visible; }
  .table-card.stack-on-phone td.nowrap { white-space: normal; overflow-wrap: anywhere; }
  .manage .page-head .search { width: 100%; }
  .tabs { padding-bottom: 6px; }
  .tabs > button, .tabs .tab, .tabs .tab-group > button { margin-bottom: 0; padding-bottom: 4px; }
  .tabs .tab-group { flex: 1 0 100%; flex-wrap: wrap; gap: 2px 20px; }
  /* The label pulls the first tab of its group back towards it on a wide
     row (margin-right: -14px above, half the group's gap). On its own row it
     has nothing to pull, and the pull made the label's box 14px wider than
     the bar it sits in, so it goes. */
  .tabs .tabs-group-label { flex: 1 0 100%; margin-right: 0; }
}