/* PerilIntel — shared design tokens and components (Direction A, "Night operations").
   Loaded by every page. Page-specific CSS lives in its own file (book.css, admin.css,
   signin.css) and builds on these tokens; nothing here is page-specific.
   Fonts: IBM Plex Sans / Sans Condensed / Mono (Google Fonts link in each page),
   with the system fallbacks below. */

:root {
  --bg: #05080f;
  --bg-2: #070c17;
  --panel: rgba(11, 18, 33, .66);
  --panel-solid: #0b1221;
  --header: rgba(8, 13, 25, .9);
  --line: rgba(120, 165, 230, .14);
  --line-2: rgba(120, 165, 230, .28);

  --text: #e8eef9;
  --text-hi: #f3f7fe;
  --text-2: #b7c3d9;
  --dim: #95a3bd;
  --faint: #7d8aa3;

  --accent: #34e3e8;
  --accent-hi: #8ff4f6;
  --accent-ink: #03161a;

  --refer: #ff6b6b;
  --refer-ink: #1a0606;
  --review: #f0b429;
  --review-ink: #1a1304;
  --clear: #3fd6a4;
  --noteval: #95a3bd;

  --fire: #ff7a45;
  --fire-2: #ff9f6b;
  --flood: #4da3ff;
  --warning: #ffd166;
  --quake: #e879f9;

  --acct-1: #34e3e8;
  --acct-2: #8b9cff;
  --acct-3: #6ee7b7;
  --acct-4: #e9d8a6;
  --acct-5: #f0abfc;
  --acct-6: #fca5a5;
  --acct-7: #93c5fd;
  --acct-8: #fcd34d;

  --dot: rgba(132, 164, 214, .26);

  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --cond: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --r-control: 10px;
  --r-panel: 14px;
  --gutter: 24px;
  --shell-h: 60px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 14px/1.5 var(--sans);
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
code, kbd { font-family: var(--mono); }

.pi-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;
}

/* ---- motion -------------------------------------------------------------------- */
@keyframes pi-ping { 0% { transform: scale(.35); opacity: .95; } 100% { transform: scale(4.4); opacity: 0; } }
@keyframes pi-beat { 0%, 100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }
.pi-beat { animation: pi-beat 2.4s ease-in-out infinite; }
.pi-ping { transform-box: fill-box; transform-origin: center; animation: pi-ping 3.2s cubic-bezier(.2, .6, .3, 1) infinite; }

/* ---- shell (header, nav, chips, menus) — rendered by pi-shell.js ---------------- */
.pi-shell {
  position: sticky; top: 0; z-index: 1000;
  height: var(--shell-h); padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 20px;
  border-bottom: 1px solid var(--line);
  background: var(--header);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pi-logo { display: flex; align-items: center; gap: 10px; color: var(--text); flex-shrink: 0; min-height: 44px; }
.pi-logo:hover { color: var(--text-hi); }
.pi-logo svg { width: 28px; height: 28px; flex-shrink: 0; }
.pi-logo span { font: 600 19px/1 var(--cond); letter-spacing: .01em; }
.pi-sep { width: 1px; height: 24px; background: var(--line-2); flex-shrink: 0; }
.pi-acct {
  height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px;
  background: transparent; border: 1px solid var(--line); border-radius: 9px;
  color: var(--text); font: 500 14px/1 var(--sans); white-space: nowrap; max-width: min(440px, 36vw); min-width: 0;
}
.pi-acct > .pi-acct-label, .pi-acct > [data-slot] { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* one case on every page: the book page's own label (#acct) is upper-case, and pinned so */
.pi-acct .pi-acct-label, .pi-acct > [data-slot] { text-transform: uppercase; letter-spacing: .04em; }
/* acting: "VIEWING AS OWNER · " gives way long before the account's name does */
.pi-acct > .pi-acct-label:has(.pi-acct-prefix) { display: inline-flex; align-items: center; }
.pi-acct .pi-acct-prefix { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: clip; white-space: pre; }
.pi-acct .pi-acct-name { flex: 0 1 auto; min-width: 4ch; overflow: hidden; text-overflow: ellipsis; }
.pi-acct svg { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--dim); }
button.pi-acct:hover { border-color: var(--line-2); }
.pi-acct.switcher { background: rgba(52, 227, 232, .08); border-color: rgba(52, 227, 232, .35); }
.pi-acct.switcher svg:first-child { stroke: var(--accent); }
.pi-acct.acting { background: var(--review); border-color: var(--review); color: var(--review-ink); font: 600 12px/1 var(--mono); letter-spacing: .06em; }
.pi-acct.acting svg { stroke: var(--review-ink); }
.pi-acct .pi-exit {
  margin-left: 4px; height: 26px; padding: 0 8px; border-radius: 6px; border: 1px solid rgba(26, 19, 4, .35);
  background: rgba(26, 19, 4, .12); color: var(--review-ink); font: 600 11px/1 var(--mono); letter-spacing: .06em;
}
/* the book page's own #acct label, moved into the chip: the page owns its text and classes */
.pi-acct #acct { border: 0; padding: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; }
.pi-badge {
  height: 24px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 6px;
  border: 1px solid var(--line-2); font: 500 10.5px/1 var(--mono); letter-spacing: .1em; color: var(--dim); white-space: nowrap;
}
.pi-nav { display: flex; align-items: center; gap: 26px; margin-left: 8px; min-width: 0; }
.pi-nav a {
  position: relative; height: var(--shell-h); display: flex; align-items: center; gap: 8px; padding: 0 2px;
  font: 500 14px/1 var(--sans); color: var(--dim); border-bottom: 2px solid transparent; white-space: nowrap;
}
.pi-nav a:hover { color: var(--text); }
.pi-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
.pi-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--refer); color: var(--refer-ink); font: 600 11px/1 var(--mono);
}
.pi-count.off { background: transparent; border: 1px solid var(--line-2); color: var(--faint); font-size: 9.5px; letter-spacing: .08em; }
.pi-count.zero { background: transparent; border: 1px solid var(--line-2); color: var(--dim); }
.pi-grow { flex-grow: 1; }
.pi-feed {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1px solid rgba(52, 227, 232, .3); background: transparent; color: var(--accent);
  font: 500 11.5px/1 var(--mono); letter-spacing: .06em; white-space: nowrap;
}
.pi-feed .pi-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.pi-feed.partial { color: var(--review); border-color: rgba(240, 180, 41, .45); }
.pi-feed .pi-feed-short { display: none; }
/* A header that does not fit (measured by pi-shell.js fit()): first the feed pill
   gives up its words for its short form (.pi-tight), then the nav folds into the
   menu (.pi-compact) — nothing is ever drawn over anything else. */
