/* ==========================================================================
   SIVD - Tool 2: Sovereign Contractual Benchmark & Source Research Database
   Institutional Stylesheet (WCAG 2.2 AA High-Contrast Light Palette)

   Colour comes from terminal.css's :root tokens. The literals that remain here
   are the tinted callouts and badges; each is a dark ink on a light tint, and
   none of them carries meaning by colour alone -- the dashed-vs-solid borders
   and the icon glyphs do that, per docs/UX_TRUST_AUDIT.md.
   ========================================================================== */

/* Main Container Override */
.benchmark-container {
  max-width: var(--max-width);
  margin: var(--space-6) auto var(--space-10) auto;
  padding: 0 var(--space-6);
}

/* ==========================================================================
   HERO & POSITIONING SECTION
   ========================================================================== */

.benchmark-hero {
  background-color: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-8);
  margin-bottom: var(--space-7);
  position: relative;
  overflow: hidden;
}

.benchmark-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-accent);
}

.hero-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.hero-title-group {
  max-width: 820px;
}

.hero-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--size-2xs);
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin-bottom: var(--space-2);
}

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

.hero-subtitle {
  font-size: var(--size-md);
  color: var(--color-ink);
  line-height: var(--leading-relaxed);
}

/* Hero Stats Display */
.hero-stats-strip {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  align-items: stretch;
}

.stat-card {
  background-color: var(--color-raised);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  min-width: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: border-color var(--motion-base) var(--ease-standard);
}

.stat-card:hover {
  border-color: var(--color-line-strong);
}

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

.stat-card-value {
  font-family: var(--font-sans);
  font-size: var(--size-3xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
  line-height: var(--leading-tight);
}

.stat-card-verified .stat-card-value {
  color: var(--severity-low);
}

.stat-card-fixtures .stat-card-value {
  color: var(--warning);
}

/* Prominent Integrity Notice */
.integrity-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  margin-top: var(--space-6);
  font-size: var(--size-sm);
  line-height: var(--leading-normal);
}

.integrity-synthetic-notice {
  background-color: var(--color-warn-bg);
  border: 1px solid var(--color-amber);
  color: var(--color-warn-ink);
}

.integrity-icon {
  font-size: var(--size-xl);
  line-height: var(--leading-none);
}

/* Epistemic Boundary Card */
.epistemic-boundary-box {
  background-color: var(--color-note-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-6);
  font-size: var(--size-xs);
  color: var(--color-note-ink);
}

.epistemic-boundary-header {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  color: var(--text-accent);
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-2);
}

.epistemic-prohibitions {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-top: var(--space-2);
  color: var(--text-muted);
}

.epistemic-prohibitions span {
  display: inline-flex;
  /* baseline, not centre: a prohibition that wraps to two lines would otherwise
     float its marker to the vertical middle of the pair. */
  align-items: baseline;
  gap: var(--space-1);
}

/* The marker is a flex item and shrinks by default, which broke "x NOT" across
   two lines in the narrow grid cells on the advisory page. */
.epistemic-prohibitions strong {
  flex-shrink: 0;
  color: var(--severity-crit);
}

/* ==========================================================================
   FILTER TOOLBAR SECTION
   ========================================================================== */

.filter-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.filter-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.filter-heading {
  font-family: var(--font-sans);
  font-size: var(--size-lg);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.filter-results-counter {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--text-muted);
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
  align-items: end;
}

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

.filter-field.filter-search-field {
  grid-column: 1 / -1;
}

.filter-field label {
  font-size: var(--size-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-secondary);
}

.filter-input,
.filter-select {
  min-height: 2.75rem;
  background-color: var(--color-bg);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  padding: 0.5rem 0.75rem;
  transition: border-color var(--motion-base) var(--ease-standard),
              background-color var(--motion-base) var(--ease-standard);
  width: 100%;
}

.filter-input:focus,
.filter-select:focus {
  border-color: var(--color-accent);
  background-color: var(--color-surface);
}

.filter-actions-bar,
.filter-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--border-subtle);
  flex-wrap: wrap;
}

