/* THE FELT - 01-base.css
   design tokens, atmosphere, top bar, panels, controls, ledger, matrix, cards, picker, buttons, grades
   Part of a multi-file build; load order is fixed in The_Felt.html. */

/* ============================================================
   THE FELT v3 - the material system

   v2 was a competent dark theme and looked like every other one: a single
   flat surface value, one 1px border, and one emerald accent doing every
   job on the screen - nav, focus, links, primary buttons, positive numbers,
   callouts, progress. Nothing had weight, nothing had a light source, and
   because the felt was green too the whole page was one colour.

   v3 fixes that with three ideas, and every rule below is one of them:

   1. SURFACES ARE LIT, NOT FILLED. Every raised thing is a vertical
      gradient plus a 1px top highlight (--hair) plus a real shadow. That
      is what makes a rectangle read as a panel instead of a div.
   2. THE CHROME IS COOL, THE TABLE IS WARM. Indigo runs the interface;
      green is spent almost entirely on the felt and the CALL action, so
      the table is the one warm object on a cool screen and your eye goes
      to it without being told to.
   3. COLOUR IS SEMANTIC, NOT DECORATIVE. Blue folds, green calls, red
      raises, gold is money. The action bar teaches a code, so nothing
      else is allowed to borrow those four hues.
   ============================================================ */
