/* Plan Review Copilot - shared stylesheet.
   Blended direction: serif display headings + sans UI text, hairline card
   tables, restrained sage-green accent, higher-contrast ink than a pure
   pastel palette. Light is the default regardless of OS preference - the
   header toggle (see base.html) is the only way to switch to dark, and its
   choice is remembered via localStorage. */

:root {
  --bg: #f6f5f2;
  --surface: #ffffff;
  --ink: #14130d;
  --ink-soft: #423f34;
  --ink-faint: #6b6852;
  --rule: #e2ded2;
  --rule-strong: #c9c3b2;
  --accent: #3f5230;
  --accent-soft: #eaefe3;
  --danger: #8a3225;
  --danger-soft: #f6e9e6;
  --warn: #7a5a1e;
  --warn-soft: #f3ecd9;
  --shadow: 0 1px 3px rgba(23, 22, 15, 0.06);
  --focus: rgba(63, 82, 48, 0.3);

  /* Flag severity only - deliberately more saturated than --danger/--warn
     above (which stay muted, for errors/status pills/the delete button),
     so severity reads as its own clear signal rather than blending into the
     rest of the palette. A red/orange/yellow gradient by design, not
     red/amber/green - green reads as "fine," and even a low-severity flag
     is still a real flag, not an all-clear. */
  --sev-high: #c62828;
  --sev-medium: #d97a00;
  --sev-low: #c79a00;

  /* Document network graph - discipline node colors, chosen to stay
     visually distinct from --danger/--warn (reserved for flag severity),
     so "which discipline" and "how bad" never read as the same signal. */
  --disc-architectural: #3d5a80;
  --disc-structural: #52606d;
  --disc-mechanical: #2f7a72;
  --disc-electrical: #6b4a7a;
  --disc-plumbing: #2f6b8a;
  --disc-civil: #6b7a2f;
  --disc-fire_protection: #a15c2f;
  --disc-low_voltage: #8a4a6b;
}

:root[data-theme="dark"] {
  --bg: #15140f;
  --surface: #1d1c16;
  --ink: #f6f4ec;
  --ink-soft: #cdc9b8;
  --ink-faint: #9b9680;
  --rule: #33312a;
  --rule-strong: #464333;
  --accent: #a9c28d;
  --accent-soft: #23291c;
  --danger: #dd9282;
  --danger-soft: #2c1b17;
  --warn: #e0bd75;
  --warn-soft: #2c2515;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --focus: rgba(169, 194, 141, 0.35);

  --sev-high: #e57373;
  --sev-medium: #ffa456;
  --sev-low: #f7d576;

  --disc-architectural: #8fa8c9;
  --disc-structural: #a8b6c2;
  --disc-mechanical: #7fc0b6;
  --disc-electrical: #b090c2;
  --disc-plumbing: #7fb8d9;
  --disc-civil: #b8c97f;
  --disc-fire_protection: #d9a273;
  --disc-low_voltage: #c98fb0;
}

* { box-sizing: border-box; }

body {
  background: var(--bg); color: var(--ink); margin: 0; line-height: 1.55;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

.serif { font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif; }
.mono, .label { font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace; }
.label { white-space: nowrap; }

/* Every link gets a deliberate color - nothing falls through to browser blue. */
a { color: var(--ink); }
a:hover { color: var(--accent); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.75rem 4.5rem; }

/* ---------- Header / nav ---------- */

header.site {
  border-bottom: 1px solid var(--rule-strong); padding: 1.5rem 0; margin-bottom: 2.5rem; background: var(--surface);
}
header.site .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: 0; padding-bottom: 0; }
.wordmark { font-size: 1.1rem; text-decoration: none; color: var(--ink); }
.wordmark:hover { color: var(--ink); }
.wordmark .thin { color: var(--ink-faint); font-style: italic; }
.header-right { display: flex; align-items: baseline; gap: 2rem; }
.site-nav a, nav a { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-soft); text-decoration: none; margin-left: 2rem; }
.site-nav a:first-child, nav a:first-child { margin-left: 0; }
.site-nav a:hover, nav a:hover { color: var(--accent); }
.site-nav a.active { color: var(--accent); font-weight: 600; }

