/**
 * Platform Design Language
 * ========================
 *
 * The canonical visual identity for all platform-level pages
 * (landing page, admin console, auth gate, platform UI) and as defaults
 * for instantiated networks until overridden by network-specific CSS.
 *
 * Built on top of NSL CSS tokens where appropriate. Network-specific
 * custom frontends define their own themes;
 * this file defines the *platform* theme.
 *
 * Usage:
 *   <link rel="stylesheet" href="/ui/styles/platform.css">
 *   or
 *   @import url('/ui/styles/platform.css');
 *   or
 *   <style>@import '/ui/styles/platform.css';</style>
 *
 * Naming: --t- prefix for all design tokens.
 */

/* ── Font: Albert Sans (brand/display) ────────────────────────── */
/* Geometric sans-serif by Andreas Rasmussen (a.Foundry).           */
/* Variable font: one file covers weights 100-900.                  */
/* SIL Open Font License. Downloaded from Google Fonts.             */

@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/nslcss/fonts/AlbertSans-Latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/nslcss/fonts/AlbertSans-LatinExt.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Design Tokens ────────────────────────────────────────────── */

:root {
  /* ---- Brand colors ---- */
  --t-blue:           rgb(26, 95, 156);    /* AA on its own tint (was 33,113,181 at 4.4:1) */
  --t-blue-dark:      rgb(8, 81, 156);
  --t-blue-deep:      rgb(8, 48, 107);
  --t-green:          rgb(26, 115, 51);    /* AA on its tint as ink (was 40,167,69 at 2.9:1) */
  --t-green-dark:     rgb(22, 100, 44);    /* AA on the green tint as ink (was 30,130,54 at 4.49:1) */
  --t-yellow:         rgb(224, 175, 28);
  --t-yellow-dark:    rgb(125, 96, 16);    /* AA on its tint as ink (was 180,140,22 at 2.9:1) */

  /* ---- Semantic colors ---- */
  --t-error:          rgb(220, 53, 69);
  --t-warning:        rgb(255, 193, 7);
  --t-success:        rgb(40, 167, 69);

  /* ---- Tints (for backgrounds, badges, hover states) ---- */
  --t-blue-tint:      rgba(33, 113, 181, 0.06);
  --t-blue-tint-2:    rgba(33, 113, 181, 0.12);
  --t-green-tint:     rgba(40, 167, 69, 0.08);
  --t-yellow-tint:    rgba(224, 175, 28, 0.10);
  --t-error-tint:     rgba(220, 53, 69, 0.08);
  /* --t-blue-tint composited on --t-bg. For a control that OWNS a background
     rather than borrowing the page's: a translucent hover on an opaque button
     lets whatever is behind the page show through, which over the hero's
     animated canvas reads as the button turning transparent under the cursor. */
  --t-blue-tint-solid: #f2f6fb;

  /* ---- Neutrals ---- */
  --t-white:          #ffffff;
  --t-bg:             #ffffff;
  --t-bg-alt:         #f8f9fa;
  --t-text:           #1a2a33;
  --t-text-2:         #4a5d6a;
  --t-text-3:         #5f7080;   /* the muted ink clears AA on white and the off-white (was #8a9ba6 at 2.7:1) */
  --t-border:         #e2e6ea;
  --t-border-strong:  #cdd3d8;
  --t-divider:        #eef0f2;

  /* ---- Dark sections ---- */
  /* The palette a band uses when it inverts, mirroring the light neutrals above
     (surface, inset surface, border, three text weights, link). It exists so the
     SECOND dark section on a page cannot invent a second dark: before these, the
     landing page's one dark band was six hardcoded hexes in ui/sitekit/site.css and
     nothing else could reuse them. Applied via .t-section-dark below. */
  --t-dark-bg:        #1a2530;
  --t-dark-bg-deep:   #141e27;
  --t-dark-border:    #2a3a48;
  --t-dark-text:      #e4e8eb;
  --t-dark-text-2:    #9db2c2;
  --t-dark-text-3:    #8a9baa;
  --t-dark-link:      #cfe0ee;

  /* ---- The night register (ruled 2026-08-15, LDG 15b6694e) ---- */
  /* Property 8's watching palette — the Observatory's sky — promoted to a
     first-class platform home. Distinct from the dark SECTIONS above on
     purpose: --t-dark-* is chrome one step lighter than the sky ("one dark
     vocabulary, two levels"); --t-night-* IS the sky. ui/viz/canvas.js's
     NIGHT constant must equal these byte-for-byte — test_navsync.py's
     night-token gate is the drift-catcher, chosen over runtime derivation
     because a canvas host page may not load this sheet. */
  --t-night-field:    #0b0f1a;
  --t-night-ink:      #e6ecf7;
  --t-night-muted:    #93a1bd;

  /* ---- Shadows ---- */
  --t-shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.05);
  --t-shadow:         0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --t-shadow-md:      0 4px 12px rgba(0, 0, 0, 0.08);
  --t-shadow-lg:      0 8px 24px rgba(0, 0, 0, 0.10);

  /* ---- Typography ---- */
  --t-font:           'Albert Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-font-body:      system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-font-mono:      'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --t-text-xs:        11px;
  --t-text-sm:        13px;
  --t-text-base:      15px;
  --t-text-md:        17px;
  --t-text-lg:        20px;
  --t-text-xl:        28px;
  --t-text-2xl:       36px;
  --t-text-3xl:       48px;

  --t-leading-tight:  1.2;
  --t-leading:        1.5;
  --t-leading-loose:  1.7;

  --t-weight-normal:  400;
  --t-weight-medium:  500;
  --t-weight-semi:    600;
  --t-weight-bold:    700;

  /* ---- Spacing ---- */
  --t-space-1:        4px;
  --t-space-2:        8px;
  --t-space-3:        12px;
  --t-space-4:        16px;
  --t-space-5:        20px;
  --t-space-6:        24px;
  --t-space-8:        32px;
  --t-space-10:       40px;
  --t-space-12:       48px;
  --t-space-16:       64px;
  --t-space-20:       80px;
  --t-space-24:       96px;

  /* ---- Radius ---- */
  --t-radius-sm:      3px;
  --t-radius:         6px;
  --t-radius-lg:      10px;
  --t-radius-xl:      16px;
  --t-radius-full:    9999px;

  /* ---- Sizing ---- */
  --t-max-width:      1120px;
  --t-max-width-sm:   640px;
  --t-max-width-lg:   1280px;
  --t-nav-height:     56px;

  /* ---- Motion ---- */
  --t-transition:     0.15s ease;
  --t-transition-slow: 0.3s ease;

  /* ---- AuthGate integration ---- */
  --ag-primary:       var(--t-blue);
  --ag-surface:       var(--t-white);
  --ag-font:          var(--t-font-body);
}

