/* Cards you can see: the articles' card blocks (includes/ArticleCards.php, ArticleSpot.php) and Muck GTO Learn's quick
   start (assets/learn-refresh.js) share these. acd- for cards and boxes, asp- for the trainer table drawn in a page. */
/* A hand spot, drawn as the Muck GTO trainer's table (includes/ArticleSpot.php, assets/hand-review.css) */
.asp{margin:var(--muck-space-6,28px) 0;max-width:520px}
.asp-table--action{aspect-ratio:16/11}
.asp .asp-back{background:repeating-linear-gradient(45deg,var(--muck-warm-tile,#2a241a) 0 4px,var(--muck-bg,#0e0e0e) 4px 8px);box-shadow:inset 0 0 0 2px var(--muck-gold-muted,#8a7442),0 1px 0 #0006}
@media(max-width:600px){.asp-table--action{aspect-ratio:8/7;--asp-bet-you:74%;--asp-bet-them:26%}.asp-table--action .hr-mid{gap:3px}}
.asp-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* for screen readers; the table says it visually */
/* Cards you can see (includes/ArticleCards.php): the trainer's four-colour cards, inline in the text and in figures */
.acd{display:inline-flex;align-items:center;justify-content:center;border-radius:5px;background:#f4f1ea;color:#1b1b1b;line-height:1;box-shadow:0 1px 0 #0006;font-family:var(--muck-font,Inter,system-ui,sans-serif)}
.acd b{font-weight:800;letter-spacing:-.5px}.acd i{font-style:normal}
/* The four-colour deck, like Muck GTO's trainer (Shaun, 2026-10-19: "use the 4 color deck ... also for the articles"):
   a solid card per suit, white rank and pip; the table drawn in a page too (.asp) */
.acd-s,.asp .hr-card.hr-s-s{background:var(--muck-suit-s);color:#fff}.acd-h,.asp .hr-card.hr-s-h{background:var(--muck-suit-h);color:#fff}
.acd-d,.asp .hr-card.hr-s-d{background:var(--muck-suit-d);color:#fff}.acd-c,.asp .hr-card.hr-s-c{background:var(--muck-suit-c);color:#fff}
.acd--in{gap:1px;padding:2px 5px;margin:0 1px;font-size:.88em;vertical-align:.1em;border-radius:4px}
.acd--in b{font-size:1em}.acd--in i{font-size:.95em}
.acd--md,.acd--lg{flex-direction:column;flex:none}
.acd--md{width:26px;height:36px}.acd--md b{font-size:13px}.acd--md i{font-size:11px}
.acd--lg{width:34px;height:46px;border-radius:6px}.acd--lg b{font-size:16px}.acd--lg i{font-size:13px}
.acd.is-out{opacity:.28}
.acd.is-key{box-shadow:0 0 0 2px var(--muck-gold,#ffd34f),0 0 14px #ffd34f66}
.acd-box{box-sizing:border-box;max-width:560px;margin:var(--muck-space-6,28px) 0;padding:16px 18px;border:1px solid var(--muck-line,#292929);border-radius:12px;background:var(--muck-surface-1,#141414)}
.acd-row{display:flex;gap:5px;align-items:center}
.acd-groups{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end}
.acd-label{display:block;margin-bottom:6px;color:var(--muck-text-3,#8a8a85);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.acd-cap{margin-top:12px;color:var(--muck-text-2,#b4b4b4);font-size:14px;line-height:1.5}
.acd-cap strong{color:var(--muck-text,#f3f0e7);font-size:18px;letter-spacing:.02em}
.acd-cap .acd-label{display:inline;margin:0 6px 0 0}
.acd-sub{display:block;margin-top:4px;font-size:13px;color:var(--muck-text-3,#8a8a85)}
.acd-hand{width:fit-content}   /* left-aligned with the text, like every block (Shaun, 2026-10-19) */
/* head to head */
.acd-vrow{display:grid;grid-template-columns:minmax(52px,auto) auto 1fr;gap:12px;align-items:center;padding:14px 0}.acd-vrow:first-child{padding-top:4px}
.acd-vrow+.acd-vrow{border-top:1px solid var(--muck-line,#292929)}
.acd-who{color:var(--muck-text-2,#b4b4b4);font-size:13px;font-weight:700;white-space:nowrap}
.acd-vrow.is-win .acd-who{color:var(--muck-gold,#ffd34f)}
.acd-tag{justify-self:end;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muck-text-3,#8a8a85)}
.acd-tag.is-win{padding:3px 8px;border-radius:999px;background:var(--muck-gold-cta,#ffd34f);color:var(--muck-gold-ink,#1a1505)}
.acd-versus .acd-cap{margin-top:12px}
.acd-versus--bare .acd-vrow{grid-template-columns:auto 1fr}.acd-versus--bare .acd-vrow .acd-tag{grid-column:auto}   /* no labels: the cards start at the edge */
/* the ladder */
.acd-ladder ol{margin:0;padding:0;list-style:none}
.acd-ladder li{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--muck-line,#292929)}
.acd-ladder li:first-child{border-top:0;padding-top:0}
.acd-rank{color:var(--muck-gold,#ffd34f);font-weight:800;font-size:13px}
.acd-name b{display:block;color:var(--muck-text,#f3f0e7);font-size:14px}
.acd-name small{display:block;margin-top:2px;color:var(--muck-text-3,#8a8a85);font-size:12px}
/* odds bars */
.acd-orow{display:grid;grid-template-columns:minmax(150px,max-content) 1fr 56px;gap:12px;align-items:center;padding:5px 0}
.acd-olabel{color:var(--muck-text-2,#b4b4b4);font-size:13px}
.acd-orow>b{color:var(--muck-text,#f3f0e7);font-size:15px;text-align:right;font-variant-numeric:tabular-nums}
.acd-otrack{height:10px;border-radius:999px;background:var(--muck-surface-3,#242424);overflow:hidden}
.acd-ofill{display:block;height:100%;border-radius:999px}
.acd-ofill.is-need{background:var(--muck-text-3,#8a8a85)}
.acd-ofill.is-short{background:var(--muck-red,#e5484d)}
.acd-ofill.is-enough{background:var(--muck-green,#3fb950)}
@media(max-width:480px){
  .acd-box{padding:14px 12px}
  .acd--lg{width:30px;height:42px}.acd--lg b{font-size:14px}
  .acd-row{gap:4px}
  .acd-vrow{grid-template-columns:auto 1fr;gap:6px 10px}.acd-vrow .acd-tag{grid-column:2;justify-self:start}
  .acd-ladder li{grid-template-columns:18px 1fr;gap:6px 10px}.acd-ladder li .acd-row{grid-column:2}
  .acd-orow{grid-template-columns:1fr 48px;gap:4px 10px}.acd-olabel{grid-column:1 / -1}
}