/* The Commonwealth – site styles.
   The public room of a socialist commonwealth, in the manner of constructivist
   posters and civic signage: cream paper, black ink, one Commonwealth red,
   gold for honours. Bold diagonal bands and wedges mark the masthead, the
   front page and the section rules; everything else stays quiet and readable.
   Archivo's width axis carries the voice: expanded capitals for headings and
   signage, condensed figures for the tallies.

   Colour roles (feature stylesheets use the tokens, never raw colours):
     --civic    the Commonwealth red: links, buttons, "for", adopted, progress
     --brick    steel: against, rejected, what goes out
     --danger   deep red: errors and the warning end of meters (striped there,
                so a warning never rests on colour alone)
     --ochre    a deep gold that reads on paper, for text and borders only:
                the game master's panels, open motions, labels of honour
     --gold     gold for fills: medals, rank stars, grade chips, and all gold
                on black and red (ink on gold reads; ink on ochre does not)
   Text pairs are checked for WCAG AA in test/design.test.js. */

:root {
  /* The Commonwealth's palette */
  --red: #B3261E;
  --red-deep: #7A1712;
  --gold: #D4A017;
  --gold-light: #F2D16B;
  --cream: #F3EBDC;
  --black: #16120F;
  --steel: #3E4A4F;
  --silver: #C9CED1;
  --bronze: #B0703C;

  /* The register's roles, as the whole site uses them */
  --paper: #F3EBDC;
  --paper-deep: #EADFCB;
  --field: #FBF7EF;
  --ink: #16120F;
  --ink-soft: #5A5048;
  --rule: #C4B39A;
  --civic: #B3261E;
  --civic-deep: #7A1712;
  --ochre: #7E5A06;
  --brick: #3E4A4F;
  --danger: var(--red-deep);
  --abstain: #857A6E;
  /* An oak sign in the game, for the preview of the live boards. */
  --sign: #C9A86A;
  --sign-ink: #1B1308;
  --sign-edge: #7A5A2C;

  --font: 'Archivo Variable', 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --measure: 66ch;
  --page: 54rem;
  --space: 1.5rem;
  --radius: 0;
  /* A short red segment, then black: the poster rule over sections. */
  --poster-rule: linear-gradient(90deg, var(--red) 0 3rem, var(--ink) 3rem);

  color-scheme: light;
}

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

html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 106.25%; /* 17px */
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
}

body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); }

a { color: var(--civic); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--civic-deep); text-decoration-thickness: 2px; }

/* Focus: a black ring with a gold core on paper; cream-gold on black and red. */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--gold-light); }

.skip {
  position: absolute; left: 1rem; top: -3rem; padding: 0.5rem 1rem;
  background: var(--black); color: var(--cream); z-index: 10; font-weight: 700;
}
.skip:focus { top: 1rem; }

/* --- Icons ---------------------------------------------------------------------
   <svg class="icon"><use href="/static/icons.svg#name"></use></svg>, from icon()
   in src/views/icons.js. They take the colour of the text around them. */

.icon {
  display: inline-block; flex: none; width: 1.25em; height: 1.25em;
  fill: currentColor; vertical-align: -0.22em; overflow: visible;
}

/* --- Type scale (major third) ------------------------------------------------- */

h1, h2, h3 { line-height: 1.1; margin: 0 0 0.5em; font-stretch: 125%; }
h1 { font-size: clamp(1.75rem, 4.5vw, 2.75rem); font-weight: 850; letter-spacing: -0.02em; }
h2 { font-size: 1.4rem; font-weight: 800; margin-top: 2.5rem; font-stretch: 115%; letter-spacing: -0.01em; }
h3 { font-size: 1.125rem; font-weight: 700; font-stretch: 105%; }
p { margin: 0 0 1em; }

/* Page titles carry a short red wedge beneath them, like a poster's rule. */
.page-head h1::after, .prose--page h1::after {
  content: ''; display: block; width: 4rem; height: 0.45rem; margin-top: 0.55rem;
  background: var(--civic); transform: skewX(-35deg); transform-origin: left bottom;
}

.lede { font-size: 1.2rem; line-height: 1.5; max-width: var(--measure); color: var(--ink); }
.empty { color: var(--ink-soft); }

/* --- Masthead -------------------------------------------------------------------
   A black bar with the mark and the name, then the red band of the main menu.
   Each menu entry is <li><a>Label</a><svg class="icon"></li>: the icon sits
   over the link's padding and lets clicks through, so the link text stays plain. */

