/* ==========================================================================
   TokenRestake Component Styles
   Specialized components for briefing notes, comparisons, and risk matrices
   ========================================================================== */

/* Definition Callout Box */
.definition-box {
  background-color: #1a202a;
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--accent-primary);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin: var(--space-6) 0 var(--space-8) 0;
}

.definition-box-label {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--accent-primary);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.definition-box-text {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--text-primary);
  line-height: var(--leading-normal);
  margin-bottom: 0;
}

/* Alert & Notice Boxes */
.notice-box {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-6) 0;
}

.notice-warning {
  background-color: var(--bg-alert-soft);
  border-color: var(--warning-border);
  border-left: 4px solid var(--warning-primary);
}

.notice-warning .notice-title {
  color: var(--warning-primary);
}

.notice-danger {
  background-color: var(--bg-danger-soft);
  border-color: var(--danger-border);
  border-left: 4px solid var(--danger-primary);
}

.notice-danger .notice-title {
  color: var(--danger-primary);
}

.notice-title {
  font-weight: 700;
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.notice-box p:last-child {
  margin-bottom: 0;
}

/* Page Meta / Header Intro */
.page-intro {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

.page-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-light);
}

/* The homepage has no breadcrumb for the review line to sit under, so it
   closes the page instead of opening it. Same type, rule on the other edge. */
.page-header-meta-end {
  margin-top: var(--space-10);
  margin-bottom: 0;
  padding-top: var(--space-4);
  padding-bottom: 0;
  border-top: 1px solid var(--border-light);
  border-bottom: none;
}

.meta-pill {
  display: inline-block;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  padding: 2px 8px;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: 9999px;
  color: var(--text-secondary);
}

.meta-pill-accent {
  background-color: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-primary);
}

/* Hero Eyebrow & Deck */
.hero-eyebrow {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--accent-primary);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.hero-deck {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

/* Card Grids */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin: var(--space-6) 0 var(--space-12) 0;
}

@media (min-width: 640px) {
  .card-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .card-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease;
}

/* A card holds a link, so it answers the pointer: the one family of the three
   that is meant to be picked up. */
.card:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-md);
}

.card-title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.card-title a {
  color: var(--text-primary);
  text-decoration: none;
}

.card-title a:hover {
  color: var(--accent-primary);
}

.card-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  flex-grow: 1;
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
}

.card-footer {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
  font-size: var(--text-xs);
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Three Doors Component on Homepage */
.three-doors {
  margin: var(--space-8) 0 var(--space-12) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* One of three parallel options rather than a thing to click, so it keeps its
   border and is marked as a member of a set by the rule along its top edge. */
.door-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--accent-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: relative;
}

.door-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.door-index-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-light);
  color: var(--accent-primary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
}

.door-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.door-card p {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

/* 2026 Context Stack */
.context-stack {
  margin: var(--space-6) 0 var(--space-12) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.context-row {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--accent-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-5) var(--space-6);
}

.context-row-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.context-row p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: 0;
  line-height: var(--leading-normal);
}

/* Diagram SVG Wrapper */
/* Three families, not one rectangle
   -----------------------------------------------------------------------
   .card, .door-card and .diagram-wrapper rendered identically — same fill,
   same 1px border, same 16px radius — so something you click, one of three
   parallel options, and a frame around a picture all read as the same object.
   Measured on the homepage: six elements shared one treatment.

   The fill stays the same in all three, deliberately: each diagram carries its
   own palette built against --bg-surface, and the suite checks every label's
   contrast on it. Changing the fill under a diagram would move a baseline that
   nine files and one check depend on. So they differ in border, elevation and
   radius instead, which costs nothing and is what the eye reads first.

   This one is a plate the picture sits on, so it loses the border and keeps
   only the fill and a shadow. */
