/* sample.css — the sample event page (/demo/scramble) and the course door
   (/for-courses), 2026-10-29. Loaded on top of app.css + site.css by
   LayoutSample. Built only from the app's theme tokens, so all three themes
   work with no overrides here. */

/* ribbon + hero */
.smp-ribbon{background:var(--warn-bg);color:var(--warn-ink);font-size:14px;text-align:center;padding:8px 14px;border-radius:10px;margin:0 0 6px}
.smp-hero{display:flex;gap:32px;flex-wrap:wrap;align-items:flex-start;padding:18px 0 8px}
.smp-copy{flex:1 1 340px;min-width:0;display:grid;gap:14px;padding-top:6px}
.smp-copy h1{font-size:clamp(30px,4.6vw,46px);font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:0;text-wrap:balance}
.smp-copy .lede{font-size:clamp(15px,1.8vw,18px);color:var(--muted);margin:0;max-width:34em}
.smp-live{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--warn-ink)}
.smp-live i{width:8px;height:8px;border-radius:50%;background:var(--live)}
.smp-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.smp-price{font-size:14px;color:var(--muted);margin:0}
.smp-boardcol{flex:1 1 420px;min-width:0;max-width:560px;display:grid;gap:10px}

/* format tabs: CSS-only radios, so the tabs work with no script */
.smp-fmt>input{position:absolute;opacity:0;pointer-events:none}
.smp-tabs{display:flex;gap:4px;flex-wrap:wrap;background:var(--surface-2);padding:4px;border-radius:10px}
.smp-tabs label{flex:1 1 auto;text-align:center;font-weight:700;font-size:13.5px;padding:8px 10px;border-radius:8px;color:var(--muted);cursor:pointer;min-height:24px}
.smp-fmt>input:focus-visible+*{outline:none}
#fmt-scramble:checked~.smp-tabs label[for=fmt-scramble],#fmt-stroke:checked~.smp-tabs label[for=fmt-stroke],#fmt-stableford:checked~.smp-tabs label[for=fmt-stableford],#fmt-match:checked~.smp-tabs label[for=fmt-match],#fmt-skins:checked~.smp-tabs label[for=fmt-skins]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
#fmt-scramble:focus-visible~.smp-tabs label[for=fmt-scramble],#fmt-stroke:focus-visible~.smp-tabs label[for=fmt-stroke],#fmt-stableford:focus-visible~.smp-tabs label[for=fmt-stableford],#fmt-match:focus-visible~.smp-tabs label[for=fmt-match],#fmt-skins:focus-visible~.smp-tabs label[for=fmt-skins]{outline:2px solid var(--accent);outline-offset:1px}
.smp-pane{display:none}
#fmt-scramble:checked~.smp-boards .pane-scramble,#fmt-stroke:checked~.smp-boards .pane-stroke,#fmt-stableford:checked~.smp-boards .pane-stableford,#fmt-match:checked~.smp-boards .pane-match,#fmt-skins:checked~.smp-boards .pane-skins{display:block}

