/* ==========================================================================
   SIVD - Sovereign Indenture Vulnerability Diagnostic
   Institutional Legal & Financial Research Terminal Stylesheet
   ========================================================================== */

/* Tokens, typefaces and the type roles live in tokens.css, which base.html
   loads before this file. This stylesheet is a consumer: it declares no colour,
   size, space, radius or duration of its own. */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* The one absolute size in the project: every rem token is relative to it. */
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-ground);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: var(--space-10);
}

/* Accessibility: High-contrast focus rings */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* ==========================================================================
   APPLICATION SHELL
   Identity, primary module navigation, contextual controls and the legal
   status line are four separate things and are built as four separate things.
   The nav is a single element at every viewport -- see base.html on why a
   second copy for small screens is not an option.
   ========================================================================== */

.masthead {
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-4) var(--space-7);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  box-shadow: var(--shadow-sm);
}

.masthead-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
}

/* --- Identity ------------------------------------------------------------
   A link, not a heading. These words are identical on all five surfaces, which
   makes a poor <h1>; each page titles itself inside <main> instead. Set in the
   sans face: the display serif is reserved for editorial headings, and a
   wordmark tracked this wide is not one. */

.shell-identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-decoration: none;
  flex: 0 0 auto;
  order: 1;
}

.shell-identity-name {
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: var(--leading-tight);
}

.shell-identity-byline {
  font-family: var(--font-sans);
  font-size: var(--size-3xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: var(--leading-tight);
}

.shell-identity:hover .shell-identity-name {
  color: var(--text-accent);
}

/* --- Contextual controls ------------------------------------------------- */

.masthead-meta {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  color: var(--text-muted);
  display: flex;
  gap: var(--space-5);
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
  order: 3;
}

.masthead-meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.masthead-meta span::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-circle);
  background-color: var(--warning);
}

/* --- Primary module navigation -------------------------------------------
   Segmented, not pilled: a hairline between modules, and the active module
   marked by ink weight and a rule rather than a filled block. The container
   carries no `overflow: hidden`, because that would clip the focus ring. */

.masthead-nav {
  display: flex;
  align-items: stretch;
  min-width: 0;
  order: 2;
}

.nav-toggle {
  /* The mobile affordance. Revealed at the small breakpoint and nowhere else. */
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
  background-color: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  order: 2;
  transition: color var(--motion-base) var(--ease-standard),
              border-color var(--motion-base) var(--ease-standard);
}

.nav-toggle:hover {
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.nav-toggle[aria-expanded="true"] {
  color: var(--text-accent);
  border-color: var(--text-accent);
}

.nav-link {
  position: relative;
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  background-color: transparent;
  border-left: 1px solid var(--border-subtle);
  border-bottom: 2px solid transparent;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  min-width: 0;
  transition: color var(--motion-base) var(--ease-standard),
              background-color var(--motion-base) var(--ease-standard),
              border-color var(--motion-base) var(--ease-standard);
}

.nav-link:first-child {
  border-left: 0;
}

/* The condensed label. Both label spans are aria-hidden in the markup and the
   link carries the full module name in aria-label, so swapping them at a
   breakpoint never changes what a screen reader is told. */
.nav-link-short {
  display: none;
}

.nav-link:hover {
  color: var(--text-primary);
  background-color: var(--bg-subtle);
}

/* Active. Three carriers, none of them a fill: accent ink, heavier weight, and
   a rule under the module -- plus aria-current in the markup. */
.nav-link.nav-active {
  color: var(--text-accent);
  font-weight: var(--weight-semibold);
  border-bottom-color: var(--text-accent);
}

/* Disabled. Rendered as an inert span rather than a link, so it is not a tab
   stop, and labelled in words so the state does not rest on the grey alone. */
.nav-link.is-disabled {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--disabled-fg);
  background-color: var(--disabled-bg);
  border-left-color: var(--disabled-border);
  cursor: not-allowed;
}

.nav-link-state {
  font-family: var(--font-mono);
  font-size: var(--size-3xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--disabled-fg);
}

/* Loading. Navigation here is a full page load, so the gap between the click
   and the next paint is real and worth acknowledging. shell.js also sets
   aria-busy, which is what actually reports the state; this is the visual
   half. For a reader who has asked for less motion the animation collapses to
   its end state -- a static rule -- through the universal block tokens.css
   owns. That block is declared there once and must not be repeated here. */
