/* ============================================================================
   FeltOdds — learn.css
   Page-level layout for the GENERATED Learn pages only (/learn/, /outs-chart/,
   /draw-odds/, /pot-odds-explained/, /hand-rankings/, /matchups/ and the
   matchup pages). Built by scripts/gen-pages.mjs at export time; linked from
   those pages alone (BRIEF Z19). Every colour, type family and easing comes
   from the tokens styles.css already defines, so light mode, dark mode and the
   font loading all behave exactly as they do in the calculator.
   styles.css itself is out of scope for BRIEF Z19.
   ========================================================================== */

/* ── page shell ─────────────────────────────────────────────────────────── */
.lhdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.lhdr__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--text);
}
.lhdr__name {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.01em;
}
.lhdr__cta {
  font-family: var(--font-u);
  font-weight: 700;
  font-size: 13px;
  color: var(--info);
  text-decoration: none;
  white-space: nowrap;
}
.lhdr__cta:hover,
.lhdr__cta:focus-visible,
.lhdr__brand:focus-visible { text-decoration: underline; }

.lpage {
  max-width: 760px;
  margin: 0 auto;
  padding: 26px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.lcrumb {
  font-family: var(--font-u);
  font-weight: 600;
  font-size: 12px;
  color: var(--text3);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: -12px;
}
.lcrumb a { color: var(--text2); text-decoration: none; }
.lcrumb a:hover, .lcrumb a:focus-visible { text-decoration: underline; }
.lcrumb [aria-current] { color: var(--text3); }

.lpage__h1 {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: clamp(27px, 6.4vw, 40px);
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0 0 -14px;
}
.lpage__lede {
  font-family: var(--font-u);
  font-weight: 500;
  font-size: clamp(16px, 3.6vw, 19px);
  line-height: 1.55;
  color: var(--text2);
  margin: 0;
  max-width: 62ch;
}

/* ── sections and prose ─────────────────────────────────────────────────── */
.lsec { display: flex; flex-direction: column; gap: 14px; }
.lsec__h {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: clamp(20px, 4.4vw, 25px);
  line-height: 1.25;
  color: var(--text);
  margin: 6px 0 0;
}
.lp {
  font-family: var(--font-u);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.68;
  color: var(--text2);
  margin: 0;
  max-width: 68ch;
}
.lp strong { color: var(--text); font-weight: 700; }

/* ── the call to action ─────────────────────────────────────────────────── */
.lcta { margin: 4px 0 0; }
.lcta__a {
  display: inline-block;
  font-family: var(--font-u);
  font-weight: 800;
  font-size: 14px;
  color: var(--bg);
  background: var(--gold);
  border-radius: 8px;
  padding: 11px 17px;
  text-decoration: none;
  transition: transform .14s var(--e-out);
}
.lcta__a:hover { transform: translateY(-1px); }
.lcta__a:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* ── tables ─────────────────────────────────────────────────────────────── */
/* Only the table scrolls sideways; the page itself never does. */
.ltablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Outs-chart only (council round 28 condition; BRIEF Z23; band widened and
   darkened council round 29 follow-up — the round-28 var(--line2) version
   read as too faint on a phone glance): a right-edge overflow cue plus a
   visible keyboard focus ring, scoped to this one region rather than every
   scrolling table on the learn pages.
   The cue is two background layers on the scroll region itself — not a
   separate decorative element, so there is nothing to give
   `pointer-events: none` to; the region must keep receiving pointer/touch
   input so it can still be dragged and scrolled (council round 29, C2).
   Layer 1 ("cover"): a flat var(--bg) rectangle that scrolls WITH the
   table's content (`background-attachment: local`), parked past the true
   right edge of the content until the region is scrolled all the way —
   only then does it land in view and mask layer 2.
   Layer 2 ("cue"): a var(--slot) tint pinned to the region's own right edge
   (`background-attachment: scroll`), visible everywhere the cover has not
   yet reached. var(--slot) is the strongest existing neutral line/border
   token in styles.css (rgba(255,255,255,.44) dark / rgba(12,17,29,.46)
   light — the empty-card-slot dashed border, styles.css:1180), clearly
   darker than the var(--line)/var(--line2) table-rule tokens. Both layers
   coincide exactly (and the cue disappears) when the table does not
   overflow at all, e.g. on desktop. */
.ltablewrap--outs {
  position: relative;
  background:
    linear-gradient(var(--bg), var(--bg)) right / 40px 100% no-repeat local,
    linear-gradient(to left, var(--slot), transparent) right / 40px 100% no-repeat scroll;
}
.ltablewrap--outs:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
.ltable {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
  font-family: var(--font-u);
  font-size: 14px;
  color: var(--text2);
}
.ltable--small { min-width: 320px; }
.ltable caption {
  caption-side: bottom;
  text-align: left;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text3);
  padding-top: 10px;
  line-height: 1.5;
}
.ltable th, .ltable td {
  text-align: left;
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.ltable thead th {
  font-weight: 700;
  font-size: 12px;
  color: var(--text3);
  border-bottom-color: var(--line2);
  white-space: nowrap;
}
.ltable tbody th { font-weight: 700; color: var(--text); white-space: nowrap; }
.ltable .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ltable tbody tr:last-child th,
.ltable tbody tr:last-child td { border-bottom: none; }
.ltable a { color: var(--info); text-decoration: none; font-weight: 700; }
.ltable a:hover, .ltable a:focus-visible { text-decoration: underline; }
.ltable__note {
  font-family: var(--font-u);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--text3);
  margin: 0;
}
.lhand { white-space: nowrap; }

