/* Chamber Register — Parliament of Ghana
   Tokens first. Everything else reads from them. */

:root {
  /* Palette taken from the Parliament of Ghana crest: the red ring, the gold
     field and the green ring. Everything below reads from these. */
  --paper: #fbf9f0;
  --band: #f4efdc;
  --band-2: #e7e0c6;
  --ink: #10201a;
  --muted: #4a564c;
  --green: #0b6b3a;
  --green-mid: #12854a;
  --green-soft: #dbeee1;
  --gold: #d4a017;
  --gold-ink: #6f5104;
  --red: #c8102e;
  --abstain: #6b726a;
  --line: #d8d1b6;
  --line-soft: #e8e3cf;
  --white: #fffef9;

  --display: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --step--1: 0.78rem;
  --step-0: 0.95rem;
  --step-1: 1.08rem;
  --step-2: clamp(1.25rem, 1.05rem + 0.7vw, 1.55rem);
  --step-3: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  --step-4: clamp(2.1rem, 1.35rem + 3.1vw, 3.9rem);

  --space-xs: 0.35rem;
  --space-s: 0.6rem;
  --space-m: 1rem;
  --space-l: 1.6rem;
  --space-xl: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  --space-2xl: clamp(2.8rem, 1.8rem + 4vw, 5rem);
  --spine-w: 52px;
  --wrap: 1240px;
  --radius: 2px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 960px) {
  body { padding-left: var(--spine-w); }
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 var(--space-s);
}

h1 { font-size: var(--step-4); font-weight: 700; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-family: var(--body); font-size: var(--step-0); font-weight: 600; letter-spacing: 0.01em; }

p { margin: 0 0 var(--space-m); max-width: 68ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--green-mid); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--green); }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

img { max-width: 100%; height: auto; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--green);
  color: var(--white);
  padding: 0.8rem 1.1rem;
  z-index: 100;
}
.skip:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 0.4rem + 2.4vw, 2.6rem);
}

/* ---------- Spine ---------- */

.spine {
  display: none;
}

@media (min-width: 960px) {
  .spine {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--spine-w);
    background: var(--green);
    color: var(--gold);
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 0 1.4rem;
    border-right: 1px solid var(--gold);
  }
  .spine::after {
    content: "";
    position: absolute;
    inset: 0 5px 0 auto;
    width: 1px;
    background: rgba(176, 141, 60, 0.45);
  }
  .spine-star {
    font-size: 1rem;
    line-height: 1;
    color: var(--gold);
  }
  .spine-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #cbb87f;
    white-space: nowrap;
  }
}

/* ---------- Masthead ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 3px 0 -2px var(--gold);
}

.mast-inner {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 2.2rem);
  padding-block: 0.75rem;
}

.brand {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.brand:hover { color: var(--ink); }
.brand-star {
  grid-row: span 2;
  color: var(--gold);
  font-size: 1.15rem;
  line-height: 1;
}
.brand-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.brand-sub {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  grid-column: 2;
}

.nav ul {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.7rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  display: inline-block;
  padding: 0.75rem 0 0.7rem;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

.demo-chip {
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-ink);
  border: 1px solid var(--gold);
  padding: 0.3rem 0.45rem;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  padding: 0.55rem 0.7rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 44px;
}

@media (max-width: 899px) {
  .mast-inner { flex-wrap: wrap; }
  .nav-toggle { display: inline-block; order: 3; }
  .demo-chip { order: 2; }
  .nav {
    order: 4;
    flex-basis: 100%;
    display: none;
    border-top: 1px solid var(--line-soft);
  }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav li + li { border-top: 1px solid var(--line-soft); }
  .nav a { display: block; padding: 0.9rem 0.2rem; font-size: 0.95rem; border-bottom: 0; }
  .nav a[aria-current="page"] { border-bottom: 0; box-shadow: inset 3px 0 0 var(--gold); padding-left: 0.7rem; }
}

/* ---------- Page frame ---------- */

main { display: block; padding-bottom: var(--space-2xl); }

.page-head {
  padding-block: clamp(1.6rem, 1rem + 2.4vw, 2.8rem) var(--space-l);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-xl);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-m);
}
@media (min-width: 900px) {
  .page-head {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: end;
  }
}

.kicker {
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 var(--space-s);
  display: block;
}

.lede {
  font-size: var(--step-1);
  color: var(--muted);
  max-width: 54ch;
  line-height: 1.55;
}

.page-meta {
  font-size: var(--step--1);
  color: var(--muted);
  border-left: 2px solid var(--gold);
  padding-left: 0.9rem;
  align-self: end;
}
.page-meta strong { color: var(--ink); font-weight: 600; }

/* ---------- Home hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
  padding-block: clamp(2rem, 1.2rem + 3.4vw, 4.2rem) var(--space-xl);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: var(--space-xl); }
}
.hero h1 { margin-bottom: var(--space-m); }
.hero h1 em { font-style: normal; color: var(--green-mid); }
.hero-side {
  border-top: 1px solid var(--line);
  padding-top: var(--space-m);
  align-self: end;
}
.sitting-line {
  font-size: var(--step--1);
  color: var(--muted);
  margin-bottom: 0.9rem;
}
.sitting-line strong { color: var(--ink); font-weight: 600; }
.hero-side dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}
.hero-side dt {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-side dd {
  margin: 0.1rem 0 0;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}

/* ---------- Function list (numbered, ruled — not cards) ---------- */

.functions {
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--line);
}
.fn-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 780px) {
  .fn-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fn-list li:nth-child(odd) { border-right: 1px solid var(--line); }
}
.fn-list li { border-bottom: 1px solid var(--line); }
.fn-item {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 0.9rem;
  padding: 1.25rem 1.4rem 1.35rem 0;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
@media (min-width: 780px) { .fn-list li:nth-child(even) .fn-item { padding-left: 1.4rem; } }
.fn-item:hover .fn-title { color: var(--green-mid); }
.fn-no {
  font-family: var(--display);
  font-size: 1.55rem;
  color: var(--gold-ink);
  line-height: 1;
  padding-top: 0.15rem;
}
.fn-title {
  font-family: var(--display);
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 0.35rem;
  display: block;
}
.fn-desc {
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
  max-width: 42ch;
}

/* ---------- Section blocks ---------- */

.block { padding-block: var(--space-xl); }
.block + .block { border-top: 1px solid var(--line); }
.block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  margin-bottom: var(--space-m);
}
.block-head h2 { margin: 0; }
.block-head .more {
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}
.block-lede { color: var(--muted); font-size: 0.9rem; max-width: 60ch; margin: 0 0 var(--space-m); }

/* ---------- Notice band ---------- */

.notice {
  background: var(--band);
  border-left: 3px solid var(--gold);
  padding: 1rem 1.2rem;
  font-size: 0.84rem;
  color: #33413a;
  max-width: none;
}
.notice strong { color: var(--ink); }

