/* Patrol Ready — Agency Readiness OS
   Design system: Patrol Brief light register (leadership-facing B2B).
   Tokens aligned to the Patrol Brief website handoff; dashboard patterns
   follow F-pattern hierarchy, KPI-first summary, scannable tables,
   skeleton loading, honest contextual indicators, and WCAG AA contrast. */

:root {
  /* Brand — Patrol Brief */
  --navy: #122345;
  --navy-deep: #0d1a31;
  --navy-2: #16294f;
  --navy-3: #1c355f;
  --gold: #fee780;
  --gold-deep: #c9a227;
  --sky: #17ade8;
  --link: #0f7fae;
  --link-body: #0f6f98;

  /* Surfaces */
  --bg: #f4f7fc;
  --panel: #ffffff;
  --surface: #f6f9fd;
  --surface-2: #eef3fa;
  --ink: #1b2430;
  --ink-2: #2c3949;
  --muted: #5d6878;
  --faint: #8b95a4;
  --line: #e2e8f1;
  --line-strong: #d3dced;
  --brand-primary: #122345;
  --brand-primary-text: #ffffff;
  --brand-text: #ffffff;
  --on-foreground: #ffffff;

  /* Semantic */
  --good: #1f9d55;
  --good-ink: #146c3b;
  --good-fill: rgba(31, 157, 85, .12);
  --warn: #b7791f;
  --warn-ink: #8a5a12;
  --warn-fill: rgba(183, 121, 31, .13);
  --bad: #c0392b;
  --bad-ink: #99271b;
  --bad-fill: rgba(192, 57, 43, .1);
  --info-fill: rgba(15, 127, 174, .1);

  /* Module signature accents */
  --m-dashboard: #0f7fae;
  --m-field: #3b7af5;
  --m-reviews: #b02a37;
  --m-policies: #22a855;
  --m-policymod: #099268;
  --m-documents: #0e9aa7;
  --m-standards: #c9a227;
  --m-peerbench: #5f3dc4;
  --m-training: #7c3aed;
  --m-deptevents: #0ea5e9;
  --m-readiness: #e8590c;
  --m-identity: #4f5bd5;
  --m-cmdintel: #b8860b;
  --m-copilot: #6741d9;
  --m-invest: #364fc7;
  --m-clery: #2b8a3e;
  --m-assistant: #0ca678;

  /* Scale */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --shadow-sm: 0 1px 2px rgba(18, 35, 69, .06);
  --shadow-md: 0 4px 16px rgba(18, 35, 69, .07), 0 1px 2px rgba(18, 35, 69, .05);
  --shadow-lg: 0 18px 48px rgba(18, 35, 69, .14);
  --ring: 0 0 0 3px rgba(15, 127, 174, .28);
  --sidebar-w: 256px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--link-body); }
svg { flex: none; }
.icon { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; display: block; }
.icon-sm { width: 15px; height: 15px; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
.boot { padding: 40px; color: var(--muted); }

/* ---------- Boot loading screen ---------- */
#bootScreen {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1100px 640px at 50% 40%, var(--navy-2), var(--navy-deep));
  perspective: 900px;
  transition: opacity .55s ease;
}
#bootScreen.done { opacity: 0; pointer-events: none; }
.boot-stage { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.boot-flipper {
  position: relative; width: 220px; height: 220px;
  transform-style: preserve-3d;
  animation: bootSway 3.4s ease-in-out infinite;
  transition: transform .9s cubic-bezier(.45, -.05, .3, 1.15);
}
@keyframes bootSway {
  0%, 100% { transform: rotateY(-16deg) rotateX(5deg); }
  50%      { transform: rotateY(16deg) rotateX(-4deg); }
}
.boot-flipper.flipped { animation: none; transform: rotateY(180deg); }
.boot-flipper.expanded { transform: rotateY(180deg) scale(2.4); transition: transform .65s ease-in; }
.boot-face {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.boot-front .boot-shield {
  width: 118px;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .5));
}
.boot-ring { position: absolute; inset: 0; animation: bootSpin 1.15s linear infinite; }
@keyframes bootSpin { to { transform: rotate(360deg); } }
.boot-back { transform: rotateY(180deg); }
/* Same lockup as pb-logo.jpg (1028x586 @ .307): jpg's shield, wordmark re-set as READY */
.boot-logo-card {
  position: relative; height: 180px; flex: none;
  display: flex; align-items: center;
  background: #132345; border-radius: 14px; overflow: hidden;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .55);
}
.boot-logo-shield { position: absolute; left: 0; top: 0; height: 100%; }
.boot-logo-word {
  position: relative; margin: 0 24px 0 101px;
  color: #fff; font-weight: 800; font-size: 34px; line-height: 1.18;
  letter-spacing: .04em;
}
.boot-caption {
  color: var(--gold); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; opacity: .85;
  transition: opacity .3s ease;
}
#bootScreen.flipping .boot-caption { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .boot-flipper, .boot-ring { animation: none; }
  .boot-flipper.flipped, .boot-flipper.expanded { transition: none; }
}
.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; }

/* ---------- Shell ---------- */
.shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-w) 1fr; }