.nav-dropdown { display: inline-block; position: relative; margin-left: 2rem; }
.nav-dropdown-toggle {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer; font-family: inherit;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.nav-dropdown-toggle:hover { color: var(--accent); background: none; }
.chevron { font-size: 0.7rem; }
.nav-dropdown-menu {
  position: absolute; top: 1.6rem; right: 0; background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); padding: 0.4rem; min-width: 150px; z-index: 20;
}
.nav-dropdown-menu a {
  display: block; padding: 0.5rem 0.7rem; font-size: 0.82rem; text-transform: none; letter-spacing: normal;
  color: var(--ink); border-radius: 5px; margin-left: 0;
}
.nav-dropdown-menu a:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.theme-toggle {
  font-family: inherit; font-size: 0.76rem; padding: 0.35rem 0.7rem; cursor: pointer; display: flex; align-items: center; gap: 0.4rem;
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink-soft); border-radius: 999px;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--surface); }

/* ---------- Typography ---------- */

h1 { font-size: 1.85rem; font-weight: 400; letter-spacing: -0.01em; margin: 0 0 0.4rem; text-wrap: balance; }
.eyebrow { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); margin-bottom: 0.5rem; font-weight: 600; }
.lede { color: var(--ink-soft); font-size: 1.02rem; max-width: 60ch; margin: 0 0 1.5rem; }
.page-header { margin-bottom: 1.75rem; }
.crumb { font-size: 0.84rem; color: var(--ink-soft); text-decoration: none; display: inline-block; margin-bottom: 0.6rem; }
.crumb:hover { color: var(--accent); }
.meta { color: var(--ink-soft); font-size: 0.87rem; margin-bottom: 1rem; }
.meta div { margin-bottom: 0.25rem; }

.page-title-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.page-title-actions { display: flex; align-items: center; gap: 0.6rem; }

.info-tooltip { position: relative; display: inline-flex; margin-bottom: 0.4rem; }
.info-tooltip-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; border: 1px solid var(--rule-strong); color: var(--ink-soft); font-size: 0.8rem;
  font-weight: 700; font-style: italic; font-family: Georgia, "Iowan Old Style", serif; cursor: help;
}
.info-tooltip:hover .info-tooltip-icon, .info-tooltip:focus-within .info-tooltip-icon {
  color: var(--accent); border-color: var(--accent);
}
.info-tooltip-content {
  display: none; position: absolute; top: 130%; right: 0; width: 20rem; max-width: 70vw; text-align: left;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow);
  padding: 0.8rem 1rem; font-size: 0.82rem; line-height: 1.5; color: var(--ink-soft); z-index: 10;
}
.info-tooltip:hover .info-tooltip-content, .info-tooltip:focus-within .info-tooltip-content { display: block; }

h2 {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint);
  font-weight: 700; margin: 2.75rem 0 1rem;
}

.action-link { color: var(--ink); font-weight: 600; font-size: 0.88rem; text-decoration: none; }
.action-link:hover { color: var(--accent); text-decoration: underline; }

/* ---------- Callouts ---------- */

.error, .info, .warn {
  padding: 0.7rem 1rem; border-radius: 6px; font-size: 0.88rem; margin-bottom: 1.5rem;
}
.error { color: var(--danger); background: var(--danger-soft); }
.info { color: var(--accent); background: var(--accent-soft); }
.warn { color: var(--warn); background: var(--warn-soft); }

/* ---------- Badges / status ---------- */

.badge {
  display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 600;
}
.status-ok { color: var(--accent); }
.status-flagged { color: var(--danger); }
.status-none { color: var(--ink-faint); font-weight: 400; }

.placeholder-badge {
  display: inline-block; font-size: 0.68rem; font-weight: 600; background: var(--warn-soft);
  color: var(--warn); padding: 0.1rem 0.5rem; border-radius: 999px; margin-left: 0.4rem; cursor: help;
}
.sev-high { color: var(--sev-high); font-weight: 700; }
.sev-medium { color: var(--sev-medium); font-weight: 700; }
.sev-low { color: var(--sev-low); font-weight: 600; }

.diff-tag { font-size: 0.68rem; text-transform: uppercase; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; margin-right: 0.4rem; letter-spacing: 0.03em; }
.diff-tag-new { background: var(--accent-soft); color: var(--accent); }
.diff-tag-removed { background: var(--danger-soft); color: var(--danger); }