/* ── playing cards in prose ─────────────────────────────────────────────── */
.pcard {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  background: var(--carda);
  color: var(--suit0);
  border: 1px solid var(--cardline);
  border-radius: 4px;
  padding: 2px 4px;
  margin: 0 2px 2px 0;
  font-family: var(--font-u);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  vertical-align: baseline;
}
.pcard--red { color: var(--suit1); }
.pcard__s { font-size: 12px; }

/* ── index and "read next" lists ────────────────────────────────────────── */
.lindex, .lrel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lindex a, .lrel__list a {
  display: block;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
}
.lindex li:last-child a, .lrel__list li:last-child a { border-bottom: 1px solid var(--line); }
.lindex__t, .lrel__t {
  display: block;
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 17px;
  color: var(--text);
  margin-bottom: 4px;
}
.lindex__d, .lrel__d {
  display: block;
  font-family: var(--font-u);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text2);
  max-width: 62ch;
}
.lindex a:hover .lindex__t, .lrel__list a:hover .lrel__t,
.lindex a:focus-visible .lindex__t, .lrel__list a:focus-visible .lrel__t { color: var(--gold); }

.lrel { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.lrel__h {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 15px;
  color: var(--text3);
  margin: 0;
}

/* ── matchup result block ───────────────────────────────────────────────── */
.lsplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.lsplit__side {
  background: var(--panel);
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lsplit__hand {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 19px;
  color: var(--text);
  margin: 0;
}
.lsplit__sub {
  font-family: var(--font-u);
  font-weight: 500;
  font-size: 13px;
  color: var(--text3);
  margin: 0 0 8px;
}
.lsplit__big {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: clamp(30px, 8vw, 42px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.lsplit__cap {
  font-family: var(--font-u);
  font-weight: 600;
  font-size: 12px;
  color: var(--text3);
  margin: 0;
}
.lmethod {
  font-family: var(--font-u);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text3);
  margin: 0;
  max-width: 68ch;
}
.lmethod strong { color: var(--pos); font-weight: 800; }

/* ── worked examples ────────────────────────────────────────────────────── */
.lex {
  border-left: 3px solid var(--gold);
  padding: 2px 0 2px 16px;
}
.lex__h {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  margin: 0;
}
.lex__spot {
  font-family: var(--font-u);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
}
.lex__nums {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}
.lex__nums li { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: space-between; }
.lex__k {
  font-family: var(--font-u);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text2);
}
.lex__v {
  font-family: var(--font-u);
  font-weight: 800;
  font-size: 13.5px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ── footer ─────────────────────────────────────────────────────────────── */
.lfoot {
  max-width: 760px;
  margin: 0 auto;
  padding: 30px 20px calc(36px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lfoot__nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.lfoot__nav a {
  font-family: var(--font-u);
  font-weight: 700;
  font-size: 13px;
  color: var(--text2);
  text-decoration: none;
}
.lfoot__nav a:hover, .lfoot__nav a:focus-visible { color: var(--gold); text-decoration: underline; }
.lfoot .appfoot { margin: 0; padding: 0; justify-content: flex-start; }
.lfoot .appfoot__link { text-decoration: none; }
.lfoot .appfoot__link:hover, .lfoot .appfoot__link:focus-visible { text-decoration: underline; }
.lfoot__note {
  font-family: var(--font-u);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text3);
  margin: 0;
  max-width: 62ch;
}

/* ── narrow phones ──────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  .lhdr, .lpage, .lfoot { padding-left: 16px; padding-right: 16px; }
  .lsplit { grid-template-columns: 1fr; }
  .lex { padding-left: 12px; }
}