/* ============================================================================
   ContractReview design system
   Single source of truth for the app's visual language. Implements the
   binding spec in docs/ux-brief.md. Loaded after bootstrap.min.css.

   NOTE on icons: badge/panel markup below uses Bootstrap Icons classes
   (bi bi-*) per the ux-brief icon spec. `bootstrap-icons` IS vendored under
   wwwroot/lib/bootstrap-icons/ (css + woff/woff2) and linked from
   _Layout.cshtml — icons render everywhere they're used. Every badge/chip
   still carries its own text label regardless, per the ux-brief's "never
   color/icon alone" rule, so nothing here depends on the icon font loading.

   NOTE on type: 'Inter' and 'IBM Plex Mono' are referenced with the system
   fallback stacks the ux-brief itself specifies. No web-font files are
   vendored (same no-internet-fetch constraint as above) — if the fonts are
   later installed/self-hosted, they activate automatically; otherwise the
   stack degrades gracefully to system UI / monospace fonts.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. Tokens (brand palette, semantic colors, typography, spacing)
   ------------------------------------------------------------------------ */
:root {
  /* Brand chrome */
  --atg-navy: #0D1E3E;
  --atg-blue: #214592;
  --atg-blue-tint: #EAF0FB;
  --charcoal: #444444;

  /* Semantic (disposition / risk) */
  --danger: #B3261E;
  --danger-tint: #FBE9E7;
  --caution: #7A5C00;
  --caution-tint: #FFF3CF;
  --success: #1E7A34;
  --success-tint: #E9F6EC;

  /* SLA urgency — reserved hue, never reused for content risk */
  --sla-orange: #DD6E0C;
  --sla-orange-tint: #FCEBD9;
  /* Darkened variant for text/solid-fill use only (border/icon-only uses keep --sla-orange).
     --sla-orange itself is ~3.33:1 against white/text — below the 4.5:1 AA bar at the
     --fs-micro/--fs-mono badge sizes these chips render at. Computed, not eyeballed:
     white-on-#A64E00 ≈ 5.66:1, #A64E00-on-white ≈ 5.66:1, #A64E00-on-tint ≈ 4.86:1. */
  --sla-orange-text: #A64E00;

  /* Structure */
  --border-color: #E3E7EF;
  --card-radius: 6px;
  --btn-radius: 4px;
  --badge-radius: 3px;
  --page-bg: #F7F8FA;

  /* Typography */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;

  --fs-h1: 1.75rem;
  --fs-h2: 1.25rem;
  --fs-h3: 1.0625rem;
  --fs-eyebrow: 0.7rem;
  --fs-body: 0.875rem;
  --fs-meta: 0.78rem;
  --fs-micro: 0.68rem;
  --fs-mono: 0.75rem;

  /* 4px base spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Bootstrap variable overrides — retint the compiled bootstrap.min.css
     without recompiling SCSS (BS 5.3 exposes its theme as CSS vars). */
  --bs-primary: var(--atg-blue);
  --bs-primary-rgb: 33, 69, 146;
  --bs-link-color: var(--atg-blue);
  --bs-link-color-rgb: 33, 69, 146;
  --bs-link-hover-color: #172f63;
  --bs-link-hover-color-rgb: 23, 47, 99;
  --bs-success: var(--success);
  --bs-success-rgb: 30, 122, 52;
  --bs-danger: var(--danger);
  --bs-danger-rgb: 179, 38, 30;
  --bs-body-font-family: var(--font-ui);
  --bs-body-font-size: var(--fs-body);
  --bs-body-line-height: 1.45;
  --bs-body-color: var(--charcoal);
  --bs-body-bg: var(--page-bg);
  --bs-border-color: var(--border-color);
  --bs-border-radius: var(--card-radius);
  --bs-border-radius-sm: 4px;
  --bs-border-radius-lg: 6px;
  --bs-btn-border-radius: var(--btn-radius);
  --bs-btn-border-radius-sm: var(--btn-radius);
  --bs-btn-border-radius-lg: var(--btn-radius);
}

/* Desktop-density base — do not scale up at breakpoints. */
html {
  font-size: 14px;
}

body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--charcoal);
  background: var(--page-bg);
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
}

/* ---------------------------------------------------------------------------
   2. Typography scale
   ------------------------------------------------------------------------ */
.page-title {
  font-size: var(--fs-h1);
  font-weight: 700;
  color: var(--atg-navy);
  margin-bottom: var(--space-4);
}

