/* =========================================================================
   ZKCAP-X · V2 · kit.css
   Layer 2 of 5. Shared product primitives. Never rebuilt per Surface.
   ========================================================================= */

/* ---------------------------------------------------------------- Button */
.btn {
  --btn-bg: var(--navy-800);
  --btn-fg: var(--fg-inverse);
  --btn-bd: var(--navy-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  min-height: 46px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition: background var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out),
    transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
.btn:active {
  transform: translateY(0);
  box-shadow: none;
}
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.btn__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  transition: transform var(--dur-2) var(--ease-out);
}
.btn__icon svg { width: 15px; height: 15px; }
.btn--lg .btn__icon svg { width: 17px; height: 17px; }
.btn--sm .btn__icon svg { width: 13px; height: 13px; }
.btn:hover .btn__icon--arrow {
  transform: translateX(3px);
}
.btn__note {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.62;
}

.btn--primary {
  --btn-bg: var(--navy-800);
  --btn-bd: var(--navy-800);
  --btn-fg: #F7F5F0;
}
.btn--primary:hover {
  --btn-bg: var(--navy-700);
  --btn-bd: var(--navy-700);
}

.btn--gilt {
  --btn-bg: var(--gilt-600);
  --btn-bd: var(--gilt-600);
  --btn-fg: #16110A;
}
.btn--gilt:hover {
  --btn-bg: var(--gilt-500);
  --btn-bd: var(--gilt-500);
}

.btn--blue {
  --btn-bg: var(--blue-600);
  --btn-bd: var(--blue-600);
  --btn-fg: #F7F5F0;
}
.btn--blue:hover {
  --btn-bg: var(--blue-700);
  --btn-bd: var(--blue-700);
}

.btn--secondary {
  --btn-bg: transparent;
  --btn-bd: var(--rule-strong);
  --btn-fg: var(--fg);
}
.btn--secondary:hover {
  --btn-bd: var(--fg);
  --btn-bg: color-mix(in srgb, var(--fg) 4%, transparent);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-bd: transparent;
  --btn-fg: var(--accent-ink);
  padding-inline: 4px;
  min-height: 32px;
  font-weight: 500;
}
.btn--ghost:hover {
  transform: none;
  box-shadow: none;
  --btn-fg: var(--fg);
}
.btn--ghost::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 3px;
  height: 1px;
  background: currentColor;
  opacity: 0.34;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}
.btn--ghost:hover::after {
  transform: scaleX(1);
}

.btn--quiet-inverse {
  --btn-bg: rgba(244, 241, 234, 0.06);
  --btn-bd: rgba(244, 241, 234, 0.22);
  --btn-fg: #F4F1EA;
}
.btn--quiet-inverse:hover {
  --btn-bg: rgba(244, 241, 234, 0.12);
  --btn-bd: rgba(244, 241, 234, 0.42);
}

.btn--sm {
  padding: 8px 14px;
  min-height: 36px;
  font-size: var(--fs-xs);
  gap: 7px;
}
.btn--lg {
  padding: 16px 30px;
  min-height: 54px;
  font-size: var(--fs-body);
}
.btn--block {
  width: 100%;
}
.btn--square {
  padding-inline: 12px;
}

/* Text link that behaves like a nav link */
.tnav {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-ink);
  padding-block: 4px;
  position: relative;
}
.tnav::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}
.tnav:hover::after,
.tnav[aria-current="true"]::after {
  transform: scaleX(1);
}
.tnav svg {
  transition: transform var(--dur-2) var(--ease-out);
}
.tnav:hover svg {
  transform: translateX(3px);
}
.tnav svg { width: 14px; height: 14px; flex: 0 0 auto; }
.tnav > span { white-space: nowrap; }
.tnav--inverse {
  color: var(--gilt-300);
}