/* ---------- Sidebar ---------- */
.side {
  background: linear-gradient(185deg, var(--navy-2) 0%, var(--navy) 46%, var(--navy-deep) 100%);
  color: #fff;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  border-right: 1px solid rgba(0, 0, 0, .2);
}
.brand { display: flex; align-items: center; gap: 11px; padding: 0 6px 2px; }
.brand-logo { height: 40px; width: auto; max-width: 118px; display: block; border-radius: 7px; }
.brand strong { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.brand span { display: block; color: #a9bdd8; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; margin-top: 3px; }
.mark { display: grid; place-items: center; }

.nav-rail { display: flex; flex: 1; min-width: 0; min-height: 0; }
.nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; min-width: 0; margin: 0 -6px; padding: 0 6px; }
.nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.nav::-webkit-scrollbar { width: 6px; height: 6px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 999px; }
.nav-rail-control { display: none; }
.nav-group { color: #7f93b3; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; padding: 14px 10px 5px; }
.nav-group:first-child { padding-top: 2px; }
.nav button {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: var(--r-sm);
  padding: 9px 10px;
  background: transparent;
  color: #dbe6f5;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  transition: background .15s ease, color .15s ease;
}
.nav button .n-tile {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; flex: none;
  background: linear-gradient(140deg, color-mix(in srgb, var(--tile, #46608a) 88%, #fff) 0%, var(--tile, rgba(255, 255, 255, .1)) 45%, color-mix(in srgb, var(--tile, #46608a) 72%, #0d1a31) 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 1px 3px rgba(0, 0, 0, .28);
}
.nav button .n-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav button:hover:not(:disabled) { background: rgba(255, 255, 255, .09); color: #fff; }
.nav button.active { background: rgba(255, 255, 255, .13); color: #fff; }
.nav button.active::before {
  content: ""; position: absolute; left: -6px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--gold);
}
.nav button:disabled { opacity: .48; cursor: not-allowed; }
.nav .lock { color: #92a4c2; }
.nav .lock .icon { width: 13px; height: 13px; }

.side-foot { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: var(--sp-3); display: grid; gap: 8px; }
.env-chip {
  display: inline-flex; align-items: center; gap: 7px; align-self: start;
  background: rgba(254, 231, 128, .14); color: var(--gold);
  border: 1px solid rgba(254, 231, 128, .3);
  border-radius: var(--r-pill); padding: 4px 10px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
}
.side-foot .tenant { color: #a9bdd8; font-size: 12px; padding: 0 4px; }
.side-foot .tenant b { color: #fff; font-weight: 700; }

/* ---------- Main ---------- */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 12;
  display: flex; gap: var(--sp-4); justify-content: space-between; align-items: center;
  padding: 16px 28px;
  background: rgba(244, 247, 252, .82);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar h1 { color: var(--navy); font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
.topbar .sub { color: var(--muted); margin: 3px 0 0; font-size: 13.5px; max-width: 64ch; }
.top-right { display: flex; align-items: center; gap: var(--sp-4); }
.freshness { display: inline-flex; align-items: center; gap: 6px; color: var(--faint); font-size: 12px; font-weight: 600; white-space: nowrap; }
.freshness .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-fill); }
.user-chip { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff;
  background: linear-gradient(135deg, var(--navy-3), var(--navy)); box-shadow: var(--shadow-sm);
}
.user-meta { line-height: 1.25; text-align: right; }
.user-meta b { display: block; color: var(--ink); font-size: 13px; font-weight: 700; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta span { display: block; color: var(--faint); font-size: 11px; }

.module-stage { position: relative; flex: 1; min-width: 0; }
.content { padding: 24px 28px 40px; width: 100%; max-width: 1220px; }
.module-loading-overlay {
  position: absolute; inset: 0; z-index: 10;
  padding: 24px 28px 40px;
  background: var(--bg);
}
.module-loading-overlay[hidden] { display: none; }
.module-loading-overlay .resource-loader { width: 100%; max-width: 1164px; }
.stack { display: grid; gap: var(--sp-4); }
.section-gap { margin-top: var(--sp-4); }

/* ---------- KPI cards ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.stat {
  position: relative; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 16px 15px; box-shadow: var(--shadow-sm);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent, var(--link)); }
.stat:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat .s-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stat .s-label { color: var(--muted); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.stat .s-ico {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  color: var(--accent, var(--link));
  background: color-mix(in srgb, var(--accent, var(--link)) 13%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, var(--link)) 22%, #fff);
}
.stat .s-ico .icon { width: 17px; height: 17px; }
.stat .s-value { color: var(--navy); font-size: 32px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; margin-top: 12px; overflow-wrap: anywhere; }
.stat .s-sub { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; margin-top: 7px; }
.s-status { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 12px; padding: 1px 0; }
.s-status .dot { width: 8px; height: 8px; border-radius: 50%; }
.s-status.good { color: var(--good-ink); } .s-status.good .dot { background: var(--good); }
.s-status.warn { color: var(--warn-ink); } .s-status.warn .dot { background: var(--warn); }
.s-status.bad { color: var(--bad-ink); } .s-status.bad .dot { background: var(--bad); }

/* ---------- Tachometer gauges (dashboard KPIs) ---------- */
.gauge-card { display: flex; flex-direction: column; }
.g-wrap { position: relative; margin: 6px auto 0; width: min(100%, 190px); }
.g-svg { display: block; width: 100%; height: auto; }
.g-zone { fill: none; stroke-linecap: butt; }
.g-track { fill: none; stroke: var(--surface-2); }
.g-prog { fill: none; stroke-linecap: round; }
.g-tick { stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; }
.g-tick.major { stroke: var(--faint); }
@keyframes gsweep { from { transform: rotate(0deg); } }
.g-needle {
  transform-origin: 100px 104px;
  transform: rotate(var(--sweep, 0deg));
  animation: gsweep 1s cubic-bezier(.25, .9, .3, 1.05);
}
.g-value {
  margin-top: 2px; text-align: center;
  color: var(--navy); font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gauge-card .s-sub { justify-content: center; margin-top: 9px; }

/* ---------- Upload drop zone + file chips ---------- */
.drop {
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); padding: 18px 16px; text-align: center;
  color: var(--muted); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.drop:hover, .drop.over { border-color: var(--link); background: var(--info-fill); }
.drop .d-ico {
  width: 38px; height: 38px; border-radius: 10px; margin: 0 auto 8px;
  display: grid; place-items: center; color: var(--link);
  background: color-mix(in srgb, var(--link) 12%, #fff);
}
.drop b { display: block; color: var(--ink); font-size: 13.5px; font-weight: 700; }
.drop p { margin: 3px 0 0; font-size: 12px; }
.drop input[type="file"] { display: none; }
.file-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.file-chip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 5px 7px 5px 11px; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.file-chip .fc-name { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip .fc-size { color: var(--faint); font-weight: 500; }
.file-chip button {
  border: 0; background: transparent; color: var(--faint); display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%; padding: 0;
}
.file-chip button:hover { background: var(--bad-fill); color: var(--bad-ink); }
.file-chip .icon { width: 13px; height: 13px; }

/* ---------- Panels / cards ---------- */
.grid-2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-4); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.panel.pad { padding: 18px; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 15px 18px; border-bottom: 1px solid var(--line);
}
.panel-head h2 { margin: 0; color: var(--navy); font-size: 15px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.panel-head .ph-ico { color: var(--accent, var(--link)); display: grid; place-items: center; }
.panel-head p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.panel-body { padding: 18px; }
.panel-body.flush { padding: 0; }
.panel .stack { padding: 18px; }
h3.sub-h { margin: 0 0 10px; color: var(--navy); font-size: 13.5px; font-weight: 800; }

.source { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 13px 14px; background: var(--surface); }
.source b { color: var(--navy); font-size: 14px; }
.source .cite { color: var(--link-body); font-size: 12px; font-weight: 700; }
.source p { margin: 8px 0 0; color: var(--ink-2); font-size: 13.5px; }

.mini-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mini { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 12px; background: var(--surface); }
.mini b { display: block; color: var(--navy); font-size: 17px; font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
.mini span { display: block; color: var(--muted); font-size: 10.5px; font-weight: 800; margin-top: 5px; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Module cards (dashboard) ---------- */
.mod-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mod-card {
  display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px; box-shadow: var(--shadow-sm);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.mod-card:not(:disabled):hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.mod-card:disabled { opacity: .62; cursor: not-allowed; }
.mod-card .m-tile {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none;
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent, var(--link)) 82%, #fff) 0%, var(--accent, var(--link)) 46%, color-mix(in srgb, var(--accent, var(--link)) 76%, #0d1a31) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 2px 5px color-mix(in srgb, var(--accent, var(--link)) 32%, transparent);
}
.mod-card .m-tile .icon { width: 18px; height: 18px; }
.mod-card .m-body { min-width: 0; flex: 1; }
.mod-card .m-body b { display: block; color: var(--navy); font-size: 14px; font-weight: 700; }
.mod-card .m-body p { margin: 3px 0 9px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.mod-card .m-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Tables ---------- */
.tbl-wrap {
  overflow-x: auto;
  /* Scroll shadows: edge hints appear only while columns extend off-screen. */
  background:
    linear-gradient(90deg, var(--panel) 40%, transparent) left / 28px 100% no-repeat local,
    linear-gradient(-90deg, var(--panel) 40%, transparent) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(15, 30, 60, .16), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(15, 30, 60, .16), transparent) right / 12px 100% no-repeat scroll;
}
/* Explicit swipe cue for narrow screens where table columns clip. */
.tbl-scroll-hint { display: none; }
@media (max-width: 620px) {
  .tbl-scroll-hint {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px 0; color: var(--faint); font-size: 12px; font-weight: 600;
  }
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; padding: 10px 14px; background: var(--surface-2);
  color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--line);
}
tbody td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink-2); }
tbody tr:last-child td { border-bottom: 0; }
td b, td strong { color: var(--navy); font-weight: 700; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
th.num { text-align: right; }
tr.click { cursor: pointer; transition: background .12s ease; }
tr.click:hover td { background: var(--surface); }
.cell-sub { display: block; color: var(--faint); font-size: 12px; font-weight: 500; margin-top: 2px; }

/* progress bar inside cells */
.bar { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; min-width: 90px; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: var(--good); }
.bar.warn > span { background: var(--warn); }
.bar.bad > span { background: var(--bad); }
.bar-wrap { display: flex; align-items: center; gap: 10px; }
.bar-wrap .pct { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); min-width: 40px; text-align: right; font-size: 13px; }

/* ---------- Pills / badges ---------- */
.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-pill); padding: 3px 10px; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.on { color: var(--good-ink); background: var(--good-fill); }
.pill.warn { color: var(--warn-ink); background: var(--warn-fill); }
.pill.bad { color: var(--bad-ink); background: var(--bad-fill); }
.pill.info { color: var(--link); background: var(--info-fill); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--navy); background: var(--navy); color: var(--brand-text, #fff);
  border-radius: var(--r-sm); padding: 9px 14px; font-weight: 700; font-size: 14px;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn:hover:not(:disabled) { background: var(--navy-2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.gold { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn.gold:hover:not(:disabled) { background: #ffdf5c; border-color: #ffdf5c; }
.btn.ghost { background: transparent; color: var(--navy); border-color: var(--line-strong); }
.btn.ghost:hover:not(:disabled) { background: var(--surface); border-color: var(--muted); }
.btn.sm { padding: 6px 11px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn .icon { width: 16px; height: 16px; }
.btn-back { color: var(--muted); background: transparent; border-color: transparent; padding-left: 4px; }
.btn-back:hover:not(:disabled) { color: var(--navy); background: var(--surface); }

/* ---------- Forms ---------- */
label { display: block; color: var(--navy); font-size: 12px; font-weight: 700; margin-bottom: 6px; }
input, textarea, select {
  width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 10px 12px; background: var(--panel); color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input[type="checkbox"] { width: 16px; height: 16px; padding: 0; flex: 0 0 auto; accent-color: var(--navy); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--link); box-shadow: var(--ring); }
textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.field-2 { grid-column: span 2; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row .grow { flex: 1 1 220px; }
.inline-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.inline-form .grow { flex: 1 1 260px; }

.diff {
  margin: 0; max-height: 320px; overflow: auto; white-space: pre-wrap;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #0d1a31; color: #cfe0f5;
  padding: 14px; font-size: 12.5px; font-family: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace; line-height: 1.55;
}
.notice { border: 1px solid #cfe3ef; background: var(--info-fill); color: #285567; border-radius: var(--r-sm); padding: 11px 13px; font-size: 13px; }
.notice b { color: var(--link-body); }
.error { color: var(--bad-ink); font-weight: 600; font-size: 13.5px; }
.muted { color: var(--muted); }

/* Inline spinner for in-flight buttons / actions */
@keyframes spin { to { transform: rotate(360deg); } }
.spin {
  display: inline-block; width: 13px; height: 13px; flex: none;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: spin .6s linear infinite; vertical-align: -2px;
}

/* ---------- Empty & skeleton ---------- */
.empty { text-align: center; padding: 34px 20px; color: var(--muted); }
.empty .e-ico { width: 46px; height: 46px; border-radius: 12px; margin: 0 auto 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--faint); }
.empty .e-ico .icon { width: 22px; height: 22px; }
.empty b { display: block; color: var(--ink); font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.empty p { margin: 0 auto; font-size: 13px; max-width: 42ch; }
td .empty { padding: 26px 12px; }

@keyframes shimmer { 100% { background-position: -200% 0; } }
.sk { border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 25%, #e6edf6 37%, var(--surface-2) 63%); background-size: 200% 100%; animation: shimmer 1.3s ease-in-out infinite; }
.sk-stat { height: 118px; border-radius: var(--r-md); }
.sk-line { height: 13px; margin: 9px 0; }
.sk-row { height: 44px; margin: 0; border-radius: 0; border-bottom: 1px solid var(--line); background-size: 200% 100%; }
.sk-block { height: 240px; border-radius: var(--r-md); }

/* The shell uses the same shield-and-gold-ring cue as Patrol Ready boot while
   any module's initial resources are fetched. */
.resource-loader {
  min-height: 230px; padding: 38px;
  display: flex; align-items: center; justify-content: center; gap: 24px;
  color: var(--muted);
}
.resource-loader b { display: block; color: var(--navy); font-size: 18px; margin-bottom: 5px; }
.resource-loader p { margin: 0; font-size: 13.5px; }
.resource-loader-mark {
  position: relative; width: 78px; height: 78px; flex: 0 0 78px;
  display: grid; place-items: center;
}
.resource-loader-mark img { position: relative; z-index: 1; width: 42px; max-height: 58px; object-fit: contain; }
.resource-loader-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--gold) 20%, transparent);
  border-top-color: var(--gold); border-right-color: var(--gold);
  animation: spin 1s linear infinite;
}
@media (max-width: 600px) {
  .resource-loader { min-height: 210px; padding: 30px 20px; flex-direction: column; text-align: center; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .resource-loader-ring { animation: none; }
}

/* ---------- Login ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }
.auth-brand {
  background: linear-gradient(180deg, var(--navy-2), var(--navy) 55%, var(--navy-deep));
  color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between;
}
.auth-brand .a-top { display: flex; align-items: center; gap: 12px; }
.auth-brand h2 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 12px; max-width: 15ch; }
.auth-brand p { color: #c3d3e8; font-size: 15px; max-width: 40ch; margin: 0; }
.auth-feats { display: grid; gap: 12px; margin-top: 26px; }
.auth-feat { display: flex; gap: 11px; align-items: center; color: #dbe6f5; font-size: 14px; font-weight: 600; }
.auth-feat .af-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: var(--gold); }
.auth-foot { color: #8ea3c2; font-size: 12px; }
.auth-panel { display: grid; place-items: center; padding: 40px; background: var(--bg); }
.login { width: 100%; max-width: 400px; }
.login h1 { color: var(--navy); font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 5px; }
.login > p { color: var(--muted); margin: 0 0 22px; font-size: 14px; }
.login .stack { gap: 14px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.divider::before, .divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }

/* ---------- Toast ---------- */
.toast-host { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 10px; z-index: 40; }
.toast-msg { display: flex; align-items: center; gap: 9px; background: var(--navy); color: #fff; border-radius: var(--r-sm); padding: 11px 14px; box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 500; animation: toast-in .22s ease; max-width: 340px; }
.toast-msg .icon { color: var(--gold); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .grid-2, .grid-3, .mod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  :root { --sidebar-w: 0px; }
  .shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: max-content minmax(0, 1fr);
    align-content: start;
    width: 100%; min-width: 0;
  }
  .side {
    position: sticky; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap;
    gap: 8px; padding: 12px 16px; width: 100%; min-width: 0; max-width: 100vw; overflow: hidden;
    align-self: start;
  }
  .main { min-height: 0; }
  .brand { flex: 1; padding: 0; }
  .nav-rail { flex: 1 1 100%; width: 100%; min-width: 0; align-items: center; gap: 5px; }
  .nav {
    flex-direction: row; overflow-x: auto; overflow-y: hidden; flex: 1 1 auto;
    width: auto; min-width: 0; max-width: 100%; margin: 0; padding: 4px;
    gap: 6px; overscroll-behavior-inline: contain; scroll-padding-inline: 4px;
    scroll-snap-type: x mandatory; scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .nav-group, .side-foot { display: none; }
  .nav button {
    width: auto; flex: 0 0 auto; border-radius: var(--r-pill);
    scroll-snap-align: center; scroll-snap-stop: always;
  }
  .nav button .n-label { max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; }
  .nav-rail-control {
    display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px;
    padding: 0; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%;
    background: rgba(255, 255, 255, .1); color: #fff;
  }
  .nav-rail-control:hover:not(:disabled), .nav-rail-control:focus-visible { background: rgba(255, 255, 255, .18); }
  .nav-rail-control:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .nav-rail-control:disabled { opacity: .34; cursor: default; }
  .nav-rail:not(.has-overflow) .nav-rail-control { visibility: hidden; }
  .nav button.active::before { left: 6px; right: 6px; top: auto; bottom: -3px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content { padding: 18px 16px 32px; }
  .module-loading-overlay { padding: 18px 16px 32px; }
  .topbar { padding: 14px 16px; }
}
@media (max-width: 560px) {
  .kpi-grid, .grid-2, .grid-3, .mod-grid, .mini-grid, .form-grid { grid-template-columns: 1fr; }
  .field-2 { grid-column: auto; }
  .user-meta { display: none; }
  /* Phone topbar: the view title gets one lean line and the description
     moves out of the sticky bar (each panel repeats its own description),
     so the heading never crowds the account controls at 319-390px. */
  .topbar { gap: 8px; padding: 10px 12px; }
  .topbar > div:first-child { min-width: 0; }
  .topbar h1 { font-size: 16.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .sub { display: none; }
  .topbar .avatar { display: none; }
  .user-chip { gap: 6px; }
  .top-right { gap: 8px; flex: none; }
  .freshness { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Provider operating-scale workspaces ---------- */
.op-stack { display: grid; gap: 12px; }
.op-card { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); overflow: hidden; }
.op-card > summary { list-style: none; cursor: pointer; padding: 13px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--navy); background: var(--surface); }
.op-card > summary::-webkit-details-marker { display: none; }
.op-card > summary span { min-width: 0; }
.op-card > summary b { display: block; font-size: 14px; }
.op-card > summary small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 500; }
.op-card > summary .icon { transition: transform .16s ease; flex: none; }
.op-card[open] > summary .icon { transform: rotate(180deg); }
.op-card-body { border-top: 1px solid var(--line); padding: 14px; }
.op-actions { margin-top: 14px; }
.op-link-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.op-link-grid a { display: grid; gap: 3px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 12px; background: var(--surface); color: var(--ink-2); text-decoration: none; }
.op-link-grid a:hover { border-color: var(--link); box-shadow: var(--shadow-sm); }
.op-link-grid b { color: var(--navy); font-size: 13px; }
.op-link-grid span { color: var(--muted); font-size: 11.5px; }
.op-link-grid .icon { width: 12px; height: 12px; vertical-align: -2px; }
.btn.danger { background: var(--ink); border-color: var(--ink); color: var(--on-foreground); }
.op-inline-select { width: auto; min-width: 180px; }
.op-fieldset { margin: 0; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
.op-fieldset legend { color: var(--navy); font-size: 12px; font-weight: 700; padding: 0 5px; }
.op-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.op-check-grid label, .op-check { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--ink-2); font-size: 13px; }
.op-list { margin: 8px 0 0; padding-left: 22px; color: var(--ink-2); }
.op-list li { margin: 6px 0; }
.op-sow-title { margin: 0 0 8px; color: var(--navy); }
.op-comments { display: grid; gap: 10px; }
.op-comment { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 12px; background: var(--surface); }
.op-comment > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.op-comment b { color: var(--navy); font-size: 13px; }
.op-comment span { color: var(--faint); font-size: 11px; }
.op-comment p { margin: 6px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.op-artifact { display: block; width: 100%; min-height: 620px; border: 0; background: #fff; }
.op-selected td { background: var(--info-fill); }
.op-hash { display: block; max-width: 34ch; overflow-wrap: anywhere; font-family: "SF Mono", ui-monospace, monospace; font-size: 11px; }
.op-timeline { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 8px 0 0; padding: 0; }
.op-timeline li { border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 10px; background: var(--surface); font-size: 12px; }
.op-timeline li b { color: var(--navy); margin-right: 6px; }
.op-timeline li span { color: var(--muted); }
.brand-preview { border: 1px solid color-mix(in srgb, var(--preview-primary) 32%, transparent); border-radius: var(--r-md); overflow: hidden; background: var(--preview-bg); color: var(--preview-fg); }
.brand-preview-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px; background: var(--preview-primary); color: var(--preview-primary-text); }
.brand-preview-head > div { display: grid; }
.brand-preview-head span { font-size: 12px; opacity: .82; }
.brand-preview-mark { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 10px; font-weight: 800; }
.brand-preview-logo { width: auto; max-width: 150px; height: 42px; object-fit: contain; border-radius: 8px; }
.brand-preview-body { padding: 18px; }
.brand-preview-body p { margin: 6px 0 14px; }
.brand-preview-body button { border: 0; border-radius: var(--r-sm); padding: 9px 13px; background: var(--preview-primary); color: var(--preview-primary-text); font-weight: 700; }
@media (max-width: 620px) {
  .op-link-grid { grid-template-columns: 1fr; }
  .op-check-grid { grid-template-columns: 1fr; }
  .op-comment > div { display: grid; }
  .op-artifact { min-height: 480px; }
}

/* AI Intelligence Platform surfaces (v2 plan) — two-column detail layout */
.intel-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; }
@media (max-width: 980px) { .intel-cols { grid-template-columns: 1fr; } }
.intel-cols > div > .panel + .section-gap { margin-top: var(--sp-4); }
details.source summary::-webkit-details-marker { display: none; }
details.source summary { list-style: none; }
details.source[open] summary { margin-bottom: 8px; }

/* Sample suggestion cards: dashed border + muted wash so an illustration can
   never be mistaken for a real, actionable suggestion. */
.sg-sample { border: 1px dashed var(--line-2, var(--line)); border-radius: var(--r-md); padding: 12px 14px; background: var(--surface); }

/* ── Policy Assistant: formatted answers + citation cards ────────────────── */
.answer-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.answer-prose { color: var(--ink); font-size: 14.5px; line-height: 1.6; }
.answer-prose p { margin: 0 0 10px; }
.answer-prose h2.md-h, .answer-prose h3.md-h, .answer-prose h4.md-h { color: var(--navy); margin: 14px 0 6px; font-weight: 800; }
.answer-prose h2.md-h { font-size: 16px; } .answer-prose h3.md-h { font-size: 14.5px; }
.answer-prose ol.md-list, .answer-prose ul.md-list { margin: 4px 0 12px; padding-left: 22px; }
.answer-prose ol.md-list > li, .answer-prose ul.md-list > li { margin: 5px 0; padding-left: 3px; }
.answer-prose code { background: var(--surface-2); border-radius: 4px; padding: 1px 5px; font-size: 13px; }
.md-quote { border-left: 3px solid var(--gold-deep); background: var(--surface); margin: 8px 0; padding: 8px 12px; color: var(--ink-2); border-radius: 0 6px 6px 0; font-size: 13.5px; }
.cite-list { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.cite-list-head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.cite-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--panel); }
.cite-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cite-head b { color: var(--navy); font-size: 14px; }
.cite-idx { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--m-assistant, #0ca678); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.cite-foot { display: flex; gap: 16px; align-items: center; margin-top: 8px; font-size: 12.5px; color: var(--faint); }
.cite-open { font-weight: 700; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

/* ── Policy Modernization: stat chips, controls, finding cards ───────────── */
.stat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.stat-chip { background: var(--surface-2); border-radius: 999px; padding: 4px 12px; font-size: 13px; color: var(--muted); }
.stat-chip b { color: var(--ink); font-weight: 800; }
.stat-chip.bad { background: var(--bad-fill); color: var(--bad-ink); } .stat-chip.bad b { color: var(--bad-ink); }
.stat-chip.warn { background: var(--warn-fill); color: var(--warn-ink); } .stat-chip.warn b { color: var(--warn-ink); }
.stat-chip.info { background: var(--info-fill); color: var(--link); } .stat-chip.info b { color: var(--link); }
.pm-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface); }
.pm-ctl { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.pm-ctl select { min-width: 150px; }
.pm-count { padding: 10px 16px 0; margin: 0; color: var(--muted); }
.find-card { border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: 10px; padding: 13px 15px; margin: 12px 16px 0; background: var(--panel); }
.find-card.sev-high { border-left-color: var(--bad); } .find-card.sev-medium { border-left-color: var(--warn); }
.find-card.sev-low { border-left-color: var(--link); } .find-card.sev-info { border-left-color: var(--line-strong); }
.find-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.find-title { font-size: 14.5px; color: var(--ink-2); } .find-title b { color: var(--navy); }
.find-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.find-block { margin-top: 10px; }
.find-label { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin-bottom: 3px; }
.find-cite { display: flex; gap: 7px; align-items: flex-start; margin: 4px 0; color: var(--ink-2); font-size: 13px; }
.find-cite a { font-weight: 700; }
.find-actions { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }

/* ── Policy text reader ──────────────────────────────────────────────────── */
.policy-text { margin-top: 12px; max-height: 480px; overflow-y: auto; white-space: pre-wrap; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }

/* ── Studio ↔ Modernization chips ────────────────────────────────────────── */
.mod-cell { white-space: nowrap; }
.mod-chip { border: 0; background: transparent; padding: 2px; display: inline-flex; gap: 5px; align-items: center; border-radius: 8px; }
.mod-chip:hover { background: var(--surface-2); }

/* ── Collaborative review (Studio) ───────────────────────────────────────── */
.collab-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: var(--sp-4); align-items: start; }
@media (max-width: 1100px) { .collab-layout { grid-template-columns: 1fr; } }
.collab-rail { position: sticky; top: 16px; display: flex; flex-direction: column; gap: var(--sp-4); }
.policy-text mark.cmt-mark { background: #fdf0c8; color: inherit; border-bottom: 2px solid var(--gold-deep); border-radius: 2px; cursor: pointer; padding: 0 1px; }
.policy-text mark.cmt-mark.active { background: #fde68a; }
.cmt-adder { border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 10px; background: var(--surface); }
.cmt-adder textarea { width: 100%; }
.cmt-quote { font-size: 12px; color: var(--muted); font-style: italic; border-left: 3px solid var(--gold-deep); padding-left: 8px; margin-bottom: 6px; }
.cmt-list { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.cmt-item { border: 1px solid var(--line); border-radius: 8px; padding: 10px; cursor: pointer; background: var(--panel); }
.cmt-item:hover { border-color: var(--line-strong); }
.cmt-item.active { border-color: var(--gold-deep); box-shadow: 0 0 0 2px rgba(201,162,39,.18); }
.cmt-item.resolved { opacity: .62; }
.cmt-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 5px; }
.cmt-author { font-size: 12.5px; font-weight: 700; color: var(--navy); display: inline-flex; align-items: center; gap: 5px; }
.cmt-time { font-size: 11px; color: var(--faint); white-space: nowrap; }
.cmt-body { font-size: 13px; color: var(--ink-2); line-height: 1.5; white-space: pre-wrap; }
.cmt-foot { margin-top: 7px; }
.chat-wrap { display: flex; flex-direction: column; height: 340px; }
.chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding: 4px; }
.chat-msg { max-width: 90%; }
.chat-msg.me { align-self: flex-end; text-align: right; }
.chat-meta { font-size: 11px; color: var(--faint); margin-bottom: 2px; }
.chat-meta b { color: var(--navy); }
.chat-text { display: inline-block; text-align: left; font-size: 13px; line-height: 1.45; background: var(--surface-2); border-radius: 10px; padding: 7px 11px; color: var(--ink-2); white-space: pre-wrap; }
.chat-msg.me .chat-text { background: #fdf3d0; }
.chat-compose { display: flex; gap: 8px; margin-top: 8px; }
.chat-compose input { flex: 1; }

/* ── Manual import progress ──────────────────────────────────────────────── */
.import-line { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); padding: 8px 2px; }
.import-line.good { color: var(--good-ink); }
.import-line.bad { color: var(--bad-ink); }

/* ── Collab v2: threads, mentions, bell ─────────────────────────────────── */
.cmt-reply { border-left: 2px solid var(--line-strong); margin: 8px 0 0 10px; padding: 4px 0 4px 10px; }
.cmt-reply-box { display: flex; gap: 6px; margin-top: 8px; }
.cmt-reply-box input { flex: 1; }
.mention, b.mention { color: var(--link-body); font-weight: 700; }
#mentionBell .badge { position: absolute; top: -5px; right: -5px; background: var(--bad); color: #fff; font-size: 10px; font-weight: 800; border-radius: 999px; padding: 1px 5px; min-width: 16px; text-align: center; }
.top-right { position: relative; }
.mention-panel { position: absolute; top: 42px; right: 0; width: 340px; max-height: 420px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow-lg); z-index: 60; padding: 6px; }
.mention-item { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 8px; padding: 9px 10px; font-size: 13px; color: var(--ink-2); }
.mention-item:hover { background: var(--surface-2); }

/* ── Import staging ─────────────────────────────────────────────────────── */
.stg-panel { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-top: 10px; background: var(--surface); }

/* ── Detail section expanders ───────────────────────────────────────────── */
#toggleVersions svg:last-child, #toggleNewVersion svg:last-child { transition: transform .15s ease; }
#toggleVersions.open svg:last-child, #toggleNewVersion.open svg:last-child { transform: rotate(180deg); }

/* ── Assistant suggestion chips ─────────────────────────────────────────── */
.pa-suggest-label { display: block; color: var(--faint); font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px; }
.pa-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-chip { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; line-height: 1.35; cursor: pointer; text-align: left; max-width: 100%; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.pa-chip:hover, .pa-chip:focus-visible { border-color: var(--link); color: var(--link); background: var(--surface-2); }

/* ── Assistant source viewer ────────────────────────────────────────────── */
.pa-src-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); padding: 12px 14px; margin: 4px 0 14px; }
.pa-src-wrap { position: relative; margin: 0 auto; max-width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 2px 10px rgba(15, 30, 60, .10); overflow: auto; -webkit-overflow-scrolling: touch; }
.pa-src-wrap canvas { display: block; }
.pa-src-inline { list-style: none; }
.pa-src-hl { position: absolute; background: rgba(23, 173, 232, .28); box-shadow: 0 0 0 3px rgba(23, 173, 232, .28); border-radius: 3px; pointer-events: none; mix-blend-mode: multiply; }
.pa-src-modal { position: fixed; inset: 0; z-index: 80; background: rgba(8, 22, 45, .48); backdrop-filter: blur(2px); overflow: auto; padding: 24px 12px; }
.pa-src-modal-card { width: min(96vw, 1000px); margin: 0 auto; box-shadow: 0 18px 60px rgba(13, 26, 49, .35); }

/* ── Assistant answer source links ──────────────────────────────────────── */
.ans-src { text-decoration: none; color: var(--navy); background: color-mix(in srgb, var(--sky) 16%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sky) 32%, #fff); border-radius: 5px; padding: 1px 6px; cursor: pointer; transition: background .15s ease; }
.ans-src:hover { background: color-mix(in srgb, var(--sky) 28%, #fff); }
.ans-src strong, .ans-src b { color: var(--navy); }
.ans-src::after { content: " ↗"; font-size: 11px; color: var(--link); }
.ans-cites { font-size: 11px; font-weight: 700; color: var(--faint); text-decoration: none; margin-left: 6px; vertical-align: super; white-space: nowrap; }
.ans-cites:hover { color: var(--link); }

/* ── Publication package options ────────────────────────────────────────── */
.pub-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .pub-options { grid-template-columns: 1fr; } }
.pub-opt { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.pub-opt-head { display: flex; align-items: center; gap: 8px; color: var(--navy); font-size: 13.5px; }
.pub-opt-desc { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; flex: 1 1 auto; }
.pub-opt .btn { align-self: flex-start; }

/* ── Section modernization severity filter chips ────────────────────────── */
.sev-chip { cursor: pointer; border: 1px solid transparent; }
.sev-chip:hover { border-color: var(--link); }
.sev-chip.on { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy) inset; font-weight: 800; }

/* ── Studio tool tiles ──────────────────────────────────────────────────── */
.tool-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
@media (max-width: 1100px) { .tool-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tool-tiles { grid-template-columns: 1fr; } }
.tool-tile { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.tool-tile:hover, .tool-tile:focus-visible { border-color: var(--link); box-shadow: var(--ring); }
.tool-tile.on { border-color: var(--navy); background: var(--surface-2); }
.tool-tile .tt-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; }
.tool-tile.on .tt-ico { background: var(--navy); color: var(--on-foreground); }
.tool-tile .tt-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tool-tile .tt-text b { font-size: 13px; color: var(--ink); }
.tool-tile .tt-hint { font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-tile .tt-chev { flex: 0 0 auto; color: var(--faint); transition: transform .15s ease; }
.tool-tile.on .tt-chev { transform: rotate(180deg); }

/* ── Manual chapter modules ─────────────────────────────────────────────── */
.chap-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 14px 16px; margin: 0 0 14px; }
.chap-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.chap-head b { color: var(--navy); font-size: 14.5px; }
.chap-head .cell-sub { margin: 0; }
.chap-cols { column-count: 3; column-gap: 22px; }
@media (min-width: 1500px) { .chap-cols { column-count: 4; } }
@media (max-width: 1200px) { .chap-cols { column-count: 2; } }
@media (max-width: 760px) { .chap-cols { column-count: 1; } }
.sec-item { display: inline-flex; align-items: center; gap: 7px; width: 100%; break-inside: avoid; border: 0; background: transparent; text-align: left; padding: 4px 6px; border-radius: 7px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.sec-item:hover, .sec-item:focus-visible { background: var(--surface-2); color: var(--navy); }
.sec-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.sec-dot.on { background: #16a34a; }
.sec-dot.warn { background: #d97706; }
.sec-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-hold { color: #b45309; display: inline-flex; }
.sec-modchip { flex: 0 0 auto; }
#manualDock { margin: 4px 0 14px; }
#mdWrap { position: relative; margin: 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 2px 10px rgba(15, 30, 60, .10); overflow: hidden; }
#mdWrap canvas { display: block; }
#manualDocToggle svg:last-child { transition: transform .15s ease; }
#manualDocToggle.open svg:last-child { transform: rotate(180deg); }

/* ── Document (PDF) view ────────────────────────────────────────────────── */
.pt-viewtoggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.pt-viewtoggle button { border: 0; background: var(--surface); padding: 6px 14px; font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; }
.pt-viewtoggle button.on { background: var(--navy); color: var(--on-foreground); }
.pt-viewtoggle button:disabled { opacity: .45; cursor: not-allowed; }
#pdfDock { margin-top: 12px; }
#pdfWrap { position: relative; margin: 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 2px 10px rgba(15, 30, 60, .10); overflow: hidden; }
#pdfWrap canvas { display: block; }
.textLayer { position: absolute; inset: 0; overflow: hidden; line-height: 1; }
.textLayer span, .textLayer br { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0 0; }
.textLayer span::selection { background: rgba(15, 127, 174, .35); }
#pdfHl { position: absolute; inset: 0; pointer-events: none; }
#pdfHl .pdf-mark { position: absolute; background: rgba(253, 224, 71, .38); border-bottom: 2px solid var(--gold-deep); border-radius: 2px; pointer-events: auto; cursor: pointer; }
#pdfHl .pdf-mark.active { background: rgba(253, 230, 138, .6); }
.pdf-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; }

/* ── Policy text reader cleanup ─────────────────────────────────────────── */
/* Spans wrap existing characters only (comment anchors depend on the text
   staying byte-identical); the visual breaks come from pseudo-elements. */
.pt-banner { display: block; color: var(--faint); font-size: 11px; font-weight: 600; letter-spacing: .04em; margin: 16px 0 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.pt-banner + .pt-banner { margin-top: 0; padding-top: 0; border-top: 0; }
.pt-head { display: block; font-weight: 800; color: var(--ink); font-size: 14px; margin: 16px 0 6px; }
.pt-item { font-weight: 700; }
.pt-item::before { content: "\A"; white-space: pre; }

/* ── Version upload split ───────────────────────────────────────────────── */
.upload-split { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; align-items: stretch; }
.upload-split .drop { height: 100%; box-sizing: border-box; }
@media (max-width: 980px) { .upload-split { grid-template-columns: 1fr; } }

/* ── Collab who-line ────────────────────────────────────────────────────── */
.collab-who { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 10px; font-size: 12.5px; color: var(--muted); }
.collab-who .who-avatar { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: var(--on-foreground); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.collab-who b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.collab-who a { flex: 0 0 auto; white-space: nowrap; font-weight: 600; }

/* ── Workflow settings ──────────────────────────────────────────────────── */
.wf-toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0; }
.wf-toggle input[type="checkbox"] { margin-top: 2px; }
.wf-toggle b { white-space: nowrap; font-size: 13.5px; }
.wf-toggle .cell-sub { margin-top: 1px; }

/* ── Tracked changes ────────────────────────────────────────────────────── */
.tc-row { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.tc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tc-accept { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.tc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .tc-cols { grid-template-columns: 1fr; } }
.tc-old > div, .tc-new > div { white-space: pre-wrap; font-size: 12.5px; line-height: 1.5; border-radius: 6px; padding: 8px 10px; }
.tc-old > div { background: rgba(192, 57, 43, .06); border: 1px solid rgba(192, 57, 43, .18); }
.tc-new > div { background: rgba(31, 157, 85, .07); border: 1px solid rgba(31, 157, 85, .2); }

/* ---------- Compliance Programs (plan §9) ---------- */
.c-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; padding: 18px; }
.c-card { width: 100%; text-align: left; color: inherit; display: flex; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; background: var(--surface); transition: box-shadow .15s ease, transform .15s ease; }
.c-card:hover { box-shadow: var(--shadow-2, 0 4px 14px rgba(16, 33, 61, .10)); transform: translateY(-1px); }
.c-card-main { display: grid; gap: 3px; min-width: 0; }
.c-card-main > b { color: var(--navy); }
.c-card-counts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.c-card-counts .pill { white-space: normal; text-align: left; }
.c-ring text { user-select: none; }
.c-structure td { background: var(--surface); color: var(--navy); border-top: 2px solid var(--line); }
.c-structure .cell-sub { display: inline; }
.c-muted td { opacity: .55; }
.c-reasons { margin: 6px 0 0 18px; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.pill-x { border: 0; background: none; cursor: pointer; font-weight: 800; color: var(--muted); padding: 0 2px; }
.pill-x:hover { color: var(--bad); }
.field-label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 5px; }
.c-detail-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(8, 22, 45, .48); backdrop-filter: blur(2px); }
.c-detail-drawer { position: fixed; inset: 0 0 0 auto; z-index: 71; width: min(720px, calc(100vw - 40px)); height: 100dvh; overflow-y: auto; padding: 16px; background: var(--bg); box-shadow: -18px 0 48px rgba(8, 22, 45, .22); }
.c-detail-backdrop[hidden], .c-detail-drawer[hidden] { display: none; }
.c-detail-drawer > .panel { margin: 0; min-height: calc(100dvh - 32px); }
.c-detail-drawer .panel-head { position: sticky; top: -16px; z-index: 2; background: var(--surface); border-bottom: 1px solid var(--line); }
.c-detail-drawer .panel-body { grid-template-columns: minmax(0, 1fr); }
.c-detail-drawer .panel-body > *, .c-detail-drawer .row > * { min-width: 0; max-width: 100%; }
.c-detail-drawer .row { flex-wrap: wrap; }
body.c-drawer-open { overflow: hidden; }
@media (max-width: 640px) {
  .c-cards { padding: 12px; }
  .c-detail-drawer { width: 100vw; padding: 8px; }
  .c-detail-drawer > .panel { min-height: calc(100dvh - 16px); }
  .c-detail-drawer .panel-head { top: -8px; flex-direction: column; align-items: stretch; }
  .c-detail-drawer .panel-head > .row { width: 100%; }
}

/* Public assessor report page */
.assessor-page { min-height: 100vh; background: var(--bg); padding: 8px; }
@media print {
  .assessor-page .panel { box-shadow: none; border: 0; }
  .assessor-page .btn { display: none; }
}

/* mention panel: unread/assignment states */
.mention-head { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.mention-item.attn { border-left: 3px solid var(--gold-deep); }

/* @mention autocomplete popover */
.mention-ac { position: absolute; left: 6px; right: 6px; bottom: calc(100% + 4px); z-index: 40; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(16, 33, 61, .16); overflow: hidden; }
.mention-ac-item { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; padding: 8px 12px; border: 0; background: none; cursor: pointer; font: inherit; }
.mention-ac-item.on, .mention-ac-item:hover { background: var(--surface-2); }
.mention-ac-item b { color: var(--link); }

/* agency-citation review banner */
.c-cite-banner { border: 1px solid var(--info-fill, #dbeafe); background: var(--info-fill, #eff6ff); border-radius: var(--r-md); padding: 12px 14px; }
.c-cite-banner > b { color: var(--link); display: inline-flex; align-items: center; gap: 6px; }

/* citation review passage */
.c-cite-src { cursor: pointer; border: 1px solid var(--line); background: var(--surface); font: inherit; }
.c-cite-src:hover { border-color: var(--link); }
.c-cite-review { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: 10px 12px; }
.c-cite-passage { margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--ink-2); white-space: pre-wrap; border-left: 3px solid var(--gold-deep); padding-left: 10px; }
.c-cite-passage mark { background: rgba(253, 224, 71, .45); border-radius: 2px; padding: 0 2px; font-weight: 700; }

/* Department Event Import drop target */
.dropzone { margin-top: 14px; padding: 26px 18px; border: 2px dashed var(--line);
  border-radius: 12px; text-align: center; cursor: pointer; display: flex;
  flex-direction: column; align-items: center; gap: 6px;
  transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone:focus-visible { border-color: var(--m-deptevents); outline: none; }
.dropzone.over { border-color: var(--m-deptevents); background: rgba(14,165,233,.08); }
.dropzone .icon { width: 26px; height: 26px; opacity: .75; }

/* Event Import: step progress + review table alignment */
.de-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.de-bar-fill { height: 100%; background: var(--m-deptevents); border-radius: 999px;
  transition: width .35s ease; }
.de-bar-indet .de-bar-fill { width: 40%; animation: de-slide 1.1s ease-in-out infinite; }
@keyframes de-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
/* Give every control in the row the same shape: a label line above a control.
   Aligning by flex-end alone left the button high, because it had no label
   line and its box started lower than the inputs'. */
/* margin-bottom:0 matters: a global `label` rule adds 6px, which the
   <div> wrapping the button does not have — that 6px was the whole
   misalignment (measured in-browser, not guessed). */
.de-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 0; }
.de-field > .cell-sub { line-height: 1.2; min-height: 1.2em; }
.de-field > input, .de-field > select, .de-field > .btn { height: 38px; box-sizing: border-box; }
.de-field > .btn { display: inline-flex; align-items: center; justify-content: center; }
.de-winrow { gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.de-editor > td { background: rgba(14,165,233,.05); }

/* Review table: scroll instead of clipping the source/action columns at
   narrow widths, with a visible cue that there is more to the right. */
.de-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.de-scroll > table { min-width: 640px; }
.de-swipe-cue { display: none; margin-top: 4px; }
@media (max-width: 720px) { .de-swipe-cue { display: block; } }
/* Keep a real focus ring; a border-colour change alone is not visible enough. */
.dropzone:focus-visible { outline: 2px solid var(--m-deptevents);
  outline-offset: 2px; }

/* Department event calendar management */
.de-module-nav { display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:12px; flex-wrap:wrap; }
.de-module-nav .de-field { min-width:220px; }
.de-tabs { display:flex; gap:4px; padding:4px; border:1px solid var(--line);
  border-radius:10px; background:var(--surface); }
.de-tab { border:0; background:transparent; color:var(--muted);
  border-radius:7px; padding:8px 12px; font:inherit; font-weight:650; cursor:pointer; }
.de-tab.active { background:var(--m-deptevents); color:#fff; }
.de-calendar-heading { gap:12px; align-items:flex-start; flex-wrap:wrap; }
.de-draft-banner { display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:14px; padding:12px; border:1px solid var(--m-deptevents);
  border-radius:10px; background:color-mix(in srgb, var(--m-deptevents) 8%, transparent); }
.de-month-toolbar { display:flex; align-items:center; gap:8px; margin:22px 0 10px; }
.de-month-toolbar h3 { min-width:190px; text-align:center; margin:0; }
.de-calendar-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.de-calendar-grid { display:grid; grid-template-columns:repeat(7, minmax(100px, 1fr));
  min-width:720px; border-left:1px solid var(--line); border-top:1px solid var(--line); }
.de-calendar-weekdays { border:0; }
.de-calendar-weekdays > div { padding:7px; color:var(--muted); font-size:12px;
  font-weight:700; text-align:center; text-transform:uppercase; letter-spacing:.04em; }
.de-cal-day { min-height:112px; padding:7px; border-right:1px solid var(--line);
  border-bottom:1px solid var(--line); background:var(--surface); }
.de-cal-day.outside { background:color-mix(in srgb, var(--surface) 65%, var(--bg)); }
.de-cal-day.has-events { background:color-mix(in srgb, var(--m-deptevents) 3%, var(--surface)); }
.de-cal-number { display:block; margin-bottom:5px; color:var(--muted);
  font-size:12px; font-weight:700; }
.de-cal-events { display:flex; flex-direction:column; gap:4px; }
.de-cal-event { width:100%; border:0; border-left:3px solid var(--m-deptevents);
  border-radius:4px; padding:5px 6px; background:color-mix(in srgb, var(--m-deptevents) 11%, var(--surface));
  color:var(--ink); font:inherit; font-size:11px; line-height:1.25; text-align:left;
  cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.de-cal-event:hover, .de-cal-event:focus-visible { background:color-mix(in srgb, var(--m-deptevents) 20%, var(--surface)); }
.de-all-events { margin-top:24px; }
.de-event-list { display:flex; flex-direction:column; margin-top:10px;
  border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.de-event-card { display:grid; grid-template-columns:minmax(145px, .65fr) minmax(220px, 2fr) auto;
  gap:14px; align-items:center; padding:12px; background:var(--surface);
  border-bottom:1px solid var(--line); }
.de-event-card:last-child { border-bottom:0; }
.de-event-date, .de-event-copy { display:flex; flex-direction:column; gap:3px; }
.de-event-date span, .de-event-copy span { color:var(--muted); font-size:12px; }
.de-event-actions { display:flex; gap:6px; justify-content:flex-end; }
.btn.danger { color:var(--bad); }
.de-calendar-empty { display:flex; flex-direction:column; align-items:center;
  padding:52px 20px; text-align:center; }
.de-calendar-empty .icon { width:34px; height:34px; color:var(--m-deptevents); }
.de-publication { display:grid; grid-template-columns:auto minmax(0, 1fr);
  gap:14px; align-items:start; }
.de-publication > :not(.de-publication-mark) { grid-column:2; }
.de-publication-mark { display:grid; place-items:center; width:46px; height:46px;
  grid-row:1 / span 6; border-radius:50%; background:var(--surface); }
.de-publication-mark.ok { color:var(--good); background:color-mix(in srgb, var(--good) 12%, var(--surface)); }
.de-publication-mark.fail { color:var(--bad); background:color-mix(in srgb, var(--bad) 12%, var(--surface)); }
.de-publication-mark.pending { color:var(--m-deptevents); background:color-mix(in srgb, var(--m-deptevents) 12%, var(--surface)); }
.de-publication-counts { display:grid; grid-template-columns:repeat(4, minmax(110px, 1fr));
  gap:8px; margin:4px 0; }
.de-publication-counts > div { display:flex; flex-direction:column; padding:10px;
  border:1px solid var(--line); border-radius:8px; }
.de-publication-counts b { font-size:20px; }
.de-publication-counts span { color:var(--muted); font-size:11px; }
.de-publication-error { padding:10px; border:1px solid var(--bad); border-radius:8px; }

@media (max-width: 720px) {
  .de-module-nav { align-items:stretch; }
  .de-module-nav .de-field, .de-tabs { width:100%; }
  .de-tab { flex:1; }
  .de-calendar-heading .btn { width:100%; }
  .de-draft-banner { align-items:flex-start; flex-direction:column; }
  .de-event-card { grid-template-columns:1fr auto; }
  .de-event-copy { grid-column:1 / -1; grid-row:2; }
  .de-event-actions { grid-column:2; grid-row:1; }
  .de-publication-counts { grid-template-columns:repeat(2, minmax(110px, 1fr)); }
}

@media (max-width: 430px) {
  .de-month-toolbar h3 { min-width:0; flex:1; font-size:16px; }
  .de-month-toolbar #deMonthToday { display:none; }
  .de-event-card { display:flex; flex-direction:column; align-items:stretch; }
  .de-event-actions { justify-content:flex-start; }
  .de-publication { grid-template-columns:1fr; }
  .de-publication > :not(.de-publication-mark) { grid-column:1; }
  .de-publication-mark { grid-row:auto; }
}

/* Modernization panel: the two scan tools must read as DIFFERENT tools.
   Mismatch (reviews existing policies) wears amber; coverage (finds missing
   policies) wears the module green. Left accent + tinted head + an eyebrow
   tag give each card its own identity, and the gap keeps them from reading
   as one stacked form. */
.panel.scan-mismatch { border-left: 4px solid var(--gold-deep); }
.panel.scan-mismatch > .panel-head { background: rgba(254, 231, 128, .16); }
.panel.scan-coverage { border-left: 4px solid var(--m-policymod); margin-top: 16px; }
.panel.scan-coverage > .panel-head { background: rgba(9, 146, 104, .07); }
.scan-tag {
  display: inline-block; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 2px 8px; border-radius: 999px; margin-bottom: 5px;
}
.scan-tag.mismatch { background: rgba(201, 162, 39, .18); color: #8a6d0b; }
.scan-tag.coverage { background: rgba(9, 146, 104, .12); color: var(--m-policymod); }

/* Cited-text viewer: the exact retrieved passage a finding rests on, shown
   in-product. The official-source link is secondary. */
.cite-modal-backdrop {
  position: fixed; inset: 0; background: rgba(13, 26, 49, .45);
  display: grid; place-items: center; z-index: 90; padding: 18px;
}
.cite-modal {
  background: var(--panel); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg, 0 18px 50px rgba(13, 26, 49, .35));
  max-width: 720px; width: 100%; max-height: 82dvh;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 6px;
}
.cite-modal-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.cite-modal-text {
  overflow: auto; white-space: pre-wrap; font-size: 13px; line-height: 1.55;
  border-left: 3px solid var(--m-policymod); padding: 8px 12px;
  background: var(--surface-2); border-radius: 6px; color: var(--ink);
}

/* Coverage report verdict bands — collapsed drop-down cards. Each band is a
   distinct tinted card (tone matches its count pill) so the closed rows read
   as different severities at a glance, with an explicit caret affordance. */
.cov-band {
  border: 1px solid var(--line); border-left: 4px solid var(--line-strong);
  border-radius: 10px; background: var(--panel); margin-top: 12px; overflow: hidden;
}
.cov-band > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; background: var(--surface-2);
}
.cov-band > summary::-webkit-details-marker { display: none; }
.cov-band > summary:hover { filter: brightness(.985); }
.cov-band > summary:focus-visible { box-shadow: var(--ring); }
.cov-band .cov-caret {
  flex: none; width: 0; height: 0; color: var(--muted);
  border-left: 6px solid currentColor;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  transition: transform .15s ease;
}
.cov-band[open] > summary .cov-caret { transform: rotate(90deg); }
.cov-band[open] > summary { border-bottom: 1px solid var(--line); }
.cov-band.bad { border-left-color: var(--bad); }
.cov-band.bad > summary { background: var(--bad-fill); }
.cov-band.bad .cov-caret { color: var(--bad-ink); }
.cov-band.warn { border-left-color: var(--warn); }
.cov-band.warn > summary { background: var(--warn-fill); }
.cov-band.warn .cov-caret { color: var(--warn-ink); }
.cov-band.on { border-left-color: var(--good); }
.cov-band.on > summary { background: var(--good-fill); }
.cov-band.on .cov-caret { color: var(--good-ink); }

/* Coverage report head + unevaluated-requirements prompt. Both were bare
   panel-body runs that blended into the band pills below: the head is now a
   tinted scoreboard strip of stat-chips (heavier than in-band pills), and
   the fact prompt is a bounded, info-accented card with hairline rows. */
.cov-summary { padding: 14px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.stat-chip.on { background: var(--good-fill); color: var(--good-ink); } .stat-chip.on b { color: var(--good-ink); }
.cov-facts { border: 1px solid var(--line); border-left: 4px solid var(--link); border-radius: 10px; background: var(--info-fill); margin-top: 12px; padding: 12px 14px; }
.cov-facts-head { display: flex; align-items: center; gap: 8px; color: var(--navy); }
.cov-fact-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); }
.cov-fact-row:first-child { border-top: 0; }
.cov-facts .btn.ghost { background: var(--panel); }
.rank-input { width: 140px; font-size: 13px; padding: 6px 10px; }

/* Recent scans is history, not a scan surface: neutral slate edge + tinted
   head so it reads as its own card between the run cards and the report.
   Reports carry the scan-kind edge (scan-mismatch / scan-coverage) plus
   breathing room above so the report never merges into the table above it. */
.panel.scan-history { border-left: 4px solid var(--line-strong); margin-top: 16px; }
.panel.scan-history > .panel-head { background: var(--surface-2); }
.panel.scan-report { margin-top: 16px; }

/* Accreditation import card: its own quiet identity next to the amber and
   green scan tools. */
.panel.scan-accred { border-left: 4px solid var(--navy, #46608a); margin-top: 16px; }
.panel.scan-accred > .panel-head { background: rgba(70, 96, 138, .07); }
.scan-tag.accred { background: rgba(70, 96, 138, .12); color: var(--navy, #46608a); }

/* Peer comparison section inside the coverage report */
.cov-band.cov-peer { border-left: 4px solid var(--m-standards); }
.scan-tag.peer { background: rgba(201, 162, 39, .14); color: #8a6d0b; }
.find-card.peer-card { border-left-color: var(--m-standards); }