/* ============================================================
   NVIL Trades — section styles.

   Everything here is scoped to the .trades wrapper so the section
   keeps its own dark red world without touching the nvil.co design
   system loaded from /css/style.css. The site header and footer sit
   outside .trades and stay theme-aware; the trades content inside is
   dark in both themes, the same way the Lab Arcade game worlds are.
   ============================================================ */

/* ============ TOKENS ============ */
.trades{
  --bg:#0a0507;
  --bg-2:#120a0e;
  --panel:#170c11;
  --line:rgba(255,255,255,.08);
  --red:#e0122b;
  --red-hot:#ff4d5e;
  --red-dim:rgba(224,18,43,.18);
  --green:#1fcf7a;
  --white:#f6f1f3;
  --muted:#a2949a;
  --muted-2:#8a7b82;
  --display:'Sora',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --max:1120px;
  --radius:18px;

  /* This section stays dark while the chrome follows the theme, so the UA has
     to be told: otherwise light mode gives it light native controls, and the
     select popup came out white with this section's near-white text in it. */
  color-scheme:dark;

  /* isolate keeps the z-index:-1 smoke layer inside this wrapper: it
     paints over the wrapper's own background but under the content. */
  position:relative;
  isolation:isolate;
  min-height:100vh;
  background:var(--bg);
  color:var(--white);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.trades *{box-sizing:border-box;margin:0;padding:0}
.trades a{color:inherit;text-decoration:none}
.trades button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
.trades h1,.trades h2,.trades h3{font-family:var(--display);letter-spacing:-.02em;line-height:1.05}
.trades h1{font-size:clamp(2.6rem,7vw,5.2rem);font-weight:800}
.trades h2{font-size:clamp(2rem,4.6vw,3.2rem);font-weight:700}
.trades h3{font-size:1.25rem;font-weight:600}
.trades p{max-width:62ch}
.trades .muted{color:var(--muted)}
.trades .wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.trades section{padding:96px 0}
@media(max-width:700px){.trades section{padding:64px 0}}
.trades :focus-visible{outline:2px solid var(--red-hot);outline-offset:3px}

/* ============ SITE CHROME AROUND THE SECTION ============ */
/* The site header becomes a masthead here: the trades bars are the
   ones that stick, so two sticky bars never fight for the top edge.
   Relative rather than static so it keeps its z-index:50 stacking
   context and the mobile menu overlay still lands on top of the
   lesson content. An opaque header also keeps the red smoke out of
   the light theme. */
body.trades-page .header{position:relative;transform:none}
body.trades-page .header:not(.header--menu-open){background:var(--bg)}
body.trades-page .header--hidden{transform:none;pointer-events:auto}
/* The header is in flow here, so a backdrop-filter on it would become a
   containing block for the closed mobile menu and widen the document by
   a screen. The header is already opaque, so drop the blur. */
body.trades-page .header--scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 1px 0 var(--line)}
body.trades-page .header .container,
body.trades-page .footer .container{width:auto;max-width:1120px;margin-inline:auto;padding-inline:20px}
body.trades-page .footer{position:relative;z-index:1}
.trades-disc{
  padding:0 0 1.6rem;color:var(--ink-soft);
  font-size:.82rem;line-height:1.7;max-width:80ch;
}

/* ============ BACKDROP (red smoke) ============ */
.smoke{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 45% at 85% 5%, rgba(224,18,43,.35), transparent 65%),
    radial-gradient(45% 40% at 5% 40%, rgba(224,18,43,.16), transparent 70%),
    radial-gradient(70% 55% at 60% 100%, rgba(120,8,25,.35), transparent 70%),
    var(--bg);
}
/* stars.js mounts its canvas here. It sits ABOVE the ::after grain and on
   its own compositor layer: with the grain's mix-blend-mode applied over an
   animating canvas, the browser re-blended the whole viewport every frame,
   and scrolling stuttered. Blending the grain over the static gradient
   instead is done once and cached. */