/* ------------------------------------------------------------ Badge/Chip */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.5;
  background: var(--paper-200);
  color: var(--ink-600);
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge--outline {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--ink-600);
}
.badge--gilt {
  background: var(--gilt-50);
  color: var(--gilt-700);
  border-color: var(--gilt-100);
}
.badge--blue {
  background: var(--blue-50);
  color: var(--blue-700);
  border-color: var(--blue-100);
}
.badge--navy {
  background: var(--navy-800);
  color: var(--gilt-300);
}
.badge--inverse {
  background: rgba(244, 241, 234, 0.08);
  color: #DCE5EE;
  border-color: rgba(244, 241, 234, 0.18);
}
.badge--green { background: var(--green-100); color: var(--green-700); }
.badge--amber { background: var(--amber-100); color: var(--amber-700); }
.badge--red { background: var(--red-100); color: var(--red-700); }
.badge--sq { border-radius: 0; }

.badge__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

/* Jurisdiction code chip: mono, institutional */
.jcode {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 24px;
  padding-inline: 7px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--ink-600);
  background: var(--bg-raised);
  text-transform: uppercase;
}
.jcode--lg { min-width: 46px; height: 30px; font-size: var(--fs-xs); }
.jcode--navy {
  border-color: rgba(244, 241, 234, 0.26);
  color: #DCE5EE;
  background: rgba(244, 241, 234, 0.05);
}

/* ---------------------------------------------------------------- Status */
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-700);
}
.status__mark {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--paper-300);
  color: var(--ink-600);
}
.status__mark svg { width: 10px; height: 10px; }
.status--ready .status__mark { background: var(--green-100); color: var(--green-700); }
.status--progress .status__mark { background: var(--blue-100); color: var(--blue-700); }
.status--blocked .status__mark { background: var(--amber-100); color: var(--amber-700); }
.status--pending .status__mark { background: var(--paper-200); color: var(--ink-500); }
.status--external .status__mark { background: var(--paper-300); color: var(--ink-700); }

.status__step {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  color: var(--ink-400);
  text-transform: uppercase;
}

/* Progress meter (readiness) */
.meter {
  height: 4px;
  background: var(--paper-300);
  border-radius: 999px;
  overflow: hidden;
}
.meter__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--navy-700), var(--blue-500));
  border-radius: 999px;
  transition: width var(--dur-4) var(--ease-out);
}
.meter__fill--amber { background: linear-gradient(90deg, var(--amber-700), var(--gilt-500)); }
.meter__fill--gilt { background: linear-gradient(90deg, var(--gilt-600), var(--gilt-300)); }

/* ------------------------------------------------------------------ Card */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--s-5);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.card--flush { padding: 0; overflow: hidden; }
.card--quiet { background: transparent; }
.card--sunken { background: var(--bg-sunken); }
.card--ink {
  background: var(--navy-850);
  border-color: rgba(244, 241, 234, 0.14);
  color: var(--fg-inverse);
  --ink-700: #D7E0E9;
  --ink-600: #C3CFDB;
  --ink-500: #9FB0C4;
  --rule: rgba(244, 241, 234, 0.16);
}
.card--hairline { box-shadow: var(--inset-hairline); }

a.card,
button.card {
  text-align: left;
  cursor: pointer;
  width: 100%;
}
a.card:hover,
button.card:hover,
.card--interactive:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
a.card:focus-visible,
button.card:focus-visible {
  box-shadow: var(--focus-ring);
}

.card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.card__title {
  font-family: var(--font-display);
  font-size: 1.18rem;
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.card__body {
  font-size: var(--fs-sm);
  color: var(--ink-600);
  line-height: 1.6;
}
.card__foot {
  margin-top: auto;
  padding-top: var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
  display: block;
  margin-bottom: 8px;
}
.card__head > svg { width: 18px; height: 18px; color: var(--gilt-600); flex: 0 0 auto; }
.badge svg { width: 11px; height: 11px; }

/* Accent hairline on hover-able cards */
.card--topline::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 2px;
  background: var(--gilt-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-3) var(--ease-out);
}
.card--topline:hover::before { transform: scaleX(1); }

