/* cashcat.bot terminal — styles.css */
:root{
  --bg:#070B09;
  --surface:#0B120E;
  --surface-2:#0E1712;
  --line:#1C2721;
  --ink:#E8F0EA;
  --mut:#93A79B;
  --dim:#6E8177;
  --green:#00C805;
  --green-d:#0A2A12;
  --red:#FF4D4D;
  --ma-yellow:#E4D64B;
  --amber:#F5A524;
  --cyan:#3BD9D3;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ui:'Space Grotesk',system-ui,-apple-system,Segoe UI,sans-serif;
  --maxw:1180px;
  --r:10px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:#04140a;padding:8px 14px;z-index:99}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:40;background:rgba(7,11,9,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.head-inner{display:flex;align-items:center;gap:12px;height:54px;min-width:0}
.head-inner .site-nav{margin-right:auto}
.brand{display:flex;align-items:center;gap:9px;color:var(--green);text-decoration:none}
.brand-name{font-family:var(--ui);font-weight:700;letter-spacing:.06em;font-size:14px;color:var(--ink)}
.logo{flex:none}
.head-right{display:flex;align-items:center;gap:8px;flex:none;min-width:0}
.chip-sim{font-size:10px;letter-spacing:.12em;color:var(--amber);border:1px solid #4a3a12;background:#1a1408;padding:3px 8px;border-radius:999px;white-space:nowrap}

/* two-part honesty indicator: market data is real, signals are not */
.badge2{display:flex;gap:0;flex:none;border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.badge2 span{font-size:9.5px;letter-spacing:.11em;padding:3px 8px;white-space:nowrap;line-height:1.5}
.badge2 .b-live{color:#04140a;background:var(--green);font-weight:700}
.badge2 .b-sim{color:var(--amber);background:#1a1408}

/* header nav — five short items, horizontally scrollable on phones */
.site-nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-left:4px;min-width:0}
.site-nav::-webkit-scrollbar{height:0}
.site-nav a{
  font-family:var(--mono);font-size:12px;color:var(--mut);text-decoration:none;
  padding:6px 10px;border-radius:6px;white-space:nowrap;
  border-bottom:2px solid transparent;
}
.site-nav a:hover{color:var(--ink);background:#101a14}
.site-nav a[aria-current="page"]{color:var(--green);border-bottom-color:var(--green);background:#0b1a10}
.head-link{font-size:11px;letter-spacing:.12em;color:var(--mut);text-decoration:none;border:1px solid var(--line);padding:4px 9px;border-radius:6px}
.head-link:hover{color:var(--ink);border-color:var(--dim)}

/* ---------- hero ---------- */
.hero{padding:34px 20px 16px;display:flex;align-items:center;gap:clamp(14px,3vw,26px)}
/* The cat sits in the gutter beside the wordmark rather than above it, so it
   adds no height to the band the terminal has to share. */
.hero-cat{
  flex:none;margin:0;font-family:var(--mono);
  font-size:clamp(7.5px,2vw,11px);line-height:1.16;
  color:var(--green);white-space:pre;
}
.hero-cat i{color:var(--cyan);font-style:normal}
.hero-txt{min-width:0}
.hero h1{font-family:var(--ui);font-size:clamp(28px,6.2vw,44px);line-height:1.05;margin:0;letter-spacing:-.01em}
.hero-sub{margin:8px 0 2px;color:var(--ink);font-size:clamp(14px,2.6vw,17px)}
.hero-tag{margin:0;color:var(--dim);font-size:clamp(11px,2.3vw,13px);letter-spacing:.08em;text-transform:uppercase}

/* ---------- terminal ---------- */
.term{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface);
  overflow:hidden;
  box-shadow:0 24px 70px -30px #000;
}
.term-bar{
  display:flex;align-items:center;gap:12px;
  padding:0 12px;height:38px;
  background:var(--surface-2);border-bottom:1px solid var(--line);
}
.dots{display:flex;gap:6px;flex:none}
.dots i{width:9px;height:9px;border-radius:50%;background:#243029;display:block}
.dots i:first-child{background:#3a2020}
.dots i:nth-child(2){background:#3a3320}
.dots i:last-child{background:#1e3524}
.term-title{font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.term-status{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.st{font-size:10px;letter-spacing:.1em;padding:2px 7px;border-radius:5px;border:1px solid var(--line);color:var(--dim);white-space:nowrap}
.st-sim{color:var(--amber);border-color:#4a3a12}
.st-venue{color:var(--mut)}
.st-venue .dot{color:var(--green);animation:pulse 2.4s ease-in-out infinite}
.st-clock{color:var(--mut);font-variant-numeric:tabular-nums}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.term-body{
  height:clamp(520px,70vh,760px);
  min-height:520px;
  overflow-y:auto;overflow-x:hidden;
  /* no bottom padding: the docked prompt row provides the bottom edge */
  padding:14px 0 0;
  scrollbar-width:thin;scrollbar-color:#22302a transparent;
}
.term-body::-webkit-scrollbar{width:9px;height:9px}
.term-body::-webkit-scrollbar-thumb{background:#22302a;border-radius:6px}

.term-out{font-size:13px;line-height:1.42}
.ln{
  white-space:pre;
  --lnpad:14px;
  padding:0 var(--lnpad);
  min-height:1.42em;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
.ln::-webkit-scrollbar{height:0}
.echo{margin-top:9px}

/* The active input line is deliberately heavier than the echoed prompts in the
   scrollback above it: same glyphs, but a rule, a tinted band, an accent edge
   and two extra points of type size. The one place you can type should never
   be mistaken for output. */
.term-line{
  /* Docked to the bottom of the scrollport rather than left to float at the end
     of the output. Scrollback is long -- the boot demo alone overflows the box,
     and `cc help` more than doubles it -- so an in-flow prompt scrolls out of
     sight and a first-time visitor is left looking at a wall of text with no
     visible place to type. Sticky keeps it on screen at every scroll position
     while it stays part of the document flow, so it still receives focus in
     reading order and the scroll-to-bottom logic is unchanged.

     The background must be fully opaque: output now passes underneath this row,
     and a translucent band would let scrollback ghost through the one element
     that has to read as the live input. */
  position:sticky;bottom:0;z-index:4;

  /* `baseline` looked right but isn't: .inwrap's only child is absolutely
     positioned, so the flex item has no in-flow text to derive a baseline
     from and falls back to its bottom margin edge — which is what pushed the
     typed command a few pixels above the prompt. Centring the row and giving
     the mirror a line-height equal to .inwrap's height puts the two on the
     same optical line. */
  display:flex;align-items:center;gap:10px;
  padding:12px 14px 13px;font-size:15px;line-height:1.6;
  margin-top:8px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(0,200,5,.05),rgba(0,200,5,.015)),var(--surface);
  transition:background .18s ease;
}

/* Lift shadow, only while something is actually hidden beneath the row. Shown
   unconditionally it would draw a permanent seam under a terminal that has
   nothing scrolled away; toggled, it is a truthful depth cue that says "there
   is more above" the moment output starts sliding under the prompt. */
.term-line::after{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:22px;
  background:linear-gradient(to top,rgba(3,8,5,.55),rgba(3,8,5,0));
  opacity:0;transition:opacity .18s ease;pointer-events:none;
}
.term-body.is-lifted .term-line::after{opacity:1}
.term-line::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--green);opacity:.45;transition:opacity .18s ease,box-shadow .18s ease;
}
.term-line:focus-within{background:linear-gradient(180deg,rgba(0,200,5,.10),rgba(0,200,5,.03)),var(--surface)}
.term-line:focus-within::before{opacity:1;box-shadow:0 0 12px 1px rgba(0,200,5,.65)}
.prompt{flex:none;white-space:nowrap;font-weight:600}
.term-line .p-user{text-shadow:0 0 9px rgba(0,200,5,.45)}
.p-user{color:var(--green)}
.p-at,.p-path{color:var(--dim)}
.p-host{color:var(--cyan)}
.p-cmd{color:var(--ink)}
.inwrap{position:relative;flex:1;min-width:0;height:1.6em}
.mirror{position:absolute;inset:0;white-space:pre;overflow:hidden;pointer-events:none;color:var(--ink);line-height:1.6em}
.mirror .ghost{color:#41504a}
/* The caret blinks from first paint, before anything is focused, so the page
   answers "where do I type?" on its own. Unfocused it is dimmed rather than
   hidden — present enough to find, quiet enough to still read as inactive.
   A hard steps(1) blink, not a fade — a CRT caret snaps. The ring makes the
   block read a shade larger than a character cell without shifting the
   monospace grid, and the glow carries it against the dark surface. */
.mirror .cur{
  background:var(--green);color:#04140a;border-radius:1px;
  box-shadow:0 0 0 1px var(--green),0 0 10px rgba(0,200,5,.55);
  animation:blink 1s steps(1) infinite;
  opacity:.6;
}
.mirror .cur.on{opacity:1}
@keyframes blink{
  0%,54%{
    background:var(--green);color:#04140a;
    box-shadow:0 0 0 1px var(--green),0 0 12px rgba(0,200,5,.75);
  }
  55%,100%{background:transparent;color:var(--ink);box-shadow:none}
}
.tin{
  position:absolute;inset:0;width:100%;height:100%;
  background:transparent;border:0;padding:0;margin:0;
  font:inherit;font-family:var(--mono);font-size:15px;line-height:1.6em;
  color:transparent;caret-color:transparent;
}
.tin:focus{outline:none}
.term-line:focus-within{box-shadow:none}

/* watch stop bar — only present while `cc watch` is streaming.
   Deliberately not a chip: chips live in a horizontally scrolling row and the
   stop chip was landing off-screen on narrow viewports, which is exactly the
   case where Ctrl+C is unavailable too. This is a full-width control in normal
   document flow, 44px minimum tap target, red so it reads as an interrupt
   rather than another command shortcut. */
/* Fixed to the viewport, not to the card. `.term` sets overflow:hidden, so a
   sticky child would pin to the card rather than the screen and end up below
   the fold again — which is the exact bug this control exists to fix. Fixed
   positioning escapes that clip because the containing block is the viewport.
   It is only on screen while a stream is running, so overlaying the page for
   that window is the right trade. */
.watch-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  border-top:1px solid #7d2a26;
  background:rgba(20,6,7,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 -14px 34px -18px #000;
  animation:wsrise .18s ease-out;
}
.watch-bar[hidden]{display:none}
@keyframes wsrise{from{transform:translateY(100%)}to{transform:none}}
.watch-stop{
  flex:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:0 22px;
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.1em;
  color:#fff;background:#8f2b25;border:1px solid #c2453c;border-radius:9px;
  cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .08s ease;
}
.watch-stop:hover{background:#a83229;border-color:#d9564b}
.watch-stop:active{transform:translateY(1px)}
.watch-stop:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ws-ico{width:11px;height:11px;background:currentColor;border-radius:2px}
.watch-meta{
  display:inline-flex;align-items:center;gap:7px;min-width:0;
  font-family:var(--mono);font-size:12px;color:#e0b3af;
}
/* Pulse is decoration on top of a text label, never the only carrier of the
   "streaming" state — the words say it too, and reduced motion stills it. */
.ws-dot{
  flex:none;width:7px;height:7px;border-radius:50%;background:#ff6b60;
  animation:wspulse 1.15s ease-in-out infinite;
}
@keyframes wspulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion: reduce){
  .ws-dot{animation:none}
  .watch-bar{animation:none}
}
.ws-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* chips */
.term-chips{
  display:flex;gap:7px;padding:9px 10px;
  border-top:1px solid var(--line);background:var(--surface-2);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.term-chips::-webkit-scrollbar{height:0}
.term-chips button{
  flex:none;font-family:var(--mono);font-size:12px;
  color:var(--mut);background:#101a14;border:1px solid var(--line);
  padding:7px 11px;border-radius:7px;cursor:pointer;white-space:nowrap;
  min-height:34px;
}
.term-chips button:hover{color:var(--ink);border-color:#2b3b33;background:#13201a}
.term-chips button:active{transform:translateY(1px)}
.term-chips .stop{color:var(--red);border-color:#4a1f1f;background:#1c0f0f;order:-1}
.term-note{color:var(--dim);font-size:11.5px;margin:9px 2px 0}
.term-note strong{color:var(--amber);font-weight:500}

/* ---------- output token colours ---------- */
.up{color:var(--green)}
.down{color:var(--red)}
.warn{color:var(--amber)}
.k{color:var(--cyan)}
.grp{color:var(--cyan);letter-spacing:.08em}
.ink{color:var(--ink)}
.mut{color:var(--mut)}
.dim{color:var(--dim)}
.grid{color:#1b2620}
.cu{color:var(--green)}
.cd{color:var(--red)}
.wu{color:#0a8c07}
.wd{color:#a63636}
.mark{color:#4a5d54}
.inv{background:var(--green);color:#04140a;font-weight:700}
.live{background:var(--green);color:#04140a;font-weight:700;border-radius:3px}
.simbadge{background:#3a2c08;color:var(--amber);font-weight:700;border-radius:3px}
.big{font-size:1.9em;line-height:1.2;color:var(--ink);font-weight:700}
.big2{font-size:1.5em;color:var(--ink);font-weight:700}
.bigsig{color:var(--green);font-weight:700}
.jkey{color:var(--cyan)}
.jstr{color:var(--green)}
.jnum{color:var(--amber)}
.lnk{color:#5fb0aa;text-decoration:underline;text-underline-offset:2px}
.lnk:hover{color:var(--cyan)}

/* ---------- page sections ---------- */
.sec{padding:46px 20px 6px}
.strip{padding:44px 20px 6px}
.sec-h{font-family:var(--ui);font-size:clamp(17px,3.4vw,22px);margin:0 0 18px;letter-spacing:-.01em}
.sec-sub{color:var(--dim);font-weight:500;font-size:.72em}
.sec-h code,.sec-sub code{font-family:var(--mono);color:var(--green);font-size:.92em}
.sub-h{font-family:var(--ui);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:26px 0 10px}

.mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.mod{border:1px solid var(--line);border-radius:9px;padding:14px;background:var(--surface);position:relative}
.mod-n{font-size:10px;color:var(--dim);letter-spacing:.15em}
.mod h3{font-family:var(--ui);font-size:14px;margin:6px 0 6px}
.mod p{font-size:12px;color:var(--mut);line-height:1.55;margin:0 0 10px}
.mod p strong{color:var(--ink);font-weight:500}
.mod code{font-size:11.5px;color:var(--green);border:1px solid #1f3327;background:#0b1a10;padding:3px 7px;border-radius:5px}

.two{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.two>*{min-width:0}
.lead{font-family:var(--ui);font-size:17px;color:var(--ink);margin:0 0 12px}
.two p{font-size:13.5px;color:var(--mut);line-height:1.7}
.callout{
  margin:18px 0 0;padding:14px 16px;border-left:2px solid var(--green);
  background:#0a140e;color:var(--ink);font-size:13px;line-height:1.6;
}
.code{
  border:1px solid var(--line);border-radius:9px;background:#080D0A;
  padding:14px;overflow-x:auto;font-size:11.5px;line-height:1.55;color:var(--mut);margin:0;
  max-width:100%;
}
.code code{font-family:var(--mono);white-space:pre}
.fine{font-size:11.5px;color:var(--dim);margin-top:10px}
.fine code{color:var(--green)}

.rm{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.rm li{font-size:13px;color:var(--mut);border:1px solid var(--line);border-radius:8px;padding:11px 13px;background:var(--surface)}
.rm-p{display:inline-block;min-width:62px;color:var(--green);font-weight:700;letter-spacing:.08em}
.rm-p.p3{color:var(--amber)}
.rm-launch{border-color:#1f3d26;background:#0a1a10;color:var(--ink)}
.notlist{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:7px}
.notlist li{font-size:11.5px;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.notlist li::before{content:"✗ ";color:var(--red)}

.lore-grid{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:center}
.lore-copy p{font-size:13.5px;color:var(--mut);line-height:1.75}
.lore-copy b{color:var(--ink)}
.lore-close{font-family:var(--ui);color:var(--green)!important;font-size:16px}
.mascot{width:100%;max-width:300px;justify-self:center;filter:drop-shadow(0 18px 40px rgba(0,200,5,.12))}

/* ---------- footer ---------- */
.site-foot{margin-top:52px;border-top:1px solid var(--line);background:var(--surface);padding:26px 0 40px}
.ca-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ca-label{font-size:10px;letter-spacing:.14em;color:var(--dim)}
.ca{font-size:12px;color:var(--ink);word-break:break-all;user-select:all}
.ca-copy{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--green);
  background:#0b1a10;border:1px solid #1f3327;border-radius:6px;padding:5px 10px;cursor:pointer;min-height:32px;
}
.ca-copy:hover{background:#102618}
.foot-nav{display:flex;gap:16px;flex-wrap:wrap;margin:16px 0}
.foot-nav a{font-size:12px;color:var(--mut);text-decoration:none}
.foot-nav a:hover{color:var(--ink)}
.disc{font-size:11.5px;color:var(--dim);line-height:1.75;max-width:900px}
.disc-wrap .disc{margin-top:10px}
.disc p+p{margin-top:9px}
.disc b{color:var(--mut)}
.disc-wrap{max-width:900px}
.disc-sum{font-size:11.5px;line-height:1.75;color:var(--mut)}
.foot-end{font-size:11px;color:#4c5a52;margin-top:18px}

/* ---------- shared "MORE" disclosure ----------
   Used by the footer disclaimer and the note under the terminal. In both cases
   the visible lead is the honest summary and only elaboration folds away — the
   collapsed state never hides a caveat that qualifies what is still on screen. */
.more-sum{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  list-style:none;cursor:pointer;
}
.more-sum::-webkit-details-marker{display:none}
.more-sum:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}
.more-tag{
  flex:none;font-size:10px;letter-spacing:.08em;color:var(--green);
  border:1px solid rgba(0,200,5,.4);border-radius:2px;padding:1px 6px;
  transition:background .15s ease,border-color .15s ease;
}
/* Decorative only — <details> already announces its own state and the span is
   aria-hidden, so this label is never read out twice. */
.more-tag::after{content:"MORE"}
.more-wrap[open] .more-tag::after{content:"LESS"}
.more-sum:hover .more-tag{background:rgba(0,200,5,.12);border-color:var(--green)}

/* ---------- section dividers ----------
   One hairline between adjacent sections, matching the rule the footer already
   carries. Every section inside <main> shares a content column (1180px on the
   terminal page, 900px on the prose pages), so the lines all measure the same
   width per page. .page-head is always first, so its narrower 820px column
   never gets a rule above it and cannot break the alignment. */
main>section+section{border-top:1px solid var(--line);margin-top:22px}
#terminal{padding-top:26px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .two{grid-template-columns:1fr}
  .lore-grid{grid-template-columns:1fr}
  .mascot{max-width:220px}
}
@media (max-width:640px){
  .wrap{padding:0 12px}
  .term-body{height:70vh;min-height:460px;padding:10px 0 0}
  .term-out{font-size:12.5px;line-height:1.4}
  .ln{--lnpad:9px}
  /* prose lines soft-wrap on phones; column-aligned art keeps its own
     horizontal scroll so glyphs never break mid-row */
  .ln.wrp{white-space:pre-wrap;overflow-x:hidden;word-break:break-word}
  .term-line{padding:10px 9px 11px;font-size:14px}
  .tin{font-size:14px}
  .term-title{display:none}
  .st-venue{display:none}
  .hero{padding:22px 12px 12px;gap:12px}
  .sec,.strip{padding:34px 12px 4px}
  .mods{grid-template-columns:1fr 1fr}
  .mod p{font-size:11.5px}
}
/* narrow: header becomes two rows — brand + badge, then the scrolling nav.
   keeps the nav reachable without ever pushing the page wider than the
   viewport. */
@media (max-width:760px){
  .head-inner{flex-wrap:wrap;height:auto;padding-top:9px;padding-bottom:0;gap:8px}
  .brand{order:1}
  .head-right{order:2;margin-left:auto}
  .head-inner .site-nav{order:3;flex:1 0 100%;margin:0 -4px;padding:0 4px;width:100%}
  .badge2 span{font-size:8.5px;padding:3px 6px;letter-spacing:.08em}
}
@media (max-width:420px){
  .term-out{font-size:11.5px}
  .term-line{font-size:13px}
  .tin{font-size:13px}
  .mods{grid-template-columns:1fr}
  .head-link{display:none}
  /* The narrowest case is the one this control exists for: give the button the
     full width rather than letting the tick counter squeeze it. */
  .watch-bar{flex-wrap:wrap;gap:7px;padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px))}
  .watch-meta{flex:1 1 100%;justify-content:center;order:-1}
  .watch-stop{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  /* No blink, but the caret must stay just as findable — hold it solid. */
  .mirror .cur{
    background:var(--green);color:#04140a;
    box-shadow:0 0 0 1px var(--green),0 0 12px rgba(0,200,5,.75);
  }
}


/* ---------- TradingView Lightweight Charts panel (inside the scrollback) ---------- */
.ln.blk{white-space:normal;overflow:visible;padding:0 14px;min-height:0}
.tvpanel{
  border:1px solid var(--line);border-radius:8px;background:#080D0A;
  margin:2px 0 4px;overflow:hidden;max-width:100%;
}
.tvpanel.sim{border-color:#4a3a12}
.tvpanel-head{
  display:flex;align-items:center;gap:10px;
  padding:6px 10px;border-bottom:1px solid var(--line);background:var(--surface-2);
  font-size:11px;color:var(--dim);
}
.tvpanel.sim .tvpanel-head{border-bottom-color:#3a2c08}
/* min-width:0 is what lets the ellipsis actually appear: without it the flex
   item refuses to shrink below its text width and slides under the badge. */
.tvpanel-title{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;letter-spacing:.06em}
.tvpanel-badge{margin-left:auto;flex:none;font-size:9.5px;letter-spacing:.12em;padding:2px 7px;border-radius:3px;font-weight:700}
.tvpanel-badge.is-live{background:var(--green);color:#04140a}
.tvpanel-badge.is-sim{background:#3a2c08;color:var(--amber)}
.tvpanel-chart{height:320px;width:100%;position:relative}
.tvpanel-chart.failed{
  display:flex;align-items:center;padding:16px;height:auto;min-height:90px;
  color:var(--amber);font-size:11.5px;line-height:1.6;white-space:normal;
}
.tvpanel-foot{padding:5px 10px;border-top:1px solid var(--line);font-size:10.5px;color:var(--dim);white-space:normal}
.tvpanel.sim .tvpanel-foot{border-top-color:#3a2c08;color:var(--amber)}
.tvpanel.narrow .tvpanel-chart{height:240px}
@media (max-width:640px){
  .ln.blk{padding:0 9px}
  .tvpanel-chart{height:240px}
  .tvpanel-title{font-size:10px}
}

/* ---- embed panel (cc chart) --------------------------------------------
   Third-party chart, opened on request. Border is cyan rather than green so
   it never reads as one of our own LIVE panels. */
.embedpanel{border-color:#1d4a4d}
.embedpanel .embed-head{border-bottom-color:#1d4a4d}
.embed-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:6px 10px;border-bottom:1px solid #1d4a4d;background:#08120f
}
.embed-tabs{display:flex;gap:6px;flex-wrap:wrap}
.embed-tab{
  font:inherit;font-size:9.5px;letter-spacing:.1em;cursor:pointer;
  padding:4px 9px;border-radius:3px;border:1px solid var(--line);
  background:transparent;color:var(--dim);min-height:28px
}
.embed-tab:hover{color:var(--cyan);border-color:#1d4a4d}
.embed-tab.on{background:#123c3e;color:var(--cyan);border-color:var(--cyan)}
.embed-out{
  margin-left:auto;font-size:10px;color:var(--cyan);text-decoration:none;
  border-bottom:1px dotted currentColor;padding:2px 0
}
.embed-out:hover{color:var(--green)}
.embed-close{
  font:inherit;font-size:9.5px;letter-spacing:.08em;cursor:pointer;
  padding:4px 9px;border-radius:3px;border:1px solid var(--line);
  background:transparent;color:var(--dim);min-height:28px
}
.embed-close:hover{color:var(--red);border-color:var(--red)}
.embed-holder{
  display:flex;flex-direction:column;width:100%;
  height:clamp(300px,52vh,520px);background:#05100c
}
.embed-status{
  flex:none;margin:0;padding:6px 10px;font-size:10.5px;line-height:1.5;
  color:var(--dim);border-bottom:1px solid #12211c
}
.embed-status.warn{color:var(--amber)}
.embed-frame{flex:1 1 auto;display:block;width:100%;min-height:0;border:0;background:transparent}
.embed-frame.fade{animation:embfade .5s ease both}
@keyframes embfade{from{opacity:0}to{opacity:1}}
.embed-gone{margin:0;padding:4px 0;font-size:11px;color:var(--dim)}
@media (max-width:640px){
  .embed-holder{height:clamp(260px,46vh,380px)}
  .embed-out{margin-left:0}
  .embed-tab,.embed-close{font-size:9px;padding:5px 8px}
}
@media (prefers-reduced-motion:reduce){
  .embed-frame.fade{animation:none}
}

/* A wrapped prose line re-issues its indent as padding, so the wrapped
   remainder lines up with the first character instead of the left margin.
   Expressed against --lnpad so it stays correct at every breakpoint. */
.ln[data-hang]{padding-left:calc(var(--lnpad) + var(--hang))}

/* ---- grouped output sections -------------------------------------------
   A very light tint plus a hairline so INDICATORS and SIGNAL read as blocks
   instead of loose lines. Tone is carried by the left edge and a text label,
   never by the fill alone. */
/* Scoped to .term-out on purpose: the page sections on the prose pages also use
   class="sec", so an unscoped rule here painted a box around every one of them. */
.term-out .sec{
  margin:1px 0 2px;padding:6px 0;border-radius:6px;
  background:rgba(255,255,255,.028);
  border:1px solid var(--line);border-left-width:2px
}
.term-out .sec-live{border-left-color:var(--green);background:rgba(0,200,5,.045)}
.term-out .sec-sim{border-left-color:var(--amber);background:rgba(255,176,0,.05)}
.term-out .sec .ln{min-height:1.42em}
.term-out .sec .ln:first-child{margin-bottom:1px}
@media (prefers-contrast:more){
  .term-out .sec{background:rgba(255,255,255,.06)}
}

/* ---------- moving-average legend + RSI / MACD sub-panes ----------------- */
.tvpanel-legend{
  position:absolute;top:6px;left:8px;z-index:3;pointer-events:none;
  display:flex;flex-wrap:wrap;gap:4px 12px;
  font-size:10px;line-height:1.5;letter-spacing:.02em
}
.tvleg-item{display:inline-flex;align-items:center;gap:5px;
  background:rgba(6,11,8,.72);padding:1px 6px;border-radius:3px}
.tvleg-item i{width:8px;height:2px;border-radius:1px;flex:none}
.tvleg-k{color:var(--dim)}
.tvleg-v{color:var(--ink)}

.tvsub{border-top:1px solid var(--line)}
.tvpanel.sim .tvsub{border-top-color:#3a2c08}
.tvsub-sum{
  display:flex;align-items:baseline;gap:10px;cursor:pointer;
  padding:5px 10px;font-size:10.5px;color:var(--dim);
  list-style:none;user-select:none
}
.tvsub-sum::-webkit-details-marker{display:none}
/* the caret is drawn rather than relying on the UA marker, which differs
   between browsers and cannot be coloured */
.tvsub-sum::before{
  content:'▸';color:var(--cyan);flex:none;font-size:9px;
  transition:transform .16s ease;display:inline-block
}
.tvsub[open] .tvsub-sum::before{transform:rotate(90deg)}
.tvsub-sum:hover{color:var(--ink);background:rgba(255,255,255,.02)}
.tvsub-sum:focus-visible{outline:1px solid var(--cyan);outline-offset:-2px}
.tvsub-name{color:var(--cyan);letter-spacing:.06em;flex:none}
.tvsub-hint{color:var(--dim);opacity:.8;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tvsub-chart{width:100%;position:relative}
.tvsub-rsi{height:104px}
.tvsub-macd{height:116px}
.tvpanel.narrow .tvsub-rsi{height:88px}
.tvpanel.narrow .tvsub-macd{height:96px}
@media (prefers-reduced-motion:reduce){
  .tvsub-sum::before{transition:none}
}
@media (max-width:640px){
  .tvsub-hint{display:none}
  .tvsub-rsi{height:88px}
  .tvsub-macd{height:96px}
  .tvpanel-legend{font-size:9px;gap:3px 8px}
}

/* ---------- full-screen chart dialog (expand ⤢) --------------------------- */
.embed-expand{
  background:#0d1a1b;border:1px solid #1d4a4d;color:var(--cyan);
  font:inherit;font-size:10px;letter-spacing:.08em;padding:5px 9px;
  border-radius:3px;cursor:pointer
}
.embed-expand:hover{border-color:var(--cyan);background:#123c3e}
.embed-expand:focus-visible{outline:1px solid var(--cyan);outline-offset:1px}

/* the dialog is in the top layer, so the terminal's overflow:hidden and the
   card's stacking context cannot clip or cover it */
.embed-modal{
  width:min(1500px,96vw);height:92vh;max-width:none;max-height:none;
  padding:0;border:1px solid #1d4a4d;border-radius:8px;
  background:var(--panel,#0B120E);color:var(--ink);
  display:flex;flex-direction:column;overflow:hidden
}
.embed-modal::backdrop{background:rgba(3,6,4,.82)}
.embed-modal[open]{animation:embmodal .18s ease both}
@keyframes embmodal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.embed-modal-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 12px;border-bottom:1px solid #1d4a4d;background:rgba(255,255,255,.02)
}
.embed-modal-title{font-size:11px}
.embed-modal-head .embed-tabs{margin-left:auto}
.embed-modal-body{flex:1 1 auto;min-height:0;display:flex;background:#050906}
.embed-modal-frame{flex:1 1 auto;width:100%;height:100%;border:0;display:block}
html.modal-open,html.modal-open body{overflow:hidden}
@media (max-width:640px){
  .embed-modal{width:100vw;height:100vh;border-radius:0;border:0}
  .embed-modal-head{padding:8px 10px;gap:7px}
  .embed-modal-title{width:100%;font-size:10px}
  .embed-modal-head .embed-tabs{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .embed-modal[open]{animation:none}
}
.embed-tab .btn-short{display:none}
@media (max-width:640px){
  .embed-expand .btn-word{display:none}
  .embed-expand{padding:5px 9px;font-size:11px;line-height:1}
  /* short provider names keep the whole toolbar on one row */
  .embed-tab .btn-word{display:none}
  .embed-tab .btn-short{display:inline}
}

/* =========================================================================
   CASHCAT WARM THEME — chrome only
   -------------------------------------------------------------------------
   Everything below repaints structure: header, hero, terminal frame, cards,
   buttons, dividers, footer. It deliberately does NOT touch the terminal's
   output palette. .up/.down/.warn/.k, the LIVE and SIMULATED badges, the
   INDICATORS/SIGNAL boxes and every chart colour keep their exact previous
   values, because in a trading readout green/red/amber carry meaning and a
   restyle must not quietly redefine them.

   Direction: banknote. Warm olive-black paper, engraved money-green, cream
   ink for headings, mint as the interactive accent so chrome highlights are
   visually distinct from output semantics. Robinhood neon (--green) is kept
   for brand and live-state only, which is what makes it still read as loud.
   ========================================================================= */
:root{
  /* warmer canvas — the old one was blue-leaning near-black */
  --bg:#07100A;
  --surface:#0C1610;
  --surface-2:#101C14;
  --line:#22322A;

  /* chrome-only additions */
  --cream:#F3EEDE;        /* headings, banknote paper ink */
  --paper:#DCD3BC;        /* muted paper for secondary chrome text */
  --money:#1E8A4E;        /* engraved banknote green — borders and fills */
  --money-d:#0A2416;      /* deep tint behind money-green chrome */
  --mint:#7FE0A6;         /* interactive accent for chrome */
  --mint-d:#12362A;
  --r:14px;
}

/* Engraved paper. Two warm glows plus a very low-contrast diagonal hatch, the
   way a banknote has a guilloché ground under the print. Fixed so it reads as
   a surface the page sits on rather than something that scrolls with it. */
body{
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(30,138,78,.16), transparent 70%),
    radial-gradient(760px 420px at 96% 4%, rgba(127,224,166,.07), transparent 72%),
    repeating-linear-gradient(45deg, rgba(243,238,222,.006) 0 1px, transparent 1px 11px),
    var(--bg);
  background-attachment:fixed;
}

/* ---------- header ---------- */
.site-head{
  background:linear-gradient(180deg, rgba(9,18,12,.94), rgba(7,16,10,.86));
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg, var(--money), rgba(127,224,166,.35) 42%, transparent) 1;
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  backdrop-filter:blur(10px) saturate(1.2);
}
.brand-name{color:var(--cream);letter-spacing:.08em}
.brand:hover .brand-name{color:var(--mint)}
.site-nav a{color:var(--paper);opacity:.72;border-radius:7px}
.site-nav a:hover{color:var(--cream);opacity:1;background:rgba(127,224,166,.08)}
.site-nav a[aria-current="page"]{
  color:var(--mint);opacity:1;background:var(--mint-d);
  border-bottom-color:var(--mint);
}
.head-link{
  color:var(--paper);border-color:var(--line);border-radius:7px;
  background:rgba(243,238,222,.02);
}
.head-link:hover{color:var(--mint);border-color:var(--mint);background:var(--mint-d)}

/* ---------- hero ---------- */
.hero{position:relative}
/* a soft coin of light behind the cat, like the watermark on a note */
.hero::before{
  content:"";position:absolute;left:clamp(-40px,2vw,20px);top:8%;
  width:clamp(160px,26vw,300px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, rgba(30,138,78,.22), transparent 68%);
  pointer-events:none;z-index:0;
}
.hero>*{position:relative;z-index:1}
.hero h1{
  color:var(--cream);letter-spacing:-.022em;font-weight:700;
  text-shadow:0 0 42px rgba(30,138,78,.28);
}
.hero-sub{color:var(--paper)}
.hero-tag{color:var(--mint);opacity:.62;letter-spacing:.14em}

/* ---------- terminal card ---------- */
.term{
  border-color:#26382C;
  background:linear-gradient(180deg, #0D1811, var(--surface) 22%);
  box-shadow:
    0 1px 0 rgba(243,238,222,.05) inset,
    0 0 0 1px rgba(30,138,78,.10),
    0 34px 90px -38px rgba(0,0,0,.9),
    0 0 70px -30px rgba(30,138,78,.28);
}
.term-bar{
  background:linear-gradient(180deg, #14231A, #101C14);
  border-bottom-color:#26382C;
}
.term-title{color:var(--paper);opacity:.62}
.dots i{box-shadow:0 0 0 1px rgba(0,0,0,.35) inset}
.term-chips{
  background:linear-gradient(180deg, rgba(16,28,20,.9), rgba(12,22,16,.9));
  border-top-color:#26382C;
}
.term-chips button{
  color:var(--paper);background:rgba(243,238,222,.035);
  border-color:#26382C;border-radius:8px;
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.term-chips button:hover{
  color:var(--mint);border-color:var(--mint);background:var(--mint-d);
}
.term-body{scrollbar-color:#2B3E31 transparent}
.term-body::-webkit-scrollbar-thumb{background:#2B3E31}

/* ---------- section headings and dividers ---------- */
.sec-h,.page-head h1,.mod h3,.mrow-body h2,.lead{color:var(--cream)}
.sub-h{color:var(--mint);opacity:.78}
.kicker{color:var(--mint)}
.standfirst,.lead-p{color:var(--paper);opacity:.82}

/* The hairline between sections now carries a small cat mark, centred, the way
   a note has a device on its border. It is decorative and inert: the rule
   itself still does the structural work if images are blocked. */
main>section+section{
  position:relative;
  /* not border-top: the rule needs a gap in the middle for the cat mark, and a
     border cannot have one. A background gradient can, and it leaves the mark
     sitting on the page's own texture instead of on an opaque patch that never
     quite matches the gradient behind it. */
  border-top:0;
  background-image:linear-gradient(90deg,
    var(--line) 0 calc(50% - 27px),
    transparent calc(50% - 27px) calc(50% + 27px),
    var(--line) calc(50% + 27px) 100%);
  background-size:100% 1px;
  background-repeat:no-repeat;
  background-position:left top;
}
main>section+section::before{
  content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  width:34px;height:24px;pointer-events:none;
  background:transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24' width='32' height='24' fill='none' stroke='%237FE0A6' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round' opacity='.6'%3E%3Cpath d='M4 11V3l5.2 4.6'/%3E%3Cpath d='M28 11V3l-5.2 4.6'/%3E%3Cpath d='M4 11.2h24V22H4z'/%3E%3Cpath d='M9.5 14.6l2.8 2.4-2.8 2.4'/%3E%3Cpath d='M16.6 19.4h6'/%3E%3C/svg%3E")
    center / 30px auto no-repeat;
}

/* ---------- cards, code blocks, list rows ---------- */
.mod,.rm li,.code,.notlist li,.nextlink,.mrow-n span{
  border-color:var(--line);
}
.mod,.rm li{
  background:linear-gradient(180deg, rgba(243,238,222,.028), rgba(243,238,222,.012));
  border-radius:12px;
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.mod:hover,.rm li:hover{
  border-color:rgba(127,224,166,.45);
  transform:translateY(-2px);
  box-shadow:0 14px 30px -22px rgba(0,0,0,.9);
}
.mod p,.two p,.mrow-body p,.rm li{color:var(--paper);opacity:.84}
.mod code,.fine code,.sec-h code,.sec-sub code{
  color:var(--mint);background:var(--mint-d);border-color:rgba(127,224,166,.22);
}
.code{
  background:linear-gradient(180deg, #0A130D, #081109);
  border-radius:12px;color:var(--paper);
}
.callout{
  border-left-color:var(--mint);
  background:linear-gradient(90deg, var(--mint-d), rgba(18,54,42,.25));
  border-radius:0 10px 10px 0;color:var(--cream);
}
.nextlink{
  color:var(--mint);background:var(--mint-d);border-color:rgba(127,224,166,.3);
  border-radius:10px;transition:background .15s ease,border-color .15s ease,transform .12s ease;
}
.nextlink:hover{background:#17493a;border-color:var(--mint);transform:translateY(-1px)}
.mrow-n span{color:var(--mint);background:var(--mint-d);border-color:rgba(127,224,166,.22)}
.mrow{border-top-color:var(--line)}
.notlist li{color:var(--paper);opacity:.75}
.lore-copy p{color:var(--paper);opacity:.86}
.mascot{filter:drop-shadow(0 20px 44px rgba(30,138,78,.22))}

/* ---------- footer ---------- */
.site-foot{
  background:linear-gradient(180deg, rgba(12,22,16,.9), rgba(7,16,10,.95));
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg, transparent, rgba(127,224,166,.32) 45%, var(--money)) 1;
}
.ca{color:var(--cream)}
.ca-label{color:var(--mint);opacity:.7}
.ca-copy{
  color:var(--mint);background:var(--mint-d);border-color:rgba(127,224,166,.28);
  border-radius:8px;
}
.ca-copy:hover{background:#17493a;border-color:var(--mint)}
.foot-nav a{color:var(--paper);opacity:.78}
.foot-nav a:hover{color:var(--mint);opacity:1}
.disc-sum,.disc b{color:var(--paper)}
.foot-end{color:var(--paper);opacity:.45}

/* ---------- chart and embed panel frames (frame only, never plot colours) -- */
.tvpanel{border-color:#26382C;border-radius:12px}
.tvpanel-head{background:linear-gradient(180deg, rgba(20,35,26,.7), transparent)}
.tvpanel-title{color:var(--paper)}
.tvpanel-foot{color:var(--paper);opacity:.6}
.tvsub-sum:hover{background:rgba(127,224,166,.06)}
.embed-tab{border-radius:8px}
.embed-expand,.embed-close,.embed-tab{transition:background .15s ease,border-color .15s ease,color .15s ease}

@media (prefers-reduced-motion:reduce){
  .mod,.rm li,.nextlink{transition:none}
  .mod:hover,.rm li:hover,.nextlink:hover{transform:none}
}
@media (max-width:640px){
  main>section+section::before{width:26px;background-size:24px auto;top:-9px}
  main>section+section{
    background-image:linear-gradient(90deg,
      var(--line) 0 calc(50% - 22px),
      transparent calc(50% - 22px) calc(50% + 22px),
      var(--line) calc(50% + 22px) 100%);
  }
}

/* The terminal is reachable from the dashboard, and often runs inside the
   dashboard's modal iframe, so it needs a visible way back that reads as an
   exit rather than as another section of the terminal site. */
.nav-back{
  color:var(--mint)!important;opacity:1!important;
  border:1px solid rgba(127,224,166,.28);border-radius:7px;
  background:var(--mint-d);margin-right:6px;
}
.nav-back:hover{border-color:var(--mint);background:#17493a}

/* Inside the dashboard dialog the terminal is framed: the back-link would
   navigate the iframe rather than the page, so the dialog's close button is
   the only way out and this link is hidden. */
.framed .nav-back{display:none !important}

/* ---------- framed inside the dashboard dialog ----------

   Standalone, this is a page: site header, hero, then the terminal window sized
   to a fraction of the viewport. Dropped into the dialog's iframe unchanged,
   that layout pushed the terminal window taller than the dialog, so the docked
   prompt row -- docked to the bottom of the terminal, not of the dialog -- sat
   below the fold. The one element that must always be visible was the one
   element you had to scroll to find.

   Framed, the page becomes the terminal. The site header goes (the dashboard
   already has navigation, and stacking a second header under the dialog bar gave
   two header rows), the hero goes, and the window fills the dialog exactly: bar
   pinned at the top, output taking whatever is left, prompt and quick-command
   chips pinned at the bottom. The disclosure block and footer still follow
   underneath for anyone who scrolls.
   -------------------------------------------------------- */
.framed .site-head,
.framed .hero{display:none}

.framed #terminal{padding-top:0;padding-bottom:0}
.framed .term{
  height:100dvh;              /* dvh: mobile browser chrome must not clip the prompt */
  display:flex;flex-direction:column;
  border-left:0;border-right:0;border-top:0;border-radius:0;
  box-shadow:none;
}
.framed .term-bar,
.framed .watch-bar,
.framed .term-chips{flex:none}
/* min-height:0 is load-bearing — without it the flex item refuses to shrink
   below its content height and the overflow moves back out to the page. */
.framed .term-body{flex:1 1 auto;height:auto;min-height:0}
/* The window is flush to the dialog edges now, so the content needs the inset
   the border-radius used to imply. */
.framed #terminal.wrap{max-width:none}
/* The section divider -- a hairline with the cat mark set into a gap -- divides
   the hero from the terminal. With the hero hidden there is nothing above the
   terminal to divide, and the mark was left floating against the dialog's own
   bar. The dividers between the sections that follow are untouched. */
.framed main>#terminal{background-image:none}
.framed main>#terminal::before{display:none}