/* Mobile-first: base styles are for phones; the min-width query widens up. */
:root{
  --bg:#f6f4ef; --card:#ffffff; --ink:#25313d; --muted:#66727e;
  --accent:#1b5e9c; --accent-ink:#ffffff; --line:#e2ded4;
  --good:#1d7a4f; --trap-bg:#fbf1f0; --trap-edge:#c4635a; --trap-ink:#8c3f38;
  --chip:#eef3f8;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#171c22; --card:#20272f; --ink:#e6e9ec; --muted:#9aa5b0;
    --accent:#5b9bd5; --accent-ink:#10151a; --line:#323a44;
    --good:#5fbd8f; --trap-bg:#2c2220; --trap-edge:#b06a63; --trap-ink:#dfa39d;
    --chip:#2a3540;
  }
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink)}
.wrap{max-width:880px;margin:0 auto;padding:0 14px}

header{background:var(--accent);color:var(--accent-ink);padding:12px 4px}
header h1{margin:0;font-size:18px;letter-spacing:.2px}
header p{display:none;margin:6px 0 0;opacity:.92;font-size:15px;max-width:60ch}

nav{position:sticky;top:0;z-index:5;background:var(--card);border-bottom:1px solid var(--line);overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
nav .wrap{display:flex;gap:2px;padding:0 6px}
nav a{display:inline-block;padding:12px 10px;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;border-bottom:3px solid transparent}
nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}

main{padding:16px 0 56px}
h2{font-size:20px;margin:20px 0 6px}
.intro{color:var(--muted);margin:0 0 14px;max-width:70ch}

/* ---- finder (landing page) ---- */
.finder .hint{margin:2px 0 14px;color:var(--muted);font-size:14px;max-width:70ch}
.finder .q{font-size:15px;font-weight:700;margin:16px 0 8px}
.fit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(56px,1fr));gap:8px}
.honor-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.chip{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;font:inherit;font-weight:700;cursor:pointer;padding:0}
.fit-grid .chip{height:48px;font-size:17px}
.honor-grid .chip{height:60px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-size:17px;line-height:1}
.honor-grid .chip .suit{font-size:12px;opacity:.75}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fit-splits{background:var(--chip);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:14px 0 0;font-size:14px}
.fit-splits p{margin:0 0 6px;color:var(--muted)}
.fit-splits p b{color:var(--ink)}
.mini-splits{display:flex;flex-wrap:wrap;gap:8px}
.mini-splits>span{display:inline-flex;align-items:baseline;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 11px;white-space:nowrap}
.mini-splits .lbl{color:var(--muted);font-weight:600;font-size:13px}
.mini-splits b{font-variant-numeric:tabular-nums;color:var(--good);font-size:16px}
.finder .status{margin:14px 0 0;font-size:14px;color:var(--muted)}
.finder .status b{color:var(--ink)}
.finder .reset{background:none;border:none;color:var(--accent);font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:0;margin-left:8px;text-decoration:underline}

/* ---- split tables (primer page) ---- */
table.splits{border-collapse:collapse;margin:14px 0 6px;min-width:260px}
table.splits caption{text-align:left;font-weight:700;padding-bottom:6px}
table.splits th,table.splits td{border:1px solid var(--line);padding:6px 14px;text-align:center;font-size:15px;font-variant-numeric:tabular-nums}
table.splits th{background:var(--chip)}
.splits-note{color:var(--muted);font-size:14px;max-width:70ch}
.splits-row{display:flex;flex-wrap:wrap;gap:18px}
.primer p{max-width:70ch}
.assume{background:var(--chip);border:1px solid var(--line);border-radius:10px;padding:12px 16px;font-size:14px;color:var(--muted);margin:26px 0 0;max-width:76ch}

/* ---- combo cards ---- */
.combo{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 14px 6px;margin:14px 0}
.combo h3{margin:0;font-size:17px}
.combo .notation{color:var(--muted);font-size:14px;margin:2px 0 12px}
.hands{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin:6px 0 12px}
.hand{display:flex;align-items:center;gap:10px}
.hand .who{width:88px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.cards{display:flex;gap:4px}
.pcard{width:32px;height:46px;border:1px solid var(--line);border-radius:6px;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.12);display:flex;flex-direction:column;justify-content:center;align-items:center;font-weight:700;font-size:14px;line-height:1}
.pcard .suit{font-size:12px;margin-top:2px}
.pcard.honor{color:var(--accent)}
.lesson{font-size:15px;color:var(--muted);font-style:italic;margin:0 0 4px;max-width:70ch}
.goal{border-top:1px solid var(--line);padding:12px 0 11px}
.goal .head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.goal .need{font-weight:700;font-size:15px}
.goal .pct{font-weight:800;font-size:17px;color:var(--good);font-variant-numeric:tabular-nums}
.goal .pct.zero{color:var(--trap-edge)}
.goal .play{margin:5px 0 3px;font-weight:600;max-width:70ch}
.goal .why{margin:0;color:var(--muted);font-size:15px;max-width:70ch}
.trap{background:var(--trap-bg);border-left:3px solid var(--trap-edge);border-radius:0 8px 8px 0;padding:9px 12px;margin:10px 0 2px;font-size:14px;max-width:66ch}
.trap b{color:var(--trap-ink)}

footer{color:var(--muted);font-size:13px;padding:26px 16px 40px;text-align:center}

/* ---- desktop ---- */
@media (min-width: 700px){
  .wrap{padding:0 16px}
  header{padding:24px 4px 20px}
  header h1{font-size:25px}
  header p{display:block}
  nav a{padding:12px 14px}
  main{padding:24px 0 60px}
  .fit-grid{max-width:420px}
  .honor-grid{max-width:520px}
  .combo{padding:18px 18px 8px}
}