/* -------------------------------------------------------- Domain surfaces */
.domain-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-4);
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  min-height: 100%;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.domain-card::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gilt-100) 0%, transparent 68%);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}
.domain-card:hover {
  transform: translateY(-3px);
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-3);
}
.domain-card:hover::after { opacity: 1; }
.domain-card__art {
  height: 46px;
  display: flex;
  align-items: center;
  color: var(--navy-700);
}
.domain-card__art svg { height: 46px; width: auto; }
.domain-card__name {
  font-family: var(--font-display);
  font-size: 1.34rem;
  line-height: 1.16;
  letter-spacing: -0.012em;
}
.domain-card__desc {
  font-size: var(--fs-sm);
  color: var(--ink-600);
  line-height: 1.58;
}
.domain-card__list {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
}
.domain-card__list li { position: relative; padding-left: 11px; }
.domain-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 1px;
  background: var(--gilt-500);
}
.domain-card__go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-ink);
  padding-top: var(--s-2);
  white-space: nowrap;
}
.domain-card__go svg { width: 13px; height: 13px; flex: 0 0 auto; transition: transform var(--dur-2) var(--ease-out); }
.domain-card:hover .domain-card__go svg { transform: translateX(3px); }

/* Service card */
.svc-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-4);
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}
a.svc-card:hover, button.svc-card:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.svc-card__mark {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--navy-800);
  color: var(--gilt-300);
  flex: 0 0 auto;
}
.svc-card__mark svg { width: 20px; height: 20px; }
.svc-card__mark--blue { background: var(--blue-600); color: #fff; }
.svc-card__mark--gilt { background: var(--gilt-100); color: var(--gilt-700); border: 1px solid var(--gilt-300); }
.svc-card__title {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.34;
  letter-spacing: -0.004em;
}
.svc-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 7px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-400);
}

/* Jurisdiction card */
.juris-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  text-align: left;
  width: 100%;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}
a.juris-card:hover, button.juris-card:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.juris-card__top {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.juris-card__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.1;
  letter-spacing: -0.012em;
}
.juris-card__region {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
  display: block;
  margin-top: 4px;
}
.juris-card__desc {
  font-size: var(--fs-sm);
  color: var(--ink-600);
  line-height: 1.56;
}
.juris-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-soft);
}
.juris-card[aria-pressed="true"],
.juris-card[data-selected="true"] {
  border-color: var(--navy-700);
  box-shadow: inset 0 0 0 1px var(--navy-700);
}
.juris-card[aria-pressed="true"]::after,
.juris-card[data-selected="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--navy-700);
  border-radius: inherit;
  pointer-events: none;
}

/* Provider card (institutional, never gig) */
.prov-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  text-align: left;
  width: 100%;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}
a.prov-card:hover, button.prov-card:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.prov-card__seal {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--navy-700), var(--navy-900));
  color: var(--gilt-300);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  font-weight: 600;
  border: 1px solid rgba(217, 192, 140, 0.28);
  text-align: center;
  line-height: 1.15;
  padding: 4px;
}
.prov-card__name {
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.3;
}
.prov-card__type {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gilt-700);
  display: block;
  margin-top: 3px;
}
.prov-card__desc {
  font-size: var(--fs-sm);
  color: var(--ink-600);
  margin-top: 8px;
  line-height: 1.55;
}
.prov-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--s-3);
}
.prov-card__verified {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-2xs);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-700);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-soft);
}
.prov-card__verified svg { width: 12px; height: 12px; }

/* --------------------------------------------------------- Requirement UI */
.reqs {
  display: flex;
  flex-direction: column;
}
.reqs__row {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: var(--s-3);
  align-items: start;
  padding-block: 11px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.reqs__row:last-child { border-bottom: 0; }
.reqs__row:first-child { padding-top: 0; }
.reqs__mark {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid var(--rule-strong);
  display: grid;
  place-items: center;
  margin-top: 3px;
  flex: 0 0 auto;
  color: transparent;
}
.reqs__row[data-state="have"] .reqs__mark {
  background: var(--green-100);
  border-color: var(--green-600);
  color: var(--green-700);
}
.reqs__row[data-state="pending"] .reqs__mark {
  background: var(--paper-200);
  border-style: dashed;
}
.reqs__row[data-state="gap"] .reqs__mark {
  background: var(--amber-100);
  border-color: var(--amber-600);
  color: var(--amber-700);
}
.reqs__mark svg { width: 10px; height: 10px; }
.reqs__who {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-400);
  white-space: nowrap;
  padding-top: 2px;
}

