/* ========================================================================
   TRADING RABBIT 3.0 - DESIGN TOKENS
   Do not add a token without adding it here. Do not use a raw hex in a
   rule when a token exists. Canvas code reads the literal values from
   TR.C (see js/tr.js) - the two lists must stay in lockstep.
   ===================================================================== */
:root{
  /* --- surface ladder. Depth is these five values, never a shadow. ----- */
  --void:#E9EDF1;        /* app canvas, pane gutters, dragger channel     */
  --abyss:#EFF2F5;       /* status bar, modal legend footer, scroll track */
  --pane:#FFFFFF;        /* pane body, board plot ground, modal card      */
  --rail:#FFFFFF;        /* topbar, pane head, tooltip, row hover         */
  --rail-2:#F1F4F7;      /* seg-control track, meta chips, pressed state  */
  --rule:#DFE4EA;        /* THE hairline. Every 1px border in the app.    */
  --rule-hi:#C2CBD4;     /* dragger grip, seg border, break-glyph stroke  */

  /* --- type ramp ------------------------------------------------------ */
  --ink-hi:#0B1016;      /* primary type. 15.4:1 on --pane                */
  --ink:#46525E;         /* secondary type                                */
  --ink-lo:#68747F;      /* TEXT CONTRAST FLOOR. 4.72:1 on --pane.        */
  --ink-dim:#9BA6B0;     /* rules and non-informational ticks ONLY.       */
  --on-color:#FFFFFF;    /* type sitting on --up / --down / --ink-hi      */

  /* --- direction. The client's production tokens. Do not alter. ------- */
  --up:#38CB6E;
  --down:#F15656;
  --up-lit:#12924A;
  --down-lit:#C81E1E;
  --up-w06:rgba(56,203,110,.06);
  --up-w10:rgba(56,203,110,.10);
  --up-w16:rgba(56,203,110,.16);
  --up-w35:rgba(56,203,110,.35);
  --up-w45:rgba(56,203,110,.45);
  --down-w06:rgba(241,86,86,.06);
  --down-w10:rgba(241,86,86,.10);
  --down-w16:rgba(241,86,86,.16);
  --down-w35:rgba(241,86,86,.35);
  --down-w45:rgba(241,86,86,.45);

  /* --- the neutral zone (client requirement 2) ------------------------ */
  --zone:#F2A93B;                       /* 8.7:1 on --pane                */
  --zone-fill:rgba(242,169,59,.10);     /* the 0 to 0.50% band            */
  --zone-edge:rgba(242,169,59,.55);     /* the 0.50% boundary rule        */
  --zone-echo:rgba(242,169,59,.05);     /* the same band in the popup     */

  /* --- brand. Nav underline and :focus-visible. Nowhere else. --------- */
  --brand:#EC4899;

  /* --- neutral washes over graphite ----------------------------------- */
  --w-02:rgba(11,16,22,.02);
  --w-03:rgba(11,16,22,.03);
  --w-05:rgba(11,16,22,.05);
  --w-08:rgba(11,16,22,.08);
  --w-14:rgba(11,16,22,.14);
  --w-22:rgba(11,16,22,.22);
  --w-28:rgba(11,16,22,.28);

  /* --- families ------------------------------------------------------- */
  --f-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* --- fixed geometry ------------------------------------------------- */
  --h-topbar:52px;
  --h-status:24px;
  --h-panehead:32px;
  --h-row:30px;
  --h-seg:26px;
  --w-plate:132px;       /* the white logo nameplate                      */
  --w-dragger:6px;
  --pad-ws:6px;
  --radius:0px;          /* SHARP. The client has said so explicitly.     */

  /* --- depth ---------------------------------------------------------- */
  --sh-modal:0 32px 90px rgba(11,16,22,.20);
  --sh-tip:0 14px 36px rgba(11,16,22,.16);
  --inset-hi:inset 0 1px 0 rgba(255,255,255,.85);

  /* --- motion --------------------------------------------------------- */
  --e-out:cubic-bezier(.16,1,.3,1);     /* entrances, settles             */
  --e-io:cubic-bezier(.40,0,.20,1);     /* state swaps                    */
  --e-pop:cubic-bezier(.34,1.36,.50,1); /* arrivals, marks, counts        */
  --e-fast:cubic-bezier(.20,.70,.30,1); /* hover, press                   */
  --e-calm:cubic-bezier(.33,0,.15,1);   /* the board drift ONLY           */
  --e-lin:linear;                       /* pulses, sweeps                 */
  --d-1:120ms; --d-2:180ms; --d-3:260ms; --d-4:340ms;
  --d-5:420ms; --d-6:560ms; --d-7:700ms; --d-8:900ms; --d-9:1400ms;
  --d-breathe:2600ms;
}

/* Direction-scoped alias. Set once on the container, consumed everywhere
   below it, so no rule ever needs an .up / .down pair.                   */
