/* The Programme Dashboard (research/dashboard/). Scoped under .pgd. Every value is one of css/brand.css's tokens,
   so scripts/check-css-tokens.py holds it. Mobile first: one column on a phone, the page in one column of at most
   952 px, the gold in two columns from 1024 px. Touch targets are at least 44 px. Motion is off when the reader asks
   for less. Accordions open for print. */

.pgd { color: var(--ink); font-family: var(--font-body); max-width: 952px; margin-inline: auto; padding-bottom: var(--space-2xl); }
.pgd a { color: var(--accent-link); text-underline-offset: .18em; }
.pgd a:hover { color: var(--accent-link-hover); }
.pgd :focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }

/* the masthead: the kicker, the title and the why */
.pgd-mast { padding: var(--space-2xl) 0 0; } /* one rule under the mast: the first band's own hairline */
.pgd-kicker, .pgd-label {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-text); margin: 0 0 var(--space-xs);
}
.pgd-mast h1 { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.15; letter-spacing: -.015em; margin: 0 0 var(--space-md); text-wrap: balance; }
.pgd-why { max-width: 38rem; font-size: var(--text-md); line-height: 1.6; color: var(--ink-sec); margin: 0; text-wrap: pretty; }

/* a band: one idea per band */
.pgd section.pgd-band { background: none; margin: var(--space-3xl) 0 0; padding: var(--space-2xl) 0 0; border-top: 1px solid var(--hairline); }
.pgd .pgd-band > h2 {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: 1.25; letter-spacing: -.01em;
  text-transform: none; color: var(--ink); border: 0; padding: 0; margin: 0 0 var(--space-sm);
}
.pgd-note { font-size: var(--text-sm); line-height: 1.55; color: var(--ink-sec); max-width: 42rem; margin: 0 0 var(--space-md); }
.pgd-band > .pgd-note { font-size: var(--text-md); line-height: 1.6; margin-bottom: var(--space-xl); text-wrap: pretty; }
.pgd-band > .pgd-note:last-child, .pgd-band > .pgd-lede:last-child { margin-bottom: 0; } /* a band with no body, such as the record band's panel */

/* the gold: one card per paper, its results listed in rank order, and the findings that went against them printed
   once under one label, at the results' size and never smaller */
.pgd-gold { display: grid; grid-template-columns: 1fr; align-items: start; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
/* start, not stretch: a long result must not leave its neighbours' cards half empty */
.pgd-card {
  background: var(--paper-card); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm);
}
.pgd-card > .pgd-label:first-child {
  font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; line-height: 1.3; letter-spacing: -.005em;
  text-transform: none; color: var(--ink); margin: 0; text-wrap: balance;
}
.pgd-result, .pgd-counter { font-size: var(--text-md); line-height: 1.55; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.pgd-result { margin: 0; }
.pgd-counter { border-top: 1px solid var(--border); padding-top: var(--space-sm); margin: 0; }
/* the companion is set at the result's size and in the result's ink: equal weight, never a footnote */
.pgd-counter .pgd-label { color: var(--ink-sec); }
.pgd-results { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
/* each result after the first is parted from the one above by a rule, as the card's findings are */
.pgd-results > li + li { border-top: 1px solid var(--hairline); padding-top: var(--space-sm); }
.pgd-results .pgd-label, .pgd-results .pgd-note { margin: 0; }
.pgd-counters { display: grid; gap: var(--space-2xs); margin: var(--space-2xs) 0 0; padding-left: 1.1rem; }
/* a result's own dated evidence, from its run's records: set below the result, never above it or larger */
.pgd-dated { font-size: var(--text-sm); line-height: 1.5; color: var(--ink-sec); margin: var(--space-2xs) 0 0; }
.pgd-links { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin: auto 0 0; padding: 0; list-style: none; }
.pgd-links a { display: inline-flex; align-items: center; justify-content: flex-start; min-height: 44px; min-width: 44px;
  font-size: var(--text-sm); } /* short words stay 44 by 44 to tap */
/* a link that does not exist: the field's name and the signed words for its absence, never an empty cell and never a guessed link */
.pgd-nolink { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; font-size: var(--text-sm); color: var(--ink-sec); }
.pgd-field { color: var(--ink-dim); }
.pgd-record { margin: var(--space-md) 0 0; font-size: var(--text-sm); color: var(--ink-sec); }

/* the journey strip: spine numbers only */
.pgd-journey { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.pgd-count { background: var(--paper-card); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-md) var(--space-lg); }
.pgd-count b { display: block; font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; }
.pgd-count span { display: block; font-size: var(--text-sm); line-height: 1.35; color: var(--ink-sec); margin-top: var(--space-2xs); }
/* the two links out of the journey: to the runnable tests and to every study unit's state */
.pgd-jlinks { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); margin: var(--space-sm) 0 0; padding: 0; list-style: none; }
.pgd-jlinks a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); }

