/* The table's own cards, stat box and recommendation card, lifted out of the
   play page so the lessons can show the real thing rather than describe it.

   Copied rather than shared at source, because the play page is deliberately
   one self-contained file with no build step. If a card or a stat is restyled
   there, it has to be restyled here too, and the lesson examples are the thing
   that will look wrong first. */
  .pc{position:relative;width:50px;height:71px;border-radius:6px;
      background:linear-gradient(163deg,#FFFFFF 0%,#F4F2EC 100%);border:1px solid rgba(0,0,0,.22);
  .pc .rk{font-size:1.5rem;font-weight:500;line-height:1;letter-spacing:-.02em}
  .pc .st{font-size:1.02rem;line-height:1}
  .pc.sm{width:26px;height:37px;border-radius:4px}
  .pc.sm .rk{font-size:.8rem} .pc.sm .st{font-size:.62rem}
  .su-c{color:#127a3f} .su-d{color:#1560c4} .su-h{color:#c0271e} .su-s{color:#16191f}
  .winbox{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
          border:1px solid var(--rule);border-radius:9px;padding:.8rem .95rem;background:var(--surface)}
  .winbox .lab{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-weight:600}
  .winbox .big{font-family:var(--mono);font-size:2.1rem;font-weight:500;letter-spacing:-.03em;line-height:1}
  .winbox .big.hi{color:var(--good)} .winbox .big.lo{color:var(--bad)}
  .winbox .big.rel{font-size:1.5rem}
  .winbox .big.ev{font-size:1.4rem}
  .winbox .big.flat{color:var(--faint)}
  .winbox .col{min-width:5.5rem}
  .winbox .col{display:flex;flex-direction:column;gap:.15rem;min-width:6.5rem}
  .winbox .track{flex:1;min-width:9rem;height:9px;border-radius:5px;background:var(--sunken);
                 border:1px solid var(--rule);overflow:hidden}
  .winbox .track i{display:block;height:100%;background:var(--accent);border-radius:5px;
                   transition:width .45s cubic-bezier(.32,.72,0,1)}
  .winbox .say{flex-basis:100%;font-size:.82rem;color:var(--muted);margin:0}
    .pc.sm{width:14px;height:19px}
    .pc.sm .rk{font-size:.48rem} .pc.sm .st{font-size:.38rem}
  .advice{display:flex;flex-direction:column;gap:.4rem}
  .advice .do{font-family:var(--serif);font-size:1.45rem;font-weight:500;letter-spacing:-.02em;
              line-height:1.1;color:var(--ink)}
  .advice .do.fold{color:var(--bad)}
  .advice .do.bet, .advice .do.call{color:var(--good)}
  .advice .why{margin:0;font-size:.8rem;color:var(--muted);line-height:1.45}
  .advice .why b{color:var(--ink);font-weight:600}
  .advice .why a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
  .advice .why a:hover{color:var(--ink)}
  .opttab{display:flex;flex-direction:column;gap:.15rem;margin:.1rem 0 .15rem}
  .optrow{display:grid;grid-template-columns:1fr auto;gap:.2rem .6rem;align-items:baseline;
          padding:.28rem .45rem;border-radius:6px;border:1px solid transparent;font-size:.8rem}
  .optrow.best{border-color:var(--rule);background:var(--sunken)}
  .optrow .en{font-weight:600}
  .optrow.best .en::after{content:" \2190 best";font-weight:500;font-size:.68rem;color:var(--accent);
                          letter-spacing:.02em}
  .optrow .ov{font-family:var(--mono);font-size:.86rem;font-weight:500;text-align:right}
  .optrow .ov.pos{color:var(--good)} .optrow .ov.neg{color:var(--bad)} .optrow .ov.na{color:var(--muted)}
  .optrow .eo{grid-column:1/-1;font-size:.66rem;color:var(--faint);line-height:1.3}
  .tip{position:relative;cursor:help;outline:none}
  .tip::before{content:"i";display:inline-grid;place-items:center;width:.95em;height:.95em;
               margin-left:.28em;border:1px solid currentColor;border-radius:50%;
  .tip:hover::before, .tip:focus::before{opacity:1}
  .tip::after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + .45rem);
              width:17rem;max-width:min(17rem,72vw);z-index:90;pointer-events:none;
  .tip:hover::after, .tip:focus::after{opacity:1;visibility:visible}
    .tip::after, .tip.tr::after{position:fixed;left:.6rem;right:.6rem;top:auto;bottom:.7rem;
                                width:auto;max-width:none;font-size:.78rem;padding:.7rem .8rem}

/* ---- the worked example wrapper ---- */
.snap{border:1px solid var(--rule);border-radius:10px;background:var(--surface);
      padding:1rem 1.05rem;margin:1.1rem 0;max-width:38rem}
.snap .head{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
            font-weight:600;margin-bottom:.7rem}
.snap .felt{background:radial-gradient(120% 85% at 50% 8%, #2E7259 0%, #235C48 42%, #17402F 100%);
            border-radius:12px;padding:.9rem;display:flex;flex-direction:column;gap:.7rem;
            align-items:center;box-shadow:0 0 0 5px #2A2016, 0 0 0 6px #12281F}
:root[data-theme="dark"] .snap .felt{
  background:radial-gradient(120% 85% at 50% 8%, #1E5040 0%, #163D2E 42%, #0E2A20 100%)}
.snap .row{display:flex;gap:.35rem;align-items:center;justify-content:center;flex-wrap:wrap}
.snap .lbl{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
           color:#9CC0B2}
.snap .potline{font-family:var(--mono);font-size:.82rem;color:#E7EFEB}
.snap .winbox{margin-top:.8rem}
.snap .advice{margin-top:.8rem;border:1px solid var(--rule);border-radius:9px;padding:.75rem .85rem;
              background:var(--ground)}
.snap .note{margin:.8rem 0 0;font-size:.82rem;color:var(--muted);line-height:1.55}
.snap .note b{color:var(--ink);font-weight:600}

/* ---- diagrams ----
   Inline SVG drawn from the theme's own tokens, so a diagram is never a picture
   of the light theme sitting on a dark page, and never a blurry raster on a
   phone. */
.dia{margin:1.2rem 0;max-width:38rem}
.dia svg{display:block;width:100%;height:auto;overflow:visible}
.dia .cap{margin:.5rem 0 0;font-size:.78rem;color:var(--faint);line-height:1.5}
.dia text{font-family:var(--sans);fill:var(--ink)}
.dia .lab{font-size:11px;fill:var(--muted)}
.dia .tiny{font-size:9.5px;fill:var(--faint);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.dia .num{font-family:var(--mono);font-size:12px;fill:var(--ink)}
.dia .box{fill:var(--surface);stroke:var(--rule)}
.dia .sunk{fill:var(--sunken);stroke:var(--rule)}
.dia .good{fill:var(--good)} .dia .bad{fill:var(--bad)}
.dia .accent{fill:var(--brand)}
.dia .line{stroke:var(--rule);fill:none}
.dia .plot{stroke:var(--brand);stroke-width:2;fill:none}
.dia .feltfill{fill:#1C4C3E}
:root[data-theme="dark"] .dia .feltfill{fill:#173F33}
.dia .onfelt{fill:#E7EFEB;font-size:10.5px;font-weight:600}
.dia .hl{fill:var(--gold)}

/* ---- listen ---- */
.listen{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.2rem 0 1rem}
.listen button{font:inherit;font-size:.78rem;font-weight:600;display:inline-flex;align-items:center;
               gap:.45rem;padding:.4rem .8rem;border:1px solid var(--rule);border-radius:20px;
               background:var(--surface);color:var(--muted);cursor:pointer}
.listen button:hover{border-color:var(--accent);color:var(--ink)}
.listen button.on{background:var(--brand);border-color:var(--brand);color:#fff}
:root[data-theme="dark"] .listen button.on{color:#08201A}
.listen .len{font-size:.72rem;color:var(--faint);font-family:var(--mono)}
.listen svg{width:11px;height:11px;fill:currentColor}