/* RB Handcuffs, in the toolkit's look (stacks-jm-theme.css) and to the letter
   of docs/TOOLS-DESIGN-GUIDE.md: tokens only (no colours or fonts typed in),
   sharp corners, Archivo Black for the headline only. Built from the Bye Weeks
   sheet's pieces (byes.css); only the shapes the system has no class for. */

/* The card every tool sits in (stacks-jm-theme.css lists its panels by id). */
body.stx-look-jm #ows-stacks #stx-panel-handcuffs{
  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)
}
/* The old bar, when Sections is off: next to Bye Weeks. */
.ows-stacks .stx-tabs .stx-tab:is([data-tab="handcuffs"],[data-ltab="handcuffs"]){order:7}

/* ---- search, and what the sheet is based on -------------------------------- */
#ows-stacks .stx-rbh-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 26px;margin:4px 0 16px}
#ows-stacks .stx-rbh-find{display:flex;flex-direction:column;gap:6px;flex:1 1 260px;max-width:380px}
#ows-stacks .stx-rbh-find .stx-label{margin:0}
body #ows-stacks .stx-rbh .stx-search input{font-size:15px;padding:8px 11px}
#ows-stacks p.stx-rbh-basis{margin:0 0 4px;font:500 13px/1.4 var(--sans);color:var(--muted)}

/* ---- the sheet ------------------------------------------------------------- */
body #ows-stacks #stx-panel-handcuffs table.stx-rbh-table{width:100%;max-width:none;margin:0;table-layout:fixed;border-collapse:collapse}
body #ows-stacks #stx-panel-handcuffs .stx-rbh-table > thead th{padding:0 8px 6px;white-space:nowrap;vertical-align:bottom;color:var(--ink);border-bottom:2px solid var(--ink)}
body #ows-stacks #stx-panel-handcuffs .stx-rbh-table > thead th:first-child{width:19%}
body #ows-stacks #stx-panel-handcuffs .stx-rbh-main > td{padding:9px 8px;font-size:14px;line-height:1.3;vertical-align:top;cursor:pointer}
/* The table's own zebra goes by row; here a team (and its open log) is one stripe.
   The two colours are .stx-table's (stacks-jm-theme.css types them in; it has no token). */
#ows-stacks #stx-panel-handcuffs{--rbh-row-a:#fffdfb;--rbh-row-b:#f8f5f0}
/* One tbody for all teams (My Research ticks only a table's first tbody); each row carries its
   team's stripe (tr.stx-rbh-r, .is-b on every other team). */
body #ows-stacks #stx-panel-handcuffs .stx-rbh-table > tbody > tr.stx-rbh-r > td{background:var(--rbh-row-a);border-bottom:1px solid var(--line)}
body #ows-stacks #stx-panel-handcuffs .stx-rbh-table > tbody > tr.stx-rbh-r.is-b > td{background:var(--rbh-row-b)}
body #ows-stacks #stx-panel-handcuffs .stx-rbh-table > tbody > tr.stx-rbh-main:hover > td,
body #ows-stacks #stx-panel-handcuffs .stx-rbh-table > tbody > tr.stx-rbh-main.is-key > td{background:var(--hit)}

#ows-stacks .stx-rbh-t{font-weight:700;color:var(--ink)}
#ows-stacks .stx-rbh-abbr{display:none;letter-spacing:.04em}
body #ows-stacks .stx-rbh button.stx-rbh-toggle{all:unset;display:block;margin-top:4px;cursor:pointer;font:700 12.5px/1.2 var(--sans);color:var(--orange-dark)}
body #ows-stacks .stx-rbh button.stx-rbh-toggle:hover,body #ows-stacks .stx-rbh button.stx-rbh-toggle:focus-visible{text-decoration:underline;text-underline-offset:2px}

#ows-stacks .stx-rbh-name{font-weight:700;font-size:15px;color:var(--ink)}
#ows-stacks .stx-rbh-cell > small{display:block;margin-top:3px;font:500 12.5px/1.35 var(--sans);color:var(--muted)}
#ows-stacks .stx-rbh-cell > small span + span::before{content:" \00b7  "}
/* ESPN's two numbers start their own line. */
#ows-stacks .stx-rbh-cell > small span.stx-rbh-espn{display:block;margin-top:2px}
#ows-stacks .stx-rbh-cell > small span.stx-rbh-espn::before{content:none}
#ows-stacks .stx-rbh-espn i{font-style:normal}
#ows-stacks .stx-rbh-espn i + i::before{content:" \00b7  "}
#ows-stacks .stx-rbh-none{color:var(--jm-ink-3);font-style:italic}
/* The column name inside each cell: only on a phone, where the header row is gone. */
#ows-stacks .stx-rbh-role{display:none}

