/* Shares its palette and token names with CIS-Cyber-Maturity-Assessment.html (src/part1.html)
   and the sibling GTCC Governance Center tool, so the auth portal reads as the same product
   family rather than a bolted-on, visually unrelated login page. */
/* ── Design tokens ────────────────────────────────────────────────────────────
   Every page loads this file, so this block is the whole system's vocabulary.

   The legacy names (--navy, --orange, --text-3 …) are kept and aliased onto the
   scale below rather than renamed: --navy alone has 20 call sites across five
   stylesheets, and a rename is a silent breakage on pages nobody reloads during
   the change.

   NO WEBFONT IS REACHABLE. The CSP is default-src 'none' with no font-src, so
   @font-face — including a data: URI — is blocked. --font is a system stack by
   necessity, not preference, and --font-display is defined here rather than
   left dangling so nobody fills that gap with a font that silently never loads.
*/
:root{
  /* Brand */
  --brand-700:#0E2841; --brand-600:#123F70; --brand-500:#16508F; --brand-400:#3E86CE;
  --brand-300:#7FB3E8; --brand-200:#A8CBEA; --brand-100:#D8E8F7; --brand-50:#EEF5FC;
  --accent:#FBAE40; --accent-600:#B87A15; --accent-100:#FDF0DA;

  /* Neutrals, biased toward the brand navy — flat grey beside a navy header
     always reads slightly dirty. */
  --n-0:#FFFFFF;  --n-25:#F8FAFC; --n-50:#F2F6FA;  --n-100:#E8EEF5;
  --n-200:#D6E0EB; --n-300:#B9C7D8; --n-400:#8E9FB5; --n-450:#7C8EA6;
  --n-500:#5C6E85; --n-600:#516378; --n-700:#3C4C60; --n-800:#28374A; --n-900:#182838;

  /* Legacy aliases — the names the existing rules already use. */
  --navy:var(--brand-500); --navy-dark:var(--brand-700); --navy-hdr:#145890;
  --brand-fg:var(--brand-500);   /* brand as TEXT — inverts in dark */
  --orange:var(--accent);
  --bg:var(--n-50); --surface:var(--n-0); --surface-2:var(--n-100);
  --border:var(--n-200);
  --border-strong:var(--n-450);   /* was dangling: why SSVC Track and Track* look alike */
  --text:var(--n-900); --text-2:var(--n-600);
  --text-3:var(--n-500);          /* muted text is still text: 4.76:1, not a pale grey */
  --red:#B3261E; --green:#1F7A4D;
  /* A FILLED destructive control. Separate from --red because --red inverts
     to a light tint in dark mode for use as text, and a fill cannot follow it
     without turning white button labels to 2.19:1. */
  --danger-solid:#B3261E; --danger-solid-hover:#8E1E17;

  /* Foreground on the navy chrome */
  --on-brand:#FFFFFF; --on-brand-2:rgba(255,255,255,.72);
  --on-brand-line:rgba(255,255,255,.28); --on-brand-fill:rgba(255,255,255,.12);

  /* Semantic status */
  --ok:#1F7A4D;     --ok-bg:#E8F5EE;   --ok-line:#B7DEC8;
  --warn:#8A5A00;   --warn-bg:#FDF3E0; --warn-line:#E8CB92;
  --danger:#B3261E; --danger-bg:#FCEDEC; --danger-line:#EEB4B0;
  --info:var(--brand-500); --info-bg:var(--brand-50); --info-line:var(--brand-200);

  /* Type */
  --font: ui-sans-serif, -apple-system, "Segoe UI Variable Text", "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --t-11:11px; --t-12:12px; --t-13:13px; --t-14:14px; --t-15:15px;
  --t-16:16px; --t-18:18px; --t-20:20px; --t-24:24px; --t-30:30px; --t-36:36px;
  --lh-tight:1.25; --lh-snug:1.4; --lh-body:1.6;
  --tracking-caps:.08em;

  /* Space — 4px base */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;

  /* Radius, border width */
  --r-sm:6px; --r:8px; --r-lg:12px; --r-xl:16px; --r-full:999px;
  --bw:1px; --bw-2:2px;

  /* Controls — 44px is the minimum comfortable target, not a suggestion. */
  --control-h:40px; --control-h-sm:32px; --tap-min:44px;
  --icon:18px; --icon-sm:15px; --icon-lg:22px;

  /* Focus — one ring, used everywhere, legible on light, dark and navy. */
  --focus-ring:var(--brand-400);
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring);
  --focus-on-brand: 0 0 0 2px var(--brand-700), 0 0 0 4px var(--accent);

  /* Elevation */
  --e-1:0 1px 2px rgba(14,40,65,.06), 0 1px 3px rgba(14,40,65,.05);
  --e-2:0 2px 4px rgba(14,40,65,.06), 0 6px 16px rgba(14,40,65,.08);
  --e-3:0 8px 24px rgba(14,40,65,.10), 0 16px 48px rgba(14,40,65,.10);
  --shadow:var(--e-1);
  --scrim:rgba(14,40,65,.45);

  /* Layout */
  --container:1100px; --container-narrow:820px; --measure:68ch; --card-max:420px;
  --table-cell-y:10px; --table-cell-x:12px;

  /* Motion */
  --dur-fast:120ms; --dur:180ms; --dur-slow:260ms;
  --ease:cubic-bezier(.2,.6,.3,1);

  --z-sticky:10; --z-dialog:100; --z-toast:200;
}

