/* Generated by ops/build-content.js. The token block is copied out of
   src/style.css so the handbook and the city agree on every colour. */
:root {
  /* ---- Palette ----------------------------------------------------------
     Same eleven hues the brand kit ships. Two moved, both for contrast, both
     by an amount nobody will see side by side:
       Smoke  #8a8f86 -> #8d9289   4.36:1 -> 4.54:1 on Tarmac (body copy in a
                                   panel was the whole app's most common text
                                   and it sat under AA)
       Red    #d9534f -> #eb6561   3.64:1 -> 4.51:1 on Tarmac
     The old red is kept as Red-deep for bars and fills, where it is not text
     and the deeper tone reads better. */
  --ms-lime: #b4df87;
  --ms-lime-deep: #526d3e;
  --ms-lime-light: #d3f0b4;
  --ms-ink: #182316;
  --ms-asphalt: #1c201c;
  --ms-tarmac: #262b26;
  --ms-slate: #2e342d; /* one step above Tarmac, for a card inside a card */
  --ms-concrete: #5b605a;
  --ms-smoke: #8d9289;
  --ms-bone: #e7ede1;
  --ms-gold: #e9c46a;
  --ms-red: #eb6561;
  --ms-red-deep: #d9534f;
  --ms-blue: #6fa8dc;

  /* ---- Hairlines and raises --------------------------------------------
     Tints of Bone rather than Smoke: same neutral, one less hue in the file.
     line-strong clears 3:1 against Tarmac, which is what WCAG 1.4.11 asks of
     a border that identifies a control. line stays quiet: it draws cards,
     and a card is not a control. */
  --ms-line: rgba(231, 237, 225, 0.15);
  --ms-line-strong: rgba(231, 237, 225, 0.38);
  --ms-raise: rgba(231, 237, 225, 0.06);
  --ms-raise-2: rgba(231, 237, 225, 0.1);
  --ms-raise-3: rgba(231, 237, 225, 0.16);
  --ms-lime-tint: rgba(180, 223, 135, 0.12);
  --ms-lime-line: var(--ms-lime-line);
  --ms-red-tint: rgba(235, 101, 97, 0.14);
  --ms-red-line: rgba(235, 101, 97, 0.55);
  --ms-gold-tint: rgba(233, 196, 106, 0.14);
  --ms-gold-line: rgba(233, 196, 106, 0.5);
  --ms-blue-tint: rgba(111, 168, 220, 0.14);
  --ms-scrim: rgba(18, 21, 18, 0.78);

  /* ---- Type -------------------------------------------------------------
     Twelve steps, down from the twenty-eight sizes the sheet used to carry.
     Poppins still never renders below 15px; anything smaller is Plex. */
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 19px;
  --text-2xl: 22px;
  --text-3xl: 26px;
  --text-4xl: 31px;
  --text-5xl: 38px;
  --text-6xl: 46px;

  /* ---- Space ------------------------------------------------------------
     A 4px base. The sheet used to hold eighteen different gap values and
     paddings like 9px 13px; these are the only nine steps now. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;

  /* ---- Geometry ---------------------------------------------------------- */
  --radius-control: 12px;
  --radius-card: 18px;
  --radius-pill: 999px;
  --rail-width: 240px;
  --rail-width-compact: 208px;

  /* ---- Motion -----------------------------------------------------------
     Motion answers an action; it never decorates. Four durations, two
     curves, and every one of them is switched off by the reduced-motion
     block at the bottom of this sheet. */
  --dur-instant: 90ms;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;
  --ease-out: cubic-bezier(0.22, 0.8, 0.25, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  /* The city screen used to appear and vanish in whatever time the request
     happened to take, which on a warm cache is a flash of a cat and a bar
     nobody can read. It holds for at least this long, and the sweep below is
     timed to complete exactly one pass in that window. */
  --dur-loader-floor: 2000ms;

  /* ---- Layers -----------------------------------------------------------
     Was 1, 2, 4, 5, 6, 10 with the gaps carrying meaning nobody wrote down. */
  --layer-base: 1;
  --layer-raised: 10;
  --layer-rail: 20;
  --layer-tabbar: 30;
  --layer-sheet: 50;
  --layer-toast: 60;

  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ms-bone);
  background-color: var(--ms-asphalt);
  background-image: url("/brand/pattern/alley-tile.svg");
  background-size: 200px 200px;
  background-attachment: fixed;
  font-synthesis: none;
  color-scheme: dark;
  accent-color: var(--ms-lime);
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ms-asphalt);
  color: var(--ms-bone);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
}
a { color: var(--ms-lime); }
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--ms-line);
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-2xl);
  color: var(--ms-bone);
  text-decoration: none;
}
.cta {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  background: var(--ms-lime);
  color: var(--ms-ink);
  font-weight: 600;
  text-decoration: none;
}
.sections {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--ms-line);
  font-size: var(--text-sm);
}
.sections a[aria-current] { color: var(--ms-bone); font-weight: 600; }
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5) 0;
  color: var(--ms-smoke);
  font-size: var(--text-sm);
}
.crumbs .sep { color: var(--ms-concrete); }
main, footer { max-width: 46rem; margin: 0 auto; padding: var(--space-5); }
footer {
  margin-top: var(--space-8);
  border-top: 1px solid var(--ms-line);
  color: var(--ms-smoke);
  font-size: var(--text-sm);
}
h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: 1.2;
  margin: var(--space-4) 0 var(--space-3);
}
h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin: var(--space-7) 0 var(--space-2);
}
table { width: 100%; border-collapse: collapse; margin: var(--space-5) 0; }
th, td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--ms-line);
  vertical-align: top;
}
.facts th { width: 40%; color: var(--ms-smoke); font-weight: 400; }
.listing { font-size: var(--text-sm); }
.listing thead th { color: var(--ms-smoke); font-weight: 600; }
.listing tbody tr:nth-child(odd) { background: var(--ms-raise); }
@media (max-width: 34rem) {
  .listing { display: block; overflow-x: auto; }
  .facts th { width: 50%; }
}