.nav-link.is-loading::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background-color: var(--text-accent);
  transform-origin: left center;
  animation: nav-link-progress var(--motion-slow) var(--ease-standard) infinite;
}

@keyframes nav-link-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.stat-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  background-color: var(--severity-low);
  margin-right: var(--space-2);
}

/* --- Statutory legal status line -----------------------------------------
   What used to be several lines of tracked capitals above the fold. The text
   itself is not shortened or softened anywhere: it is rendered verbatim in the
   dialog this strip's button opens. Each chip pairs its glyph, its border and
   its words, so none of the state is carried by colour alone. */

.notice-banner {
  background-color: var(--bg-subtle);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: var(--space-2) var(--space-7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--size-3xs);
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-medium);
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xs);
  background-color: var(--bg-surface);
  color: var(--text-secondary);
  text-transform: uppercase;
}

.status-chip-glyph {
  color: var(--text-accent);
}

/* The per-surface chip, for a page whose own notice is load-bearing -- the
   synthetic deal-comps dataset. Dashed rather than solid, filled glyph rather
   than hollow, and its own words. Never quieter than the data it qualifies. */
.status-chip.status-chip-emphasis {
  border-style: dashed;
  border-color: var(--severity-mod);
  color: var(--severity-mod);
}

.status-chip.status-chip-emphasis .status-chip-glyph {
  color: var(--severity-mod);
}

.status-info {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  background-color: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--size-3xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--text-accent);
  cursor: pointer;
  transition: background-color var(--motion-base) var(--ease-standard),
              border-color var(--motion-base) var(--ease-standard);
}

.status-info:hover {
  background-color: var(--bg-selected);
  border-color: var(--text-accent);
}

.status-info-glyph {
  font-size: var(--size-2xs);
}

/* --- Shell responsive behaviour ------------------------------------------
   1080 and 768 are the breakpoints this project already uses.

   Tablet condenses the module labels rather than shrinking them until they
   wrap, and drops the contextual strip onto its own row. It is NOT hidden: on
   /benchmark that strip reads "Synthetic fixtures labelled as such", and a
   provenance signal is not something a narrow viewport gets to remove. */

@media (max-width: 1080px) {
  .masthead {
    padding: var(--space-4) var(--space-5);
  }

  .nav-link {
    padding: var(--space-2) var(--space-3);
    font-size: var(--size-3xs);
  }

  .nav-link-full {
    display: none;
  }

  .nav-link-short {
    display: inline;
  }

  .masthead-meta {
    flex-basis: 100%;
    justify-content: flex-start;
    gap: var(--space-4);
    font-size: var(--size-3xs);
  }

  /* The chips already fill the row at this width, so holding the control to the
     right edge only strands it alone on a second one. */
  .status-info {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .masthead {
    padding: var(--space-3) var(--space-4);
  }

  .nav-toggle {
    display: inline-flex;
  }

  /* Collapsed by display, not by transform or opacity: a link nobody can see
     must not still be a tab stop. */
  .masthead-nav {
    display: none;
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
  }

  .masthead-nav.is-open {
    display: flex;
  }

  /* The panel has room for the full module names, so it shows them. */
  .nav-link-full {
    display: inline;
  }

  .nav-link-short {
    display: none;
  }

  .nav-link {
    border-left: 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 2px solid transparent;
    padding: var(--space-3) var(--space-4);
    font-size: var(--size-xs);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .nav-link:first-child {
    border-top: 0;
  }

  .nav-link.nav-active {
    border-bottom-color: transparent;
    border-left: 2px solid var(--text-accent);
  }

  .notice-banner {
    padding: var(--space-2) var(--space-4);
  }
}

/* Main Container Layout (Split Grid: Questionnaire & Sticky Score) */
.terminal-container {
  max-width: var(--max-width);
  margin: var(--space-7) auto var(--space-10) auto;
  padding: 0 var(--space-6);
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 1080px) {
  .terminal-container {
    grid-template-columns: 1fr;
  }
}

/* Questionnaire Progress & Reset Toolbar */
.questionnaire-progress-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}
.progress-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.progress-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-sm);
}
.progress-label {
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}
.progress-status {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  color: var(--text-accent);
}
.btn-reset-questionnaire {
  font-size: var(--size-xs);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-xs);
  cursor: pointer;
}
.progress-meter-container {
  width: 100%;
  height: 6px;
  background-color: var(--bg-panel);
  border-radius: var(--radius-xs);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.progress-meter-fill {
  height: 100%;
  background-color: var(--text-accent);
  transition: width var(--motion-slow) var(--ease-standard);
}

/* Introduction Section */
.intro-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--text-accent);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  margin-bottom: var(--space-8);
  position: relative;
}