.section-header {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--atg-navy);
}

.card-title {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--charcoal);
}

/* Uppercase tracked label used on every card/panel header. */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--charcoal);
  opacity: .72;
}

.text-meta {
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--charcoal);
}

.text-micro {
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Signature device: any reference/pincite number (p.N, §4.2, R2, 3d, dates
   in dense tables) gets this monospace treatment — never used for prose. */
.ref-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
   3. Layout shell (chrome, content container)
   ------------------------------------------------------------------------ */
.navbar-atg {
  background: var(--atg-navy);
  min-height: 48px;
}

.navbar-atg .navbar-brand {
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .01em;
}

.navbar-atg .nav-link {
  color: rgba(255, 255, 255, .82);
  font-size: var(--fs-body);
  font-weight: 500;
  padding: .5rem .75rem;
  border-radius: var(--btn-radius);
}

.navbar-atg .nav-link:hover,
.navbar-atg .nav-link:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .1);
}

.navbar-atg .nav-link.active {
  color: #fff;
  background: var(--atg-blue);
}

.navbar-atg .navbar-user {
  color: rgba(255, 255, 255, .85);
  font-size: var(--fs-meta);
}

.navbar-atg .dropdown-toggle {
  color: #fff;
}

.navbar-atg .dropdown-toggle::after {
  color: rgba(255, 255, 255, .7);
}

/* Default contained width for ordinary pages; FullWidth views opt into
   container-fluid directly in _Layout.cshtml. */
.content-container {
  max-width: 1320px;
  margin-inline: auto;
  width: 100%;
  padding: var(--space-6) var(--space-4);
}

/* ---------------------------------------------------------------------------
   4. Buttons — sharp radius, no pill buttons outside badges/chips
   ------------------------------------------------------------------------ */
.btn {
  border-radius: var(--btn-radius);
  font-weight: 500;
}

.btn:hover {
  filter: brightness(.94);
}

/* ---------------------------------------------------------------------------
   5. Cards + left-border-accent state pattern
   ------------------------------------------------------------------------ */
.card {
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  box-shadow: none;
}

.card-header {
  background: #fff;
  border-bottom: 1px solid var(--border-color);
}

/* The recurring structural device: a 4px colored left border carries state
   (reviewer disposition, SLA urgency, error) without a filled background. */
.card-accent {
  border-left-width: 4px !important;
  border-left-style: solid !important;
}

.card-accent-success { border-left-color: var(--success) !important; }
.card-accent-caution { border-left-color: var(--caution) !important; }
.card-accent-danger { border-left-color: var(--danger) !important; }
.card-accent-blue { border-left-color: var(--atg-blue) !important; }
.card-accent-navy { border-left-color: var(--atg-navy) !important; }
.card-accent-orange { border-left-color: var(--sla-orange) !important; }
.card-accent-charcoal { border-left-color: var(--charcoal) !important; }

/* Shadow is reserved for things that float above content, never resting
   cards — the inverse of Bootstrap's default light-shadow-everywhere. */
.elevated,
.offcanvas,
.dropdown-menu,
.toast-app {
  box-shadow: 0 4px 24px rgba(13, 30, 62, .18);
}

/* Reviewer-state header band (§2 "Reviewer states"). */
.reviewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-color);
}

.reviewer-header-unreviewed {
  background: #fff;
  color: var(--charcoal);
}

.reviewer-header-accepted {
  background: var(--success);
  color: #fff;
  border-bottom-color: var(--success);
}

.reviewer-header-rejected {
  background: var(--danger);
  color: #fff;
  border-bottom-color: var(--danger);
}

.reviewer-header-modified {
  background: var(--atg-blue);
  color: #fff;
  border-bottom-color: var(--atg-blue);
}

/* .card-title/.btn-link both set their own explicit color normally — force them to inherit the
   band's color instead so a finding card's clause name and collapse toggle stay legible (white)
   once the header recolors per an Accept/Reject/Modify action, not stuck at charcoal-on-danger. */
.reviewer-header .card-title,
.reviewer-header .collapse-toggle {
  color: inherit;
}

/* ---------------------------------------------------------------------------
   6. Dense tables (queue, admin lists)
   ------------------------------------------------------------------------ */
.table-dense {
  font-size: var(--fs-body);
  margin-bottom: 0;
}

.table-dense thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--charcoal);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.table-dense th,
.table-dense td {
  height: 40px;
  padding: 0 var(--space-3);
  vertical-align: middle;
}

