:root{
  /* dark theme (default) */
  --bg:#0f1512; --card:#1a231e; --card2:#212d26; --line:#2e3d34;
  --text:#e8f0ea; --dim:#8fa398; --accent:#4ade80; --accent-dark:#166534;
  --warn:#fbbf24; --red:#f87171; --blue:#60a5fa;
  --gk:#fbbf24; --def:#60a5fa; --mid:#4ade80; --fwd:#f87171;
  --nav-bg:#131a16; --primary-text:#eafff2; --primary-line:#1d7a42;
  --danger-bg:#4b1d1d; --danger-line:#6b2a2a; --danger-text:#ffd9d9;
  --reco-bg:#14231b; --reco-line:#1d3a29;
}
/* light palette — applied when the user forces light, OR (auto) when the device prefers light */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#eef2ef; --card:#ffffff; --card2:#f1f5f2; --line:#dbe4de;
    --text:#14201a; --dim:#5f7268; --accent:#15a34a; --accent-dark:#15803d;
    --warn:#b45309; --red:#dc2626; --blue:#2563eb;
    --gk:#c2760a; --def:#2563eb; --mid:#15a34a; --fwd:#dc2626;
    --nav-bg:#ffffff; --primary-text:#ffffff; --primary-line:#15803d;
    --danger-bg:#fee2e2; --danger-line:#fca5a5; --danger-text:#991b1b;
    --reco-bg:#e9f7ee; --reco-line:#bfe6cd;
  }
}
:root[data-theme="light"]{
  --bg:#eef2ef; --card:#ffffff; --card2:#f1f5f2; --line:#dbe4de;
  --text:#14201a; --dim:#5f7268; --accent:#15a34a; --accent-dark:#15803d;
  --warn:#b45309; --red:#dc2626; --blue:#2563eb;
  --gk:#c2760a; --def:#2563eb; --mid:#15a34a; --fwd:#dc2626;
  --nav-bg:#ffffff; --primary-text:#ffffff; --primary-line:#15803d;
  --danger-bg:#fee2e2; --danger-line:#fca5a5; --danger-text:#991b1b;
  --reco-bg:#e9f7ee; --reco-line:#bfe6cd;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html{height:100%; overscroll-behavior:none; scrollbar-gutter:stable;}
/* keyboard focus: visible ring (touch/mouse taps stay clean via :focus-visible) */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
body{min-height:100%;}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px;
  padding-bottom:calc(150px + env(safe-area-inset-bottom));
  padding-top:env(safe-area-inset-top);
  overscroll-behavior-y:none; /* stop pull-to-refresh reloading the app */
  touch-action:manipulation;  /* no double-tap-to-zoom (keeps normal scrolling) */
}
header{padding:14px 16px 8px; display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
header h1{font-size:19px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
header .sub{color:var(--dim); font-size:12px; flex-shrink:0;}
.syncdot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); margin-right:4px;}
.syncdot.off{background:var(--warn);}
.page{padding:0 12px 12px; display:none;}
.page.active{display:block;}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:12px;}
.card h2{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); margin-bottom:10px;}
button{
  font:inherit; color:var(--text); background:var(--card2); border:1px solid var(--line);
  border-radius:10px; padding:9px 14px; font-weight:600; cursor:pointer;
  min-height:44px; /* touch target (Apple HIG / WCAG 2.5.5) */
}
button.primary{background:var(--accent-dark); border-color:var(--primary-line); color:var(--primary-text);}
button.danger{background:var(--danger-bg); border-color:var(--danger-line); color:var(--danger-text);}
button.small{padding:5px 10px; font-size:13px; border-radius:8px; min-height:0;} /* secondary, dense rows */
button:disabled{opacity:.4;}
input,select{
  font:inherit; color:var(--text); background:var(--card2); border:1px solid var(--line);
  border-radius:10px; padding:8px 10px; width:100%;
}
input[type=number]{width:70px;}
input[type=checkbox]{width:20px; height:20px; padding:0; flex:none; accent-color:var(--accent);}
.row{display:flex; gap:8px; align-items:center;}
.row.wrap{flex-wrap:wrap;}
.grow{flex:1;}
.muted{color:var(--dim); font-size:13px;}
.mt{margin-top:10px;} .mb{margin-bottom:10px;}
.err{color:var(--red); font-size:13px; margin-top:8px; min-height:16px;}