.intro-title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--size-3xl);
  margin-bottom: var(--space-3);
  color: var(--text-accent);
  line-height: var(--leading-snug);
}

.intro-lead {
  font-size: var(--size-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

.intro-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-6);
}

.pillar-item {
  font-size: var(--size-sm);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-5) var(--space-5);
  transition: all var(--motion-base) var(--ease-standard);
}

.pillar-item:hover {
  border-color: var(--border-medium);
}

.pillar-item strong {
  display: block;
  font-size: var(--size-md);
  color: var(--text-highlight);
  margin-bottom: var(--space-1);
  font-weight: var(--weight-semibold);
}

/* Questionnaire Form */
.dimension-section {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  margin-bottom: var(--space-7);
  transition: border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);
}

.dimension-section:hover {
}

.dimension-section:focus-within {
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.08);
}

.dim-header {
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-5);
}

.dim-number {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  font-weight: var(--weight-semibold);
  color: var(--text-accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background-color: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  border-radius: var(--radius-xs);
}

.dim-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--size-2xl);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
}

.dim-explanation {
  font-size: var(--size-md);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* Option Radio Cards */
.options-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.option-card {
  display: block;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-5);
  cursor: pointer;
  transition: all var(--motion-base) var(--ease-standard);
  position: relative;
}

.option-card:hover {
  background-color: var(--bg-subtle);
  border-color: var(--border-medium);
  transform: translateY(-1px);
}

.option-card input[type="radio"] {
  position: absolute;
  top: 1.35rem;
  left: 1.25rem;
  accent-color: var(--border-focus);
  width: 1.05rem;
  height: 1.05rem;
}

.option-content {
  padding-left: var(--space-7);
}

.option-card input[type="radio"]:checked ~ .option-content {
  color: var(--text-primary);
}

/* No outline suppression here. This rule used to be
   `.option-card input[type="radio"]:checked { outline: none }`, whose (0,3,1)
   specificity beat the global :focus-visible ring (0,1,0) -- so arrow-keying a radio
   group moved focus to the checked control, which was the one control with no visible
   ring. WCAG 2.2 AA 2.4.7 / 2.4.11. */

.option-card.selected {
  background-color: var(--bg-selected);
  border-color: var(--border-focus);
  box-shadow: 0 0 0 1px var(--border-focus);
}

.option-label {
  font-weight: var(--weight-semibold);
  font-size: var(--size-md);
  color: var(--text-primary);
  display: block;
  margin-bottom: var(--space-1);
  line-height: var(--leading-snug);
}

.option-consequence {
  font-size: var(--size-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* Clause Textarea Input */
.clause-block {
  margin-top: var(--space-6);
  background-color: var(--bg-subtle);
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.clause-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
  font-size: var(--size-sm);
}

.clause-badge {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  color: var(--text-muted);
  background-color: var(--bg-input);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-subtle);
}

.clause-textarea {
  width: 100%;
  min-height: 96px;
  background-color: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  padding: var(--space-3);
  resize: vertical;
  line-height: var(--leading-normal);
  transition: border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);
}

.clause-textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.clause-counter {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  color: var(--text-muted);
  text-align: right;
  margin-top: var(--space-1);
}

.dim-help {
  font-size: var(--size-xs);
  color: var(--text-muted);
  margin-top: var(--space-3);
  font-style: italic;
  line-height: var(--leading-normal);
}

/* Sticky Diagnostic Preview Panel */
.sticky-preview {
  position: sticky;
  top: 5.5rem;
}

.preview-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--text-accent);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  box-shadow: var(--shadow-sm);
}

.preview-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--size-2xl);
  color: var(--text-primary);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.score-display-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-6);
  text-align: center;
  margin-bottom: var(--space-6);
}

.score-number {
  font-family: var(--font-mono);
  font-size: var(--size-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-none);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  letter-spacing: var(--tracking-tight);
}

.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
}

