/* ==========================================================================
   RippleCore · Platform Maturity — design system
   Built on the REAL DataRipple tokens (app/styles/dataripple-tokens.css):
   Ubuntu type · brand red #CC0C1F · navy shell #1B2433 · tight 3-6px radii ·
   blue-family borders #cdd8e8 · the viz palette for the maturity ramp.
   ========================================================================== */

:root {
  /* surfaces */
  --bg: #ffffff; --page: #eef2f7; --panel: #ffffff; --panel-2: #f7fafc;
  --shell: #1B2433; --shell-2: #2F3C4E; --shell-rule: rgba(255,255,255,0.10);

  /* ink */
  --fg-1: #0B1220; --fg-2: #18293B; --fg-3: #5A6B7B; --fg-4: #8494a5;

  /* lines */
  --border: #cdd8e8; --border-strong: #2F3C4E; --border-subtle: rgba(11,18,32,0.07);
  --line-2: #eef2f7;

  /* brand */
  --red: #CC0C1F; --red-2: #E65328; --red-deep: #A80917;
  --red-soft: rgba(204,12,31,0.08); --red-line: rgba(204,12,31,0.22);
  --sky: #5189AD; --sky-dark: #3F6E90; --sky-soft: rgba(81,137,173,0.12);

  /* maturity ramp — BRAND PALETTE ONLY: climbs to brand red at Live.
     grey → navy → blue → orange → red. [n]=core [n]s=soft tint [n]i=ink */
  --s1: #8794a5; --s1s: #eef2f7; --s1i: #4a5666;   /* Building  · muted grey       */
  --s2: #2f3c4e; --s2s: #e7eaf0; --s2i: #2f3c4e;   /* Working   · navy (dark-700)  */
  --s3: #5189ad; --s3s: #e9f0f6; --s3i: #3F6E90;   /* v1 · Beta · brand accent blue*/
  --s4: #e65328; --s4s: #fdeae2; --s4i: #b8421f;   /* v2 · Ready· brand secondary  */
  --s5: #cc0c1f; --s5s: #fbe9eb; --s5i: #a30a17;   /* Live      · brand primary red*/

  /* confidence (brand tones, no green) */
  --conf-high: #5189ad; --conf-med: #e65328; --conf-low: #b8c3d1;

  /* type */
  --font: "Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Ubuntu Mono", ui-monospace, monospace;

  /* shape */
  --r-sm: 3px; --r-md: 6px; --r-lg: 10px; --r-pill: 25px; --r-full: 9999px;
  --sh-sm: 0 2px 6px rgba(11,18,32,0.06), 0 1px 3px rgba(11,18,32,0.05);
  --sh-md: 0 4px 14px rgba(11,18,32,0.09), 0 2px 6px rgba(11,18,32,0.05);
  --sh-lg: 0 24px 60px -18px rgba(11,18,32,0.32), 0 8px 22px rgba(11,18,32,0.12);

  /* z */
  --z-sticky: 200; --z-topbar: 240; --z-backdrop: 400; --z-drawer: 410;
  --z-toast: 600; --z-tooltip: 800; --z-drag: 820;

  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-weight: 500;                 /* DataRipple body = Ubuntu Medium */
  background: var(--page);
  color: var(--fg-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
svg { display: block; }
b, strong { font-weight: 700; }
::selection { background: var(--red-soft); }

* { scrollbar-width: thin; scrollbar-color: #c2cede transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #ccd7e4; border-radius: 999px; border: 2px solid var(--page); }
*::-webkit-scrollbar-thumb:hover { background: #b4c1d2; }

/* ==========================================================================
   Topbar — navy shell (echoes the real console)
   ========================================================================== */
.rc-top {
  position: sticky; top: 0; z-index: var(--z-topbar);
  display: flex; align-items: center; gap: 18px;
  padding: 0 22px; height: 58px;
  background: var(--shell);
  border-bottom: 1px solid rgba(0,0,0,0.2);
}
.rc-brand { display: flex; align-items: center; gap: 12px; height: 100%; }
.rc-brand img.wm { height: 26px; width: auto; }
.rc-brand .sep { width: 1px; height: 22px; background: var(--shell-rule); }
.rc-brand .prod { font-size: 13px; font-weight: 700; letter-spacing: .01em; color: #fff; }
.rc-brand .prod b { color: var(--red-2); font-weight: 700; }

.rc-viewnav { display: flex; gap: 4px; }
.rc-viewnav a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,.62);
  padding: 7px 15px; border-radius: var(--r-pill);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.rc-viewnav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.rc-viewnav a[aria-current="page"] { background: var(--red); color: #fff; }
.rc-spacer { flex: 1; }
.rc-asof { font-family: var(--mono); font-size: 12px; font-weight: 700; color: rgba(255,255,255,.5); }

/* ==========================================================================
   Controls
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--fg-2);
  padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--panel);
  transition: border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.btn:hover { border-color: var(--red); color: var(--red); box-shadow: var(--sh-sm); }
.btn:active { transform: translateY(.5px); }
.btn.primary { background: var(--red); color: #fff; border-color: var(--red); }
.btn.primary:hover { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }
.btn .ic { width: 15px; height: 15px; }

.field {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--panel);
}
.field:focus-within { border-color: var(--red); box-shadow: var(--red-soft) 0 0 0 3px; }
.field input { border: none; outline: none; background: none; font: inherit; font-weight: 600; font-size: 13px; color: var(--fg-1); }
.field input::placeholder { color: var(--fg-4); font-weight: 500; }
.field svg { width: 15px; height: 15px; color: var(--fg-3); }
select.plain { font: inherit; font-weight: 700; font-size: 13px; color: var(--fg-2); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel); padding: 8px 11px; cursor: pointer; }
select.plain:hover { border-color: var(--red); color: var(--red); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--line-2); color: var(--fg-2);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; }

/* stage helpers via [data-s] */
[data-s="1"]{ --sf: var(--s1); --ss: var(--s1s); --si: var(--s1i); }
[data-s="2"]{ --sf: var(--s2); --ss: var(--s2s); --si: var(--s2i); }
[data-s="3"]{ --sf: var(--s3); --ss: var(--s3s); --si: var(--s3i); }
[data-s="4"]{ --sf: var(--s4); --ss: var(--s4s); --si: var(--s4i); }
[data-s="5"]{ --sf: var(--s5); --ss: var(--s5s); --si: var(--s5i); }

/* ==========================================================================
   Page frame + headline + scoreboard
   ========================================================================== */
.rc-wrap { max-width: 1240px; margin: 0 auto; padding: 24px 22px 90px; }
.headline { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 4px 0 20px; }
.headline h1 { font-size: 27px; font-weight: 700; letter-spacing: -.025em; color: var(--fg-1); }
.headline p { font-size: 14px; color: var(--fg-3); font-weight: 500; }
.headline b { color: var(--fg-1); font-weight: 700; }

.board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 820px){ .board { grid-template-columns: repeat(2,1fr); } }
.tile {
  position: relative; text-align: left; overflow: hidden;
  padding: 14px 15px 13px; border-radius: var(--r-md);
  background: var(--panel); border: 1px solid var(--border);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.tile::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--sf); }
.tile:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.tile[aria-pressed="true"] { border-color: var(--sf); box-shadow: 0 0 0 1px var(--sf) inset, var(--sh-md); }
.tile .cap { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; color: var(--si); text-transform: uppercase; letter-spacing: .05em; padding-left: 6px; }
.tile .n { font-family: var(--mono); font-size: 30px; font-weight: 700; color: var(--fg-1); line-height: 1.05; margin: 7px 0 0 6px; }
.tile .sub { font-size: 11px; color: var(--fg-3); margin: 1px 0 0 6px; }

/* ==========================================================================
   The Matrix — draggable stage token on a clean track
   ========================================================================== */
.matrix { margin-top: 22px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--sh-md); overflow: visible; --namecol: 300px; }
.mx2-sect:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); overflow: hidden; }

