/**
 * Full Ring Cash Game masterclass — /poker/cash-games/full-ring/
 *
 * Ported from ~/Downloads/fullring/fullring-styles.css. Loads after
 * texas-holdem.css, which supplies the shared hero / section / summary
 * furniture and the --th-* custom properties. Every selector is page-scoped
 * with body.btf-fring-page — an unscoped selector loses to texas-holdem.css's
 * `body.btf-th-page .prose ...` rules.
 */

/* ── Design-token bridge ────────────────────────────────────────────────
   The design references generic token names (--forest, --gold, --cream …);
   the theme namespaces its own as --th-*. Map them here, scoped to the page. */
body.btf-fring-page {
	--forest:    var( --th-forest );
	--forest-2:  var( --th-forest-2 );
	--forest-3:  var( --th-forest-3 );
	--gold:      var( --th-gold );
	--gold-soft: var( --th-gold-soft );
	--cream:     var( --th-cream );
	--cream-2:   var( --th-cream-2 );
	--cream-3:   var( --th-cream-3 );
	/* IMPORTANT: do NOT alias --ink here. texas-holdem.css maps
	   --th-ink:var(--ink), so `--ink:var(--th-ink)` is a circular reference
	   and BOTH resolve to nothing — every `color:var(--ink)` silently drops.
	   --ink is already defined site-wide in base.css (#1C1814). */
	--ink-2:     var( --th-ink-2 );
	--muted:     var( --th-muted );
	--hair:      var( --th-hair );
	--red:       var( --th-red );
	--serif:     var( --th-serif );
	--sans:      var( --th-sans );
	--mono:      var( --th-mono );
}

/* Full Ring Cash Game Strategy — same editorial system */