.smoke .stars{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;will-change:transform;transform:translateZ(0)}
.smoke::after{
  content:"";position:absolute;inset:0;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ============ SECTION NAV ============
   Shaped like one of the site header's own dropdown panels, so it reads as
   a shelf hanging off the masthead rather than a second bar competing with
   it. A panel is the only shape that works here: the chrome follows the
   site theme while this section stays dark in both, so a full-bleed bar can
   never look continuous with a header that turns light. The notched corners
   are the same clip-path as .nav__drop-in in /css/style.css. */
.trades nav{
  position:sticky;top:0;z-index:20;
  display:flex;justify-content:center;
  padding:10px 20px 20px;   /* the same 10px sits under the masthead and under the viewport edge */
  pointer-events:none;      /* only the panel itself catches clicks */
  /* scrim: once the masthead has scrolled away the panel is alone at the top
     edge, and without this the page content runs raw up beside it */
  background:linear-gradient(180deg,var(--bg) 0%,rgba(10,5,7,.92) 55%,transparent 100%);
}
.trades .nav-in{
  pointer-events:auto;
  display:flex;min-width:0;max-width:100%;
  /* lifted off the page like a menu surface, lit from above */
  background:linear-gradient(180deg,rgba(42,20,26,.94),rgba(16,8,11,.94));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);
  border-top:2px solid var(--red);   /* full width: the panel hangs off the masthead's red underline */
  box-shadow:0 14px 34px rgba(0,0,0,.5);
  /* square shoulders at the top, the NVIL cut on both bottom corners */
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px));
  position:relative;
}
/* a small red pointer under the rule: the dropdown's tab on wide screens,
   the dial's centre marker on phones */
.trades .nav-in::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:1;
  border-left:7px solid transparent;border-right:7px solid transparent;border-top:8px solid var(--red);
  pointer-events:none;
}
.trades .nav-links{
  display:flex;align-items:center;gap:26px;
  min-width:0;height:52px;padding:0 24px;
  font-size:.92rem;color:var(--muted);
}
.trades .nav-links a{white-space:nowrap;transition:color .15s ease}
.trades .nav-links a:hover,.trades .nav-links a.is-current{color:var(--white)}
/* jump links land below the panel instead of under it */
.trades section[id]{scroll-margin-top:92px}
@media(max-width:760px){
  /* narrow screens scroll the row instead of losing it */
  .trades nav{padding:10px 12px 18px}
  .trades .nav-links{
    gap:20px;height:46px;padding:0 18px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;
    /* fade both edges: the row reads as a drum you turn, not a list that ends */
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
  }
  .trades .nav-links::-webkit-scrollbar{display:none}
  /* the dial (dial.js adds is-dial when it is running): links sit on a
     cylinder in 3D, the centred one faces you and lights up; the row can
     scroll far enough that the first and last links reach the centre */
  .trades .nav-links.is-dial{
    perspective:520px;perspective-origin:50% 50%;
  }
  .trades .nav-links.is-dial a{
    transform-style:preserve-3d;backface-visibility:hidden;
    will-change:transform,opacity;
    transition:color .2s ease;
  }
  .trades .nav-links.is-dial a.is-front,.trades .nav-links.is-dial a.is-current{color:var(--white);text-shadow:0 0 18px rgba(224,18,43,.45)}
  .trades .nav-in{
    /* a soft highlight down the middle so the drum reads as lit from above */
    background:
      radial-gradient(60% 120% at 50% 40%,rgba(255,255,255,.07),transparent 70%),
      linear-gradient(180deg,rgba(42,20,26,.94),rgba(16,8,11,.94));
  }
}

