/* =====================================================================
   Page-group styles: the practice-questions hub, the five domain pages, pricing,
   and the company and legal pages (about, how we write questions, changelog,
   report an error, contact, privacy, terms, login, 404).
   Loaded after site.css. Tokens only: every colour and font size is a site.css
   custom property, so dark mode keeps working.
   ===================================================================== */

/* ---------- Domain pages: H1 with a second line ---------- */
.page-hero h1 .h1-sub {
  display: block; margin-top: .45em;
  font-size: var(--step-2); line-height: 1.2; font-weight: 760; letter-spacing: -.015em;
  color: var(--coral-ink);
}
.page-hero h1:has(.h1-sub) { max-width: 20ch; }

/* ---------- Hub: two links under each domain bar ---------- */
.dom-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.dom-links .arrow-link { min-height: 44px; }

/* ---------- Hub: three practice modes side by side (reuses .ring, .tp-panel, .specs) ---------- */
.modes3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 64px; }
@media (min-width: 960px) { .modes3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; } }
.modes3 .ring { width: clamp(170px, 20vw, 210px); }
.modes3 .ring .trk { stroke: var(--line); }
.modes3 .tp-panel p { max-width: 40ch; }
.modes3 .arrow-link { margin-top: 18px; font-size: var(--text-ui); min-height: 44px; }

/* ---------- Domain pages: this domain inside the five-domain stack ---------- */
.dstack a[aria-current="page"], .dstack a[aria-current="page"]:hover { background: var(--ink); color: var(--bg); transform: none; }
.dstack a[aria-current="page"] small { color: color-mix(in srgb, var(--bg) 78%, transparent); }

/* =====================================================================
   Objective lists. One shared anatomy (.obj), five layouts so each domain
   page feels different: pillars (D1), rail (D2), stack (D3), board (D4), ledger (D5).
   ===================================================================== */
.objs { list-style: none; margin: 0 auto; padding: 0; }
.obj { min-width: 0; }
.obj-id { display: block; font-family: var(--font-display); font-weight: 800; line-height: .9; letter-spacing: -.045em; color: var(--brand); }
.obj h3 { margin: 0 0 .4rem; font-size: var(--step-2); line-height: 1.2; }
.obj-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.obj-desc { margin: 0 0 10px; max-width: 60ch; color: var(--ink-2); font-size: var(--text-ui); line-height: 1.6; }
.obj-q { margin: 0 0 14px; max-width: 60ch; font-size: var(--text-sm); line-height: 1.55; color: var(--ink-3); }
.obj-q b { color: var(--ink-2); }
.obj-more { margin: 0 0 14px; font-size: var(--text-ui); }
.obj > .chips { justify-content: flex-start; gap: 6px; }
.obj > .chips li { padding: .35rem .7rem; }
.obj > .chips li.v8 { border-color: var(--coral); background: var(--coral-soft); }
.obj > .chips li.v8::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--coral); vertical-align: 1px; }
.chip-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 0 0 clamp(28px, 4vw, 44px); font-size: var(--text-sm); color: var(--ink-3); }
.chip-key span { display: inline-flex; align-items: center; gap: 8px; }
.chip-key i { width: 22px; height: 14px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--surface); }
.chip-key i.v8 { border-color: var(--coral); background: var(--coral-soft); }

/* D1 · pillars: three tall columns under coloured top rules, with outlined numerals */
.objs.pillars { display: grid; gap: 52px; max-width: 1160px; }
@media (min-width: 980px) { .objs.pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.pillars .obj { padding-top: 22px; border-top: 4px solid var(--brand); }
.pillars .obj:nth-child(2) { border-top-color: var(--coral); }
.pillars .obj:nth-child(3) { border-top-color: var(--lav); }
.pillars .obj-id {
  margin-bottom: 20px; font-size: var(--display-l); line-height: .82; letter-spacing: -.055em;
  color: transparent; -webkit-text-stroke: 1.6px color-mix(in srgb, var(--brand) 60%, transparent);
}
.pillars .obj:nth-child(2) .obj-id { -webkit-text-stroke-color: color-mix(in srgb, var(--coral) 80%, transparent); }

/* D2 · rail: one dashed line with a station per objective; new objectives glow coral */
.objs.rail { position: relative; max-width: 900px; display: grid; gap: 46px; }
.objs.rail::before {
  content: ""; position: absolute; left: 25px; top: 12px; bottom: 12px; width: 2px;
  background: repeating-linear-gradient(to bottom, var(--line-strong) 0 7px, transparent 7px 14px);
}
.rail .obj { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 18px; }
.rail .obj > :not(.obj-id) { grid-column: 2; }
.rail .obj-id {
  grid-row: 1 / span 6; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--brand);
  font-size: var(--text-ui); letter-spacing: -.01em; line-height: 1; color: var(--brand);
}
.rail .obj.is-new .obj-id { background: var(--coral); border-color: var(--coral); color: var(--night); box-shadow: 0 0 0 7px color-mix(in srgb, var(--coral) 24%, transparent); }
@media (min-width: 720px) {
  .objs.rail::before { left: 35px; }
  .rail .obj { grid-template-columns: 72px minmax(0, 1fr); gap: 0 26px; }
  .rail .obj-id { width: 72px; height: 72px; font-size: var(--text-title); }
}