/* Active Filter Tag Chips */
.active-filter-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}
.chips-title {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: var(--tracking-wider);
}
.chips-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background-color: var(--bg-selected);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: var(--radius-xs);
  padding: var(--space-1) var(--space-2);
  font-size: var(--size-xs);
  color: var(--text-primary);
}
.chip-label {
  font-weight: var(--weight-semibold);
  color: var(--text-accent);
}
.chip-value {
  color: var(--text-highlight);
}
.btn-remove-chip {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--size-md);
  line-height: var(--leading-none);
  cursor: pointer;
  padding: 0 var(--space-1);
  margin-left: var(--space-1);
  border-radius: var(--radius-xs);
}
.btn-remove-chip:hover {
  color: var(--severity-crit);
}
.btn-clear-chips {
  background: none;
  border: none;
  color: var(--text-accent);
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  text-decoration: underline;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
}
.btn-clear-chips:hover {
  color: var(--primary-hover);
}

.btn-filter-reset {
  min-height: 2.75rem;
  background-color: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-size: var(--size-xs);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background-color var(--motion-base) var(--ease-standard),
              border-color var(--motion-base) var(--ease-standard);
}

.btn-filter-reset:hover {
  background-color: var(--color-raised);
  color: var(--color-ink);
  border-color: var(--color-line-strong);
}

/* The per-row CTA on both the benchmark and deal-comps tables. It is rendered as
   an <a> by one template and a <button> by the other, so the display and text
   decoration are stated rather than inherited from the element. */
.btn-row-action,
.btn-table-action {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  background-color: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--motion-base) var(--ease-standard),
              border-color var(--motion-base) var(--ease-standard);
}

.btn-row-action:hover,
.btn-table-action:hover {
  background-color: var(--color-raised);
  border-color: var(--color-accent);
  color: var(--color-ink);
}

.btn-filter-apply {
  min-height: 2.75rem;
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-5);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background-color var(--motion-base) var(--ease-standard),
              border-color var(--motion-base) var(--ease-standard);
}

.btn-filter-apply:hover {
  background-color: var(--color-ink);
  border-color: var(--color-ink);
}

.filter-share-hint {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  color: var(--text-muted);
  margin-left: auto;
}

/* ==========================================================================
   DATA TABLE SECTION
   ========================================================================== */

.table-wrapper {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--space-6);
}

.benchmark-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-sm);
  text-align: left;
  min-width: 960px;
}

.benchmark-table th {
  background-color: var(--color-raised);
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: var(--size-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-line);
  white-space: nowrap;
}

.benchmark-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-line);
  vertical-align: middle;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.benchmark-row {
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-standard);
}

.benchmark-row:hover {
  background-color: var(--color-raised);
}

.benchmark-row:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  background-color: var(--color-raised);
}

.cell-country {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  max-width: 180px;
}

.cell-issuer {
  color: var(--text-secondary);
  font-size: var(--size-xs);
  max-width: 170px;
}

.cell-year {
  font-family: var(--font-mono);
  color: var(--text-accent);
}

.cell-law,
.cell-jurisdiction {
  font-size: var(--size-xs);
  color: var(--text-highlight);
}

.cell-cac,
.cell-immunity {
  font-size: var(--size-xs);
  max-width: 160px;
  color: var(--text-secondary);
  line-height: var(--leading-snug);
}

/* ==========================================================================
   VERIFICATION BADGES (Never use color alone)
   ========================================================================== */

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

/* Verified: Solid emerald border + checkmark icon */
.badge-verified {
  background-color: rgba(var(--success-rgb), 0.12);
  color: var(--severity-low);
  border: 1px solid var(--severity-low);
}

/* Source Found: Solid cyan/blue border + magnifying glass */
.badge-source-found {
  background-color: rgba(var(--info-rgb), 0.12);
  color: var(--info);
  border: 1px solid var(--info);
}

/* Unverified: Dashed amber border + warning triangle */
.badge-unverified {
  background-color: rgba(var(--warning-rgb), 0.12);
  color: var(--severity-mod);
  border: 1px dashed var(--severity-mod);
}

/* Synthetic: Dashed orange/muted border + gear icon */
.badge-synthetic {
  background-color: rgba(var(--severity-elev-rgb), 0.12);
  color: var(--severity-elev);
  border: 1px dashed var(--severity-elev);
}

.badge-icon {
  /* em, not a token: the glyph tracks the size of the label beside it. */
  font-size: 0.85em;
  font-weight: var(--weight-bold);
}

/* Action View Button in Table */
.btn-view-dossier {
  background-color: var(--bg-panel);
  color: var(--text-accent);
  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-2xs);
  cursor: pointer;
  transition: all var(--motion-base) var(--ease-standard);
  white-space: nowrap;
}

.btn-view-dossier:hover {
  background-color: var(--bg-card);
  border-color: var(--border-focus);
  color: var(--primary-hover);
}

/* ==========================================================================
   PAGINATION BAR
   ========================================================================== */

