/* Councillor Commitments. The Bo Report paper theme, adapted from 1080 px canvases
   to a scrolling page. Tokens from the design system's tokens.json. `muted` never
   carries text here (fails 4.5:1); `win` and `caution` never carry small type.
   v2 (28 Sep 2026): one fixed-size record meter everywhere, scorecards instead of
   stacked prose, and a vote matrix on commitment pages. */

@font-face { font-family: "BoReport Inter"; src: url("fonts/Inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "BoReport Inter"; src: url("fonts/Inter-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "BoReport Inter"; src: url("fonts/Inter-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --ground: #ffffff; --ink: #111111; --read: #111111; --meta: #5f6368; --rule: #e3e6ea;
  --accent: #c0392b; --win: #1f8a4c; --caution: #b9770e; --on-band: #ffffff; --wash: #f5f6f7;
  --gutter: 16px; --page: 1080px;
}

* { box-sizing: border-box; border-radius: 0; }
html { background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--read);
  font-family: "BoReport Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-size: 16px; line-height: 1.5; font-feature-settings: "tnum" 1; -webkit-text-size-adjust: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
img { display: block; }
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Masthead: set type, never a logo */
/* The header stays on screen so the menu is always one tap away (Jason, 28 Sep 2026).
   --mh is its height, set by the page script; section headings stick beneath it. */
.masthead { border-bottom: 4px solid var(--ink); position: sticky; top: 0; z-index: 10; background: var(--ground); }
html { scroll-padding-top: calc(var(--mh, 56px) + 8px); }
.search { font: inherit; font-size: 16px; width: 100%; box-sizing: border-box; padding: 10px 12px; margin-top: 6px;
  border: 2px solid var(--ink); border-radius: 0; background: var(--ground); color: var(--ink); }
.vlist li[hidden] { display: none; }
.masthead .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; padding-top: 16px; padding-bottom: 12px; }
.mark { font-weight: 700; font-size: 14px; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
/* The way home to the Bo Report hub (14 Oct 2026): a breadcrumb in the masthead, on every page. */
.marks { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.mark.parent { color: var(--meta); }
.mark.parent:hover { color: var(--ink); text-decoration: underline; }
.slash { color: var(--meta); font-weight: 700; font-size: 14px; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; font-weight: 700; }
.nav a { text-decoration: none; }
.nav a[aria-current] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* Type */
h1 { font-size: 32px; line-height: 1.08; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
h2 { font-size: 13px; line-height: 1.3; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin: 0; }
p { margin: 0 0 10px; }
.lede { font-size: 18px; line-height: 1.45; max-width: 640px; }
.meta { color: var(--meta); font-size: 14px; }
.ref { font-size: 11px; line-height: 1.3; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--meta); font-feature-settings: "tnum" 0, "ss02" 1, "case" 1; margin: 0; }

section { margin: 40px 0; }
.sec { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 8px; }
.sec a { font-size: 13px; color: var(--meta); }
/* Sticky headings: a section's heading holds at the top until the section ends and
   the next one pushes it off; a group heading holds just beneath it. --sec-h is the
   section heading's height, set by the page script; 0 outside a headed section, so a
   heading there holds right under the masthead rather than floating a gap below it. */
.sec { position: sticky; top: var(--mh, 0px); z-index: 3; background: var(--ground); padding-top: 10px; }
.grp { position: sticky; top: calc(var(--mh, 0px) + var(--sec-h, 0px)); z-index: 2; background: var(--ground); }

/* Portraits: the City's official photos, cropped square */
.pt { background: var(--rule); object-fit: cover; object-position: 50% 25%; flex: none; }
.pt-m { width: 72px; height: 72px; }
.pt-s { width: 40px; height: 40px; }
.pt-xs { width: 28px; height: 28px; }

/* Page header. Member pages use the compact form so the key promises fit the first
   phone screen (29 Sep 2026): 72px photo, one line of role and term, documents drop-down. */
.phead { display: flex; gap: 16px; align-items: center; margin: 28px 0 8px; }
.phead h1 { margin: 2px 0 4px; }
.phead.compact { align-items: flex-start; gap: 12px; margin: 14px 0 6px; }
.phead.compact h1 { font-size: 26px; margin: 0 0 2px; }
.phead.compact .meta { font-size: 13px; margin: 0; }

/* The record meter: seven fixed steps, consistently against (left) to consistently
   for (right). Always the same size; only the filled step changes. */
.rec { display: flex; align-items: center; gap: 10px; min-width: 0; }
.meter { display: inline-grid; grid-template-columns: repeat(7, 12px); gap: 2px; flex: none; }
.meter i { height: 12px; background: var(--rule); }
.meter i.on.for { background: var(--win); }
.meter i.on.against { background: var(--accent); }
.meter i.on.mixed { background: var(--caution); }
.meter.agree i { background: var(--wash); }
.meter.agree i.mid { background: var(--ink); }
.meter.none i { background: none; outline: 1px solid var(--rule); outline-offset: -1px; }
/* Consensus: the member's own meter, framed, because Council agreed on the promise. */
.meter { padding: 3px; border: 1px solid transparent; }
.meter.framed { border-color: var(--ink); }
.phrase .cons { display: block; font-size: 12px; font-weight: 400; color: var(--meta); margin-top: 3px; }
.phrase { font-weight: 700; font-size: 15px; color: var(--ink); line-height: 1.25; }
.phrase.quiet { font-weight: 400; color: var(--meta); }

/* Scorecards */
.card { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: center; }
.row .what { grid-column: 1 / -1; min-width: 0; }
.row .what a { font-weight: 700; text-decoration: none; }
.row .what a:hover { text-decoration: underline; }
.row .q { display: block; color: var(--meta); font-size: 14px; line-height: 1.35; margin-top: 2px; }
.row .n { font-size: 14px; color: var(--meta); text-align: right; white-space: nowrap; }
.row .n b { color: var(--ink); }
.row .who { display: flex; align-items: center; gap: 10px; }
.grp { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--meta); padding: 18px 0 6px; border-bottom: 1px solid var(--rule); list-style: none; }
.grp:first-child { padding-top: 10px; }
.tag { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--meta); color: var(--meta); padding: 1px 5px 0; margin-left: 6px; vertical-align: 2px; }

/* The vote matrix */
.matrix { list-style: none; margin: 0; padding: 0; }
.mhdr, .mrow { display: grid; grid-template-columns: 1fr; gap: 6px 16px; }
.mhdr { display: none; }
.mrow { padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: center; }
.mrow .t a { font-weight: 700; text-decoration: none; }
.mrow .t a:hover { text-decoration: underline; }
.mrow .t .ref { margin-bottom: 2px; }
.mrow .dir { font-size: 13px; color: var(--meta); margin-top: 2px; }
.mrow .dir b { color: var(--ink); }
.cells { display: grid; grid-template-columns: repeat(9, 34px); gap: 3px; }
.cell { height: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; line-height: 1; }
.cell small { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; margin-top: 2px; }
.cell.y { background: var(--ink); color: var(--on-band); }
.cell.x { border: 2px solid var(--ink); color: var(--ink); }
.cell.o { border: 1px dashed var(--rule); color: var(--meta); }
.cell.n { color: var(--meta); }
/* Phones read each vote as words; the grid (and its legend) is for wider screens. */
.vl { font-size: 14px; margin-top: 4px; }
.vl p { margin: 2px 0; }
.story { margin-top: 12px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--meta); margin: 10px 0 4px; }
.legend .cell { width: 18px; height: 18px; font-size: 11px; display: inline-flex; vertical-align: -4px; margin-right: 6px; }
.flag { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--ink); padding: 1px 5px 0; margin-left: 6px; color: var(--ink); }