.masthead { background: var(--black); color: var(--cream); }
.masthead__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem;
  padding: 0.85rem var(--space);
  /* A gold diagonal band runs out of the bar at the right. */
  background: linear-gradient(112deg, transparent 0 calc(100% - 7rem), var(--gold) calc(100% - 7rem) calc(100% - 6.4rem),
    transparent calc(100% - 6.4rem) calc(100% - 5.6rem), var(--red) calc(100% - 5.6rem));
}
.masthead__name {
  display: inline-flex; align-items: center; gap: 0.75rem; min-width: 0;
  color: var(--cream); text-decoration: none;
  font-stretch: 125%; font-weight: 850; font-size: 1.05rem; line-height: 1.05;
  text-transform: uppercase; letter-spacing: 0.01em;
}
.masthead__name:hover { color: var(--gold-light); }
.masthead__mark {
  display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem;
  background: var(--red); color: var(--gold);
}
.masthead__mark .icon { width: 1.7rem; height: 1.7rem; vertical-align: 0; }
.masthead__title { max-width: 22ch; }

.masthead__account {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.1rem;
  margin-right: 6.5rem; font-size: 0.95rem;
}
.masthead__account a, .masthead__account .link-button { color: var(--cream); font-weight: 650; }
.masthead__account a:hover, .masthead__account .link-button:hover { color: var(--gold-light); }
.masthead__who { color: var(--gold-light); font-weight: 650; }

.masthead__nav { background: var(--red); border-top: 3px solid var(--gold); }
.masthead__menu {
  list-style: none; margin: 0; padding: 0 calc(var(--space) - 0.55rem);
  display: flex; flex-wrap: wrap;
}
.masthead__item { position: relative; }
.masthead__item > a {
  display: block; padding: 0.6rem 0.75rem 0.6rem 2.2rem;
  color: var(--cream); text-decoration: none; font-weight: 650; letter-spacing: 0.01em;
}
.masthead__item > .icon {
  position: absolute; left: 0.65rem; top: 50%; margin-top: -0.6rem; width: 1.2rem; height: 1.2rem;
  color: var(--gold-light); pointer-events: none;
}
.masthead__item > a:hover { background: var(--red-deep); color: var(--cream); }
.masthead__item > a[aria-current='page'] { background: var(--black); box-shadow: inset 0 -4px 0 var(--gold); }
.masthead__item > a[aria-current='page'] + .icon { color: var(--gold); }

/* The citizen's own pages (My profile, My cases, My work): a black strip under the red band,
   with a gold rule, only for a logged-in citizen. It wraps on a narrow screen. */
.masthead__mine {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem;
  padding: 0.45rem var(--space); background: var(--black); color: var(--cream);
  border-bottom: 3px solid var(--gold); font-size: 0.92rem;
}
.masthead__mine-label {
  display: inline-flex; align-items: center; gap: 0.4rem; color: var(--gold-light);
  font-weight: 800; font-stretch: 112%; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem;
}
.masthead__mine a { color: var(--cream); font-weight: 650; }
.masthead__mine a:hover { color: var(--gold-light); }
/* The page being shown: heavier, with a gold bar under it like the current menu entry's. */
.masthead__mine a[aria-current='page'] {
  font-weight: 800; text-decoration-thickness: 3px; text-decoration-color: var(--gold); text-underline-offset: 0.3em;
}

/* The game master's links: a gold-edged strip under the menu, only for the game master. */
.masthead__gm {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem;
  padding: 0.45rem var(--space); background: var(--paper-deep); color: var(--ink);
  border-bottom: 4px solid var(--ochre); font-size: 0.92rem;
}
.masthead__gm-label {
  display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ochre);
  font-weight: 800; font-stretch: 112%; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem;
}
.masthead__gm a { color: var(--ink); font-weight: 600; }
.masthead__gm a:hover { color: var(--civic); }
/* The desk being shown: heavier, with a red bar under it like the current menu entry's gold one. */
.masthead__gm a[aria-current='page'] {
  font-weight: 800; text-decoration-thickness: 3px; text-decoration-color: var(--civic); text-underline-offset: 0.3em;
}

.masthead :focus-visible, .colophon :focus-visible, .hero__poster :focus-visible {
  outline-color: var(--gold-light); box-shadow: none;
}
.masthead__item > a:focus-visible { outline-offset: -4px; outline-color: var(--cream); }
/* The game master's strip is paper, not black: the ring goes back to ink with a gold core. */
.masthead__gm :focus-visible { outline-color: var(--ink); box-shadow: 0 0 0 2px var(--gold-light); }

/* --- Page structure ----------------------------------------------------------- */