.pane.is-up,  .row.up,  .t-pct.up,  .m-pct.up,
.tip.up,  .t-strong.up,  .modal.up   { --dir:var(--up);
  --dir-lit:var(--up-lit);   --dir-w06:var(--up-w06);
  --dir-w10:var(--up-w10);   --dir-w16:var(--up-w16);
  --dir-w45:var(--up-w45);   --dir-deep:#0D4A26; }
.pane.is-down,.row.down,.t-pct.down,.m-pct.down,
.tip.down,.t-strong.down,.modal.down { --dir:var(--down);
  --dir-lit:var(--down-lit); --dir-w06:var(--down-w06);
  --dir-w10:var(--down-w10); --dir-w16:var(--down-w16);
  --dir-w45:var(--down-w45); --dir-deep:#7D1D1D; }
.pane.is-list { --dir:#4A535D; }

html,body{ background:var(--void); color:var(--ink); }
body{
  font-family:var(--f-sans);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"zero" 1;   /* slashed zero, always on */
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ========================================================================
   RESET + SHELL FRAME
   ===================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  display:flex;
  flex-direction:column;
  font-size:13px;
  line-height:1.45;
  -moz-osx-font-smoothing:grayscale;
}
img{ display:block; }
button{ font:inherit; }
/* <i> is used throughout as a semantic-free hook (swatches, chips, count
   digits). It must never inherit the browser's italic default.          */
i{ font-style:normal; }

:focus-visible{ outline:1px solid var(--brand); outline-offset:1px; border-radius:0; }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:var(--abyss); }
::-webkit-scrollbar-thumb{ background:#C7D0D9; border-radius:0; }
::-webkit-scrollbar-thumb:hover{ background:#AEB8C2; }
*{ scrollbar-width:thin; scrollbar-color:#C7D0D9 var(--abyss); }

/* ========================================================================
   TOPBAR
   ===================================================================== */
.topbar{
  flex:0 0 var(--h-topbar);
  height:var(--h-topbar);
  display:flex;
  align-items:stretch;
  padding:0 14px 0 0;
  background:var(--rail);
  border-bottom:1px solid var(--rule);
  position:relative;
  z-index:20;
  animation:tr-boot-bar var(--d-4) var(--e-out) both;   /* motion 1 */
}

/* --- 5.3 the brand plate. Not decorative, forced by the asset. -------- */
.brand{ display:flex; align-items:stretch; height:var(--h-topbar); flex:0 0 auto; }
.brand-plate{
  width:var(--w-plate); height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:0 14px;
  background:#FFFFFF;                 /* MUST equal the PNG's baked ground */
  border-right:1px solid var(--rule);
  transition:filter var(--d-1) var(--e-fast);
}
.brand:hover .brand-plate{ filter:brightness(.94); }
.brand-plate img{ height:26px; width:auto; display:block; }

/* --- nav ------------------------------------------------------------- */
.nav{ display:flex; align-items:stretch; flex:0 0 auto; padding-left:6px; }
.nav a{
  position:relative;
  display:flex; align-items:center;
  padding:0 14px;
  font-family:var(--f-sans);
  font-size:12px; font-weight:500;
  letter-spacing:-.005em;
  color:var(--ink-lo);
  text-decoration:none;
  transition:color var(--d-2) var(--e-fast);
}
.nav a::after{                                          /* motion 36 */
  content:"";
  position:absolute; left:10px; right:10px; bottom:0;
  height:2px; background:var(--brand);
  transform:scaleX(0); transform-origin:center;
  transition:transform var(--d-3) var(--e-out);
}
.nav a:hover{ color:var(--ink-hi); }
.nav a:hover::after{ transform:scaleX(.4); }
.nav a.is-active{ color:var(--ink-hi); font-weight:600; }
.nav a.is-active::after{ transform:scaleX(1); }

/* --- dividers -------------------------------------------------------- */
.bar-div{
  flex:0 0 1px; width:1px;
  align-self:center; height:22px;
  background:var(--rule);
  margin:0 12px;
}
.bar-div.is-short{ height:12px; margin:0 10px; }

/* --- control groups -------------------------------------------------- */
.ctl-group{
  display:flex; align-items:center; gap:8px;
  flex:0 0 auto; min-width:0;
}
.ctl-kicker{
  font-family:var(--f-mono);
  font-size:8.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-lo);
  white-space:nowrap;
}
.ctl-caption{
  font-family:var(--f-mono);
  font-size:9px; font-weight:400;
  letter-spacing:.06em;
  color:var(--ink-lo);
  white-space:nowrap;
  transition:opacity var(--d-2) var(--e-out);
}
.ctl-caption.is-swapping{ opacity:0; }

/* --- topbar right ---------------------------------------------------- */
.topbar-right{
  margin-left:auto;
  display:flex; align-items:center; gap:0;
  flex:0 0 auto;
  padding-left:14px;
}
.tb-stat{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.tb-label{
  font-family:var(--f-mono);
  font-size:9.5px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-lo);
}
.tb-value{
  font-family:var(--f-mono);
  font-size:11px; font-weight:600;
  letter-spacing:.02em;
  color:var(--ink-hi);
  position:relative;
  display:inline-block;
}
.tb-swatch{
  width:7px; height:7px; flex:0 0 7px;
  background:var(--up);
  display:inline-block;
}
.tb-clock{
  font-family:var(--f-mono);
  font-size:11.5px; font-weight:500;
  letter-spacing:.04em;
  color:var(--ink-hi);
  min-width:66px; text-align:right;
}

/* ========================================================================
   5.7 SEGMENTED CONTROL
   ===================================================================== */
.seg{
  position:relative;
  display:inline-flex;
  align-self:center;
  height:var(--h-seg);
  border:1px solid var(--rule-hi);
  background:var(--rail-2);
  border-radius:var(--radius);
  overflow:hidden;
  flex:0 0 auto;
}
.seg-thumb{                                             /* motion 18 */
  position:absolute; top:0; bottom:0; left:0;
  width:0;
  background:var(--ink-hi);
  transform:translateX(0);
  transition:transform var(--d-3) var(--e-out), width var(--d-3) var(--e-out),
             background var(--d-2) var(--e-out);
  pointer-events:none;
  z-index:0;
}
.seg:has(button[data-filter="strong"].is-active) .seg-thumb{ background:var(--up); }
.seg button{
  position:relative; z-index:1;
  appearance:none; border:0; margin:0;
  background:transparent;
  display:inline-flex; align-items:center; gap:5px;
  padding:0 10px;
  cursor:pointer;
  line-height:1;
  white-space:nowrap;
  font-family:var(--f-mono);
  font-size:10px; font-weight:600;
  letter-spacing:.10em; text-transform:uppercase;
  color:var(--ink-lo);
  transition:color var(--d-2) var(--e-out);
}
.seg button:hover{ color:var(--ink-hi); }
.seg button.is-active{ font-weight:700; color:var(--on-color); }
.seg button:active{ animation:tr-press 90ms var(--e-fast); }   /* motion 35 */
.seg-count{
  font-family:var(--f-mono);
  font-size:8.5px; font-weight:400; font-style:normal;
  letter-spacing:.02em;
  color:currentColor; opacity:.55;
}
.seg.is-mini{ height:22px; }
.seg.is-mini button{ font-size:9px; padding:0 9px; letter-spacing:.08em; }

/* ========================================================================
   5.8 WORKSPACE, PANES, DRAGGER
   ===================================================================== */
.workspace{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  align-items:stretch;
  padding:var(--pad-ws);
  background:var(--void);
  gap:0;
}

.pane{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0; min-height:0;
  background:var(--pane);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  box-shadow:none;              /* depth is the surface ladder, not shadow */
}
body.is-booting .workspace > .pane{                     /* motion 2 */
  animation:tr-boot-pane var(--d-5) var(--e-out) both;
}
body.is-booting .workspace > .pane:nth-child(1){ animation-delay:0ms; }
body.is-booting .workspace > .pane:nth-child(3){ animation-delay:70ms; }
body.is-booting .workspace > .pane:nth-child(5){ animation-delay:140ms; }

.pane-accent{
  position:absolute; left:0; top:0; bottom:0;
  width:2px;
  background:var(--dir,var(--rule-hi));
  z-index:3;
  pointer-events:none;
}

.pane-head{
  flex:0 0 var(--h-panehead);
  height:var(--h-panehead);
  display:flex; align-items:center; gap:9px;
  padding:0 8px 0 12px;
  background:var(--rail);
  border-bottom:1px solid var(--rule);
  position:relative; z-index:2;
  overflow:hidden;          /* a narrow pane clips its head, never spills */
  transition:background var(--d-3) var(--e-io);
}
.pane-title{
  font-family:var(--f-sans);
  font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-hi);
  white-space:nowrap;
  transition:color var(--d-3) var(--e-io);
}
.pane-count{
  font-family:var(--f-mono);
  font-size:11px; font-weight:600;
  letter-spacing:.02em;
  color:var(--ink-hi);
  position:relative;
  display:inline-block;
  min-width:16px;
}
.pane-tf{
  font-family:var(--f-mono);
  font-size:9px; font-weight:600;
  letter-spacing:.10em; text-transform:uppercase;
  color:var(--ink-lo);
  border:1px solid var(--rule);
  padding:1px 4px;
}
.pane-sub{
  font-family:var(--f-mono);
  font-size:9px; font-weight:400;
  letter-spacing:.06em;
  color:var(--ink-lo);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width:0;
}
.pane-tools{ margin-left:auto; display:flex; align-items:center; gap:4px; flex:0 0 auto; }

.icon-btn{
  appearance:none; padding:0;
  border:1px solid transparent;
  background:transparent;
  width:22px; height:22px;
  display:grid; place-items:center;
  cursor:pointer;
  color:var(--ink-lo);
  transition:background var(--d-1) var(--e-fast), color var(--d-1) var(--e-fast),
             border-color var(--d-1) var(--e-fast);
}
.icon-btn:hover{ background:var(--rail-2); color:var(--ink-hi); border-color:var(--rule); }
.icon-btn:active{ animation:tr-press 90ms var(--e-fast); }
.icon-btn svg{ width:12px; height:12px; display:block; }

.esc-hint{
  font-family:var(--f-mono);
  font-size:8.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-lo);
  border:1px solid currentColor;
  padding:1px 4px;
  margin-right:2px;
}
.pane:not(.is-fullscreen) .esc-hint,
.pane:not(.is-fullscreen) [data-action="exit-fullscreen"]{ display:none; }
.pane.is-fullscreen .esc-hint{ animation:tr-esc-chip-in var(--d-2) var(--e-out) both; }

.pane-body{ flex:1 1 auto; min-height:0; position:relative; overflow:hidden; }
.pane-body.scroll{ overflow-y:auto; overflow-x:hidden; }

/* --- board ----------------------------------------------------------- */
.board{ position:absolute; inset:0; }
.board canvas{ display:block; width:100%; height:100%; cursor:crosshair; }
.board-park-toggle{
  position:absolute; z-index:2;
  appearance:none; padding:0;
  width:14px; height:14px;
  display:grid; place-items:center;
  background:var(--rail-2);
  border:1px solid var(--rule-hi);
  color:var(--ink-lo);
  cursor:pointer;
  line-height:1;
  font-family:var(--f-mono); font-size:9px; font-weight:700;
  transition:background var(--d-1) var(--e-fast), color var(--d-1) var(--e-fast);
}
.board-park-toggle:hover{ background:var(--ink-hi); color:var(--on-color); }
.board-empty{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--f-mono);
  font-size:10px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-lo);
  pointer-events:none;
}