/* ── Base Styles ──────────────────────────────────────────────── */

.t-page {
  font-family: var(--t-font-body);
  color: var(--t-text);
  background: var(--t-bg);
  line-height: var(--t-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* The `hidden` attribute is made authoritative here, because the UA default
   `[hidden] { display: none }` loses to ANY author rule — a `.network-card`
   with `display: flex` kept painting cards the list filter had hidden, three
   times over (LDG f940e287). An important declaration inside a layer outranks
   unlayered rules, which is how this reaches the admin console through
   `ui/styles/site-shell.layer.css`'s `layer(tp-site)` import. Twin, for the
   pages that load the kit instead: `ui/sitekit/sitekit.css`. */
[hidden] { display: none !important; }

/* ── Typography ───────────────────────────────────────────────── */

.t-brand {
  font-family: var(--t-font);
  font-weight: var(--t-weight-bold);
  letter-spacing: -0.02em;
  color: var(--t-blue);
}

.t-body        { font-size: var(--t-text-base); color: var(--t-text-2); }
.t-mono        { font-family: var(--t-font-mono); font-size: var(--t-text-sm); }

.t-label {
  font-size: var(--t-text-xs);
  font-weight: var(--t-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--t-text-3);
}

/* ── Layout ───────────────────────────────────────────────────── */

.t-container {
  max-width: var(--t-max-width);
  margin: 0 auto;
  padding: 0 var(--t-space-6);
}

.t-section {
  padding: var(--t-space-20) 0;
}

.t-section-alt {
  background: var(--t-bg-alt);
}

/* An inverted band. Cards inside sit on the deeper surface, the way the code
   block sits deeper than the section that carries it — one dark vocabulary,
   two levels. Anything with a color of its own (a landing-page icon, a brand
   accent) overrides in its own stylesheet using the same --t-dark-* tokens. */
.t-section-dark {
  background: var(--t-dark-bg);
  color: var(--t-dark-text);
}

.t-section-dark h1,
.t-section-dark h2,
.t-section-dark h3 { color: var(--t-dark-text); }

.t-section-dark p { color: var(--t-dark-text-2); }

.t-section-dark a { color: var(--t-dark-link); }
.t-section-dark a:hover { color: var(--t-white); }

.t-section-dark .t-card {
  background: var(--t-dark-bg-deep);
  border-color: var(--t-dark-border);
}

.t-section-dark .t-card:hover {
  border-color: var(--t-dark-text-3);
  box-shadow: none;
}

/* ── Buttons ──────────────────────────────────────────────────── */

.t-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--t-space-2);
  padding: 9px 20px;
  border: 1px solid transparent;
  border-radius: var(--t-radius);
  font-family: var(--t-font-body);
  font-size: var(--t-text-sm);
  font-weight: var(--t-weight-semi);
  line-height: 1.4;
  cursor: pointer;
  transition: background var(--t-transition), border-color var(--t-transition), box-shadow var(--t-transition);
  text-decoration: none;
  white-space: nowrap;
}