/* the deep views: linked cards */
.pgd-deep { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); margin: 0 0 var(--space-2xl); padding: 0; list-style: none; }
.pgd-deep a {
  display: block; min-height: 44px; background: var(--paper-card); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-sm) var(--space-md); text-decoration: none; color: var(--ink);
  transition: box-shadow var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
@media (hover: hover) {
  .pgd-deep a:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); color: var(--ink); }
}
.pgd-deep strong::after {
  content: ""; display: inline-block; width: .45em; height: .45em; margin-left: .45em; vertical-align: .12em;
  border-top: 2px solid var(--gold-text); border-right: 2px solid var(--gold-text); transform: rotate(45deg);
}
.pgd section.pgd-band[aria-labelledby="pgd-record"] {
  background: var(--paper-raised); border-top: 2px solid var(--gold); border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
}
.pgd-deep strong { display: block; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.pgd-deep span { display: block; font-size: var(--text-sm); color: var(--ink-sec); margin-top: var(--space-2xs); }

/* the accordion cards and the state chips, in the preregistration page's state vocabulary, so one state looks the same everywhere */
details.pgd-acc { background: var(--paper-card); border: 1px solid var(--hairline); border-radius: var(--radius-lg); margin: 0 0 var(--space-sm); }
details.pgd-acc > summary {
  list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md); font-weight: 600;
}
details.pgd-acc > summary::-webkit-details-marker { display: none; }
details.pgd-acc > summary::after { content: "+"; margin-left: auto; font-family: var(--font-mono); color: var(--gold-text); }
details.pgd-acc[open] > summary::after { content: "\2212"; }
details.pgd-acc > .pgd-acc-body { padding: 0 var(--space-md) var(--space-md); border-top: 1px solid var(--hairline); }
.pgd-chip {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--space-xs); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--border); color: var(--ink-sec); background: var(--paper); /* a state is read, never squinted at: 10px, the site's floor */
}
.pgd-chip--run { border-color: var(--green); color: var(--green-text); background: var(--green-bg); }
.pgd-chip--draft { border-color: var(--gold-border); color: var(--gold-text); background: var(--gold-bg); }