/* Quotes and the test */
.quotes { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.quotes li { display: flex; gap: 12px; align-items: flex-start; }
.quotes q { display: block; font-size: 17px; line-height: 1.35; color: var(--ink); quotes: "“" "”"; }
.quotes .by { font-size: 13px; color: var(--meta); }
.means { margin: 16px 0 0; padding: 10px 12px; border-left: 4px solid var(--ink); background: var(--wash); font-size: 15px; max-width: 680px; }
.means b { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; display: block; margin-bottom: 2px; }

/* Item page */
.result { font-size: 56px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); margin: 18px 0 6px; }
.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 16px; }
.names { list-style: none; margin: 8px 0 0; padding: 0; }
.names li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.names .former { padding-left: 38px; color: var(--meta); }
.plist { list-style: none; margin: 0; padding: 0; }
.plist li { padding: 10px 0; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.draft { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }

/* Home */
.members { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 12px; }
.members a { text-decoration: none; display: flex; flex-direction: column; height: 100%; }
.members span { display: block; }
/* Vote counts sit on one baseline across the row, however the name or role wraps (Jason, 15 Oct 2026). */
.members span.since { margin-top: auto; padding-top: 4px; }
.members img { width: 100%; height: auto; aspect-ratio: 1; margin-bottom: 6px; }
.members b { display: block; font-size: 14px; line-height: 1.25; }
.members span { font-size: 12px; color: var(--meta); }
.members a:hover b { text-decoration: underline; }

details > summary { cursor: pointer; font-weight: 700; font-size: 15px; color: var(--ink); padding: 14px 0; border-bottom: 1px solid var(--rule); list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▸ "; }
details[open] > summary::before { content: "▾ "; }
.limits { color: var(--meta); font-size: 13px; margin-top: 28px; }
.prose { max-width: 680px; margin-top: 28px; }
.prose h1 { margin-bottom: 16px; }
.prose h2 { margin: 28px 0 8px; font-size: 20px; letter-spacing: -0.01em; text-transform: none; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 8px 0 16px; }
/* Method diagrams (14 Oct 2026): flat, square, one colour per verdict, the verdict word always with it. */
.dia { margin: 18px 0 24px; border: 2px solid var(--ink); padding: 16px; }
.dia .ref a { color: inherit; }
.dia-top { background: var(--ink); color: var(--ground); font-weight: 800; padding: 10px 12px; margin: 8px 0 0; }
.dia-rows { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 4px solid var(--ink); }
.dia-rows li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.dia-rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.dia .why { display: block; color: var(--meta); font-size: 14px; margin-top: 2px; }
.chip { flex: none; display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 8px; line-height: 1.25; max-width: 150px; text-align: center; }
/* win is a large-text colour only, so verdict chips carry it as a block beside ink type. */
.chip.in { background: var(--wash); color: var(--ink); border-left: 10px solid var(--win); }
.chip.not { background: var(--wash); color: var(--ink); border-left: 10px solid var(--accent); }
.chip.none { background: var(--wash); color: var(--meta); }
.chip.ink { background: var(--ink); color: var(--ground); }
.chip.outline { border: 2px solid var(--ink); color: var(--ink); padding: 3px 6px; }
.dia-measure { font-size: 14px; margin: 6px 0 0; }
.dia-rows.flat { padding-left: 0; border-left: 0; margin-top: 4px; }
.dia-steps { list-style: none; margin: 10px 0 0; padding: 0; counter-reset: step; }
.dia-steps li { counter-increment: step; position: relative; padding: 0 0 14px 44px; }
.dia-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px;
  background: var(--ink); color: var(--ground); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.dia-steps li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 32px; bottom: 2px; width: 2px; background: var(--ink); }
.dia-steps li:last-child { padding-bottom: 0; }
.dia-bar { position: relative; display: flex; height: 18px; margin: 14px 0 4px; }
.dia-bar .b { border-right: 2px solid var(--ground); }
.dia-bar .b.not { background: var(--accent); } .dia-bar .b.mid { background: var(--rule); } .dia-bar .b.in { background: var(--win); }
.dia-bar .pin { position: absolute; top: -6px; bottom: -6px; width: 4px; margin-left: -2px; background: var(--ink); }
.dia-pinnote { font-size: 13px; font-weight: 700; margin: 0 0 10px calc(41.7% - 6px); white-space: nowrap; }
.dia-bands { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.dia-bands li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 6px 0 6px 10px; border-bottom: 1px solid var(--rule); border-left: 6px solid var(--rule); }
.dia-bands li.in { border-left-color: var(--win); } .dia-bands li.not { border-left-color: var(--accent); }
.dia-bands li span { color: var(--meta); }
.dia-bands li.here { background: var(--wash); font-weight: 700; }
.dia-pair { display: grid; gap: 10px; margin-top: 10px; }
.dia-pair > div { border: 1px solid var(--rule); padding: 12px; }
.dia-pair .ref { margin: 0 0 4px; }
@media (min-width: 640px) { .dia-pair { grid-template-columns: 1fr 1fr; } }
.dia-scale { display: grid; gap: 8px; margin-top: 10px; }
.dia-scale > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--rule); padding: 10px 12px; }
.dia-eg { font-size: 14px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); }
.dia-years { margin-top: 10px; font-size: 14px; }
.dia-years .yh, .dia-years .yr { display: grid; grid-template-columns: 70px 1fr 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.dia-years .yh { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--meta); border-bottom: 2px solid var(--ink); }
.dia-years .yr > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
@media (max-width: 520px) {
  .dia { padding: 12px; }
  .dia-rows li { flex-direction: column; gap: 8px; }
  .dia-years .yh, .dia-years .yr { grid-template-columns: 1fr 1fr; }
  .dia-years .yh span:first-child { display: none; }
  .dia-years .yr b { grid-column: 1 / -1; }
}
.prose th { text-align: left; border-bottom: 2px solid var(--ink); padding: 6px 8px 6px 0; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--meta); }
.prose td { border-bottom: 1px solid var(--rule); padding: 8px 8px 8px 0; }