/* Data list (key/value) */
.dl {
  display: grid;
  gap: 0;
}
.dl__row {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: var(--s-4);
  padding-block: 11px;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
}
.dl__row:last-child { border-bottom: 0; }
.dl__row:first-child { padding-top: 0; }
.dl__k {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.dl__v { font-size: var(--fs-sm); color: var(--ink-700); }
.dl--stacked .dl__row { grid-template-columns: 1fr; gap: 5px; }

/* ------------------------------------------------------------- Process UI */
.steps {
  counter-reset: step;
  display: flex;
  flex-direction: column;
}
.steps__item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: var(--s-4);
  position: relative;
  padding-bottom: var(--s-5);
}
.steps__item:last-child { padding-bottom: 0; }
.steps__item::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 34px;
  bottom: 2px;
  width: 1px;
  background: linear-gradient(180deg, var(--line-300), var(--rule-soft));
}
.steps__item:last-child::before { display: none; }
.steps__num {
  counter-increment: step;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  background: var(--bg-raised);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-600);
  position: relative;
  z-index: 1;
}
.steps__item::after {
  content: counter(step, decimal-leading-zero);
  display: none;
}
.steps__title {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
}
.steps__detail {
  font-size: var(--fs-sm);
  color: var(--ink-600);
  margin-top: 5px;
  line-height: 1.58;
}
.steps__owner {
  margin-top: 9px;
}

/* Horizontal process rail (wide viewports) */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.rail__cell {
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  position: relative;
  padding-right: var(--s-5);
}
.rail__cell + .rail__cell { padding-left: var(--s-5); }
.rail__cell + .rail__cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: 0;
  width: 1px;
  background: var(--rule-soft);
}
.rail__n {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  color: var(--gilt-600);
  display: block;
  margin-bottom: 8px;
}
.rail__t {
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.32;
  margin-bottom: 6px;
}
.rail__d { font-size: var(--fs-xs); color: var(--ink-500); line-height: 1.5; }

/* Timeline (filings / renewal) */
.timeline { position: relative; padding-left: 22px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--rule);
}
.timeline__item { position: relative; padding-bottom: var(--s-5); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
  position: absolute;
  left: -22px;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--paper-50);
  border: 1px solid var(--rule-strong);
}
.timeline__item[data-tone="gilt"] .timeline__dot { border-color: var(--gilt-500); background: var(--gilt-100); }
.timeline__item[data-tone="blue"] .timeline__dot { border-color: var(--blue-500); background: var(--blue-100); }
.timeline__item[data-tone="ink"] .timeline__dot { border-color: var(--navy-800); background: var(--navy-800); }
.timeline__when {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
  display: block;
  margin-bottom: 5px;
}
.timeline__what { font-weight: 600; font-size: var(--fs-sm); }
.timeline__note { font-size: var(--fs-xs); color: var(--ink-500); margin-top: 4px; line-height: 1.5; }

/* -------------------------------------------------------------- Tabs/seg */
.seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--paper-200);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg__item {
  padding: 8px 14px;
  border-radius: 2px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-500);
  white-space: nowrap;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.seg__item:hover { color: var(--fg); }