@media (min-width: 64em) {
  .pgd-gold { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgd-mast h1 { font-size: var(--text-5xl); line-height: 1.12; }
  .pgd-why { font-size: var(--text-lg); }
  .pgd .pgd-band > h2 { font-size: var(--text-2xl); }
  .pgd section.pgd-band { margin-top: var(--space-4xl); }
}
@media (min-width: 760px) {
  .pgd-deep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgd-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* the counts read three across */
  .pgd-card { padding: var(--space-lg); }
}
@media (min-width: 1200px) {
  .pgd-deep { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* the only transition on the page is the deep cards'; the same selector, later, switches it off */
@media (prefers-reduced-motion: reduce) {
  .pgd-deep a { transition: none; }
}
@media print {
  details.pgd-acc > .pgd-acc-body { display: block; }
  .pgd-card, .pgd-deep a, details.pgd-acc { box-shadow: none; break-inside: avoid; }
}

/* the counts: what has been done leads, three across from 760px; on a phone each count is a ledger row, its number
   beside its words; a signed note sits under the words, at the site's small text size and never at 10px, since the
   notes carry the dating evidence */
.pgd-count small { display: block; font-size: var(--text-sm); line-height: 1.45; color: var(--ink-sec); margin-top: var(--space-xs); text-wrap: pretty; }
.pgd-count b.pgd-count-word { font-size: var(--text-xl); line-height: 1.2; }
@media (max-width: 759.98px) {
  .pgd-journey { grid-template-columns: 1fr; gap: var(--space-xs); }
  .pgd-journey:not(.pgd-journey--later) > .pgd-count {
    display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: var(--space-md); align-items: baseline;
    padding: var(--space-sm) var(--space-md);
  }
  .pgd-journey:not(.pgd-journey--later) > .pgd-count b { grid-row: 1 / span 2; font-size: var(--text-2xl); }
  .pgd-journey:not(.pgd-journey--later) > .pgd-count span { grid-column: 2; margin-top: 0; }
  /* a note set at the words' own size is parted from them by space */
  .pgd-journey:not(.pgd-journey--later) > .pgd-count small { grid-column: 2; margin-top: var(--space-xs); }
}
/* the key: each term beside its meaning from 760px */
.pgd-terms { display: grid; gap: var(--space-sm); max-width: 44rem; margin: var(--space-lg) 0 0; padding: 0; }
.pgd-terms div { display: grid; gap: var(--space-2xs) var(--space-md); }
.pgd-terms dt { font-weight: 600; color: var(--ink); }
.pgd-terms dd { margin: 0; line-height: 1.55; color: var(--ink-sec); }
/* the counts still at zero: below the key, quieter, each with its reason */
.pgd-later-h { font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; line-height: 1.3; color: var(--ink); margin: var(--space-xl) 0 var(--space-sm); }
.pgd-journey--later { margin-top: var(--space-md); }
.pgd-journey--later .pgd-count { background: none; box-shadow: none; display: flex; flex-direction: column; }
.pgd-journey--later .pgd-count b { font-size: var(--text-xl); margin-top: var(--space-2xs); }
/* a zero never leads (SD-019): in a count still to come the label is shown first and the state after it, by flex
   order alone, so the markup, and with it the words, their order and what is spoken, are unchanged */
.pgd-journey--later .pgd-count span { order: -1; margin-top: 0; font-weight: 600; color: var(--ink); }
.pgd-journey--later .pgd-count b.pgd-count-word { font-size: var(--text-md); }
@media (min-width: 760px) {
  .pgd-terms div { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); }
  .pgd-journey--later { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* the programme map: a drawing from 1024px, the full width of the column so every target in it stays 44px or more,
   its caption at every width, and below 1024px the same map drawn as one column for a phone, then the map as a list
   at every width, after the drawing. Each decision is drawn in its pair's instrument state, a design draft dashed
   and a blocked one dotted; what only informs is drawn finer still. Status is never shown by colour alone. The
   drawing's own sizes are in its units, which scale with it. */
.pgd-graph { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.pgd-gv-figure { margin: 0; }
.pgd-gv { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.pgd-gv--wide { display: none; }
/* a caption inside the drawing, in the note's voice: set once, above the foot */
.pgd-gv-caption { font-size: 13px; font-style: italic; fill: var(--ink-sec); }
.pgd-gv-col { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink-dim); }
.pgd-gv-edge { fill: none; stroke: var(--border-strong); stroke-width: 1.25; }
.pgd-gv-edge--decides { stroke: var(--ink-sec); stroke-width: 1.5; stroke-dasharray: 7 4; }
.pgd-gv-edge--design-draft-blocked { stroke-dasharray: .5 5; stroke-linecap: round; stroke-width: 2.25; }
.pgd-gv-edge--follows { stroke: var(--border); stroke-dasharray: 3 5; }
/* what only informs is drawn finer than any design draft: weight falls as the claim weakens */
.pgd-gv-edge--informs { stroke: var(--border); stroke-width: 1; stroke-dasharray: 1 5; }
/* a prediction the unit's own registration names: thin and unbroken, lighter than a decision and never read as one */
.pgd-gv-edge--names { stroke: var(--border-strong); stroke-width: 1; }
/* a decider the registration names in words: a decision's weight in a long dash of its own */
.pgd-gv-edge--in-words { stroke: var(--ink-sec); stroke-width: 1.5; stroke-dasharray: 12 4; }
/* a decision in part: a decision's weight, broken twice as often, since it reaches only part of the prediction */
.pgd-gv-edge--in-part { stroke: var(--ink-sec); stroke-width: 1.5; stroke-dasharray: 12 4 2 4; }
/* a unit that presupposes the prediction: the quietest line, a dash and a dot, never read as a test of it */
.pgd-gv-edge--depends { stroke: var(--border); stroke-width: 1; stroke-dasharray: 6 3 1 3; }
.pgd-gv-edge--reported { stroke: var(--gold-border); stroke-width: 1; }
.pgd-gv-node rect { fill: var(--paper-card); stroke: var(--border-strong); stroke-width: 1; }
/* a unit that only follows on a paper sits in that paper's card, on the card's own ground */
.pgd-gv-node--chip rect { fill: var(--paper-surface); }
.pgd-gv-node--undecided rect { stroke-dasharray: 3 3; fill: var(--paper-surface); }
.pgd-gv-name { font-size: 13px; fill: var(--ink); }
.pgd-gv-law { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; fill: var(--gold-text); }
/* a band's words sit over the lines that cross them: a paper edge round each letter lifts it clear of a line drawn
   beneath, so a word is never struck through */
.pgd-gv-heads text { paint-order: stroke fill; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.pgd-gv-p { font-family: var(--font-mono); font-size: 13px; fill: var(--ink); text-anchor: middle; }
.pgd-gv-state { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; fill: var(--ink-sec); }
/* a result: a gold bead on the thread that hangs from its paper's name, its own words beside it, the whole row one
   link to its card below */
.pgd-gv-dot circle { fill: var(--gold); stroke: var(--paper-card); stroke-width: 1.5; }
.pgd-gv-dot .pgd-gv-hit { fill: transparent; stroke: none; } /* the row's hit area, 44px or more, unseen */
.pgd-gv-result { font-size: 12.5px; fill: var(--ink-sec); }
.pgd-gv a:hover rect:not(.pgd-gv-hit), .pgd-gv a:focus-visible rect:not(.pgd-gv-hit) { stroke: var(--accent-link); stroke-width: 2.5; }
.pgd-gv a.pgd-gv-dot:hover circle, .pgd-gv a.pgd-gv-dot:focus-visible circle { stroke: var(--accent-link); stroke-width: 2.5; }
.pgd-gv a.pgd-gv-dot:hover .pgd-gv-result, .pgd-gv a.pgd-gv-dot:focus-visible .pgd-gv-result { fill: var(--accent-link); }
.pgd-gl-title { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.3; margin: 0 0 var(--space-sm); }
.pgd-gl-sub { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); margin: var(--space-md) 0 var(--space-2xs); }
.pgd-gl-laws, .pgd-gl-props, .pgd-gl-units, .pgd-gl-papers, .pgd-gl-foot { list-style: none; margin: 0; padding: 0; }
.pgd-gl-law { margin: 0 0 var(--space-md); }
.pgd-gl-lawname { display: block; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 var(--space-2xs); }
/* the status words under a law the registration does not register, read beside its name */
.pgd-gl-lawstatus { display: block; font-size: var(--text-xs); color: var(--ink-sec); margin: 0 0 var(--space-2xs); }
.pgd-gl-props > li { margin: 0 0 var(--space-sm); padding-left: var(--space-sm); border-left: 1px solid var(--hairline); }
.pgd-gl-label { display: block; font-size: var(--text-sm); line-height: 1.45; color: var(--ink-sec); }
.pgd-gl-units > li, .pgd-gl-papers > li { font-size: var(--text-sm); line-height: 1.45; margin: 0 0 var(--space-sm); } /* two links never sit flush */
.pgd-gl-kind { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
.pgd-gl-none { margin: var(--space-2xs) 0 0; font-size: var(--text-sm); color: var(--ink-dim); }
.pgd-gl a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
/* inside a paper's sentence a link runs in the line, so a comma stays with the words before it and a number with its
   title; its padding widens the tap area and is kept small, so no link reaches over the words of the line above */
.pgd-gl-papers a { display: inline; min-height: 0; min-width: 0; padding-block: var(--space-xs); }
/* a unit's row in the list: its relation on its own line, then its number and its title side by side, so a long title
   wraps under itself and never back under the relation or the number */
.pgd-gl-units > li > .pgd-gl-kind { display: block; }
.pgd-gl-row { display: flex; align-items: baseline; gap: 0 var(--space-sm); }
.pgd-gl-row > a { flex: none; }
.pgd-gl-name { flex: 1 1 auto; min-width: 0; }
.pgd-gl-name .pgd-chip { margin-left: var(--space-2xs); vertical-align: baseline; }
.pgd-chip--design-draft { border-style: dashed; }
.pgd-chip--design-draft-blocked { border-style: dotted; border-width: 2px; }
@media (min-width: 64em) {
  .pgd-gv--wide { display: block; }
  .pgd-gv--phone { display: none; }
}
@media print {
  .pgd-gv-figure { break-inside: avoid; }
  .pgd-gv--wide { display: block; }
  .pgd-gv--phone { display: none; }
}

/* the map on a phone: the same view as one column, the papers with their results, then the predictions by law, then
   what decides them. One drawing unit is one pixel in a 358px column, and the figure is capped so the drawing keeps a
   reading measure on a tablet, centred in the column there so it never leaves half the screen empty. Every connector is drawn inside its own row, so no line runs between the groups and no
   two lines cross. Nothing in the drawing is a link: the list under it carries every link at a full tap size. */
.pgd-gv--phone { max-width: 26rem; margin-inline: auto; }
/* below 760px the list is the map: the drawing for a phone, some ten screens tall with its titles cut short, is not
   drawn there, so a reader meets the map once, with every link; from 760px to 64em it is drawn above the list, and
   from 64em the wide drawing and the list both stand */
@media (max-width: 759.98px) {
  .pgd-gv--phone { display: none; }
}
.pgd-gvp-band { font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink-dim); }
.pgd-gvp-law { font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; fill: var(--gold-text); }
.pgd-gvp-kind { font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; fill: var(--ink-dim); }
.pgd-gvp-state { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; fill: var(--ink-sec); }
.pgd-gvp-id { font-family: var(--font-mono); font-size: 14px; fill: var(--ink-dim); }
.pgd-gvp-p { font-family: var(--font-mono); font-size: 14px; fill: var(--ink); text-anchor: middle; }
.pgd-gvp-name { font-size: 15px; fill: var(--ink); }
.pgd-gvp-title { font-size: 14px; fill: var(--ink-sec); }
.pgd-gvp-result { font-size: 13px; fill: var(--ink-sec); }
/* the rules that carry the rows: one under each group's name, and one above every row after the first */
.pgd-gvp-rule { fill: none; stroke: var(--hairline); stroke-width: 1; }
.pgd-gvp-pill { fill: var(--paper-card); stroke: var(--border-strong); stroke-width: 1; }
/* a prediction no study yet decides */
.pgd-gvp-pill--undecided { fill: var(--paper-surface); stroke-dasharray: 3 3; }
/* the key under the predictions, drawn once, so the dashed outline has a meaning in words */
.pgd-gvp-key { fill: var(--paper-surface); stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
/* a unit drawn as one line: under the paper it follows on, or in the foot's grid */
.pgd-gvp-chiprect { fill: var(--paper-surface); stroke: var(--border); stroke-width: 1; }
/* under a reader's own colours the fills and strokes are theirs, so the row structure survives */
@media (forced-colors: active) {
  .pgd-gvp-pill, .pgd-gvp-key, .pgd-gvp-chiprect { fill: Canvas; stroke: CanvasText; }
  .pgd-gvp-rule, .pgd-gv-edge { stroke: CanvasText; }
}