/* ==========================================================================
   probatecalculator.co.uk

   Every value here comes from design-system/tokens.css. No hard-coded colours,
   fonts, spacing, radii or shadows. See design-system/README.md before
   changing anything: a document, not an app.
   ========================================================================== */

@import url("tokens.css");

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
}

/* Every amount is serif with tabular figures, so columns of pounds line up. */
.num,
.pc-figure {
  font-family: var(--font-serif);
  font-variant-numeric: tabular-nums lining-nums;
}

h1,
h2,
h3,
h4,
legend {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--accent);
  text-underline-offset: 3px;
}

/* One focus treatment everywhere: solid 2px accent, 2px offset. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

strong {
  font-weight: 700;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--accent);
  color: var(--on-accent);
  padding: var(--space-3) var(--space-4);
  z-index: 100;
}
.skip:focus {
  left: var(--space-4);
  top: var(--space-4);
}

/* ---------- page shell ---------- */

.pc-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* A text header. No logo is drawn. */
.pc-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--rule);
}
.pc-brand {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.pc-meta {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-muted);
}
.pc-nav {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 22px;
}
.pc-nav a {
  color: var(--ink-muted);
  text-decoration: none;
}
.pc-nav a:hover,
.pc-nav a[aria-current="page"] {
  color: var(--accent);
  text-decoration: underline;
}

.pc-intro {
  padding: var(--space-8) 0 var(--space-12);
  max-width: 640px;
}
.pc-title {
  font-size: 32px;
  line-height: 38px;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}
.pc-lede {
  margin: 0;
  color: var(--ink-muted);
}

.pc-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-12);
  align-items: start;
  padding-bottom: var(--space-12);
}

/* ---------- form ---------- */

.pc-section {
  border: 0;
  margin: 0 0 var(--space-8);
  padding: 0;
  min-inline-size: 0;
}
.pc-section-title {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  padding: 0 0 var(--space-3);
  margin: 0 0 var(--space-6);
  border-bottom: 1px solid var(--rule);
  width: 100%;
}
.pc-section-num {
  color: var(--accent);
  font-variant-numeric: lining-nums;
}

.pc-field {
  margin: 0 0 var(--space-6);
}
.pc-label {
  display: block;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
}
.pc-hint {
  display: block;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-muted);
  margin-top: var(--space-1);
}

.pc-money {
  display: flex;
  align-items: stretch;
  margin-top: var(--space-2);
  width: 240px;
  max-width: 100%;
  border: 1px solid var(--control);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.pc-money:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.pc-money span {
  padding: 0 0 0 var(--space-3);
  display: flex;
  align-items: center;
  color: var(--ink-muted);
  font-family: var(--font-serif);
}
.pc-money input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-1);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 22px;
  font-variant-numeric: tabular-nums lining-nums;
  outline: none;
}
/* Percentage fields read the same way, with the unit after the number. */
.pc-money--suffix span {
  padding: 0 var(--space-3) 0 0;
}
.pc-money--suffix input {
  padding-left: var(--space-3);
}

.pc-field.is-error .pc-money {
  border-color: var(--danger);
  border-width: 2px;
}
.pc-error {
  display: block;
  color: var(--danger);
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
  margin-top: var(--space-1);
}

.pc-check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin: 0 0 var(--space-6);
  cursor: pointer;
}
.pc-check input {
  appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  border: 1px solid var(--control);
  border-radius: var(--radius-sm);
  background: var(--surface);
  display: grid;
  place-content: center;
  cursor: pointer;
}
.pc-check input:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.pc-check input:checked::after {
  content: "";
  width: 6px;
  height: 11px;
  border: solid var(--on-accent);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}
.pc-check input:focus-visible,
.pc-radio input:focus-visible,
.pc-select:focus-visible,
.pc-date:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* A question with a fixed set of answers. Ruled rows, like everything else
   here: the options sit in a list rather than a row of pills. */
.pc-choice {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-6);
  min-inline-size: 0;
}
.pc-choice legend {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  padding: 0;
  margin-bottom: var(--space-2);
}
.pc-radio {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--rule);
  cursor: pointer;
}
.pc-radio:last-of-type {
  border-bottom: 1px solid var(--rule);
}
/* Round, where the checkbox is square. It is the only thing telling somebody
   that these five answers are one answer, so it keeps the shape people know
   even though nothing else here is rounder than 4px. */