.discipline-pill {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; color: var(--ink-soft);
  background: var(--accent-soft); padding: 0.15rem 0.55rem; border-radius: 999px; white-space: nowrap;
}

.status-pill {
  display: inline-block; align-self: flex-start; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.04em; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px;
  white-space: nowrap; margin-bottom: 0.5rem;
}
.status-open { background: var(--ink-faint); color: var(--surface); }
.status-acknowledged { background: var(--warn-soft); color: var(--warn); }
.status-resolved { background: var(--accent-soft); color: var(--accent); }
.status-false_positive { background: var(--rule); color: var(--ink-soft); }

.flag-status-form { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; min-width: 0; flex: 1; }
.flag-status-form select {
  font-size: 0.82rem; padding: 0.35rem 0.5rem; width: 100%; min-width: 0; box-sizing: border-box; flex: none;
}
.flag-status-form textarea {
  flex: 1; min-height: 4rem; resize: vertical; font: inherit; font-size: 0.82rem;
  padding: 0.35rem 0.5rem; width: 100%; min-width: 0; box-sizing: border-box;
}
.flag-status-form .btn.sm { align-self: flex-start; flex: none; }

/* ---------- Flag cards ---------- */

.flags-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.flags-toolbar .filter-tabs, .flags-toolbar .findings-summary { margin-bottom: 0; }

.findings-summary { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.findings-summary__chip {
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 600;
  color: var(--ink-soft); padding: 0.25rem 0.7rem; border-radius: 999px; border: 1px solid var(--rule-strong);
  background: var(--surface);
}
.findings-summary__chip .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.flag-cards { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 2rem; }
.flag-card {
  background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--rule-strong);
  border-radius: 8px; box-shadow: var(--shadow); overflow: hidden;
}
.flag-card--high { border-left-color: var(--sev-high); }
.flag-card--medium { border-left-color: var(--sev-medium); }
.flag-card--low { border-left-color: var(--sev-low); }

.flag-card-summary {
  list-style: none; cursor: pointer; padding: 0.85rem 1.2rem; display: flex; align-items: center;
  gap: 0.75rem; flex-wrap: wrap; font-size: 0.88rem;
}
.flag-card-summary::-webkit-details-marker { display: none; }
.flag-card-summary::after { content: "+"; font-size: 1.2rem; color: var(--ink-faint); font-weight: 400; }
.flag-card[open] .flag-card-summary::after { content: "\2212"; }
.flag-card[open] .flag-card-summary { border-bottom: 1px solid var(--rule); }

.flag-card-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex-shrink: 0; }
.sev-dot-high { background: var(--sev-high); }
.sev-dot-medium { background: var(--sev-medium); }
.sev-dot-low { background: var(--sev-low); }

.flag-card-type {
  text-transform: uppercase; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-faint);
  flex-shrink: 0;
}
.flag-card-summary-sep { color: var(--rule-strong); flex-shrink: 0; }
.flag-card-title { font-weight: 600; color: var(--ink); }
/* Pushes both the status pill and everything after it (the +/- indicator)
   to the far right in one group - putting margin-left: auto on the
   indicator too, rather than just here, would split the leftover space
   between the two instead of grouping them. */
.flag-card-summary .status-pill { align-self: center; margin-bottom: 0; margin-left: auto; flex-shrink: 0; }

.flag-card-body { padding: 1.4rem 1.2rem 1.2rem; display: flex; gap: 1.75rem; flex-wrap: wrap; }
.flag-card-block { display: flex; flex-direction: column; gap: 0.6rem; }
.flag-card-explanation { margin: 0; color: var(--ink); font-size: 0.92rem; line-height: 1.5; }