.diagram-wrapper {
  margin: var(--space-6) 0 var(--space-10) 0;
  /* No width: 100% here. A block element already fills its container, and an
     explicit 100% resolves against the container rather than against the
     negative margins below, which pinned this to 736px and shifted it left out
     of the text column instead of widening it. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: none;
  border-radius: var(--radius-lg);
  background-color: var(--bg-surface);
  padding: var(--space-6);
}

.diagram-image {
  display: block;
  width: 100%;
  min-width: 600px;
  height: auto;
}

/* Data & Comparison Tables */
.table-wrapper {
  /* See .diagram-wrapper: width: 100% defeats the bleed. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-6) 0 var(--space-8) 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background-color: var(--bg-surface);
}

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

th, td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}

th {
  background-color: var(--bg-subtle);
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  white-space: nowrap;
}

tr:last-child td {
  border-bottom: none;
}

tr:hover td {
  background-color: var(--bg-canvas);
}

/* Flow & Architecture Diagram Boxes */
.diagram-container {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin: var(--space-6) 0 var(--space-8) 0;
}

.diagram-title {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  text-align: center;
}

.diagram-flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}

@media (min-width: 640px) {
  .diagram-flow-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
}

.diagram-node {
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  text-align: center;
  flex: 1;
}

.diagram-node-accent {
  background-color: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-primary);
  font-weight: 600;
}

.diagram-node-danger {
  background-color: var(--bg-danger-soft);
  border-color: var(--danger-border);
  color: var(--danger-primary);
  font-weight: 600;
}

.diagram-arrow {
  color: var(--text-muted);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-2);
}

/* Standard Guide Conclusion Box */
.guide-conclusion-clause {
  margin-top: var(--space-12);
  padding: var(--space-4) var(--space-6);
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}

/* Breadcrumbs */
.breadcrumbs {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

.breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--accent-primary);
  text-decoration: underline;
}

.breadcrumbs-separator {
  margin: 0 var(--space-2);
}

/* Decision Diagnostic (Guide 10) Checklist Styles */
.diagnostic-checklist {
  list-style: none;
  padding-left: 0;
  margin: var(--space-6) 0;
}

.diagnostic-item {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-4);
}

.diagnostic-item-title {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.diagnostic-item p {
  font-size: var(--text-sm);
  margin-bottom: 0;
}

/* Logo & Mark Utilities */
.logo-image {
  display: block;
  height: 24px;
  width: auto;
}

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

.footer-mark {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-sm);
  vertical-align: middle;
}

/* Guides Index Table of Contents (TOC) */
.toc-section {
  margin-top: var(--space-6);
  margin-bottom: var(--space-8);
}

.toc-section-title {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border-light);
}

.toc-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.toc-item {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 0;
}

.toc-item:last-child {
  border-bottom: none;
}

.toc-item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.toc-item-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--accent-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.toc-item-title:hover {
  color: var(--accent-hover);
}

.toc-meta {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--text-muted);
  white-space: nowrap;
}

.toc-item-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: 0;
  line-height: var(--leading-normal);
}

/* Guide Pagination (Previous / Next Navigation) */
.guide-pagination {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-light);
}

.pagination-link {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-4);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  text-decoration: none;
  flex: 1;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pagination-link:hover {
  border-color: var(--border-strong);
  background-color: var(--bg-subtle);
  text-decoration: none;
}

.pagination-prev {
  text-align: left;
}

.pagination-next {
  text-align: right;
  margin-left: auto;
}

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

.pagination-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent-primary);
}

.pagination-link:hover .pagination-title {
  color: var(--accent-hover);
}

/* Start Page Next-Steps Box */
.guide-nav-box {
  margin-top: var(--space-8);
}

/* Glossary Styles */
.glossary-list {
  margin-top: var(--space-6);
}

.glossary-entry {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-light);
  scroll-margin-top: 80px;
}

.glossary-entry:last-child {
  border-bottom: none;
}

.glossary-term {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 0;
  margin-bottom: var(--space-2);
}