/* ---- how sure the handcuff is (HC3): the theme's status look, small ---------- */
/* A thin orange edge and a faint orange tint, muted words: a caution, not an alarm. */
#ows-stacks .stx-rbh-sure{display:inline-block;padding:1px 6px;border-left:2px solid var(--orange);background:color-mix(in srgb,var(--orange) 7%,transparent);font:700 10.5px/1.4 var(--sans);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-dark);vertical-align:2px;white-space:nowrap}
#ows-stacks .stx-rbh-unclear{display:block;padding:5px 8px 6px;border-left:3px solid var(--orange);background:color-mix(in srgb,var(--orange) 6%,transparent)}
#ows-stacks .stx-rbh-unclear > b{display:block;font:700 13.5px/1.3 var(--sans);color:var(--orange-dark)}
#ows-stacks .stx-rbh-unclear > small{display:block;margin-top:2px;font:500 12.5px/1.35 var(--sans);color:var(--muted)}
/* The backs with 3%+ of the carries: a short list, a back a line. Names stay the size of the
   line they sit in (the table's bold cells are 15px). */
body #ows-stacks #stx-panel-handcuffs .stx-rbh-unclear ul{margin:3px 0 0;padding:0;list-style:none}
body #ows-stacks #stx-panel-handcuffs .stx-rbh-unclear li{margin:0;padding:0;font:500 12.5px/1.4 var(--sans);color:var(--muted)}
body #ows-stacks #stx-panel-handcuffs .stx-rbh-unclear li::before{content:none}
body #ows-stacks #stx-panel-handcuffs .stx-rbh-unclear li span{white-space:nowrap}
body #ows-stacks #stx-panel-handcuffs .stx-rbh .stx-rbh-cand{font-weight:700;font-size:13px;color:var(--ink)}

/* ---- staff's note on a team (members see it) ------------------------------------ */
body #ows-stacks #stx-panel-handcuffs tr.stx-rbh-noterow > td{padding:0 8px 7px;font:500 13px/1.45 var(--sans);color:var(--ink);vertical-align:top}
#ows-stacks .stx-rbh-note-h{margin-right:8px;font:700 10.5px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--orange-dark)}

/* ---- staff only: picks that may be out of date (the theme's status look) --------- */
#ows-stacks p.stx-rbh-stale{margin:0 0 12px}
body #ows-stacks #stx-panel-handcuffs tr.stx-rbh-warnrow > td{padding:0 8px 7px;vertical-align:top}
#ows-stacks .stx-rbh-warn{padding:5px 9px 6px;border-left:3px solid var(--orange);background:color-mix(in srgb,var(--orange) 6%,transparent);font:500 12.5px/1.45 var(--sans);color:var(--muted)}
#ows-stacks .stx-rbh-warn > b{color:var(--orange-dark)}
body #ows-stacks .stx-rbh .stx-rbh-warn button.stx-rbh-edit-x{margin-left:12px}
#ows-stacks .stx-rbh-warn .stx-rbh-edit-msg:not(:empty){display:block;margin-top:3px;font-weight:700;color:var(--orange-dark)}

/* ---- staff only: Edit, and the form under the team ------------------------------- */
body #ows-stacks .stx-rbh button.stx-rbh-editbtn{margin-top:2px;color:var(--jm-ink-3)}
/* Staff: Edit opens this team on Depth Charts (a link, styled like the Game log toggle, quieter). */
body #ows-stacks .stx-rbh a.stx-rbh-editlink{display:block;margin-top:2px;font:700 12.5px/1.2 var(--sans);color:var(--jm-ink-3);text-decoration:none}
body #ows-stacks .stx-rbh a.stx-rbh-editlink:hover,body #ows-stacks .stx-rbh a.stx-rbh-editlink:focus-visible{text-decoration:underline;text-underline-offset:2px}
#ows-stacks .stx-rbh-byhand{border-style:dashed}
body #ows-stacks #stx-panel-handcuffs tr.stx-rbh-editrow > td{padding:4px 8px 14px;cursor:default}
#ows-stacks .stx-rbh-edit{padding:12px 14px;border:1px dashed var(--line);border-left:3px solid var(--ink);background:var(--surface)}
#ows-stacks .stx-rbh-edit p{margin:0;font:500 13px/1.4 var(--sans);color:var(--muted)}
#ows-stacks p.stx-rbh-edit-h{margin-bottom:10px;font-weight:700;color:var(--ink)}
#ows-stacks .stx-rbh-edit-f{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px}
#ows-stacks .stx-rbh-edit label{display:flex;flex-direction:column;gap:4px;min-width:0}
#ows-stacks .stx-rbh-edit .stx-label{margin:0}
#ows-stacks .stx-rbh-edit select,
#ows-stacks .stx-rbh-edit input[type="text"]{width:100%;min-width:0;box-sizing:border-box;padding:7px 9px;border:1.5px solid var(--ink);border-radius:4px;background:var(--rbh-row-a);font:500 14px/1.3 var(--sans);color:var(--ink)}
#ows-stacks .stx-rbh-edit-note{margin-top:10px}
#ows-stacks .stx-rbh-edit-b{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:12px 0 6px}
body #ows-stacks .stx-rbh-edit-b .stx-primary{display:inline-block;width:auto;margin:0;padding:8px 18px;font-size:14px}
body #ows-stacks .stx-rbh button.stx-rbh-edit-x{all:unset;cursor:pointer;font:700 13px/1.2 var(--sans);color:var(--orange-dark)}
body #ows-stacks .stx-rbh button.stx-rbh-edit-x:hover{text-decoration:underline;text-underline-offset:2px}
#ows-stacks p.stx-rbh-edit-msg:empty{display:none}
#ows-stacks p.stx-rbh-edit-msg{color:var(--orange-dark);font-weight:700}