.table-dense tbody tr {
  border-left: 4px solid transparent;
}

/* 3% charcoal zebra tint — not Bootstrap's default gray stripe. */
.table-dense tbody tr:nth-child(odd) {
  background: rgba(68, 68, 68, .03);
}

.table-dense tbody tr.row-sla-due-soon { border-left-color: var(--sla-orange); }
.table-dense tbody tr.row-sla-overdue { border-left-color: var(--sla-orange); background: var(--sla-orange-tint); }

/* "Selected row" accent (Versions page's changelog selection) — deliberately --atg-blue, not the
   reserved SLA orange: this is an informational/interactive state (§1 "atg-blue: primary/
   interactive... informational contexts"), not a due-date urgency signal, so it must stay visually
   distinct from row-sla-due-soon/overdue above. */
.table-dense tbody tr.row-selected { border-left-color: var(--atg-blue); background: var(--atg-blue-tint); }

/* M3 (pass-1 critique) fix: this used to style a sort affordance the queue table didn't actually
   have (plain <th> text, no click handlers) — a11y floor violation, since it implied a keyboard-
   operable feature that wasn't real. queue.js now wires real column sorting (Contract/SLA Due/
   Status, via QueryOptions.SortBy/SortDesc — the same fields ContractRepository.ListAsync already
   supported), so these are real focusable/keyboard-activatable <a> elements now. */
.table-dense a.sort-link {
  color: inherit;
  text-decoration: none;
}

.table-dense a.sort-link:hover,
.table-dense a.sort-link:focus-visible {
  color: var(--atg-blue);
}

.table-dense a.sort-link.is-sorted-asc,
.table-dense a.sort-link.is-sorted-desc {
  color: var(--atg-blue);
  font-weight: 600;
}

.table-dense a.sort-link.is-sorted-asc::after { content: " \2191"; }
.table-dense a.sort-link.is-sorted-desc::after { content: " \2193"; }

/* ---------------------------------------------------------------------------
   7. Focus-visible — double-ring recipe, applied everywhere interactive
   ------------------------------------------------------------------------ */
/* .btn:focus-visible is listed explicitly (not just the bare `button:focus-visible` below) because
   Bootstrap ships its own `.btn:focus-visible` rule with specificity (0,0,2,0) — a bare
   `button:focus-visible` (0,0,1,1) loses that cascade fight and every Bootstrap-styled button
   (Accept/Reject/Modify, Ask, Assign, Export, Save, ...) silently gets zero focus ring. Matching
   Bootstrap's specificity here and relying on this stylesheet's later load order (see header note:
   "Loaded after bootstrap.min.css") is what lets this rule win. Verify with a REAL Tab key press,
   not `.focus()` — `:focus-visible` heuristics differ for programmatic vs. real keyboard focus. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.badge-importance:focus-visible,
.badge-disposition:focus-visible,
.badge-risk:focus-visible,
.sla-chip:focus-visible,
.version-chip:focus-visible,
.citation-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .1rem #fff, 0 0 0 .25rem var(--atg-blue);
}

/* Bootstrap form controls already emit their own focus box-shadow; make it
   match the same double-ring recipe instead of the default blue glow. */
.form-control:focus,
.form-select:focus {
  border-color: var(--atg-blue);
  box-shadow: 0 0 0 .1rem #fff, 0 0 0 .25rem var(--atg-blue);
}

/* ---------------------------------------------------------------------------
   8. Toasts
   ------------------------------------------------------------------------ */
#toast-container {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
}

