/* Matchup prep page (prep.html), on top of style.css's dark theme. */
.prep{max-width:1180px;margin:0 auto;padding:14px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px 14px;min-width:0}
.prep h2 small,.prep h3 small{font-weight:400;font-size:12px}
.prep h5{margin:0 0 4px;font-size:12px;color:var(--muted);font-weight:600}

#prep-form{display:grid;gap:10px}
.team-inputs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.team-field{display:grid;gap:6px;align-content:start}.team-field>span{font-weight:600}
.team-field textarea{min-height:150px}
.sheets{border:1px solid var(--line);border-radius:4px;display:grid;gap:4px;padding:6px 8px;margin:0}
.sheets legend{font-weight:600;padding:0 4px}
.advanced summary{cursor:pointer;color:var(--muted)}.advanced .row{margin-top:6px}

.warnings{margin:0;padding:8px 12px 8px 28px;border:1px solid var(--warn);border-radius:6px;color:var(--warn);font-size:13px}

.plan-hero{display:grid;gap:6px;margin:4px 0 10px}
.hero-row{display:flex;align-items:center;gap:8px;font-size:17px;flex-wrap:wrap}
.hero-label{min-width:44px;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.hero-stats{display:flex;gap:6px 18px;flex-wrap:wrap;color:var(--muted)}.hero-stats b{color:var(--text)}
.plan-points{margin:0;padding-left:20px;display:grid;gap:4px}
.plan-points li .icons .picon{transform:scale(.8);margin:-6px -6px}

.prep-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-width:0}
.table-wrap{overflow-x:auto;max-width:100%}
.prep-table{border-collapse:collapse;width:100%;font-size:13px}
.prep-table th{text-align:left;font-weight:500;color:var(--muted);padding:4px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
.prep-table td{padding:3px 6px;white-space:nowrap;border-bottom:1px solid #2c2c2c;vertical-align:middle;font-variant-numeric:tabular-nums}
.prep-table tr.support td:first-child{box-shadow:inset 3px 0 0 var(--pin)}
.prep-table tr.unused td{opacity:.45}
.prep-table th.corner{font-size:11px}
/* row headers stay put while the matrix scrolls sideways */
.grid-table tr>:first-child{position:sticky;left:0;z-index:1;background:var(--panel);
  box-shadow:inset -1px 0 0 var(--line)}
@media (max-width:600px){
  .grid-table th[scope=row] .plan-head{white-space:normal;max-width:120px}
  .grid-table th[scope=row] .pair{flex-wrap:wrap;white-space:normal}
}

.pair{justify-content:center}.matchups th[scope=row] .pair{justify-content:flex-start}
/* the two matrices: the row headers stay put while the table scrolls sideways */
.matchups tr>:first-child,.grid-table tr>:first-child{position:sticky;left:0;z-index:1;background:var(--panel);
  box-shadow:inset -1px 0 0 var(--line)}
@media (max-width:600px){
  .matchups th[scope=row] .pair,.grid-table th[scope=row] .plan-head{white-space:normal;max-width:120px}
  .matchups th[scope=row] .pair,.grid-table th[scope=row] .pair{flex-wrap:wrap;white-space:normal}
}

.pair{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.icons{display:inline-flex}.icons .picon{margin:-4px -6px -4px -4px}
.bar{position:relative;display:inline-block;width:90px;height:16px;background:#2b2b2b;border-radius:3px;overflow:hidden;
  font-size:11px;line-height:16px;text-align:right;padding-right:4px}
.bar>span{position:absolute;inset:0 auto 0 0;background:var(--accent);opacity:.75}
.win{display:inline-block;min-width:44px;padding:1px 6px;border-radius:3px;background:var(--c);color:#f2f2f2;text-align:center}
.win small{opacity:.75}

.progress{height:4px;background:#2b2b2b;border-radius:2px;overflow:hidden;margin-bottom:8px}
.progress>div{height:100%;width:0;background:var(--accent2);transition:width .4s}

.turn1-card{background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:8px 10px;min-width:0}
.turn1-card h4{display:flex;flex-wrap:wrap;align-items:center;gap:4px}.turn1-card p{margin:2px 0 6px}
.turn1-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.turn1-cols ol{margin:0;padding-left:0;list-style:none;display:grid;gap:3px;font-size:12px}
.turn1-cols .p{display:inline-block;min-width:34px;color:var(--muted);font-variant-numeric:tabular-nums}

.species-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.species-list li{display:flex;align-items:center;gap:4px;background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:4px}
.prep .team-roster{grid-template-columns:repeat(2,minmax(0,1fr))}

@media(max-width:800px){
  .prep{padding:10px 16px}
  .team-inputs,.prep-grid{grid-template-columns:minmax(0,1fr)}
  .prep .team-roster{grid-template-columns:minmax(0,1fr)}
  .species-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.track-cta{font-weight:600;color:var(--focus)}

/* lead grid */
.grid-builder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:8px 0}
.plan-list{display:grid;gap:6px;margin-bottom:6px}
.plan-edit{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;background:var(--panel2);border:1px solid var(--line);
  border-radius:4px;padding:4px 6px;font-size:13px}
.plan-edit.invalid{border-color:var(--warn)}
.plan-edit .engine{display:inline-flex;align-items:center;gap:4px;margin-right:4px;white-space:nowrap}
.plan-edit select{max-width:130px}
.plan-edit .slot-label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.plan-edit .remove{margin-left:auto;padding:0 6px}
.grid-run{flex-wrap:wrap}
.grid-table td,.grid-table th[scope=col]{text-align:center}
.grid-table th[scope=row]{text-align:left}
.plan-head{display:inline-grid;gap:1px;justify-items:inherit;white-space:nowrap}
.plan-head.engine{font-style:italic;color:var(--text)}
.grid-table th[scope=col] .plan-head{justify-items:center}
.grid-table .cell{background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit}
.grid-table td.best .win{box-shadow:0 0 0 2px var(--focus)}
.grid-table td.worst .win{outline:1px dashed var(--warn);outline-offset:1px}
.grid-table td.selected{background:var(--panel2)}
.grid-table .n{color:var(--muted)}
.grid-table .eval{display:block;color:var(--muted);font-size:11px}
.grid-table tr.robust th[scope=row]{box-shadow:inset 3px 0 0 var(--pin),inset -1px 0 0 var(--line)}
.grid-table tr.col-mean td,.grid-table tr.col-mean th{color:var(--muted);border-bottom:0}
.tag{display:inline-block;margin-left:6px;padding:0 5px;border-radius:3px;background:var(--pin);color:#111;font-size:10px;
  text-transform:uppercase;letter-spacing:.04em;vertical-align:middle}
.grid-detail{margin-top:10px}
.grid-detail .turn1-cols li .icons .picon{transform:scale(.8);margin:-6px -6px}
.to-grid{font-size:11px;padding:0 5px}
@media(max-width:800px){.grid-builder,.grid-detail .turn1-cols{grid-template-columns:minmax(0,1fr)}}

/* Browser run controls and summary tables share the server page's dark theme. */
.run-controls{display:grid;gap:8px;border:1px solid var(--line);border-radius:4px;min-width:0}
.run-controls input[type=range]{width:100%;min-width:0;accent-color:var(--accent2)}
.run-controls p{margin:0}.game-table{table-layout:fixed}.game-table th,.game-table td{white-space:normal;overflow-wrap:anywhere}
.game-table th:first-child{width:49%}#game-replays{padding-left:20px;overflow-wrap:anywhere}
#run-progress{width:100%;accent-color:var(--accent2)}
.prep a,.top a{color:var(--focus)}
body:has(.run-controls) .top{flex-wrap:wrap}body:has(.run-controls) .team-field{min-width:0}
body:has(.run-controls) textarea{width:100%;box-sizing:border-box;min-width:0}