.page { width: 100%; max-width: var(--page); margin: 0 auto; padding: 2.5rem var(--space) 4rem; flex: 1; }
.page-head { margin-bottom: 2rem; }
.narrow { max-width: 26rem; }
.breadcrumb { margin-bottom: 0.75rem; font-size: 0.95rem; }

.notice {
  border-left: 6px solid var(--civic); background: var(--paper-deep);
  padding: 0.75rem 1rem; margin-bottom: 2rem; max-width: var(--measure); font-weight: 550;
}

.colophon { background: var(--black); color: var(--cream); border-top: 6px solid var(--red); font-size: 0.9rem; }
.colophon__inner {
  max-width: var(--page); margin: 0 auto; padding: 1.5rem var(--space) 2rem;
  display: flex; gap: 1rem 1.25rem; align-items: flex-start;
}
.colophon__mark { width: 2.5rem; height: 2.5rem; color: var(--gold); flex: none; }
.colophon p { margin: 0 0 0.35rem; max-width: var(--measure); }
.colophon__motto {
  color: var(--gold-light); font-weight: 750; font-stretch: 115%; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem;
}
.colophon a { color: var(--gold-light); }

/* --- Front page: the poster ----------------------------------------------------
   A black field, a red wedge driven in from the right, a gold band across it
   and a gold star: CSS and the sprite only. */

.hero { padding: 0 0 2.5rem; }
.hero__poster {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(17rem, 44vw, 25rem); margin: 0 0 2rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background: var(--black); color: var(--cream);
}
.hero__poster::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: var(--red);
  clip-path: polygon(100% 0, 100% 100%, 34% 100%);
}
.hero__poster::after {
  /* The gold band crosses the wedge above the name, never behind the text. */
  content: ''; position: absolute; z-index: -1; left: 42%; right: -20%; top: 44%; height: 0.7rem;
  background: var(--gold); transform: rotate(-24deg); transform-origin: 0 50%;
}
.hero__star {
  position: absolute; z-index: -1; top: clamp(0.75rem, 3vw, 1.75rem); right: clamp(0.75rem, 4vw, 2.25rem);
  width: clamp(4.5rem, 17vw, 9.5rem); height: clamp(4.5rem, 17vw, 9.5rem); color: var(--gold);
}
.hero__kicker {
  margin: 0 0 auto; max-width: 18rem; padding-bottom: 2rem;
  color: var(--gold-light); font-size: 0.8rem; font-weight: 750; font-stretch: 115%;
  text-transform: uppercase; letter-spacing: 0.12em;
}
.hero__name {
  margin: 0; line-height: 0.9; letter-spacing: -0.02em; font-weight: 900; font-stretch: 125%;
  text-transform: uppercase; overflow-wrap: break-word; hyphens: auto;
  /* Sized so a long last word like "Commonwealth" (about 12 em wide in expanded
     capitals) fits inside the poster at every width. */
  font-size: min(3.75rem, calc((100vw - 2 * var(--space) - 2 * clamp(1.25rem, 4vw, 2.5rem)) / 12.4));
}
.hero__name-lead {
  display: block; margin-bottom: 0.45rem;
  font-size: clamp(0.95rem, 2.6vw, 1.45rem); font-weight: 750; letter-spacing: 0.08em; line-height: 1.15;
}
.hero__name-key { display: block; }
.hero__intro { font-size: 1.25rem; max-width: var(--measure); border-left: 6px solid var(--civic); padding-left: 1.1rem; }
.hero__intro > :last-child { margin-bottom: 0; }

/* --- Poster heads of the main pages ------------------------------------------------
   views/hero.js: the front page's poster, smaller. A field, a wedge driven in
   from the bottom right, a band across the wedge, and the page's icon on a
   square badge in the top right corner. The accent sets the colours:
     red    black field, red wedge, gold band: the front page's own colours
     gold   gold field, light gold wedge, red band, ink type: for honours and plenty
     civic  the Commonwealth red for the field, a black wedge, a gold band
   The long title runs across the wedge, so its colour reads on both the field
   and the wedge (cream on black and red, ink on both golds). The kicker
   stays clear of the wedge and the badge, and the band starts on the wedge's
   edge above the title and climbs away from it, so no text ever lies on the
   band. The pairs are checked in tools/design/tokens.mjs. The title breaks
   only between words (and after a hyphen already written), never inside one:
   it is sized to the poster's width (cqi), so the widest word of any title,
   "Commonwealth" at 11.8em, stays whole on one line down to a 280px screen.
   The poster itself holds no links: a lede or extra with links lies under it,
   on the paper, and takes the page's own link and focus styles. */