/* ============ BUTTONS ============ */
.trades .btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 22px;border-radius:999px;font-weight:600;font-size:1rem;
  font-family:var(--body);letter-spacing:normal;text-transform:none;
  clip-path:none;border:0;
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease;
}
.trades .btn:active{transform:scale(.97)}
.trades .btn-red{background:var(--red);color:#fff;box-shadow:0 8px 30px rgba(224,18,43,.35)}
.trades .btn-red:hover{background:var(--red-hot)}
.trades .btn-ghost{border:1px solid rgba(255,255,255,.18);color:var(--white)}
.trades .btn-ghost:hover{border-color:rgba(255,255,255,.4)}

/* ============ SECTION FRAME ============ */
.trades .step{color:var(--red-hot);font-family:var(--display);font-weight:600;font-size:.95rem;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.trades .step::before{content:"";width:28px;height:2px;background:var(--red)}
.trades .sec-head{max-width:64ch;margin-bottom:40px}
.trades .sec-head p{color:var(--muted);font-size:1.1rem;margin-top:16px}
.trades .two{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:860px){.trades .two{grid-template-columns:1fr}}
.trades .panel{
  border-radius:var(--radius);border:1px solid var(--line);background:var(--panel);
  padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.trades .panel canvas{width:100%;height:320px;display:block;border-radius:10px}
@media(max-width:600px){.trades .panel canvas{height:250px}}
.trades .plain{
  border-left:2px solid var(--red);padding:6px 0 6px 16px;margin-top:22px;color:var(--white);
  font-size:1.05rem;
}
.trades .plain strong{color:var(--red-hot)}
.trades .explain{margin-top:18px;color:var(--muted);min-height:3.2em}

.trades .toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px;margin-top:16px}
.trades .toggle button{padding:8px 16px;border-radius:999px;font-weight:600;color:var(--muted)}
.trades .toggle button.on{background:rgba(255,255,255,.08);color:var(--white)}

/* ============ INDICATORS ============ */
.trades .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.trades .tab{
  padding:10px 16px;border-radius:12px;border:1px solid var(--line);color:var(--muted);font-weight:600;
  background:rgba(255,255,255,.02);transition:all .15s;
}
.trades .tab.on{background:var(--red-dim);border-color:rgba(224,18,43,.45);color:var(--white)}
.trades .ind-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.85rem;color:var(--muted);margin-top:12px}
.trades .ind-legend span::before{content:"";display:inline-block;width:18px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle;background:var(--c)}

.trades .opt-ctrl{margin-top:14px}
.trades .opt-ctrl label{display:block;font-size:.9rem;color:var(--muted);margin-bottom:8px}
.trades input[type=range]{
  width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:99px;
  background:linear-gradient(90deg,var(--red),var(--green));outline:none;
}
.trades input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--white);
  border:4px solid var(--bg);box-shadow:0 0 0 2px rgba(255,255,255,.3);cursor:grab;
}
.trades input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--white);border:4px solid var(--bg);cursor:grab}
.trades .opt-readout{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;
}
.trades .opt-readout div{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:12px}
.trades .opt-readout small{display:block;color:var(--muted-2);font-size:.78rem}
.trades .opt-readout b{font-family:var(--display);font-size:1.15rem;font-variant-numeric:tabular-nums}
@media(max-width:420px){.trades .opt-readout{grid-template-columns:1fr 1fr}}

/* ============ REVEAL ============ */
.trades .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.trades .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .trades .reveal{opacity:1;transform:none;transition:none}
}

