/* =============================================================================
 * casinotrainer.net — shared guide-cluster design system
 * Felt green / brass, Oswald + Inter. Used by every trainer's guide cluster
 * (Ultimate Texas Hold'em at /uth/, Blackjack at /blackjack/, and future ones).
 * Class vocabulary matches the generated guide pages and the UTH widget
 * hydrator (widgets.js). Tokens lifted from the trainer so the cluster matches.
 * ============================================================================= */
:root{
  --felt:#0a2c21; --felt2:#0e3a2b; --felt3:#124a38; --felt4:#0b2419;
  --brass:#cea849; --brass2:#e6c66a; --brass-dim:#7a6427;
  --cream:#f3eede; --muted:#9bb0a5; --muted2:#7c9388;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.06);
  --raise-txt:#22160a; --check-bg:#0c3527; --check-txt:#8fa79b;
  --danger:#e08b6a; --danger2:#c9603c;
  --exact:#7fd6a8; --sim:#e6c66a; --win:#7fd6a8; --tie:#5b7d6d; --loss:#e08b6a;
  --maxw:940px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,sans-serif; color:var(--cream);
  background:var(--felt4);
  background-image:radial-gradient(120% 90% at 50% -8%,var(--felt3),var(--felt) 46%,var(--felt4) 100%);
  background-attachment:fixed; line-height:1.62; font-size:17px; -webkit-font-smoothing:antialiased;
}
a{color:var(--brass2);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2.5px solid var(--brass2);outline-offset:2px;border-radius:3px}
img{max-width:100%}

/* ---- skip link ------------------------------------------------------------- */
.skip-link{position:absolute;left:-999px;top:0;background:var(--brass);color:var(--raise-txt);
  padding:8px 14px;border-radius:0 0 8px 0;font-family:Oswald,sans-serif;font-weight:600;z-index:100}
.skip-link:focus{left:0}

/* ---- top nav --------------------------------------------------------------- */
.site-nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(9px);
  background:rgba(8,32,24,.82);border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:18px;padding:11px 22px}
.brand{font-family:Oswald,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  font-size:17px;color:var(--cream);white-space:nowrap}
.brand:hover{text-decoration:none}
.brand-mark{color:var(--brass2)}
.nav-links{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;margin-left:auto;align-items:center}
.nav-links a{color:var(--muted);font-weight:500}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--brass2);text-decoration:none}
.nav-cta{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.4px;font-weight:600;font-size:13px;
  background:linear-gradient(180deg,var(--brass2),var(--brass));color:var(--raise-txt)!important;
  padding:8px 15px;border-radius:8px;white-space:nowrap}
.nav-cta:hover{text-decoration:none;filter:brightness(1.06)}

/* ---- layout ---------------------------------------------------------------- */
.page{min-height:60vh}
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px 80px}
.breadcrumb{font-size:13px;color:var(--muted2);padding:18px 0 6px}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.breadcrumb a{color:var(--muted)}
.breadcrumb li[aria-current]{color:var(--cream)}
.breadcrumb .sep{color:var(--muted2)}

.article{max-width:74ch}
.article-head{padding:8px 0 6px;border-bottom:1px solid var(--line2);margin-bottom:18px}
h1{font-family:Oswald,sans-serif;font-weight:700;line-height:1.08;letter-spacing:.4px;
  font-size:clamp(30px,5vw,46px);margin:8px 0 12px}
.lead{font-size:19px;color:var(--muted);max-width:70ch;margin:0 0 4px}
h2{font-family:Oswald,sans-serif;font-weight:600;letter-spacing:.3px;font-size:26px;
  margin:44px 0 12px;padding-top:6px;scroll-margin-top:72px}
h3{font-family:Oswald,sans-serif;font-weight:600;font-size:19px;margin:28px 0 8px;color:var(--cream)}
p{margin:0 0 16px}
strong{color:#fff;font-weight:600}
em{color:var(--cream);font-style:italic}
.prose-list{margin:0 0 18px;padding-left:22px}
.prose-list li{margin:0 0 8px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--felt4);border:1px solid var(--line2);border-radius:5px;padding:1px 6px;color:var(--brass2)}