.page-hero {
  --hero-field: var(--black); --hero-wedge: var(--red); --hero-band: var(--gold);
  --hero-text: var(--cream); --hero-kicker: var(--gold-light);
  --hero-badge: var(--gold); --hero-icon: var(--black);
  --hero-icon-size: clamp(3rem, 10vw, 5rem);
  margin: 0 0 2rem;
}
.page-hero--gold {
  --hero-field: var(--gold); --hero-wedge: var(--gold-light); --hero-band: var(--red);
  --hero-text: var(--ink); --hero-kicker: var(--ink);
  --hero-badge: var(--red); --hero-icon: var(--gold-light);
}
.page-hero--civic {
  --hero-field: var(--civic); --hero-wedge: var(--black); --hero-kicker: var(--cream);
  --hero-badge: var(--cream); --hero-icon: var(--civic);
}
.page-hero--compact { --hero-icon-size: clamp(2.5rem, 8vw, 3.75rem); }

.page-hero__poster {
  container-type: inline-size;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 1.25rem;
  min-height: clamp(11rem, 26vw, 15rem); margin: 0 0 1.25rem;
  padding: clamp(1rem, 3.5vw, 2rem);
  background: var(--hero-field); color: var(--hero-text);
}
.page-hero--compact .page-hero__poster { min-height: clamp(8.5rem, 19vw, 11rem); gap: 0.9rem; }
.page-hero__poster::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: var(--hero-wedge);
  clip-path: polygon(100% 0, 100% 100%, 46% 100%);
}
.page-hero__poster::after {
  /* Starts on the wedge's edge (at 40% of the height the edge is at 100% - 54% x 0.4)
     and climbs more gently than the edge, so it stays on the wedge, under the badge. */
  content: ''; position: absolute; z-index: -1; left: 78.4%; right: -20%; top: 40%; height: 0.5rem;
  background: var(--hero-band); transform: rotate(-24deg); transform-origin: 0 50%;
}
.page-hero__icon {
  position: absolute; top: clamp(0.75rem, 2.5vw, 1.25rem); right: clamp(0.75rem, 2.5vw, 1.25rem);
  width: var(--hero-icon-size); height: var(--hero-icon-size); padding: calc(var(--hero-icon-size) * 0.16);
  background: var(--hero-badge); color: var(--hero-icon);
}
.page-hero__kicker {
  /* Clear of the badge, and so of the wedge's point, at any width. */
  max-width: min(24rem, calc(100% - var(--hero-icon-size) - 1rem));
  margin: 0 0 auto;
  color: var(--hero-kicker); font-size: 0.8rem; line-height: 1.4; font-weight: 750; font-stretch: 115%;
  text-transform: uppercase; letter-spacing: 0.12em; text-wrap: balance;
}
.page-hero__title {
  margin: 0; max-width: 100%; color: var(--hero-text);
  line-height: 0.95; letter-spacing: -0.01em; font-weight: 900; font-stretch: 125%;
  text-transform: uppercase; overflow-wrap: normal; word-break: normal; hyphens: manual; text-wrap: balance;
  font-size: clamp(1rem, 5.5vw, 3rem);
  font-size: clamp(1rem, 7.2cqi, 3rem);
}
.page-hero--compact .page-hero__title {
  font-size: clamp(1rem, 5vw, 2.25rem);
  font-size: clamp(1rem, 6.2cqi, 2.25rem);
}

.page-hero__lede {
  font-size: 1.15rem; max-width: var(--measure); margin-bottom: 1rem;
  border-left: 6px solid var(--civic); padding-left: 1.1rem;
}
.page-hero--gold .page-hero__lede { border-left-color: var(--ochre); }
.page-hero--civic .page-hero__lede { border-left-color: var(--ink); }
.page-hero__lede > :last-child { margin-bottom: 0; }
.page-hero > :last-child { margin-bottom: 0; }

.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem; }
.home-grid > div { border-top: 6px solid; border-image: var(--poster-rule) 1; padding-top: 0.75rem; }
.home-grid h2 { margin-top: 0; font-size: 1.15rem; }

/* --- Front page: the Commonwealth today ------------------------------------------ */

.dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2.25rem 2rem; }
.dash { border-top: 6px solid; border-image: var(--poster-rule) 1; padding-top: 0.75rem; min-width: 0; }
.dash h2 {
  margin-top: 0; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; font-stretch: 125%; font-weight: 850;
}
.dash h2 a { color: var(--ink); text-decoration: none; }
.dash h2 a:hover { color: var(--civic); text-decoration: underline; }
.dash h3 { font-size: 0.95rem; margin: 1rem 0 0.4rem; font-stretch: 100%; }
.dash__figure { font-size: 1.05rem; }
.dash__figure strong { font-weight: 850; font-stretch: 62%; font-size: 2.8rem; line-height: 0.95; color: var(--civic); margin-right: 0.25rem; }
.dash__figure span { color: var(--ink-soft); font-size: 0.9rem; }
.dash__targets, .dash__list { list-style: none; padding: 0; margin: 0; }
.dash__targets li { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.75rem; margin-bottom: 0.6rem; }
.dash__targets progress { grid-column: 1 / -1; grid-row: 2; }
.dash__targets span, .dash__list span { color: var(--ink-soft); font-size: 0.88rem; }
.dash__list li { margin-bottom: 0.45rem; display: flex; flex-wrap: wrap; gap: 0 0.6rem; align-items: baseline; }
.dash__headline { font-weight: 700; font-size: 1.1rem; margin-bottom: 0.2rem; }
.dash__names { color: var(--ink-soft); overflow-wrap: anywhere; }

/* --- Prose ------------------------------------------------------------------------ */

.prose { max-width: var(--measure); overflow-wrap: break-word; }
.prose--page h1 { margin-bottom: 1.25rem; }
.prose ol, .prose ul { padding-left: 1.4rem; }
.prose li { margin-bottom: 0.4rem; }
.prose li::marker { color: var(--civic); }
.prose blockquote { margin: 1.25rem 0; padding-left: 1rem; border-left: 4px solid var(--civic); }
.prose code, code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.9em; }

/* --- Forms ------------------------------------------------------------------------ */

.form { max-width: 36rem; }
.form--inline { display: flex; flex-wrap: wrap; gap: 0 1.5rem; align-items: flex-end; max-width: none; }
.form--inline .field { flex: 1 1 12rem; }

.field { margin: 0 0 1.25rem; border: 0; padding: 0; }
.field label, .field legend { display: block; font-weight: 700; margin-bottom: 0.25rem; }
.field__hint { color: var(--ink-soft); font-size: 0.9rem; margin: 0 0 0.35rem; }
/* Errors: deep red, bold and marked, so they never depend on colour alone. */
.field__error { color: var(--danger); font-weight: 700; margin: 0.35rem 0 0; }
.field__error::before { content: '! '; font-weight: 900; }

input[type='text'], input[type='password'], input[type='number'], input[type='url'], input[type='search'],
textarea, select {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--field); border: 2px solid var(--ink-soft); border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
}
input[type='text']:hover, input[type='password']:hover, input[type='number']:hover, textarea:hover, select:hover { border-color: var(--ink); }
textarea { resize: vertical; line-height: 1.5; }
.field--error input, .field--error textarea { border-color: var(--danger); border-left-width: 6px; }
input[type='checkbox'], input[type='radio'] { accent-color: var(--civic); width: 1.05rem; height: 1.05rem; }

.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.8rem;
  border: 2px solid var(--rule); border-radius: var(--radius); cursor: pointer; }
.choice:has(input:checked) { border-color: var(--civic); background: var(--paper-deep); font-weight: 650; }

/* Buttons are signage: red, capitals, a hard black shadow. */
.button {
  display: inline-block; font: inherit; font-weight: 800; font-stretch: 112%; font-size: 0.95rem;
  text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer;
  background: var(--civic); color: var(--cream); border: 2px solid var(--civic);
  border-radius: var(--radius); padding: 0.6rem 1.2rem; text-decoration: none;
  box-shadow: 4px 4px 0 var(--ink);
}
.button:hover { background: var(--civic-deep); border-color: var(--civic-deep); color: var(--cream); }
.button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.button:focus-visible { box-shadow: 4px 4px 0 var(--ink), 0 0 0 2px var(--gold-light); }
.button--quiet { background: transparent; color: var(--civic); box-shadow: none; }
.button--quiet:hover { background: var(--paper-deep); color: var(--civic-deep); }
.button--quiet:active { box-shadow: none; }