.pc-radio input {
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--control);
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-content: center;
  cursor: pointer;
}
.pc-radio input:checked {
  border-color: var(--accent);
}
.pc-radio input:checked::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}
.pc-radio input:checked ~ span {
  font-weight: 700;
}

.pc-select,
.pc-date {
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 22px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--control);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  min-width: 240px;
  max-width: 100%;
}
.pc-date {
  font-family: var(--font-serif);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Disclosure for the fields most estates don't need. */
.pc-more {
  margin: 0 0 var(--space-6);
}
.pc-more > summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 16px;
  line-height: 22px;
  padding: var(--space-1) 0;
}
.pc-more > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.pc-more[open] > summary {
  margin-bottom: var(--space-6);
}

/* A plain text action. No big primary buttons. */
.pc-action {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22px;
  color: var(--accent);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--accent);
  padding: 0 0 2px;
  cursor: pointer;
}
.pc-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* A bordered action, for the few places that need a target rather than a link. */
.pc-button {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--control);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  text-decoration: none;
}
.pc-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* The one filled button on the site, for the one place something is being
   joined rather than calculated. accent on on-accent, the same pair the checked
   controls already use. The calculator still has no primary button, because the
   result needs no asking for. */
.pc-button--strong {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}
.pc-button--strong:hover {
  color: var(--on-accent);
  background: var(--ink);
  border-color: var(--ink);
}
.pc-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.pc-button[disabled] {
  opacity: 0.6;
  cursor: default;
}

.pc-gift {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-4);
  margin-bottom: var(--space-4);
}
.pc-gift-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;
}
.pc-gift-grid .pc-field {
  margin: 0;
}
.pc-gift-status {
  display: block;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-muted);
  margin-top: var(--space-2);
}
.pc-gift-status:empty {
  display: none;
}
.pc-gift-status.is-warning {
  color: var(--danger);
  font-weight: 700;
}

/* ---------- the Statement ---------- */

.pc-statement {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  position: sticky;
  top: var(--space-6);
}
.pc-statement h2 {
  font-size: 20px;
  line-height: 26px;
  margin: 0 0 var(--space-3);
}
.pc-statement h3 {
  font-size: 17px;
  line-height: 26px;
  margin: var(--space-6) 0 var(--space-2);
}

.pc-rows {
  width: 100%;
  border-collapse: collapse;
}
.pc-rows th,
.pc-rows td {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--rule);
  vertical-align: baseline;
}
.pc-rows th {
  text-align: left;
  font-weight: 400;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22px;
  padding-right: var(--space-3);
}
.pc-rows td {
  text-align: right;
  font-family: var(--font-serif);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 17px;
  line-height: 26px;
  white-space: nowrap;
}
.pc-rows .less th,
.pc-rows .less td {
  color: var(--ink-muted);
}
.pc-rows .sub th {
  font-weight: 700;
}
.pc-rows .sub td {
  font-weight: 600;
}
.pc-rows caption {
  text-align: left;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 26px;
  font-weight: 600;
  padding: var(--space-6) 0 var(--space-2);
}

.pc-result {
  margin-top: var(--space-3);
  border-top: 3px double var(--ink);
  padding: var(--space-4) var(--space-3) var(--space-3);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.pc-result.is-due {
  background: var(--due-soft);
}
.pc-result.is-nil {
  background: var(--accent-soft);
}
.pc-result-label {
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
}
.pc-result-figure {
  font-family: var(--font-serif);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 40px;
  line-height: 44px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--due);
  margin: var(--space-1) 0;
}
.pc-result-note {
  font-size: 15px;
  line-height: 22px;
  color: var(--ink);
  margin: 0;
}

.pc-note {
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-muted);
  margin: var(--space-3) 0 0;
}
.pc-foot {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-muted);
  margin: var(--space-4) 0 0;
}

.pc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pc-list > li {
  border-top: 1px solid var(--rule);
  padding: var(--space-3) 0;
}
.pc-list-detail {
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-muted);
  margin: 0;
}

.pc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-6);
}

/* The working in full, below the two columns. The Statement itself stays short
   enough to sit in the viewport, so it never needs an inner scrollbar. */
.pc-details {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-8);
  margin-bottom: var(--space-12);
}
.pc-details-title {
  font-size: 24px;
  line-height: 30px;
  margin: 0 0 var(--space-3);
}
/* The disclaimer sits under the heading rather than at the foot of the page —
   the same move the PDF makes, for the same reason: a caveat below the working
   is one most people never scroll to. */