/* ============ LESSON PAGES ============ */
.trades .topbar{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(10,5,7,.7);border-bottom:1px solid var(--line)}
.trades .topbar-in{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.trades .topbar .back{color:var(--muted);font-size:.9rem;display:flex;align-items:center;gap:6px}
.trades .topbar .back:hover{color:var(--white)}
.trades .topbar .pname{font-family:var(--display);font-weight:700;white-space:nowrap}
@media(max-width:600px){.trades .topbar .pname{font-size:.9rem}.trades .topbar .back{font-size:.8rem}}
.trades .prog{position:relative;height:4px;background:rgba(255,255,255,.08)}
.trades .prog i{position:absolute;left:0;top:0;bottom:0;background:var(--red);box-shadow:0 0 12px var(--red);transition:width .5s ease;width:0}
/* The side padding matches .wrap so the lesson column lines up with the
   topbar above it, and so the text keeps a gutter on a 390px screen. */
.trades .layout{display:grid;grid-template-columns:270px 1fr;gap:48px;padding:40px 20px 100px;align-items:start}
@media(max-width:900px){.trades .layout{grid-template-columns:1fr;gap:24px;padding-top:20px}}
.trades .side{position:sticky;top:84px;min-width:0}
.trades .layout>*{min-width:0}
@media(max-width:900px){.trades .side{position:static}}
.trades .side h3{font-size:.85rem;color:var(--muted);font-weight:500;margin-bottom:12px}
.trades .lessons{list-style:none;display:flex;flex-direction:column;gap:4px}
@media(max-width:900px){.trades .lessons{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:8px;scrollbar-width:none}.trades .lessons::-webkit-scrollbar{display:none}}
.trades .lessons a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--muted);font-size:.9rem;line-height:1.3;border:1px solid transparent}
@media(max-width:900px){.trades .lessons a{white-space:nowrap}}
.trades .lessons a:hover{color:var(--white);background:rgba(255,255,255,.03)}
.trades .lessons a.on{color:var(--white);background:var(--red-dim);border-color:rgba(224,18,43,.35)}
.trades .lessons a .n{width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;font-size:.72rem;flex:none}
.trades .lessons a.done .n{background:var(--green);border-color:var(--green);color:#052}
.trades .lessons a.done .n::after{content:"✓"}
.trades .lessons a.done .n span{display:none}
.trades .side .stat{margin-top:20px;font-size:.85rem;color:var(--muted)}
.trades .lesson{display:none;max-width:760px}
.trades .lesson.on{display:block}
.trades .lesson-head{margin-bottom:34px}
.trades .lesson-head .kick{color:var(--red-hot);font-family:var(--display);font-weight:600;font-size:.9rem;margin-bottom:10px}
.trades .lesson-head h1{font-size:clamp(2rem,5vw,3rem);font-weight:800}
.trades .lesson-head .time{color:var(--muted-2);font-size:.9rem;margin-top:12px}
.trades .lesson h2{font-size:1.5rem;margin:44px 0 12px}
.trades .lesson h3{font-size:1.15rem;margin:28px 0 8px}
.trades .lesson p{color:var(--muted);margin-bottom:14px;max-width:66ch}
.trades .lesson p strong{color:var(--white)}
.trades .lesson ul,.trades .lesson ol{color:var(--muted);margin:0 0 14px 22px;max-width:64ch}
.trades .lesson li{margin-bottom:6px}
.trades .lesson li strong{color:var(--white)}
.trades .callout{border-radius:14px;padding:16px 18px;margin:20px 0;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.trades .callout.warn{border-color:rgba(224,18,43,.4);background:rgba(224,18,43,.08)}
.trades .callout.tip{border-color:rgba(31,207,122,.35);background:rgba(31,207,122,.06)}
.trades .callout b{display:block;margin-bottom:4px;font-family:var(--display)}
.trades .callout p{margin:0;color:var(--white)}
.trades .term{border-bottom:1px dashed rgba(255,255,255,.35);cursor:help;color:var(--white);position:relative}
.trades .term:hover::after,.trades .term:focus::after{content:attr(data-def);position:absolute;left:0;bottom:130%;width:260px;background:#23151b;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:.85rem;color:var(--muted);line-height:1.4;z-index:5;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.trades .widget{border-radius:var(--radius);border:1px solid var(--line);background:var(--panel);padding:18px;margin:24px 0;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.trades .widget .wt{font-family:var(--display);font-weight:600;font-size:1rem;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.trades .widget .wt::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);flex:none}
.trades .widget .ws{font-size:.9rem;color:var(--muted);margin-bottom:14px}
.trades .widget canvas{width:100%;height:300px;display:block;border-radius:10px}
@media(max-width:600px){.trades .widget canvas{height:240px}}
.trades .widget .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.trades .widget .msg{margin-top:12px;font-size:.95rem;color:var(--white);min-height:1.6em}
.trades .widget .msg.good{color:var(--green)} .trades .widget .msg.bad{color:var(--red-hot)}
.trades .field{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--muted)}
.trades .field input{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--white);font:inherit;font-size:1rem;width:150px}
/* selects size to their longest option: a flat 150px clipped labels like
   "Stop sell (after you own it)" down to an unreadable stub */
.trades .field select{width:auto;min-width:150px;max-width:100%}
.trades .field input:focus{outline:2px solid var(--red-hot);border-color:transparent}

/* ---- Selects ----
   The open list is drawn by the browser, and `color-scheme: dark` on .trades
   is what makes it dark instead of white. The option colors below cover the
   browsers that paint that list from CSS rather than from the platform. The
   closed control is ours: native appearance is dropped for a caret that
   matches the rest of the section. */
.trades select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-color:rgba(255,255,255,.05);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23ff4d5e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  border:1px solid var(--line);border-radius:10px;
  padding:10px 34px 10px 12px;
  color:var(--white);font:inherit;font-size:1rem;line-height:1.2;
  cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease;
}
.trades select:hover{background-color:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.trades select:focus-visible{outline:2px solid var(--red-hot);outline-offset:1px;border-color:transparent}
.trades select option{background:#180c11;color:var(--white)}
.trades select option:checked{background:#2a131a}
/* smaller variant for selects that sit inside a sentence; still tall enough
   to be a comfortable tap target */
.trades select.select-sm{padding:8px 28px 8px 10px;font-size:.9rem;background-position:right 9px center}
.trades .btn-sm{padding:10px 16px;font-size:.92rem}
.trades .btn-green{background:var(--green);color:#03301a;box-shadow:0 8px 24px rgba(31,207,122,.25)}
.trades .kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:14px}
.trades .kv div{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:12px}
.trades .kv small{display:block;color:var(--muted-2);font-size:.75rem}
.trades .kv b{font-family:var(--display);font-size:1.15rem;font-variant-numeric:tabular-nums}
.trades .ladder{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-variant-numeric:tabular-nums;font-size:.92rem}
.trades .ladder table{width:100%;border-collapse:collapse}
/* a seven column chain cannot fit a phone: scroll it rather than pushing the
   whole page sideways, the same way .scanwrap does */
@media(max-width:620px){
  .trades .ladder{overflow-x:auto;overscroll-behavior-x:contain}
  .trades .ladder table{min-width:430px}
}
.trades .ladder th{font-weight:500;color:var(--muted-2);font-size:.75rem;text-align:left;padding:4px 8px}
.trades .ladder td{padding:6px 8px;position:relative;border-radius:6px}
.trades .ladder td i{position:absolute;left:0;top:2px;bottom:2px;border-radius:6px;z-index:0;opacity:.28}
.trades .ladder td span{position:relative}
.trades .ladder .bid td i{background:var(--green)} .trades .ladder .ask td i{background:var(--red-hot)}
.trades .ladder .wall td span{font-weight:700;color:var(--white)}
.trades .quiz{margin-top:44px;border-top:1px solid var(--line);padding-top:30px}
.trades .q{margin-bottom:22px}
.trades .q p{color:var(--white);font-weight:500;margin-bottom:10px}
.trades .opts{display:grid;gap:8px}
.trades .opts button{text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--muted)}
.trades .opts button:hover{border-color:rgba(255,255,255,.3);color:var(--white)}
.trades .opts button.right{border-color:var(--green);background:rgba(31,207,122,.1);color:var(--white)}
.trades .opts button.wrong{border-color:var(--red-hot);background:rgba(224,18,43,.1);color:var(--white)}
.trades .q .why{font-size:.9rem;color:var(--muted);margin-top:8px;display:none}
.trades .q .why.show{display:block}
.trades .lesson-nav{display:flex;justify-content:space-between;gap:12px;margin-top:40px;flex-wrap:wrap}
.trades .scen{display:grid;gap:8px;margin-top:12px}
.trades .scen button{text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--white)}
.trades .scen button:hover{border-color:rgba(255,255,255,.3)}

/* ============ PENNY DAY TRADING EXTRAS ============ */
/* Sortable cards, scanner rows and stopwatch readouts used by the
   penny stock path. Same tokens, same shapes as the widgets above. */
.trades .cards{display:grid;gap:10px;margin-top:4px}
.trades .card{
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);
  padding:12px 14px;display:grid;gap:8px;
}
.trades .card.picked{border-color:rgba(224,18,43,.45);background:var(--red-dim)}
.trades .card.right{border-color:var(--green);background:rgba(31,207,122,.1)}
.trades .card.wrong{border-color:var(--red-hot);background:rgba(224,18,43,.1)}
.trades .card .head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.trades .card .tick{font-family:var(--display);font-weight:700;letter-spacing:.02em}
.trades .card .sub{font-size:.85rem;color:var(--muted)}
.trades .card .line{font-size:.93rem;color:var(--white)}
.trades .card .note{font-size:.86rem;color:var(--muted);display:none}
.trades .card .note.show{display:block}
.trades .grade{display:flex;gap:8px;flex-wrap:wrap}
.trades .grade button{
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);
  color:var(--muted);font-size:.85rem;font-weight:600;
}
.trades .grade button:hover{color:var(--white);border-color:rgba(255,255,255,.3)}
.trades .grade button.sel{background:var(--red-dim);border-color:rgba(224,18,43,.5);color:var(--white)}
.trades .scan{width:100%;border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums}
.trades .scan th{text-align:left;font-weight:500;color:var(--muted-2);font-size:.75rem;padding:6px 8px;border-bottom:1px solid var(--line)}
.trades .scan td{padding:10px 8px;border-bottom:1px solid var(--line);color:var(--muted)}
.trades .scan td:first-child{color:var(--white);font-weight:600}
.trades .scan tr{cursor:pointer}
.trades .scan tr:hover td{background:rgba(255,255,255,.03)}
.trades .scan tr.on td{background:var(--red-dim);color:var(--white)}
.trades .scan tr.hit td{background:rgba(31,207,122,.1)}
.trades .scan tr.miss td{background:rgba(224,18,43,.1)}
.trades .scanwrap{overflow-x:auto;margin-top:4px}
.trades .scanwrap table{min-width:520px}
.trades .tapebox{
  font-variant-numeric:tabular-nums;font-size:.85rem;line-height:1.5;
  background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;height:150px;overflow:hidden;display:flex;flex-direction:column-reverse;
}
.trades .tapebox span{display:block}
.trades .tapebox .up{color:var(--green)} .trades .tapebox .dn{color:var(--red-hot)}
.trades .clock{
  font-family:var(--display);font-weight:700;font-size:1.1rem;
  color:var(--white);font-variant-numeric:tabular-nums;
}
.trades .halted{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  background:rgba(224,18,43,.18);border:1px solid rgba(224,18,43,.5);
  font-size:.8rem;font-weight:600;color:var(--white);
}
.trades .halted::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red-hot);animation:t-blink 1s steps(2,end) infinite}
@keyframes t-blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.trades .halted::before{animation:none}}
.trades .legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.82rem;color:var(--muted);margin-top:10px}
.trades .legend b{display:inline-block;width:16px;height:3px;border-radius:2px;vertical-align:middle;margin-right:6px}

/* ============ EDUCATIONAL NOTICE (every trades page) ============ */
.trades .trades-notice{
  margin:0 auto;padding:.7rem 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(224,18,43,.08);
  font-size:.82rem;line-height:1.55;color:var(--muted-2, #b9aeb3);
}
.trades .trades-notice p{max-width:var(--max,1100px);margin:0 auto;padding:0 20px}
.trades .trades-notice strong{color:#fff;font-weight:700;letter-spacing:.02em}
.trades .trades-notice a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(224,18,43,.8)}
.trades .trades-notice a:hover{color:var(--red, #E90012)}
.trades-disc a{color:var(--ink, #fff);text-decoration:underline;text-underline-offset:3px}