/* plain reference tables (rule effects, bust rates, mistake costs, etc.) */
.info-table{width:100%;border-collapse:collapse;margin:14px 0 20px;font-size:14px}
.info-table th,.info-table td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line2)}
.info-table thead th{font-family:Oswald,sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.5px;font-size:11.5px;color:var(--muted)}
.info-table tbody th{font-weight:500;color:var(--muted)}
.info-table td:last-child,.info-table th:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--cream)}
.info-table tr:last-child td,.info-table tr:last-child th{border-bottom:0}

/* answer-first callout (AEO/GEO: direct answer up top for readers + AI).
   .short-answer is the neutral, cluster-agnostic name; .uth-answer is kept as
   an alias so the existing /uth/ pages don't need markup changes. */
.uth-answer,.short-answer{background:linear-gradient(180deg,rgba(206,168,73,.10),rgba(206,168,73,.03));
  border:1px solid rgba(206,168,73,.30);border-left:3px solid var(--brass);
  border-radius:10px;padding:15px 18px;margin:6px 0 24px;font-size:17px}
.uth-answer p,.short-answer p{margin:0}
.uth-answer-label,.short-answer-label{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:11.5px;
  color:var(--brass);font-weight:600;display:block;margin-bottom:5px}

/* method / source tags */
.tag{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:5px;margin-left:8px;display:inline-block;vertical-align:2px}
.tag-exact{background:rgba(127,214,168,.16);color:var(--exact);border:1px solid rgba(127,214,168,.35)}
.tag-sim{background:rgba(230,198,106,.14);color:var(--sim);border:1px solid rgba(230,198,106,.35)}

/* link cards / hub grid */
.link-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:22px 0}
.link-grid-hub{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.link-card{background:var(--felt2);border:1px solid var(--line);border-radius:12px;padding:17px 18px;
  display:flex;flex-direction:column;gap:6px;color:var(--cream);
  transition:border-color .12s ease,transform .12s ease}
.link-card:hover{text-decoration:none;border-color:var(--brass-dim);transform:translateY(-2px)}
.link-card-title{font-family:Oswald,sans-serif;font-weight:600;font-size:17px;color:var(--brass2)}
.link-card-desc{color:var(--muted);font-size:14px;line-height:1.45}

/* related */
.related{border-top:1px solid var(--line);margin-top:48px;padding-top:22px}
.related h2{margin-top:0}

/* Q&A (visible, for users + AI extraction; no FAQ schema by design) */
.qa-section{margin:44px 0 8px}
.qa-section h2{margin-bottom:10px}
.qa{border:1px solid var(--line);border-radius:10px;background:var(--felt2);padding:0 16px;margin:0 0 10px}
.qa summary{font-family:Oswald,sans-serif;font-weight:600;font-size:16.5px;cursor:pointer;padding:14px 0;
  list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center;color:var(--cream)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--brass);font-size:22px;line-height:1}
.qa[open] summary::after{content:"\2212"}
.qa[open] summary{border-bottom:1px solid var(--line2)}
.qa-body{padding:12px 0 16px;color:var(--muted)}
.qa-body p{margin:0 0 10px}
.qa-body p:last-child{margin:0}
.qa-body strong{color:var(--cream)}

/* footer */
.site-footer{border-top:1px solid var(--line);background:rgba(8,32,24,.5)}
.footer-inner{max-width:var(--maxw);margin:0 auto;padding:26px 22px 40px;font-size:14px;color:var(--muted)}
.footer-brand{font-family:Oswald,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--cream);margin:0 0 10px}
.footer-links{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 14px}
.footer-links a{color:var(--muted)}
.footer-links a:hover{color:var(--brass2)}
.footer-note{max-width:70ch;font-size:12.5px;color:var(--muted2);line-height:1.55;margin:0 0 8px}
.footer-copy{font-size:12.5px;color:var(--muted2);margin:0}

