/* ==========================================================================
   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(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  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(--primary);
}

.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-mono);
  font-size: var(--size-2xs);
  font-weight: var(--weight-semibold);
  color: var(--text-accent);
  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(--text-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
}

.hero-subtitle {
  font-size: var(--size-md);
  color: var(--text-secondary);
  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(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  min-width: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all var(--motion-base) var(--ease-standard);
}

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

.stat-card-label {
  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);
  margin-bottom: var(--space-1);
}

.stat-card-value {
  font-family: var(--font-mono);
  font-size: var(--size-3xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  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-sm);
  margin-top: var(--space-6);
  font-size: var(--size-sm);
  line-height: var(--leading-normal);
}

.integrity-synthetic-notice {
  background-color: rgba(var(--warning-rgb), 0.12);
  border: 1px solid rgba(var(--warning-rgb), 0.4);
  color: var(--warning);
}

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

/* Epistemic Boundary Card */
.epistemic-boundary-box {
  background-color: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-6);
  font-size: var(--size-xs);
  color: var(--text-secondary);
}

.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 {
  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-sm);
  padding: var(--space-2) var(--space-3);
  transition: border-color var(--motion-base) var(--ease-standard);
  width: 100%;
}

.filter-input:focus,
.filter-select:focus {
  border-color: var(--border-focus);
  /* The 1px border swap alone is unlikely to meet 2.4.11's minimum area, and it
     was the weakest focus treatment in either stylesheet. Pair it with the ring
     the rest of the application uses. */
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.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 {
  background-color: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  font-size: var(--size-xs);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all var(--motion-base) var(--ease-standard);
}

.btn-filter-reset:hover {
  background-color: var(--bg-panel);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

/* 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;
  background-color: transparent;
  color: var(--text-accent);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xs);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--motion-base) var(--ease-standard);
}

.btn-row-action:hover,
.btn-table-action:hover {
  background-color: var(--bg-selected);
  border-color: var(--text-accent);
}

.btn-filter-apply {
  background-color: var(--text-accent);
  color: var(--text-on-primary);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-5);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: background-color var(--motion-base) var(--ease-standard);
}

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

.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(--bg-panel);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.benchmark-table td {
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  color: var(--text-primary);
}

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

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

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

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