.t-btn:hover { text-decoration: none; }
.t-btn:focus-visible { outline: 2px solid var(--t-blue); outline-offset: 2px; }
.t-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.t-btn-primary {
  background: var(--t-blue);
  color: var(--t-white);
}
.t-btn-primary:hover { background: var(--t-blue-dark); }
.t-btn-primary:active { background: var(--t-blue-deep); }

.t-btn-secondary {
  background: var(--t-white);
  color: var(--t-blue);
  border-color: var(--t-border-strong);
}
.t-btn-secondary:hover { background: var(--t-blue-tint-solid); border-color: var(--t-blue); }

.t-btn-green {
  background: var(--t-green);
  color: var(--t-white);
}
.t-btn-green:hover { background: var(--t-green-dark); }

.t-btn-lg {
  padding: 12px 28px;
  font-size: var(--t-text-base);
  border-radius: var(--t-radius-lg);
}

.t-btn-sm {
  padding: 5px 12px;
  font-size: var(--t-text-xs);
}

.t-btn-ghost {
  background: transparent;
  color: var(--t-text-2);
  border-color: transparent;
}
.t-btn-ghost:hover { background: var(--t-blue-tint); color: var(--t-blue); }

/* ── Cards ────────────────────────────────────────────────────── */

.t-card {
  background: var(--t-white);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-lg);
  transition: box-shadow var(--t-transition), border-color var(--t-transition);
}

.t-card:hover {
  box-shadow: var(--t-shadow);
  border-color: var(--t-border-strong);
}

.t-card-body {
  padding: var(--t-space-5);
}

/* ── Navigation (top bar) ─────────────────────────────────────── */

.t-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--t-nav-height);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--t-divider);
  z-index: 1000;
}