.link-button { font: inherit; background: none; border: 0; padding: 0; color: var(--civic);
  text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.inline { display: inline; }

/* --- Council list ------------------------------------------------------------------ */

.motion-list { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.motion-row { border-bottom: 1px solid var(--rule); padding: 1rem 0; }
.motion-row__title { display: block; font-size: 1.15rem; font-weight: 700; color: var(--ink); text-decoration: none; max-width: var(--measure); }
.motion-row__title:hover { color: var(--civic); text-decoration: underline; }
.motion-row__number { display: block; font-size: 0.8rem; font-weight: 650; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.motion-row__meta, .motion__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0.4rem 0 0; color: var(--ink-soft); font-size: 0.92rem; }
.motion-list--past .motion-row__title { font-weight: 550; }

/* Statuses differ in shape as well as colour: open is a gold ring, adopted a
   red star, rejected a steel diamond, anything else a grey dot. */
.status { font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: 0.4rem; }
.status::before { content: ''; flex: none; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--abstain); }
.status--open::before { background: transparent; border: 3px solid var(--ochre); }
.status--adopted { color: var(--civic); }
.status--adopted::before {
  width: 0.9rem; height: 0.9rem; border-radius: 0; background: var(--civic);
  clip-path: polygon(50% 0, 61.8% 36.2%, 100% 36.2%, 69.1% 58.8%, 80.9% 95.1%, 50% 72.7%, 19.1% 95.1%, 30.9% 58.8%, 0 36.2%, 38.2% 36.2%);
}
.status--rejected { color: var(--brick); }
.status--rejected::before { border-radius: 0; background: var(--brick); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 0.75rem; height: 0.75rem; }

/* --- Motion page and the tally ------------------------------------------------------ */

.motion__number { color: var(--ink-soft); margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; font-weight: 650; }
.motion h1 { max-width: 22ch; }

.ballot { margin: 3rem 0; padding: 1.5rem 0 0; border-top: 6px solid; border-image: var(--poster-rule) 1; }
.ballot h2 { margin-top: 0; }
.ballot__rule { color: var(--ink-soft); max-width: var(--measure); font-size: 0.95rem; }

/* The tally: red for, black against, grey abstain. The three differ in lightness
   as well as hue, are split by paper-coloured gaps and are always labelled. */
.tally { margin: 1rem 0 1.25rem; }
.tally__bar { display: block; width: 100%; height: 0.9rem; }
.tally--large .tally__bar { height: 1.75rem; }
.tally__seg--for, .tally__seg--against, .tally__seg--abstain { stroke: var(--paper); stroke-width: 3px; vector-effect: non-scaling-stroke; }
.tally__seg--for { fill: var(--civic); }
.tally__seg--against { fill: var(--ink); }
.tally__seg--abstain { fill: var(--abstain); }
.tally__empty { fill: var(--paper-deep); }

.tally__counts { display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; margin: 0.75rem 0 0; }
.tally__count { display: flex; flex-direction: column-reverse; }
.tally__count dt { font-weight: 750; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }
.tally__count dt::before { content: ''; display: inline-block; width: 0.75em; height: 0.75em; margin-right: 0.4em; vertical-align: -0.05em; background: var(--abstain); }
.tally__count--for dt::before { background: var(--civic); }
.tally__count--against dt::before { background: var(--ink); }
.tally__count dd { margin: 0; font-weight: 850; font-stretch: 62%; line-height: 0.95; font-size: 1.7rem; }
.tally--large .tally__count dd { font-size: clamp(3.25rem, 11vw, 6rem); letter-spacing: -0.02em; }
.tally__count--for dd { color: var(--civic); }
.tally__count--against dd { color: var(--ink); }
.tally__count--abstain dd { color: var(--ink-soft); }

.vote-form fieldset { border: 0; padding: 0; margin: 1.5rem 0 0; }
.vote-form legend { font-weight: 700; margin-bottom: 0.6rem; }
.vote-form__buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.vote {
  font: inherit; font-weight: 800; font-stretch: 112%; font-size: 1rem; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.05em;
  min-width: 8rem; padding: 0.7rem 1.2rem; border-radius: var(--radius);
  background: transparent; border: 3px solid currentColor;
}
.vote--for { color: var(--civic); }
.vote--against { color: var(--ink); }
.vote--abstain { color: var(--ink-soft); }
.vote:hover { background: var(--paper-deep); }
.vote[aria-pressed='true'] { color: var(--cream); box-shadow: 4px 4px 0 var(--ink); }
.vote--for[aria-pressed='true'] { background: var(--civic); border-color: var(--civic); }
.vote--against[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 var(--civic); }
.vote--abstain[aria-pressed='true'] { background: var(--ink-soft); border-color: var(--ink-soft); }

/* --- Debate --------------------------------------------------------------------------- */

.comments { list-style: none; padding: 0; margin: 0 0 2rem; }
.comment { border-left: 4px solid var(--rule); padding: 0.25rem 0 0.25rem 1rem; margin-bottom: 1.5rem; }
.comment__meta { margin-bottom: 0.3rem; display: flex; gap: 0.75rem; align-items: baseline; }
.comment__meta span { color: var(--ink-soft); font-size: 0.9rem; }
.comment .prose p:last-child { margin-bottom: 0; }

.withdraw { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.withdraw .link-button { color: var(--danger); }

/* --- Game master pages ------------------------------------------------------------------ */

.new-codes { background: var(--paper-deep); border-left: 6px solid var(--ochre); padding: 1rem 1.25rem; margin-bottom: 2rem; }
.new-codes h2 { margin-top: 0; }
.codes { list-style: none; padding: 0; margin: 0; }
.codes li { margin-bottom: 0.5rem; }
.codes code { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.05em; }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th {
  font-weight: 750; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 3px solid var(--ink); vertical-align: bottom;
}
/* A row header (<th scope="row">) reads like its row, not like the column heads. */
tbody th {
  font-size: 0.95rem; text-transform: none; letter-spacing: 0; font-weight: 750;
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
tr.is-used td { color: var(--ink-soft); }

/* --- The plan --------------------------------------------------------------------------- */

.period-dates { color: var(--ink-soft); margin-top: -0.25rem; }
.num { text-align: right; white-space: nowrap; }
th.num { text-align: right; }

.targets td { vertical-align: middle; }
.targets td:first-child a { font-weight: 700; }
.target-progress { min-width: 12rem; }
.target-progress__figure { display: block; font-weight: 750; font-size: 0.9rem; }
.target-progress__figure span { font-weight: 500; color: var(--ink-soft); }
.target-progress__figure.is-met { color: var(--civic); }

/* Native <progress>: no inline styles needed under the strict CSP. */
progress {
  appearance: none; -webkit-appearance: none;
  display: block; width: 100%; height: 0.6rem; border: 1px solid var(--rule); border-radius: 0;
  background: var(--paper-deep); color: var(--civic);
}
progress::-webkit-progress-bar { background: var(--paper-deep); }
progress::-webkit-progress-value { background: var(--civic); }
progress::-moz-progress-bar { background: var(--civic); }
.progress--large { height: 1.5rem; margin-bottom: 1.5rem; border-color: var(--ink); }
.progress-figure { font-size: 1.1rem; margin-bottom: 0.5rem; }
.progress-figure strong {
  font-weight: 850; font-stretch: 62%; line-height: 0.95; letter-spacing: -0.02em;
  font-size: clamp(3.25rem, 11vw, 6rem); color: var(--civic); margin-right: 0.35rem;
}
.report-form { margin-top: 1rem; }

.period-list { list-style: none; padding: 0; margin: 0; border-top: 3px solid var(--ink); }
.period-list li { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--rule); }
.period-list span { color: var(--ink-soft); }

/* The game master's panel on a public page: gold-edged, on deeper paper. */
.gm-panel { border-left: 6px solid var(--ochre); background: var(--paper-deep); padding: 0.5rem 1.25rem 0.9rem; margin: 0 0 2rem; }
.gm-panel h2 { margin-top: 0.5rem; }
.gm-panel__form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 1rem; }
.gm-panel__form .field__hint { margin: 0; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem 2rem;
  margin: 0 0 2rem; padding: 1rem 0; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--rule); }