/* ── Dark ─────────────────────────────────────────────────────────────────────
   The previous dark block redefined eight tokens and left --navy, --navy-hdr,
   --orange, --red and --green at their light values. --navy is used as a
   FOREGROUND in twenty-one places (card headings, ghost and link buttons, the
   countdown, CVE ids, hover borders) and as a fill in only two, so at #16508F on
   a #10233B surface most of the product was ~1.9:1 — present, and unreadable.

   So --navy inverts to a light tint here, and the two fill sites are overridden
   below rather than the other twenty-one being left broken. */
[data-theme="dark"]{
  --n-0:#0B1725;
  --bg:#0B1725; --surface:#11253C; --surface-2:#1A3350;
  --border:#274563; --border-strong:#4E779C;
  --text:#E8EFF7; --text-2:#A8BCD3; --text-3:#8195AE;

  --navy:var(--brand-300); --navy-dark:#0B1725; --navy-hdr:#1B3A57;
  --brand-fg:var(--brand-300);
  --orange:#FBAE40;
  --red:#FF8F8F; --green:#7FE09A;
  --danger-solid:#C43A31; --danger-solid-hover:#BE4038;

  --brand-50:#12293F; --brand-100:#1B3A57; --brand-200:#2B5580;

  --ok:#7FE09A;   --ok-bg:#0F2B1E;   --ok-line:#1E5C31;
  --warn:#FFC061; --warn-bg:#3A2600; --warn-line:#8A5A00;
  --danger:#FF8F8F; --danger-bg:#3D0000; --danger-line:#7A1414;
  --info:var(--brand-300); --info-bg:#12293F; --info-line:#2B5580;

  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-300);
  --e-1:0 1px 2px rgba(0,0,0,.4);
  --e-2:0 2px 6px rgba(0,0,0,.45), 0 8px 20px rgba(0,0,0,.35);
  --e-3:0 12px 32px rgba(0,0,0,.5);
  --shadow:var(--e-1);
  --scrim:rgba(0,0,0,.6);
}

/* The two places --navy was a FILL rather than a foreground — the primary
   button and the active tab — now name --brand-500 directly, so the inversion
   above cannot turn them into light blocks with white text on them.
*/

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}
*{box-sizing:border-box}
body{margin:0;font-family:Calibri,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column}
.topbar{background:var(--navy-dark);color:var(--on-brand);
  padding:var(--s-3) var(--s-6);display:flex;align-items:center;gap:var(--s-3);
  flex-wrap:wrap;row-gap:var(--s-2)}