.flag-card-main { flex: 2; min-width: 16rem; display: flex; flex-direction: column; gap: 1.1rem; }
.flag-card-row { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.flag-card-col { flex: 1; min-width: 10rem; display: flex; flex-direction: column; gap: 0.6rem; }
.flag-card-citations { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; font-size: 0.88rem; }
.flag-card-citation-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.flag-card-model { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; color: var(--ink-soft); }

.flag-card-status {
  flex: 1; min-width: 12rem; max-width: 17rem; background: var(--bg); border: 1px solid var(--rule);
  border-radius: 6px; padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.6rem;
}

/* table-layout: fixed on every data table with 4+ columns or any column
   whose content can't wrap - table-layout: auto sizes columns off content
   across ALL rows, so one nowrap/wide column (a form, a pill, a long
   single-line string) starves the others, wrapping header text mid-word or
   spilling cell content into its neighbor. Fixed layout + colgroup gives
   each column a stable width that content wraps inside instead of fighting
   over. Simple 2-3 column tables with only short/wrapping content (e.g.
   diff.html's) are low-risk and left on the default auto layout. */
.metrics-table, .candidates-table, .jurisdictions-table,
.clauses-table, .audit-table, .projects-table, .sheets-table { table-layout: fixed; }
.metrics-table td, .metrics-table th,
.candidates-table td, .candidates-table th, .jurisdictions-table td, .jurisdictions-table th,
.clauses-table td, .clauses-table th, .audit-table td, .audit-table th,
.projects-table td, .projects-table th, .sheets-table td, .sheets-table th { overflow-wrap: break-word; }
/* .label's global white-space: nowrap (fine for short labels like "4.2" or
   sheet numbers) forces long labels onto one line regardless of the
   break-word rule above, which then overflows a fixed-width column right on
   top of the next one - exactly what happened with Municode section titles
   like "Chapter 131 - CONSTRUCTION CODES, UNIFORM", which are full sentences,
   not short numbered labels. audit-table's "Sheet / Clause" column
   (discipline + sheet number + clause label combined into one cell) hits the
   same overflow for the same reason - long clause labels there aren't rare.
   Let both tables' labels wrap normally. */
.clauses-table .label, .audit-table .label { white-space: normal; }

.clause-search { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
.clause-search input[type="search"] { width: 22rem; max-width: 60vw; margin-top: 0; }
.clause-search .btn.sm { flex-shrink: 0; }

.filter-tabs { display: flex; gap: 0.4rem; margin-bottom: 1rem; }
.filter-tab {
  font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); text-decoration: none;
  padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--surface);
}
.filter-tab:hover { color: var(--ink); border-color: var(--ink-faint); }
.filter-tab.active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }

/* ---------- Tables (live inside .card-table) ---------- */

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint);
  font-weight: 700; padding: 1rem 1rem 0.7rem 0; border-bottom: 1px solid var(--rule-strong);
}
td { padding: 0.9rem 1rem 0.9rem 0; border-bottom: 1px solid var(--rule); font-size: 0.92rem; vertical-align: top; color: var(--ink); }
/* Last column never needs trailing gutter - nothing sits to its right. */
th:last-child, td:last-child { padding-right: 0; }
tr:last-child td { border-bottom: none; }
td a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-strong); font-weight: 500; }
td a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.card-table { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 0 1.25rem; box-shadow: var(--shadow); margin-bottom: 2rem; overflow-x: auto; }
.card-table th, .card-table td { padding-left: 0; }
.card-table tr:first-child th { padding-top: 1.15rem; }
.score { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.added { background: var(--accent-soft); }
.removed { background: var(--danger-soft); text-decoration: line-through; color: var(--ink-soft); }

/* ---------- Forms (generic) ---------- */

fieldset { border: 1px solid var(--rule); border-radius: 8px; margin-bottom: 1.5rem; padding: 0.5rem 1.4rem 1.4rem; background: var(--surface); box-shadow: var(--shadow); }
fieldset > button { display: block; margin-top: 1.4rem; }
label { display: block; margin-top: 1rem; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--ink-soft); }
input, select {
  padding: 0.55rem 0.6rem; margin-top: 0.35rem; box-sizing: border-box; width: 100%;
  border: 1px solid var(--rule-strong); border-radius: 5px; background: var(--bg); color: var(--ink);
  font-size: 0.9rem; font-family: inherit;
}
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
input[type=checkbox] { width: auto; }
button, .btn {
  padding: 0.55rem 1.2rem; cursor: pointer; border-radius: 6px; border: 1px solid var(--ink);
  background: var(--ink); color: var(--bg); font-weight: 600; font-size: 0.85rem; font-family: inherit;
  display: inline-block; text-decoration: none;
}
button:hover, .btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
button:active, .btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn.ghost:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.btn.ghost.danger { color: var(--danger); }
.btn.ghost.danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.btn.sm { padding: 0.35rem 0.8rem; font-size: 0.78rem; }
.autofilled { background: var(--accent-soft) !important; }