.facts dt { font-size: 0.8rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 650; }
.facts dd { margin: 0; font-weight: 750; }

.field-group { border: 2px solid var(--rule); border-radius: var(--radius); padding: 1rem 1rem 0; margin: 0 0 1.25rem; }
.field-group legend { font-weight: 750; padding: 0 0.35rem; color: var(--ink-soft); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }

.link-button--danger { color: var(--danger); font-weight: 650; }
.status--withdrawn { color: var(--ink-soft); }

/* --- Institutions ------------------------------------------------------------------------ */

.institution-list { list-style: none; padding: 0; margin: 0 0 1rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem 2rem; }
.institution { border-top: 6px solid; border-image: var(--poster-rule) 1; padding-top: 0.75rem; }
.institution h2 { margin-top: 0; font-size: 1.15rem; }
.institution h2 a { color: var(--ink); }
.institution h2 a:hover { color: var(--civic); }
.institution p { margin-bottom: 0.4rem; }
.institution--dormant { border-image: none; border-top-color: var(--rule); color: var(--ink-soft); }
.institution--dormant h2 { color: var(--ink-soft); }

.decision__action { font-weight: 850; font-stretch: 125%; font-size: 1.3rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; }
.decision__action .field__hint { font-stretch: 100%; font-weight: 500; font-size: 0.9rem; }
.decision__effect { border-left: 6px solid var(--civic); padding: 0.4rem 0 0.4rem 0.9rem; font-weight: 650; max-width: var(--measure); }