.pi-shell.pi-tight .pi-feed .pi-feed-text { display: none; }
.pi-shell.pi-tight .pi-feed .pi-feed-short { display: inline; }
.pi-shell.pi-compact .pi-nav, .pi-shell.pi-compact .pi-sep, .pi-shell.pi-compact .pi-user { display: none; }
.pi-shell.pi-compact .pi-menubtn { display: inline-flex; }
@media (min-width: 761px) {
  /* the account's name is not squeezed while there is a nav to fold away first */
  .pi-shell:not(.pi-compact) .pi-acct, .pi-shell .pi-feed { flex-shrink: 0; }
  /* folded, the header has room: "VIEWING AS OWNER · <name>" is shown whole where it fits
     (review round 4: at 800-900 px it was cut to "… AS OWNER · …" beside 120 px of space) */
  .pi-shell.pi-compact .pi-acct.acting { max-width: min(560px, calc(100vw - 360px)); }
}
.pi-feed.unknown { color: var(--dim); border-color: var(--line-2); }
.pi-user {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(120, 165, 230, .1); border: 1px solid var(--line-2); color: var(--text); flex-shrink: 0;
}
.pi-user svg { width: 18px; height: 18px; }
.pi-menubtn {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 10px;
  background: transparent; border: 1px solid var(--line-2); color: var(--text); flex-shrink: 0;
}
.pi-pop {
  position: absolute; z-index: 1100; min-width: 240px; max-width: min(360px, calc(100vw - 32px));
  padding: 8px; background: var(--panel-solid); border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.pi-pop .pi-pop-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.pi-pop .pi-pop-head b { display: block; font: 600 14px/1.3 var(--sans); color: var(--text-hi); overflow-wrap: anywhere; }
.pi-pop .pi-pop-head span { font: 500 11px/1.4 var(--mono); letter-spacing: .08em; color: var(--dim); }
.pi-pop a, .pi-pop button.pi-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border-radius: 8px;
  color: var(--text); background: transparent; border: 0; text-align: left; font: 500 13.5px/1.3 var(--sans);
}
.pi-pop a:hover, .pi-pop button.pi-item:hover, .pi-pop button.pi-item:focus-visible { background: rgba(120, 165, 230, .08); }
.pi-pop button.pi-item[disabled] { color: var(--faint); cursor: not-allowed; }
.pi-pop .pi-item small { margin-left: auto; font: 400 11.5px/1 var(--mono); color: var(--faint); }
.pi-pop svg, .pi-sheet svg { width: 16px; height: 16px; flex-shrink: 0; }
.pi-pop .pi-sw { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pi-pop .pi-note { padding: 8px 10px; font: 400 12px/1.45 var(--sans); color: var(--dim); }
.pi-feedrow { display: grid; grid-template-columns: 9px 1fr auto; gap: 4px 10px; align-items: baseline; padding: 8px 10px; border-radius: 8px; }
.pi-feedrow + .pi-feedrow { border-top: 1px solid var(--line); }
.pi-feedrow .pi-dot { width: 7px; height: 7px; border-radius: 50%; align-self: center; }
.pi-feedrow b { font: 500 13px/1.3 var(--sans); color: var(--text); }
.pi-feedrow .st { font: 600 10.5px/1 var(--mono); letter-spacing: .08em; }
.pi-feedrow .meta { grid-column: 2 / 4; font: 400 11.5px/1.45 var(--mono); color: var(--faint); }
.st.live { color: var(--accent); } .st.stale { color: var(--review); } .st.down { color: var(--refer); } .st.unknown { color: var(--dim); }
.pi-sheet {
  position: fixed; inset: var(--shell-h) 0 0 0; z-index: 1050; padding: 12px 16px 24px; overflow-y: auto;
  background: var(--panel-solid); border-top: 1px solid var(--line);
}
.pi-sheet a, .pi-sheet button.pi-item {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border-radius: 10px;
  color: var(--text); font: 500 16px/1 var(--sans); background: transparent; border: 0; width: 100%; text-align: left;
}
.pi-sheet a[aria-current="page"] { background: rgba(52, 227, 232, .1); color: var(--accent); }
.pi-sheet hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
.pi-sheet > nav { display: flex; flex-direction: column; }
.pi-exitform { margin: 0; display: inline-flex; }
/* REVIEW ROUND 15: Sign out is a same-origin POST, because it ENDS the session. The form is
   laid out as if it were not there, so its button is the menu's own item, at the menu's own
   size (including the 44 px touch target below 760 px). */
.pi-postform { display: contents; margin: 0; }
.pi-postform > button { cursor: pointer; }
.pi-sheet-who { padding: 6px 12px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.pi-sheet-who b { display: block; font: 600 15px/1.3 var(--sans); color: var(--text-hi); overflow-wrap: anywhere; }
.pi-sheet-who span { font: 500 11px/1.4 var(--mono); letter-spacing: .08em; color: var(--dim); }
.pi-banner {
  margin: 16px var(--gutter); padding: 14px 16px; border-radius: 12px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid rgba(240, 180, 41, .45); background: rgba(240, 180, 41, .07); color: var(--text);
}
.pi-banner b { color: var(--review); }
.pi-banner.error { border-color: rgba(255, 107, 107, .45); background: rgba(255, 107, 107, .07); }
.pi-banner.error b { color: var(--refer); }
/* inside a page the page's own gutter already applies: the banner lines up with the content */
.pi-page > .pi-banner { margin-left: 0; margin-right: 0; }

/* ---- page layout ------------------------------------------------------------------ */
/* REVIEW ROUND 10: "Skip to content" — the FIRST tab stop on every page — scrolls <main> to
   block:"start", and <main> had no offset for the sticky header (book.css set one only for
   #alerts / #noteval-panel / #trends). A keyboard user's first action landed past the page's
   own h1 and its primary actions. Every <main>, and every .pi-page, now clears the header. */
main, .pi-page { scroll-margin-top: calc(var(--shell-h) + 16px); }
.pi-page { padding: 0 var(--gutter) 32px; }
.pi-head { min-height: 76px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 0; }
.pi-head h1 { margin: 0; font: 600 28px/1.05 var(--cond); letter-spacing: -.005em; color: var(--text-hi); }
.pi-head .pi-sub { margin-top: 6px; font: 400 12.5px/1.4 var(--mono); color: var(--faint); }
.pi-eyebrow { font: 500 11.5px/1 var(--mono); letter-spacing: .1em; color: var(--dim); text-transform: uppercase; }

/* ---- buttons ---------------------------------------------------------------------- */
.pi-btn {
  height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px;
  border-radius: 9px; border: 1px solid var(--line-2); background: rgba(120, 165, 230, .06); color: var(--text);
  font: 500 13.5px/1 var(--sans); white-space: nowrap; text-decoration: none;
}
.pi-btn:hover { border-color: rgba(120, 165, 230, .45); color: var(--text-hi); }
.pi-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.pi-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; box-shadow: 0 0 24px rgba(52, 227, 232, .22); }
.pi-btn.primary:hover { background: var(--accent-hi); color: var(--accent-ink); }
.pi-btn.ghost { background: transparent; border-color: transparent; color: var(--dim); }
.pi-btn.ghost:hover { color: var(--text); background: rgba(120, 165, 230, .06); }
.pi-btn.danger { background: rgba(255, 107, 107, .1); border-color: rgba(255, 107, 107, .5); color: var(--refer); }
.pi-btn.danger:hover { background: var(--refer); color: var(--refer-ink); }
.pi-btn[disabled], .pi-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* ---- panels, KPI tiles, chips ------------------------------------------------------ */
.pi-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 16px; min-width: 0; }
.pi-panel > h2, .pi-panel-title { margin: 0 0 12px; font: 600 16px/1.2 var(--cond); letter-spacing: .01em; color: var(--text-hi); }
.pi-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.pi-kpi {
  position: relative; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
.pi-kpi .pi-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pi-kpi .pi-kpi-label { font: 500 11.5px/1.2 var(--mono); letter-spacing: .1em; color: var(--dim); text-transform: uppercase; }
.pi-kpi .pi-kpi-num { font: 600 34px/1 var(--cond); letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.pi-kpi .pi-kpi-cap { font: 400 12.5px/1.35 var(--mono); color: var(--faint); }
.pi-kpi.refer { border-color: rgba(255, 107, 107, .45); } .pi-kpi.refer .pi-kpi-num { color: var(--refer); }
.pi-kpi.review { border-color: rgba(240, 180, 41, .4); } .pi-kpi.review .pi-kpi-num { color: var(--review); }
.pi-kpi.clear .pi-kpi-num { color: var(--clear); }
.pi-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; white-space: nowrap;
  border: 1px solid var(--line-2); background: transparent; color: var(--dim); font: 600 10.5px/1 var(--mono); letter-spacing: .08em;
}
.pi-chip.refer { background: var(--refer); border-color: var(--refer); color: var(--refer-ink); }
.pi-chip.review { background: var(--review); border-color: var(--review); color: var(--review-ink); }
.pi-chip.clear { background: rgba(63, 214, 164, .1); border-color: rgba(63, 214, 164, .45); color: var(--clear); }
.pi-chip.noteval { color: var(--noteval); border-style: dashed; }
.pi-chip.partial { color: var(--dim); border-color: var(--noteval); background: rgba(149, 163, 189, .08); }
.pi-chip.warn { color: var(--review); border-color: rgba(240, 180, 41, .45); background: rgba(240, 180, 41, .08); }
.pi-chip.accent { color: var(--accent); border-color: rgba(52, 227, 232, .35); background: rgba(52, 227, 232, .08); }
.pi-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--dim); font: 500 11px/1 var(--mono); letter-spacing: .08em; white-space: nowrap;
}
.pi-pill .pi-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pi-pill.live { color: var(--accent); border-color: rgba(52, 227, 232, .32); }
.pi-pill.warn { color: var(--review); border-color: rgba(240, 180, 41, .45); }
.pi-pill.bad { color: var(--refer); border-color: rgba(255, 107, 107, .45); }
.pi-sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }

/* ---- "—" with its reason ------------------------------------------------------------- */
.pi-dash { display: inline-flex; flex-direction: column; gap: 4px; }
.pi-dash .pi-dash-mark { font-variant-numeric: tabular-nums; }
.pi-dash .pi-dash-reason { font: 400 12px/1.35 var(--mono); color: var(--faint); }

/* ---- empty states and "not an all-clear" warnings -------------------------------------- */
.pi-empty {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 22px;
  border: 1px dashed var(--line-2); border-radius: var(--r-panel); background: rgba(11, 18, 33, .4);
}
.pi-empty .pi-empty-title { margin: 0; font: 600 18px/1.25 var(--cond); color: var(--text-hi); }
.pi-empty .pi-empty-body { margin: 0; max-width: 64ch; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.pi-empty .pi-empty-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.pi-warn {
  padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(240, 180, 41, .45); background: rgba(240, 180, 41, .07);
  color: var(--text-2); font-size: 13px; line-height: 1.5;
}
.pi-warn b, .pi-warn strong { color: var(--review); }
.pi-warn.bad { border-color: rgba(255, 107, 107, .45); background: rgba(255, 107, 107, .07); }
.pi-warn.bad b, .pi-warn.bad strong { color: var(--refer); }

/* ---- tables (stacked cards on small screens) ------------------------------------------- */
.pi-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pi-table th {
  text-align: left; padding: 10px 12px; font: 500 11px/1.2 var(--mono); letter-spacing: .1em; color: var(--dim);
  text-transform: uppercase; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.pi-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pi-table tr:last-child td { border-bottom: 0; }
.pi-table td.num, .pi-table th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pi-table tbody tr:hover td { background: rgba(120, 165, 230, .04); }

/* ---- forms ----------------------------------------------------------------------------- */
.pi-form { display: flex; flex-direction: column; gap: 14px; }
.pi-form label, .pi-label { display: flex; flex-direction: column; gap: 8px; font: 500 11.5px/1 var(--mono); letter-spacing: .12em; color: var(--dim); text-transform: uppercase; }
.pi-form input, .pi-form select, .pi-form textarea, .pi-input {
  height: 44px; padding: 0 12px; border-radius: var(--r-control); border: 1px solid var(--line-2);
  background: rgba(5, 8, 15, .8); color: var(--text); font: 400 15px/1.2 var(--sans); letter-spacing: normal; text-transform: none; width: 100%;
}
.pi-form textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.45; }
.pi-form input:focus, .pi-form select:focus, .pi-form textarea:focus, .pi-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(52, 227, 232, .16); }
/* placeholders at 4.5:1 or better (review round 7: Chrome's default grey measured 4.31:1 on the dark field) */
.pi-form input::placeholder, .pi-form textarea::placeholder, .pi-input::placeholder, .pi-page input::placeholder { color: var(--faint); opacity: 1; }
.pi-form .pi-help { font: 400 12.5px/1.45 var(--sans); color: var(--faint); letter-spacing: normal; text-transform: none; }
.pi-form .pi-err { font: 400 13px/1.45 var(--sans); color: var(--refer); letter-spacing: normal; text-transform: none; }

