/* notis — the public skin.
 *
 * A placeholder that is not ashamed of itself. Phase six replaces this file with
 * the real design; everything the templates need is a token here, so that is a
 * file swap and not a rewrite.
 *
 * Direction, per the brief: typography carries it, one accent used to mean
 * something rather than to decorate, dark and light both first class, and a
 * layout that survives a forty-word item and a ninety-row table.
 */

:root {
  /* The bridge onto the Botnest design system. This file names no colour and no
     face of its own; every one of these is a design-system token, so a change
     there reaches the publication without anyone editing this file.

     All sixteen are mapped on purpose. An undeclared custom property falls back
     to its initial value rather than erroring, so a partial map does not break
     loudly: it quietly drains the colour out of whatever it missed. */
  --ink: var(--bn-text);
  --ink-soft: var(--bn-text-2);
  --ink-faint: var(--bn-text-3);
  --paper: var(--bn-bg);
  --paper-2: var(--bn-surface);
  --rule: var(--bn-border);

  /* The accent means one thing: this is new, or this changed. The design system
     reserves green for exactly that, and gold for needs-attention, which is what
     a stale tracker and a correction are. */
  --accent: var(--bn-accent-green);
  --accent-soft: var(--bn-surface-2);
  --warn: var(--bn-accent-gold);
  --warn-soft: var(--bn-surface-2);

  /* A serif for everything a reader reads, a monospace for everything the
     machine asserts, and the sans only in the chrome. That division is the
     publication's core typographic idea rather than decoration. */
  --serif: var(--bn-font-reading);
  --sans: var(--bn-font-ui);
  --mono: var(--bn-font-mono);

  --measure: 34rem;
  --wide: 60rem;
  --step: 0.75rem;

  /* The beats, each a hue from the categorical ramp so they follow the theme.
     Two of the design's five categories resolved to the same hex as a reserved
     accent -- pricing to the green, research to the gold in dark mode -- so the
     beats take hues that collide with neither, in either theme. The ramp yields
     four: chart-1 is the accent green, chart-4 the accent gold in dark mode,
     chart-7 the pill's own ink in both themes, chart-8 the narrowed chip. So
     the fifth beat reads a pair of the section's own, declared per theme in
     notis-theme.css as --beat-policy-hue. */
  --beat-models: var(--bn-chart-2);
  --beat-tooling: var(--bn-chart-3);
  --beat-research: var(--bn-chart-5);
  --beat-compute: var(--bn-chart-6);
  --beat-policy: var(--beat-policy-hue);
}

/* The design system is built for applications, so its `h1, h2, h3` shorthand sets
   the UI face. This publication's core typographic idea is the other way round: a
   serif for everything a reader reads, a monospace for everything the machine
   asserts, and the sans only in the chrome. Headlines are reading, so they are
   reset here. The shorthand is what overrode us, so the shorthand is what answers. */
h1, h2, h3, h4,
.bn-h1, .bn-h2, .bn-h3, .bn-h4, .bn-display {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.018em;
}
/* The two places the sans is correct, both of them chrome rather than reading. */
h2.section { font-family: var(--sans); }
.nav-in, .kicker, .stamp, .flag, .states li, th { font-family: var(--sans); }
.stamp, td.num, .dk-mono { font-family: var(--mono); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--serif);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 16px; }
a { color: inherit; text-decoration-color: var(--ink-faint); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: var(--paper-2); padding: 8px; z-index: 9; }