.pc-details-note {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-muted);
  max-width: 68ch;
  margin: 0 0 var(--space-8);
}
.pc-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8) var(--space-12);
  align-items: start;
}
.pc-details-grid > div > h2 {
  font-size: 17px;
  line-height: 26px;
  margin: 0 0 var(--space-2);
}

/* Executr. A plain bordered panel on surface — the same treatment as the
   Statement, not a marketing card. accent-soft stays reserved for the
   "no tax to pay" result. */
.pc-executr {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-top: var(--space-8);
  max-width: 68ch;
}
.pc-executr-name {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  margin: 0 0 var(--space-2);
  color: var(--ink);
}
/* The muted colour is for the body text, not the heading above it. Without the
   :not() this rule outranks .pc-executr-name on specificity and the heading
   comes out the same grey as the paragraph under it. */
.pc-executr p:not(.pc-executr-name) {
  color: var(--ink-muted);
}
.pc-executr p:last-child {
  margin: 0;
}

/* The compact version that sits inside the Statement. */
.pc-executr--bar {
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding: var(--space-4) 0 0;
  margin-top: var(--space-4);
}
.pc-executr--bar .pc-executr-name {
  font-size: 17px;
  line-height: 26px;
}
.pc-executr-line {
  font-size: 15px;
  line-height: 22px;
  margin-bottom: var(--space-2);
}

/* The one-line summary that docks on phones. */
.pc-dock {
  display: none;
}

/* ---------- prose (guides and policy pages) ---------- */

.pc-prose {
  max-width: 68ch;
}

/* A page whose first child is the prose or the grid has no breadcrumb above it
   to space it off the header, so it provides its own. */
.pc-page > .pc-prose:first-child,
.pc-page > .pc-article-grid:first-child {
  padding-top: var(--space-8);
}

/* Markdown pages write a bare `# Title`, so the h1 needs the same treatment
   .pc-title gives the one in the guide layout. Without this it inherits
   `margin: 0` from the base heading rule and collides with the paragraph
   under it. */
.pc-prose > h1 {
  font-size: 32px;
  line-height: 38px;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
}
.pc-prose h2 {
  font-size: 24px;
  line-height: 30px;
  margin: var(--space-12) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
}
.pc-prose h3 {
  font-size: 19px;
  line-height: 26px;
  margin: var(--space-8) 0 var(--space-2);
}
.pc-prose ul,
.pc-prose ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}
.pc-prose li {
  margin-bottom: var(--space-2);
}
.pc-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: 16px;
  line-height: 22px;
}
.pc-prose th,
.pc-prose td {
  text-align: left;
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-top: 1px solid var(--rule);
  vertical-align: baseline;
}
.pc-prose thead th {
  border-top: 0;
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-sans);
  font-weight: 700;
}
/* Money columns right-align and use lining figures. */
.pc-prose td:not(:first-child) {
  font-family: var(--font-serif);
  font-variant-numeric: tabular-nums lining-nums;
}
.pc-prose blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-muted);
}
.pc-prose blockquote p:last-child {
  margin-bottom: 0;
}
.pc-prose code {
  font-family: var(--font-serif);
  font-size: 0.95em;
}
.pc-prose hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-8) 0;
}

/* ---------- early access ---------- */

/* Ruled off from the text above it, the way a form on paper is. */
.pc-signup {
  max-width: 52ch;
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
}
/* The form already has a rule along its top, so the heading drops the
   underline .pc-prose h2 would otherwise give it. */
.pc-signup h2 {
  font-size: 19px;
  line-height: 26px;
  margin: 0 0 var(--space-2);
  padding-bottom: 0;
  border-bottom: 0;
}
.pc-signup-note {
  color: var(--ink-muted);
  margin-bottom: var(--space-4);
}

/* The address field fills the panel. The questions below it are what makes the
   form worth more than one line, so it no longer shares a row with the action.*/
.pc-signup .pc-select {
  width: 100%;
  min-width: 0;
}

.pc-signup-actions {
  margin: 0;
}

/* Reserve the line so a reply doesn't shift the page when it arrives. */
.pc-signup-status {
  min-height: 22px;
  margin: var(--space-4) 0 0;
}
.pc-signup-status.is-ok {
  color: var(--accent);
}
.pc-signup-status.is-error {
  color: var(--danger);
}
.pc-signup[hidden],
.pc-signup form[hidden],
.pc-research[hidden] {
  display: none;
}

/* The ask that follows a confirmed signup. It takes the hidden form's place,
   so it needs no rule of its own — the panel already has one. */