.t-nav-inner {
  max-width: var(--t-max-width);
  margin: 0 auto;
  padding: 0 var(--t-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.t-nav-brand {
  font-family: var(--t-font);
  font-size: 20px;
  font-weight: 800;
  color: var(--t-blue);
  letter-spacing: -0.03em;
  text-decoration: none;
  text-transform: lowercase;
}
.t-nav-brand:hover { text-decoration: none; }

.t-nav-links {
  display: flex;
  align-items: center;
  gap: var(--t-space-6);
}

.t-nav-link {
  font-size: var(--t-text-sm);
  font-weight: var(--t-weight-medium);
  color: var(--t-text-2);
  text-decoration: none;
  transition: color var(--t-transition);
}
.t-nav-link:hover { color: var(--t-blue); text-decoration: none; }
.t-nav-link[aria-current="page"] { color: var(--t-blue); }

/* ── The locator (Studio S2, LDG 151e4948) ──────────────────────────────
   Brand + current maker-loop station + one derived forward step, inside the
   existing 56px bar — zero new elements beyond these spans, no JS. The
   station word is INK, not blue: the station you are ON is a statement of
   fact, and blue is for actions (design.md's own rule). Lowercase carries a
   dated divergence note in the partial. */
.t-nav-locator {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.t-nav-station {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--t-text);
  white-space: nowrap;
}
/* The 1px rule separating two levels of identity — a ::before, so the
   separator exists only when a station does. --t-border, not --t-divider:
   at 1px × 16px against white the divider tone is functionally invisible. */
.t-nav-station::before {
  content: "";
  width: 1px;
  height: 16px;
  background: var(--t-border);
  margin-inline-end: 10px;
}
.t-nav-next,
.t-nav-absent {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  white-space: nowrap;
}
.t-nav-next { color: var(--t-blue); text-decoration: none; }
.t-nav-next:hover { color: var(--t-blue-dark); text-decoration: none; }
/* An absent station occupies the step slot at the same metrics as a real
   step — the parallel is the mechanism; muted-and-arrowless carries the
   meaning. Non-interactive by construction (a span, never a dead link). */
.t-nav-absent { color: var(--t-text-3); cursor: default; }
/* A forward step to a night station previews the destination's light: the
   .t-badge idiom on the night ground (property 8 — the palette shift IS the
   information; ~20px of night inside the white bar, never inverting it). */
.t-nav-next-night {
  background: var(--t-night-field);
  color: var(--t-night-ink);
  padding: 2px 10px;
  border-radius: 9999px;
}
.t-nav-next-night:hover { color: var(--t-night-ink); opacity: 0.9; }
/* The mobile menu's location line — a statement, not a destination, so it is
   deliberately not a role=menuitem (and the MOBILE_ITEMS gates stay exact). */
.nav-mobile-station {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--t-text-2);
  padding: 10px 16px 6px;
}

/* Skip link — first focusable element on every page carrying the shared nav
   partial; lives here (not ui/sitekit/site.css) because the editor loads only
   this sheet. Off-screen until keyboard focus (WCAG 2.4.1). */
.t-skip-link {
  position: absolute;
  left: var(--t-space-3, 12px);
  top: -3rem;
  z-index: 2000;
  padding: var(--t-space-2, 8px) var(--t-space-4, 16px);
  background: var(--t-blue);
  color: #fff;
  border-radius: var(--t-radius, 6px);
  text-decoration: none;
  transition: top 0.15s ease;
}
.t-skip-link:focus {
  top: var(--t-space-3, 12px);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* About dropdown — opens on hover AND :focus-within, so it works for mouse,
   keyboard, and (via the always-listed mobile menu) touch, with no JS. The
   toggle stays a real link to /about: tapping it navigates, which is the
   correct degradation everywhere the panel can't open. */
.nav-dropdown-wrapper {
  position: relative;
  display: inline-block;
}
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  padding: var(--t-space-2, 8px) 0;
  background: var(--t-white);
  border: 1px solid var(--t-divider);
  border-radius: var(--t-radius);
  box-shadow: var(--t-shadow-md);
  flex-direction: column;
  z-index: 1000;
}
.nav-dropdown-wrapper:hover .nav-dropdown,
.nav-dropdown-wrapper:focus-within .nav-dropdown {
  display: flex;
}
.nav-dropdown a {
  display: block;
  padding: var(--t-space-2, 8px) var(--t-space-4, 16px);
  font-size: var(--t-text-sm);
  color: var(--t-text-2);
  white-space: nowrap;
}
.nav-dropdown a:hover {
  background: var(--t-blue-tint);
  color: var(--t-blue);
  text-decoration: none;
}
.nav-caret {
  font-size: 0.7em;
  opacity: 0.7;
}

/* ── Forms ────────────────────────────────────────────────────── */

.t-input {
  display: block;
  width: 100%;
  padding: 9px 12px;
  font-family: var(--t-font-body);
  font-size: var(--t-text-base);
  color: var(--t-text);
  background: var(--t-white);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius);
  transition: border-color var(--t-transition), box-shadow var(--t-transition);
}

.t-input:focus {
  outline: none;
  border-color: rgba(33, 113, 181, 0.5);
  box-shadow: 0 0 0 3px rgba(33, 113, 181, 0.08);
}