.footer { margin-top: 64px; border-top: 4px solid var(--ink); }
.footer .wrap { padding-top: 14px; padding-bottom: 40px; display: grid; gap: 4px; font-size: 13px; color: var(--meta); }
.footer b { font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink); }

@media (min-width: 720px) {
  :root { --gutter: 32px; }  /* matches the hub (14 Oct 2026) */
  h1 { font-size: 44px; letter-spacing: -0.025em; }
  .row { grid-template-columns: minmax(0, 1fr) 320px 150px; }
  .row .what { grid-column: auto; }
  .mhdr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 6px 0; border-bottom: 1px solid var(--rule);
    position: sticky; top: calc(var(--mh, 0px) + var(--sec-h, 0px)); z-index: 2; background: var(--ground); }
  .mhdr .cell { height: auto; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--meta); }
  .mrow { grid-template-columns: minmax(0, 1fr) auto; }
  .mrow .cell small { display: none; }
  .members { grid-template-columns: repeat(5, 1fr); }
  .result { font-size: 72px; }
}
@media (min-width: 1000px) { .members { grid-template-columns: repeat(9, 1fr); } }
@media print { .nav { display: none; } .meter i, .cell.y { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.pt-grid { width: 100%; height: auto; aspect-ratio: 1; }
.rowh { display: none; }
@media (min-width: 720px) {
  .rowh { display: grid; padding: 4px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--meta); }
  .rowh .n { font-size: 11px; line-height: 1.3; }
}

/* Tabular figures only where numbers must line up: in running text, tnum sets
   hyphens at figure width ("Two - Way"), the same reason the reference style has it off. */
body { font-feature-settings: "tnum" 0; }
.n, .result, .stats, .meta.count, .prose td { font-feature-settings: "tnum" 1; }
.plist li { align-items: center; }
.plist .rec b { color: var(--ink); }

/* Group lists: the fact sits in its own column so meters line up (desktop),
   and drops under the title on a phone. */
.glist li { display: grid; grid-template-columns: 1fr; gap: 4px; justify-content: stretch; }
.glist li > span { justify-self: start; }
@media (min-width: 720px) {
  .glist li { grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; }
}

/* The 'Why' drop-down under each vote in a matrix: small, and it holds the
   coding reason plus, for amendments, what changed and the printed reasons. */
details.why { margin-top: 2px; }
details.why > summary { display: inline-block; border: 0; padding: 0; font-size: 13px; font-weight: 400; color: var(--meta); }
details.why[open] { border-left: 2px solid var(--rule); padding-left: 10px; margin: 4px 0 6px; }
details.why[open] > summary { margin-bottom: 2px; }

/* Phone menu: a burger button opens the links stacked. Without script the links
   simply show as a stacked list, so the menu can never be stuck closed. */
.menu-btn { display: none; }
@media (max-width: 959px) {  /* menu folds below 960, same as the hub (14 Oct 2026) */
  .masthead .wrap { flex-wrap: wrap; row-gap: 0; column-gap: 10px; }
  .mark { font-size: 13px; letter-spacing: 0.1em; }
  /* Three lines only, no word (Jason, 14 Oct 2026: "MENU" pushed it off the line on an iPhone). */
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; flex: none;
    width: 34px; height: 40px; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; }
  .menu-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
  .marks { flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
  .marks .mark, .slash { font-size: 12px; letter-spacing: 0.08em; }
  .burger { display: grid; gap: 4px; width: 22px; }
  .burger i { display: block; height: 2px; background: var(--ink); }
  .nav { flex-basis: 100%; flex-direction: column; gap: 0; font-size: 17px; margin-top: 10px; }
  .nav a { padding: 12px 0; border-top: 1px solid var(--rule); }
  .nav a[aria-current] { text-underline-offset: 5px; }
  .js .nav { display: none; }
  .js .nav.open { display: flex; }
}

/* Members at a glance: a sortable scorecard, never a ranking. Cards on a phone. */
.scorecard { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 15px; }
.scorecard th, .scorecard td { text-align: right; padding: 10px 8px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.scorecard thead th { border-bottom: 2px solid var(--ink); padding: 0; }
.scorecard thead button { font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--meta);
  background: none; border: 0; padding: 6px 8px; cursor: pointer; text-align: inherit; width: 100%; }
.scorecard thead th[aria-sort] button { color: var(--ink); }
.scorecard thead th[aria-sort="ascending"] button::after { content: " ▲"; }
.scorecard thead th[aria-sort="descending"] button::after { content: " ▼"; }
.scorecard th:first-child, .scorecard thead th:first-child button { text-align: left; }
.scorecard tbody th a { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 400; }
.scorecard tbody th a:hover b { text-decoration: underline; }
.scorecard small { display: block; font-size: 12px; color: var(--meta); font-weight: 400; }
.scorecard td { font-feature-settings: "tnum" 1; }
@media (max-width: 719px) {
  .scorecard thead { display: none; }
  .scorecard, .scorecard tbody, .scorecard tr { display: block; }
  .scorecard tr { border-bottom: 1px solid var(--rule); padding: 12px 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 12px; }
  .scorecard tbody th { grid-column: 1 / -1; border: 0; padding: 0; text-align: left; }
  .scorecard td { border: 0; padding: 0; text-align: left; }
  .scorecard td::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--meta); }
}