.tier-low { background-color: var(--severity-low-bg); color: var(--severity-low); border: 1px solid var(--severity-low); }
.tier-moderate { background-color: var(--severity-mod-bg); color: var(--severity-mod); border: 1px solid var(--severity-mod); }
.tier-elevated { background-color: var(--severity-elev-bg); color: var(--severity-elev); border: 1px solid var(--severity-elev); }
.tier-critical { background-color: var(--severity-crit-bg); color: var(--severity-crit); border: 1px solid var(--severity-crit); }

.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.metric-box {
  background-color: var(--bg-subtle);
  padding: var(--space-4) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  transition: all var(--motion-base) var(--ease-standard);
}

.metric-box:hover {
  background-color: var(--bg-surface);
  border-color: var(--border-medium);
}

.metric-label {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-1);
}

.metric-value {
  font-family: var(--font-mono);
  font-size: var(--size-xl);
  font-weight: var(--weight-bold);
  color: var(--text-highlight);
}

.preview-disclaimer {
  font-size: var(--size-2xs);
  color: var(--text-muted);
  line-height: var(--leading-normal);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-4);
}

/* Lead Gate Section */
.lead-section {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--warning);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  margin-top: var(--space-8);
}

.lead-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--size-3xl);
  margin-bottom: var(--space-2);
  color: var(--text-accent);
}

.lead-desc {
  font-size: var(--size-md);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-field label {
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

.form-field input, .form-field textarea {
  background-color: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--size-md);
  padding: var(--space-3) var(--space-4);
  transition: all var(--motion-base) var(--ease-standard);
}

.form-field input:focus, .form-field textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.email-hint {
  font-size: var(--size-2xs);
  color: var(--text-accent);
  margin-top: var(--space-1);
}

.btn-submit {
  background: var(--primary);
  color: var(--text-on-primary);
  border: 1px solid var(--primary-hover);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-7);
  font-family: var(--font-sans);
  font-size: var(--size-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  width: 100%;
  transition: all var(--motion-base) var(--ease-standard);
  margin-top: var(--space-5);
}

.btn-submit:hover:not(:disabled) {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

.btn-submit:active:not(:disabled) {
  transform: translateY(0);
}

.btn-submit:disabled {
  background: var(--bg-card);
  border-color: var(--border-subtle);
  color: var(--text-muted);
  cursor: not-allowed;
  box-shadow: none;
}

/* Dossier / Report Output View */
.report-modal {
  display: none;
  margin-top: var(--space-9);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-top: 4px solid var(--text-accent);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
}

.report-modal.active {
  display: block;
}

.report-header {
  border-bottom: 2px solid var(--border-subtle);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-7);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.report-title-block h2 {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--size-4xl);
  color: var(--text-primary);
  line-height: var(--leading-tight);
}

.report-ref {
  font-family: var(--font-mono);
  color: var(--text-accent);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  background-color: rgba(var(--accent-rgb), 0.08);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-xs);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  display: inline-block;
  margin-top: var(--space-2);
}

.finding-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  transition: all var(--motion-base) var(--ease-standard);
}

.finding-card:hover {
  border-color: var(--border-medium);
}

.finding-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-3);
}

.finding-title {
  font-family: var(--font-sans);
  font-size: var(--size-xl);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.layer-row {
  margin-bottom: var(--space-3);
  font-size: var(--size-sm);
  line-height: var(--leading-relaxed);
}

.layer-tag {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  color: var(--text-accent);
  background-color: rgba(var(--accent-rgb), 0.08);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  margin-right: var(--space-2);
}

.report-actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-7);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-6);
  flex-wrap: wrap;
}

.btn-primary {
  background-color: var(--text-accent);
  color: var(--text-on-primary);
  border: 1px solid var(--primary-hover);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--motion-base) var(--ease-standard);
}

.btn-primary:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}

.btn-secondary {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all var(--motion-base) var(--ease-standard);
}

.btn-secondary:hover {
  background-color: var(--bg-selected);
  border-color: var(--text-accent);
  color: var(--text-accent);
}

/* Spinner / Loading State */
.spinner {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid rgba(var(--text-on-primary-rgb), 0.4);
  border-radius: var(--radius-circle);
  border-top-color: var(--text-on-primary);
  animation: spin 0.8s linear infinite;
  margin-right: var(--space-2);
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.alert-box {
  padding: var(--space-5) var(--space-5);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-6);
  font-size: var(--size-sm);
  line-height: var(--leading-normal);
}

.alert-danger {
  background-color: var(--severity-crit-bg);
  border: 1px solid var(--severity-crit);
  color: var(--error);        /* 7.55:1 on the tint */
}