/* ---- the team's injured backs, a line under its row ---------------------------- */
body #ows-stacks #stx-panel-handcuffs .stx-rbh-table > tbody > tr.stx-rbh-main.has-hurt > td{border-bottom:0;padding-bottom:4px}
body #ows-stacks #stx-panel-handcuffs tr.stx-rbh-hurtrow > td{padding:0 8px 9px;font:500 12.5px/1.45 var(--sans);color:var(--muted);vertical-align:top}
#ows-stacks .stx-rbh-hurt-h{margin-right:8px;font:700 10.5px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--orange-dark)}
#ows-stacks .stx-rbh-hurt{white-space:nowrap}
#ows-stacks .stx-rbh-hurt + .stx-rbh-hurt::before{content:" \00b7  ";white-space:normal}
/* A label, not a button: outlined, so it never reads as a pressed option. */
#ows-stacks .stx-rbh-tag{display:inline-block;padding:1px 6px;border:1px solid var(--line);border-radius:4px;font:700 10.5px/1.4 var(--sans);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);vertical-align:2px;white-space:nowrap}
#ows-stacks .stx-rbh-tag.is-out{border-color:var(--orange);color:var(--orange-dark)}

/* ---- the game log under a team --------------------------------------------- */
body #ows-stacks #stx-panel-handcuffs tr.stx-rbh-logrow > td{padding:0 8px 12px;cursor:default}
body #ows-stacks #stx-panel-handcuffs table.stx-rbh-log{width:100%;margin:0;table-layout:fixed;border-collapse:collapse}
body #ows-stacks #stx-panel-handcuffs .stx-rbh-log th{padding:6px 8px 4px;font:700 11px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--jm-ink-3);text-align:left;border-bottom:1px solid var(--line);background:transparent}
body #ows-stacks #stx-panel-handcuffs .stx-rbh-log th:first-child{width:19%}
body #ows-stacks #stx-panel-handcuffs .stx-rbh-log td{padding:6px 8px;font-size:13.5px;line-height:1.3;vertical-align:top;background:transparent !important;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
body #ows-stacks #stx-panel-handcuffs .stx-rbh-log tr:last-child td{border-bottom:0}
#ows-stacks .stx-rbh-log b{font-weight:700;color:var(--ink)}
#ows-stacks .stx-rbh-log small{display:block;font:500 12px/1.35 var(--sans);color:var(--muted)}
#ows-stacks .stx-rbh-gm{font-weight:600;color:var(--ink)}
#ows-stacks .stx-rbh-gm small{display:inline;margin-left:2px}
#ows-stacks .stx-rbh-dnp{color:var(--jm-ink-3);font-style:italic}

#ows-stacks .stx-rbh-empty{margin:20px 0 0;color:var(--muted);font-size:15px}
/* The one fold, right under the headline's line, before the search (HW2). */
#ows-stacks .stx-rbh-how{margin:0 0 14px}
#ows-stacks .stx-rbh-how p.stx-rbh-how-h{margin:12px 0 4px;font:700 11px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--jm-ink-3)}
#ows-stacks .stx-rbh-how p.stx-rbh-how-h:first-child{margin-top:2px}
#ows-stacks .stx-rbh-how p{max-width:80ch;font-size:14px;line-height:1.5}