.glossary-entry p {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-bottom: 0;
  line-height: var(--leading-relaxed);
}

/* Source Lists on Incident Case Files
   Citations carry target="_blank" rel="noopener noreferrer" in the markup, the
   same convention the outbound links on /privacy/ already use, so a reader
   checking a source does not announce this site to the publisher. */
.source-list {
  list-style: none;
  counter-reset: source;
  padding-left: 0;
  margin: var(--space-4) 0 var(--space-8) 0;
}

.source-list li {
  counter-increment: source;
  position: relative;
  padding: var(--space-3) 0 var(--space-3) var(--space-8);
  border-bottom: 1px solid var(--border-light);
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}

.source-list li:last-child {
  border-bottom: none;
}

.source-list li::before {
  content: counter(source);
  position: absolute;
  left: 0;
  top: var(--space-3);
  width: var(--space-6);
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
}

.source-list a {
  font-weight: 600;
  color: var(--accent-primary);
}

/* Wide Viewports: let data break out of the prose column
   -----------------------------------------------------------------------
   The text measure deliberately stays at --max-width-content. Widening prose
   past roughly 75 characters a line hurts readability, so the fix for a wide
   screen is not a wider column.

   Tables and diagrams are the opposite case. The container's content box is
   736px, while `table` carries min-width: 620px, `.diagram-image` carries
   min-width: 600px, and every diagram is authored at a 760px viewBox. Before
   this rule the stylesheet had no breakpoint above 640px at all, so on a 4K
   display the comparison matrix was still squeezed into 736px and scrolling
   sideways, and every diagram was being scaled down from 760px, with
   thousands of spare pixels either side.

   The bleed is a fixed length rather than a vw calculation on purpose: 100vw
   includes the scrollbar in some browsers, which would reintroduce horizontal
   overflow at precisely the widths this is meant to fix. Every wrapper in the
   site is a direct child of .container, so symmetric negative margins cannot
   escape a narrower ancestor.

   Each step leaves room at its own breakpoint; test-verification.js checks
   that arithmetic, so raising a bleed without raising its breakpoint fails. */
:root { --bleed: 0rem; }

@media screen and (min-width: 1100px) { :root { --bleed: 7rem; } }
@media screen and (min-width: 1500px) { :root { --bleed: 12rem; } }
@media screen and (min-width: 1900px) { :root { --bleed: 16rem; } }

/* Structural blocks bleed. Prose does not, and neither do the boxes that hold
   prose (.notice-box, .definition-box), or the reading column would stretch
   with them. Every selector here was checked to be a direct child of
   .container, so the negative margins cannot escape a narrower ancestor. */
.diagram-wrapper,
.table-wrapper,
.card-grid,
.three-doors,
.context-stack,
.page-rail {
  margin-left: calc(-1 * var(--bleed));
  margin-right: calc(-1 * var(--bleed));
}

/* Classes that were used in the markup but never had a rule
   -----------------------------------------------------------------------
   Six of these shipped. A class with no rule is invisible to every check in
   this repository: the HTML is valid, the CSS parses, the page builds, and the
   element simply renders unstyled. test-verification.js now fails any class
   used in the built HTML that no rule matches.

   These are deliberately minimal, built from existing tokens and modelled on
   the neighbouring components, because they restore an intent the markup
   already states rather than introducing a new design. */

/* The prev/next pagination keeps a placeholder on the first and last guide so
   the remaining link does not stretch across the row. It carries
   .pagination-link, so without this it drew an empty bordered box. */
.pagination-empty {
  visibility: hidden;
}

/* The numbered briefing steps on /start/, styled like the other stacked cards. */
.briefing-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin: var(--space-6) 0 var(--space-12) 0;
}