.t-textarea {
  display: block;
  width: 100%;
  padding: 12px;
  font-family: var(--t-font-mono);
  font-size: var(--t-text-sm);
  color: var(--t-text);
  background: var(--t-white);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius);
  resize: vertical;
  line-height: 1.5;
  tab-size: 2;
  transition: border-color var(--t-transition), box-shadow var(--t-transition);
}

.t-textarea:focus {
  outline: none;
  border-color: rgba(33, 113, 181, 0.5);
  box-shadow: 0 0 0 3px rgba(33, 113, 181, 0.08);
}

/* ── Footer ───────────────────────────────────────────────────── */
/* Detail styles live here (not ui/sitekit/site.css) because the footer partial
   is shared with the editor, which loads only this sheet. */

.t-footer {
  border-top: 1px solid var(--t-divider);
  padding: var(--t-space-8) 0;
  background: var(--t-bg-alt);
}

.footer-inner {
  max-width: var(--t-max-width);
  margin: 0 auto;
  padding: 0 var(--t-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-brand {
  font-family: var(--t-font);
  font-weight: 800;
  text-transform: lowercase;
  font-size: 15px;
  letter-spacing: -0.03em;
  color: var(--t-blue);
}

.footer-links {
  display: flex;
  gap: 20px;
}

.footer-links a {
  font-size: var(--t-text-sm);
  color: var(--t-text-3);
}

.footer-links a:hover {
  color: var(--t-blue);
  text-decoration: none;
}

.footer-sites {
  font-size: var(--t-text-xs);
  color: var(--t-text-3);
  width: 100%;
  text-align: center;
  margin-top: 8px;
}

.footer-rights {
  font-size: var(--t-text-xs);
  color: var(--t-text-3);
  width: 100%;
  text-align: center;
}

@media (max-width: 480px) {
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-links { justify-content: center; flex-wrap: wrap; gap: 12px; }
}

/* ── Responsive ───────────────────────────────────────────────── */

@media (max-width: 768px) {
  .t-section { padding: var(--t-space-12) 0; }
  .t-container { padding: 0 var(--t-space-4); }
}

@media (max-width: 480px) {
  .t-section { padding: var(--t-space-10) 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── Search Bar ────────────────────────────────────────────────── */
.t-search {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 320px;
}

.t-search-input {
  width: 100%;
  padding: 7px 12px 7px 32px;
  border: 1px solid var(--t-border, #d0d7de);
  border-radius: 6px;
  font-size: 14px;
  background: var(--t-bg, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23636c76' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E") no-repeat 10px center;
  outline: none;
  transition: border-color 0.15s;
  color: var(--t-text, #1f2328);
}

.t-search-input:focus {
  border-color: var(--t-accent, #0969da);
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.12);
}

.t-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 400px;
  overflow-y: auto;
  background: var(--t-bg, #fff);
  border: 1px solid var(--t-border, #d0d7de);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 1000;
}

.t-search-group {
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--t-muted, #636c76);
  border-top: 1px solid var(--t-border-light, #eee);
}

.t-search-group:first-child {
  border-top: none;
}

.t-search-item {
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.1s;
}

.t-search-item:hover {
  background: var(--t-hover, #f6f8fa);
}

.t-search-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--t-text, #1f2328);
}

.t-search-item-body {
  font-size: 12px;
  color: var(--t-muted, #636c76);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.t-search-empty,
.t-search-loading {
  padding: 16px 12px;
  font-size: 13px;
  color: var(--t-muted, #636c76);
  text-align: center;
}

/* A dark section's inks are the dark tokens. The body's light inks — text-2, text-3, the
   brand blue — fall below AA on --t-dark-bg (measured 2.3:1, 3.0:1, 2.3:1 on the com face,
   2026-09-05); the selectors are doubled so they outrank a header's own paragraph rule. */
.t-section.t-section-dark p, .t-section.t-section-dark li { color: var(--t-dark-text); }
.t-section.t-section-dark a { color: var(--t-dark-link); }
.t-section.t-section-dark .leaf-count { color: #b7c3cc; }
/* A leaf card is a light island inside the dark section: its inks are the body's again. */
.t-section.t-section-dark .leaf-card p, .t-section.t-section-dark .leaf-card li { color: var(--t-text-2); }
.t-section.t-section-dark .leaf-card a { color: var(--t-blue); }