.mx2-head {
  display: grid; grid-template-columns: var(--namecol) 1fr;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
  position: sticky; top: 58px; z-index: var(--z-sticky);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 1px 0 var(--border);
}
.mx2-head .lead { display: flex; align-items: flex-end; padding: 0 18px 12px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.mx2-cols { display: grid; grid-template-columns: repeat(5, 1fr); padding: 14px 24px 12px; }
.mx2-colh { text-align: center; padding: 0 4px; position: relative; }
.mx2-colh .num { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--sf); color: #fff; font-family: var(--mono); font-size: 11px; font-weight: 700; margin: 0 auto 5px; }
.mx2-colh .lbl { font-size: 12.5px; font-weight: 700; color: var(--fg-1); letter-spacing: -.01em; }
.mx2-colh .lbl input { width: 100%; text-align: center; font: inherit; font-weight:700; color: inherit; border: 1px solid transparent; border-radius: 4px; background: none; }
.mx2-colh .lbl input:hover { border-color: var(--border); background:#fff; }
.mx2-colh .lbl input:focus { outline: none; border-color: var(--red); background: #fff; }
.mx2-colh .desc { font-size: 10px; color: var(--fg-4); margin-top: 2px; line-height: 1.3; }

/* section groups */
.mx2-sect { }
.mx2-secthd { display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: var(--panel-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border-subtle); }
.mx2-secthd:first-child { border-top: none; }
.mx2-secthd .nm { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.mx2-secthd .roll { flex: 1; max-width: 200px; height: 5px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.mx2-secthd .roll i { display: block; height: 100%; border-radius: 999px; }
.mx2-secthd .rollnum { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--fg-3); }

/* row */
.mx2-row { display: grid; grid-template-columns: var(--namecol) 1fr; align-items: center; border-top: 1px solid var(--border-subtle); transition: background .13s var(--ease); }
.mx2-row:first-of-type { border-top: none; }
.mx2-row:hover { background: #fafcfe; }
.mx2-row.dim { opacity: .3; filter: saturate(.35); }

.mx2-name { display: flex; align-items: center; gap: 11px; padding: 13px 14px 13px 18px; min-width: 0; cursor: pointer; }
.mx2-name .fic { width: 30px; height: 30px; flex: none; border-radius: var(--r-md); display: grid; place-items: center; background: var(--ss); color: var(--si); }
.mx2-name .fic svg { width: 16px; height: 16px; }
.mx2-name .ft { min-width: 0; flex: 1; }
.mx2-name .ft b { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--fg-1); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; }
.mx2-name .ft b .ename { overflow: hidden; text-overflow: ellipsis; }
.mx2-name .ft .edm { flex:none; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.mx2-name .ft span { font-size: 11.5px; color: var(--fg-3); font-weight: 600; }
.mx2-name .info { margin-left: auto; width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--fg-4); }
.mx2-name .info:hover { color: var(--fg-2); background: var(--line-2); }

/* the track */
.mx2-track { position: relative; height: 62px; margin: 0 24px; }
.mx2-track .rail { position: absolute; left: 10%; right: 10%; top: 50%; height: 3px; transform: translateY(-50%); background: #dbe3ee; border-radius: 999px; }
.mx2-track .fill { position: absolute; left: 10%; top: 50%; height: 3px; transform: translateY(-50%); background: var(--sf); border-radius: 999px; transition: width .25s var(--ease), background .2s; }
.mx2-track .stop {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
}
.mx2-track .stop .dot { width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box; transition: all .18s var(--ease); }
.mx2-track .stop.done .dot { background: var(--sf); }
.mx2-track .stop.future .dot { width: 9px; height: 9px; background: #fff; border: 2px solid #cbd5e1; }
.mx2-track .stop:hover .dot { transform: scale(1.25); }
body:not(.dragging) .mx2-track .stop { cursor: pointer; }

/* the draggable token (the current stage) */
.mx2-token {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--sf); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 2px 4px rgba(11,18,32,.2), 0 6px 16px -6px var(--sf);
  cursor: grab; touch-action: none; z-index: 3;
  border: 2.5px solid #fff;
  transition: box-shadow .15s var(--ease), transform .08s var(--ease);
}
.mx2-token:hover { box-shadow: 0 3px 6px rgba(11,18,32,.26), 0 10px 22px -6px var(--sf); }
.mx2-token:active, .mx2-token.grabbing { cursor: grabbing; }
.mx2-token.grabbing { transform: translate(-50%,-50%) scale(1.12); z-index: var(--z-drag); }
.mx2-token .rip { width: 19px; height: 19px; }
.mx2-token .conf { position: absolute; bottom: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; }
.mx2-track .stop.droptarget .dot { transform: scale(1.5); background: var(--red); }

.mx2-hintcell { padding: 12px 24px 0; }
.hint { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-3); font-weight: 600; }
.hint svg { width: 15px; height: 15px; color: var(--fg-4); }

/* ==========================================================================
   Drawer (drill-down)
   ========================================================================== */
.rc-backdrop { position: fixed; inset: 0; z-index: var(--z-backdrop); background: rgba(11,18,32,.42); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); }
.rc-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer); width: min(468px, 94vw); background: var(--panel); box-shadow: var(--sh-lg); border-left: 1px solid var(--border); transform: translateX(100%); transition: transform .26s var(--ease); display: flex; flex-direction: column; }
.drawer.open { transform: none; }
.drawer .dhd { padding: 18px 20px 15px; border-bottom: 1px solid var(--border); }
.drawer .dhd .row1 { display: flex; align-items: center; gap: 11px; }
.drawer .dhd .fic { width: 34px; height: 34px; border-radius: var(--r-md); background: var(--ss); display: grid; place-items: center; color: var(--si); }
.drawer .dhd h3 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--fg-1); }
.drawer .dhd .sect { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.drawer .close { margin-left: auto; width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--fg-3); }
.drawer .close:hover { background: var(--line-2); color: var(--fg-1); }
.drawer .dbody { padding: 16px 20px 28px; overflow-y: auto; }