.toast-app {
  min-width: 220px;
  max-width: 420px;
  border-radius: var(--card-radius);
  padding: 10px 16px;
  font-size: var(--fs-body);
  font-weight: 500;
  color: #fff;
  background: var(--charcoal);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.toast-app-success { background: var(--success); }
.toast-app-danger { background: var(--danger); }

.toast-app .toast-retry {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
  margin-left: auto;
}

/* ============================================================================
   9. Badge system (docs/ux-brief.md §2)
   Rule for every family: shape + icon + color + text label, never color alone.
   ========================================================================= */

/* --- Importance (static clause metadata; neutral navy ladder) --- */
.badge-importance {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: var(--badge-radius);
  line-height: 1.6;
  border: 1px solid transparent;
}

.badge-importance-high { background: var(--atg-navy); color: #fff; }
.badge-importance-medium { background: transparent; color: var(--atg-navy); border-color: var(--atg-navy); }
.badge-importance-low { background: transparent; color: var(--charcoal); border-color: rgba(68, 68, 68, .4); }

/* --- Disposition (reviewer-set; subtle-fill rect) --- */
.badge-disposition {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: var(--badge-radius);
  border: 1px solid transparent;
  line-height: 1.6;
}

.badge-disposition-acceptable { background: var(--success-tint); color: var(--success); border-color: var(--success); }
.badge-disposition-needs-revision { background: var(--caution-tint); color: var(--caution); border-color: var(--caution); }
.badge-disposition-unacceptable { background: var(--danger-tint); color: var(--danger); border-color: var(--danger); }
.badge-disposition-unreviewed { background: #F4F5F7; color: var(--charcoal); border-color: #DADFE6; }
/* Completes ClauseDisposition's full domain (M3): Missing (an expected clause absent from the
   contract reads as a revision-style concern) and NotPresentOk (FindingLinker's synthetic
   "resolved, no longer applicable" row — deliberately muted/neutral, no alarm styling). */
.badge-disposition-missing { background: var(--caution-tint); color: var(--caution); border-color: var(--caution); }
.badge-disposition-not-present-ok { background: #F4F5F7; color: var(--success); border-color: #DADFE6; }

/* --- Computed risk (system-calculated; pill + leading dot, "RISK:" prefix) --- */
.badge-risk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 10px;
  border-radius: 999px;
  line-height: 1.6;
}

.badge-risk::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  background: currentColor;
  flex: 0 0 auto;
}

.badge-risk-high { background: var(--danger-tint); color: var(--danger); }
.badge-risk-medium { background: var(--caution-tint); color: var(--caution); }
.badge-risk-low { background: var(--success-tint); color: var(--success); }

/* --- Doc/contract risk rollup (queue table; segmented bar, never a flat badge) --- */
.risk-rollup {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--charcoal);
  white-space: nowrap;
}

.risk-rollup-bar {
  display: flex;
  width: 60px;
  height: 8px;
  border-radius: 2px;
  overflow: hidden;
  background: #E3E7EF;
  flex: 0 0 auto;
}

.risk-rollup-bar span { display: block; height: 100%; }
.risk-rollup-bar .seg-danger { background: var(--danger); }
.risk-rollup-bar .seg-caution { background: var(--caution); }
.risk-rollup-bar .seg-success { background: var(--success); }

.risk-rollup.is-clean .risk-rollup-bar span { background: var(--success); }

/* --- SLA states (due-date urgency — the only place orange lives) --- */
.sla-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--badge-radius);
  line-height: 1.6;
}

.sla-chip .ref-mono { font-weight: 700; }

.sla-chip-ontrack {
  background: transparent;
  color: var(--charcoal);
  padding-left: 0;
  padding-right: 0;
}

.sla-chip-due-soon {
  border: 1px solid var(--sla-orange);
  color: var(--sla-orange-text);
  background: transparent;
}

.sla-chip-overdue {
  background: var(--sla-orange-text);
  color: #fff;
  border: 1px solid var(--sla-orange-text);
}

/* --- Analysis stages: vertical stepper (not a badge) --- */
.stage-stepper {
  display: flex;
  flex-direction: column;
}

.stage-step {
  display: flex;
  gap: var(--space-3);
  position: relative;
  padding-bottom: var(--space-6);
}

.stage-step:last-child { padding-bottom: 0; }

.stage-step::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 22px;
  bottom: -2px;
  width: 2px;
  background: rgba(13, 30, 62, .15);
}

.stage-step:last-child::before { display: none; }
.stage-step.is-done::before { background: var(--atg-blue); }

.stage-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  z-index: 1;
  background: #fff;
}