:root{
  /* ---- ink: cool near-black, four steps of elevation ---- */
  --bg:#0A0C10; --bg2:#06080B;
  --surface:#12151B; --surface2:#171B22; --surface3:#1E232C; --surface4:#262C37;
  --border:#1F242D; --border2:#2C333F; --border3:#3A424F;
  /* the 1px of light along the top edge of anything raised. Doing this with
     a border would eat a pixel of layout on all four sides; as an inset
     shadow it is free and only lights the edge facing the light. */
  --hair:inset 0 1px 0 rgba(255,255,255,.055);
  --hair-strong:inset 0 1px 0 rgba(255,255,255,.09);

  --text:#EDEFF3; --text2:#A7AFBC; --text3:#6B7382; --text4:#4A515C;

  /* ---- chrome: indigo -> periwinkle ---- */
  /* --accent is a FILL and takes white ink (5.1:1). --accent-hi is TEXT on
     a dark ground (8.5:1). Using the wrong one of the two is the only way
     to get an unreadable control out of this palette. */
  --accent:#5260DE; --accent-hi:#98A4FF; --accent-lo:#3B47B4; --accent-ink:#FFFFFF;
  --accent-dim:rgba(82,96,222,.15); --accent-line:rgba(152,164,255,.36);
  --accent-glow:rgba(82,96,222,.45);

  /* ---- semantic: these four are the action code, do not reuse ---- */
  --fold:#5B7DB1;  --fold-hi:#93B3DD;
  --call:#3FA96A;  --call-hi:#79D6A0;
  --raise:#E5484D; --raise-hi:#FF7E82;
  --allin:#8E2C33;
  --bet:#EFA13B;
  /* money is gold, everywhere, always */
  --gold:#E8B44C; --gold-hi:#F6D391;
  --info:#98A4FF;
  --raise-deep:#A92E36;

  /* ---- the felt: deep teal-charcoal, not card-room green ---- */
  --felt-1:#20514C; --felt-2:#153A3B; --felt-3:#0C2126; --felt-edge:#081619;
  --rail-1:#333944; --rail-2:#191D24; --rail-3:#232830;

  /* ---- gradients ---- */
  --g-surface:linear-gradient(180deg,#191E26 0%,#12151B 100%);
  --g-surface2:linear-gradient(180deg,#20252F 0%,#171B22 100%);
  --g-head:linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.012) 100%);
  --g-accent:linear-gradient(160deg,#6673F0 0%,#4552CE 100%);
  --g-well:linear-gradient(180deg,#05070A 0%,#0A0D12 100%);

  --ui:"Inter",system-ui,-apple-system,sans-serif;
  --disp:"Space Grotesk","Inter",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;

  --r:14px; --r-sm:9px; --r-xs:6px;

  /* Shadows carry the hairline with them, so one custom property is the
     whole recipe for "this is a raised surface". */
  --shadow:var(--hair),0 1px 2px rgba(0,0,0,.55),0 10px 30px -10px rgba(0,0,0,.6);
  --shadow-sm:var(--hair),0 1px 2px rgba(0,0,0,.45);
  --shadow-lg:0 0 0 1px rgba(255,255,255,.05),0 30px 80px -22px rgba(0,0,0,.8),0 8px 24px -8px rgba(0,0,0,.6);
  --glow-accent:0 0 0 1px var(--accent-line),0 8px 24px -8px var(--accent-glow);

  --ease:cubic-bezier(.34,.8,.36,1);
  --t:.16s var(--ease);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scrollbar-color:#2C333F #0A0C10;}
body{
  background:var(--bg); color:var(--text); font-family:var(--ui); font-size:14px;
  -webkit-font-smoothing:antialiased; line-height:1.5; min-height:100vh;
  position:relative;
}

/* ============================================================
   ATMOSPHERE
   Two full-page layers that sit behind everything and are never
   interactive. The bloom gives the page a light source; the grain kills
   the banding that any large dark gradient shows on a laptop panel and is
   most of the difference between "flat dark theme" and "a surface".
   Both drift, but over a minute and a half - slow enough that you cannot
   catch it moving while you are reading a decision.
   ============================================================ */
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;}
body::before{
  background:
    radial-gradient(1100px 620px at 50% -260px, rgba(82,96,222,.16), transparent 68%),
    radial-gradient(760px 520px at 88% 8%, rgba(120,90,220,.075), transparent 70%),
    radial-gradient(900px 600px at 6% 96%, rgba(32,81,76,.10), transparent 72%);
}
/* PERFORMANCE: the glow used to drift on a 90-second loop. Nobody could see
   it move, but it made the browser recomposite the whole screen - through the
   grain and the top bar - sixty times a second, forever. That was most of the
   app's idle CPU and the lag on laptops. The glow is static now. */
/* fractal grain, tiled - no network request and no banding */
body::after{
  /* plain alpha rather than mix-blend-mode:overlay - a full-screen blend
     layer makes every repaint anywhere on the page re-blend the viewport */
  opacity:.018;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:1;}
@media(prefers-reduced-motion:reduce){
  body::before{animation:none;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;}
}

::selection{background:var(--accent);color:#fff;}
a{color:var(--accent-hi);text-decoration:none;}
button{font-family:var(--ui);}
.hl{color:var(--accent-hi);font-weight:600;}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;
  padding:0 20px;height:58px;
  background:linear-gradient(180deg,rgba(16,19,25,.92) 0%,rgba(10,12,16,.86) 100%);
  /* no backdrop-filter: the bar is ~90% opaque, so the blur was invisible,
     but it re-blurred the page behind it on every scroll frame */
  border-bottom:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 24px -14px rgba(0,0,0,.9);
}
/* a hairline of accent light along the very bottom of the bar, so the chrome
   has a horizon rather than just stopping */
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(82,96,222,.5) 22%,rgba(152,164,255,.34) 50%,rgba(82,96,222,.5) 78%,transparent);
  opacity:.55;
}
.brand{display:flex;align-items:baseline;gap:9px;white-space:nowrap;}
.brand .mark{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.04em;color:var(--text);}
.brand .mark b{
  font-weight:700;
  background:linear-gradient(120deg,#98A4FF 0%,#6673F0 46%,#8E7BFF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand .tag{font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:var(--text4);text-transform:uppercase;}
.topbar nav{display:flex;gap:4px;flex:1;justify-content:center;min-width:0;
  /* eight destinations never wrap onto a second row - the bar is a fixed
     height, so a wrapped row would overflow it. It scrolls sideways instead. */
  flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;}
.topbar nav::-webkit-scrollbar{display:none;}
.topbar nav button{
  position:relative;
  font-family:var(--ui);font-size:13px;font-weight:600;color:var(--text2);
  background:transparent;border:0;border-radius:99px;padding:7px 15px;cursor:pointer;
  transition:background var(--t),color var(--t);white-space:nowrap;
}
.topbar nav button:hover{color:var(--text);background:rgba(255,255,255,.045);}
.topbar nav button.on{
  color:#fff;background:var(--g-accent);
  box-shadow:var(--hair-strong),0 2px 10px -3px var(--accent-glow);
}
.topbar nav button:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px;}
.topchip{font-family:var(--mono);font-size:11px;color:var(--text3);white-space:nowrap;}
.topchip b{color:var(--accent-hi);font-weight:600;}
@media(max-width:1080px){.brand .tag{display:none;}}
@media(max-width:1240px){
  .topbar{gap:12px;padding:0 12px;}
  .topbar nav{justify-content:flex-start;}
  .topbar nav button{padding:7px 11px;font-size:12.5px;}
  .topchip{display:none;}
}
@media(max-width:520px){.brand .mark{font-size:16px;}}

/* 1280 was leaving 160px of empty gutter on either side of a 1600px laptop
   while the views underneath stacked vertically for want of room, and the
   80px bottom margin was 80px of nothing to scroll past on every view. */
main{max-width:1520px;margin:16px auto 30px;padding:0 18px;}

section.view{display:none;}
section.view.on{display:block;animation:viewin .22s var(--ease);}
@keyframes viewin{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ---------- panels ---------- */
.panel{
  position:relative;
  background:var(--g-surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow);padding:18px;
}
.panel>h3{
  margin:-18px -18px 16px;padding:12px 18px;display:flex;align-items:center;gap:8px;
  font-family:var(--disp);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text2);border-bottom:1px solid var(--border);
  background:var(--g-head);
  border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
}
.panel>h3 .tag{margin-left:auto;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.04em;color:var(--text3);text-transform:none;}
.layout{display:grid;grid-template-columns:280px minmax(0,1fr) 300px;gap:16px;align-items:start;}
.layout.two{grid-template-columns:320px minmax(0,1fr);}
.layout.tworev{grid-template-columns:minmax(0,1fr) 340px;}
@media(max-width:1020px){.layout,.layout.two,.layout.tworev{grid-template-columns:1fr;}}

/* ---------- controls ---------- */
label.fld{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin:14px 0 6px;}
select,input[type=number],input[type=text],input[type=date],textarea{
  width:100%;background:var(--g-well);color:var(--text);border:1px solid var(--border2);
  border-radius:var(--r-sm);font-family:var(--mono);font-size:12.5px;padding:9px 10px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.45);
  transition:border-color var(--t),box-shadow var(--t);
}
select:focus,input:focus,textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.45),0 0 0 3px rgba(82,96,222,.2);
}
textarea{resize:vertical;min-height:66px;line-height:1.55;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:13px;font-weight:600;color:var(--text);
  background:var(--g-surface2);border:1px solid var(--border2);border-radius:var(--r-sm);
  box-shadow:var(--hair),0 1px 2px rgba(0,0,0,.4);
  padding:9px 16px;cursor:pointer;transition:background var(--t),border-color var(--t),transform .06s,box-shadow var(--t);
}
.btn:hover{background:linear-gradient(180deg,#282E39,#1D222A);border-color:var(--border3);}
.btn:active{transform:translateY(1px);box-shadow:var(--hair);}
.btn.primary{
  background:var(--g-accent);border-color:var(--accent-lo);color:#fff;
  box-shadow:var(--hair-strong),0 2px 4px rgba(0,0,0,.35),0 8px 22px -8px var(--accent-glow);
}
.btn.primary:hover{background:linear-gradient(160deg,#7683F5,#4E5BDD);}
.btn.ghost{background:transparent;box-shadow:none;}
.btn.sm{padding:6px 11px;font-size:12px;}
.btn.danger{color:#F2A0A4;border-color:#5A3238;background:linear-gradient(180deg,#2A1B1E,#1C1416);}
.btn:disabled{opacity:.4;cursor:default;pointer-events:none;}
.btn:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px;}
.chipset{display:flex;flex-wrap:wrap;gap:6px;}
.chip{
  font-family:var(--mono);font-size:11px;color:var(--text2);border:1px solid var(--border2);
  background:var(--g-well);border-radius:99px;padding:5px 11px;cursor:pointer;
  transition:color var(--t),border-color var(--t),background var(--t),box-shadow var(--t);
}
.chip:hover{border-color:var(--accent-line);color:var(--text);}
.chip.on{
  color:#fff;background:var(--g-accent);border-color:var(--accent-lo);font-weight:600;
  box-shadow:var(--hair-strong),0 3px 12px -4px var(--accent-glow);
}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.grow{flex:1;}
.hint{font-size:12px;color:var(--text3);line-height:1.6;margin-top:10px;}
.hr{border-top:1px solid var(--border);margin:15px 0;}
.pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px;
  border:1px solid var(--border2);border-radius:99px;padding:3px 9px;color:var(--text2);}
.pill.acc{color:var(--accent-hi);border-color:var(--accent-line);background:var(--accent-dim);}

/* ---------- stat ledger ---------- */
.ledger{font-size:12.5px;line-height:1.7;}
.ledger .k{color:var(--text3);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
.ledger .v{color:var(--text);font-family:var(--mono);font-size:12px;}
/* the one big number on a panel gets the chrome gradient - it is the only
   place in a stat block that is allowed to be loud */
.ledger .big{
  font-family:var(--disp);font-size:28px;font-weight:700;line-height:1.15;
  background:linear-gradient(140deg,#B9C2FF,#6673F0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:1px solid var(--border);padding:5px 0;}
.kv:last-child{border-bottom:0;}
table.tt{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11px;}
table.tt th{color:var(--text3);font-weight:600;text-align:left;letter-spacing:.06em;font-size:10px;text-transform:uppercase;border-bottom:1px solid var(--border2);padding:5px 5px;}
table.tt td{padding:5px 5px;border-bottom:1px solid var(--border);color:var(--text);}
table.tt td.num{text-align:right;}
table.tt tr:last-child td{border-bottom:0;}

/* ---------- 13x13 matrix ---------- */
.matwrap{overflow-x:auto;border-radius:var(--r-sm);}
.mat{display:grid;grid-template-columns:repeat(13,1fr);gap:2px;background:var(--bg2);padding:3px;
  border:1px solid var(--border);border-radius:var(--r-sm);min-width:560px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.5);}
.mat.mini{min-width:380px;gap:1px;}
.mcell{
  position:relative;aspect-ratio:1/1;min-width:0;cursor:pointer;border-radius:4px;overflow:hidden;
  font-family:var(--mono);font-size:clamp(8px,1.02vw,11px);font-weight:600;
  color:rgba(255,255,255,.95);display:flex;align-items:flex-start;padding:3px 0 0 4px;
  background:#171A20;text-shadow:0 1px 2px rgba(0,0,0,.8);
  transition:transform .1s var(--ease),box-shadow .1s var(--ease);
}
/* a highlight across the top of every cell, so the grid reads as 169 tiles
   rather than 169 flat swatches */
.mcell::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 55%,rgba(0,0,0,.14));}
.mat.mini .mcell{font-size:clamp(6px,.72vw,8.5px);padding:1px 0 0 2px;border-radius:2px;}
.mcell.dim{opacity:.15;}
.mcell.sel{outline:2px solid #fff;outline-offset:-2px;z-index:2;}
.mcell:hover{outline:1px solid var(--accent-hi);outline-offset:-1px;z-index:3;
  transform:scale(1.07);box-shadow:0 6px 18px -4px rgba(0,0,0,.75);}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-family:var(--mono);font-size:10.5px;color:var(--text2);}
.legend .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);}
.freqbar{display:flex;height:14px;border-radius:99px;background:var(--bg2);margin-top:12px;overflow:hidden;
  border:1px solid var(--border);box-shadow:inset 0 1px 3px rgba(0,0,0,.5);}
.freqbar>div{height:100%;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);}