/* ==========================================================================
   Contextual OSINT Advisory CTA in Diagnostic Report
   ========================================================================== */
.advisory-cta-card {
  margin: var(--space-8) 0;
  padding: var(--space-7) var(--space-7);
  background: var(--bg-selected);
  border: 1px solid var(--border-medium);
  border-left: 4px solid var(--text-accent);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}

.advisory-cta-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  font-weight: var(--weight-bold);
  color: var(--warning);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background-color: rgba(var(--warning-rgb), 0.12);
  border: 1px solid rgba(var(--warning-rgb), 0.35);
  border-radius: var(--radius-xs);
}

.advisory-cta-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--size-2xl);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}

.advisory-cta-desc {
  font-size: var(--size-md);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
  max-width: 850px;
}

.btn-cta-advisory {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--primary);
  color: var(--text-on-primary);
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--size-sm);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all var(--motion-base) var(--ease-standard);
  cursor: pointer;
  border: 1px solid var(--primary-hover);
}

.btn-cta-advisory:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

/* ==========================================================================
   Provenance, unscored state and source-text separation
   ========================================================================== */

/* Evidentiary tier shown beside each option, derived from the rule registry. */
.option-provenance {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
  padding: var(--space-1) var(--space-2);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  border-radius: var(--radius-xs);
  background-color: rgba(var(--accent-rgb), 0.05);
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-wide);
}

.option-provenance-heuristic {
  border-style: dashed;
  border-color: rgba(var(--warning-rgb), 0.65);
  background-color: rgba(var(--warning-rgb), 0.12);
  color: var(--warning);
}

.provenance-conf {
  color: var(--text-muted);
}

/* The questionnaire's honest empty/partial state. */
.tier-unscored {
  background-color: var(--bg-input);
  color: var(--text-secondary);
  border: 1px dashed var(--border-medium);
}

.unscored-reason {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--border-medium);
  background-color: var(--bg-input);
  font-size: var(--size-xs);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