.briefing-item {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.briefing-item h3 {
  margin-top: 0;
}

.briefing-item p:last-child {
  margin-bottom: 0;
}

/* A link list, not a bulleted paragraph. */
.guide-nav-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* The homepage hero
   -----------------------------------------------------------------------
   The first screenful used to be a headline, two sentences, two buttons and a
   box of text: about 800 vertical pixels holding nothing but words, on a site
   about a mechanism that is easier to draw than to describe. The diagram that
   draws it was sitting at y=818, right on the fold, where nobody saw it. It
   now opens the page.

   The band runs the full width of the window; the shell inside it is the same
   one the header and footer use, so the headline starts at the logo's left
   edge and the hero actually occupies a wide screen instead of leaving more
   than half of it empty. The prose below stays in its narrower column — wide
   opening, narrow reading, which is a rhythm rather than an inconsistency. */
.hero-band {
  /* .main-content opens with --space-8 of padding, which is right for a page
     that starts with breadcrumbs and wrong for one that starts with a full
     width band: it left a strip of bare canvas between the header and the
     hero. Cancelling it with the same token keeps the two in step. */
  margin-top: calc(-1 * var(--space-8));
  margin-bottom: var(--space-12);
  padding-top: var(--space-12);
  padding-bottom: var(--space-10);
  background-color: var(--bg-hero);
  /* One soft light source above the fold, so the band reads as a surface
     catching light rather than a flat slab of a different grey. */
  background-image: radial-gradient(ellipse 75% 70% at 50% 0%, var(--hero-glow), transparent 72%);
  border-bottom: 1px solid var(--border-light);
}

/* The headline is set large, so it needs its own measure: a 68px line running
   the full width of a 1216px shell would be unreadable. */
.hero-copy {
  max-width: 46rem;
}

.hero-copy h1 {
  font-size: var(--text-hero);
  line-height: var(--leading-display);
  margin-top: 0;
}

/* No frame around this one: in the hero the diagram is the subject, not an
   illustration dropped into prose, and a border would turn the opening screen
   into one more rectangle. It still needs .diagram-wrapper's scroll
   behaviour, though — .diagram-image carries min-width: 600px so the labels
   stay legible, and without somewhere to scroll that pushes a phone viewport
   sideways. */
.hero-figure {
  margin: var(--space-10) 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.hero-figure figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Elevation on every surfaced block
   -----------------------------------------------------------------------
   The site had zero box-shadows, so a card and the page behind it were
   separated only by a hairline border. These all sit on --bg-surface; the
   boxes that hold prose get the same treatment so the page reads as one
   system rather than two. */
.card,
.door-card,
.context-row,
.notice-box,
.definition-box,
.diagnostic-item,
.briefing-item,
.pagination-link,
.diagram-container,
.diagram-wrapper,
.table-wrapper {
  box-shadow: var(--shadow-sm);
}

/* Icons
   -----------------------------------------------------------------------
   The sprite is inlined once per page by build.js and referenced with <use>.
   Everything is stroked in currentColor, so an icon always takes the colour of
   the text beside it and never needs a variant per context. */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.125em;
}

/* Outbound links are the site's citations. Marking them means a reader knows
   before clicking that they are leaving. */
.icon-external {
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.3em;
  opacity: 0.65;
}

a:hover > .icon-external {
  opacity: 1;
}

/* Callouts
   -----------------------------------------------------------------------
   The icon is laid out as a column of its own spanning every row, so the
   existing children keep their order and nothing in the source markup had to
   change. */
.notice-box {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  column-gap: var(--space-4);
  align-items: start;
}

.notice-box > .callout-icon {
  grid-column: 1;
  grid-row: 1 / -1;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  color: var(--text-muted);
}

.notice-box > :not(.callout-icon) {
  grid-column: 2;
}

.notice-warning > .callout-icon {
  color: var(--warning-primary);
}

/* Two further variants the markup can now ask for. */
.notice-correction {
  background-color: var(--bg-danger-soft);
  border-color: var(--danger-border);
  border-left: 4px solid var(--danger-primary);
}

.notice-correction > .callout-icon,
.notice-correction .notice-title {
  color: var(--danger-primary);
}

.notice-source {
  background-color: var(--accent-soft);
  border-color: var(--accent-border);
  border-left: 4px solid var(--accent-primary);
}

.notice-source > .callout-icon,
.notice-source .notice-title {
  color: var(--accent-primary);
}

/* Buttons
   -----------------------------------------------------------------------
   The site had none: every action was an undifferentiated text link, so no
   page ever asked the reader to do anything. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background-color: var(--bg-subtle);
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn:hover,
.btn:focus {
  background-color: var(--bg-highlight);
  border-color: var(--border-strong);
  color: var(--text-primary);
  text-decoration: none;
}

.btn .icon {
  width: 1.1em;
  height: 1.1em;
}

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

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--accent-soft);
  border-color: var(--accent-primary);
  color: var(--accent-hover);
}

/* Tables: make a row scannable
   -----------------------------------------------------------------------
   A comparison matrix is read across a row, and with no banding or hover the
   eye loses the line halfway. */
tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.015);
}