/* Phones read each vote as words; the grid and its legend are for wider screens (29 Sep 2026). */
@media (max-width: 719px) { .mrow .cells, .legend, .mhdr { display: none; } }
@media (min-width: 720px) { .vl { display: none; } }

/* Candidate documents: a small drop-down inside the member header (29 Sep 2026). */
details.docs { margin: 4px 0 0; }
details.docs > summary { font-size: 13px; padding: 2px 0; border-bottom: 0; }
details.docs .plist { margin: 4px 0 8px; }

/* KEY PROMISES, the hero block of a member page (29 Sep 2026): a tinted panel with a heavy
   rule; each row is title and count on one line, the quote, then meter and verdict on one line.
   The consensus note and split count live on the promise page, not here. */
section.keysec { margin-top: 6px; }
.card.own { background: var(--wash); border-left: 6px solid var(--ink); padding: 0 14px 4px; margin: 14px 0 22px; }
/* The key promises heading does not stick: the card is three rows (29 Sep 2026, it floated over them). */
.card.own .grp { position: static; background: var(--wash); color: var(--ink); font-size: 13px; padding: 8px 0 5px; border-bottom: 2px solid var(--ink); }
.card.own .rowh { display: none; }
.card.own .row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "what n" "rec rec"; gap: 4px 10px; padding: 7px 0; }
.card.own .row:last-child { border-bottom: 0; }
.card.own .row .what { grid-area: what; grid-column: auto; }
.card.own .row .what a { font-size: 17px; line-height: 1.2; }
.card.own .row .q { color: var(--ink); font-size: 14px; font-style: italic; margin-top: 1px; }
.card.own .row .n { grid-area: n; align-self: start; padding-top: 3px; font-size: 14px; }
.card.own .row .n br, .card.own .row .n br + span { display: none; }
.card.own .row .rec { grid-area: rec; }
.card.own .phrase { font-size: 15px; }
.card.own .phrase .cons { display: none; }
.card.own .tag { font-size: 9px; }