.seg__item[aria-selected="true"] {
  background: var(--navy-800);
  color: var(--fg-inverse);
  box-shadow: var(--shadow-1);
}
.seg__item[aria-selected="true"] .t-label { color: var(--gilt-300); }
.seg--inverse {
  background: rgba(0, 0, 0, 0.24);
  border-color: rgba(244, 241, 234, 0.16);
}
.seg--inverse .seg__item { color: #9FB0C4; }
.seg--inverse .seg__item[aria-selected="true"] { background: var(--gilt-500); color: #16110A; }

/* Tabs (underlined) */
.tabs {
  display: flex;
  gap: var(--s-5);
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__item {
  position: relative;
  padding: 12px 0 13px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-500);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.tabs__item:hover { color: var(--fg); }
.tabs__item[aria-selected="true"] { color: var(--navy-800); border-bottom-color: var(--gilt-500); }

/* --------------------------------------------------------------- Compare */
.compare {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-raised);
}
.compare__head {
  display: grid;
  background: var(--navy-850);
  color: var(--fg-inverse);
  position: sticky;
  top: 0;
  z-index: 2;
}
.compare__row {
  display: grid;
  border-bottom: 1px solid var(--rule-soft);
}
.compare__row:last-child { border-bottom: 0; }
.compare__row:nth-child(even) { background: color-mix(in srgb, var(--paper-200) 42%, transparent); }
.compare__cell {
  padding: 14px var(--s-4);
  font-size: var(--fs-sm);
  line-height: 1.5;
  display: flex;
  align-items: center;
  min-width: 0;
}
.compare__cell--k {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  background: color-mix(in srgb, var(--paper-200) 60%, transparent);
  border-right: 1px solid var(--rule-soft);
}
.compare__head .compare__cell {
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #F4F1EA;
  display: block;
  padding-block: 16px;
}
.compare__head .compare__cell--k { color: var(--gilt-300); display: flex; }
.compare__cell svg { width: 15px; height: 15px; color: var(--green-600); flex: 0 0 auto; }
.compare__cell--no svg { color: var(--line-400); }
.compare__cell--no { color: var(--ink-300); }
.compare__caption {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  padding: 12px var(--s-4);
  border-top: 1px solid var(--rule-soft);
  background: var(--paper-50);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --------------------------------------------------------- Filter/Search */
.filters {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
}
.filters__group { display: grid; gap: 9px; }
.filters__label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 6px 11px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  background: var(--paper-50);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-600);
  transition: all var(--dur-1) var(--ease-out);
  white-space: nowrap;
}
.chip:hover { border-color: var(--line-400); color: var(--fg); }
.chip[aria-pressed="true"] {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--fg-inverse);
}
.chip__n {
  font-family: var(--font-mono);
  font-size: 9px;
  opacity: 0.6;
  margin-left: 5px;
}
.chip svg { width: 11px; height: 11px; vertical-align: -2px; margin-left: 4px; }
.tabs__item svg { width: 13px; height: 13px; }
.seg__item svg { width: 13px; height: 13px; }

.search {
  position: relative;
  display: flex;
  align-items: center;
}
.search__icon {
  position: absolute;
  left: 13px;
  color: var(--ink-400);
  pointer-events: none;
  display: grid;
}
.search input {
  width: 100%;
  padding: 12px 14px 12px 40px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  font-size: var(--fs-sm);
  color: var(--fg);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.search input::placeholder { color: var(--ink-400); }
.search input:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px var(--blue-100);
  outline: none;
}

/* ------------------------------------------------------------ Form fields */
.field { display: grid; gap: 7px; }
.field__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-700);
  display: flex;
  align-items: center;
  gap: 7px;
}
.field__req { color: var(--gilt-600); font-family: var(--font-mono); font-size: 10px; }
.field__hint { font-size: var(--fs-xs); color: var(--ink-500); line-height: 1.5; }
.field__err { font-size: var(--fs-xs); color: var(--red-700); display: flex; gap: 6px; align-items: center; }

.input,
.select,
.textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  font-size: var(--fs-sm);
  color: var(--fg);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  min-height: 44px;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-400); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px var(--blue-100);
}
.input[aria-invalid="true"], .select[aria-invalid="true"] {
  border-color: var(--red-600);
  box-shadow: 0 0 0 3px var(--red-100);
}
.textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' stroke='%235C6773' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
.input--mono { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.02em; }