tbody tr:hover {
  background-color: var(--bg-subtle);
}

th {
  border-bottom: 2px solid var(--border-medium);
}

td:first-child {
  color: var(--text-primary);
}

/* The homepage now asks for something. Two actions, one of them primary. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.icon-pagination {
  width: 0.9em;
  height: 0.9em;
  opacity: 0.8;
}

/* The section rail
   -----------------------------------------------------------------------
   Built by build.js from the order the section index already declares. It
   closes the article rather than sitting in the margin beside it, because the
   margin is not free space: measured on a case file at 1665px, the widest
   block was already 1120px and left 272px a side, which is not room for a
   rail that would then stand against the edge of a bleeding table. So it uses
   the width the way the other structural blocks do — across the bleed, in
   columns — and stays one readable list on a phone. */
.page-rail {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-light);
}

.page-rail-title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  margin: 0 0 var(--space-4) 0;
  padding: 0;
  border: none;
}

.page-rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0 var(--space-8);
}

@media screen and (min-width: 700px) {
  .page-rail-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (min-width: 1500px) {
  .page-rail-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* height: 100% so the rule under a one-line title sits level with the rule
   under a title that wrapped to two. Without it each link draws its border
   wherever its own text ends and the row reads as three ragged lists. */
.page-rail-list a {
  display: block;
  height: 100%;
  box-sizing: border-box;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
  text-decoration: none;
}

.page-rail-list a:hover {
  color: var(--accent-primary);
}

/* The page you are on is listed too, so the set reads as a whole, but it is
   not a link anywhere useful — mark it rather than let it look clickable. */
.page-rail-list a[aria-current="page"] {
  color: var(--text-primary);
  font-weight: 600;
}

/* On this page
   -----------------------------------------------------------------------
   Generated by build.js for long pages only. At wide viewports it sits in the
   left gutter beside the text rather than pushing it down, which is space the
   bleed already proved is there; below that it falls back to a normal block. */
.page-toc {
  margin: var(--space-6) 0 var(--space-10) 0;
  padding: var(--space-4) var(--space-6);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--accent-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: var(--shadow-sm);
}

.page-toc-title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  margin: 0 0 var(--space-3) 0;
  padding: 0;
  border: none;
}

.page-toc-list {
  list-style: none;
  counter-reset: toc;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.page-toc-list li {
  counter-increment: toc;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.page-toc-list a {
  color: var(--text-secondary);
  text-decoration: none;
}

.page-toc-list a:hover {
  color: var(--accent-primary);
  text-decoration: underline;
}

/* The heading a contents link jumps to must clear the sticky header. */
.main-content h2[id] {
  scroll-margin-top: 88px;
}

/* Citation links had no hover state: this rule sets their colour and loads
   after the global a:hover at equal specificity, so it was silently winning. */
.source-list a:hover,
.source-list a:focus {
  color: var(--accent-hover);
  text-decoration-thickness: 2px;
}