/* ---------- Register table ---------- */

.table-wrap {
  overflow-x: auto;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

table.register {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  min-width: 760px;
}
.register thead th {
  text-align: left;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
  padding: 0.65rem 0.7rem;
  border-bottom: 1px solid var(--ink);
  background: var(--band);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.register tbody td {
  padding: 0.8rem 0.7rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.register tbody tr:last-child td { border-bottom: 0; }
.register tbody tr:hover { background: var(--band); }
.register .ref {
  font-size: 0.72rem;
  color: var(--green-mid);
  white-space: nowrap;
  line-height: 1.4;
}
.register .ref span { display: block; color: var(--muted); font-size: 0.68rem; }
.sub-title {
  display: block;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.35;
  margin-bottom: 0.22rem;
  max-width: 46ch;
}
.sub-title:hover { color: var(--green-mid); text-decoration: underline; }
.sub-topic {
  font-size: 0.72rem;
  color: var(--green-mid);
  text-decoration: none;
  border-bottom: 1px dotted var(--line);
  margin-right: 0.7rem;
}
.sub-entity { font-size: 0.72rem; color: var(--muted); }
.cell-committee { font-size: 0.76rem; color: var(--muted); max-width: 12rem; }
.cell-speaker { font-size: 0.78rem; max-width: 13rem; }
.cell-speaker span { display: block; font-size: 0.68rem; color: var(--muted); }
.cell-outcome { white-space: nowrap; }

@media (max-width: 760px) {
  .table-wrap { border-top-width: 1px; overflow: visible; }
  table.register { min-width: 0; }
  .register thead { display: none; }
  .register, .register tbody, .register tr, .register td { display: block; width: 100%; }
  .register tbody tr {
    border-bottom: 1px solid var(--line);
    padding: 0.85rem 0;
  }
  .register tbody tr:last-child { border-bottom: 0; }
  .register tbody td {
    border: 0;
    padding: 0.12rem 0;
    max-width: none;
  }
  .register tbody td[data-label]:not(.cell-sub)::before {
    content: attr(data-label) ": ";
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-right: 0.25rem;
  }
  .register .ref { margin-bottom: 0.3rem; }
  .cell-committee, .cell-speaker { max-width: none; }
  .cell-speaker span { display: inline; margin-left: 0.3rem; }
}

/* ---------- Type chips ---------- */

.chip {
  display: inline-block;
  font-size: 0.64rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.2rem 0.38rem;
  border: 1px solid var(--line);
  background: var(--white);
  white-space: nowrap;
  line-height: 1.35;
}
.chip--motion { border-color: var(--green-mid); color: var(--green); }
.chip--paper { border-color: var(--gold); color: var(--gold-ink); }
.chip--question { border-color: #7d8f83; color: #3d4d44; }
.chip--answer { border-color: #7d8f83; color: #3d4d44; background: var(--band); }
.chip--vote { border-color: var(--green); background: var(--green); color: var(--white); }
.chip--ruling { border-color: var(--red); color: var(--red); }
.chip--forum { border-color: transparent; background: var(--band); color: var(--muted); }

/* ---------- Division bars ---------- */

.division { min-width: 8.5rem; }
.division-row {
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr) 2.2rem;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--muted);
}
.division-row b { font-weight: 600; color: var(--ink); text-align: right; }
.bar {
  height: 5px;
  background: var(--band-2);
  position: relative;
}
.bar i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--green-mid);
  display: block;
}
.bar--no i { background: var(--red); }
.bar--abstain i { background: var(--abstain); }
.outcome {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ink);
}
.outcome--carried { color: var(--green-mid); }
.outcome--negatived { color: var(--red); }

/* ---------- Filters ---------- */

.filters {
  background: var(--band);
  border: 1px solid var(--line);
  padding: 1rem 1.1rem 1.15rem;
  margin-bottom: var(--space-m);
}
.filter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.7rem 0.9rem;
}
@media (min-width: 640px) {
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
@media (min-width: 640px) { .field--wide { grid-column: span 2; } }
@media (min-width: 1000px) { .field--topic { grid-column: span 2; } }
.field label {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field select {
  appearance: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.55rem 0.6rem;
  font-size: 0.86rem;
  min-height: 42px;
  width: 100%;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.7rem;
}
.field input:focus, .field select:focus { border-color: var(--green); outline: 2px solid var(--green-soft); }

.filter-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1rem;
  margin-top: 0.9rem;
}
.filter-count {
  font-size: 0.78rem;
  color: var(--muted);
  margin-right: auto;
}
.filter-count strong { color: var(--ink); font-weight: 600; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--green);
  background: var(--green);
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius);
  cursor: pointer;
}
.btn:hover { background: var(--green-mid); color: var(--white); }
.btn--ghost { background: transparent; color: var(--green); border-color: var(--line); }
.btn--ghost:hover { background: var(--white); color: var(--green); border-color: var(--green-mid); }
.btn--gold { background: var(--gold-ink); border-color: var(--gold-ink); }
.btn--gold:hover { background: #5a4611; }
.btn--sm { min-height: 36px; padding: 0.4rem 0.7rem; font-size: 0.76rem; }

/* ---------- Search ---------- */

.searchbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}
.searchbar input {
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--white);
  padding: 0.9rem 1rem;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
  min-height: 54px;
  width: 100%;
}
.searchbar input:focus { outline: 2px solid var(--green-soft); border-color: var(--green); }
.searchbar .btn { min-height: 54px; padding-inline: 1.6rem; }

.term-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  color: var(--muted);
  margin-bottom: var(--space-l);
}
.term {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 0.3rem 0.55rem;
  font-size: 0.74rem;
  color: var(--green-mid);
  cursor: pointer;
  border-radius: var(--radius);
  min-height: 32px;
}
.term:hover { border-color: var(--green-mid); background: var(--band); }
.term[aria-pressed="true"] { background: var(--green); color: var(--white); border-color: var(--green); }