/* --- dragger --------------------------------------------------------- */
.dragger{
  flex:0 0 var(--w-dragger);
  position:relative;
  cursor:col-resize;
  touch-action:none;
  background:var(--void);
}
.dragger::before{                                       /* motion 37 */
  content:"";
  position:absolute; top:0; bottom:0; left:50%;
  width:1px; margin-left:-.5px;
  background:var(--rule-hi);
  opacity:0;
  transition:opacity 160ms var(--e-out), background 160ms var(--e-out);
}
.dragger::after{
  content:"";
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:2px; height:24px;
  background:var(--ink-lo);
  opacity:0;
  transition:opacity 160ms var(--e-out), height 160ms var(--e-out),
             background 160ms var(--e-out);
}
.dragger:hover::before,.dragger:focus-visible::before,.dragger.is-dragging::before{ opacity:1; }
.dragger:hover::after,.dragger:focus-visible::after,.dragger.is-dragging::after{ opacity:1; }
.dragger.is-dragging::before{ background:var(--ink-hi); }
.dragger.is-dragging::after{ background:var(--ink-hi); height:44px; }
body.is-resizing{ cursor:col-resize; user-select:none; }
body.is-resizing .pane,body.is-resizing .pane *{ transition:none !important; }

/* --- fullscreen ------------------------------------------------------ */
.workspace.has-fullscreen > .pane,
.workspace.has-fullscreen > .dragger{ display:none; }
.workspace.has-fullscreen > .pane.is-fullscreen{
  display:flex;
  flex:1 1 100% !important;
  animation:tr-pane-zoom var(--d-4) var(--e-out);       /* motion 22 */
}
.pane.is-fullscreen .pane-head{ background:var(--ink-hi); border-bottom-color:var(--ink-hi); }
.pane.is-fullscreen .pane-title,
.pane.is-fullscreen .pane-count{ color:var(--on-color); }
.pane.is-fullscreen .pane-tf,
.pane.is-fullscreen .pane-sub,
.pane.is-fullscreen .esc-hint{ color:rgba(255,255,255,.62); border-color:rgba(255,255,255,.28); }
.pane.is-fullscreen .icon-btn{ color:rgba(255,255,255,.70); }
.pane.is-fullscreen .icon-btn:hover{
  background:rgba(255,255,255,.12); color:var(--on-color); border-color:transparent;
}
.pane.is-fullscreen .seg{ border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.08); }
.pane.is-fullscreen .seg button{ color:rgba(255,255,255,.62); }
.pane.is-fullscreen .seg button.is-active{ color:var(--ink-hi); }
.pane.is-fullscreen .seg-thumb{ background:var(--on-color); }