/* ============ HERO TABLE DIAGRAM ============ */
body.btf-fring-page .btf-fring-hero-table{ display: flex; flex-direction: column; gap: 1rem; }
body.btf-fring-page .btf-fring-hero-table-title{
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-soft);
}
body.btf-fring-page .btf-fring-table{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / .92;
  max-width: 330px;
  margin: 0 auto;
}
body.btf-fring-page .btf-fring-felt{
  position: absolute;
  inset: 17% 14%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, #244630, #16281c);
  border: 3px solid rgba(201,162,74,.28);
  display: grid;
  place-items: center;
  box-shadow: inset 0 4px 20px rgba(0,0,0,.45);
}
body.btf-fring-page .btf-fring-felt-label{
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(243,238,226,.4);
}
body.btf-fring-page .btf-fring-seat{
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .4em .55em;
  border-radius: 6px;
  white-space: nowrap;
  border: 1px solid transparent;
}
body.btf-fring-page .btf-fring-seat.bad{ background: rgba(243,238,226,.07); color: rgba(243,238,226,.55); border-color: rgba(243,238,226,.14); }
body.btf-fring-page .btf-fring-seat.ok{ background: rgba(201,162,74,.16); color: var(--gold-soft); border-color: rgba(201,162,74,.3); }
body.btf-fring-page .btf-fring-seat.good{ background: rgba(201,162,74,.3); color: #f0dca8; border-color: rgba(201,162,74,.55); }
body.btf-fring-page .btf-fring-seat.best{
  background: var(--gold);
  color: var(--forest-2);
  border-color: var(--gold-soft);
  font-size: .64rem;
  box-shadow: 0 0 18px rgba(201,162,74,.5);
}
body.btf-fring-page .btf-fring-hero-key{ display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
body.btf-fring-page .btf-fring-key-item{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(243,238,226,.6);
}
body.btf-fring-page .btf-fring-key-dot{ width: 9px; height: 9px; border-radius: 3px; }
body.btf-fring-page .btf-fring-key-dot.best{ background: var(--gold); }
body.btf-fring-page .btf-fring-key-dot.good{ background: rgba(201,162,74,.55); }
body.btf-fring-page .btf-fring-key-dot.ok{ background: rgba(201,162,74,.25); }
body.btf-fring-page .btf-fring-key-dot.bad{ background: rgba(243,238,226,.18); }

body.btf-fring-page .btf-fring-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
  margin-top: 2.2rem;
}
@media (max-width: 760px) { body.btf-fring-page .btf-fring-stats{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { body.btf-fring-page .btf-fring-stats{ grid-template-columns: 1fr; } }
body.btf-fring-page .btf-fring-stat{
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: .8rem;
  background: rgba(243,238,226,.05);
  border: 1px solid rgba(243,238,226,.12);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  align-items: start;
}
body.btf-fring-page .btf-fring-stat-icon{ font-size: 1.3rem; line-height: 1.2; }
body.btf-fring-page .btf-fring-stat-text{ display: flex; flex-direction: column; gap: .1rem; }
body.btf-fring-page .btf-fring-stat-label{ font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-soft); }
body.btf-fring-page .btf-fring-stat-text b{ font-family: var(--serif); font-weight: 500; font-size: 1.15rem; color: var(--cream); letter-spacing: -.01em; }
body.btf-fring-page .btf-fring-stat-text small{ font-size: .76rem; line-height: 1.35; color: rgba(243,238,226,.6); }

/* ============ CONTRAST ============ */
body.btf-fring-page .btf-fring-contrast{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 700px) { body.btf-fring-page .btf-fring-contrast{ grid-template-columns: 1fr; } }
body.btf-fring-page .btf-fring-con-card{
  background: var(--cream-2);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 1.6rem 1.7rem;
  border-top-width: 3px;
}
body.btf-fring-page .btf-fring-con-card.good{ border-top-color: var(--forest); }
body.btf-fring-page .btf-fring-con-card.ok{ border-top-color: var(--gold); }
body.btf-fring-page .btf-fring-con-label{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: -.01em;
  color: var(--ink);
  display: block;
  margin-bottom: 1.1rem;
}
body.btf-fring-page .btf-fring-con-rows{ display: flex; flex-direction: column; gap: .5rem; padding-bottom: 1.1rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--hair); }
body.btf-fring-page .btf-fring-con-row{ display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
body.btf-fring-page .btf-fring-con-row span{ font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
body.btf-fring-page .btf-fring-con-row b{ font-family: var(--serif); font-weight: 500; font-size: 1.05rem; color: var(--ink); }
body.btf-fring-page .btf-fring-con-card p{ margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink-2); }

/* ============ POSITIONS ============ */
body.btf-fring-page .btf-fring-pos-tabs{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .45rem;
  margin-bottom: 1.4rem;
}
@media (max-width: 700px) { body.btf-fring-page .btf-fring-pos-tabs{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px) { body.btf-fring-page .btf-fring-pos-tabs{ grid-template-columns: 1fr 1fr; } }
body.btf-fring-page .btf-fring-pos-tab{
  background: var(--cream-2);
  border: 1px solid var(--hair);
  border-radius: 11px;
  padding: .9rem .6rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  font: inherit;
  color: var(--ink);
  transition: all .15s;
  border-top-width: 3px;
}
body.btf-fring-page .btf-fring-pos-tab.bad{ border-top-color: var(--red, #8b2424); }
body.btf-fring-page .btf-fring-pos-tab.ok{ border-top-color: var(--gold); }
body.btf-fring-page .btf-fring-pos-tab.good{ border-top-color: var(--forest); }
body.btf-fring-page .btf-fring-pos-tab:hover{ transform: translateY(-2px); border-color: var(--ink-2); }
body.btf-fring-page .btf-fring-pos-tab.active{ background: var(--forest); color: var(--cream); border-color: var(--forest); }
body.btf-fring-page .btf-fring-pos-tab b{ font-family: var(--serif); font-weight: 500; font-size: 1.15rem; letter-spacing: -.01em; }
body.btf-fring-page .btf-fring-pos-tab span{ font-family: var(--mono); font-size: .58rem; letter-spacing: .04em; color: var(--muted); }
body.btf-fring-page .btf-fring-pos-tab.active span{ color: var(--gold-soft); }

body.btf-fring-page .btf-fring-pos-card{
  background: var(--cream-2);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 1.8rem 2rem;
  border-left-width: 3px;
}
body.btf-fring-page .btf-fring-pos-card.bad{ border-left-color: var(--red, #8b2424); }
body.btf-fring-page .btf-fring-pos-card.ok{ border-left-color: var(--gold); }
body.btf-fring-page .btf-fring-pos-card.good{ border-left-color: var(--forest); }
body.btf-fring-page .btf-fring-pos-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--hair);
}
body.btf-fring-page .btf-fring-pos-seats{ font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
body.btf-fring-page .btf-fring-pos-head h3.btf-th-display{ font-size: 1.7rem; margin: .12em 0 0; }
body.btf-fring-page .btf-fring-pos-pct{ text-align: right; flex-shrink: 0; }
body.btf-fring-page .btf-fring-pos-pct b{ font-family: var(--serif); font-weight: 400; font-size: 1.7rem; letter-spacing: -.02em; line-height: 1; color: var(--forest); display: block; }
body.dark.btf-fring-page .btf-fring-pos-pct b{ color: var(--gold-soft); }
body.btf-fring-page .btf-fring-pos-pct span{ font-family: var(--mono); font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

body.btf-fring-page .btf-fring-pos-range{
  background: var(--forest);
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.2rem;
}
body.btf-fring-page .btf-fring-pos-range-tag{
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-soft);
  display: block;
  margin-bottom: .45rem;
}
body.btf-fring-page .btf-fring-pos-range code{
  font-family: var(--mono);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--cream);
  word-spacing: .1em;
}
body.btf-fring-page .btf-fring-pos-body{ margin: 0 0 1.3rem; font-size: 1.04rem; line-height: 1.65; color: var(--ink-2); max-width: 78ch; }
body.btf-fring-page .btf-fring-pos-rule{
  background: var(--cream);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.3rem;
}
body.btf-fring-page .btf-fring-pos-rule-tag{ font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: #8a6d1e; display: block; margin-bottom: .3rem; }
body.dark.btf-fring-page .btf-fring-pos-rule-tag{ color: var(--gold-soft); }
body.btf-fring-page .btf-fring-pos-rule p{ margin: 0; font-family: var(--serif); font-size: 1.15rem; font-weight: 500; line-height: 1.4; color: var(--ink); }

/* ============ MULTIWAY ============ */
body.btf-fring-page .btf-fring-multi{
  background: var(--cream-2);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 1.8rem;
}
body.btf-fring-page .btf-fring-multi-lead{
  margin: 0 0 1.3rem;
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 76ch;
}
body.btf-fring-page .btf-fring-multi-list{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .6rem; }
body.btf-fring-page .btf-fring-multi-list li{
  position: relative;
  padding: .95rem 1.2rem .95rem 3.1em;
  background: var(--cream);
  border: 1px solid var(--hair);
  border-radius: 10px;
  font-size: .98rem;
  line-height: 1.5;
  color: var(--ink);
  border-left-width: 3px;
}
body.btf-fring-page .btf-fring-multi-list li.good{ border-left-color: var(--forest); }
body.btf-fring-page .btf-fring-multi-list li.bad{ border-left-color: var(--red, #8b2424); }
body.btf-fring-page .btf-fring-multi-list li::before{
  position: absolute;
  left: 1.2rem; top: .9rem;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.05em;
}
body.btf-fring-page .btf-fring-multi-list li.good::before{ content: "↑"; color: var(--forest); }
body.btf-fring-page .btf-fring-multi-list li.bad::before{ content: "↓"; color: var(--red, #8b2424); }
body.dark.btf-fring-page .btf-fring-multi-list li.good::before{ color: var(--gold-soft); }
body.dark.btf-fring-page .btf-fring-multi-list li.bad::before{ color: #d98b8b; }

/* ============ LEAKS ============ */
body.btf-fring-page .btf-fring-leaks{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 860px) { body.btf-fring-page .btf-fring-leaks{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { body.btf-fring-page .btf-fring-leaks{ grid-template-columns: 1fr; } }
body.btf-fring-page .btf-fring-leak{
  background: var(--cream-2);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 1.5rem 1.6rem;
  border-left-width: 3px;
}
body.btf-fring-page .btf-fring-leak.cost-high{ border-left-color: var(--red, #8b2424); }
body.btf-fring-page .btf-fring-leak.cost-med{ border-left-color: var(--gold); }
body.btf-fring-page .btf-fring-leak.cost-low{ border-left-color: var(--ink-2); }
body.btf-fring-page .btf-fring-leak-head{ display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; flex-wrap: wrap; }
body.btf-fring-page .btf-fring-leak-icon{ font-size: 1.4rem; line-height: 1; }
body.btf-fring-page .btf-fring-leak-head h4.btf-th-display{ font-size: 1.1rem; margin: 0; flex: 1; }
body.btf-fring-page .btf-fring-leak-cost{
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  padding: .25em .5em;
  border-radius: 4px;
  white-space: nowrap;
}
body.btf-fring-page .btf-fring-leak-cost.cost-high{ background: rgba(139,36,36,.12); color: var(--red, #8b2424); }
body.btf-fring-page .btf-fring-leak-cost.cost-med{ background: rgba(201,162,74,.18); color: #7d5e1a; }
body.btf-fring-page .btf-fring-leak-cost.cost-low{ background: var(--cream-3); color: var(--muted); }
body.dark.btf-fring-page .btf-fring-leak-cost.cost-high{ background: rgba(216,139,139,.16); color: #d98b8b; }
body.btf-fring-page .btf-fring-leak p{ margin: 0; font-size: .9rem; line-height: 1.55; color: var(--ink-2); }

/* ============ DO / DON'T ============ */
body.btf-fring-page .btf-fring-dodont{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 700px) { body.btf-fring-page .btf-fring-dodont{ grid-template-columns: 1fr; } }
body.btf-fring-page .btf-fring-dd-col{ border-radius: 14px; padding: 1.6rem 1.8rem; border: 1px solid var(--hair); }
body.btf-fring-page .btf-fring-dd-col.do{ background: rgba(29,52,38,.06); border-color: rgba(29,52,38,.2); }
body.btf-fring-page .btf-fring-dd-col.dont{ background: rgba(139,36,36,.05); border-color: rgba(139,36,36,.2); }
body.dark.btf-fring-page .btf-fring-dd-col.do{ background: rgba(201,162,74,.08); border-color: rgba(201,162,74,.22); }
body.btf-fring-page .btf-fring-dd-tag{
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  display: block;
  margin-bottom: 1rem;
}
body.btf-fring-page .btf-fring-dd-col.do .btf-fring-dd-tag{ color: var(--forest); }
body.btf-fring-page .btf-fring-dd-col.dont .btf-fring-dd-tag{ color: var(--red, #8b2424); }
body.dark.btf-fring-page .btf-fring-dd-col.do .btf-fring-dd-tag{ color: var(--gold-soft); }
body.dark.btf-fring-page .btf-fring-dd-col.dont .btf-fring-dd-tag{ color: #d98b8b; }
body.btf-fring-page .btf-fring-dd-col ul{ margin: 0; padding: 0; list-style: none; }
body.btf-fring-page .btf-fring-dd-col li{
  position: relative;
  padding-left: 1.9em;
  margin-bottom: .85em;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
}
body.btf-fring-page .btf-fring-dd-col li:last-child{ margin-bottom: 0; }
body.btf-fring-page .btf-fring-dd-col li::before{
  position: absolute;
  left: 0; top: -.05em;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.1em;
}
body.btf-fring-page .btf-fring-dd-col.do li::before{ content: "✓"; color: var(--forest); }
body.btf-fring-page .btf-fring-dd-col.dont li::before{ content: "✕"; color: var(--red, #8b2424); }
body.dark.btf-fring-page .btf-fring-dd-col.do li::before{ color: var(--gold-soft); }
body.dark.btf-fring-page .btf-fring-dd-col.dont li::before{ color: #d98b8b; }

/* Hero CTA row — the design inherited this from its base stylesheet. */
body.btf-fring-page .btf-fring-hero-cta {
	display: flex;
	gap: .7rem;
	flex-wrap: wrap;
	margin-top: 1.4rem;
}

/* The position panels carry `hidden` for the inactive seat, and the panel sets
   `display` — which beats the UA rule for [hidden]. State it explicitly or all
   five stack up at once. */
body.btf-fring-page .btf-fring-pos-card[hidden] {
	display: none;
}

/* ── Spacing the design carried as inline styles on the JSX ──────────────
   fring-app.jsx sets `style={{marginBottom:"2rem"}}` on every section lede and
   `style={{marginTop:"1.4rem"}}` on the "Why start here" callout. Inline styles
   don't survive the port to block templates, so state them here. */
body.btf-fring-page .btf-th-section .btf-th-section-h {
	margin-bottom: 2rem;
}
body.btf-fring-page .btf-fring-why {
	margin-top: 1.4rem;
}