.result-group { margin-bottom: var(--space-xl); }
.group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.4rem;
  margin-bottom: 0.2rem;
}
.group-head h2 { font-size: var(--step-2); margin: 0; }
.group-head span { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.result {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem 1.2rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
}
.result--media { grid-template-columns: 8.5rem minmax(0, 1fr); }
@media (max-width: 560px) { .result--media { grid-template-columns: minmax(0, 1fr); } }
.result:last-child { border-bottom: 0; }
.result-meta {
  font-size: 0.7rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: center;
}
.result-meta .ref { color: var(--green-mid); }
.result h3 {
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  margin: 0.1rem 0 0.25rem;
}
.result h3 a { color: var(--ink); text-decoration: none; }
.result h3 a:hover { text-decoration: underline; color: var(--green-mid); }
.result p { font-size: 0.86rem; color: #3a4842; margin: 0 0 0.45rem; }
.result p mark, .hl { background: #eadfb9; color: var(--ink); padding: 0 1px; }

/* media thumbnail: masthead tile, not a stock photo */
.thumb {
  aspect-ratio: 16 / 9;
  min-width: 0;
  background: var(--green);
  color: #e9e2cb;
  border: 1px solid var(--green);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.5rem 0.6rem;
  text-decoration: none;
  overflow: hidden;
  position: relative;
}
.thumb::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(176, 141, 60, 0.4);
  pointer-events: none;
}
.thumb-outlet {
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.thumb-type {
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c9b169;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thumb--radio { background: #2c3b33; }
.thumb--podcast { background: #1b2a33; }
.thumb--online { background: #24382d; }

/* ---------- Budget lines ---------- */

.budget-row {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) 8rem;
  gap: 0.4rem 1.3rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 760px) {
  .budget-row { grid-template-columns: minmax(0, 1fr); }
  .budget-row .budget-amount { text-align: left; }
}
.budget-row:last-child { border-bottom: 0; }
.year-badge {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  font-weight: 500;
  padding: 0.22rem 0.4rem;
  border: 1px solid var(--line);
  background: var(--white);
  margin-bottom: 0.4rem;
}
.year-badge--annual { border-color: var(--green-mid); color: var(--green); }
.year-badge--mid { border-color: var(--gold); color: var(--gold-ink); }
.budget-loc { font-size: 0.7rem; color: var(--muted); line-height: 1.5; }
.budget-loc b { color: var(--ink); font-weight: 500; }
.budget-content { font-size: 0.9rem; line-height: 1.55; margin: 0 0 0.3rem; max-width: 62ch; }
.budget-topic { font-size: 0.7rem; color: var(--green-mid); }
.budget-amount {
  text-align: right;
  font-family: var(--display);
  font-size: 0.98rem;
  font-weight: 600;
  white-space: nowrap;
}
.budget-amount span { display: block; font-family: var(--body); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 400; }

/* ---------- Budget volume register ---------- */

.volumes {
  margin-top: var(--space-xl);
  padding-top: 1.4rem;
  border-top: 2px solid var(--ink);
}
.volumes-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem 1.4rem;
  margin-bottom: 1rem;
}
.volumes-head h2 { font-size: var(--step-2); margin: 0.15rem 0 0; }
.volumes-note {
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  text-align: right;
}
.volumes-note b { color: var(--ink); font-weight: 600; }
.volumes-foot {
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0.85rem 0 0;
  max-width: 78ch;
}
.volumes-foot em { font-style: normal; color: var(--ink); }

.volumes-table { min-width: 720px; }
.volumes-table tbody tr.is-on { background: var(--green-wash, var(--band)); }
.volumes-table tbody tr.is-on td { box-shadow: inset 0 -1px 0 var(--line-soft); }
.volumes-table td[data-label="Laid"],
.volumes-table td[data-label="Lines"],
.volumes-table td[data-label="Provision"] { white-space: nowrap; }
.volumes-table td[data-label="Provision"] { font-family: var(--display); font-weight: 600; }
.volumes-table td[data-label="Year"] b { font-weight: 600; }

.vol-kind {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0.15rem;
}
.vol-kind--annual { color: var(--green-mid); }
.vol-kind--mid { color: var(--gold-ink); }

.vol-laid { font-size: 0.74rem; color: var(--green); white-space: nowrap; }
.vol-pending { font-style: normal; font-size: 0.74rem; color: var(--gold-ink); white-space: nowrap; font-weight: 600; }
.vol-none { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.vol-act { text-align: right; }
.vol-pick { white-space: nowrap; }
.vol-pick:hover { border-color: var(--ink); color: var(--ink); }

@media (max-width: 760px) {
  .volumes-note { text-align: left; }
  .volumes-table { min-width: 0; }
  .vol-act { text-align: left; padding-top: 0.4rem !important; }
  .vol-kind { display: inline; margin-left: 0.35rem; }
}

/* ---------- Reports ---------- */

.report-controls { margin-bottom: var(--space-xl); }

.report-sheet {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  padding: clamp(1.2rem, 0.8rem + 2vw, 2.6rem);
  box-shadow: 0 12px 30px -24px rgba(18, 33, 28, 0.6);
}
.report-sheet h2 { margin-bottom: 0.2rem; }
.report-sheet h3 {
  font-size: 1.15rem;
  margin: 1.9rem 0 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--line);
}
.report-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-size: 0.72rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.7rem;
  margin-bottom: 1.2rem;
}
.report-meta b { color: var(--ink); font-weight: 500; }
.report-narrative { font-size: 0.95rem; line-height: 1.7; max-width: 76ch; }
.report-narrative p { max-width: 76ch; }
.statgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 0.8rem 0 0.4rem;
}
.statgrid div { background: var(--white); padding: 0.7rem 0.8rem; }
.statgrid dt {
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.statgrid dd {
  margin: 0.15rem 0 0;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}
.statgrid small { font-family: var(--body); font-size: 0.7rem; color: var(--muted); }

table.mini {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin: 0.4rem 0 0.6rem;
}
table.mini th {
  text-align: left;
  font-size: 0.58rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--ink);
}
table.mini td { padding: 0.42rem 0.5rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.mini td.num, table.mini th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.mini tfoot td { border-top: 1px solid var(--ink); border-bottom: 0; font-weight: 600; }
.report-list { margin: 0.3rem 0 0.6rem; padding-left: 1.1rem; font-size: 0.84rem; }
.report-list li { margin-bottom: 0.45rem; }
.report-note {
  font-size: 0.72rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  margin-top: 1.6rem;
  padding-top: 0.7rem;
}
.empty-state {
  border: 1px dashed var(--line);
  padding: 2rem 1.2rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  background: var(--band);
}
.empty-state strong { display: block; color: var(--ink); font-family: var(--display); font-size: 1.2rem; margin-bottom: 0.3rem; font-weight: 600; }

/* ---------- Dialog (record detail) ---------- */

dialog.record {
  border: 0;
  border-top: 3px solid var(--green);
  padding: 0;
  width: min(760px, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.55);
}
dialog.record::backdrop { background: rgba(18, 33, 28, 0.42); }
.record-head {
  padding: 1.2rem 1.4rem 0.9rem;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--white);
}
.record-head .ref { font-size: 0.72rem; color: var(--green-mid); }
.record-head h2 { font-size: 1.45rem; margin: 0.3rem 0 0.4rem; }
.record-body { padding: 1.1rem 1.4rem 1.4rem; }
.record-close {
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  background: none;
  border: 1px solid var(--line);
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.record-dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.8rem 1.2rem;
  margin: 0 0 1.1rem;
  font-size: 0.82rem;
}
.record-dl dt { font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.record-dl dd { margin: 0.12rem 0 0; }
.record-text { font-size: 0.92rem; line-height: 1.7; }
.record-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

/* ---------- Footer ---------- */

.footer {
  background: var(--green);
  color: #d9e2d6;
  padding-block: var(--space-xl);
  margin-top: var(--space-xl);
}
.foot-inner {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 820px) {
  .foot-inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); align-items: start; }
}
.footer p { color: #b9c8bd; font-size: 0.82rem; max-width: 62ch; }
.footer strong { color: #f2efe2; }
.footer .gold { color: #cbb87f; }
.foot-meta { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: #93a89a; }
.footer a { color: #e6dcc0; }

/* ---------- Motion ---------- */

.reveal {
  animation: reveal 0.7s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
  * { scroll-behavior: auto; }
}

/* ---------- Print (reports) ---------- */

@media print {
  @page { margin: 16mm; }
  body { background: #fff; padding-left: 0; }
  .spine, .masthead, .footer, .no-print, .skip { display: none !important; }
  .report-sheet { border: 0; box-shadow: none; padding: 0; }
  .report-sheet h3 { break-after: avoid; }
  table.mini { break-inside: avoid; }
}

/* ---------- Topic list (home and search default) ---------- */

.topic-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.topic-list li { border-bottom: 1px solid var(--line); }
.topic-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.15rem 1.5rem;
  padding: 0.95rem 0.2rem;
  text-decoration: none;
  color: var(--ink);
}
@media (min-width: 780px) {
  .topic-row { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr) auto; align-items: baseline; }
}
.topic-row:hover .topic-name { color: var(--green-mid); text-decoration: underline; }
.topic-name {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.2;
}
.topic-blurb { font-size: 0.8rem; color: var(--muted); line-height: 1.45; }
.topic-counts {
  font-size: 0.68rem;
  color: var(--muted);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.topic-list--tight .topic-row { padding: 0.75rem 0.2rem; }

button.sub-title {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--body);
  font-size: 0.84rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  line-height: 1.35;
  display: block;
  max-width: 46ch;
  margin-bottom: 0.22rem;
}
button.sub-title:hover { color: var(--green-mid); text-decoration: underline; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 560px) {
  .result-meta { font-size: 0.66rem; }
  .report-sheet { padding: 1rem 0.9rem; }
  table.mini { font-size: 0.74rem; }
}

/* form controls that must not take the field width */
.field input[type="checkbox"],
.field input[type="radio"] {
  width: auto;
  min-height: 0;
  margin: 0;
  accent-color: var(--green);
}

/* mobile masthead: brand on its own line, then menu and the sample marker */
@media (max-width: 899px) {
  .mast-inner { row-gap: 0.4rem; }
  .brand { flex: 1 1 100%; margin-right: 0; }
  .nav-toggle { order: 1; }
  .demo-chip { order: 2; margin-left: auto; align-self: center; }
  .nav { order: 3; }
}

/* one-column search bars on a phone */
@media (max-width: 640px) {
  .searchbar { grid-template-columns: minmax(0, 1fr); }
  .searchbar .btn { min-height: 48px; }
}

/* touch: every control meets the 44px target */
@media (pointer: coarse) {
  .field input, .field select, .term, .btn--sm, .record-close, .nav-toggle { min-height: 44px; }
  .term { padding: 0.5rem 0.7rem; }
}

.mini-split { display: grid; gap: 1.4rem; margin-top: 1.2rem; }
@media (min-width: 720px) { .mini-split { grid-template-columns: 1fr 1fr; gap: 2.2rem; } }
.mini-split table.mini { margin: 0; }

/* =========================================================
   Access control — crest, sign-in, control panel, editor
   ========================================================= */

/* Private pages are redirected by js/guard.js before the body is parsed, so no
   hiding rule is needed here. If that gate is ever removed, pages fall back to
   the client-side redirect in auth.js. */

/* ---------- The crest, top left on every page ---------- */

.brand-logo {
  grid-row: span 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(16, 32, 26, 0.18), 0 2px 6px -3px rgba(16, 32, 26, 0.5);
}
.brand-logo--lg { width: 84px; height: 84px; box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.85), 0 10px 30px -14px rgba(0, 0, 0, 0.7); }
.brand-logo--sm { width: 28px; height: 28px; }

/* signed-in chip in the masthead */
.mast-user { display: flex; align-items: center; }
.user-chip { display: flex; align-items: center; gap: 0.55rem; }
.user-avatar {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.user-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.user-name { font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.user-role {
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.user-out {
  border: 0;
  background: none;
  padding: 0.35rem 0.2rem 0.35rem 0.5rem;
  font-size: 0.72rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  min-height: 36px;
}
.user-out:hover { color: var(--red); }

@media (max-width: 899px) {
  .mast-user { order: 2; margin-left: auto; }
  .demo-chip { order: 2; }
  .user-meta { display: none; }
}

/* ---------- Sign-in page ---------- */

body[data-page="login"] { padding-left: 0; background: var(--paper); }
body[data-page="login"] .skip { z-index: 100; }

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
/* Text on the left, sign-in panel on the right from tablet width up;
   below that the two stack, text first. */
@media (min-width: 720px) {
  .auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1100px) {
  .auth { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

.auth-brand {
  position: relative;
  background:
    radial-gradient(120% 90% at 12% 0%, #12854a 0%, rgba(18, 133, 74, 0) 55%),
    linear-gradient(165deg, #0b6b3a 0%, #074a29 62%, #05301c 100%);
  color: #f4f1e2;
  padding: clamp(1.8rem, 3.4vw, 3.4rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  overflow: hidden;
}
.auth-brand::after {
  /* the crest's gold ring, quoted as a hairline across the panel */
  content: "";
  position: absolute;
  inset: auto 0 0 auto;
  width: 62%;
  height: 3px;
  background: linear-gradient(90deg, rgba(212, 160, 23, 0) 0%, var(--gold) 65%, var(--red) 100%);
}
.auth-lockup { display: flex; align-items: center; gap: 0.9rem; }
.auth-lockup-text { display: flex; flex-direction: column; gap: 0.15rem; }
.auth-lockup-name {
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.1;
  color: #fffdf5;
}
.auth-lockup-sub {
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 241, 226, 0.72);
}

.auth-copy { max-width: 34ch; margin-top: auto; }
.auth-copy h1 {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem);
  color: #fffdf5;
  margin-bottom: 0.7rem;
}
.auth-copy p { color: rgba(244, 241, 226, 0.82); font-size: 0.92rem; line-height: 1.6; }

.auth-roles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  border-top: 1px solid rgba(244, 241, 226, 0.22);
  padding-top: 1.1rem;
}
.auth-roles li {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: 0.6rem;
  font-size: 0.78rem;
  color: rgba(244, 241, 226, 0.9);
  line-height: 1.45;
}
.auth-roles b { color: #fffdf5; font-weight: 600; display: block; font-size: 0.82rem; }
.auth-roles .dot {
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.35rem;
  border-radius: 50%;
  background: var(--gold);
}
.auth-roles li:nth-child(2) .dot { background: #f6c9c9; }
.auth-roles li:nth-child(3) .dot { background: #b8e6c9; }

.auth-provider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: rgba(244, 241, 226, 0.62);
  border-top: 1px solid rgba(244, 241, 226, 0.16);
  padding-top: 1rem;
}
.auth-provider img {
  /* The supplied inCharge file is dark artwork on a baked light checkerboard,
     so it needs a light plate to stay legible on the green panel. */
  width: 62px;
  height: auto;
  flex: none;
  background: #fff;
  padding: 3px 4px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.4rem, 3.6vw, 3.4rem) clamp(1rem, 3vw, 2.6rem);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(212, 160, 23, 0.1) 0%, rgba(212, 160, 23, 0) 60%),
    var(--paper);
}

.auth-card {
  width: 100%;
  max-width: 430px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  padding: clamp(1.3rem, 2.6vw, 2.1rem);
  box-shadow: 0 26px 60px -40px rgba(16, 32, 26, 0.75);
}
.auth-card h2 { font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.75rem); margin-bottom: 0.35rem; }
.auth-card > p.auth-sub {
  font-size: 0.84rem;
  color: var(--muted);
  margin-bottom: 1.35rem;
  line-height: 1.5;
}

.auth-form { display: grid; gap: 0.95rem; }
.auth-field { display: grid; gap: 0.3rem; }
.auth-field label {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.auth-field input {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7rem 0.75rem;
  font-size: 0.92rem;
  min-height: 46px;
}
.auth-field input:focus { border-color: var(--green); outline: 2px solid var(--green-soft); }

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
}
.auth-row label { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); }
.auth-row input[type="checkbox"] { accent-color: var(--green); width: auto; }
.auth-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--green-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.auth-link:hover { color: var(--green); }

.auth-submit { width: 100%; min-height: 48px; margin-top: 0.2rem; }

.auth-msg {
  font-size: 0.82rem;
  line-height: 1.5;
  padding: 0.7rem 0.85rem;
  border-left: 3px solid var(--red);
  background: #fdf1f1;
  color: #7d1420;
}
.auth-msg[data-tone="ok"] { border-left-color: var(--green); background: var(--green-soft); color: #0a4d2b; }
.auth-msg[data-tone="note"] { border-left-color: var(--gold); background: var(--band); color: var(--gold-ink); }
.auth-msg:empty { display: none; }

.auth-foot {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.55;
}
.auth-foot strong { color: var(--ink); }
.auth-seed {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}
.auth-seed li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  font-size: 0.7rem;
  padding: 0.3rem 0.4rem;
  background: var(--band);
  border-left: 2px solid var(--gold);
}
.auth-seed code { font-size: 0.68rem; color: var(--green); background: none; }
.auth-seed button {
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.66rem;
  color: var(--green-mid);
  text-decoration: underline;
  cursor: pointer;
  padding: 0 0.2rem;
}

/* ---------- Control panel ---------- */

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.1rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 1.4rem;
}
.panel-head h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); margin: 0 0 0.3rem; }
.panel-head p { margin: 0; font-size: 0.86rem; color: var(--muted); max-width: 60ch; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 1.6rem;
}
@media (min-width: 780px) { .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat {
  background: var(--white);
  padding: 0.9rem 1rem;
}
.stat dt {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.2rem;
}
.stat dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.85rem;
  font-weight: 600;
  line-height: 1;
}
.stat dd small { font-family: var(--body); font-size: 0.72rem; font-weight: 400; color: var(--muted); }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.toolbar input[type="search"], .toolbar select {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem 0.65rem;
  font-size: 0.84rem;
  min-height: 42px;
}
.toolbar input[type="search"] { min-width: 12rem; flex: 1 1 14rem; }
.toolbar .spacer { margin-left: auto; }

table.users {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  background: var(--white);
  border: 1px solid var(--line);
}
table.users thead th {
  text-align: left;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
  background: var(--band);
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.users td {
  padding: 0.7rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
table.users tbody tr:last-child td { border-bottom: 0; }
table.users tbody tr:hover { background: #fdfbf3; }
table.users .who { font-weight: 600; color: var(--ink); }
table.users .who span { display: block; font-size: 0.72rem; font-weight: 400; color: var(--muted); }
table.users .acts { text-align: right; white-space: nowrap; }

.role-badge {
  display: inline-block;
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.22rem 0.42rem;
  border: 1px solid var(--line);
  background: var(--white);
  white-space: nowrap;
}
.role-badge--provider { border-color: var(--red); color: var(--red); background: #fdf1f2; }
.role-badge--admin { border-color: var(--gold); color: var(--gold-ink); background: var(--band); }
.role-badge--mp { border-color: var(--green-mid); color: var(--green); background: var(--green-soft); }

.state {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}
.state::before {
  content: "";
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  background: var(--green-mid);
}
.state[data-state="suspended"]::before { background: var(--red); }

.icon-btn {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 0.32rem 0.55rem;
  font-size: 0.74rem;
  cursor: pointer;
  border-radius: var(--radius);
  min-height: 34px;
}
.icon-btn:hover { border-color: var(--green-mid); color: var(--green); }
.icon-btn--danger:hover { border-color: var(--red); color: var(--red); }
.icon-btn + .icon-btn { margin-left: 0.3rem; }

.empty-panel {
  border: 1px dashed var(--line);
  padding: 2rem 1.2rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.86rem;
  background: var(--white);
}

.note-line {
  font-size: 0.78rem;
  color: var(--muted);
  border-left: 2px solid var(--gold);
  padding-left: 0.8rem;
  margin: 1.2rem 0 0;
  max-width: 70ch;
  line-height: 1.55;
}

/* dialog (user form, delete confirm) */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(16, 32, 26, 0.45);
}
.sheet[hidden] { display: none; }
.sheet-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow: auto;
  padding: clamp(1.1rem, 2.4vw, 1.8rem);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
}
.sheet-card h2 { font-size: 1.4rem; margin-bottom: 0.3rem; }
.sheet-card > p { font-size: 0.82rem; color: var(--muted); margin-bottom: 1.1rem; }
.sheet-form { display: grid; gap: 0.8rem; }
.sheet-grid { display: grid; gap: 0.8rem; }
@media (min-width: 560px) { .sheet-grid { grid-template-columns: 1fr 1fr; } }
.sheet-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.sheet-actions .danger { margin-right: auto; }

/* ---------- Content editor drawer ---------- */

.edit-fab {
  position: fixed;
  right: clamp(0.8rem, 2vw, 1.6rem);
  bottom: clamp(0.8rem, 2vw, 1.6rem);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--green);
  color: var(--white);
  border: 1px solid var(--green);
  border-radius: 999px;
  padding: 0.6rem 1rem;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 12px 30px -14px rgba(16, 32, 26, 0.9);
  min-height: 44px;
}
.edit-fab:hover { background: var(--green-mid); }
.edit-fab::before { content: "✎"; font-size: 0.95rem; }

.edit-drawer {
  position: fixed;
  z-index: 70;
  inset: 0 0 0 auto;
  width: min(420px, 100%);
  background: var(--paper);
  border-left: 1px solid var(--line);
  box-shadow: -20px 0 60px -30px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  transform: translateX(101%);
  transition: transform 0.28s var(--ease-out);
  visibility: hidden;
}
.edit-drawer.is-open { transform: translateX(0); visibility: visible; }
.edit-drawer header {
  padding: 1rem 1.1rem 0.9rem;
  border-bottom: 2px solid var(--ink);
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--white);
}
.edit-drawer header h2 { font-size: 1.15rem; margin: 0 0 0.15rem; }
.edit-drawer header p { font-size: 0.72rem; color: var(--muted); margin: 0; }
.edit-drawer header button {
  margin-left: auto;
  border: 0;
  background: none;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  min-height: 40px;
  color: var(--muted);
}
.edit-body { padding: 1rem 1.1rem 1.4rem; overflow: auto; flex: 1; }
.edit-body .hint {
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.5;
  background: var(--band);
  border-left: 2px solid var(--gold);
  padding: 0.6rem 0.7rem;
  margin-bottom: 1rem;
}
.edit-group { margin-bottom: 1.1rem; }
.edit-group h3 {
  font-family: var(--body);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 0.45rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.3rem;
}
.edit-field { display: grid; gap: 0.22rem; margin-bottom: 0.7rem; }
.edit-field label { font-size: 0.68rem; font-weight: 600; color: var(--ink); }
.edit-field label span { font-weight: 400; color: var(--muted); }
.edit-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: 0.5rem 0.6rem;
  font-size: 0.82rem;
  line-height: 1.5;
  resize: vertical;
  min-height: 2.6rem;
  font-family: var(--body);
}
.edit-field textarea:focus { border-color: var(--green); outline: 2px solid var(--green-soft); }
.edit-field .row-meta { font-size: 0.64rem; color: var(--muted); display: flex; justify-content: space-between; gap: 0.5rem; }
.edit-foot {
  border-top: 1px solid var(--line);
  padding: 0.9rem 1.1rem;
  background: var(--white);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.edit-foot .btn { flex: 1 1 auto; }

.edit-toast {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%) translateY(140%);
  background: var(--ink);
  color: var(--white);
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  z-index: 90;
  transition: transform 0.3s var(--ease-out);
  max-width: 90vw;
}
.edit-toast.is-on { transform: translateX(-50%) translateY(0); }

@media print {
  .edit-fab, .edit-drawer, .edit-toast, .mast-user { display: none !important; }
}

/* =========================================================
   Search page — split screen with the monitored feed rail
   ========================================================= */

/* The two columns engage as soon as there is room for them. They stack only on
   genuinely narrow screens, where a 320px column beside a results list would be
   unusable. This keeps the page a true left/right split on any laptop or tablet
   in landscape. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 34%);
  gap: 0 clamp(1.2rem, 2.2vw, 2.4rem);
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 0.4rem + 2.4vw, 2.6rem);
  align-items: start;
}

@media (min-width: 1200px) {
  .split { grid-template-columns: minmax(0, 1fr) 360px; }
}

/* Below this width a side-by-side split stops being readable, so the rail
   drops underneath as a full-width panel. */
@media (max-width: 860px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

.split-main { min-width: 0; }

.split-rail {
  position: sticky;
  top: 74px;
  min-width: 0;
  border-left: 1px solid var(--line);
  padding-left: clamp(1rem, 1.6vw, 1.4rem);
  height: calc(100vh - 92px);
  max-height: 900px;
  display: flex;
  flex-direction: column;
}

@media (max-width: 860px) {
  .split-rail {
    position: relative;
    top: auto;
    border-left: 0;
    border-top: 2px solid var(--ink);
    padding-left: 0;
    padding-top: 0.9rem;
    margin-top: var(--space-l);
    height: auto;
    max-height: none;
  }
}

/* ---------- rail head ---------- */

/* ---------- advertisement slot (above the feed) ---------- */

.ad-slot { margin-bottom: 0.85rem; }
.ad-slot[hidden] { display: none; }

.ad-card {
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  background: var(--white);
  padding: 0.7rem 0.8rem 0.8rem;
  transition: opacity 0.45s var(--ease-out);
}
.ad-card.is-swapping { animation: adSwap 0.55s var(--ease-out); }
@keyframes adSwap {
  from { opacity: 0.25; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

.ad-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.ad-label {
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.ad-count {
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  white-space: nowrap;
}
.ad-sponsor {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
  margin: 0 0 0.2rem;
  max-width: none;
}
.ad-headline {
  font-family: var(--display);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 0 0 0.3rem;
  color: var(--ink);
  text-wrap: pretty;
}
.ad-body {
  font-size: 0.71rem;
  line-height: 1.45;
  color: #45524a;
  margin: 0 0 0.5rem;
  max-width: none;
}
.ad-cta {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}
.ad-cta:hover { color: var(--green-mid); border-bottom-color: var(--green-mid); }

/* ---------- rail head ---------- */

.rail-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}

/* The social block states its own coverage on a second line under the
   heading, so the count does not fight the title for width in a 300px rail. */
.social .rail-head { flex-wrap: wrap; }
.social .rail-head > b {
  flex-basis: 100%;
  order: 3;
  margin-top: 0.15rem;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.rail-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.1;
}
.rail-title em {
  display: block;
  font-family: var(--body);
  font-style: normal;
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  margin-top: 0.12rem;
}

/* A quiet pulse, so the rail reads as a live watch-list rather than a list. */
.rail-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--red);
  flex: none;
  animation: railPulse 2.4s ease-in-out infinite;
}
@keyframes railPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(200, 16, 46, 0.45); }
  50% { opacity: 0.65; box-shadow: 0 0 0 5px rgba(200, 16, 46, 0); }
}

.rail-toggle {
  margin-left: auto;
  border: 1px solid var(--line);
  background: var(--white);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  border-radius: var(--radius);
  min-height: 30px;
  color: var(--muted);
}
.rail-toggle:hover { border-color: var(--green-mid); color: var(--green); }
.rail-toggle[aria-pressed="false"] { background: var(--band); border-color: var(--gold); color: var(--gold-ink); }

.rail-lede {
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0.6rem 0 0;
  max-width: none;
}

/* The window the rail is held to. Stated plainly, because a feed that looks
   live but silently omits the archive should say so. */
.rail-scope {
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-ink);
  background: var(--band);
  border-left: 2px solid var(--gold);
  padding: 0.28rem 0.4rem;
  margin: 0.45rem 0 0;
  line-height: 1.45;
  max-width: none;
}
.rail-scope:empty { display: none; }

/* ---------- legend ---------- */

.rail-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.7rem 0 0.2rem;
}
.rail-chip {
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  background: var(--white);
  padding: 0.18rem 0.36rem;
  color: var(--muted);
  white-space: nowrap;
}
.rail-chip b { color: var(--ink); font-weight: 600; }

/* ---------- the scrolling well ---------- */

.rail-scroll {
  position: relative;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  margin-top: 0.5rem;
  /* Scrolls only once the rail has consumed the space it has. */
  flex: 1 1 auto;
  min-height: 12rem;
}
@media (min-width: 1080px) {
  .rail-scroll { min-height: 0; }
}

/* Soft fade at the top and bottom of the well, so items enter and leave
   rather than being clipped hard. */
.rail-scroll::before,
.rail-scroll::after {
  content: "";
  position: sticky;
  left: 0;
  right: 0;
  display: block;
  height: 1.4rem;
  pointer-events: none;
  z-index: 2;
}
.rail-scroll::before {
  top: 0;
  margin-bottom: -1.4rem;
  background: linear-gradient(var(--paper), rgba(251, 249, 240, 0));
}
.rail-scroll::after {
  bottom: 0;
  margin-top: -1.4rem;
  background: linear-gradient(rgba(251, 249, 240, 0), var(--paper));
}

/* stacked on narrow screens: a fixed well keeps the page manageable */
@media (max-width: 1079px) {
  .rail-scroll { max-height: 30rem; }
}

.feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.feed-item {
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.feed-item:last-child { border-bottom: 0; }

.feed-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  font-size: 0.62rem;
  color: var(--muted);
  margin-bottom: 0.22rem;
}
.feed-outlet {
  font-weight: 600;
  color: var(--green);
  letter-spacing: 0.02em;
}
.feed-format {
  border: 1px solid var(--line);
  padding: 0 0.24rem;
  font-size: 0.54rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.feed-date { margin-left: auto; white-space: nowrap; }

.feed-item h3 {
  font-family: var(--body);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  margin: 0 0 0.2rem;
  color: var(--ink);
  text-wrap: pretty;
}
.feed-item p {
  font-size: 0.74rem;
  line-height: 1.45;
  color: #45524a;
  margin: 0;
  max-width: none;
}
.feed-item mark {
  background: #f7e6bd;
  color: var(--ink);
  padding: 0 1px;
  border-radius: 1px;
}

.feed-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.3rem;
}
.feed-tag {
  font-size: 0.54rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-ink);
  background: var(--band);
  border-left: 2px solid var(--gold);
  padding: 0.1rem 0.28rem;
}