/* ---------------------------------------------------------------- masthead */
.masthead { border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.masthead-in { padding: 22px 16px 14px; }
.wordmark {
  font: 700 2rem/1 var(--serif); letter-spacing: -0.02em;
  text-decoration: none; display: inline-block;
}
.wordmark .dot { color: var(--accent); }
.wordmark .sec { font-weight: 400; color: var(--ink-soft); font-size: 0.9em; }
.creed { margin: 6px 0 0; color: var(--ink-soft); font-size: 0.9375rem; max-width: var(--measure); }
.nav { border-top: 1px solid var(--rule); }
.nav-in {
  display: flex; gap: 18px; overflow-x: auto; padding: 10px 16px;
  font: 500 0.8125rem/1 var(--sans); text-transform: uppercase; letter-spacing: 0.06em;
  scrollbar-width: none;
}
.nav-in::-webkit-scrollbar { display: none; }
.nav-in a { white-space: nowrap; text-decoration: none; color: var(--ink-soft); }
.nav-in a:hover { color: var(--ink); }
.nav-in .feed { color: var(--accent); margin-left: auto; }

/* --------------------------------------------------------------- structure */
main { padding: 28px 0 56px; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: 1.875rem; margin: 0 0 4px; }
h2.section {
  font: 600 0.75rem/1 var(--sans); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-faint); margin: 40px 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
p { max-width: var(--measure); }
.lede { font-size: 1.1875rem; color: var(--ink); max-width: var(--measure); }
.thin { color: var(--ink-soft); font-size: 0.875rem; }
.stamp {
  font: 500 0.75rem/1 var(--mono); color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.kicker {
  font: 600 0.6875rem/1 var(--sans); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent);
}
.empty {
  border: 1px dashed var(--rule); padding: 28px; border-radius: 4px;
  color: var(--ink-soft); max-width: var(--measure);
}

/* ------------------------------------------------------------------ opener */
.opener {
  font: 400 1.25rem/1.5 var(--serif); max-width: var(--measure);
  margin: 0 0 8px; padding-left: 14px; border-left: 3px solid var(--accent);
}

/* ------------------------------------- the five: cards, because you choose */
.five { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 0; padding: 0; }
@media (min-width: 46rem) { .five { grid-template-columns: 1fr 1fr; } }
.card {
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 4px;
  padding: 16px; display: flex; flex-direction: column; gap: 6px;
}
.card.lead { grid-column: 1 / -1; }
.card h3 { margin: 0; font-size: 1.25rem; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card p { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; max-width: none; }
.card .meta {
  margin-top: auto; padding-top: 8px; display: flex; gap: 10px; flex-wrap: wrap;
  align-items: baseline; border-top: 1px solid var(--rule);
}
.card img { width: 100%; height: auto; border-radius: 3px; display: block; }
.excited {
  border-color: var(--accent); background: var(--accent-soft);
}
.excited .kicker::after { content: " · worth it"; color: var(--accent); }

/* --------------------------------- the record: rows, because you're scanning */
.record { list-style: none; margin: 0; padding: 0; }
.record li {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--rule); align-items: baseline;
}
.record li > .stamp { padding-top: 3px; }
.record a { text-decoration: none; }
.record a:hover { text-decoration: underline; }
.record .also { color: var(--ink-faint); font-size: 0.8125rem; }
@media (max-width: 30rem) {
  .record li { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------------------------------------------------------------- one note */
.note { max-width: var(--measure); }
.note .body p { margin: 0 0 1em; }
.claims { margin: 32px 0 0; padding: 0; list-style: none; max-width: var(--wide); }
.claim {
  border: 1px solid var(--rule); border-radius: 4px; background: var(--paper-2);
  padding: 14px 16px; margin: 0 0 10px;
}
.claim .said { margin: 0; font-size: 1rem; }
.claim .rests {
  margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--rule);
  font-size: 0.875rem; color: var(--ink-soft);
}
.claim .rests q { color: var(--ink); }
.claim .narrowed { color: var(--warn); font: 500 0.75rem/1 var(--sans); text-transform: uppercase; letter-spacing: 0.08em; }
.figure { margin: 18px 0; }
.figure img { width: 100%; height: auto; border-radius: 4px; display: block; }
.figure figcaption { font-size: 0.8125rem; color: var(--ink-soft); margin-top: 6px; }
.credit { color: var(--ink-faint); font-size: 0.75rem; }

/* -------------------------------------------------------------- trackers */
.tracker-list { display: grid; gap: 10px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 46rem) { .tracker-list { grid-template-columns: 1fr 1fr; } }
.tracker-card {
  border: 1px solid var(--rule); border-radius: 4px; background: var(--paper-2); padding: 14px;
}
.tracker-card h3 { margin: 0 0 4px; font-size: 1.0625rem; }
.tracker-card h3 a { text-decoration: none; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font: 600 0.6875rem/1 var(--sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); }
td.num { font-family: var(--mono); white-space: nowrap; }
.table-scroll { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
.changelog { list-style: none; margin: 0; padding: 0; }
.changelog li { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.flag {
  display: inline-block; font: 600 0.6875rem/1 var(--sans); text-transform: uppercase;
  letter-spacing: 0.08em; padding: 4px 7px; border-radius: 3px;
  background: var(--accent-soft); color: var(--accent); border: 1px solid currentColor;
}
.flag.stale { background: var(--warn-soft); color: var(--warn); }
.flag.plain { background: transparent; color: var(--ink-faint); }

/* -------------------------------------------------------------- register */
.states { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0 0 18px; padding: 0; }
.states li { font: 500 0.8125rem/1 var(--sans); padding: 7px 10px; border: 1px solid var(--rule); border-radius: 3px; }
.states .n { font-family: var(--mono); color: var(--ink-faint); }
.topics { list-style: none; margin: 0; padding: 0; }
.topics li { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.topics .why { color: var(--ink-soft); font-size: 0.875rem; margin: 2px 0 0; }
.retired a { color: var(--ink-soft); }
.retired .name { text-decoration: line-through; text-decoration-color: var(--ink-faint); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 6rem 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }

/* ---------------------------------------------------------------- numbers */
/* One grid, one tile shape, one size for every figure, so the unflattering
   ones cannot be drawn smaller than the flattering ones. A withheld figure
   keeps its tile and its definition; only the number turns into a dash. */
.figures {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.figure-tile {
  border: 1px solid var(--rule); border-radius: 4px; background: var(--paper-2);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-height: 11rem;
}
.figure-tile .label {
  font: 600 0.6875rem/1.3 var(--sans); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.figure-tile .value { font: 700 2.25rem/1 var(--mono); letter-spacing: -0.02em; }
.figure-tile.withheld .value { color: var(--ink-faint); }
.figure-tile .definition { margin: 0; color: var(--ink-soft); font-size: 0.875rem; max-width: none; }
.figure-tile .stamp { margin-top: auto; padding-top: 6px; }
table.months th[scope="row"] { font: 400 0.875rem/1.4 var(--serif); text-transform: none; letter-spacing: 0; color: var(--ink); }
table.months th.num { font-family: var(--mono); text-align: right; }
table.months td.num { text-align: right; }

/* ----------------------------------------------------------------- charts */
.chart { width: 100%; height: auto; display: block; margin: 8px 0 4px; }
.chart-bar { fill: var(--accent); }
.chart-name, .chart-value, .chart-tick, .chart-guide-label {
  font-family: var(--sans); font-size: 11px; fill: var(--ink-soft);
}
.chart-value { fill: var(--ink); font-family: var(--mono); }
.chart-axis { stroke: var(--rule); stroke-width: 1; }
.chart-guide { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 3; }

/* ---------------------------------------------------------------- figures */
/* An evidence figure the publication drew (charts.evidence_figure, a claim's
   quote; charts.framed, a tracker's chart in the card's frame) is inlined, so
   these classes hand it the page's tokens: the surface it sits on, the reading
   face for the quote, the mono face for the stamp. The file itself carries no
   colour; opened on its own it falls back to currentColor on the browser's
   page. Tokens only, like everything in this sheet. */
.ev-frame { display: block; width: 100%; height: 100%; }
.ev-frame > svg { width: 100%; height: 100%; display: block; }
.dc-art > .ev-frame, .grid-card-open-art > .ev-frame, .grid-card-art > .ev-frame,
.editorial-lead-art > .ev-frame { position: absolute; inset: 0; }
.figure .ev-frame { aspect-ratio: 16 / 9; background: var(--paper-2); border-radius: 4px; overflow: hidden; }
.ev-surface { fill: var(--paper-2); }
.ev-quote, .ev-title { fill: var(--ink); font-family: var(--serif); }
.ev-meta { fill: var(--ink-faint); font-family: var(--mono); fill-opacity: 1; letter-spacing: .06em; }
.ev-quote { font-weight: 700; letter-spacing: -.02em; }
.ev-mark { fill: var(--beat, var(--accent)); font-family: var(--serif); font-weight: 700; opacity: .9; }
/* on a card the frame takes the section's hue, the way a card with no picture does */
.dc-art .ev-surface, .grid-card-open-art .ev-surface, .editorial-lead-art .ev-surface {
  fill: color-mix(in srgb, var(--beat, var(--bn-border-strong)) 22%, var(--bn-surface-2));
}
/* The credit in the frame's corner, wherever a picture appears: the licence's
   wording, rendered by the app from the row, never typed. */
.pic-credit {
  position: absolute; right: 8px; bottom: 6px; max-width: 82%;
  font: 500 10px/1.3 var(--mono); color: var(--ink-faint);
  background: var(--paper-2); padding: 3px 6px; border-radius: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ------------------------------------------------------------------- foot */
.foot { border-top: 1px solid var(--rule); background: var(--paper-2); padding: 28px 0 40px; }
.foot p { font-size: 0.875rem; color: var(--ink-soft); }
.foot strong { color: var(--ink); }

.pager { display: flex; justify-content: space-between; gap: 12px; margin: 36px 0 0; font-size: 0.9375rem; }

/* On a phone that header flows (site.css §13), so the banner can lead the page
   again; z-index lifts it over the fixed sky, which paints above in-flow blocks. */
  /* Anchored to the dynamic viewport, not to bottom: 0. On Chrome for Android
     the layout viewport at load reaches under the URL bar, so a bar pinned to
     bottom: 0 sits below the screen until the first scroll collapses the bar;
     100dvh is what the reader can see at every moment. The vh line is the
     fallback for a browser without dvh, where bottom: 0 was never wrong. */
  .tabbar {
    --tabbar-h: calc(53px + env(safe-area-inset-bottom));
    position: fixed; left: 0; right: 0; bottom: auto; z-index: 65;
    top: calc(100vh - var(--tabbar-h)); top: calc(100dvh - var(--tabbar-h));
    height: var(--tabbar-h); box-sizing: border-box;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 100%;
    background: var(--paper-2); border-top: 1px solid var(--rule);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a {
    min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 9px 4px 8px; font: 500 11px/1 var(--sans); color: var(--ink-faint); text-decoration: none;
  }
  .tabbar a[aria-current="page"] { color: var(--bn-action); }
  body:not(:has(.page)) { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}