/* D3 · stack: four layered slabs, each a shade deeper, stepping like a staircase */
.objs.stack { max-width: 1000px; display: grid; gap: 14px; }
.stack .obj {
  display: grid; gap: 0 28px; padding: clamp(20px, 3vw, 32px);
  border-radius: var(--r-l); background: color-mix(in srgb, var(--brand) var(--k, 8%), var(--surface));
}
.stack .obj-id { margin-bottom: 14px; font-size: var(--display-s); }
@media (min-width: 860px) {
  .stack .obj { grid-template-columns: 130px minmax(0, 1fr); margin-left: calc(var(--i, 0) * 30px); margin-right: calc((3 - var(--i, 0)) * 30px); }
  .stack .obj > :not(.obj-id) { grid-column: 2; }
  .stack .obj-id { grid-row: 1 / span 6; margin: 0; }
}

/* D4 · board: two ruled columns, like an index; big numbers on the left */
.objs.board { display: grid; gap: 0 52px; border-top: 3px solid var(--ink); }
@media (min-width: 880px) { .objs.board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.board .obj { padding: 26px 0 30px; border-bottom: 1px solid var(--line-strong); }
.board .obj-id { margin-bottom: 10px; font-size: var(--step-3); }
.board .obj h3 { font-size: var(--text-title); line-height: 1.3; }
@media (min-width: 720px) {
  .board .obj { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 0 16px; }
  .board .obj > :not(.obj-id) { grid-column: 2; }
  .board .obj-id { grid-row: 1 / span 6; margin: 0; padding-top: 4px; }
}

/* D5 · ledger: dashed rows with a stamped number, the summary, then the topics */
.objs.ledger { max-width: 1120px; border-top: 1px solid var(--line-strong); }
.ledger .obj { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 18px; padding: 28px 0; border-bottom: 1px dashed var(--line-strong); }
.ledger .obj > :not(.obj-id) { grid-column: 2; }
.ledger .obj-id {
  grid-row: 1 / span 6; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  border: 2px dashed var(--coral); color: var(--coral-ink); font-size: var(--text-title); letter-spacing: -.02em; line-height: 1;
  transform: rotate(-8deg);
}
@media (min-width: 1000px) {
  .ledger .obj { grid-template-columns: 84px minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 32px; align-items: start; }
  .ledger .obj > :not(.obj-id):not(.chips) { grid-column: 2; }
  .ledger .obj > .chips { grid-column: 3; grid-row: 1 / span 6; padding-top: 6px; }
  .ledger .obj-id { width: 76px; height: 76px; }
}

/* ---------- Domain test: question mix by objective ---------- */
.mix { list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 28px; }
.mix li { display: grid; gap: 10px; justify-items: center; align-content: start; text-align: center; }
.mix .cells { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 84px; }
.mix .cells i { width: 18px; height: 18px; border-radius: 5px; background: var(--c, var(--brand)); }
.mix .pbq .cells i { width: 40px; background: var(--coral); }
.mix .lab { font: 600 var(--text-mono)/1.35 var(--font-mono); color: var(--ink-2); }
.mix .lab b { display: block; color: var(--ink); }
.tickets.solo { grid-template-columns: minmax(0, 440px); justify-content: center; margin-top: clamp(36px, 5vw, 56px); }

/* ---------- Domain pages: what changed ---------- */
.db-wrap { max-width: 940px; margin: 0 auto; }
@media (min-width: 860px) { .topic-groups.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } }
.changes-table { max-width: 980px; margin: clamp(40px, 5vw, 60px) auto 0; }
.changes-table .table-wrap { margin-top: 0; }
.changes-more { margin-top: 26px; text-align: center; }