.tour-highlight {
  position: fixed; z-index: 200; border-radius: 8px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(20, 19, 13, 0.55), 0 0 0 2px var(--accent);
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}
.tour-tooltip {
  position: fixed; z-index: 201; width: 300px; max-width: calc(100vw - 24px);
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 8px;
  box-shadow: var(--shadow); padding: 1rem 1.1rem;
}
.tour-progress {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-faint); font-weight: 600; margin-bottom: 0.4rem;
}
.tour-tooltip p { margin: 0 0 0.9rem; font-size: 0.88rem; line-height: 1.45; color: var(--ink); }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.tour-nav { display: flex; gap: 0.5rem; }

pre {
  background: var(--bg); border: 1px solid var(--rule); border-radius: 6px;
  padding: 1rem 1.1rem; white-space: pre-wrap; word-break: break-word; font-size: 0.85rem;
}

.new-project {
  display: flex; gap: 1.25rem; align-items: flex-end; background: var(--surface); border: 1px solid var(--rule);
  border-radius: 8px; box-shadow: var(--shadow); padding: 1.1rem 1.4rem; margin-bottom: 2rem;
}
.new-project label { flex: 1; margin-top: 0; }
.new-project button { margin: 0; }

.revise-form { display: inline; }
.revise-form button { margin: 0; }

/* ---------- Check panel (project detail primary actions) ---------- */

.meta-line { color: var(--ink-soft); font-size: 0.88rem; margin-bottom: 1.75rem; display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; }
.meta-line .badge { font-size: 0.86rem; }

.check-panel { overflow: hidden; }
.check-row { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.4rem; gap: 1rem; flex-wrap: wrap; }
.check-row + .check-row { border-top: 1px solid var(--rule); }
.check-info .name { font-weight: 600; font-size: 0.92rem; margin-bottom: 0.2rem; }
.check-info .desc { font-size: 0.8rem; color: var(--ink-soft); }
.check-controls { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.field-label {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.76rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--ink-faint); font-weight: 600; margin: 0;
}
.engine-select {
  padding: 0.45rem 0.6rem; border: 1px solid var(--rule-strong); border-radius: 5px; background: var(--bg);
  color: var(--ink); font-size: 0.82rem; font-family: inherit; width: auto; margin: 0; text-transform: none; letter-spacing: normal;
}
.inline-check {
  display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--ink-soft);
  font-weight: 400; text-transform: none; letter-spacing: normal; margin: 0; white-space: nowrap;
}
.inline-check input { margin: 0; }
.check-row.footer-row { background: var(--accent-soft); }