/* ---- tabs -------------------------------------------------------------------------------- */
.pi-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.pi-tabs button, .pi-tabs a {
  height: 44px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--dim); font: 500 14px/1 var(--sans); white-space: nowrap; display: inline-flex; align-items: center;
}
.pi-tabs [aria-selected="true"], .pi-tabs [aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }

/* ---- modal / toast ------------------------------------------------------------------------ */
.pi-backdrop { position: fixed; inset: 0; z-index: 2000; background: rgba(2, 4, 9, .72); display: flex; align-items: center; justify-content: center; padding: 16px; }
.pi-modal {
  width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: flex; flex-direction: column;
  background: var(--panel-solid); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.pi-modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 12px; }
.pi-modal-head h2 { margin: 0; font: 600 20px/1.2 var(--cond); color: var(--text-hi); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pi-modal-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; border: 0; background: transparent; color: var(--dim); }
.pi-modal-close:hover { color: var(--text); background: rgba(120, 165, 230, .08); }
.pi-modal-close svg { width: 18px; height: 18px; }
.pi-modal-body { padding: 4px 20px 16px; color: var(--text-2); line-height: 1.55; }
.pi-modal-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 12px 20px 18px; border-top: 1px solid var(--line); }
.pi-secret {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2);
  background: rgba(5, 8, 15, .8); font: 500 13px/1.4 var(--mono); color: var(--text-hi); overflow-wrap: anywhere; word-break: break-all;
}
.pi-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 2100; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.pi-toast {
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel-solid); color: var(--text);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5); font-size: 13.5px; line-height: 1.45;
}
.pi-toast.ok { border-color: rgba(63, 214, 164, .5); }
.pi-toast.warn { border-color: rgba(240, 180, 41, .5); }
.pi-toast.bad { border-color: rgba(255, 107, 107, .5); }