/* States the fate of pasted clause text at the point it is pasted. */
.clause-note {
  margin-top: var(--space-2);
  font-size: var(--size-2xs);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

/* The epistemic boundary, repeated above the fold. At <=1080px the sticky preview
   that carries the other copy of this notice stacks below the whole form. */
.intro-boundary {
  margin: var(--space-6) 0;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--text-accent);
  border-radius: var(--radius-sm);
  background-color: var(--bg-subtle);
  font-size: var(--size-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.intro-boundary strong {
  color: var(--text-highlight);
}

/* Source text as supplied, kept visually apart from our restatement of it. */
.finding-source-text {
  margin: var(--space-3) 0 var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--border-medium);
  background-color: var(--bg-subtle);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  line-height: var(--leading-normal);
  color: var(--text-highlight);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.finding-source-label {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--size-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
}

/* Tier badges carry an icon as well as their label, matching the rule the
   benchmark tool already follows: never colour alone. */
.tier-badge .tier-icon {
  margin-right: var(--space-1);
}

/* Visually hidden but available to assistive technology. terminal.css had no such
   class, which is why the fieldset legends carried an inline `left: -9999px`. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Institutional Footer */
.site-footer {
  background-color: var(--bg-surface);
  border-top: 1px solid var(--border-medium);
  padding: var(--space-7) var(--space-6);
  margin-top: var(--space-9);
  color: var(--text-secondary);
  font-size: var(--size-sm);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.footer-brand-title {
  font-family: var(--font-sans);
  font-size: var(--size-lg);
  color: var(--text-accent);
  display: block;
  margin-bottom: var(--space-1);
}

.footer-brand-desc {
  color: var(--text-muted);
  font-size: var(--size-xs);
  margin: 0;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.footer-link {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: var(--weight-medium);
  font-size: var(--size-sm);
  transition: color var(--motion-fast) var(--ease-standard);
}

.footer-link:hover, .footer-link:focus {
  color: var(--text-accent);
  text-decoration: underline;
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  color: var(--text-muted);
}


/* ==========================================================================
   HIDDEN NAV ITEMS
   Visually remove Deal Comps from all navigation surfaces.
   ========================================================================== */

.nav-link[href="/deal-comps"],
.footer-link[href="/deal-comps"],
.landing-action[href="/deal-comps"] {
  display: none;
}


/* ==========================================================================
   LINKS THAT ACT AS BUTTONS
   A <button> ignores text-decoration; an <a> carrying a button class does not,
   which is why seven anchors repeated the same three declarations inline.
   ========================================================================== */

a.btn-submit,
a.btn-primary,
a.btn-secondary,
a.btn-filter-apply,
a.btn-table-action {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* ==========================================================================
   ERROR PAGE
   ========================================================================== */

.error-page {
  max-width: 680px;
  margin: var(--space-9) auto;
  text-align: center;
}

.error-code {
  font-family: var(--font-mono);
  font-size: var(--size-4xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text-accent);
  margin-bottom: var(--space-2);
}

.error-page .intro-title {
  margin-bottom: var(--space-4);
}

.error-page .intro-lead {
  margin-bottom: var(--space-7);
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* Four choices of equal weight but one recommended, so they share a geometry and
   differ only in fill. Without align-items above, a wrapped row stretched the
   secondary beside the taller primary and left the second row short. */
.error-actions a.btn-submit {
  width: auto;
  padding: var(--space-3) var(--space-6);
  font-size: var(--size-sm);
}

/* ==========================================================================
   DIAGNOSTIC: SMALL LAYOUT PIECES THAT WERE WRITTEN INLINE
   ========================================================================== */

.intro-note {
  font-size: var(--size-sm);
  color: var(--text-muted);
}

.form-field-spaced {
  margin-top: var(--space-4);
}

.report-score-block {
  text-align: right;
}

.report-score-value {
  font-family: var(--font-mono);
  font-size: var(--size-3xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* ==========================================================================
   SKIP LINK
   Off-screen until focused, then a real target above the sticky masthead.
   ========================================================================== */

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: calc(var(--space-2) * -10);
  z-index: var(--z-modal);
  padding: var(--space-2) var(--space-4);
  background-color: var(--primary);
  color: var(--text-on-primary);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: top var(--motion-fast) var(--ease-standard);
}

.skip-link:focus {
  top: var(--space-2);
}

/* No rule suppresses the ring on the target. The global ring is :focus-visible,
   which programmatic focus on a container does not match, so <main> takes focus
   for the screen reader without drawing a box around the page. */

/* ==========================================================================
   STATUTORY NOTICE DIALOG
   The full text of each surface's legal notice, opened from the status line.

   These rules are a deliberate second implementation rather than a reuse of
   .drawer-* from benchmark.css: that stylesheet is linked only from /benchmark,
   /advisory and /deal-comps, so on the diagnostic and on the 404 page it does
   not exist. A shell primitive has to live in the stylesheet every page loads.

   Closed state uses `visibility: hidden`, not transform alone. The benchmark
   drawer leaves its close button in the tab order while translated off-screen;
   that is not a pattern worth copying.
   ========================================================================== */

.legal-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(var(--shadow-rgb), 0.45);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  /* visibility is deliberately NOT transitioned -- see .legal-modal below. */
  transition: opacity var(--motion-base) var(--ease-standard);
}

.legal-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.legal-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(640px, calc(100% - var(--space-8)));
  max-height: 80vh;
  transform: translate(-50%, -50%) scale(0.98);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-top: 3px solid var(--text-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  /* Opacity and transform fade; visibility does not. Transitioning visibility
     looks harmless and is not: the property steps discretely, so for the first
     frame after .active is added the dialog computes as `hidden` and refuses
     focus. That single frame is why the benchmark drawer focuses its close
     button behind a 100ms setTimeout. Leaving visibility out of the transition
     removes the race rather than waiting it out. */
  transition: opacity var(--motion-base) var(--ease-standard),
              transform var(--motion-base) var(--ease-standard);
}

.legal-modal.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.legal-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  background-color: var(--bg-panel);
}

.legal-modal-title {
  font-family: var(--font-sans);
  font-size: var(--size-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-snug);
}

.btn-legal-close {
  background-color: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color var(--motion-base) var(--ease-standard),
              border-color var(--motion-base) var(--ease-standard),
              color var(--motion-base) var(--ease-standard);
}

.btn-legal-close:hover {
  background-color: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.legal-modal-body {
  padding: var(--space-6);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.legal-modal-statement {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-wide);
  color: var(--text-primary);
}

.legal-modal-standing {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--size-sm);
  color: var(--text-secondary);
}

.legal-modal-standing li {
  display: flex;
  gap: var(--space-3);
}

.legal-modal-standing li::before {
  content: "\2014";
  color: var(--text-accent);
  flex: 0 0 auto;
}