.pagination-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--size-xs);
}

.pagination-info {
  color: var(--text-secondary);
}

.pagination-controls {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.btn-page {
  background-color: var(--bg-panel);
  color: var(--text-primary);
  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-xs);
  cursor: pointer;
  transition: all var(--motion-base) var(--ease-standard);
}

.btn-page:hover:not(:disabled) {
  background-color: var(--bg-card);
  border-color: var(--border-medium);
}

.btn-page:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-page.active {
  background-color: var(--border-focus);
  color: var(--text-on-primary);
  font-weight: var(--weight-bold);
  border-color: var(--border-focus);
}

.page-size-selector {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
}

.page-size-selector select {
  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-2xs);
  padding: var(--space-1) var(--space-2);
}

/* ==========================================================================
   EMPTY & ERROR & LOADING STATES
   ========================================================================== */

.table-state-box {
  padding: var(--space-10) var(--space-7);
  text-align: center;
}

.state-icon {
  font-size: var(--size-4xl);
  margin-bottom: var(--space-4);
  display: block;
}

.state-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);
}

.state-desc {
  font-size: var(--size-sm);
  color: var(--text-secondary);
  max-width: 500px;
  margin: 0 auto var(--space-6) auto;
  line-height: var(--leading-normal);
}

/* Skeleton Loading Table */
.skeleton-row td {
  padding: var(--space-5) var(--space-4);
}

.skeleton-bone {
  height: 14px;
  background: linear-gradient(90deg, var(--bg-panel) 25%, var(--bg-card) 50%, var(--bg-panel) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================================================
   ACCESSIBLE DETAIL DRAWER
   ========================================================================== */

.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(var(--shadow-rgb), 0.45);
  backdrop-filter: blur(4px);
  z-index: var(--z-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-base) var(--ease-standard);
}

.drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 760px;
  background-color: var(--bg-surface);
  border-left: 1px solid var(--border-medium);
  box-shadow: var(--shadow-overlay);
  z-index: var(--z-modal);
  transform: translateX(100%);
  transition: transform var(--motion-slow) var(--ease-standard);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.drawer-panel.active {
  transform: translateX(0);
}

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

.drawer-header-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--size-2xl);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.drawer-header-subtitle {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--text-accent);
}

.btn-drawer-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;
  transition: all var(--motion-base) var(--ease-standard);
}

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

.drawer-body {
  padding: var(--space-7);
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

/* Prominent Drawer Alert Banner */
.drawer-alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--size-sm);
  line-height: var(--leading-normal);
}

.alert-synthetic {
  background-color: rgba(var(--severity-elev-rgb), 0.12);
  border: 1px solid var(--severity-elev);
  color: var(--severity-elev);
}

.alert-unverified {
  background-color: rgba(var(--warning-rgb), 0.12);
  border: 1px solid var(--severity-mod);
  color: var(--warning);
}

/* Metadata Grid in Drawer */
.drawer-section-title {
  font-family: var(--font-sans);
  font-size: var(--size-lg);
  color: var(--text-accent);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.detail-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 600px) {
  .detail-meta-grid {
    grid-template-columns: 1fr;
  }
}

.meta-item {
  background-color: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}

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

.meta-value {
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-highlight);
  word-break: break-word;
}

/* ==========================================================================
   CONTRACTUAL CLAUSES & EPISTEMIC SEPARATION
   ========================================================================== */

.clause-dossier-card {
  background-color: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.clause-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.clause-title {
  font-family: var(--font-sans);
  font-size: var(--size-md);
  color: var(--text-primary);
}

/* Layer 1: Observed Contractual Feature */
.layer-block {
  margin-bottom: var(--space-5);
}

.layer-tag-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--size-3xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.layer-tag-feature {
  background-color: rgba(var(--accent-rgb), 0.1);
  color: var(--text-accent);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
}

.layer-tag-authority {
  background-color: rgba(var(--info-rgb), 0.12);
  color: var(--info);
  border: 1px solid rgba(var(--info-rgb), 0.35);
}

.layer-tag-commentary {
  background-color: rgba(var(--analytical-rgb), 0.12);
  color: var(--analytical);
  border: 1px solid rgba(var(--analytical-rgb), 0.35);
}

.verbatim-container {
  position: relative;
  background-color: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-focus);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
}

.exact-clause-text {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.btn-copy-clause {
  margin-top: var(--space-3);
  background-color: var(--bg-surface);
  color: var(--text-secondary);
  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-2xs);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: all var(--motion-base) var(--ease-standard);
}