/* ---- maps (Leaflet, dark) ------------------------------------------------------------------ */
.leaflet-container { background: var(--bg-2); font-family: var(--sans); outline: 0; }
.leaflet-container:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: -2px; }
.leaflet-bar a:focus-visible, .pi-map-presets button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.leaflet-bar a, .leaflet-control-zoom a {
  width: 36px !important; height: 36px !important; line-height: 34px !important;
  background: rgba(8, 13, 25, .88) !important; color: var(--text) !important; border: 1px solid var(--line) !important;
}
.leaflet-bar { border: 0 !important; box-shadow: none !important; display: flex; flex-direction: column; gap: 6px; }
.leaflet-bar a { border-radius: 9px !important; }
.leaflet-control-attribution { background: rgba(5, 8, 15, .72) !important; color: var(--faint) !important; font: 400 10.5px/1.4 var(--mono) !important; }
.leaflet-control-attribution a { color: var(--dim) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel-solid); color: var(--text); border: 1px solid var(--line-2); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.leaflet-popup-content { font: 400 13px/1.45 var(--sans); margin: 12px 14px; }
/* A hazard tooltip wraps instead of running off the map, and never wider than a phone's map
   (review round 9: whole words were cut at 390 px in the default "Fit book" view). */
.leaflet-tooltip { background: var(--panel-solid); color: var(--text); border: 1px solid var(--line-2); border-radius: 8px; font: 400 12px/1.4 var(--sans); box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
  /* wrap instead of running off the map. `width: max-content` keeps the box as wide as its
     text wants up to max-width; `break-word` (never `anywhere`) so the intrinsic minimum
     stays a whole word — `anywhere` collapses a shrink-to-fit box to one character wide. */
  white-space: normal; width: max-content; max-width: min(230px, calc(100vw - 56px)); overflow-wrap: break-word; }