.topbar h1{min-width:0}
.topbar h1{font-size:16px;margin:0;font-weight:800;letter-spacing:.2px}
.topbar .tag{font-size:var(--t-11);color:var(--orange);font-weight:700;letter-spacing:var(--tracking-caps);text-transform:uppercase;min-width:0}
.spacer{flex:1}
.themebtn{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:var(--tap-min);height:var(--tap-min);padding:0;
  background:var(--on-brand-fill);border:var(--bw) solid var(--on-brand-line);color:var(--on-brand);
  border-radius:var(--r);cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.themebtn:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.45)}
.themebtn:focus-visible{outline:none;box-shadow:var(--focus-on-brand)}
.themebtn svg{width:var(--icon);height:var(--icon);display:block}

main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:32px 16px}
.brand-logo-hero{height:56px;width:auto;padding:10px 18px;border-radius:12px}
/* The logo's own wordmark is navy-on-transparent — legible on a light page, but
   reads as low-contrast navy-on-navy once the page switches to dark mode. Giving
   it a light plate in dark mode (rather than shipping a second logo asset) keeps
   it legible under both themes without depending on a dark-mode-specific file. */
[data-theme="dark"] .brand-logo-hero{background:#fff}
.card{background:var(--surface);border:var(--bw) solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--e-1);width:100%;padding:var(--s-6)}

/* The narrow, centred shell the sign-in flow lives in. */
.card.auth-card{max-width:var(--card-max);padding:var(--s-8) var(--s-6)}
.card h2{margin:0 0 4px;font-size:20px;color:var(--navy);font-weight:800}
.card p.lead{margin:0 0 22px;color:var(--text-2);font-size:13.5px}

.tabs{display:flex;gap:6px;margin-bottom:22px}
.tabs button{flex:1;padding:9px 0;border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);border-radius:8px;font-weight:700;font-size:13px;cursor:pointer}
.tabs button.active{background:var(--brand-500);border-color:var(--brand-500);color:#fff}

.fld{display:block;font-size:12.5px;font-weight:700;color:var(--text-2);margin:14px 0 6px}
/* ── Form controls ────────────────────────────────────────────────────────────
   One rule for every control. auth.css styled only input[type=text] and
   input[type=email], so admin.css had to restate it for textarea, select and
   file — with a comment recording that those three had been rendering as raw
   browser defaults — and gtia.css restated it again for search. Four copies of
   one idea, drifting apart at 1.5px/8px/10px/12.5px.

   The border is --border-strong rather than --border: a control's edge is what
   tells you it is a control, and WCAG 1.4.11 asks 3:1 of it. --border is for
   dividers, which carry nothing. */
input[type=text],input[type=email],input[type=number],input[type=date],
input[type=search],input[type=password],input[type=url],select,textarea{
  width:100%;min-height:var(--control-h);padding:var(--s-2) var(--s-3);
  border:var(--bw) solid var(--border-strong);border-radius:var(--r);
  background:var(--surface);color:var(--text);
  font-family:inherit;font-size:var(--t-14);line-height:var(--lh-snug)}
textarea{resize:vertical;min-height:calc(var(--control-h) * 2)}
input[type=file]{width:100%;padding:var(--s-2) var(--s-3);
  border:var(--bw) dashed var(--border-strong);border-radius:var(--r);
  background:var(--surface);color:var(--text);font-family:inherit;font-size:var(--t-13)}
input::placeholder,textarea::placeholder{color:var(--text-3)}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-2);cursor:not-allowed}

/* The error state the product has never had. */
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{
  border-color:var(--danger)}
.field-error{display:block;margin-top:var(--s-1);font-size:var(--t-12);color:var(--danger)}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;box-shadow:var(--focus);border-color:var(--brand-fg)}