.check {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 11px;
  align-items: start;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--ink-600);
  line-height: 1.5;
  padding: 3px 0;
}
.check input {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line-400);
  border-radius: 2px;
  background: var(--bg-raised);
  display: grid;
  place-items: center;
  margin-top: 1px;
  transition: all var(--dur-1) var(--ease-out);
  flex: 0 0 auto;
}
.check input::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 1.8px solid #fff;
  border-bottom: 1.8px solid #fff;
  transform: rotate(-45deg) scale(0);
  transition: transform var(--dur-1) var(--ease-out);
  margin-top: -2px;
}
.check input:checked { background: var(--navy-800); border-color: var(--navy-800); }
.check input:checked::after { transform: rotate(-45deg) scale(1); }

.radio-card {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.radio-card:hover { border-color: var(--line-400); }
.radio-card:has(input:checked) {
  border-color: var(--navy-700);
  box-shadow: inset 0 0 0 1px var(--navy-700);
  background: var(--blue-50);
}
.radio-card input {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--line-400);
  display: grid;
  place-items: center;
  margin-top: 1px;
  flex: 0 0 auto;
}
.radio-card input::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--navy-800);
  transform: scale(0);
  transition: transform var(--dur-1) var(--ease-out);
}
.radio-card input:checked { border-color: var(--navy-800); }
.radio-card input:checked::after { transform: scale(1); }

/* ------------------------------------------------------------- Accordion */
.acc { border-top: 1px solid var(--rule); }
.acc__item { border-bottom: 1px solid var(--rule); }
.acc__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 16px 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--fg);
  line-height: 1.4;
  transition: color var(--dur-1) var(--ease-out);
}
.acc__trigger:hover { color: var(--accent-ink); }
.acc__sign {
  position: relative;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: var(--gilt-600);
}
.acc__sign::before,
.acc__sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease-out);
}
.acc__sign::before { left: 0; right: 0; top: 6px; height: 1.4px; }
.acc__sign::after { top: 0; bottom: 0; left: 6px; width: 1.4px; }
.acc__item[data-open="true"] .acc__sign::after { transform: scaleY(0); }
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-3) var(--ease-out);
}
.acc__item[data-open="true"] .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding-bottom: 18px; font-size: var(--fs-sm); color: var(--ink-600); line-height: 1.62; }

/* --------------------------------------------------------------- Callout */
.callout {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--line-400);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--paper-50);
  font-size: var(--fs-sm);
  color: var(--ink-600);
  line-height: 1.58;
}
.callout svg { width: 16px; height: 16px; margin-top: 2px; color: var(--ink-400); }
.callout__title {
  font-weight: 600;
  color: var(--fg);
  font-size: var(--fs-sm);
  margin-bottom: 5px;
  display: block;
}
.callout--boundary { border-left-color: var(--gilt-500); background: var(--gilt-50); border-color: var(--gilt-100); }
.callout--boundary svg { color: var(--gilt-600); }
.callout--authority { border-left-color: var(--blue-600); background: var(--blue-50); border-color: var(--blue-100); }
.callout--authority svg { color: var(--blue-600); }
.callout--warn { border-left-color: var(--amber-600); background: var(--amber-100); border-color: #EBDCB8; }
.callout--warn svg { color: var(--amber-700); }
.callout--inverse { background: rgba(244, 241, 234, 0.05); border-color: rgba(244, 241, 234, 0.14); border-left-color: var(--gilt-500); color: #B9C6D4; }
.callout--inverse svg { color: var(--gilt-300); }
.callout--inverse .callout__title { color: #F4F1EA; }

/* Trust / authority notice — appears across all public surfaces */
.trustbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding: 14px var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(90deg, var(--gilt-50), var(--paper-50) 42%),
    var(--paper-50);
  font-size: var(--fs-xs);
  color: var(--ink-600);
  line-height: 1.5;
}
.trustbar__mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gilt-100);
  color: var(--gilt-700);
  border: 1px solid var(--gilt-300);
  flex: 0 0 auto;
}
.trustbar__mark svg { width: 12px; height: 12px; }
.trustbar strong { color: var(--fg); font-weight: 600; }