.leaflet-tooltip-top::before { border-top-color: var(--line-2); }
/* shifted back inside the container: the arrow no longer points at the marker, so it goes */
.leaflet-tooltip.pi-tip-shift::before { display: none; }
.pi-map-ctl { background: rgba(8, 13, 25, .88); border: 1px solid var(--line); border-radius: 10px; color: var(--text-2); font: 400 12px/1.4 var(--sans); }
.pi-map-presets { display: flex; gap: 2px; padding: 3px; flex-wrap: wrap; }
.pi-map-presets button { height: 32px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--dim); font: 500 12.5px/1 var(--sans); }
.pi-map-presets button:hover { color: var(--text); }
.pi-map-presets button[aria-pressed="true"] { background: rgba(52, 227, 232, .16); color: var(--accent); }
.pi-map-presets button[hidden] { display: none; }
.pi-map-note { padding: 8px 10px; max-width: 260px; }
.pi-map-note b { color: var(--review); }
.pi-map-legend { padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 6px 14px; font: 400 12px/1.2 var(--mono); color: var(--dim); }
.pi-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pi-place { color: #95a3bd; font: 400 11px/1 var(--mono); white-space: nowrap; text-shadow: 0 0 3px #05080f, 0 0 6px #05080f; pointer-events: none; }
.pi-place-icon { background: none; border: 0; }
.pi-haz { position: relative; width: 18px; height: 18px; pointer-events: auto; }
.pi-haz i { position: absolute; left: 50%; top: 50%; border-radius: 50%; }
.pi-haz .core { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: currentColor; box-shadow: 0 0 8px currentColor; }
.pi-haz .halo { width: 16px; height: 16px; margin: -8px 0 0 -8px; background: currentColor; opacity: .16; }
.pi-haz .ring { width: 8px; height: 8px; margin: -4px 0 0 -4px; border: 1.3px solid currentColor; animation: pi-ping 3.2s cubic-bezier(.2, .6, .3, 1) infinite; }
.pi-haz .ring + .ring { animation-delay: 1.6s; }
.pi-haz.stale { opacity: .45; }
.pi-haz.stale .ring { display: none; }
.pi-haz.fire { color: var(--fire); } .pi-haz.flood { color: var(--flood); } .pi-haz.warning { color: var(--warning); } .pi-haz.quake { color: var(--quake); }

/* ---- charts (pi-chart.js) ------------------------------------------------------------------- */
.pi-chart { position: relative; min-width: 0; }
.pi-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.pi-chart .axis text { font: 400 10.5px/1 var(--mono); fill: var(--faint); }
.pi-chart .grid line { stroke: var(--line); stroke-width: 1; }
.pi-chart .gap { cursor: help; }
.pi-chart .gap:focus { outline: none; }
.pi-chart .gap:focus rect, .pi-chart .gap:hover rect { stroke: var(--review); stroke-width: 1; }
.pi-chart-caption { margin-top: 8px; font: 400 11.5px/1.4 var(--mono); color: var(--faint); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pi-chart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; font: 400 12px/1.2 var(--mono); color: var(--dim); }
.pi-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
/* (round 10: .pi-chart-tip removed — nothing has carried that class since the charts moved
   their hover text into <title>; the rule was inert. Its box lives on in .pi-pop.) */
.pi-chart-empty { padding: 18px; border: 1px dashed var(--line-2); border-radius: 12px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }

/* ---- responsive (D15) ------------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .pi-shell { gap: 14px; }
  .pi-nav { gap: 18px; }
  .pi-badge { display: none; }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; --shell-h: 56px; }
  .pi-shell { gap: 10px; }
  .pi-shell .pi-nav, .pi-shell .pi-sep { display: none; }   /* round 10: .pi-feed-text-long was an orphan of an earlier pill — nothing carries it */
  .pi-menubtn { display: inline-flex; }
  .pi-shell .pi-user { display: none; }   /* its items (and who is signed in) are in the menu sheet */
  .pi-logo span { font-size: 17px; }
  .pi-acct { max-width: 46vw; height: 40px; position: relative; }
  .pi-feed { height: 32px; padding: 0 10px; position: relative; }
  /* 44 px touch targets without a taller header: the hit area reaches past the drawn edge.
     REVIEW ROUND 9: the height is stated outright (44 px, centred) instead of being inferred
     from a negative inset — the pill measured ~42 px and the account chip ~41 px, because the
     drawn box is not always the height those insets assumed, and the chip is a <span> for an
     account that cannot switch, which `button.pi-acct::after` never reached. */
  /* REVIEW ROUND 10: that overlay is the chip's LAST positioned child, so inside the ACTING
     chip it painted over the real EXIT button and swallowed every tap and click at this width
     — and EXIT is the only way off another licensee's book on a phone. The overlay now skips
     the acting chip (whose one control IS the button), the button carries the 44 px box that
     `.pi-exit::after` already intended, and z-index keeps it above any overlay still drawn.
     Re-test with a hit test (elementFromPoint / elementHandle.click), not a box measurement. */
  .pi-feed::after, .pi-acct:not(.acting)::after {
    content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%);
  }
  .pi-acct .pi-exit { position: relative; z-index: 1; }
  .pi-acct .pi-exit::after {
    content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%);
  }
  .pi-user { width: 44px; height: 44px; }
  .pi-btn { height: 44px; }
  .pi-head h1 { font-size: 24px; }
  .pi-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-kpis > .pi-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pi-kpi .pi-kpi-num { font-size: 28px; }
  .pi-table.stack thead { display: none; }
  .pi-table.stack, .pi-table.stack tbody, .pi-table.stack tr, .pi-table.stack td { display: block; width: 100%; }
  .pi-table.stack tr { margin-bottom: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
  .pi-table.stack td { border: 0; padding: 6px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .pi-table.stack td::before { content: attr(data-label); font: 500 11px/1.4 var(--mono); letter-spacing: .08em; color: var(--dim); text-transform: uppercase; text-align: left; }
  .pi-table.stack td.num { text-align: right; }
  .pi-map-ctl { font-size: 12px; }
  .pi-map-presets button { height: 44px; min-width: 44px; padding: 0 10px; }   /* D15: 44 px touch targets */
  .leaflet-bar a, .leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 42px !important; font-size: 20px !important; }
  /* stacked cards: the label on the left, the value's parts together on the right */
  .pi-table.stack td { justify-content: flex-end; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
  .pi-table.stack td::before { margin-right: auto; }
  .pi-shell .pi-feed { flex-shrink: 0; }
  /* (round 9: the 44 px hit area above already spans the full width) */
}
@media (max-width: 600px) {
  .pi-backdrop { padding: 0; align-items: stretch; }
  .pi-modal { width: 100%; max-height: none; height: 100%; border-radius: 0; border: 0; }
  .pi-modal-foot { position: sticky; bottom: 0; background: var(--panel-solid); }
  .pi-modal-foot .pi-btn { flex: 1; }
}
@media (max-width: 480px) {
  /* with the word gone the mark alone is 28 px wide; the link keeps the same 44 px bar the
     pill and the chip were held to this round (review round 10, WCAG 2.5.5) */
  .pi-shell .pi-logo { min-width: 44px; }
  .pi-shell .pi-logo span { display: none; }
  .pi-acct .pi-acct-prefix { display: none; }
  .pi-shell .pi-feed .pi-feed-text { display: none; }
  .pi-shell .pi-feed { width: 32px; padding: 0; justify-content: center; }
  .pi-acct { max-width: 58vw; }
  /* acting: room for the account's name (the amber chip and EXIT already say "viewing as") */
  .pi-acct.acting { max-width: 62vw; gap: 6px; padding: 0 8px; }
  .pi-acct.acting > svg:first-child { display: none; }
  .pi-acct.acting .pi-acct-label { font-size: 11px; letter-spacing: .03em; }
  /* with the prefix gone, the chip still SAYS it is viewing as another account */
  .pi-acct.acting { padding-top: 12px; }
  .pi-acct.acting::before { content: "VIEWING AS"; position: absolute; left: 8px; top: 5px; font: 600 8.5px/1 var(--mono); letter-spacing: .14em; opacity: .8; pointer-events: none; }
  .pi-acct.acting .pi-exit { padding: 0 6px; margin-left: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .pi-haz .ring { display: none; }
}
/* ---- review round 5: the header between a phone and a tablet (pi-shell.js fit) ------------------ */
@media (min-width: 481px) and (max-width: 760px) {
  /* the pill's short form ("4/4 LIVE") here — its full words squeezed the account's name away */
  .pi-shell .pi-feed .pi-feed-text { display: none; }
  .pi-shell .pi-feed .pi-feed-short { display: inline; }
  /* the account's name takes the room there is; it is cut only when nothing else can give way */
  .pi-shell .pi-acct, .pi-shell .pi-acct.acting { max-width: none; }
  .pi-shell.pi-narrow .pi-logo span { display: none; }
  .pi-shell.pi-narrow .pi-feed .pi-feed-short { display: none; }
  .pi-shell.pi-narrow .pi-feed { min-width: 44px; padding: 0 9px; gap: 6px; }
  .pi-shell.pi-narrow .pi-feed .pi-feed-tiny { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; line-height: 1; font-size: 11px; }
  .pi-shell.pi-narrow .pi-feed .pi-feed-tiny small { font: 600 8px/1 var(--mono); letter-spacing: .08em; }
}
/* acting, prefix cut (481 px and up): the phone's form — "VIEWING AS" above the whole name */
.pi-shell.pi-actshort .pi-acct.acting { position: relative; height: auto; min-height: 40px; padding-top: 13px; padding-bottom: 4px; }
.pi-shell.pi-actshort .pi-acct.acting .pi-acct-prefix { display: none; }
.pi-shell.pi-actshort .pi-acct.acting::before { content: "VIEWING AS"; position: absolute; left: 12px; top: 5px; font: 600 8.5px/1 var(--mono); letter-spacing: .14em; opacity: .8; pointer-events: none; }
.pi-shell.pi-actshort .pi-acct.acting .pi-acct-name { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.15; min-width: 0; }
/* acting, the book page's one-piece label cut: it wraps onto two lines, read left to right */
.pi-shell.pi-actwrap .pi-acct.acting { height: auto; min-height: 40px; padding-top: 4px; padding-bottom: 4px; }
.pi-shell.pi-actwrap .pi-acct.acting > [data-slot], .pi-shell.pi-actwrap .pi-acct.acting > #acct { direction: ltr; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.2; }
/* a phone: the account's name over two lines when it needs them, as the acting chip does —
   never "TEST NORTHWIND M…" (the whole name is also the chip's title) */
@media (max-width: 480px) {
  .pi-acct:not(.acting) { height: auto; min-height: 40px; padding-top: 4px; padding-bottom: 4px; }
  .pi-acct:not(.acting) > .pi-acct-label, .pi-acct:not(.acting) > [data-slot] { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.15; font-size: 12px; overflow-wrap: break-word; }
}

/* ---- review round 2 ------------------------------------------------------------------------- */
/* tabs scroll sideways (overflow-x), which clips an outline drawn outside them: draw it inside */
.pi-tabs button:focus-visible, .pi-tabs a:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 8px 8px 0 0; }
/* skip link: the first tab stop on every page, seen only when focused */
.pi-skip {
  position: absolute; left: 8px; top: -80px; z-index: 1200; padding: 10px 14px; border-radius: 8px;
  background: var(--accent); color: var(--bg); font: 600 13px/1 var(--sans); text-decoration: none;
}
.pi-skip:focus, .pi-skip:focus-visible { top: 8px; outline: 2px solid var(--text-hi); outline-offset: 2px; }
main[tabindex="-1"]:focus { outline: none; }
/* the feed pill's count as text, for a phone (never the dot's colour alone) */
.pi-feed .pi-feed-tiny { display: none; }
/* a measured zero in a chart: the key under it */
.pi-chart-zerokey { display: inline-flex; align-items: center; gap: 6px; }
/* REVIEW ROUND 10: the Accounts table's sparkline draws the same amber / grey outage rings as
   the big charts, and they were keyed nowhere — a ~4 px circle with only a <title>, and at
   390 px the table stacks into cards where nothing can be hovered. Now the rings are named in
   text under the sparkline, in the cell, at every width. */
.pi-spark-key { margin-top: 3px; gap: 4px 8px; font-size: 10.5px; line-height: 1.3; }
.pi-spark-key .pi-chart-zerokey { gap: 4px; }
.pi-spark-key .pi-chart-nlsw, .pi-spark-key .pi-chart-uksw { width: 8px; height: 8px; }
.ow-trend .pi-spark-key { color: var(--faint); }
/* "How to read this chart" (review round 7): the fixed explanation, folded under the keys */
.pi-how { margin: 10px 0 0; }
.pi-how > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; list-style: none; font: 500 12px/1.2 var(--mono); letter-spacing: .04em; color: var(--dim); border-radius: 6px; }
.pi-how > summary::-webkit-details-marker { display: none; }
.pi-how > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; margin: 0 2px; }
.pi-how[open] > summary::before { transform: rotate(45deg); }
.pi-how > summary:hover { color: var(--text); }
.pi-how > p { margin: 6px 0 0; }
@media (max-width: 760px) { .pi-how > summary { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .pi-how > summary::before { transition: none; } }
.pi-chart-zerosw { display: inline-block; width: 12px; height: 2px; border-radius: 1px; background: rgba(63, 214, 164, .85); }
/* a day measured while a hazard feed was down: its key (review round 4) */
.pi-chart-nlsw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; border: 1.2px dashed rgba(240, 180, 41, .95); background: rgba(240, 180, 41, .14); flex-shrink: 0; }
.pi-chart-nlsw.ring { border-radius: 50%; border-style: solid; background: transparent; }
.pi-chart-nlkey { color: var(--review); }
@media (max-width: 760px) {
  /* the owner's account switcher: 44 px touch targets */
  .pi-pop a, .pi-pop button.pi-item { min-height: 44px; }
}
@media (max-width: 480px) {
  .pi-shell .pi-feed { width: auto; min-width: 44px; padding: 0 9px; gap: 6px; }
  .pi-shell .pi-feed .pi-feed-tiny { display: inline; font-size: 11px; letter-spacing: .02em; }
  /* acting, on a phone: the WHOLE account name, over two lines when it needs them —
     never cut at either end (the chip grows; the header is 56 px) */
  .pi-acct.acting { height: auto; min-height: 40px; padding-top: 12px; padding-bottom: 4px; }
  .pi-acct.acting .pi-acct-name { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.15; min-width: 0; }
}
@media (max-width: 400px) {
  /* the narrowest phones: the feed pill is its count in words (no dot), so the acting
     chip keeps room for the account's whole name, over up to three lines */
  .pi-shell .pi-feed { min-width: 40px; padding: 0 7px; }
  .pi-shell .pi-feed .pi-dot { display: none; }
  .pi-acct.acting { max-width: 70vw; padding-left: 7px; padding-right: 6px; }
  .pi-acct.acting .pi-acct-name { -webkit-line-clamp: 3; font-size: 10.5px; line-height: 1.12; }
  .pi-acct.acting .pi-exit { padding: 0 5px; font-size: 10px; }
}
@media (max-width: 340px) {
  /* 320 px phones: tighter header gaps give the acting chip the width of its name */
  .pi-shell { gap: 6px; }
  .pi-acct.acting { max-width: 78vw; }
  .pi-shell .pi-feed { min-width: 36px; padding: 0 5px; }
}
/* a shown-once secret, dismissed before it was copied: asked first (review round 3) */
.pi-uncopied { margin-top: 14px; }
.pi-uncopied-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.pi-uncopied-acts .pi-btn { min-height: 44px; }
@media (max-width: 480px) {
  /* the phone's feed pill: "FEEDS" over the count, same width as the count alone */
  .pi-shell .pi-feed .pi-feed-tiny { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; line-height: 1; }
  .pi-shell .pi-feed .pi-feed-tiny small { font: 600 8px/1 var(--mono); letter-spacing: .08em; }
  .pi-shell .pi-feed .pi-feed-tiny span { font-size: 11px; }
}
/* ---- review round 5: charts ----------------------------------------------------------------- */
/* a day whose hazard feeds' state was not recorded: its key (grey, never the green tick) */
.pi-chart-uksw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; border: 1.2px dashed rgba(149, 163, 189, .8); background: rgba(149, 163, 189, .12); flex-shrink: 0; }
.pi-chart-uksw.ring { border-radius: 50%; border-style: solid; background: transparent; }
/* review round 6: a zero on a day part of the book was outside feed coverage or had no coordinates — grey, not the green tick */
.pi-chart-gapsw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; background: repeating-linear-gradient(45deg, rgba(149, 163, 189, .55) 0 1.3px, transparent 1.3px 4px); }
/* the PARTIAL day's stub (drawGaps kind "partial"): cyan dashed outline over the accent hatch */
.pi-chart-partsw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; border: 1px dashed rgba(52, 227, 232, .65);
  background: repeating-linear-gradient(45deg, rgba(52, 227, 232, .5) 0 1.3px, transparent 1.3px 4px); }
.pi-chart-covsw { display: inline-block; width: 12px; height: 2px; border-radius: 1px; background: rgba(149, 163, 189, .6); flex-shrink: 0; }
.pi-chart-ukkey { color: var(--dim); }
/* small multiples: one lane per series, its name, its note and its own scale */
.pi-chart .lane-name { font: 500 11.5px/1 var(--sans); fill: var(--text-2); }
.pi-chart .lane-note { font: 400 9.5px/1 var(--mono); fill: var(--faint); letter-spacing: .02em; }
.pi-chart .lane-max { font: 400 9.5px/1 var(--mono); fill: var(--faint); }