/* ========================================================================
   5.4 LIST ROW. NO COLUMN HEADERS.
   ===================================================================== */
.rows{ display:block; position:relative; }

.row{
  /* Flex is the safe base: it lays out correctly whether or not the row
     markup carries the .r-name wrapper. The grid below takes over the
     moment it does.                                                     */
  display:flex;
  align-items:center;
  height:var(--h-row);
  padding:0 10px 0 8px;
  column-gap:8px; gap:8px;
  border-bottom:1px solid var(--rail);
  position:relative; isolation:isolate; cursor:pointer;
  transition:background var(--d-1) var(--e-fast);
}
.row.is-entering{ animation:tr-row-in var(--d-3) var(--e-out) both; }  /* motion 8 */

.row:has(.r-name){
  display:grid;
  grid-template-columns:26px minmax(0,1fr) auto 44px 76px;
  /* rank | name | marks | age | pct */
  gap:0; column-gap:8px;
}
.row.is-ledger{ border-bottom-color:var(--rule); }      /* every 5th row */

/* Stagger the first screenful so a filter change reads as a sweep. */
.row:nth-child(1){ animation-delay:0ms; }
.row:nth-child(2){ animation-delay:14ms; }
.row:nth-child(3){ animation-delay:28ms; }
.row:nth-child(4){ animation-delay:42ms; }
.row:nth-child(5){ animation-delay:56ms; }
.row:nth-child(6){ animation-delay:70ms; }
.row:nth-child(7){ animation-delay:84ms; }
.row:nth-child(8){ animation-delay:98ms; }
.row:nth-child(9){ animation-delay:112ms; }
.row:nth-child(10){ animation-delay:126ms; }
.row:nth-child(11){ animation-delay:140ms; }
.row:nth-child(12){ animation-delay:154ms; }
.row:nth-child(13){ animation-delay:168ms; }
.row:nth-child(14){ animation-delay:182ms; }
.row:nth-child(n+15){ animation-delay:196ms; }

/* The rail is a pseudo-element so it never takes a grid track. The class
   hook is kept working for the same reason: absolutely positioned, out of
   flow, whichever way the row is built.                                  */
.row-rail{
  position:absolute; left:0; top:0; bottom:0;
  width:2px; background:var(--dir,var(--ink-hi));
  z-index:2; pointer-events:none;
}

/* hover rail — motion 16 */
.row::after{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:3px;
  background:var(--dir,var(--ink-hi));
  transform:scaleY(0); transform-origin:top;
  transition:transform 140ms var(--e-out);
  z-index:1;
}
.row:hover::after,.row:focus-visible::after{ transform:scaleY(1); }
.row:hover{ background:var(--rail); }

.r-rank{
  font-family:var(--f-mono);
  font-size:9.5px; font-weight:400;
  letter-spacing:.04em;
  color:var(--ink-lo);
  text-align:right;
  flex:0 0 26px;
}
.r-name{
  display:flex; align-items:center; gap:7px;
  min-width:0;
  flex:1 1 auto;
}
.r-sym{
  font-family:var(--f-sans);
  font-size:12.5px; font-weight:600;
  letter-spacing:-.006em;
  color:var(--ink-hi);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width:0;
  flex:0 1 auto;
}
/* Fallback path: when the row has no .r-name wrapper the symbol itself
   is the growing cell. */
.row:not(:has(.r-name)) .r-sym{ flex:1 1 auto; }
.r-marks{
  display:flex; align-items:center; justify-content:flex-end;
  gap:6px;
  flex:0 0 auto;
  margin-left:auto;
}
.row:has(.r-name) .r-marks{ margin-left:0; }
.r-age{
  font-family:var(--f-mono);
  font-size:9.5px; font-weight:500;
  letter-spacing:.04em;
  color:var(--ink-lo);
  text-align:right;
  white-space:nowrap;
  flex:0 0 44px;
  display:flex; align-items:center; justify-content:flex-end; gap:4px;
}
.r-age.is-fresh{ font-weight:600; color:var(--ink-hi); }
.r-age i{
  width:4px; height:4px;
  background:var(--dir,var(--ink-hi));
  display:inline-block;
  flex:0 0 4px;
}
.r-pct{
  font-family:var(--f-mono);
  font-size:12px; font-weight:600;
  letter-spacing:-.01em;
  color:var(--dir,var(--ink-hi));
  text-align:right;
  flex:0 0 76px;
}