.check-status-msg { font-size: 0.82rem; font-weight: 600; color: var(--ink-faint); }
.check-status-msg.running { color: var(--accent); }
.check-status-msg.running::before {
  content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.4rem;
  border-radius: 50%; background: var(--accent); vertical-align: middle; animation: check-pulse 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .check-status-msg.running::before { animation: none; }
}
@keyframes check-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.batch-row {
  border: 1px solid var(--rule); border-radius: 6px; padding: 0.9rem 1rem 1.1rem;
  margin-top: 0.8rem; background: var(--bg);
}
.batch-row-header { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.batch-row-filename { font-weight: 600; font-size: 0.85rem; word-break: break-all; }
.batch-row-fields { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.batch-row-fields label { flex: 1 1 180px; margin-top: 0.6rem; }
.batch-row-status { display: block; font-size: 0.8rem; margin-top: 0.5rem; }
.batch-row-status.running { color: var(--ink-faint); }
.batch-row-status.success { color: var(--accent); }
.batch-row-status.error { color: var(--danger); }
#batch-actions { display: flex; align-items: center; gap: 0.8rem; margin-top: 1rem; }

/* ---------- Sheets toolbar / collapsible add-sheet form ---------- */

.sheets-toolbar { display: flex; justify-content: space-between; align-items: baseline; margin: 2.75rem 0 1rem; }
.sheets-toolbar h2 { margin: 0; }

.view-doc-link { color: var(--accent); font-size: 0.85rem; }
.cell-sub { display: block; color: var(--ink-faint); font-size: 0.76rem; margin-top: 0.15rem; }

/* ---------- Inline document viewer (modal) ---------- */

.viewer-modal { max-width: 1100px; height: 88vh; }
.viewer-modal .modal-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.viewer-controls { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; flex-wrap: wrap; }
.viewer-controls select, .viewer-controls input[type="search"] { flex: 1; min-width: 10rem; max-width: 20rem; }
.viewer-pages {
  flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center;
  gap: 1rem; background: var(--bg); border: 1px solid var(--rule); border-radius: 6px; padding: 1rem;
}
.viewer-page-wrap { position: relative; max-width: 100%; }
.viewer-page { display: block; max-width: 100%; border: 1px solid var(--rule-strong); box-shadow: var(--shadow); }
.viewer-pages--text { align-items: stretch; }
.viewer-text {
  white-space: pre-wrap; font-size: 0.85rem; line-height: 1.6; color: var(--ink-soft);
  max-width: 72ch; margin: 0 auto; padding: 0.5rem 0;
}
mark.clause-highlight { background: var(--accent-soft); color: var(--ink); border-bottom: 2px solid var(--accent); padding: 0 0.1rem; }
.viewer-page--highlighted { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.clause-bbox-highlight {
  position: absolute; border: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 2px; pointer-events: none;
}
.viewer-locate-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent);
  border-radius: 6px; padding: 0.55rem 0.9rem; margin-bottom: 1rem; font-size: 0.85rem; font-weight: 600;
}

/* ---------- Grouped sections (diff view - one card per sheet) ---------- */

.discipline-section { margin-bottom: 1.25rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; }
.discipline-title {
  font-weight: 600; font-size: 0.85rem; color: var(--ink);
  padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--rule); background: var(--bg);
}
.discipline-section td, .discipline-section th { padding-left: 1.1rem; padding-right: 1.1rem; }
.badge-count {
  display: inline-block; background: var(--accent-soft); color: var(--accent); border-radius: 999px;
  padding: 0.05rem 0.55rem; font-size: 0.7rem; margin-left: 0.4rem; font-weight: 700;
}

.collapsible-form { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow); margin-bottom: 2rem; }
.collapsible-form summary {
  list-style: none; cursor: pointer; padding: 0.95rem 1.4rem; font-weight: 600; font-size: 0.86rem;
  display: flex; align-items: center; justify-content: space-between; color: var(--ink);
}
.collapsible-form summary::-webkit-details-marker { display: none; }
.collapsible-form summary::after { content: "+"; font-size: 1.2rem; color: var(--ink-faint); font-weight: 400; }
.collapsible-form[open] summary::after { content: "\2212"; }
.collapsible-form[open] summary { border-bottom: 1px solid var(--rule); }
.form-body { padding: 1.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem 1.4rem; }
.form-body label { grid-column: span 1; margin-top: 1rem; }
.form-body .full { grid-column: 1 / -1; }
.form-body button { margin-top: 1.4rem; }

/* ---------- Audit report (print-first, standalone page) ---------- */

.report-header { border-bottom: 3px solid var(--ink); padding-bottom: 1rem; margin-bottom: 1.5rem; }
.report-header h1 { font-size: 1.5rem; margin: 0 0 0.2rem; }
.report-header .subtitle { color: var(--ink-soft); font-size: 0.9rem; }
.summary { display: flex; gap: 1.25rem; margin-bottom: 2rem; flex-wrap: wrap; }
.summary-card { border: 1px solid var(--rule); border-radius: 6px; padding: 0.7rem 1.1rem; min-width: 120px; background: var(--surface); box-shadow: var(--shadow); }
.summary-card .n { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); }
.summary-card .l { font-size: 0.75rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; }
.report-footer { color: var(--ink-soft); font-size: 0.75rem; margin-top: 2rem; border-top: 1px solid var(--rule); padding-top: 0.75rem; }
.no-print > * { margin-right: 0.75rem; }