/* Their other promises start collapsed under the key promises (29 Sep 2026). */
details.grpd { margin: 8px 0 18px; }
details.grpd > summary { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); padding: 14px 0; border-bottom: 1px solid var(--rule); }

/* Navigation aids (29 Sep 2026): breadcrumbs with Back, jump links, a Back to row, and a back-to-top button. */
.crumbs { font-size: 13px; color: var(--meta); margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.crumbs a { color: var(--ink); }
.crumbs .back { font-weight: 700; text-decoration: none; margin-right: 8px; }
.crumbs [aria-current] { color: var(--meta); }
.jump { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; font-weight: 700; margin: 4px 0 8px; }
.backto { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; border-top: 2px solid var(--ink); padding-top: 12px; margin: 32px 0 0; font-size: 14px; }
.backto a { font-weight: 700; }
.totop { position: fixed; right: 16px; bottom: 16px; z-index: 20; background: var(--ink); color: var(--on-band); font-size: 14px; font-weight: 700; text-decoration: none; padding: 10px 14px; border: 2px solid var(--ground); }
.totop:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.totop[hidden] { display: none; }

/* One-line summary under a vote whose title another vote at the meeting shares (29 Sep 2026). */
.vlist .gist { display: block; font-size: 14px; color: var(--ink); margin-top: 2px; }
/* Dates beside a list row stay on one line on a phone (29 Sep 2026: 25 MAR 2025 wrapped to three). */
.plist li > .ref { white-space: nowrap; }
/* The hub link sits last in the menu, set apart from the site's own pages (14 Oct 2026). */
.nav a.hub-link { color: var(--meta); }
@media (max-width: 719px) { .nav a.hub-link { border-top: 2px solid var(--ink); } }
/* On desktop the breadcrumb already links home, so the menu keeps one line (14 Oct 2026). */
@media (min-width: 960px) { .nav a.hub-link { display: none; } }