/* --- the marks. circle / diamond / GO-STOP, unchanged in meaning ------
   A mark's direction can differ from the row's. It is carried EITHER as a
   .buy / .sell class OR as an inline --dir, because list.js writes the
   custom property and the tooltip writes the class. Both are honoured: the
   base rule reads --dir (inherited from the row when the mark does not set
   it), and the class pair overrides it on specificity when present.      */
.mark{ flex:0 0 auto; animation:tr-mark-in var(--d-3) var(--e-pop) both; }

.m-circle{
  width:19px; height:19px;
  border-radius:999px;
  display:grid; place-items:center;
  font-family:var(--f-mono);
  font-size:10px; font-weight:700;
  line-height:1;
  color:var(--on-color);
  background:var(--dir,var(--ink-hi));
}
.m-circle.buy{ background:var(--up); }
.m-circle.sell{ background:var(--down); }

.m-diamond{
  width:12px; height:12px;
  transform:rotate(45deg);
  background:var(--dir,var(--ink-hi));
  animation:tr-mark-in-diamond var(--d-3) var(--e-pop) both;
}
.m-diamond.buy{ background:var(--up); }
.m-diamond.sell{ background:var(--down); }

.m-go{
  font-family:var(--f-sans);
  font-size:9px; font-weight:800;
  letter-spacing:.06em;
  line-height:1;
  padding:3px 6px;
  color:var(--on-color);
  background:var(--dir,var(--ink-hi));
  border-radius:var(--radius);
}
.m-go.go{ background:var(--up); }
.m-go.stop{ background:var(--down); }

.m-tl{ display:inline-flex; align-items:center; gap:3px; font-size:11px; line-height:1; }
.m-tl b{
  font-family:var(--f-mono);
  font-size:8.5px; font-weight:700;
  letter-spacing:.04em;
  padding:1px 3px;
  color:var(--on-color);
  background:var(--dir,var(--ink-hi));
}
.m-tl b.buy{ background:var(--up); }
.m-tl b.sell{ background:var(--down); }

/* --- C / P links, options page only ---------------------------------- */
.cp{ display:inline-flex; gap:3px; flex:0 0 auto; }
.cp a{
  font-family:var(--f-mono);
  font-size:9.5px; font-weight:600;
  letter-spacing:.02em;
  width:17px; height:17px;
  display:grid; place-items:center;
  text-decoration:none;
  border:1px solid var(--rule-hi);
  color:var(--ink-lo);
  background:transparent;
  transition:border-color var(--d-1) var(--e-fast), color var(--d-1) var(--e-fast),
             background var(--d-1) var(--e-fast);
}
.cp a.c:hover{ border-color:var(--up); color:var(--on-color); background:var(--up); }
.cp a.p:hover{ border-color:var(--down); color:var(--on-color); background:var(--down); }

/* --- strong rows, graphite version ----------------------------------- */
.row.strong.up{     background:#BCEBCD; }
.row.strong.down{   background:#FBC4C4; }
.row.strong.up:hover{   background:#A8E3BE; }
.row.strong.down:hover{ background:#F8AFAF; }
.row.strong::before{                                    /* the always-on rail */
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:2px;
  background:var(--dir);
  z-index:2;
}
.row.strong .r-sym{ color:var(--dir-deep); font-weight:700; }
a.r-sym{ text-decoration:none; color:inherit; }
a.r-sym:hover{ text-decoration:underline; text-underline-offset:2px; }
.row.strong .r-pct{ font-weight:700; }
.row.strong .r-rank{ color:var(--ink); }

.tag-strong{
  font-family:var(--f-mono);
  font-size:8px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  line-height:1;
  padding:2px 4px;
  color:var(--on-color);
  background:var(--dir);
  flex:0 0 auto;
}

/* --- a signal that just landed --------------------------------------- */
.row.is-new.up{   animation:tr-row-flash-up   var(--d-9) var(--e-out); }  /* motion 11 */
.row.is-new.down{ animation:tr-row-flash-down var(--d-9) var(--e-out); }
.row.is-new::after{ animation:tr-row-rail 1080ms var(--e-out) both; }  /* motion 12 */

.list-empty{
  padding:34px 16px;
  text-align:center;
  font-family:var(--f-mono);
  font-size:10px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-lo);
}

/* ========================================================================
   7.11 TOOLTIP
   ===================================================================== */
.tip{
  position:fixed; z-index:200;
  pointer-events:none;
  background:var(--rail);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:9px 11px;
  max-width:250px;
  box-shadow:var(--sh-tip);
  color:var(--ink);
  opacity:0;
  transform:translateY(4px);
  transition:opacity 90ms var(--e-out), transform 90ms var(--e-out);   /* motion 32 */
}
.tip.is-open{ opacity:1; transform:none; transition-duration:140ms; }
.t-sym{
  display:block;
  font-family:var(--f-sans);
  font-size:13px; font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink-hi);
}
.t-pct{
  display:block;
  font-family:var(--f-mono);
  font-size:15px; font-weight:600;
  letter-spacing:-.02em;
  color:var(--dir,var(--ink-hi));
}
.t-rule{ display:block; height:1px; background:var(--rule); margin:7px 0; }
.t-row{ display:flex; align-items:center; gap:10px; justify-content:space-between; }
.t-key{
  font-family:var(--f-mono);
  font-size:10px; font-weight:400;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-lo);
  white-space:nowrap;
}
.t-val{
  font-family:var(--f-mono);
  font-size:10px; font-weight:600;
  letter-spacing:.02em;
  color:var(--ink-hi);
  white-space:nowrap;
}
.t-marks{ display:inline-flex; align-items:center; gap:5px; }
.t-marks .mark{ animation:none; }
.t-strong{
  display:inline-block;
  font-family:var(--f-mono);
  font-size:8.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:2px 5px; margin-top:5px;
  color:var(--on-color);
  background:var(--dir,var(--ink-hi));
}
.t-hint{
  display:block;
  font-family:var(--f-mono);
  font-size:8.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-lo);
}