/* ------------------------------------------------------------------ Stats */
.factrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.fact {
  padding: var(--s-5) var(--s-4);
  border-right: 1px solid var(--rule-soft);
  display: grid;
  gap: 6px;
}
.fact:last-child { border-right: 0; }
.fact__v {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2cqw, 2.05rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--navy-800);
}
.fact__k {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.fact__n { font-size: var(--fs-xs); color: var(--ink-500); line-height: 1.5; }
.on-navy .fact { border-color: rgba(244, 241, 234, 0.14); }
.on-navy .fact__v { color: #F7F5F0; }
.on-navy .fact__k { color: var(--gilt-300); }
.on-navy .fact__n { color: var(--fg-inverse-muted); }

/* -------------------------------------------------------- Empty/Err/Load */
.empty {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-8) var(--s-5);
  text-align: center;
  border: 1px dashed var(--line-300);
  border-radius: var(--radius-md);
  background: var(--paper-50);
}
.empty__mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper-200);
  color: var(--ink-400);
}
.empty__mark svg { width: 18px; height: 18px; }

.skeleton {
  background: linear-gradient(90deg, var(--paper-200) 25%, var(--paper-100) 50%, var(--paper-200) 75%);
  background-size: 300% 100%;
  animation: sweep 1.6s linear infinite;
  border-radius: var(--radius-xs);
  height: 12px;
}
.skeleton--tall { height: 90px; }
.skeleton--card { height: 148px; }

.spinner {
  width: 15px;
  height: 15px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 640ms linear infinite;
  display: inline-block;
  opacity: 0.75;
}

/* ---------------------------------------------------------------- Overlays */
.ov {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: none;
}
.ov[data-open="true"] { display: block; }
.ov__scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 14, 26, 0.58);
  backdrop-filter: blur(3px);
  animation: fade-in var(--dur-2) var(--ease-out) both;
}
.ov__panel {
  position: absolute;
  background: var(--paper-50);
  box-shadow: var(--shadow-4);
  display: flex;
  flex-direction: column;
  animation: ov-in var(--dur-3) var(--ease-out) both;
}
@keyframes ov-in {
  from { opacity: 0; transform: translateY(10px) scale(0.995); }
  to { opacity: 1; transform: none; }
}

.ov--drawer .ov__panel {
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 100%);
  border-left: 1px solid var(--rule);
}
.ov--modal .ov__panel {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(620px, calc(100% - 32px));
  max-height: min(78%, 720px);
  border-radius: var(--radius-md);
  border: 1px solid var(--rule);
}
.ov--sheet .ov__panel {
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88%;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-top: 1px solid var(--rule);
  animation: sheet-in var(--dur-3) var(--ease-out) both;
}
@keyframes sheet-in {
  from { transform: translateY(100%); }
  to { transform: none; }
}
.ov--center .ov__panel {
  inset: 0;
  background: var(--paper-50);
  overflow: auto;
}

.ov__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5);
  border-bottom: 1px solid var(--rule);
  flex: 0 0 auto;
}
.ov__title { font-family: var(--font-display); font-size: 1.32rem; line-height: 1.2; letter-spacing: -0.012em; }
.ov__sub { font-size: var(--fs-xs); color: var(--ink-500); margin-top: 5px; }
.ov__body { padding: var(--s-5); overflow: auto; flex: 1 1 auto; }
.ov__foot {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  justify-content: flex-end;
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--rule);
  background: var(--paper-100);
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.ov__close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--ink-500);
  background: var(--bg-raised);
  flex: 0 0 auto;
  transition: all var(--dur-1) var(--ease-out);
}
.ov__close:hover { color: var(--fg); border-color: var(--line-400); }
.ov__close svg { width: 13px; height: 13px; }
.ov--sheet .ov__grip {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--line-300);
  margin: 10px auto 0;
  flex: 0 0 auto;
}

