/* The Programme Dashboard (research/dashboard/), T6-research, 23 September 2026 (PM D170, D170a).
   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 at 390; the gold in two columns from 760 px and three from 1200 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); }
.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); outline-offset: 3px; border-radius: var(--radius-sm); }

/* the masthead: the kicker, the title and the why */
.pgd-mast { padding: var(--space-2xl) 0 var(--space-xl); border-bottom: 1px solid var(--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-4xl); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 var(--space-md); }
.pgd-why { max-width: 38rem; font-size: var(--text-lg); line-height: 1.6; color: var(--ink-sec); margin: 0; }

/* a band: one idea per band */
.pgd-band { padding: var(--space-2xl) 0 0; }
.pgd-band > h2 { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.2; letter-spacing: -.01em; margin: 0 0 var(--space-sm); }
.pgd-note { font-size: var(--text-sm); line-height: 1.55; color: var(--ink-dim); max-width: 44rem; margin: 0 0 var(--space-md); }

/* the gold: one card per result, its adverse or null companion beside it, 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 (the 1440 read of 19:28Z) */
.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-result { font-size: var(--text-md); line-height: 1.55; margin: 0; font-variant-numeric: tabular-nums; }
.pgd-counter { border-top: 1px solid var(--hairline); padding-top: var(--space-sm); margin: 0; font-size: var(--text-md); line-height: 1.55; color: var(--ink); }
/* the companion is set at the result's size and in the result's ink: equal weight, never a footnote (T2's rule) */
.pgd-counter .pgd-label { color: var(--ink-dim); }
.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: center; min-height: 44px; min-width: 44px;
  font-size: var(--text-sm); } /* short words stay 44 by 44 to tap (DNA; the 390 read of 19:28Z found 21 px) */
/* a link that does not exist: the field's name and T2's signed words, 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-warm); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-sm) var(--space-md); }
.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-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); margin-top: var(--space-2xs); }
/* the two links out of the journey, signed by T2: 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);
}
.pgd-deep a:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); color: var(--ink); }
.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); }

/* v2: the accordion cards and the state chips (the W3 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-2xs); letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--border); color: var(--ink-sec); background: var(--paper);
}
.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: 760px) {
  .pgd-gold { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgd-deep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgd-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* T2's six numbers read three by two: what has run, by kind; then the studies' states */
  .pgd-card { padding: var(--space-lg); }
}
@media (min-width: 1200px) {
  .pgd-gold { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pgd-deep { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pgd-mast h1 { font-size: var(--text-5xl); }
}
/* 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 */
.pgd-count small { display: block; font-size: var(--text-xs); 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,
  .pgd-journey:not(.pgd-journey--later) > .pgd-count small { grid-column: 2; margin-top: 0; }
}
/* 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; }
.pgd-journey--later .pgd-count b { font-size: var(--text-xl); }
@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 the same map as a list at every width, after the drawing. Below 1024px only the
   drawing is hidden, never the figure or its caption, and the gap that parts the drawing from the list comes with
   the drawing, so the caption sits above the list as every other band's intro sits above its content. 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; align-items: start; }
.pgd-gv-figure { margin: 0; }
.pgd-gv { display: none; width: 100%; height: auto; font-family: var(--font-body); }
.pgd-gv-col { font-family: var(--font-mono); font-size: 11px; 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; }
.pgd-gv-edge--informs { stroke: var(--border-strong); stroke-width: .9; stroke-dasharray: 2 4; }
.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; }
.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: 10.5px; letter-spacing: .08em; text-transform: uppercase; fill: var(--gold-text); }
.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: 10.5px; letter-spacing: .06em; fill: var(--ink-sec); }
.pgd-gv-dot circle { fill: var(--gold); stroke: var(--paper-card); stroke-width: 1.5; }
.pgd-gv-dot circle.pgd-gv-hit { fill: transparent; stroke: none; } /* the dot's 44px hit area, unseen */
.pgd-gv a:hover rect, .pgd-gv a:focus-visible rect { stroke: var(--accent-link); stroke-width: 2.5; }
.pgd-gv a.pgd-gv-dot:hover circle:not(.pgd-gv-hit), .pgd-gv a.pgd-gv-dot:focus-visible circle:not(.pgd-gv-hit) { stroke: var(--accent-link); stroke-width: 2.5; }
.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 { 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); }
.pgd-gl-props > li { margin: 0 0 var(--space-xs); 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; }
.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; }
.pgd-chip--design-draft { border-style: dashed; }
.pgd-chip--design-draft-blocked { border-style: dotted; border-width: 2px; }
@media (min-width: 64em) {
  .pgd-graph { gap: var(--space-lg); }
  .pgd-gv { display: block; }
}
@media print {
  .pgd-graph { gap: var(--space-lg); }
  .pgd-gv-figure { break-inside: avoid; }
  .pgd-gv { display: block; }
}