/* ========================================================================
   8.2 DETAIL MODAL
   ===================================================================== */
.modal{
  position:fixed; inset:0; z-index:300;
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:none;                    /* .is-open flips this. Never !important. */
  align-items:center; justify-content:center;
  padding:20px;
}
.modal.is-open{ display:flex; animation:tr-modal-scrim var(--d-2) var(--e-io); } /* motion 24 */

.modal-card{
  width:96vw; height:92vh;
  max-width:1720px; max-height:1000px;
  background:var(--pane);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  box-shadow:var(--sh-modal);
  display:flex; flex-direction:column;
  min-width:0; min-height:0;
  animation:tr-modal-card var(--d-4) var(--e-out);      /* motion 25 */
}

.modal-head{
  flex:0 0 56px;
  display:flex; align-items:center; gap:14px;
  padding:0 12px 0 18px;
  background:var(--rail);
  border-bottom:1px solid var(--rule);
}
.m-sym{
  font-family:var(--f-sans);
  font-size:20px; font-weight:600;
  letter-spacing:-.018em;
  color:var(--ink-hi);
}
.m-pct{
  font-family:var(--f-mono);
  font-size:18px; font-weight:700;
  letter-spacing:-.02em;
  color:var(--dir,var(--ink-hi));
}
.m-price{
  font-family:var(--f-mono);
  font-size:14px; font-weight:500;
  color:var(--ink);
}
.m-div{ width:1px; height:26px; background:var(--rule); flex:0 0 1px; }
.m-meta{ display:flex; align-items:center; gap:7px; min-width:0; }
.m-chip{
  font-family:var(--f-mono);
  font-size:9px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-lo);
  background:var(--rail-2);
  border:1px solid var(--rule);
  padding:3px 6px;
  white-space:nowrap;
}
.modal-tools{ margin-left:auto; display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.modal-close{
  appearance:none; border:1px solid transparent; background:transparent;
  color:var(--ink-lo);
  font-size:20px; line-height:1;
  width:30px; height:30px;
  display:grid; place-items:center;
  cursor:pointer;
  transition:background var(--d-1) var(--e-fast), color var(--d-1) var(--e-fast);
}
.modal-close:hover{ background:var(--rail-2); color:var(--ink-hi); border-color:var(--rule); }

.modal-body{ flex:1 1 auto; min-height:0; position:relative; overflow:hidden; }
.modal-body canvas,.detail-canvas{ display:block; width:100%; height:100%; }
.modal-body.is-loading::after{                          /* motion 34 */
  content:"";
  position:absolute; top:0; bottom:0; left:0;
  width:220px;
  background:linear-gradient(90deg,transparent,rgba(11,16,22,.05),transparent);
  animation:tr-shimmer var(--d-9) var(--e-lin) infinite;
  pointer-events:none;
}

.modal-legend{
  flex:0 0 40px;
  display:flex; align-items:center; gap:18px;
  padding:0 16px;
  background:var(--abyss);
  border-top:1px solid var(--rule);
}
.lg-key{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--f-mono);
  font-size:9px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-lo);
}
.sw{ width:11px; height:11px; display:inline-block; flex:0 0 auto; background:var(--up); }
.sw.circle{ border-radius:999px; }
.sw.diamond{ width:9px; height:9px; transform:rotate(45deg); }
.sw.tag{ width:20px; height:11px; }
.sw.gap{
  width:14px; height:11px;
  background:repeating-linear-gradient(45deg,
    rgba(120,131,143,.5) 0 1px, transparent 1px 5px);
  border:1px solid var(--rule);
}
.lg-res{
  font-family:var(--f-mono);
  font-size:9.5px; font-weight:600;
  letter-spacing:.10em; text-transform:uppercase;
  color:var(--ink-hi);
  margin-left:12px;
}
.lg-keys{
  margin-left:auto;
  font-family:var(--f-mono);
  font-size:8.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-lo);
}

/* ========================================================================
   STATUS BAR
   ===================================================================== */
.statusbar{
  flex:0 0 var(--h-status);
  height:var(--h-status);
  display:flex; align-items:center; gap:0;
  padding:0 14px;
  background:var(--abyss);
  border-top:1px solid var(--rule);
  position:relative;
  animation:tr-boot-status var(--d-3) var(--e-out) 200ms both;   /* motion 3 */
  transition:background var(--d-5) var(--e-io);
}
.statusbar::before{                                     /* motion 38 */
  content:"";
  position:absolute; left:0; right:0; top:0; height:1px;
  background:var(--down);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--d-5) var(--e-io);
}
.statusbar.is-down{ background:#2A1416; }
.statusbar.is-down::before{ transform:scaleX(1); }
.statusbar.is-down .live-dot{ background:var(--down); animation-duration:900ms; }

.sb-item{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-mono);
  font-size:10px; font-weight:400;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-lo);
  white-space:nowrap;
}
.sb-item b{
  font-weight:600; letter-spacing:.06em;
  color:var(--ink-hi);
  text-transform:none;
  position:relative; display:inline-block;
}
.sb-div{ width:1px; height:11px; background:var(--rule); margin:0 12px; flex:0 0 1px; }
.sb-right{
  margin-left:auto;
  font-family:var(--f-mono);
  font-size:10px; letter-spacing:.06em;
  color:var(--ink-dim);
}
.live-dot{
  width:6px; height:6px;
  background:var(--up);
  display:inline-block;
  animation:tr-beacon 2200ms var(--e-lin) infinite;     /* motion 33 */
}

/* ========================================================================
   9. MOTION. THE COMPLETE KEYFRAME LIST.
   ===================================================================== */