/* the board: one fixed size for every format and every challenge */
.smp-board{background:var(--board);color:var(--board-ink);border-radius:16px;padding:16px 18px;box-shadow:0 18px 40px rgba(10,30,20,.2)}
.smp-board .bh{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.smp-board .bh b{font-size:17px}
.smp-board .upd{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--live)}
.smp-body{height:440px;overflow-y:auto;overscroll-behavior:contain}
.smp-row{display:grid;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--board-line);font-size:14.5px}
.smp-row.h{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--board-muted);padding:4px 0}
.smp-row.c5{grid-template-columns:36px minmax(0,1fr) 54px 42px 42px}
.smp-row.c4{grid-template-columns:36px minmax(0,1fr) 64px 42px}
.smp-row.c3{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 42px}
.smp-row.k3{grid-template-columns:48px minmax(0,1fr) 72px}
.smp-row .n{text-align:right;font-variant-numeric:tabular-nums}
.smp-row .u{color:var(--under);font-weight:800}
.smp-row .p{font-weight:800}
.smp-tm{display:grid;min-width:0;line-height:1.2}
.smp-tm>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.smp-tm small{font-size:11.5px;color:var(--board-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smp-row.drill-toggle{cursor:pointer}
.smp-row.drill-toggle:hover{background:rgba(255,255,255,.04)}
.smp-drill{padding:8px 0 10px;border-bottom:1px solid var(--board-line)}
.smp-drill .card{background:transparent;border-color:var(--board-line);color:var(--board-ink);padding:8px;margin:0}
.smp-drill table.data th,.smp-drill table.data td{color:var(--board-ink);border-color:var(--board-line)}
.smp-strip{display:flex;align-items:center;gap:10px;height:48px;margin-top:10px;padding:8px 12px;background:rgba(255,255,255,.06);border-radius:10px;overflow:hidden}
.smp-strip>.txt{flex:1 1 0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:2px;align-content:center}
.smp-strip>.txt>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.smp-strip .chl{color:var(--live);font-weight:700;font-size:13.5px}
.smp-strip .chl small{color:var(--board-muted);font-weight:500;font-size:12px;margin-left:4px}
.smp-strip .chv{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.smp-strip .chh{grid-column:1/-1;color:var(--board-muted);font-size:13px}
.smp-strip .chh b{color:var(--board-ink);font-weight:600;margin-right:6px}
.smp-dots{display:flex;gap:2px;flex:none}
.smp-dots button{width:24px;height:24px;border:0;background:transparent;padding:0;cursor:pointer;display:grid;place-items:center}
.smp-dots button::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--board-muted);opacity:.5}
.smp-dots button[aria-pressed="true"]::after{background:var(--live);opacity:1}
.smp-key{font-size:13px;color:var(--muted);text-align:center;margin:0}

/* sections */
.smp-sec{padding:44px 0 8px;display:grid;gap:18px}
.smp-sec h2{font-size:clamp(24px,3.4vw,34px);font-weight:800;letter-spacing:-.01em;line-height:1.1;margin:0;text-wrap:balance}
.smp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.smp-fmtc{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:4px;align-content:start}
.smp-fmtc b{font-size:16px}
.smp-fmtc span{color:var(--muted);font-size:14px}
.smp-fmtc .ex{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.smp-heat{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:3px}
.smp-heat span{border-radius:4px;text-align:center;font-size:11px;padding:3px 0;background:var(--surface);font-variant-numeric:tabular-nums}
.smp-heat .in{background:var(--accent);color:var(--accent-ink)}
.smp-heat .part{background:var(--chip);color:var(--chip-ink)}
.smp-split{display:flex;gap:28px;flex-wrap:wrap;align-items:center}
.smp-split>*{flex:1 1 320px;min-width:0}
.smp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.smp-stats div{background:var(--surface-2);border-radius:12px;padding:12px;display:grid}
.smp-stats b{font-size:clamp(20px,2.6vw,28px);font-variant-numeric:tabular-nums}
.smp-stats span{font-size:13px;color:var(--muted)}
.smp-magic{background:var(--board);color:var(--board-ink);border-radius:18px;padding:clamp(18px,3vw,32px);display:flex;gap:28px;flex-wrap:wrap}
.smp-magic>*{flex:1 1 320px;min-width:0;display:grid;gap:12px;align-content:start}
.smp-magic .eb{color:var(--live)}
.smp-magic textarea{font:inherit;font-size:16px;border-radius:10px;border:0;padding:12px;resize:none;color:var(--ink);background:var(--surface)}
.smp-magic .mut{color:var(--board-muted);font-size:14px}
.smp-magic .draft{background:rgba(255,255,255,.06);border-radius:12px;padding:16px;display:grid;gap:8px;font-size:14.5px}
.smp-magic .draft div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--board-line);padding-bottom:6px}
.smp-magic .draft div:last-child{border:0}
.smp-magic .draft span{color:var(--board-muted)}

/* fit finder (/for-courses) */
.ff{display:flex;gap:20px;flex-wrap:wrap;align-items:stretch}
.ff .qs{flex:1 1 420px;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;display:grid;gap:16px}
.ff .q{display:grid;gap:8px}
.ff .opts{display:flex;gap:8px;flex-wrap:wrap}
.ff .opts button{font:inherit;font-weight:700;font-size:14.5px;padding:10px 14px;min-height:44px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.ff .opts button[aria-pressed="true"]{border:2px solid var(--accent);background:var(--chip);color:var(--chip-ink)}
.ff .rec{flex:1 1 300px;min-width:0;background:var(--board);color:var(--board-ink);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:10px}
.ff .rec .eb{color:var(--live)}
.ff .rec .nm{font-size:26px;font-weight:800;line-height:1.1}
.ff .rec .pr{font-size:28px;font-weight:800;color:var(--live);font-variant-numeric:tabular-nums}
.ff .rec .recb{display:flex;flex-direction:column;gap:10px;flex:1}
.ff .rec .recb[hidden]{display:none}
.ff .rec .alt{font-size:13.5px;color:var(--board-muted);text-align:center}
.ff .rec .btn{margin-top:auto}
.smp-math{overflow-x:auto}
.smp-math table{border-collapse:collapse;min-width:420px;font-size:15px}
.smp-math th,.smp-math td{padding:8px 10px;text-align:left;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.smp-math tr:first-child th,.smp-math tr:first-child td{border-top:0}
.smp-math .win{color:var(--accent);font-weight:800}

/* phone: one bar at the bottom, one button */
.smp-bar{display:none}
@media (max-width:720px){
	.smp-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;gap:10px;align-items:center;background:var(--ink);color:var(--bg);padding:10px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
	.smp-bar span{flex:1;font-size:13px}
	.smp-pad{height:72px}
	.smp-row.c5{grid-template-columns:30px minmax(0,1fr) 46px 34px 36px;font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){.smp-board *{transition:none}}