/* Depth Charts, in the toolkit's look (stacks-jm-theme.css) and to the letter of
   docs/TOOLS-DESIGN-GUIDE.md: tokens only, sharp corners (2px cards, 4px controls),
   Archivo Black for the headline only, orange + peach only (no green, no blue).
   One full-width card a team (two side by side only on a very wide screen), reading left to right
   in three lines (DC4): QB · RB1 · RB2 · 3rd down / WR1 · WR2 · WR3 · Slot · Deep threat / TE1 · TE2.
   The spots sit on one five-column grid so the lines line up; on a phone they wrap two to a line. */

/* The card every tool sits in (stacks-jm-theme.css lists its panels by id; this one isn't there). */
body.stx-look-jm #ows-stacks #stx-panel-depth{
  margin-top:0;padding:4px 30px 26px;
  border:1px solid var(--line);border-top:0;border-radius:0 0 2px 2px;
  background:var(--jm-card-bg);box-shadow:0 18px 50px -18px rgba(22,19,15,.35)
}
@media (max-width:640px){
  body.stx-look-jm #ows-stacks #stx-panel-depth{padding:4px 14px 20px}
}
/* The old bar, when Sections is off: with the other Fantasy tabs. */
.ows-stacks .stx-tabs .stx-tab:is([data-tab="depth"],[data-ltab="depth"]){order:7}

/* ---- controls: search, then the one line saying what it's built from ---- */
/* Search · Go to a team · Open all / Close all on one line; they wrap on a phone. */
#ows-stacks .stx-dc-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 20px;margin:4px 0 8px}
#ows-stacks .stx-dc-find{flex:1 1 240px;max-width:340px;min-width:0}
#ows-stacks .stx-dc-go{flex:0 1 230px;min-width:0}
#ows-stacks :is(.stx-dc-find,.stx-dc-go) .stx-label{margin:0 0 6px;display:block}
body #ows-stacks .stx-depth .stx-search input{font-size:16px;padding:8px 11px;width:100%;box-sizing:border-box}
body #ows-stacks .stx-depth #stx-dc-go{width:100%;box-sizing:border-box;font:400 16px/1.2 var(--sans);padding:8px 8px;border:1.5px solid var(--ink);border-radius:4px;background:var(--page);color:var(--ink)}
#ows-stacks .stx-dc-all{display:flex;gap:8px;padding-bottom:4px}
#ows-stacks .stx-dc-all button.stx-dc-x{padding:7px 12px}
#ows-stacks p.stx-dc-basis{margin:0 0 14px;font:500 13px/1.4 var(--sans);color:var(--muted)}
@media (max-width:560px){
  #ows-stacks .stx-dc-find,#ows-stacks .stx-dc-go{flex:1 1 100%;max-width:none}
}
#ows-stacks p.stx-dc-empty[hidden]{display:none!important}

/* ---- the grid of team cards ---- */
/* F2 (Aaron: "just a lot of white ... a bit more style. Subtle"): no white boxes. Each team sits
   straight on the cream card, its heading in a cream band, its three groups in light bands
   (cream · peach · cream) with thin dividers. Theme tokens only, no green. */