/* 1 */ @keyframes tr-boot-bar{
  from{ opacity:0; transform:translateY(-12px); }
  to  { opacity:1; transform:none; }
}
/* 2 */ @keyframes tr-boot-pane{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}
/* 3 */ @keyframes tr-boot-status{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:none; }
}
/* 8 */ @keyframes tr-row-in{
  from{ opacity:0; transform:translateY(-4px); }
  to  { opacity:1; transform:none; }
}
/* 11 */ @keyframes tr-row-flash-up{
  from{ background:var(--up-w16); }
  to  { background:transparent; }
}
/* 11 */ @keyframes tr-row-flash-down{
  from{ background:var(--down-w16); }
  to  { background:transparent; }
}
/* 12 */ @keyframes tr-row-rail{
  0%   { transform:scaleY(0); opacity:1; }
  17%  { transform:scaleY(1); opacity:1; }
  100% { transform:scaleY(1); opacity:0; }
}
/* 20 */ @keyframes tr-interval-confirm{
  from{ transform:scaleX(0); opacity:1; }
  80% { transform:scaleX(1); opacity:1; }
  to  { transform:scaleX(1); opacity:0; }
}
/* 22 */ @keyframes tr-pane-zoom{
  from{ opacity:0; transform:scale(.985); }
  to  { opacity:1; transform:none; }
}
/* 23 */ @keyframes tr-esc-chip-in{
  from{ opacity:0; transform:translateX(4px); }
  to  { opacity:1; transform:none; }
}
/* 24 */ @keyframes tr-modal-scrim{
  from{ opacity:0; backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); }
  to  { opacity:1; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
}
/* 25 */ @keyframes tr-modal-card{
  from{ opacity:0; transform:translateY(14px) scale(.988); }
  to  { opacity:1; transform:none; }
}
/* 30 */ @keyframes tr-roll-out{
  from{ transform:translateY(0);     opacity:1; }
  to  { transform:translateY(-100%); opacity:0; }
}
/* 30 */ @keyframes tr-roll-in{
  from{ transform:translateY(100%); opacity:0; }
  to  { transform:none;             opacity:1; }
}
/* 31 */ @keyframes tr-value-underline{
  0%   { transform:scaleX(0); opacity:1; }
  55%  { transform:scaleX(1); opacity:1; }
  100% { transform:scaleX(1); opacity:0; }
}
/* 31 */ @keyframes tr-value-lift{
  0%   { color:var(--dir-lit,var(--ink-hi)); }
  100% { color:inherit; }
}
/* 33 */ @keyframes tr-beacon{
  0%   { box-shadow:0 0 0 0 rgba(56,203,110,.55); opacity:1; }
  55%  { box-shadow:0 0 0 5px rgba(56,203,110,0); opacity:.55; }
  100% { box-shadow:0 0 0 0 rgba(56,203,110,0);   opacity:1; }
}
/* 34 */ @keyframes tr-shimmer{
  from{ transform:translateX(-240px); }
  to  { transform:translateX(calc(100vw + 240px)); }
}
/* 35 */ @keyframes tr-press{
  from{ transform:translateY(.5px) scale(.97); }
  to  { transform:none; }
}
/* marks */ @keyframes tr-mark-in{
  from{ opacity:0; transform:scale(.55); }
  to  { opacity:1; transform:scale(1); }
}
@keyframes tr-mark-in-diamond{
  from{ opacity:0; transform:rotate(45deg) scale(.55); }
  to  { opacity:1; transform:rotate(45deg) scale(1); }
}

/* --- 30. the count odometer ------------------------------------------ */
/* The shell wraps a changing figure in two <i> elements and animates them
   inside a 1em box, so a count never pops or shifts the layout.          */
.pane-count.is-rolling,.tb-value.is-rolling,.seg-count.is-rolling,
.sb-item b.is-rolling{
  position:relative;
  display:inline-block;
  overflow:hidden;
  height:1.15em;
  vertical-align:bottom;
}
.is-rolling > i{ display:block; font-style:normal; }
.is-rolling > i.roll-out{
  position:absolute; left:0; top:0; right:0;
  animation:tr-roll-out var(--d-3) var(--e-out) both;
}
.is-rolling > i.roll-in{
  animation:tr-roll-in var(--d-3) var(--e-out) both;
}
.pane-count.is-rolling > i,.tb-value.is-rolling > i{ text-align:inherit; }

/* --- 31. the value underline ----------------------------------------- */
.did-change::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px;
  height:1px;
  background:var(--dir,var(--ink-hi));
  transform-origin:left;
  animation:tr-value-underline var(--d-5) var(--e-out) both;
  pointer-events:none;
}

/* --- 20. the interval confirmation sweep ----------------------------- */
.seg.did-confirm::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-3px;
  height:2px;
  background:var(--ink-hi);
  transform-origin:left;
  animation:tr-interval-confirm 480ms var(--e-out) both;
  pointer-events:none;
}

/* ========================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1500px){ .ctl-caption{ display:none; } }
@media (max-width:1320px){
  .tb-stat .tb-label{ display:none; }
  .ctl-kicker{ display:none; }
}
@media (max-width:1080px){
  .workspace{ flex-direction:column; }
  .workspace > .pane{ flex:1 1 auto !important; }
  .workspace > .dragger{ display:none; }
  .nav a{ padding:0 10px; }
  .modal{ padding:0; }
  .modal-card{ width:100vw; height:100vh; max-width:none; max-height:none; }
}

/* ========================================================================
   9.1 REDUCED MOTION. Selective, never a blanket kill: the movement goes,
   the information stays.
   ===================================================================== */
@media (prefers-reduced-motion:reduce){

  /* Entrances, state swaps, hovers and presses collapse to their end state. */
  .topbar,.workspace > .pane,.statusbar,.row,.mark,.m-diamond,
  .workspace.has-fullscreen > .pane.is-fullscreen,.pane.is-fullscreen .esc-hint,
  .modal.is-open,.modal-card,.is-rolling > i,.did-change::after,
  .seg.did-confirm::after,.row.is-new::after{
    animation-duration:1ms !important;
    animation-delay:0ms !important;
  }
  .row.is-new.up,.row.is-new.down{ animation-duration:1ms,400ms !important; }
  .seg-thumb,.nav a::after,.row::after,.row,.tip,.dragger::before,.dragger::after,
  .icon-btn,.cp a,.modal-close,.pane-head,.pane-title,.statusbar,.ctl-caption{
    transition-duration:1ms !important;
  }
  .seg button:active{ animation:none; }

  /* Disabled outright. No information is carried by these. */
  .live-dot{ animation:none; }
  .modal-body.is-loading::after{ animation:none; opacity:0; }
}