.btn-copy-clause:hover {
  background-color: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-focus);
}

.btn-copy-clause.copied {
  color: var(--severity-low);
  border-color: var(--severity-low);
}

/* Layer 2: Source Authority */
.authority-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  font-size: var(--size-xs);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}

.authority-link {
  color: var(--info);
  text-decoration: none;
  word-break: break-all;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.authority-link:hover {
  text-decoration: underline;
}

/* Layer 3: Analytical Consideration */
.analytical-box {
  background-color: rgba(var(--analytical-rgb), 0.05);
  border: 1px solid rgba(var(--analytical-rgb), 0.25);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--size-sm);
  color: var(--text-primary);
  line-height: var(--leading-normal);
}

.analytical-standard-disclaimer {
  font-size: var(--size-xs);
  color: var(--text-secondary);
  font-style: italic;
  margin-top: var(--space-2);
  border-top: 1px dashed rgba(var(--analytical-rgb), 0.2);
  padding-top: var(--space-2);
}

/* ==========================================================================
   NICHE 3 CONTEXTUAL CTA
   ========================================================================== */

.niche-cta-card {
  background: var(--bg-selected);
  border: 1px solid var(--border-medium);
  border-left: 4px solid var(--border-focus);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-top: var(--space-7);
}

.niche-cta-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  color: var(--text-accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin-bottom: var(--space-2);
}

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

.niche-cta-body {
  font-size: var(--size-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-5);
}

.btn-niche-intake {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background-color: var(--text-accent);
  color: var(--text-on-primary);
  text-decoration: none;
  font-size: var(--size-md);
  font-weight: var(--weight-semibold);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  transition: all var(--motion-base) var(--ease-standard);
}

.btn-niche-intake:hover {
  background-color: var(--primary-hover);
  transform: translateY(-1px);
  color: var(--text-on-primary);
}

.niche-cta-disclaimer {
  font-size: var(--size-2xs);
  color: var(--text-muted);
  line-height: var(--leading-snug);
  margin-top: var(--space-4);
  border-top: 1px solid rgba(var(--shadow-rgb), 0.1);
  padding-top: var(--space-3);
}

/* Responsive Rules for Small Devices */
@media (max-width: 768px) {
  .benchmark-container {
    padding: 0 var(--space-4);
  }
  .benchmark-hero {
    padding: var(--space-6);
  }
  .hero-title {
    font-size: var(--size-2xl);
  }
  .filter-grid {
    grid-template-columns: 1fr;
  }
  .drawer-panel {
    max-width: 100%;
  }
  .drawer-body {
    padding: var(--space-5);
  }
}

/* ==========================================================================
   NICHE 3 ADVISORY INTAKE STYLES
   ========================================================================== */

.advisory-container {
  max-width: 980px;
  margin: var(--space-7) auto var(--space-10) auto;
  padding: 0 var(--space-6);
}

.deliverables-section {
  margin-bottom: var(--space-8);
}

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

.deliverables-subheading {
  font-size: var(--size-md);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
}

.deliverables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.deliverable-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--border-focus);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
}

.deliverable-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  color: var(--text-accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-1);
}

.deliverable-title {
  font-family: var(--font-sans);
  font-size: var(--size-lg);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  font-weight: var(--weight-semibold);
}

.deliverable-desc {
  font-size: var(--size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
  line-height: var(--leading-normal);
}

.deliverable-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4) 0;
  flex: 1;
}

.deliverable-list li {
  font-size: var(--size-xs);
  color: var(--text-highlight);
  padding: var(--space-1) 0;
  border-bottom: 1px solid rgba(var(--shadow-rgb), 0.06);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.deliverable-list li::before {
  content: "•";
  color: var(--text-accent);
  /* em, not a token: the bullet tracks its list item. */
  font-size: 1.1em;
}

.deliverable-provenance-tag {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  color: var(--text-muted);
  background-color: var(--bg-panel);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-subtle);
  margin-top: auto;
  text-align: center;
}

.important-qualification-box {
  background-color: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  margin-bottom: var(--space-7);
  font-size: var(--size-sm);
  line-height: var(--leading-normal);
  color: var(--text-primary);
}

.important-qualification-box strong {
  color: var(--text-accent);
}

.confidentiality-warning-callout {
  background-color: rgba(var(--warning-rgb), 0.12);
  border: 1px solid var(--severity-mod);
  border-left: 4px solid var(--severity-mod);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  font-size: var(--size-sm);
  line-height: var(--leading-normal);
  color: var(--warning);
}

