/* Compliance page: tilting verdict stack, basis cards, jurisdiction checker, message anatomy, sideways dates, ledger chain. */

/* ---------- Verdict stack (pointer tilt) ---------- */
.verdict-stack { --rx: 0deg; --ry: 0deg; position: relative; height: 380px; perspective: 1200px; }
.verdict-stack__inner, .verdict-stack { transform-style: preserve-3d; }
.vcard {
  position: absolute; left: 50%; width: min(86%, 360px); padding: 18px 20px; display: grid; gap: 6px;
  border-radius: var(--r-lg); background: linear-gradient(160deg, var(--surface-2), var(--surface)); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-2); transition: transform 500ms var(--ease-out);
}
.vcard b { font-size: 1.0625rem; letter-spacing: -0.015em; }
.vcard p { color: var(--fg-2); font-size: 0.9375rem; }
.vcard__kind { font: 500 0.75rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.vcard__out { justify-self: start; margin-top: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; }
.vcard__out--ok { background: oklch(0.76 0.15 160 / 0.14); color: var(--ok); }
.vcard__out--bad { background: oklch(0.72 0.17 18 / 0.14); color: var(--bad); }
.vcard__out--warn { background: oklch(0.8 0.135 86 / 0.14); color: var(--gold-hi); }
.vcard--statute { top: 0; transform: translateX(-62%) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(-40px) rotate(-4deg); }
.vcard--guidance { top: 120px; transform: translateX(-40%) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(10px) rotate(2deg); }
.vcard--policy { top: 240px; transform: translateX(-56%) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(60px) rotate(-1.5deg); }
.vcard--statute .vcard__kind { color: oklch(0.82 0.1 25); }
.vcard--guidance .vcard__kind { color: var(--cyan); }
.vcard--policy .vcard__kind { color: var(--gold-hi); }
@media (max-width: 900px) { .verdict-stack { height: 360px; } }

/* ---------- Basis cards ---------- */
.basis-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(28px, 4vw, 44px); }
.basis-grid li { padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.basis-grid b { font-size: 1.25rem; letter-spacing: -0.02em; }
.basis-grid p { color: var(--fg-2); }
.basis-tag { justify-self: start; padding: 3px 10px; border-radius: 6px; font: 500 0.75rem var(--mono); letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid currentColor; }
.basis-tag--statute { color: oklch(0.82 0.1 25); }
.basis-tag--guidance { color: var(--cyan); }
.basis-tag--policy { color: var(--gold-hi); }
@media (max-width: 860px) { .basis-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Jurisdiction checker ---------- */
.checker-section { background: var(--surface); border-block: 1px solid var(--line); }
.pg { margin-top: clamp(28px, 4vw, 44px); display: grid; gap: 18px; }
.pg__states { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 999px; background: var(--canvas); border: 1px solid var(--line-strong); }
.pg__states button, .pg__cases button {
  min-height: 44px; border-radius: 999px; cursor: pointer; font: 500 0.9375rem var(--font); color: var(--fg-2);
  background: transparent; border: 1px solid transparent; transition: background-color var(--t-micro) var(--ease-out), color var(--t-micro) var(--ease-out);
}
.pg__states button { font-family: var(--mono); font-size: 0.875rem; letter-spacing: 0.04em; }
.pg__states button:hover, .pg__cases button:hover { color: var(--fg); background: oklch(1 0 0 / 0.05); }
.pg__states button[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); }
.pg__body { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 18px; align-items: start; }
.pg__cases { display: grid; gap: 8px; }
.pg__cases button { text-align: left; padding: 0 18px; border-radius: var(--r-sm); background: var(--surface-2); border-color: var(--line-strong); }
.pg__cases button[aria-pressed="true"] { border-color: var(--gold); color: var(--fg); box-shadow: inset 3px 0 0 var(--gold); }
.pg__result .checker__result { transition: opacity var(--t-micro) ease; }
.pg__result.is-swapping .checker__result, .pg__result.is-swapping .checker__field { opacity: 0.2; }
.pg__result .checker__field { transition: opacity var(--t-micro) ease; }
.verdict--warn { background: oklch(0.8 0.135 86 / 0.13); color: var(--gold-hi); }
.verdict--none { background: oklch(1 0 0 / 0.06); color: var(--fg-2); }
@media (max-width: 900px) {
  .pg__states { grid-template-columns: repeat(5, minmax(0, 1fr)); border-radius: var(--r-lg); }
  .pg__body { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Message anatomy: hover or focus a rule, its part of the message lights up (no JS) ---------- */
.anatomy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.spots { display: grid; gap: 8px; margin-top: 24px; }
.spot {
  width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; padding: 14px 16px; text-align: left;
  border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); color: var(--fg); font: 600 1rem var(--font); cursor: pointer;
  transition: border-color var(--t-micro) var(--ease-out), background-color var(--t-micro) var(--ease-out);
}
.spot .num { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3); color: var(--gold-hi); font: 500 0.875rem var(--mono); }
.spot small { color: var(--fg-2); font-weight: 400; font-size: 0.875rem; }
.spot:hover, .spot:focus-visible { border-color: var(--gold); background: var(--surface-2); }
.msg { margin: 0; padding: 20px; border-radius: calc(var(--r-lg) + 8px); background: var(--surface); border: 1px solid var(--line-strong); display: grid; gap: 14px; box-shadow: var(--shadow-2); }
.msg__head { display: flex; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); line-height: 1.3; font-size: 0.9375rem; }
.msg__consent { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--fg-3); }
.msg__consent svg { width: 16px; height: 16px; color: var(--ok); }
.msg__bubble { margin-left: 0; max-width: none; display: grid; gap: 6px; }
[data-part] { border-radius: 6px; transition: background-color var(--t-state) var(--ease-out), box-shadow var(--t-state) var(--ease-out), color var(--t-state) var(--ease-out); }
.anatomy:has([data-spot="consent"]:is(:hover, :focus-visible)) [data-part="consent"],
.anatomy:has([data-spot="sender"]:is(:hover, :focus-visible)) [data-part="sender"],
.anatomy:has([data-spot="stop"]:is(:hover, :focus-visible)) [data-part="stop"],
.anatomy:has([data-spot="fair"]:is(:hover, :focus-visible)) [data-part="fair"] {
  background: oklch(0.8 0.135 86 / 0.22); box-shadow: 0 0 0 4px oklch(0.8 0.135 86 / 0.22); color: var(--fg);
}
@media (max-width: 900px) { .anatomy { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Sideways dates (pinned; vertical scroll drives translateX) ---------- */
.hscroll { position: relative; height: 320vh; }
/* One fixed-width column: otherwise the wide track sizes the column and nothing has room to move. */
.hscroll__stage { position: sticky; top: 0; height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: clamp(28px, 4vw, 48px); overflow: clip; }
.hscroll__track {
  display: flex; gap: 16px; padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  transform: translateX(calc(var(--p, 0) * var(--dist, 0px) * -1)); will-change: transform;
}
.date-card { flex: 0 0 min(78vw, 340px); padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-strong); display: grid; gap: 10px; align-content: start; }
.date-card time { font: 500 1.125rem var(--mono); color: var(--gold-hi); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.date-card b { font-size: 1.25rem; letter-spacing: -0.02em; }
.date-card p { color: var(--fg-2); font-size: 0.9375rem; }
@media (prefers-reduced-motion: reduce) {
  .hscroll { height: auto; }
  .hscroll__stage { position: relative; height: auto; padding: var(--section) 0; }
  .hscroll__track { transform: none; overflow-x: auto; scroll-snap-type: x mandatory; }
  .date-card { scroll-snap-align: start; }
}

/* ---------- Ledger chain ---------- */
.ledger-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.chain { display: grid; gap: 22px; position: relative; }
.chain::before { content: ""; position: absolute; left: 27px; top: 20px; bottom: 20px; width: 2px; background: repeating-linear-gradient(var(--gold) 0 8px, transparent 8px 14px); opacity: 0.6; }
.link { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; padding: 14px 16px 14px 0; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.link .num { grid-row: span 2; display: grid; place-items: center; font: 500 0.8125rem var(--mono); color: var(--gold-hi); }
.link b { font-size: 1rem; }
.link span:last-child { color: var(--fg-3); font-size: 0.875rem; }
.link .ok { color: var(--ok) !important; }
.link .warn { color: var(--gold-hi) !important; }
@media (max-width: 900px) { .ledger-grid { grid-template-columns: minmax(0, 1fr); } }