@media print {
  .no-print { display: none; }
  body { margin: 0; background: #fff; }
  .wrap { max-width: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  .card-table, table, .summary-card { box-shadow: none; border-color: #999; }
}

/* ---------- Diagrams modal ---------- */

.modal-overlay {
  position: fixed; inset: 0; background: rgba(20, 19, 13, 0.55); z-index: 100;
  align-items: center; justify-content: center; padding: 2.5rem;
}
/* [hidden] alone has almost no CSS specificity, so a plain class rule with
   display:flex would otherwise always win and the modal would show
   regardless of the hidden attribute - this explicit override fixes that. */
.modal-overlay:not([hidden]) { display: flex; }
.modal-overlay[hidden] { display: none; }
:root[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.7); }
.modal {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 100%; max-width: 960px; max-height: 100%; display: flex; flex-direction: column; overflow: hidden;
}
/* The workflow/ERD diagrams (15 ER entities, 6 flowchart subgraphs) read as
   cramped at the default modal width, shared with much simpler dialogs (the
   jurisdiction-add form) that don't need the extra room - scoped wider here
   rather than widening .modal itself. */
.diagrams-modal { max-width: 1400px; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0.75rem 0.75rem 1.4rem;
  border-bottom: 1px solid var(--rule);
}
.modal-tabs { display: flex; gap: 0.4rem; }
.modal-tab {
  background: transparent; border: 1px solid transparent; color: var(--ink-soft); font-weight: 600; font-size: 0.85rem;
  padding: 0.4rem 0.9rem; border-radius: 6px; cursor: pointer;
}
.modal-tab:hover { color: var(--ink); background: var(--bg); }
.modal-tab.active { color: var(--accent); background: var(--accent-soft); }
.modal-close {
  background: transparent; border: none; color: var(--ink-faint); font-size: 1.4rem; line-height: 1; cursor: pointer;
  padding: 0.3rem 0.6rem; border-radius: 6px;
}
.modal-close:hover { color: var(--ink); background: var(--bg); }
.modal-body { padding: 1.5rem 1.75rem 1.75rem; overflow: auto; }
.diagram-pane { display: none; }
.diagram-pane.active { display: block; }
.mermaid-output { display: flex; justify-content: center; }
.mermaid-output svg { max-width: 100%; height: auto; }

/* ---------- Document network graph ---------- */

.graph-modal { max-width: 1180px; height: 88vh; }
.graph-modal .modal-body { padding: 0; position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.graph-note {
  margin: 0; padding: 0.65rem 1.4rem; font-size: 0.8rem; color: var(--accent); background: var(--accent-soft);
  border-bottom: 1px solid var(--rule); flex-shrink: 0;
}
.graph-canvas-wrap { position: relative; flex: 1; min-height: 0; }
#graph-svg { display: block; width: 100%; height: 100%; cursor: grab; background: var(--bg); }
#graph-svg.panning { cursor: grabbing; }
.graph-node circle { stroke: var(--surface); stroke-width: 2.5px; cursor: pointer; transition: opacity 0.15s; }
.graph-node text { font-size: 11px; font-weight: 700; fill: var(--ink); pointer-events: none; transition: opacity 0.15s; }
.graph-node .sub { font-size: 8.5px; font-weight: 500; fill: var(--ink-faint); }
.graph-node.dim circle, .graph-node.dim text { opacity: 0.22; }
.graph-edge { stroke: var(--ink-faint); fill: none; cursor: pointer; transition: opacity 0.15s, stroke-width 0.15s; }
.graph-edge.dim { opacity: 0.06 !important; }
.graph-edge.highlight { opacity: 0.95 !important; }

.graph-controls {
  position: absolute; top: 0.8rem; right: 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; z-index: 2;
}
.graph-zoom-btn {
  width: 1.9rem; height: 1.9rem; border-radius: 6px; border: 1px solid var(--rule-strong); background: var(--surface);
  color: var(--ink); font-size: 1rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow);
}
.graph-zoom-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.graph-legend {
  display: flex; flex-wrap: wrap; gap: 0.9rem; padding: 0.75rem 1.4rem; border-top: 1px solid var(--rule);
  font-size: 0.76rem; color: var(--ink-soft); flex-shrink: 0;
}
.graph-legend-item { display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.graph-legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.graph-tooltip {
  position: absolute; pointer-events: none; background: var(--ink); color: var(--bg); font-size: 0.76rem;
  padding: 0.5rem 0.7rem; border-radius: 6px; max-width: 260px; line-height: 1.45; opacity: 0; transition: opacity 0.1s;
  z-index: 5; box-shadow: var(--shadow);
}
.graph-tooltip.show { opacity: 1; }
.graph-tooltip .sev-high, .graph-tooltip .sev-medium, .graph-tooltip .sev-low { font-weight: 700; }

/* US jurisdictions map (app/templates/_us_map.html) - the SVG's own embedded
   <style> sets a hardcoded default gray fill; overridden here so it follows
   the theme instead, same reason .borders' white stroke is left alone (a
   plain white separator between states reads fine on both fill colors in
   either theme). */
.jurisdictions-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.icc-banner-block .summary--compact { margin-bottom: 0; }
.summary--compact .summary-card { padding: 0.4rem 0.8rem; min-width: 0; }
.summary--compact .summary-card .n { font-size: 1.05rem; }
.summary--compact .summary-card .l { font-size: 0.68rem; }
.us-map-controls-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex: 1; min-width: 280px; flex-wrap: wrap; }
.us-map-search-actions { display: flex; align-items: center; gap: 0.75rem; }
.us-map-search { max-width: 280px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--ink-soft);
  background: var(--accent-soft); border-radius: 999px; padding: 0.25rem 0.7rem;
}
.filter-chip[hidden] { display: none; }
.filter-chip button { border: none; background: none; color: var(--ink-soft); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; }
.filter-chip button:hover { color: var(--ink); }
.us-map-wrap {
  position: relative; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px;
  box-shadow: var(--shadow); padding: 1rem; margin-bottom: 2rem;
}
.us-map-wrap svg { display: block; width: 100%; height: auto; }
.map-legend { display: flex; gap: 1.25rem; font-size: 0.8rem; color: var(--ink-soft); }
.map-legend-item { display: flex; align-items: center; gap: 0.4rem; }
.map-legend-swatch { width: 14px; height: 14px; border-radius: 3px; background: var(--rule-strong); display: inline-block; }
.map-legend-swatch--active { background: var(--accent); }
/* .state (the <g> wrapping every per-state <path>, not any individual path -
   see _us_map.html) sets the inherited default fill; has-jurisdictions/
   search-match/search-dim are added by JS directly onto individual <path>
   elements, never onto that same <g>, so they must NOT be chained onto
   .state below - an element carrying only "pa has-jurisdictions" would never
   match ".state.has-jurisdictions". Its own explicit fill still correctly
   overrides the inherited one regardless. */
.us-map-wrap .state { fill: var(--rule-strong); }
.us-map-wrap path[class] { transition: fill 0.15s, opacity 0.15s; }
.us-map-wrap .has-jurisdictions { fill: var(--accent); cursor: pointer; }
.us-map-wrap .has-jurisdictions:hover { opacity: 0.8; }
.us-map-wrap .search-dim { opacity: 0.3; }
.us-map-wrap .search-match { fill: var(--sev-high, #b3532e); }
.map-tooltip {
  position: absolute; pointer-events: none; background: var(--ink); color: var(--bg); font-size: 0.76rem;
  padding: 0.5rem 0.7rem; border-radius: 6px; max-width: 220px; line-height: 1.5; opacity: 0; transition: opacity 0.1s;
  z-index: 5; box-shadow: var(--shadow);
}
.map-tooltip.show { opacity: 1; }
.map-tooltip table { border-collapse: collapse; }
/* The global `td { color: var(--ink) }` rule targets td directly, which beats
   inheriting .map-tooltip's own color no matter how specific that ancestor
   rule is - color set directly on an element always wins over an inherited
   value. var(--ink) is meant for light-background body text; against this
   tooltip's dark background it rendered as invisible dark-on-dark text. */
.map-tooltip td, .map-tooltip th { padding: 0.1rem 0; color: inherit; }
.map-tooltip a { color: var(--bg); text-decoration: underline; }
.state-label {
  text-anchor: middle; dominant-baseline: middle; font-weight: 700; font-family: inherit;
  fill: #111; stroke: #fff; stroke-width: 2px; paint-order: stroke;
}
:root[data-theme="dark"] .state-label { fill: #fff; stroke: #111; }