/* ── Buttons ──────────────────────────────────────────────────────────────────
   .btn is unopinionated: it sets no width and no margin.

   It used to BE the login form's submit — width:100%, margin-top:20px — so every
   other surface had to undo it. admin.css alone carried six
   `width:auto;margin-top:0` overrides, and the instances nobody remembered to
   override simply stretched. Dropped into a flex .topbar it filled the whole bar
   and dropped out of line, which is the box that started this work; .ghost then
   painted a navy border on the navy bar, measured at 1.84:1.

   Full width is opt-in via .btn.block, for the login card, where the buttons
   really are a stacked column in a 420px shell. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:var(--tap-min);padding:0 var(--s-4);
  font:inherit;font-size:var(--t-14);font-weight:700;line-height:1;
  background:var(--brand-500);color:#fff;border:var(--bw) solid transparent;
  border-radius:var(--r);cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn:hover{background:var(--brand-600)}
.btn:focus-visible{outline:none;box-shadow:var(--focus)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.btn svg{width:var(--icon);height:var(--icon);flex:none}

.btn.block{width:100%;margin-top:var(--s-5)}
.btn.sm{min-height:var(--control-h-sm);padding:0 var(--s-3);font-size:var(--t-12)}

.btn.ghost{background:transparent;color:var(--brand-fg);border-color:var(--border-strong)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--brand-fg)}

/* On the navy chrome. The old ghost used the brand colour for both text and
   border, which on the brand-coloured bar is the same colour twice. */
.btn.on-brand{background:var(--on-brand-fill);color:var(--on-brand);border-color:var(--on-brand-line)}
.btn.on-brand:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.45)}
.btn.on-brand:focus-visible{box-shadow:var(--focus-on-brand)}

/* Looks like a link, still has a real target — this was a ~15px tap area. */
.btn.link{min-height:var(--tap-min);padding:0;background:none;border:none;
  color:var(--brand-fg);font-weight:700;font-size:var(--t-13);
  text-decoration:underline;white-space:normal}
.btn.link:hover{background:none;color:var(--brand-fg);text-decoration-thickness:2px}