/* ---------- playing cards ----------
   Warm paper, lit from the top-left, with a hard top highlight and a
   contact shadow. A card is the smallest object on the screen and the one
   you look at most, so it is worth the three extra declarations. */
.pcard{
  display:inline-flex;flex-direction:column;justify-content:space-between;position:relative;
  width:46px;height:64px;
  background:linear-gradient(168deg,#FFFFFF 0%,#F6F8FA 52%,#E6EAEF 100%);
  border:1px solid rgba(0,0,0,.5);border-radius:7px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 1px rgba(0,0,0,.4),0 4px 10px -3px rgba(0,0,0,.6);
  padding:4px 5px;font-family:var(--disp);
  vertical-align:middle;flex:none;
}
.pcard .r{font-size:20px;font-weight:700;line-height:1;letter-spacing:-.02em;}
.pcard .s{font-size:15px;line-height:1;align-self:flex-end;}
.pcard.cs{color:#1D222A;} .pcard.ch{color:#D0343A;} .pcard.cd{color:#2668C8;} .pcard.cc{color:#1F8A52;}
.pcard.md{width:46px;height:64px;padding:4px 5px;border-radius:7px;}
.pcard.md .r{font-size:19px;} .pcard.md .s{font-size:14px;}
.pcard.sm{width:34px;height:47px;padding:3px 4px;border-radius:5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 3px rgba(0,0,0,.5);}
.pcard.sm .r{font-size:15px;} .pcard.sm .s{font-size:11px;}
/* the back is the app's own colour, not the felt's */
.pcard.back{background:linear-gradient(165deg,#2B3040,#171A24 60%,#1F2432);border-color:rgba(0,0,0,.62);}
.pcard.back::after{content:"";position:absolute;inset:3px;border-radius:5px;
  border:1px solid rgba(152,164,255,.3);
  background:
    repeating-linear-gradient(45deg,rgba(152,164,255,.13) 0 1.5px,transparent 1.5px 5px),
    repeating-linear-gradient(-45deg,rgba(152,164,255,.07) 0 1.5px,transparent 1.5px 5px);
}
.cardline{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.slot{width:46px;height:64px;border:1.5px dashed var(--border3);border-radius:7px;display:inline-flex;align-items:center;justify-content:center;color:var(--text3);font-family:var(--mono);cursor:pointer;transition:border-color var(--t),color var(--t);flex:none;}
.slot:hover{border-color:var(--accent);color:var(--accent-hi);}
.slot.md{width:38px;height:53px;}

/* ---------- picker modal ---------- */
.modal{position:fixed;inset:0;background:rgba(4,5,8,.74);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:80;padding:16px;}
.modal.on{display:flex;animation:fadein .16s var(--ease);}
@keyframes fadein{from{opacity:0;}to{opacity:1;}}
.modal .box{max-width:660px;width:100%;box-shadow:var(--shadow-lg);}
.pickgrid{display:grid;grid-template-columns:repeat(13,1fr);gap:4px;margin:4px 0 14px;}
.pk{
  aspect-ratio:5/7;background:linear-gradient(168deg,#FFFFFF,#E9EDF1);border:1px solid rgba(0,0,0,.45);border-radius:6px;cursor:pointer;
  font-family:var(--disp);font-size:clamp(10px,1.5vw,14px);font-weight:700;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.02;color:#1D222A;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.4);
  transition:transform .09s var(--ease),box-shadow .09s var(--ease);
}
.pk:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px -5px rgba(0,0,0,.7);}
.pk.ch{color:#D0343A;} .pk.cd{color:#2668C8;} .pk.cc{color:#1F8A52;}
.pk.sel{outline:3px solid var(--accent);outline-offset:-3px;}
.pk.dead{opacity:.13;pointer-events:none;}

/* ---------- action buttons (strategy explorer etc.) ---------- */
.actbtns{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px;}
.abtn{
  border:1px solid var(--border2);background:var(--g-surface2);border-radius:var(--r-sm);cursor:pointer;color:var(--text);
  box-shadow:var(--hair);
  font-size:12px;padding:9px 12px;text-align:left;min-width:120px;transition:border-color var(--t),background var(--t);
}
.abtn:hover{border-color:var(--accent-line);background:linear-gradient(180deg,#272D38,#1C212A);}
.abtn .nm{display:block;font-weight:700;font-size:12.5px;letter-spacing:.03em;margin-bottom:2px;}
.abtn .st{display:block;color:var(--text3);font-family:var(--mono);font-size:10px;}
.abtn .bar{display:block;height:4px;margin-top:6px;background:var(--bg2);border-radius:99px;overflow:hidden;}
.abtn .bar i{display:block;height:100%;border-radius:99px;}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-family:var(--mono);font-size:10.5px;margin-bottom:10px;}
.crumbs .cr{border:1px solid var(--border);border-radius:99px;padding:4px 10px;color:var(--text2);cursor:pointer;transition:color var(--t),border-color var(--t);}
.crumbs .cr:hover{color:var(--accent-hi);border-color:var(--accent-line);}
.crumbs .cr.root{color:var(--accent-hi);}
.prog{height:5px;background:var(--bg2);border:1px solid var(--border);border-radius:99px;margin-top:8px;overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5);}
.prog i{display:block;height:100%;background:var(--g-accent);width:0%;border-radius:99px;transition:width .2s var(--ease);
  box-shadow:0 0 10px -1px var(--accent-glow);}
.status{font-family:var(--mono);font-size:11px;color:var(--text2);margin-top:10px;min-height:16px;}
.gauge{display:flex;align-items:center;gap:10px;margin-top:10px;}
.gauge .lab{font-family:var(--mono);font-size:10.5px;color:var(--text3);white-space:nowrap;}
.gauge .track{flex:1;height:8px;border-radius:99px;background:var(--bg2);border:1px solid var(--border);overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5);}
.gauge .track i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--gold),var(--raise));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);}

/* ---------- verdicts / grades ---------- */
.verdict{font-family:var(--disp);font-size:26px;font-weight:700;margin:6px 0 2px;letter-spacing:.01em;}
.verdict.good{color:var(--call-hi);} .verdict.mid{color:var(--gold);} .verdict.bad{color:var(--raise-hi);}
.grade{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:10px;font-family:var(--disp);font-weight:700;font-size:16px;
  box-shadow:var(--hair);
}
.grade.A{background:linear-gradient(160deg,rgba(63,169,106,.26),rgba(63,169,106,.10));color:var(--call-hi);border:1px solid rgba(63,169,106,.45);}
.grade.B{background:linear-gradient(160deg,rgba(232,180,76,.22),rgba(232,180,76,.08));color:var(--gold);border:1px solid rgba(232,180,76,.4);}
.grade.C{background:linear-gradient(160deg,rgba(239,161,59,.22),rgba(239,161,59,.08));color:var(--bet);border:1px solid rgba(239,161,59,.4);}
.grade.F{background:linear-gradient(160deg,rgba(229,72,77,.22),rgba(229,72,77,.08));color:var(--raise-hi);border:1px solid rgba(229,72,77,.45);}
.grade.sm{width:26px;height:26px;font-size:13px;border-radius:7px;}