/* =============================================================================
 * WIDGET SHELL — shared chrome for every engine tool (data-uth-widget)
 * ============================================================================= */
.uthw{background:radial-gradient(120% 140% at 50% -10%,var(--felt3),var(--felt) 62%);
  border:1px solid var(--line);border-radius:14px;padding:18px 18px 20px;margin:24px 0}
.uthw-head{margin-bottom:14px}
.uthw-title{font-family:Oswald,sans-serif;font-weight:700;letter-spacing:.5px;font-size:18px;
  text-transform:uppercase;display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.uthw-sub{color:var(--muted);font-size:13.5px;margin:6px 0 0;max-width:68ch}

/* controls */
.uthw-controls{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
.uthw-field{display:flex;flex-direction:column;gap:5px}
.uthw-field-label{font-size:11.5px;color:var(--muted);font-family:Oswald,sans-serif;
  text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.uthw-select,.uthw-input{font-family:Inter,sans-serif;font-size:14px;background:var(--felt2);
  border:1px solid var(--line);color:var(--cream);border-radius:8px;padding:8px 10px;outline:none}
.uthw-select{min-width:170px}
.uthw-input{width:110px}
.uthw-select:focus,.uthw-input:focus{border-color:var(--brass)}
.uthw-btn{align-self:flex-end;font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.4px;
  font-weight:600;font-size:13px;background:linear-gradient(180deg,var(--brass2),var(--brass));
  color:var(--raise-txt);border:0;border-radius:8px;padding:10px 16px;cursor:pointer}
.uthw-btn:hover{filter:brightness(1.06)}
.uthw-out{margin-top:2px}

/* loading + error */
.uthw-loading{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;padding:16px 0}
.uthw-spinner{display:inline-block;width:15px;height:15px;border:2px solid var(--brass-dim);
  border-top-color:var(--brass2);border-radius:50%;animation:uthspin .7s linear infinite}
.uthw-loading-label{color:var(--muted);font-size:14px}
@keyframes uthspin{to{transform:rotate(360deg)}}
.uthw-error{background:rgba(224,139,106,.10);border:1px solid rgba(224,139,106,.35);border-radius:10px;
  padding:12px 14px;font-size:14px;color:var(--danger)}

/* EV / edge bar rows */
.uthw-bar-row{margin:0 0 11px}
.uthw-bar-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:5px}
.uthw-bar-label{font-family:Oswald,sans-serif;font-weight:600;font-size:14px}
.uthw-bar-value{font-variant-numeric:tabular-nums;font-size:14px;color:var(--cream)}
.uthw-bar-track{height:22px;background:var(--felt4);border:1px solid var(--line2);border-radius:6px;overflow:hidden}
.uthw-bar-fill{height:100%;border-radius:5px}
.uthw-bar-fill.pos{background:linear-gradient(180deg,var(--brass2),var(--brass))}
.uthw-bar-fill.neg{background:linear-gradient(180deg,var(--danger),var(--danger2))}
.uthw-bar-sub{font-size:11.5px;color:var(--muted2);margin-top:4px}
.uthw-bar-row.is-best .uthw-bar-label{color:var(--brass2)}
.uthw-bar-row.is-best .uthw-bar-track{box-shadow:0 0 0 1px var(--brass-dim)}

/* stat grid */
.uthw-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:12px 0}
.uthw-stat{background:var(--felt2);border:1px solid var(--line);border-radius:10px;padding:12px 13px}
.uthw-stat-value{font-family:Oswald,sans-serif;font-weight:700;font-size:23px;color:var(--brass2);
  line-height:1.05;font-variant-numeric:tabular-nums}
.uthw-stat-label{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.35}
.uthw-stat-label .tag{margin-left:6px}

/* panels */
.uthw-panel{margin:16px 0 0;border-top:1px solid var(--line2);padding-top:14px}
.uthw-panel-title{font-family:Oswald,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.5px;
  font-size:13px;color:var(--cream);margin-bottom:10px;display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.uthw-note{font-size:13px;color:var(--muted2);line-height:1.55;margin:10px 0 0}

/* verdict */
.uthw-verdict{margin-top:12px;background:var(--felt2);border:1px solid var(--line);border-radius:10px;
  padding:11px 14px;font-size:14.5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.uthw-verdict-text strong{color:var(--brass2)}

/* one-sigma range band */
.uthw-range{display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--felt4);border:1px solid var(--line2);border-radius:8px;padding:12px 16px;
  font-variant-numeric:tabular-nums}
.uthw-range-lo{color:var(--danger)}
.uthw-range-mid{color:var(--cream);font-family:Oswald,sans-serif;font-weight:700;font-size:18px}
.uthw-range-hi{color:var(--exact)}

/* spot meta (EV explorer) */
.uthw-spot-meta{margin:0 0 14px}
.uthw-spot-line{display:inline-block;margin-right:18px;font-size:13.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.uthw-spot-line:before{content:"";}

/* data table inside widgets */
.uthw-table{border-collapse:collapse;width:100%;font-size:14px;margin:4px 0 2px}
.uthw-table th,.uthw-table td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line2)}
.uthw-table th{font-family:Oswald,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.5px;
  font-size:11.5px;color:var(--muted)}
.uthw-table td{color:var(--cream)}
.uthw-table th.num,.uthw-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.uthw-table tr:last-child td{border-bottom:0}

/* stacked win/tie/loss bar */
.uthw-stack{display:flex;height:30px;border-radius:7px;overflow:hidden;border:1px solid var(--line);margin:8px 0 4px}
.uthw-stack-seg{display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;
  min-width:0;overflow:hidden;white-space:nowrap}
.uthw-stack-seg.win{background:linear-gradient(180deg,var(--brass2),var(--brass));color:#0c1f17}
.uthw-stack-seg.tie{background:var(--tie);color:var(--cream)}
.uthw-stack-seg.loss{background:linear-gradient(180deg,var(--danger),var(--danger2));color:#2a0f06}

/* legend (chart) */
.uthw-legend{display:flex;gap:18px;margin-top:12px;font-size:13px;color:var(--muted)}
.uthw-legend-item{display:flex;align-items:center;gap:7px}
.uthw-swatch{width:15px;height:15px;border-radius:4px;display:inline-block;border:1px solid var(--line)}
.uthw-swatch.raise{background:linear-gradient(180deg,var(--brass2),var(--brass))}
.uthw-swatch.check{background:var(--check-bg)}

/* =============================================================================
 * STRATEGY CHART GRID
 * ============================================================================= */
.uthw-chart-scroll{overflow-x:auto;margin:4px 0 6px;-webkit-overflow-scrolling:touch}
.uthw-chart{border-collapse:collapse;font-variant-numeric:tabular-nums;margin:0 auto}
.uthw-chart th{font-family:Oswald,sans-serif;font-weight:600;font-size:11px;color:var(--muted);
  padding:3px;text-align:center}
.uthw-chart th.corner{background:transparent}
.uthw-chart th.rowhead{color:var(--brass2)}
.uthw-chart td.cell{width:34px;height:30px;text-align:center;border:1px solid var(--felt4);
  font-size:10.5px;font-weight:600;cursor:default}
.uthw-chart td.cell.raise{background:linear-gradient(180deg,var(--brass2),var(--brass));color:var(--raise-txt)}
.uthw-chart td.cell.check{background:var(--check-bg);color:var(--check-txt)}
.uthw-chart .cell-label{pointer-events:none}

/* =============================================================================
 * RESPONSIVE
 * ============================================================================= */
@media (max-width:640px){
  body{font-size:16px}
  .nav-links{display:none}
  .nav-inner{padding:10px 16px}
  .container{padding:0 16px 64px}
  h2{font-size:23px}
  .uthw{padding:15px 14px 16px}
  .uthw-controls{gap:10px}
  .uthw-select{min-width:0;width:100%}
  .uthw-field{flex:1 1 140px}
  .uthw-chart td.cell{width:26px;height:26px;font-size:9px}
  .uthw-range{flex-direction:column;gap:6px;align-items:stretch;text-align:center}
}