/* ------------------------------------------------------------- Breadcrumb */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.crumbs a { color: var(--ink-500); transition: color var(--dur-1) var(--ease-out); }
.crumbs a:hover { color: var(--gilt-700); }
.crumbs__sep { color: var(--line-400); }
.crumbs [aria-current="page"] { color: var(--fg); font-weight: 600; }

/* --------------------------------------------------------------- Page head */
.phead { display: grid; gap: var(--s-4); }
.phead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: end;
}
.phead__aside { display: grid; gap: var(--s-4); }
.phead > * { min-width: 0; }
.phead--solo .phead__grid { grid-template-columns: minmax(0, 1fr); }
.phead--solo .t-lead { max-width: 68ch; }
.phead--center { text-align: center; justify-items: center; }
.phead--center .phead__aside { justify-items: center; }

/* ------------------------------------------------------------ Section head */
.shead { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.shead--split {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--s-5);
}
.shead__kicker { display: flex; align-items: center; gap: 10px; }
.shead__kicker::after { content: ""; flex: 1; height: 1px; background: var(--rule); max-width: 90px; }
.on-navy .shead__kicker::after { background: rgba(244, 241, 234, 0.2); }
.shead__d { max-width: 62ch; }

/* ------------------------------------------------------------------ Toast */
.toasts {
  position: absolute;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 200;
  display: grid;
  gap: var(--s-2);
  width: min(380px, calc(100% - 32px));
  pointer-events: none;
}
.toast {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: var(--s-3);
  align-items: start;
  padding: 13px 15px;
  background: var(--navy-850);
  color: #E6EDF4;
  border: 1px solid rgba(244, 241, 234, 0.14);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-3);
  font-size: var(--fs-sm);
  animation: toast-in var(--dur-3) var(--ease-out) both;
  pointer-events: auto;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.toast__mark { color: var(--gilt-300); display: grid; place-items: center; }
.toast__mark svg { width: 15px; height: 15px; }
.toast__t { font-weight: 600; color: #F7F5F0; display: block; margin-bottom: 2px; }
.toast__d { font-size: var(--fs-xs); color: #A9BACB; line-height: 1.45; }
.toast__x { color: #7A8DA3; }
.toast__x:hover { color: #F4F1EA; }
.toast__x svg { width: 12px; height: 12px; }

/* --------------------------------------------------------------- Two/two-up */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}
.split--aside {
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
}
.split--rail {
  grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
}
.split--wide-first {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

.sticky-rail { position: sticky; top: 96px; display: grid; gap: var(--s-4); }

/* Quick fact / spec block */
.spec {
  display: grid;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-raised);
}
.spec__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  padding: 13px var(--s-4);
  border-bottom: 1px solid var(--rule-soft);
}
.spec__row:last-child { border-bottom: 0; }
.spec__k {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.spec__v { font-size: var(--fs-sm); color: var(--fg); font-weight: 500; }
.spec__n { font-size: var(--fs-xs); color: var(--ink-500); line-height: 1.45; }

/* Section index / jump list */
.jump { display: grid; gap: 0; }
.jump__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: var(--fs-sm);
  color: var(--ink-600);
  transition: color var(--dur-1) var(--ease-out);
}
.jump__item:hover { color: var(--accent-ink); }
.jump__n {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--gilt-600);
  width: 22px;
  flex: 0 0 auto;
}
.jump__item:last-child { border-bottom: 0; }

/* Definition-style inline list used in detail bodies */
.deflist { display: grid; gap: var(--s-4); }
.deflist__item { display: grid; gap: 5px; }
.deflist__t { font-weight: 600; font-size: var(--fs-sm); }
.deflist__d { font-size: var(--fs-sm); color: var(--ink-600); line-height: 1.58; }

/* Generic utility rows */
.rowline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: 13px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: var(--fs-sm);
}
.rowline:last-child { border-bottom: 0; }
.rowline__k { color: var(--ink-600); }
.rowline__v { font-weight: 600; color: var(--fg); text-align: right; }