.audit { margin-top: 3rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.audit summary { cursor: pointer; font-weight: 700; }
.audit__call { margin-top: 1rem; }
.audit pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--paper-deep); padding: 0.75rem;
  font-size: 0.85rem; max-height: 24rem; overflow: auto; }

/* --- Hearing -------------------------------------------------------------------------------- */

.hearing { border-left: 6px solid var(--ochre); padding: 0.25rem 0 0.25rem 1.25rem; margin: 2rem 0; }
.hearing h2 { margin-top: 0.25rem; }

/* --- Game link ------------------------------------------------------------------------------ */

.game-actions { list-style: none; padding: 0; margin: 0 0 1rem; }
.game-actions li { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; padding: 0.35rem 0; border-bottom: 1px solid var(--rule); }

/* --- Wide screens: the gold band and red wedge of the masthead get more room ------------------ */

@media (min-width: 64rem) {
  .masthead__name { font-size: 1.15rem; }
  .masthead__title { max-width: none; }
}

/* --- Small screens ------------------------------------------------------------------------- */

@media (max-width: 40rem) {
  :root { --space: 1rem; }
  .masthead__bar { gap: 0.6rem 1rem; background: linear-gradient(112deg, transparent 0 calc(100% - 3rem), var(--gold) calc(100% - 3rem) calc(100% - 2.6rem), transparent calc(100% - 2.6rem) calc(100% - 2.1rem), var(--red) calc(100% - 2.1rem)); }
  .masthead__name { font-size: 0.95rem; gap: 0.6rem; }
  .masthead__mark { width: 2.1rem; height: 2.1rem; }
  .masthead__mark .icon { width: 1.4rem; height: 1.4rem; }
  .masthead__account { margin-right: 2.5rem; }
  .masthead__menu { padding: 0.2rem calc(var(--space) - 0.4rem); }
  .masthead__item > a { padding: 0.45rem 0.5rem 0.45rem 1.85rem; font-size: 0.92rem; }
  .masthead__item > .icon { left: 0.45rem; width: 1.1rem; height: 1.1rem; margin-top: -0.55rem; }
  /* The own strip: its label on a line of its own, the three links together under it. */
  .masthead__mine { gap: 0.2rem 1.1rem; }
  .masthead__mine-label { flex-basis: 100%; }
  .vote { flex: 1 1 100%; }
  .colophon__mark { width: 2rem; height: 2rem; }
  /* On a narrow poster the kicker keeps clear of the star and the band runs lower. */
  .hero__kicker { max-width: calc(100% - 5rem); padding-bottom: 3rem; }
  .hero__poster::after { top: 62%; left: 48%; height: 0.5rem; }

  /* Plan targets become one card per row: product and target, institution, progress. */
  .targets thead { display: none; }
  .targets tr { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
  .targets td { border: 0; padding: 0; }
  .targets td:nth-child(1) { grid-area: 1 / 1; }
  .targets td:nth-child(2) { grid-area: 2 / 1 / 3 / 3; color: var(--ink-soft); font-size: 0.9rem; }
  .targets td:nth-child(3) { grid-area: 1 / 2; }
  .targets td:nth-child(4) { grid-area: 3 / 1 / 4 / 3; min-width: 0; padding-top: 0.25rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .button, .masthead__item > a { transition: background-color 0.12s ease, color 0.12s ease; }
}

/* Windows high contrast and other forced colours drop the fills: the poster heads keep a frame. */
@media (forced-colors: active) {
  .page-hero__poster { border: 3px solid CanvasText; }
  .page-hero__icon { border: 2px solid CanvasText; }
}

@media print {
  .masthead__nav, .masthead__mine, .masthead__gm, .masthead__account, .skip { display: none; }
  .masthead, .colophon, .hero__poster { background: none; color: var(--ink); }
  /* A poster head prints as ink on paper: the title and kicker stay, the wedge and band go. */
  .page-hero {
    --hero-field: transparent; --hero-text: var(--ink); --hero-kicker: var(--ink);
    --hero-badge: transparent; --hero-icon: var(--ink);
  }
  .page-hero__poster { min-height: 0; padding: 0 0 0.5rem; border-bottom: 3px solid var(--ink); }
  .page-hero__poster::before, .page-hero__poster::after { display: none; }
}