/* Layout: coach's clipboard — play library | live field | step card. Field colors stay natural; chrome is navy ink on cool chalk. */
:root{
  --bg:#ECEFEA; --panel:#FBFCFA; --panel2:#F2F5F0; --ink:#142019; --muted:#56635B; --line:#D2D9CF;
  --accent:#1D3461; --accent-ink:#FFFFFF; --accent-soft:#DCE3F0;
  --def:#1D3461; --off:#C4352B; --gold:#E8AA2A; --chalk:#FFFFFF; --inkpen:#FFE04D;
  --good:#2E7D4F; --good-soft:#DDEFE3; --bad-soft:#F6DEDB;
  --grass:#5B8C4B; --grass2:#649756; --clay:#C48B5C; --track:#B5845B; --stands:#33403A; --wall:#1F2A24;
  --display:'Saira Condensed','Arial Narrow',sans-serif; --body:'Public Sans',system-ui,-apple-system,sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E1411; --panel:#151D18; --panel2:#1B2520; --ink:#E3EAE4; --muted:#98A69D; --line:#2A362F;
  --good:#6CC08B; --good-soft:#1C3326; --bad-soft:#3A2220;
  --accent:#9DB6EC; --accent-ink:#0E1411; --accent-soft:#223049;
  --grass:#4A783E; --grass2:#518345; --clay:#A8764C; --track:#987050; --stands:#19211D; --wall:#0B100D; color-scheme:dark }}
:root[data-theme="dark"]{
  --good:#6CC08B; --good-soft:#1C3326; --bad-soft:#3A2220;
  --bg:#0E1411; --panel:#151D18; --panel2:#1B2520; --ink:#E3EAE4; --muted:#98A69D; --line:#2A362F;
  --accent:#9DB6EC; --accent-ink:#0E1411; --accent-soft:#223049;
  --grass:#4A783E; --grass2:#518345; --clay:#A8764C; --track:#987050; --stands:#19211D; --wall:#0B100D; color-scheme:dark }
:root[data-theme="light"]{color-scheme:light}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:14px/1.5 var(--body)}
.wrap{max-width:1540px;margin:0 auto;padding-block:16px 32px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button,select,input,textarea{font:inherit;color:inherit}
button,select,input,textarea,summary{touch-action:manipulation}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px;padding-bottom:12px;border-bottom:3px solid var(--ink);margin-bottom:16px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.mark{width:54px;height:54px;flex:none;object-fit:contain}
.eyebrow{font:600 11px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
a.home{display:inline-block;text-decoration:none}a.home:hover{color:var(--ink);text-decoration:underline}
h1{font:800 clamp(26px,3.2vw,38px)/.95 var(--display);text-transform:uppercase;letter-spacing:.01em;margin:3px 0 0;text-wrap:balance}
.fieldtag{font:500 12px/1.4 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.topside{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:0}
.seg.theme button{padding:5px 10px;font-size:12px}

.app{display:grid;grid-template-columns:236px minmax(0,1fr) 340px;gap:20px;align-items:start}
.lib{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;padding-right:6px}
.search{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:var(--panel);margin-bottom:10px}
.cat{margin-bottom:14px}
.cat h3{font:700 13px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 6px;display:flex;justify-content:space-between}
.cat h3 span{font:500 11px var(--mono)}
.sitbtn{display:block;width:100%;text-align:left;border:0;background:none;padding:5px 9px;border-radius:6px;cursor:pointer;line-height:1.3;font-size:13.5px}
.sitbtn:hover{background:var(--panel2)}
.sitbtn[aria-current="true"]{background:var(--accent);color:var(--accent-ink);font-weight:600}
.empty{font-size:12.5px;color:var(--muted);padding:2px 9px}
.mobile-pick{display:none;margin-bottom:12px}
.app.nolib{grid-template-columns:minmax(0,1fr) 340px}
.app.nolib .lib{display:none}
.app.nolib .mobile-pick{display:block}
.app.nolib #field{max-height:80vh}
.mobile-pick select{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}

.stage{min-width:0;display:flex;flex-direction:column;gap:10px}
.sithead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.sithead h2{font:700 clamp(21px,2.3vw,27px)/1.05 var(--display);margin:0;text-wrap:balance;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;font:500 11.5px/1 var(--mono);padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:var(--panel);white-space:nowrap}
.chip svg{width:16px;height:16px}
.toolbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:space-between}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}
.seg button{border:0;background:none;padding:6px 11px;cursor:pointer;font-size:12.5px;font-weight:600}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.seg .short{display:none}
.firstrun{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--accent);border-radius:10px;background:var(--accent-soft);font-size:13.5px;line-height:1.45}
.firstrun[hidden]{display:none}
.firstrun p{margin:0}
.firstrun .btn b{font-weight:700;margin-right:5px}
.fieldwrap{background:var(--stands);border-radius:12px;overflow:hidden;position:relative;touch-action:none}
#field{display:block;width:100%;height:auto;max-height:72vh;margin:0 auto;user-select:none;-webkit-user-select:none}
#field.pen{cursor:crosshair}

.transport{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.tbtns{display:flex;gap:6px;align-items:center}
.ib{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:var(--panel);cursor:pointer}
.ib:hover:not(:disabled){border-color:var(--ink)}
.ib:disabled{opacity:.4;cursor:default}
.ib svg{width:16px;height:16px;fill:currentColor}
.ib.play{width:52px;background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.pips{display:flex;flex-wrap:wrap;gap:5px;flex:1 1 170px;min-width:0}
.pip{min-width:30px;height:28px;padding:0 8px;border:1px solid var(--line);border-radius:6px;background:var(--panel);font:500 12px var(--mono);cursor:pointer;font-variant-numeric:tabular-nums}
.pip[aria-current="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.speed{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.speed select{padding:5px 6px;border:1px solid var(--line);border-radius:7px;background:var(--panel)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-2px;margin-right:5px}
.legend .lg-def{background:var(--def);box-shadow:0 0 0 1.5px var(--panel) inset}
.legend .lg-off{background:var(--off)}
.legend .lg-hl{background:none;border:2.5px solid var(--gold)}
.legend .lg-ln{width:20px;height:0;border-radius:0;border-top:2.5px dashed var(--muted);vertical-align:3px}

.panel{display:flex;flex-direction:column;gap:14px;min-width:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.steplabel{font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:8px}
.say{font-size:15px;line-height:1.55;margin:8px 0 0}
.jobs{list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
.jobs h4{font:700 12px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0}
.job{display:grid;grid-template-columns:30px minmax(0,1fr);gap:9px;align-items:start}
.dot{width:28px;height:28px;border-radius:50%;background:var(--def);}
.dot.run{background:var(--off)}
.dot{color:#fff;display:grid;place-items:center;font:700 12px var(--display);box-shadow:0 0 0 2px var(--gold)}
.job b{display:block;font-size:12px;color:var(--muted);font-weight:600;line-height:1.2}
.job span{font-size:13.5px;line-height:1.4}
details.card{padding:0}
details.card>summary{list-style:none;cursor:pointer;padding:13px 16px;font:700 15px var(--display);letter-spacing:.06em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary::after{content:"+";font:500 18px var(--mono);color:var(--muted)}
details.card[open]>summary::after{content:"–"}
.dbody{padding:0 16px 16px;display:flex;flex-direction:column;gap:10px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px}
label.f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);font-weight:600}
label.f input,label.f select,textarea{padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:var(--panel2);font-size:13.5px;color:var(--ink);width:100%;min-width:0}
label.f input{font-family:var(--mono);font-variant-numeric:tabular-nums}
textarea{resize:vertical;min-height:64px;font-family:var(--body)}
.btn{font:600 13px var(--body);padding:8px 12px;border:1px solid var(--line);background:var(--panel);border-radius:8px;cursor:pointer}
.btn:hover:not(:disabled){border-color:var(--ink)}
.btn:disabled{opacity:.45;cursor:default}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.warn{color:var(--off)}
.btns{display:flex;flex-wrap:wrap;gap:6px}
.hint{font-size:12.5px;color:var(--muted);margin:0;line-height:1.45}
.checks{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:13px}
.checks label{display:flex;align-items:center;gap:5px}
.msg{font-size:12.5px;color:var(--accent);min-height:1em;margin:0}
.steplist{margin:0;padding-left:20px;font-size:13px;display:flex;flex-direction:column;gap:3px}

/* SVG field */
.f-grass{fill:var(--grass)} .f-clay{fill:var(--clay)} .f-stands{fill:var(--stands)}
.s-track{stroke:var(--track);fill:none} .s-wall{stroke:var(--wall);fill:none} .s-clay{stroke:var(--clay);fill:none}
.s-chalk{stroke:var(--chalk);fill:none} .f-chalk{fill:var(--chalk)}
.mow{fill:var(--grass2)}
.dist{fill:var(--chalk);font-family:var(--mono);font-weight:500;opacity:.92;text-anchor:middle}
.tok{cursor:grab}
.tok .body{stroke:#fff}
.tok.def .body{fill:var(--def)}
.tok.run .body{fill:var(--off)}
.tok .lbl{fill:#fff;font-family:var(--display);font-weight:700;text-anchor:middle;pointer-events:none}
.tok .ringk{fill:none;stroke:#0B1A10;opacity:0}
.tok .ring{fill:none;stroke:var(--gold);opacity:0}
.tok.hl .ring{opacity:1}
.tok.hl .ringk,.tok.me .ringk{opacity:.45}
.tok .x{stroke:#fff;opacity:0}
.tok.out{opacity:.45}
.tok.out .x{opacity:1}
#field.pen .tok,#field.pen #ballG{pointer-events:none}
.tr-halo{stroke:#0B1A10;fill:none;opacity:.5;stroke-linecap:round;stroke-linejoin:round}
.tr-def{stroke:#fff;fill:none}
.tr-run{stroke:#FFB4AA;fill:none}
.tr-ball{stroke:var(--gold);fill:none}
.ink{stroke:var(--inkpen);fill:none;stroke-linecap:round;stroke-linejoin:round}
.mk-def{fill:#fff} .mk-run{fill:#FFB4AA} .mk-ball{fill:var(--gold)} .mk-ink{fill:var(--inkpen)}
#ballG{cursor:grab}
.ball{fill:#fff;stroke:#C4352B}
.shadow{fill:#000;opacity:.25}

/* Team, sharing, quiz */
.viewtag{display:inline-block;margin-right:10px;padding:3px 8px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:500}
.viewtag[hidden]{display:none}
.chip.rule{border-color:var(--gold);color:var(--ink)}
#stageMsg:empty{display:none}
h4.sub{font:700 12px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:6px 0 0}
.checks.col{flex-direction:column;align-items:flex-start;gap:6px}
.copyrow{display:flex;gap:6px;align-items:center}
.copyrow input{flex:1;min-width:0;padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:var(--panel2);font:500 12.5px var(--mono);color:var(--ink)}
.roster{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.roster li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.roster li>span:first-child{min-width:0;overflow-wrap:anywhere}
.roster b{font-weight:600;color:var(--muted);font-size:12px;white-space:nowrap}
.roster small{display:block;color:var(--muted);font:500 11px var(--mono)}
.roster .btns{flex-wrap:nowrap}
.choices{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.choice{display:block;width:100%;text-align:left;font:500 13.5px/1.35 var(--body);padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);cursor:pointer}
button.choice:hover{border-color:var(--ink)}
.choice.right{border-color:var(--good);background:var(--good-soft)}
.choice.wrong{border-color:var(--off);background:var(--bad-soft)}
.verdict{font:800 20px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;margin:10px 0 0}
.verdict.good{color:var(--good)} .verdict.bad{color:var(--off)}
.score{font:800 44px/1 var(--display);margin:10px 0 4px;font-variant-numeric:tabular-nums}
.pips.locked{opacity:.5;pointer-events:none}
.tok .hit{fill:transparent;stroke:none}
.tok.me .ring{opacity:1;stroke:var(--chalk);stroke-dasharray:3 2}
.guess{fill:none;stroke:var(--inkpen)}
.guess-line{stroke:var(--inkpen);opacity:.9}
body.viewing #teamBox,body.viewing #ruleBox,body.viewing #buildBox{display:none}

/* Print sheet: every step of one play on paper. Always light, ink-saving field colors. */
.sheet{display:none;
  --ink:#142019; --muted:#56635B; --line:#C9D1C6; --def:#1D3461; --off:#C4352B; --gold:#E8AA2A;
  --grass:#E4EEDE; --grass2:#E4EEDE; --clay:#EFDDC9; --track:#E4D0BA; --stands:#FFFFFF; --wall:#55605A; --chalk:#7D8A82}
@media print{
  @page{size:letter;margin:12mm}
  html,body{background:#fff}
  body>.wrap{display:none}
  .sheet{display:block;color:var(--ink);font:10.5px/1.4 var(--body);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .shead{display:flex;gap:10px;align-items:center;border-bottom:2px solid var(--ink);padding-bottom:6px;margin-bottom:10px}
  .shead h1{font-size:24px;margin:2px 0}
  .smeta{font:500 10px var(--mono);color:var(--muted)}
  .cells{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
  .cell{break-inside:avoid;border:1px solid var(--line);border-radius:6px;padding:6px}
  .mini{display:block;width:100%;height:auto;max-height:3.1in}
  .ctext{margin:5px 0 0}
  .cell ul{margin:4px 0 0;padding-left:14px}
  .sheet .tr-def{stroke:var(--def)} .sheet .mk-def{fill:var(--def)}
  .sheet .tr-run{stroke:var(--off)} .sheet .mk-run{fill:var(--off)}
  .sheet .tr-halo{display:none}
}

/* Tablets and phones: bigger targets */
@media (pointer:coarse){
  .seg button{padding:10px 14px;font-size:13.5px}
  .seg.theme button{padding:8px 12px;font-size:12.5px}
  .ib{width:46px;height:46px} .ib.play{width:62px}
  .pip{min-width:40px;height:38px}
  .sitbtn{padding:9px 10px}
  .btn,.choice{padding:11px 14px}
  .search,.mobile-pick select,label.f input,label.f select{padding:10px 11px}
  details.card>summary{padding:16px}
  .checks label{min-height:32px}
}

@media (max-width:1180px){
  .deskonly{display:none}
  .app{grid-template-columns:minmax(0,1fr) 320px}
  .lib{display:none}
  .mobile-pick{display:block}
}
@media (max-width:840px){
  /* One column, with the step card right under the field. The stage and panel dissolve so their children order themselves. */
  .app{grid-template-columns:minmax(0,1fr);gap:10px}
  .stage,.panel{display:contents}
  .mobile-pick{order:1;margin:0} .sithead{order:2} #stageMsg,.firstrun{order:3} .toolbar{order:4} .fieldwrap{order:5}
  #stepCard{order:6} .transport{order:7} .legend{order:8} #teamBox{order:9} #ruleBox{order:10} #fieldBox{order:11} #buildBox{order:12}
  #field{max-height:none}
  .toolbar{justify-content:flex-start}
  .seg .full{display:none} .seg .short{display:inline}
  .top{align-items:flex-start}
  .topside{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;width:100%}
}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto}}