/* new item arriving: a brief tint, so movement is legible */
.feed-item.is-new { animation: feedIn 0.9s var(--ease-out); }
@keyframes feedIn {
  from { background: rgba(212, 160, 23, 0.16); }
  to { background: transparent; }
}

.rail-foot {
  font-size: 0.64rem;
  line-height: 1.5;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 0.55rem;
  margin: 0.4rem 0 0;
  max-width: none;
}
.rail-foot strong { color: var(--ink); }

/* Honour a reduced-motion preference: no auto-scroll, no pulse. */
@media (prefers-reduced-motion: reduce) {
  .rail-dot { animation: none; }
  .feed-item.is-new { animation: none; }
  .lounge-bar.is-running { animation: none; width: 100%; }
}

/* ================================================================
   Speakers' Space and Social Media Feed — the two blocks added to
   the right-hand rail, plus the shared popup both of them open.

   The rail now carries three blocks, so it scrolls as one column and
   each list inside it is bounded rather than fighting for flex space.
   ================================================================ */

/* The rail now carries three blocks. It no longer scrolls or sticks: with
   2,000px of content a sticky box taller than the viewport would hide its
   own lower blocks and could never be scrolled to the end. The page
   scrolls once, and each list keeps its own bounded auto-scrolling well. */
.split-rail {
  position: static;
  height: auto;
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
}
.split-rail > section { flex: none; }
.split-rail .rail-scroll {
  flex: none;
  max-height: 20rem;
}
@media (min-width: 1080px) {
  .split-rail .rail-scroll { max-height: 22rem; }
}
@media (max-width: 860px) {
  .split-rail { overflow: visible; }
}