.pc-research {
  margin-top: var(--space-6);
}

/* The honeypot. Off-screen rather than display:none, which some bots skip. */
.pc-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pc-breadcrumb {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-muted);
  padding-top: var(--space-6);
}
.pc-breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
}
.pc-breadcrumb li + li::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--rule);
}

.pc-article-meta {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-muted);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-8);
}

.pc-aside {
  position: sticky;
  top: var(--space-6);
}
.pc-aside h2 {
  font-size: 17px;
  line-height: 26px;
  margin: 0 0 var(--space-2);
}
.pc-toc {
  margin: 0 0 var(--space-8);
}
.pc-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 22px;
}
.pc-toc li {
  border-top: 1px solid var(--rule);
  padding: var(--space-2) 0;
}
.pc-toc a {
  color: var(--ink-muted);
  text-decoration: none;
}
.pc-toc a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Index of guides: ruled rows, not a grid of cards. */
.pc-index {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  max-width: 68ch;
}
.pc-index > li {
  border-top: 1px solid var(--rule);
  padding: var(--space-4) 0;
}
.pc-index > li:last-child {
  border-bottom: 1px solid var(--rule);
}
.pc-index h2,
.pc-index h3 {
  font-size: 19px;
  line-height: 26px;
  margin: 0 0 var(--space-1);
}
.pc-index a {
  text-decoration: none;
}
.pc-index a:hover {
  text-decoration: underline;
}
.pc-index p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 22px;
}

.pc-faq {
  margin-top: var(--space-8);
}
.pc-faq details {
  border-top: 1px solid var(--rule);
}
.pc-faq details:last-of-type {
  border-bottom: 1px solid var(--rule);
}
.pc-faq summary {
  padding: var(--space-3) 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
}
.pc-faq summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.pc-faq-body {
  padding-bottom: var(--space-3);
  color: var(--ink-muted);
}
.pc-faq-body p:last-child {
  margin-bottom: 0;
}

.pc-article-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-12);
  align-items: start;
  padding-bottom: var(--space-12);
}

/* ---------- footer ---------- */

.pc-sitefoot {
  border-top: 1px solid var(--rule);
  margin-top: var(--space-12);
  padding: var(--space-8) 0 var(--space-12);
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-muted);
}
.pc-sitefoot-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}
.pc-sitefoot h2 {
  font-size: 17px;
  line-height: 26px;
  margin: 0 0 var(--space-2);
  color: var(--ink);
}
.pc-sitefoot ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pc-sitefoot li {
  padding: var(--space-1) 0;
}
.pc-sitefoot a {
  color: var(--ink-muted);
  text-decoration: none;
}
.pc-sitefoot a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.pc-sitefoot p {
  margin: 0 0 var(--space-2);
  font-size: 13px;
  line-height: 18px;
}

/* ---------- phone ---------- */

@media (max-width: 860px) {
  .pc-page {
    padding: 0 var(--space-4);
  }
  .pc-grid,
  .pc-article-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .pc-statement,
  .pc-aside {
    position: static;
  }
  .pc-details-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .pc-statement {
    padding: var(--space-4);
  }
  .pc-title,
  .pc-prose > h1 {
    font-size: 26px;
    line-height: 32px;
  }
  .pc-intro {
    padding: var(--space-6) 0 var(--space-8);
  }

  /* One line, docked, tapping it scrolls to the Statement. */
  .pc-dock {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    width: 100%;
    text-align: left;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 22px;
    color: var(--ink);
    background: var(--surface);
    border: 0;
    box-shadow: var(--shadow-dock);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
  }
  .pc-dock[hidden] {
    display: none;
  }
  .pc-dock-figure {
    font-family: var(--font-serif);
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: 600;
  }
  .pc-dock-chevron {
    float: right;
    color: var(--ink-muted);
  }
  body.has-dock {
    padding-bottom: 56px;
  }
}

/* ---------- print ---------- */

/* The one place tokens deliberately do not apply: on paper we want true black
   on true white, not the warm screen palette. */
@media print {
  @page {
    margin: 16mm;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }
  .pc-header,
  .pc-nav,
  .skip,
  .pc-dock,
  .pc-actions,
  .pc-sitefoot-cols,
  .pc-more,
  .pc-aside,
  form {
    display: none !important;
  }
  .pc-grid {
    display: block;
  }
  .pc-statement {
    position: static;
    border: 0;
    padding: 0;
  }
  .pc-result {
    background: none !important;
    border-top: 3px double #000;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}