#ows-stacks .stx-dc-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
@media (min-width:1900px){
  #ows-stacks .stx-dc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
#ows-stacks .stx-dc-card{min-width:0;background:transparent;border:1px solid var(--line);border-radius:2px;overflow:hidden;scroll-margin-top:90px;transition:box-shadow .3s}
#ows-stacks .stx-dc-card.is-editing{border-color:var(--orange)}
#ows-stacks .stx-dc-card.is-flash{box-shadow:0 0 0 2px var(--orange)}
#ows-stacks .stx-dc-head{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;margin:0;background:var(--surface);border-bottom:2px solid var(--ink)}
#ows-stacks .stx-dc-card.is-folded .stx-dc-head{border-bottom:0}
/* The whole heading folds the team. */
body #ows-stacks button.stx-dc-fold{appearance:none;flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:9px;margin:0;padding:2px 4px;background:none;border:0;border-radius:2px;color:var(--ink);text-align:left;cursor:pointer}
body #ows-stacks button.stx-dc-fold:hover .stx-dc-name{color:var(--orange-dark)}
#ows-stacks .stx-dc-chev{flex:0 0 auto;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--muted);transition:transform .15s}
#ows-stacks .stx-dc-card.is-folded .stx-dc-chev{transform:rotate(-90deg)}
#ows-stacks .stx-dc-logo{flex:0 0 auto;width:26px;height:26px;object-fit:contain}
#ows-stacks .stx-dc-name{min-width:0;font:800 18px/1.2 var(--sans);letter-spacing:-.005em;color:var(--ink)}
#ows-stacks .stx-dc-code{font:700 11px/1 var(--sans);letter-spacing:.1em;color:var(--jm-ink-3)}
#ows-stacks .stx-dc-msg{font:700 12px/1 var(--sans);color:var(--orange-dark);white-space:nowrap}

/* Three lines, each on the same five columns so the spots line up down the card. */
#ows-stacks .stx-dc-line{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px 14px;padding:8px 14px;border-bottom:1px solid var(--line);background:color-mix(in srgb, var(--surface) 55%, transparent)}
#ows-stacks .stx-dc-line.is-wr{background:color-mix(in srgb, var(--hit) 70%, transparent)}
#ows-stacks .stx-dc-card > :is(p.stx-dc-hurt,p.stx-dc-note,p.stx-dc-eh,p.stx-dc-by,p.stx-dc-emsg,label.stx-dc-why,.stx-dc-eb,.stx-dc-warn){margin-left:14px;margin-right:14px}
#ows-stacks .stx-dc-card > :last-child{margin-bottom:10px}
@media (max-width:900px){
  #ows-stacks .stx-dc-line{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  #ows-stacks .stx-dc-line{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px;padding:8px 10px}
  #ows-stacks .stx-dc-card > :is(p.stx-dc-hurt,p.stx-dc-note,p.stx-dc-eh,p.stx-dc-by,p.stx-dc-emsg,label.stx-dc-why,.stx-dc-eb,.stx-dc-warn){margin-left:10px;margin-right:10px}
  #ows-stacks .stx-dc-name{font-size:17px}
}
/* One spot: its label, the name (whole, wrapping if it must), the number that put him there. */
#ows-stacks .stx-dc-spot{display:flex;flex-direction:column;gap:2px;min-width:0;padding:4px 6px;border-radius:2px}
#ows-stacks .stx-dc-spot.is-hit{box-shadow:inset 0 0 0 1.5px var(--orange)}
#ows-stacks .stx-dc-slot{font:700 11px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--jm-ink-3);white-space:nowrap}
#ows-stacks .stx-dc-who{min-width:0;font:700 15px/1.3 var(--sans);color:var(--ink);overflow-wrap:anywhere}
#ows-stacks .stx-dc-s{font:400 12px/1.35 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
#ows-stacks .stx-dc-none{font-weight:400;color:var(--jm-ink-3)}
/* Injury tag: quiet outline, the words other tools use. */
#ows-stacks .stx-dc-tag{display:inline-block;margin-left:2px;padding:0 4px;border:1px solid var(--rule-2);border-radius:4px;font:700 10px/1.5 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);vertical-align:1px}
/* Staff only (DC4: no orange mark): a quiet grey word, the reason on hover. */
#ows-stacks .stx-dc-moved{font:400 11px/1.3 var(--sans);color:var(--jm-ink-3);font-style:italic;cursor:help}
#ows-stacks p.stx-dc-hurt,#ows-stacks p.stx-dc-note{margin:7px 0 0;font:400 12px/1.45 var(--sans);color:var(--muted)}
#ows-stacks p.stx-dc-hurt .stx-pc-name,#ows-stacks p.stx-dc-note b{color:var(--ink);font-weight:700}
#ows-stacks p.stx-dc-hurt small,#ows-stacks p.stx-dc-note small{font-size:11px;color:var(--jm-ink-3)}
#ows-stacks p.stx-dc-hurt .is-hit{background:var(--hit)}
#ows-stacks .stx-dc-k{font:700 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--jm-ink-3);margin-right:2px}

/* ---- staff ---- */
#ows-stacks button.stx-dc-x{appearance:none;background:none;border:1.5px solid var(--ink);border-radius:4px;padding:3px 9px;font:700 12px/1.3 var(--sans);color:var(--ink);cursor:pointer;white-space:nowrap}
#ows-stacks button.stx-dc-x:hover{border-color:var(--orange-dark);color:var(--orange-dark)}
#ows-stacks button.stx-dc-x:disabled,#ows-stacks .stx-dc-card select:disabled{opacity:.5;cursor:default}
#ows-stacks .stx-dc-warn{margin:8px 0 4px;padding:7px 9px;border-left:3px solid var(--orange);background:var(--hit);font:400 12px/1.45 var(--sans);color:var(--ink)}
#ows-stacks .stx-dc-warn button{margin-top:4px}
#ows-stacks p.stx-dc-stale{margin:0 0 12px}
#ows-stacks p.stx-dc-eh{margin:8px 0 4px;font:400 12px/1.4 var(--sans);color:var(--muted)}
#ows-stacks label.stx-dc-espot{cursor:default}
body #ows-stacks .stx-dc-card select{width:100%;min-width:0;box-sizing:border-box;font:400 16px/1.2 var(--sans);padding:5px 6px;border:1.5px solid var(--rule-2);border-radius:4px;background:#fff;color:var(--ink)}
body #ows-stacks .stx-dc-card select.is-set{border-color:var(--orange);font-weight:700}
#ows-stacks label.stx-dc-why{display:block;margin:10px 0 0}
#ows-stacks label.stx-dc-why .stx-label{display:block;margin:0 0 4px}
body #ows-stacks .stx-dc-card input[data-why]{width:100%;box-sizing:border-box;font:400 16px/1.2 var(--sans);padding:6px 8px;border:1.5px solid var(--rule-2);border-radius:4px;background:#fff}
#ows-stacks .stx-dc-eb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 0}
body #ows-stacks .stx-dc-eb .stx-primary{width:auto;margin:0;padding:6px 18px;font-size:14px}
#ows-stacks p.stx-dc-by,#ows-stacks p.stx-dc-emsg{margin:6px 0 0;font:400 12px/1.4 var(--sans);color:var(--muted)}
#ows-stacks p.stx-dc-emsg:empty{display:none}

/* ---- the fold ---- */
/* Under the headline's sentence, before the controls (HW2). */
#ows-stacks .stx-dc-how{margin:0 0 14px}