.stagepill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: var(--r-pill); background: var(--ss); color: var(--si); font-weight: 700; font-size: 13px; }
.stagepill .rip { width: 17px; height: 17px; }
.rationale { margin: 6px 0 4px; font-size: 13.5px; color: var(--fg-2); font-weight: 500; line-height: 1.55; padding: 13px 15px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); }

/* stage definition + what-it-takes-to-advance */
.stagedef { margin-top: 14px; }
.stagedef .stagedeftxt { font-size: 13.5px; font-weight: 500; color: var(--fg-2); line-height: 1.55; }
.advance { display: flex; gap: 9px; align-items: flex-start; margin-top: 11px; padding: 11px 13px; border-radius: var(--r-md); background: var(--ss); border: 1px solid var(--border); }
.advance svg { flex: none; width: 15px; height: 15px; color: var(--si); margin-top: 2px; }
.advance span { font-size: 12.5px; font-weight: 700; color: var(--si); line-height: 1.5; }
.dsub { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 9px; }
.evgrid { display: flex; flex-direction: column; gap: 8px; }
.evrow { display: grid; grid-template-columns: 116px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); }
.evrow .k { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: var(--fg-2); }
.evrow .k .st { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.evrow .v { font-size: 12.5px; color: var(--fg-3); font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; min-width: 0; }
.st-live{ background: var(--sky);} .st-part{ background: var(--red-2);} .st-none{ background: var(--fg-4);}
.subtable { margin-top: 18px; }
.subrow { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-top: 1px solid var(--border-subtle); font-size: 12.5px; }
.subrow:first-child { border-top: none; }
.subrow .sb { min-width: 52px; text-align: center; font-family: var(--mono); font-size: 10px; font-weight: 700; color: #fff; padding: 2px 6px; border-radius: 4px; flex: none; }
.subrow .sn { color: var(--fg-1); font-weight: 700; }
.subrow .snote { color: var(--fg-3); margin-left: auto; font-size: 11.5px; font-weight: 500; text-align: right; max-width: 55%; }
.stageedit { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; margin-top: 14px; }
.stageedit button { padding: 9px 4px; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 11px; font-weight: 700; color: var(--fg-2); text-align: center; line-height: 1.15; transition: all .13s var(--ease); }
.stageedit button:hover { border-color: var(--sf); color: var(--si); }
.stageedit button[aria-pressed="true"] { background: var(--sf); color: #fff; border-color: var(--sf); }
.editnote { font-size: 12px; color: var(--fg-3); font-weight: 500; }

/* editable notes (MJ's own status commentary) */
.notesblock { margin-top: 4px; }
.notehd { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.notehd .noteflag { font-size: 9px; letter-spacing: .04em; color: var(--fg-4); background: var(--line-2); padding: 2px 7px; border-radius: var(--r-full); }
.notearea { width: 100%; min-height: 82px; resize: vertical; font: inherit; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--fg-1); padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel-2); }
.notearea::placeholder { color: var(--fg-4); font-weight: 500; }
.notearea:focus { outline: none; border-color: var(--red); box-shadow: var(--red-soft) 0 0 0 3px; background: #fff; }
.mx2-name .noteicon { flex: none; width: 16px; height: 16px; color: var(--red); margin-left: 2px; }

/* expand chevron + inline sub-rows */
.chev { flex: none; width: 20px; height: 20px; display: grid; place-items: center; color: var(--fg-3); border-radius: 4px; transition: transform .18s var(--ease), color .15s, background .15s; }
.chev svg { width: 15px; height: 15px; }
.chev:hover { color: var(--red); background: var(--line-2); }
.chev.open { transform: rotate(90deg); color: var(--red); }
.chevspace { flex: none; width: 20px; }
.mx2-row.expandable > .mx2-name { cursor: pointer; }
.mx2-row.expandable.open { background: #f9fbfd; }

.mx2-sub { background: var(--panel-2); border-top: 1px solid var(--border-subtle); }
.mx2-sub:hover { background: #f2f6fa; }
.mx2-sub .mx2-name { padding: 8px 14px 8px 30px; gap: 8px; cursor: default; }
.mx2-subname .twig { flex: none; width: 13px; height: 13px; margin: -8px 4px 0 6px; border-left: 2px solid #c4d0e0; border-bottom: 2px solid #c4d0e0; border-radius: 0 0 0 3px; }
.mx2-subname .ft b { font-size: 12.5px; font-weight: 600; color: var(--fg-2); }
.mx2-subname .ft span { font-size: 10.5px; color: var(--fg-4); font-weight: 500; }
.mx2-sub .mx2-track { height: 46px; }
.mx2-sub .mx2-token { width: 27px; height: 27px; border-width: 2px; }
.mx2-sub .mx2-token .rip { width: 15px; height: 15px; }
.mx2-sub .mx2-track .stop .dot { width: 9px; height: 9px; }

/* toast */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); z-index: var(--z-toast); background: var(--shell); color: #fff; font-size: 13px; font-weight: 600; padding: 11px 18px; border-radius: var(--r-pill); box-shadow: var(--sh-lg); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast b { color: #fff; }

/* legend + footer */
.legend { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 15px; font-size: 12px; color: var(--fg-3); font-weight: 600; }
.legend .lg { display: inline-flex; align-items: center; gap: 8px; }
.legend .tok { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: var(--sh-sm); display:grid; place-items:center; }
.legend .tok .rip { width: 13px; height: 13px; }
.legend .pipd { width: 11px; height: 11px; border-radius: 50%; }
.legend .pipf { width: 9px; height: 9px; border-radius: 50%; background:#fff; border: 2px solid #cbd5e1; }
.footnote { margin-top: 16px; font-size: 12.5px; color: var(--fg-3); font-weight: 500; line-height: 1.55; }
.footnote b { color: var(--fg-2); font-weight: 700; }

@media (max-width: 760px){ .matrix { --namecol: 150px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition-duration: .01ms !important; } }