/* The field guide's visual language (scripts/site/template.html), shared by the
   build-status page (index.html) and the talk pages. Dusk forest, single theme,
   every colour explicit. Load Barlow Condensed from Google Fonts alongside it. */
:root {
  color-scheme: dark;
  --ground: #17231b;
  --deep: #101712;
  --surface: #1e2c22;
  --raised: #24352a;
  --ink: #f2f1e8;
  --ink-muted: #b9bcae;
  --line: rgba(242, 241, 232, 0.16);
  --line-strong: rgba(242, 241, 232, 0.38);
  --action: #f4cf72;      /* the armed choice */
  --identity: #a9d18f;    /* a GO call, a built thing */
  --attention: #f0b4a0;   /* clashes and warnings */
  --machine: #8fb8d8;     /* what the machine says; links */
  --on-action: #17231b;
  --display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue Condensed", system-ui, sans-serif;
  --capture: Georgia, "Times New Roman", serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ground); color: var(--ink); font: .98rem/1.55 var(--body); -webkit-font-smoothing: antialiased;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0 4rem;
}
.sheet { max-width: 78rem; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); }
.sheet > * { min-width: 0; }
a { color: var(--machine); }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--identity); outline-offset: 2px; }

.mono { font: 700 .66rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
h2 { font: 600 1.7rem/1.05 var(--display); letter-spacing: .04em; text-transform: uppercase; margin: 0; text-wrap: balance; }
.lede { color: var(--ink-muted); max-width: 42rem; }
.minor { color: var(--ink-muted); font-size: .88rem; }

.masthead { text-align: center; padding-block: clamp(1.6rem, 5vw, 2.8rem) 1.1rem; border-bottom: 1px solid var(--line-strong); }
.masthead .agency { letter-spacing: .3em; margin-bottom: .8rem; font-size: .62rem; }
.masthead h1 { font: 600 clamp(2rem, 7vw, 3.1rem)/.95 var(--display); letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; margin: 0; }
.masthead .sub { font: italic 1.04rem/1.45 var(--capture); color: var(--ink-muted); margin: .8rem auto 0; max-width: 34rem; }
.marginalia { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding-block: .6rem; border-bottom: 1px solid var(--line); }
.marginalia a { color: var(--ink-muted); }

.view { display: grid; gap: 1.2rem; padding-top: 1.8rem; min-width: 0; }
.view > * { min-width: 0; }
.view-head { display: grid; gap: .45rem; }

.pill { display: inline-block; font: 700 .6rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 999px; padding: .12rem .5rem; white-space: nowrap; }
.call-go { color: var(--identity); }
.call-maybe { color: var(--machine); }
.call-skip { color: var(--ink-muted); }
.warn { color: var(--attention); }

.card { background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--action); padding: clamp(1rem, 3vw, 1.6rem); display: grid; gap: .8rem; }
.card > * { min-width: 0; }
.card h3 { font: 600 clamp(1.7rem, 4.6vw, 2.5rem)/1 var(--display); letter-spacing: .025em; text-transform: uppercase; margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
.speakers { color: var(--ink-muted); font-size: .92rem; overflow-wrap: anywhere; }
.progress { display: flex; justify-content: space-between; gap: .3rem 1rem; flex-wrap: wrap; align-items: baseline; }
.meter { height: 3px; background: var(--line); }
.meter i { display: block; height: 100%; background: var(--action); }
.receipt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; align-items: baseline; border-top: 1px solid var(--line); padding: .45rem 0; font-size: .9rem; }
.receipt span { overflow-wrap: anywhere; }