nav{
  position:fixed; bottom:0; left:0; right:0; display:none;
  background:var(--nav-bg); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom); z-index:50;
}
nav.show{display:flex;}
nav button{
  flex:1; background:none; border:none; border-radius:0; color:var(--dim);
  padding:10px 0 8px; font-size:11px; font-weight:600; display:flex; flex-direction:column; gap:2px; align-items:center;
}
nav button .ico{font-size:20px; line-height:1;}
nav button.on{color:var(--accent);}

/* auth */
#page-auth{max-width:420px; margin:0 auto; padding-top:24px;}
.authlogo{text-align:center; font-size:44px; margin-bottom:6px;}
.authtitle{text-align:center; font-weight:800; font-size:22px; margin-bottom:18px;}
#page-auth input{margin-bottom:10px;}
.authswap{text-align:center; margin-top:14px;}
.authswap a{color:var(--accent); font-weight:600; cursor:pointer;}

/* roster */
.plist{display:flex; flex-direction:column; gap:8px;}
.prow{display:flex; align-items:center; gap:10px; background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:8px 10px;}
.pnum{width:30px; height:30px; border-radius:50%; background:var(--accent-dark); color:var(--primary-text); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0;}
.pname{flex:1; font-weight:600;}
.prow.out{opacity:.55;}
.prow.out .pnum{background:#3a3f3c;}
.prow .del{color:var(--red); background:none; border:none; font-size:18px; padding:2px 6px;}
.prow .edit{color:var(--dim); background:none; border:none; font-size:15px; padding:2px 4px;}
.prow .pname{cursor:pointer;}
.ptags{font-size:12px; color:var(--dim); margin-top:2px;}
.prow .avl{background:none; border:1px solid var(--accent); color:var(--accent); border-radius:99px;
  font-size:11px; font-weight:700; padding:3px 8px; white-space:nowrap; flex-shrink:0;}
.prow .avl.out{color:var(--red); border-color:var(--red);}
.prow .psum{background:none; border:none; color:var(--dim); font-size:16px; padding:2px 4px; flex-shrink:0;}
/* field */
.field{
  position:relative; aspect-ratio:3/4;
  height:min(46vh, 420px); max-width:100%; margin:0 auto;
  background:linear-gradient(#1b5e33,#17532c);
  border:2px solid #2f7a48; border-radius:12px; overflow:hidden;
}
.field.f11{aspect-ratio:0.72; height:min(50vh, 460px);}
.field .halfline{position:absolute; left:0; right:0; top:50%; border-top:2px solid rgba(255,255,255,.25);}
.field .circle{position:absolute; left:50%; top:50%; width:24%; aspect-ratio:1; border:2px solid rgba(255,255,255,.25); border-radius:50%; transform:translate(-50%,-50%);}
.field .box{position:absolute; left:25%; width:50%; height:13%; border:2px solid rgba(255,255,255,.25);}
.field .box.top{top:-2px; border-top:none;}
.field .box.bot{bottom:-2px; border-bottom:none;}
.spot{
  position:absolute; transform:translate(-50%,-50%); max-width:84px;
  display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer;
}
.spot .tag{font-size:10px; font-weight:800; letter-spacing:.05em; color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.35); padding:1px 7px; border-radius:99px;}
.spot .chip{
  width:100%; min-height:44px; background:rgba(10,16,12,.82); border:1.5px solid rgba(255,255,255,.35);
  border-radius:9px; padding:4px 3px; text-align:center;
  display:flex; flex-direction:column; justify-content:center; gap:1px;
  color:#f4f8f6; /* pitch chips are always dark, so keep text light in both themes */
}
.spot .chip.empty{border-style:dashed; color:rgba(255,255,255,.65);}
.spot .chip .nm{font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.spot .chip .tm{font-size:10px; color:#a7f3c3; font-variant-numeric:tabular-nums;}
.spot.gk .chip{border-color:var(--gk);}

.clock{font-size:40px; font-weight:800; font-variant-numeric:tabular-nums; text-align:center; line-height:1.1;}
.clock.paused{color:var(--dim);}
.clock.over{color:var(--warn);}
.halftag{text-align:center; color:var(--dim); font-size:13px; font-weight:600; margin-bottom:6px;}
.scoreline{text-align:center; font-size:15px; font-weight:700; margin-bottom:2px;}
.ctrlbanner{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
  background:var(--card2); border:1px solid var(--warn); color:var(--text);
  border-radius:10px; padding:7px 10px; margin-top:8px; font-size:12px; font-weight:600;}
.ctrlbanner button{flex-shrink:0;}
/* live playing-time fairness rows */
.ptrow{display:flex; align-items:center; gap:8px; padding:3px 0; font-size:13px;}
.ptrow .nm{flex:1; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ptrow .tm{width:46px; text-align:right; color:var(--dim); font-variant-numeric:tabular-nums;}
.ptrow .ptflag{width:92px; text-align:right; font-size:12px;}
/* game-by-game rows (tap to open the detail popup) */
.gbrow{width:100%; display:flex; align-items:center; gap:10px; text-align:left; margin-bottom:6px;}
.gbrow .gbscore{font-variant-numeric:tabular-nums; font-weight:700; color:var(--dim);}

.bench{display:flex; flex-wrap:wrap; gap:8px;}
.bchip{
  background:var(--card2); border:1px solid var(--line); border-radius:10px;
  padding:6px 10px; text-align:center; min-width:72px;
}
.bchip .nm{font-size:13px; font-weight:700;}
.bchip .tm{font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums;}

.overlay{position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:100; display:none; align-items:flex-end;}
.overlay.show{display:flex;}
.sheet{
  background:var(--card); border-radius:18px 18px 0 0; width:100%; max-height:80vh; overflow:auto;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom));
}
.sheet h3{font-size:16px; margin-bottom:12px;}
.sheet .opt{
  display:flex; justify-content:space-between; align-items:center; width:100%;
  background:var(--card2); border:1px solid var(--line); border-radius:10px;
  padding:11px 12px; margin-bottom:8px; font-weight:600; text-align:left;
}
.sheet .opt .side{color:var(--dim); font-size:12px; font-weight:500;}
.sheet .sec{color:var(--dim); font-size:12px; text-transform:uppercase; letter-spacing:.05em; margin:12px 0 8px;}
/* Practice-ideas activity title: bold + larger so each activity stands out. */
.act-title{font-weight:700; font-size:17px; margin:16px 0 4px; line-height:1.25;}
/* AI loading spinner + rotating coaching quotes. */
.ai-spinner{width:36px; height:36px; margin:0 auto; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--accent); animation:ai-spin .9s linear infinite;}
@keyframes ai-spin{to{transform:rotate(360deg);}}
.ai-quote{font-style:italic; min-height:3.2em; transition:opacity .2s;}
/* Streaming progress. The generation is not faster than it was, but the model
   now sends text as it writes, so this moves from ~3s in instead of the spinner
   sitting still for ~22s. Styled explicitly for both engines because a bare
   <progress> inherits neither the accent nor the surface colour. */
.ai-bar{display:block; width:100%; height:6px; border:0; border-radius:3px;
  background:var(--line); appearance:none; -webkit-appearance:none;
  transition:opacity .2s;}
.ai-bar::-webkit-progress-bar{background:var(--line); border-radius:3px;}
.ai-bar::-webkit-progress-value{background:var(--accent); border-radius:3px;
  transition:width .25s ease-out;}
.ai-bar::-moz-progress-bar{background:var(--accent); border-radius:3px;}

table{width:100%; border-collapse:collapse; font-size:13px;}
th,td{padding:7px 4px; text-align:right; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums;}
th{color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.04em;}
th.sortable{cursor:pointer; user-select:none; -webkit-user-select:none; white-space:nowrap;}
th.sortable.act{color:var(--accent);}
th:first-child,td:first-child{text-align:left;}
td:first-child{font-weight:600;}
.fair-row{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.fair-row .nm{width:86px; font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fair-row .tm{width:46px; text-align:right; font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums;}
.fair-row .track{flex:1; font-size:0; border-radius:99px; overflow:hidden; background:var(--card2); height:8px;}
.recline{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;}
.recline .wl{font-size:14px; color:var(--dim); font-weight:600;}
.recline .wl b{font-size:26px; font-weight:800; margin-right:3px; font-variant-numeric:tabular-nums;}
.legend{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px;}
.legend span{font-size:11px; color:var(--dim);}
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:4px;}
details{margin-bottom:8px;}
summary{cursor:pointer; font-weight:600; padding:8px 0;}

.posrow{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.posrow .ptag{width:44px; font-size:12px; font-weight:800; color:var(--dim); flex-shrink:0;}
.stars{display:flex; gap:2px;}
.stars button{background:none; border:none; font-size:22px; padding:2px; line-height:1; color:#4b5a51;}
.stars button.on{color:var(--warn);}
.raterow{display:flex; align-items:center; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--line);}
.raterow .who{font-weight:600; font-size:14px;}
.raterow .who .pos{color:var(--dim); font-size:12px; font-weight:500;}
.posbadge{font-weight:800; font-size:12px; letter-spacing:.03em;}
.rateplayer{background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:8px 11px 3px; margin-bottom:9px;}
.rateplayer .rphead{font-weight:700; font-size:14px; margin-bottom:2px;}
.rateplayer .raterow.sub{padding:6px 0; border-bottom:1px dashed var(--line);}
.rateplayer .raterow.sub:last-child{border-bottom:none;}
.rateplayer .raterow.sub .who{font-weight:600; padding-left:4px;}
.goalrow{display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); font-size:14px; flex-wrap:wrap;}
.goalrow .gedit{margin-left:auto; color:var(--dim); background:none; border:none; font-size:15px; padding:2px 4px;}
.goalrow .del{margin-left:auto; color:var(--red); background:none; border:none; font-size:16px;}
.goalrow .loc{flex-basis:100%; color:var(--dim); font-size:12px; padding-left:26px;}
/* post-game entry sheet (game.js "POST-GAME ENTRY") */
.pgscore{display:flex; gap:12px;}
.pgside{flex:1; background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:8px 10px;}
.pgside .muted{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pgside .row{justify-content:space-between; margin-top:4px;}
.pgside button{min-width:44px; padding:6px 0; font-size:18px;}
.pgn{font-size:26px; min-width:32px; text-align:center;}
.pggoal{display:grid; grid-template-columns:auto 1fr 70px; gap:6px; align-items:center; padding:6px 0; border-bottom:1px solid var(--line);}
.pggoal .pgwho{grid-column:2 / 4;}
.pggoal .pgast{grid-column:2;}
.pggoal .pgmin{grid-column:3;}
.pgnum{grid-row:1 / 3; font-weight:700; font-size:13px; padding-right:4px;}
.pghint{text-transform:none; letter-spacing:0;}
.pgp{padding:4px 0; border-bottom:1px solid var(--line);}
.pgname{background:none; border:none; padding:8px 4px; font-weight:600;}
.pgp.out .pgname{color:var(--dim); text-decoration:line-through;}
.pgdet{max-width:55%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pgrow{display:flex; gap:6px; align-items:center; margin:4px 0 4px 24px;}
.pgrow .del{color:var(--red); background:none; border:none; font-size:16px; min-height:0;}
.pgadd{margin:2px 0 6px 24px;}
.scorebar{position:sticky; top:0; z-index:40; background:var(--bg); padding-top:6px; margin-top:-6px;}
.tscroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.chips{display:flex; gap:5px; flex-wrap:wrap; margin-top:5px;}
.chip2{font-size:11px; padding:3px 9px; border-radius:99px; background:var(--card2); border:1px solid var(--line); color:var(--dim); font-weight:700;}
.chip2.on{background:var(--accent-dark); border-color:var(--primary-line); color:var(--primary-text);}
textarea{
  font:inherit; color:var(--text); background:var(--card2); border:1px solid var(--line);
  border-radius:10px; padding:8px 10px; width:100%; min-height:64px; resize:vertical;
}
/* visual opponent-goal picker: field (shot origin) + goal (placement) */
.shotfield{position:relative; width:100%; max-width:280px; margin:0 auto; aspect-ratio:3/4;
  background:linear-gradient(#17532c,#1b5e33); border:2px solid #2f7a48; border-radius:10px; overflow:hidden;}
.shotfield .sf-box{position:absolute; left:18%; width:64%; height:26%; bottom:0; border:2px solid rgba(255,255,255,.3); border-bottom:none; border-radius:6px 6px 0 0;}
.shotfield .sf-goal{position:absolute; left:36%; width:28%; height:5px; bottom:0; background:#fff; border-radius:2px;}
.shotfield .sf-grid, .goalpic .gp-grid{position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr);}
.shotfield .sf-grid{grid-template-rows:1fr 1fr;}
.goalpic .gp-grid{grid-template-rows:repeat(3,1fr);}
.shotfield .sf-label{position:absolute; left:0; right:0; text-align:center; font-size:10px; font-weight:600; color:rgba(255,255,255,.55); pointer-events:none;}
.shotfield .sf-far{top:5px;} .shotfield .sf-near{bottom:27%;}
.goalpic{width:100%; max-width:280px; margin:0 auto; aspect-ratio:2/1.15; position:relative;
  border:4px solid #fff; border-bottom:none; border-radius:5px 5px 0 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 15px, rgba(255,255,255,.13) 15px 16px),
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(255,255,255,.13) 15px 16px),
    #101a14;}
.zone{background:transparent; border:1px solid rgba(255,255,255,.14); border-radius:0; padding:0; min-height:34px;}
.zone.sel{background:rgba(74,222,128,.45); border-color:var(--accent);}
.pickread{text-align:center; font-size:12px; color:var(--dim); margin-top:5px; min-height:16px;}

/* game summary */
.sumhead{text-align:center; margin-bottom:8px;}
.sumscore{font-weight:800; font-size:17px;}
.sumres{font-size:13px; font-weight:700; margin-top:2px;}
.sumres.win{color:var(--accent);} .sumres.loss{color:var(--red);} .sumres.draw{color:var(--dim);}
.sumitem{font-size:13px; padding:6px 10px; border-radius:8px; margin-bottom:6px; background:var(--card2); border:1px solid var(--line);}
.sumitem.pos{border-left:3px solid var(--accent);}
.sumitem.neg{border-left:3px solid var(--red);}
.sheet textarea{margin-bottom:4px;}

/* player season summary */
.statgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:4px;}
.statgrid > div{background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:8px 6px; text-align:center;}
.statgrid b{display:block; font-size:18px; font-weight:800; font-variant-numeric:tabular-nums;}
.statgrid span{font-size:10px; color:var(--dim); line-height:1.2; display:block; margin-top:2px;}
.notep{margin-bottom:8px;}
.notep .nm{font-size:12px; color:var(--dim); font-weight:600; margin-bottom:3px;}
.notep input{font-size:13px; padding:6px 8px;}
.reco{background:var(--reco-bg); border:1px solid var(--reco-line); border-radius:10px; padding:10px 12px; margin-top:10px; font-size:13px;}
.reco b{color:var(--accent);}

/* compact live-game layout so it fits a phone without scrolling */
#page-game .card{padding:10px 12px; margin-bottom:8px;}
#page-game .card h2{margin-bottom:6px;}
#page-game .clock{font-size:34px;}
#page-game .scoreline{font-size:14px;}
#page-game .halftag{margin-bottom:4px;}
#page-game .field{height:min(40vh,360px);}
#page-game .field.f11{height:min(44vh,410px);}
#page-game .bench{gap:6px;}
#page-game .bchip{min-width:64px; padding:5px 8px;}

/* ===== utility classes — these replace former inline style="" attributes so the
   CSP can drop style-src 'unsafe-inline'. Compose them (class="fs12 mt6"). Truly
   dynamic geometry (field-spot x/y/width, bar widths) is set via CSSOM in core.js
   from data-fx/fy/fw and data-bw, never an inline attribute. ===== */
.fs11{font-size:11px;} .fs12{font-size:12px;} .fs13{font-size:13px;}
.fw5{font-weight:500;} .fw6{font-weight:600;} .fw7{font-weight:700;}
.w-auto{width:auto;} .w-full{width:100%;} .bb{box-sizing:border-box;}
.mt6{margin-top:6px;} .mt10{margin-top:10px;} .mt12{margin-top:12px;} .mt16{margin-top:16px;}
.ml-auto{margin-left:auto;}
.ta-l{text-align:left;} .ta-c{text-align:center;} .ta-r{text-align:right;}
.clk{cursor:pointer;} .hidden{display:none;} .gap6{gap:6px;} .mw48{min-width:48px;}
.o7{opacity:.7;} .o8{opacity:.8;}
.c-accent{color:var(--accent);} .c-dim{color:var(--dim);} .c-red{color:var(--red);}
.c-gk{color:var(--gk);} .c-def{color:var(--def);} .c-mid{color:var(--mid);} .c-fwd{color:var(--fwd);}
.bg-gk{background:var(--gk);} .bg-def{background:var(--def);} .bg-mid{background:var(--mid);} .bg-fwd{background:var(--fwd);}
.steps{padding-left:20px; line-height:1.85; margin:0;}
.opt-cancel{justify-content:center; color:var(--dim);}
.ai-wrap{text-align:center; padding:22px 6px;}
.authver{font-size:11px; margin:-6px 0 8px;}
.pwhint{font-size:11px; margin:-4px 0 8px;}
.subbanner{border-color:var(--accent); color:var(--accent);}
.barseg{display:inline-block; height:8px;}  /* width via CSSOM (data-bw) */

/* ===== U.S. Soccer session library (ussoccer.js) ===== */
.us-filters{display:flex; flex-direction:column; gap:6px; margin:4px 0 12px;}
.us-filtrow{display:flex; flex-wrap:wrap; gap:6px;}
.us-chip{padding:5px 12px; font-size:13px; min-height:0; border-radius:999px;
  background:var(--card2); border:1px solid var(--line); color:var(--text);}
.us-chip--on{background:var(--accent-dark); border-color:var(--primary-line); color:var(--primary-text);}
.us-grid{display:flex; flex-direction:column; gap:10px;}
.us-card{display:flex; gap:12px; text-align:left; align-items:stretch; width:100%;
  padding:10px; border-radius:14px; background:var(--card); border:1px solid var(--line); min-height:0;}
.us-thumb{width:88px; height:66px; flex:0 0 auto; object-fit:cover; border-radius:10px;
  background:var(--card2); border:1px solid var(--line);}
.us-thumb--none{display:flex; align-items:center; justify-content:center; font-size:26px;}
.us-card__body{flex:1; min-width:0;}
.us-card__title{font-weight:700; font-size:15px; line-height:1.25;}
.us-ex{border-top:1px solid var(--line); padding-top:12px; margin-top:12px;}
.us-diagram{display:block; width:100%; max-width:520px; height:auto; margin:8px 0 12px;
  border-radius:10px; border:1px solid var(--line); background:#fff;}
.us-changed{color:var(--accent); }

/* Print (🖨️): show only the open sheet's content — drills/diagrams — and drop the
   app chrome and the .noprint action rows. Used by practice ideas, U.S. Soccer
   sessions, and adapted plans (printSheet in game.js). */
@media print {
  header, nav, #page-auth, #page-roster, #page-plan, #page-game, #page-stats, #page-settings { display:none !important; }
  .overlay { position:static !important; display:block !important; background:none !important; }
  .sheet { max-height:none !important; overflow:visible !important; width:auto !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; }
  .noprint { display:none !important; }
  body { background:#fff !important; color:#000 !important; font-size:11px; }
  .sheet h3 { font-size:15px; }
  a[href^="http"]::after { content:""; }  /* no ugly URL expansion */
  /* Each exercise = one whole block, image left + text right, so 2-3 fit per page
     and none splits across a page break. Fixed image width keeps the field diagram
     from filling the sheet or distorting. */
  .us-ex { break-inside:avoid; page-break-inside:avoid; margin:0 0 0.22in; padding-top:0.12in; border-top:1px solid #ccc; }
  .us-ex .act-title { font-size:12.5px; margin:0 0 5px; }
  .us-ex-body { display:flex; gap:0.2in; align-items:flex-start; }
  .us-ex-body .us-diagram { width:3in; max-width:3in; flex:0 0 3in; height:auto; margin:0; border:1px solid #bbb; }
  .us-ex-text { flex:1 1 auto; }
  .us-ex-text .muted { color:#000 !important; margin:0 0 4px; font-size:10.5px; line-height:1.35; }
  /* single thumbnails in the AI plan / adapted plan: bounded, never full page */
  .us-diagram { max-width:3.2in; height:auto; break-inside:avoid; border:1px solid #bbb; }
  .card, .act-title { break-inside:avoid; }
}

/* deploy pipeline verified 2026-07-13 */