/* Phone (HC2): each team stacks. Team on its own line, starter and handcuff side by side
   under it, the third-down back across the bottom; each cell names its column. */
@media (max-width:600px){
  body.stx-look-jm #ows-stacks #stx-panel-handcuffs{padding:4px 12px 20px}
  #ows-stacks .stx-rbh-find{max-width:none}
  body #ows-stacks #stx-panel-handcuffs table.stx-rbh-table,
  body #ows-stacks #stx-panel-handcuffs .stx-rbh-table > tbody{display:block;width:100%}
  body #ows-stacks #stx-panel-handcuffs .stx-rbh-table > thead{display:none}
  body #ows-stacks #stx-panel-handcuffs .stx-rbh-table > tbody{border-top:2px solid var(--ink)}
  body #ows-stacks #stx-panel-handcuffs .stx-rbh-table > tbody > tr.stx-rbh-r.is-last{border-bottom:1px solid var(--line)}
  body #ows-stacks #stx-panel-handcuffs .stx-rbh-table > tbody > tr.stx-rbh-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  body #ows-stacks #stx-panel-handcuffs .stx-rbh-table > tbody > tr.stx-rbh-r > td{display:block;border-bottom:0}
  body #ows-stacks #stx-panel-handcuffs .stx-rbh-main > td{padding:4px 6px 8px}
  body #ows-stacks #stx-panel-handcuffs .stx-rbh-main > td.stx-rbh-t{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:9px 6px 2px}
  body #ows-stacks #stx-panel-handcuffs .stx-rbh-main > td.stx-rbh-3d{grid-column:1/-1;padding-top:0}
  body #ows-stacks .stx-rbh button.stx-rbh-toggle{margin-top:0;font-size:12px}
  #ows-stacks .stx-rbh-role{display:block;margin-bottom:2px;font:700 10.5px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--jm-ink-3)}
  /* No third-down back: the label and its dash share one line. */
  #ows-stacks td.stx-rbh-3d:has(> .stx-rbh-none) .stx-rbh-role{display:inline;margin-right:8px}
  body #ows-stacks #stx-panel-handcuffs .stx-rbh-table > tbody > tr.stx-rbh-logrow{display:block}
  body #ows-stacks #stx-panel-handcuffs .stx-rbh-table > tbody > tr:is(.stx-rbh-hurtrow,.stx-rbh-noterow,.stx-rbh-editrow,.stx-rbh-warnrow){display:block}
  body #ows-stacks #stx-panel-handcuffs tr:is(.stx-rbh-hurtrow,.stx-rbh-noterow,.stx-rbh-warnrow) > td.stx-rbh-hurt-pad{display:none}
  body #ows-stacks #stx-panel-handcuffs tr:is(.stx-rbh-hurtrow,.stx-rbh-noterow,.stx-rbh-editrow,.stx-rbh-warnrow) > td{padding:0 6px 9px}
  #ows-stacks .stx-rbh-note-h{display:block;margin:0 0 2px}
  #ows-stacks .stx-rbh-edit{padding:10px}
  #ows-stacks .stx-rbh-edit-f{grid-template-columns:minmax(0,1fr)}
  body #ows-stacks .stx-rbh button.stx-rbh-editbtn,
  body #ows-stacks .stx-rbh a.stx-rbh-editlink{margin:0 0 0 12px}
  #ows-stacks .stx-rbh-hurt-h{display:block;margin:0 0 2px}
  #ows-stacks .stx-rbh-hurt{display:block;white-space:normal}
  #ows-stacks .stx-rbh-hurt + .stx-rbh-hurt::before{content:none}
  body #ows-stacks #stx-panel-handcuffs tr.stx-rbh-logrow > td{padding:0 0 10px}
  body #ows-stacks #stx-panel-handcuffs .stx-rbh-log th:first-child{width:58px}
  body #ows-stacks #stx-panel-handcuffs .stx-rbh-log th,
  body #ows-stacks #stx-panel-handcuffs .stx-rbh-log td{padding:5px}
  body #ows-stacks #stx-panel-handcuffs .stx-rbh-log th{overflow-wrap:anywhere}
  #ows-stacks .stx-rbh-name{font-size:14px;overflow-wrap:anywhere}
  #ows-stacks .stx-rbh-back > small span{display:block}
  #ows-stacks .stx-rbh-back > small span + span::before{content:none}
  #ows-stacks .stx-rbh-back .stx-rbh-espn i{display:block}
  #ows-stacks .stx-rbh-back .stx-rbh-espn i + i::before{content:none}
  #ows-stacks .stx-rbh-gm small{display:block;margin:0}
}