/* ========================================================================
   SYMBOL SEARCH  (client item 7)
   Type a name and the board dims everything that does not match while the
   list scrolls the first hit into view and marks every match.
   ===================================================================== */
.tr-search-group{ min-width:0; }
.tr-search{
  display:flex; align-items:center; gap:6px;
  height:var(--h-seg);
  padding:0 8px;
  background:var(--rail-2);
  border:1px solid var(--rule);
  transition:border-color var(--d-1) var(--e-fast), background var(--d-1) var(--e-fast);
}
.tr-search:focus-within{ border-color:var(--ink-hi); background:var(--pane); }
.tr-search-icon{ width:12px; height:12px; color:var(--ink-lo); flex:0 0 auto; }
.tr-search input{
  appearance:none; border:0; outline:0; background:transparent;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.04em;
  color:var(--ink-hi); width:120px; padding:0;
}
.tr-search input::placeholder{ color:var(--ink-dim); letter-spacing:.06em; }
.tr-search input::-webkit-search-cancel-button{ display:none; }
.tr-search-clear{
  appearance:none; border:0; background:transparent; cursor:pointer;
  color:var(--ink-lo); font-size:15px; line-height:1; padding:0 2px;
  visibility:hidden;
}
.tr-search.has-value .tr-search-clear{ visibility:visible; }
.tr-search-clear:hover{ color:var(--ink-hi); }

/* a matched row in the list */
.row.is-match{ background:rgba(236,72,153,.12); }
.row.is-match .r-sym{ color:var(--brand); font-weight:700; }
.row.is-match::after{ transform:scaleY(1); background:var(--brand); }
.rows.is-searching .row:not(.is-match){ opacity:.34; }


/* Call 2 is a triangle now (client item 5), so its legend swatch is one too. */
.sw.tri{
  width:0; height:0; background:none !important;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-bottom:9px solid var(--up);
}


/* ========================================================================
   FULLSCREEN LIST  (client item 8)
   At full width a single column of rows left a dead band across the middle:
   the name cell absorbed every spare pixel and pushed the marks and the
   value to opposite edges. Flowing the rows into fixed-measure columns uses
   the width for what the trader actually wants — more of the book on screen
   at once — and keeps each row at a readable measure.
   ===================================================================== */
.pane.is-fullscreen .rows{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(430px,1fr));
  align-content:start;
}
.pane.is-fullscreen .rows .row{ border-right:1px solid var(--rule); }
.pane.is-fullscreen .rows .row:nth-child(-n+1){ border-top:0; }
/* the search hit must still stand out across columns */
.pane.is-fullscreen .rows.is-searching .row.is-match{ outline:1px solid var(--brand); outline-offset:-1px; }


/* ---- search results (client item 3) --------------------------------- */
.tr-search-group{ position:relative; }
.tr-results{
  position:absolute; top:calc(100% + 5px); left:0; z-index:60;
  width:262px; max-height:326px; overflow-y:auto;
  background:var(--pane);
  border:1px solid var(--rule-hi);
  box-shadow:var(--sh-tip);
  display:none;
}
.tr-results.is-open{ display:block; animation:tr-results-in 140ms var(--e-out) both; }
@keyframes tr-results-in{
  from{ opacity:0; transform:translateY(-4px); }
  to  { opacity:1; transform:none; }
}
.tr-result{
  display:flex; align-items:center; gap:8px;
  padding:0 10px; height:28px;
  cursor:pointer;
  border-bottom:1px solid var(--rail-2);
}
.tr-result:last-child{ border-bottom:0; }
.tr-result.is-active{ background:var(--rail-2); }
.tr-result-sym{
  font-family:var(--f-sans); font-size:12px; font-weight:500;
  color:var(--ink-hi); flex:1 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tr-result-sym b{ color:var(--brand); font-weight:700; }
.tr-result-tag{
  font-size:7.5px; font-weight:800; letter-spacing:.1em;
  padding:2px 4px; color:#fff; background:var(--ink-hi); flex:0 0 auto;
}
.tr-result-pct{
  font-family:var(--f-mono); font-size:11px; font-weight:700;
  flex:0 0 auto;
}
.tr-result-pct.up{ color:var(--up); }
.tr-result-pct.down{ color:var(--down); }


/* ========================================================================
   LOADING SKELETON
   Shown until the first snapshot arrives. The shapes mirror the real row
   grid so the list does not jump when data replaces them.
   ===================================================================== */
.row.is-skeleton{
  cursor:default;
  animation:tr-sk-in 320ms var(--e-out) both;
}
.row.is-skeleton:hover{ background:none; }
.row.is-skeleton::after{ display:none; }
@keyframes tr-sk-in{ from{ opacity:0; } to{ opacity:1; } }

.sk{
  display:block;
  height:9px;
  border-radius:2px;
  background:linear-gradient(90deg,
    var(--rail-2) 0%, var(--rule) 40%, var(--rail-2) 80%);
  background-size:220% 100%;
  animation:tr-sk-sweep 1500ms linear infinite;
}
@keyframes tr-sk-sweep{
  from{ background-position:180% 0; }
  to  { background-position:-40% 0; }
}
.sk-rank { width:12px; margin-left:8px; }
.sk-name { height:10px; }
.sk-marks{ width:44px; margin-left:auto; }
.sk-age  { width:30px; }
.sk-pct  { width:46px; margin-left:auto; margin-right:10px; }

@media (prefers-reduced-motion: reduce){
  .sk{ animation:none; background:var(--rail-2); }
}