.stage-dot-pending { border: 2px solid #DADFE6; }
.stage-dot-active {
  border: 2px solid var(--atg-blue);
  background: var(--atg-blue);
  animation: badge-processing 1.8s ease-in-out infinite;
}
.stage-dot-done { background: var(--success); border: 2px solid var(--success); color: #fff; }
.stage-dot-failed { background: var(--danger); border: 2px solid var(--danger); color: #fff; }

@keyframes badge-processing {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

.stage-label { font-size: var(--fs-body); color: var(--charcoal); }
.stage-detail { font-size: var(--fs-meta); color: rgba(68, 68, 68, .7); }
.stage-elapsed { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--charcoal); }

/* --- Version-origin chips (changelog across negotiation rounds) --- */
.version-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1.6;
}

.version-chip-new { background: var(--atg-blue); color: #fff; border-color: var(--atg-blue); }
.version-chip-carried-forward { background: transparent; color: var(--charcoal); border-color: #8A8F98; }
.version-chip-resolved { background: transparent; color: var(--success); border-color: var(--success); }
/* Documented extension beyond the brief's literal 3 states (New/Carried Forward/Resolved):
   FindingChangeStatus also has Improved/Worsened, which the queue's per-finding changelog needs a
   directional (not neutral) treatment for — same outline-pill shape/icon-led convention, colored
   success/danger since they *are* risk-direction signals. See _FindingCard.cshtml's VersionChip(). */
.version-chip-improved { background: transparent; color: var(--success); border-color: var(--success); }
.version-chip-worsened { background: transparent; color: var(--danger); border-color: var(--danger); }

/* --- Negotiation round chip (mono, navy outline pill) --- */
.round-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  padding: 1px 9px;
  border-radius: 999px;
  border: 1px solid var(--atg-navy);
  color: var(--atg-navy);
  background: transparent;
}

/* --- Contract type indicator (deliberately NOT .round-chip — that mono navy pill shape is
   reserved for the negotiation-round indicator once that data model ships; see
   docs/ux-brief.md §1/§3. Sharp-cornered rect badge, no mono, so it never reads as a round
   chip). --- */
.type-chip {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-meta);
  font-weight: 600;
  padding: 1px 9px;
  border-radius: var(--badge-radius);
  border: 1px solid var(--border-color);
  color: var(--charcoal);
  background: transparent;
}

/* --- Citation chip (p.N pincite affordance) --- */
.citation-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  border: 1px solid var(--atg-blue);
  background: var(--atg-blue-tint);
  color: var(--atg-blue);
  border-radius: 999px;
  padding: 1px 7px;
  text-decoration: none;
  cursor: pointer;
}

.citation-chip:hover,
.citation-chip:focus-visible {
  background: var(--atg-blue);
  color: #fff;
}

.citation-flash {
  animation: citation-flash 1.4s ease-out;
}

@keyframes citation-flash {
  from { background-color: rgba(255, 213, 79, .75); }
  to { background-color: transparent; }
}

/* ============================================================================
   10. Workspace patterns (docs/ux-brief.md §3-6)
   ========================================================================= */

/* Extracted contract text — quoted treatment. */
.quoted-text {
  background: #F7F8FA;
  border-left: 3px solid var(--charcoal);
  padding: 10px 12px;
  font-size: var(--fs-body);
}

/* Trip-wire banner — the single most attention-grabbing element on a card;
   nothing else on the card may use orange. */
.tripwire-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--sla-orange-tint);
  border-left: 4px solid var(--sla-orange);
  padding: var(--space-2) var(--space-3);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--charcoal);
}

.tripwire-banner .bi { color: var(--sla-orange); }

/* Redline diff — real semantic del/ins, tracked-changes styling. */
.redline del {
  color: var(--danger);
  background: rgba(179, 38, 30, .08);
  text-decoration: line-through;
  padding: 0 2px;
  border-radius: 2px;
}

.redline ins {
  color: var(--success);
  background: rgba(30, 122, 52, .08);
  text-decoration: underline;
  padding: 0 2px;
  border-radius: 2px;
}

/* Degenerate-diff fallback (>70% of tokens changed — an inline word diff would read as noise):
   stacked original/proposed blocks, each still wrapped in a real del/ins for the same a11y
   contract as the inline diff. See wwwroot/js/review/findings.js's buildRedlineHtml(). */
.redline-stacked-block .quoted-text del,
.redline-stacked-block .quoted-text ins {
  display: block;
  text-decoration: none;
  padding: 0;
  background: none;
}

/* Escalation owner chip (finding-card footer / summary escalation groups) — neutral gray pill,
   distinct from the semantic disposition/risk badge families since it's a routing fact, not a
   risk judgment. */
.escalation-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--charcoal);
  background: #F4F5F7;
  border: 1px solid #DADFE6;
  border-radius: 999px;
  padding: 2px 10px;
}

/* Deliberate-acceptance note (§5 shortcuts) — muted, explicitly no alarm styling per the plan. */
.deliberate-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--fs-meta);
  color: rgba(68, 68, 68, .75);
}

/* Reviewer-state text chip inside a colored .reviewer-header band (ACCEPTED/REJECTED/MODIFIED). */
.reviewer-state-chip {
  color: inherit;
  opacity: .9;
  white-space: nowrap;
}