/* ---------- Domain 4: firewall PBQ teaser (reuses the .pbq-* and .rules styles) ---------- */
.pbq-teaser { max-width: 900px; margin: 0 auto; }
.pbq-teaser .pbq-brief p + p { margin-top: 6px; }
.pbq-teaser .chips { justify-content: flex-start; gap: 6px; margin: 8px 0 14px; }
.pbq-teaser .chips li { padding: .3rem .65rem; }
.pbq-teaser .chips li b { font-weight: 600; color: var(--ink-3); margin-right: 6px; }
.pbq-teaser .debrief-line { margin-top: 12px; }
.pbq-teaser .pbq-cta { position: relative; z-index: 2; margin-top: 34px; } /* above .pbq-ui's shadow (it sits at z-index 1) */

/* ---------- Pricing: how long each planned plan lasts ---------- */
.plans { list-style: none; max-width: 1000px; margin: 0 auto; padding: 0; display: grid; gap: 30px; }
.plan { display: grid; gap: 12px; }
@media (min-width: 820px) { .plan { grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: center; } }
.plan-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.plan-price { font: 800 var(--display-s)/1 var(--font-display); letter-spacing: -.045em; color: var(--ink); }
.plan-per { font-size: var(--text-ui); font-weight: 700; color: var(--ink-2); }
.plan-head .tag { align-self: center; }
.plan-fit { flex-basis: 100%; margin: 2px 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-3); }
.plan-bar {
  position: relative; height: 46px; border-radius: 12px; border: 1px solid var(--line);
  background-color: var(--surface);
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(100% * 7 / 75 - 1px), var(--line) calc(100% * 7 / 75 - 1px) calc(100% * 7 / 75));
}
.plan-bar i {
  position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) * var(--d) / 75); border-radius: 8px;
  background: repeating-linear-gradient(-45deg, var(--brand) 0 9px, color-mix(in srgb, var(--brand) 80%, var(--surface)) 9px 18px);
}
.plan-bar b { position: absolute; top: 50%; left: calc(5px + (100% - 10px) * var(--d) / 75 + 10px); transform: translateY(-50%); font: 600 var(--text-mono)/1 var(--font-mono); color: var(--ink); white-space: nowrap; }
.plan.full .plan-bar b { left: auto; right: 16px; color: var(--on-brand); }
.plan-axis { display: flex; justify-content: space-between; max-width: 1000px; margin: 10px auto 0; font: 500 var(--text-label)/1 var(--font-mono); color: var(--ink-3); }
@media (min-width: 820px) { .plan-axis { padding-left: 328px; } }

/* ---------- Changelog: the anatomy of an entry (a template, not data) ---------- */
.entry-spec { max-width: 780px; margin: 0 auto; padding: clamp(14px, 3vw, 26px) clamp(18px, 3vw, 30px); border: 2px dashed var(--line-strong); border-radius: var(--r-l); }
.entry-spec div { display: grid; gap: 4px 22px; padding: 16px 0; border-bottom: 1px dashed var(--line); }
.entry-spec div:last-child { border-bottom: 0; }
@media (min-width: 640px) { .entry-spec div { grid-template-columns: 180px minmax(0, 1fr); } }
.entry-spec dt { padding-top: 3px; font: 600 var(--text-label)/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--coral-ink); }
.entry-spec dd { margin: 0; font-size: var(--text-ui); line-height: 1.6; color: var(--ink-2); }
.entry-spec dd code { color: var(--ink); }

/* ---------- Company and legal pages: centred reading column ---------- */
.page-prose { margin-inline: auto; }
/* site.css sets .prose p { margin: 0 }, which outranks its own .prose > * + * spacing; restore the gap here */
.prose.page-prose > :is(p, ul, ol, pre, blockquote, .chips) + :is(p, ul, ol, pre, blockquote, .chips) { margin-top: 1em; }
.page-prose .chips { justify-content: flex-start; padding-left: 0; }
.page-prose .chips li { margin-top: 0; padding: .45rem .85rem; }
.section-tight { padding-top: clamp(8px, 2vw, 24px); }
.toc { margin: 0 0 2.4em; padding: 18px 22px; border-left: 3px solid var(--brand); border-radius: 0 14px 14px 0; background: var(--surface); }
.toc h2 { margin: 0 0 10px; font: 600 var(--text-label)/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.toc ol { margin: 0; columns: 2 220px; column-gap: 36px; font-size: var(--text-ui); }
.toc li { break-inside: avoid; }
.addr { display: block; margin: 0 0 .3em; font: 800 var(--step-2)/1.2 var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.mode-row .ic.ic-plain { background: var(--surface-2); color: var(--ink-2); }
.page-hero .addr { margin-top: 1.4rem; }
.hero-mail { color: var(--ink); text-decoration-color: var(--coral); }
.obj-meta .tag-plain { background: var(--surface); }
.page-prose pre { white-space: pre-wrap; overflow-wrap: anywhere; }