.confidentiality-warning-callout strong {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--severity-mod);
  margin-bottom: var(--space-1);
}

.intake-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: var(--space-7);
}

.intake-heading {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--size-3xl);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.intake-subhead {
  font-size: var(--size-md);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.attribution-banner {
  background-color: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--text-accent);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--text-accent);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.success-dossier-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--severity-low);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  text-align: center;
}

.success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-circle);
  background-color: var(--severity-low-bg);
  border: 2px solid var(--severity-low);
  color: var(--severity-low);
  font-size: var(--size-3xl);
  margin-bottom: var(--space-5);
}

.success-headline {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--size-3xl);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.success-body {
  font-size: var(--size-md);
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto var(--space-6) auto;
  line-height: var(--leading-relaxed);
}

.success-ref-box {
  display: inline-block;
  background-color: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--size-md);
  color: var(--text-accent);
  margin-bottom: var(--space-7);
}

/* ==========================================================================
   Advisory intake: inline validation and result states
   Replaces inline colours on the error callout. The old heading colour was
   #ef4444 on the red tint = 4.09:1, below the 4.5:1 floor.
   ========================================================================== */
.field-error {
  margin-top: var(--space-2);
  font-size: var(--size-xs);
  line-height: var(--leading-normal);
  color: var(--severity-crit);   /* 7.03:1 on --bg-input */
}

.field-error::before {
  content: "\26A0";          /* never colour alone */
  margin-right: var(--space-2);
}

[aria-invalid="true"] {
  border-color: var(--severity-crit) !important;
}

.intake-error-callout {
  border-color: var(--severity-crit);
  border-left-color: var(--severity-crit);
  background-color: rgba(var(--error-rgb), 0.12);
  color: var(--error);                 /* 8.07:1 on the tint */
}

.intake-error-callout strong {
  color: var(--severity-crit);    /* 5.83:1 on the tint */
}

.intake-error-callout::before {
  content: "\26A0";
  margin-right: var(--space-2);
}

/* Focus targets for the post-submit states. Both are moved to programmatically, so
   they must show a ring when that happens. */
#intake-success-card:focus-visible,
#intake-error-card:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* ==========================================================================
   ADVISORY INTAKE: LAYOUT THAT USED TO LIVE IN style ATTRIBUTES
   Thirty of the fifty-two presentational inline styles in this project were on
   this page, including the whole appearance of the commercial terms box and
   both attribution banners.
   ========================================================================== */

.epistemic-boundary-inset {
  margin-top: var(--space-6);
}

/* The advisory page lists its prohibitions in columns rather than a wrapped row,
   because there are more of them and they must all stay above the fold. */
.epistemic-prohibitions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.pricing-notice-box {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--bg-surface);
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-sm);
}

.pricing-notice-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.pricing-notice-label {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-accent);
}

.pricing-notice-value {
  margin-top: var(--space-1);
  font-size: var(--size-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.pricing-notice-meta {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--text-muted);
}

.attribution-glyph {
  margin-right: var(--space-2);
}

.attribution-detail {
  margin-top: var(--space-1);
  font-size: var(--size-xs);
  color: var(--text-secondary);
}

/* The verification state of a referred benchmark: synthetic fixture, unverified,
   or verified research record. It must stay legible next to the claim it
   qualifies -- see CLAUDE.md on labelling unverified research. */
.attribution-state {
  display: inline-block;
  margin-left: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  color: var(--text-accent);
}

.intake-feedback-slot {
  margin-bottom: var(--space-7);
}

.form-field-full {
  grid-column: 1 / -1;
}

.form-field-full-spaced {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
}

.confidentiality-subnote {
  margin-top: var(--space-2);
  font-size: var(--size-xs);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}

.consent-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
  margin-bottom: var(--space-6);
  font-size: var(--size-sm);
}

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
}

.consent-row input[type="checkbox"] {
  margin-top: var(--space-1);
}

.consent-text {
  color: var(--text-highlight);
}

.btn-submit-intake {
  width: auto;
  padding: var(--space-3) var(--space-8);
}

.success-summary {
  margin-bottom: var(--space-7);
  font-size: var(--size-xs);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

/* Glyph-and-text pairs. The glyph is aria-hidden and the text carries the meaning,
   which is the rule that keeps a provenance signal off colour alone. */
.integrity-glyph,
.copy-icon {
  flex-shrink: 0;
}

.integrity-text,
.copy-label {
  min-width: 0;
}