/* Reviewer disposition action buttons (§6 "clicked button becomes solid-filled and the other two
   visually recede to ghost/~40%-opacity outline — still clickable, reversible"). */
.finding-action.is-ghost {
  opacity: .4;
}

/* Collapsed "Resolved since previous version" section — native <details>/<summary> so it's
   keyboard/SR-operable with no extra JS; chevron rotates on open like every other collapse-icon. */
.resolved-section summary {
  cursor: pointer;
  list-style: none;
}

.resolved-section summary::-webkit-details-marker {
  display: none;
}

.resolved-section[open] summary .collapse-icon {
  transform: rotate(90deg);
}

/* Rationale collapse chevron. */
.collapse-icon {
  transition: transform .2s ease;
}

[aria-expanded="true"] .collapse-icon {
  transform: rotate(-90deg);
}

.rationale-toggle {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(68, 68, 68, .6);
  background: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
}

.rationale-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
  font-size: var(--fs-meta);
  color: rgba(68, 68, 68, .8);
}

/* Findings toolbar — segmented filter buttons reuse Bootstrap's
   btn-group + btn-check; active fill comes from the retinted --bs-primary. Wraps onto multiple
   rows on the workspace's ~half-viewport-width pane (7 filter chips + sort + expand/collapse +
   progress counter don't fit on one line below ~1100px) — row-gap keeps wrapped rows readable,
   and nowrap on the chip labels stops mid-word breaks ("Trip-" / "wires only") while wrapping. */
.findings-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-height: 40px;
}

.findings-toolbar .btn-group {
  flex-wrap: wrap;
}

.findings-toolbar .btn-group .btn {
  white-space: nowrap;
}

.progress-counter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-meta);
  white-space: nowrap;
  margin-left: auto;
}

.progress-track {
  width: 120px;
  height: 4px;
  border-radius: 2px;
  background: rgba(68, 68, 68, .2);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--atg-blue);
  transition: width .25s ease-out;
}

.progress-fill.is-complete { background: var(--success); }

/* Drop-zone (intake). */
.dropzone {
  border: 2px dashed #C7CCD6;
  border-radius: var(--card-radius);
  padding: var(--space-8);
  text-align: center;
  color: var(--charcoal);
  cursor: pointer;
}

.dropzone .bi { font-size: 28px; color: rgba(68, 68, 68, .4); }

.dropzone.is-dragover {
  border-style: solid;
  border-color: var(--atg-blue);
  background: var(--atg-blue-tint);
}

.dropzone.has-file {
  border-style: solid;
  border-width: 1px;
  border-color: #DADFE6;
  padding: var(--space-4);
  text-align: left;
}

.dropzone.is-error {
  border-style: solid;
  border-color: var(--danger);
  background: var(--danger-tint);
}

.file-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--btn-radius);
  padding: 6px 10px;
}

.file-chip .file-remove {
  border: 0;
  background: none;
  color: var(--charcoal);
  cursor: pointer;
}

/* Gating panel ("why legal review is required"). */
.gating-panel {
  border: 1px solid var(--caution);
  background: var(--caution-tint);
  border-radius: var(--card-radius);
  padding: var(--space-4);
}

.gating-panel-header {
  font-weight: 700;
  color: var(--caution);
  margin-bottom: var(--space-2);
}

.gating-reason {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--fs-body);
  padding: 4px 0;
}

.gating-reason .bi { color: var(--caution); }

.gating-panel.is-clear {
  border-color: var(--success);
  background: var(--success-tint);
}

.gating-panel.is-clear .gating-panel-header,
.gating-panel.is-clear .gating-panel-header .bi {
  color: var(--success);
}

/* Empty states. */
.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-6);
  color: var(--charcoal);
}

.empty-state .bi { font-size: 40px; color: rgba(68, 68, 68, .3); }
.empty-state h2 { font-size: var(--fs-h2); font-weight: 700; margin-top: var(--space-3); }
.empty-state p { font-size: var(--fs-body); color: rgba(68, 68, 68, .7); }

/* Clean-contract celebration banner — understated, one-time fade-in. */
.celebration-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--success-tint);
  border-left: 4px solid var(--success);
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
  color: var(--success);
  animation: celebration-fade-in .2s ease-in;
}

@keyframes celebration-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Analysis-failed error card. */
.error-card {
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--danger);
  border-radius: var(--card-radius);
  padding: var(--space-4);
}

/* Offcanvas drawers reuse Bootstrap's component; float-shadow only. */
.offcanvas {
  border: 0;
}