/* A rule between the three blocks, so they read as separate registers
   rather than one long list. */
.lounge, .social, .feed-block {
  padding-top: 0.9rem;
  margin-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.lounge { margin-top: 0; border-top: 0; padding-top: 0; }

/* ---------- shared tag pill ---------- */

.cr-tag {
  display: inline-block;
  font-size: 0.56rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold-ink);
  background: var(--band);
  border-left: 2px solid var(--gold);
  padding: 0.1rem 0.28rem;
  white-space: nowrap;
}
.cr-tag--sm { font-size: 0.5rem; padding: 0.07rem 0.24rem; }

/* ---------- block 1: Speakers' Space ---------- */

.rail-dot--social {
  background: var(--gold);
  animation: railPulseGold 2.4s ease-in-out infinite;
}
@keyframes railPulseGold {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(212, 160, 23, 0.5); }
  50% { opacity: 0.65; box-shadow: 0 0 0 5px rgba(212, 160, 23, 0); }
}

.lounge-stage {
  display: block;
  width: 100%;
  text-align: left;
  margin-top: 0.6rem;
  padding: 0;
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  background: var(--white);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.lounge-stage:hover { border-color: var(--green-mid); transform: translateY(-1px); }
.lounge-stage:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* The frame. Deliberately reads as a typographic poster, not a photograph:
   there is no footage behind this build, and the caption says so. */
.lounge-poster {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #0b3d24 0%, #0b6b3a 55%, #12854a 100%);
  color: var(--paper);
}
.lounge-poster--video { background: linear-gradient(135deg, #10201a 0%, #1c3b2c 60%, #2a5440 100%); }
.lounge-poster--audio { background: linear-gradient(135deg, #1b2a33 0%, #24404a 60%, #2f5866 100%); }
.lounge-poster--chamber { background: linear-gradient(135deg, #3d1f14 0%, #6b3a1e 55%, #8a4d26 100%); }
.lounge-poster--picture { background: linear-gradient(135deg, #24382d 0%, #2f5741 60%, #3d6b52 100%); }

/* A quiet crest watermark, drawn with the ring rather than an image. */
.lounge-poster::after {
  content: "";
  position: absolute;
  inset: auto -14% -32% auto;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(212, 160, 23, 0.35);
  box-shadow: inset 0 0 0 12px rgba(212, 160, 23, 0.12);
  pointer-events: none;
}

.lounge-glyph {
  position: absolute;
  left: 0.6rem;
  bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--gold);
  opacity: 0.9;
  line-height: 1;
}
.lounge-mark {
  position: absolute;
  left: 0.55rem;
  top: 0.5rem;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: rgba(251, 249, 240, 0.95);
}
.lounge-kind {
  position: absolute;
  right: 0.55rem;
  top: 0.6rem;
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251, 249, 240, 0.8);
  border-bottom: 1px solid rgba(212, 160, 23, 0.6);
  padding-bottom: 1px;
}
.lounge-poster-note {
  position: absolute;
  left: 0.55rem;
  bottom: 0.5rem;
  font-size: 0.46rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(251, 249, 240, 0.62);
}

/* A real portrait photograph. The image fills the 16:9 frame and is cropped
   to the subject's face rather than squashed, with the credit kept on a
   legible plate so a photograph of a living person is always attributed. */
.lounge-poster--photo {
  background: #10201a;
  aspect-ratio: 16 / 9;
}
.lounge-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.lounge-poster--photo::after { display: none; }

.lounge-credit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.5rem 0.55rem 0.35rem;
  font-size: 0.48rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(251, 249, 240, 0.9);
  background: linear-gradient(rgba(16, 32, 26, 0), rgba(16, 32, 26, 0.82));
  pointer-events: none;
}

/* The tagged stories beneath the portraits. Each is a full-width button so the
   whole row is a target; the tag it matched is printed on the row, so its
   relevance is visible rather than asserted. */
.lounge-list {
  margin-top: 0.7rem;
  max-height: 24rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-right: 0.15rem;
}
.lounge-story { padding: 0; }
.lounge-story-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.62rem 0.2rem;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background 0.2s var(--ease-out);
}
.lounge-story:last-child .lounge-story-btn { border-bottom: 0; }
.lounge-story-btn:hover { background: rgba(11, 107, 58, 0.05); }
.lounge-story-btn:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.lounge-story-title {
  display: block;
  font-family: var(--display);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}

/* The portrait in the popup: shown whole rather than cropped to a 16:9 band,
   so the face is not cut off when the photograph is the subject. */
.cr-dialog-photo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  background: #10201a;
}

.lounge-copy {
  display: block;
  padding: 0.6rem 0.7rem 0.7rem;
}
.lounge-meta {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  color: var(--green);
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.lounge-copy strong {
  display: block;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.lounge-excerpt {
  display: block;
  font-size: 0.71rem;
  line-height: 1.45;
  color: #45524a;
  margin-top: 0.28rem;
}
.lounge-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem;
  margin-top: 0.42rem;
}

/* Ten-second progress bar. Duration is set here to match HOLD in
   js/lounge.js; the class is toggled on every change to restart it. */
.lounge-progress {
  height: 2px;
  background: var(--line-soft);
  margin-top: 0.45rem;
  overflow: hidden;
}
.lounge-bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold);
}
.lounge-bar.is-running { animation: loungeTen 10s linear forwards; }
@keyframes loungeTen {
  from { width: 0; }
  to { width: 100%; }
}

.lounge-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.22rem;
  margin-top: 0.45rem;
  min-height: 0.7rem;
}
.lounge-dot {
  width: 0.42rem;
  height: 0.42rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.lounge-dot:hover { background: var(--muted); }
.lounge-dot.is-on { background: var(--green); transform: scale(1.35); }
.lounge-pos {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.lounge-empty { padding: 0.9rem 0.2rem; }
.lounge-empty p { font-size: 0.72rem; color: var(--muted); margin: 0 0 0.25rem; max-width: none; }

/* ---------- block 2: Social Media Feed ---------- */

.rail-chip {
  font-family: var(--body);
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.rail-chip:hover { border-color: var(--green-mid); color: var(--green); }
.rail-chip.is-on {
  background: var(--green);
  border-color: var(--green);
  color: var(--paper);
}
.rail-chip.is-on b { color: var(--gold); }

.rail-scroll--social { max-height: 17rem; }

.social-item { cursor: pointer; }
.social-item:hover .social-body { color: var(--ink); }
.social-item:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.social-acct {
  font-weight: 600;
  color: var(--green);
  font-size: 0.66rem;
  letter-spacing: 0.01em;
}
.social-platform {
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 0 0.22rem;
  color: var(--muted);
}
.social-platform--x { border-color: var(--ink); color: var(--ink); }
.social-platform--facebook { border-color: #24528f; color: #24528f; }
.social-platform--instagram { border-color: #a8375f; color: #a8375f; }

.social-body {
  font-size: 0.74rem;
  line-height: 1.45;
  color: #45524a;
  margin: 0 0 0.3rem;
  max-width: none;
}
.social-tags { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.social-engage {
  font-size: 0.58rem;
  color: var(--muted);
  margin-top: 0.3rem;
  letter-spacing: 0.02em;
}
.social-empty p { font-size: 0.72rem; color: var(--muted); }

/* ---------- the shared popup ---------- */

dialog#cr-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(46rem, calc(100vw - 2rem));
  width: 100%;
  margin: auto;
}
dialog#cr-dialog::backdrop { background: rgba(18, 33, 28, 0.55); }
dialog#cr-dialog:not([open]) { display: none; }

.cr-dialog-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--green);
  box-shadow: 0 24px 60px -30px rgba(18, 33, 28, 0.7);
  padding: clamp(1.1rem, 0.8rem + 1.4vw, 2rem);
  max-height: min(84vh, 44rem);
  overflow-y: auto;
}
.cr-dialog-x {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius);
}
.cr-dialog-x:hover { border-color: var(--ink); color: var(--ink); }

.cr-dialog-kicker {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
  margin: 0 0 0.35rem;
}
.cr-dialog-card h2 {
  font-family: var(--display);
  font-size: var(--step-2);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0 0 0.4rem;
  padding-right: 2rem;
  text-wrap: pretty;
}
.cr-dialog-meta {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 0.55rem;
  max-width: none;
}
.cr-dialog-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.7rem; }
.cr-dialog-tags--all:empty { display: none; }
.cr-dialog-role {
  font-size: 0.72rem;
  color: var(--gold-ink);
  background: var(--band);
  border-left: 2px solid var(--gold);
  padding: 0.3rem 0.45rem;
  margin: 0 0 0.7rem;
  max-width: none;
}
.cr-dialog-handle {
  font-size: 0.7rem;
  color: var(--muted);
  margin: 0 0 0.5rem;
  max-width: none;
}
.cr-dialog-copy p {
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--ink);
  margin: 0 0 0.9rem;
  max-width: 62ch;
}
.cr-dialog-note {
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--muted);
  background: var(--band);
  border-left: 2px solid var(--gold);
  padding: 0.5rem 0.6rem;
  margin: 0 0 0.9rem;
  max-width: none;
}
.cr-dialog-note strong { color: var(--ink); }
.cr-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  border-top: 1px solid var(--line);
  padding-top: 0.8rem;
}

@media (max-width: 560px) {
  .lounge-mark { font-size: 1.15rem; }
  .cr-dialog-card { max-height: 88vh; }
}