.btn.danger{background:var(--danger-solid);color:#fff}
.btn.danger:hover{background:var(--danger-solid-hover)}

.btn-spaced{margin-top:var(--s-2)}

/* The swappable label inside a button. withLoading() replaces the text of this
   node rather than the button's contents, so an icon beside it survives. */
.btn-label{display:inline-block}
.btn[aria-busy="true"]{cursor:progress}

.note{font-size:11.5px;color:var(--text-3);margin-top:16px;line-height:1.5}
.banner{padding:11px 13px;border-radius:8px;font-size:12.5px;margin-bottom:16px;line-height:1.5}
.banner.info{background:#eef4fb;color:#0E2841;border:1px solid #b9d0ea}
[data-theme="dark"] .banner.info{background:#122a44;color:#cfe0f2;border-color:#1f3f61}
.banner.error{background:#fdf0f0;color:#7a1414;border:1px solid #f0b9b9}
[data-theme="dark"] .banner.error{background:#3a1414;color:#f0b9b9;border-color:#5a2020}
.banner.ok{background:#e9f3e4;color:#2f5121;border:1px solid #bcd9ac}
[data-theme="dark"] .banner.ok{background:#173a12;color:#bcd9ac;border-color:#2c521f}

.otp-row{display:flex;gap:8px;justify-content:center;margin:18px 0 6px}
.otp-row input{width:44px;height:52px;text-align:center;font-size:22px;font-weight:800;padding:0}
.otp-meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-3);margin-top:6px}
.countdown{font-weight:700;color:var(--navy)}
.countdown.expiring{color:var(--red)}

.checkbox-fld{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2);margin-top:16px;cursor:pointer}
.checkbox-fld input{width:auto;margin:0}

.hidden{display:none !important}

.status-card .who{font-size:14px;color:var(--text);margin-bottom:2px}
.status-card .email{font-size:12.5px;color:var(--text-2);margin-bottom:18px}

footer{padding:16px;text-align:center;font-size:11px;color:var(--text-3)}
.suite-version{display:inline-block;margin-top:4px;font-size:10.5px;opacity:.75}

.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:16px}
.tool-card{display:block;padding:20px;border-radius:10px;border:1px solid var(--border);text-decoration:none;color:inherit;font-weight:600;text-align:center}
.tool-card:hover{border-color:var(--navy)}

.vendor-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border, #dde); }
.vendor-row-main { display: flex; flex-direction: column; flex: 1; }
.vendor-rating { font-size: 12px; opacity: 0.8; }
.vendor-row-services { flex: 1; font-size: 13px; opacity: 0.8; }
.vendor-ratings-list, .vendor-edits-list { list-style: none; padding: 0; margin: 8px 0; }
.vendor-ratings-list li, .vendor-edits-list li { padding: 6px 0; border-bottom: 1px solid var(--border, #dde); }
.vendor-rating-meta { font-size: 12px; opacity: 0.7; }

.content-item { padding: 16px 0; border-bottom: 1px solid var(--border, #dde); }
.content-item-header { display: flex; align-items: center; gap: 8px; }
.content-item-severity { font-size: 11px; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; background: var(--border, #eee); }
.content-item-meta { font-size: 12px; opacity: 0.7; margin: 4px 0; }
.severity-critical .content-item-severity { background: #fdd; color: #900; }
.severity-advisory .content-item-severity { background: #ffe8b8; color: #8a5a00; }

/* ── Responsive chrome ────────────────────────────────────────────────────────
   Below this width the labelled top-bar controls become icon-only. The label is
   CLIPPED rather than removed: display:none would take the accessible name with
   it and leave a screen-reader user with an unnamed link. A title carries the
   same words to a pointer. */
@media (max-width: 560px){
  .topbar{padding:var(--s-3) var(--s-4)}
  .topbar .tag{flex:1 1 100%;order:3}
  /* min-height too. .btn.sm sets 32px and ties with .btn.on-brand on
     specificity, so setting only width gave a 44x32 control — wider, and still
     short of a comfortable target in the dimension that matters on a phone. */
  .btn.on-brand{padding:0;width:var(--tap-min);min-width:var(--tap-min);
    min-height:var(--tap-min)}
  .btn.on-brand span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}

/* ── Badges ───────────────────────────────────────────────────────────────────
   One component with semantic tones, replacing the five hardcoded .pill.STATE
   rules in admin.css — which were light literals with no dark values, so they
   stayed pale blocks on a dark page once dark mode actually ran. The tone is
   chosen by labels.js from the stored value, not by pasting the value into a
   class name, so an unrecognised state gets the neutral tone instead of no
   styling at all. */
.badge{display:inline-flex;align-items:center;gap:var(--s-1);
  padding:2px var(--s-2);border-radius:var(--r-full);
  font-size:var(--t-11);font-weight:700;line-height:1.5;white-space:nowrap;
  border:var(--bw) solid transparent}
.badge.neutral{background:var(--surface-2);color:var(--text-2);border-color:var(--border)}
.badge.info{background:var(--info-bg);color:var(--info);border-color:var(--info-line)}
.badge.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.badge.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.badge.danger{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}
.badge.brand{background:var(--brand-50);color:var(--brand-fg);border-color:var(--brand-200)}

/* ── Tables ───────────────────────────────────────────────────────────────────
   These lived in admin.css, so roadmap.html — which loads only auth.css and has
   a four-column table — rendered it with raw browser defaults: no padding, no
   rules, a serif-ish stack and 16px text.

   .table-wrap is load-bearing, not decoration. A bare width:100% table will not
   shrink its columns below their content's minimum, so on a narrow viewport the
   table forces the whole PAGE wider rather than scrolling itself. The wrapper is
   also focusable, because a region that scrolls has to be reachable without a
   pointer. */
.table-wrap{overflow-x:auto}
.table-wrap:focus-visible{outline:none;box-shadow:var(--focus)}
table{width:100%;border-collapse:collapse;font-size:var(--t-13);margin-top:var(--s-3)}
caption{text-align:left;font-size:var(--t-12);color:var(--text-2);padding-bottom:var(--s-2)}
th,td{text-align:left;padding:var(--table-cell-y) var(--table-cell-x);
  border-bottom:var(--bw) solid var(--border);vertical-align:top}
th{color:var(--text-2);font-size:var(--t-11);text-transform:uppercase;
  letter-spacing:var(--tracking-caps);font-weight:700;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--surface-2)}

/* ── Dialogs ──────────────────────────────────────────────────────────────────
   A <dialog> without an explicit background is painted by the UA with
   `background-color:Canvas`, and Canvas does not follow data-theme — so both
   confirm dialogs stayed white with dark text on a dark page. color-scheme also
   has to be declared, or the UA keeps picking light system colours for the
   backdrop and any unstyled control inside. */
dialog{color-scheme:light dark;background:var(--surface);color:var(--text);
  border:var(--bw) solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--e-3);padding:var(--s-6);max-width:min(420px,calc(100vw - var(--s-8)))}
dialog::backdrop{background:var(--scrim)}
dialog p{margin:0 0 var(--s-4)}
.dialog-actions,.confirm-actions{display:flex;justify-content:flex-end;gap:var(--s-2);flex-wrap:wrap}

/* ── Forced colours (Windows High Contrast) ───────────────────────────────────
   In forced-colors mode the UA replaces backgrounds and borders with system
   colours, and a control whose only edge is `border:1px solid transparent`
   loses its outline entirely — every .btn on all nine pages. ButtonBorder is
   the system keyword for exactly this, and the focus ring has to be redrawn in
   outline, since box-shadow is discarded. */
@media (forced-colors: active){
  .btn,.iconbtn,.themebtn,.badge,.pill,input,select,textarea,.table-wrap,dialog{
    border:1px solid ButtonBorder}
  .btn:focus-visible,.iconbtn:focus-visible,.themebtn:focus-visible,
  input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:3px solid Highlight;outline-offset:2px;box-shadow:none}
  .btn svg,.iconbtn svg,.themebtn svg{forced-color-adjust:auto}
}

/* ── Truncation and missing values ────────────────────────────────────────────
   Nine endpoints return a `truncated` flag and one client read it, so a platform
   admin looking at "the users" was looking at some of the users with nothing on
   screen to say so. */
.truncation-notice{margin:var(--s-3) 0 0;padding:var(--s-2) var(--s-3);
  border-radius:var(--r);background:var(--info-bg);color:var(--info);
  border:var(--bw) solid var(--info-line);font-size:var(--t-12);font-weight:600}

/* A bare em dash reads as "nothing here". This reads as "never recorded",
   which is what it means. */
.not-recorded{color:var(--text-3);font-style:italic}

/* ── Reason dialog ────────────────────────────────────────────────────────────
   Replaces two window.prompt calls that carried the most consequential text in
   the product: the single-signature justification a member reads on the
   advisory, and the reason a withdrawal gives for having been wrong. */
.reason-dialog{max-width:min(520px,calc(100vw - var(--s-8)))}
.reason-dialog h2{margin:0 0 var(--s-2);font-size:var(--t-18);color:var(--text)}
.reason-dialog p{color:var(--text-2);font-size:var(--t-13)}
.reason-dialog .fld{display:block;margin-bottom:var(--s-1);
  font-size:var(--t-12);font-weight:700;color:var(--text-2)}
.reason-dialog textarea{margin-bottom:var(--s-2)}
.reason-dialog .dialog-actions{margin-top:var(--s-4)}