/* ============================================================
   Tool chrome — loaded only on interactive pages
   ============================================================ */
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:20px 22px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field select,.field textarea{
  font-family:var(--f-body);font-size:15px;color:var(--ink);
  background:var(--ground-2);border:1px solid var(--line);padding:9px 11px;
  border-radius:0;min-width:0;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--tan)}
.field.grow{flex:1 1 200px}
.btn-sm{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  background:transparent;color:var(--tan);border:1px solid var(--line-hi);padding:10px 14px;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s}
.btn-sm:hover{border-color:var(--tan);background:rgba(195,162,107,.10)}
.btn-sm.solid{background:var(--rust);border-color:var(--rust);color:#FFF3EC}
.btn-sm.solid:hover{background:var(--rust-hi);border-color:var(--rust-hi)}
.btn-sm.danger{color:var(--rust)}
.btn-sm.danger:hover{border-color:var(--rust);background:rgba(194,80,46,.12)}

.savebar{display:flex;align-items:center;gap:10px;margin-left:auto;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.savebar .ok{color:var(--od)}
.savebar .pending{color:var(--amber)}

/* sheet table */
.sheetwrap{overflow-x:auto;border:1px solid var(--line);background:var(--surface)}
table.sheet{width:100%;border-collapse:collapse;min-width:1060px}
table.sheet th{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tan);text-align:left;font-weight:500;padding:13px 12px;
  background:var(--ground-2);border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;z-index:2}
table.sheet td{padding:9px 12px;border-bottom:1px solid rgba(46,53,41,.7);vertical-align:middle}
table.sheet tr:last-child td{border-bottom:0}
table.sheet tr.grouphead td{
  background:var(--ground-2);padding:10px 12px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
table.sheet td.pos{font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap}
table.sheet td.pos small{display:block;font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;
  color:var(--ink-3);font-weight:400;margin-top:3px}
table.sheet input,table.sheet textarea{
  font-family:var(--f-body);font-size:14.5px;color:var(--ink);background:transparent;
  border:1px solid transparent;padding:7px 8px;width:100%;border-radius:0}
table.sheet input:hover,table.sheet textarea:hover{border-color:var(--line)}
table.sheet input:focus,table.sheet textarea:focus{outline:none;border-color:var(--tan);background:var(--ground-2)}
table.sheet input.num{width:62px;text-align:center;font-variant-numeric:tabular-nums;
  font-family:var(--f-mono);font-size:13.5px}
table.sheet input.edited,table.sheet textarea.edited{border-color:rgba(195,162,107,.45);background:rgba(195,162,107,.05)}
.attrs{display:flex;flex-wrap:nowrap;gap:8px}
.attr{display:flex;flex-direction:column;align-items:center;gap:3px}
.attr span{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}
table.sheet td.notes{vertical-align:middle;width:185px}
table.sheet td.notes textarea{width:100%;min-width:0;min-height:46px;resize:vertical;line-height:1.35}

.rowacts{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.rowadd,.rowdel{
  background:transparent;border:1px solid var(--line-hi);color:var(--ink-3);cursor:pointer;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  line-height:1;padding:5px 7px;border-radius:0;
}
.rowadd:hover{border-color:var(--tan);color:var(--tan)}
.rowdel:hover{border-color:var(--rust);color:var(--rust)}

.rowreset{background:transparent;border:0;color:var(--ink-3);cursor:pointer;font-family:var(--f-mono);
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:6px 2px}
.rowreset:hover{color:var(--tan);text-decoration:underline}

.toolnote{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-top:14px}

/* print: just the sheet, on paper */
@media print{
  .statusbar,header.nav,.banner,footer,.toolbar,.pagehead .grid-bg,.noprint{display:none !important}
  body{background:#fff;color:#111}
  .pagehead{border:0}
  .pagehead .wrap{padding-block:0 12px}
  .pagehead h1{color:#111;font-size:28px}
  .pagehead .lede{display:none}
  .sheetwrap{border:1px solid #999;overflow:visible}
  table.sheet{min-width:0}
  table.sheet th{background:#eee;color:#111;border-bottom:1px solid #999}
  table.sheet td{border-bottom:1px solid #ddd}
  table.sheet td.pos{color:#111}
  table.sheet input,table.sheet textarea{color:#111;border-color:transparent !important;background:none !important}
  .printhead{display:block !important;margin-bottom:10px;font-size:13px;color:#111}
}
.printhead,.printheadrow{display:none}

/* ---------- attribute chips: remove + add ---------- */
.attr{position:relative}
.attr .del{
  position:absolute;top:-7px;right:-7px;width:15px;height:15px;line-height:13px;
  background:var(--surface-hi);color:var(--ink-3);border:1px solid var(--line-hi);
  font-family:var(--f-mono);font-size:10px;text-align:center;cursor:pointer;padding:0;
  opacity:0;transition:opacity .15s,color .15s,border-color .15s}
.attr:hover .del,.attr .del:focus{opacity:1}
.attr .del:hover{color:var(--rust);border-color:var(--rust)}
.attrbtn{flex:0 0 auto;align-self:center;background:transparent;border:1px dashed var(--line-hi);
  color:var(--ink-3);font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;
  padding:9px 10px;cursor:pointer;white-space:nowrap}
.attrbtn:hover{border-color:var(--tan);color:var(--tan)}

/* ---------- attribute picker ---------- */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(5,8,6,.72);padding:20px}
.modal.open{display:flex}
.modal-panel{background:var(--surface);border:1px solid var(--line-hi);width:min(720px,100%);
  max-height:86vh;display:flex;flex-direction:column}
.modal-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:20px 24px;
  border-bottom:1px solid var(--line);background:var(--ground-2)}
.modal-head h3{font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:.04em;
  text-transform:uppercase;margin:0;line-height:1}
.modal-head .sub{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tan)}
.modal-body{padding:20px 24px;overflow-y:auto}
.modal-foot{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:16px 24px;
  border-top:1px solid var(--line);background:var(--ground-2)}
.modal-foot .spacer{margin-left:auto}
.attrgroup{margin-bottom:20px}
.attrgroup:last-child{margin-bottom:0}
.attrgroup h4{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 10px}
.attrgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.attrpick{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);
  background:var(--ground-2);cursor:pointer;font-family:var(--f-mono);font-size:11.5px;
  letter-spacing:.06em;color:var(--ink-2)}
.attrpick:hover{border-color:var(--line-hi);color:var(--ink)}
.attrpick input{accent-color:var(--tan);margin:0}
.attrpick.on{border-color:var(--tan);color:var(--ink);background:rgba(195,162,107,.08)}
.customrow{display:flex;gap:8px;align-items:flex-end;margin-top:6px}

/* ---------- "how many needed" column ---------- */
table.sheet select.need{
  font-family:var(--f-mono);font-size:13px;color:var(--ink);background:transparent;
  border:1px solid transparent;padding:7px 2px;width:100%;min-width:52px;border-radius:0;
  text-align:center;font-variant-numeric:tabular-nums;
}
table.sheet select.need:hover{border-color:var(--line)}
table.sheet select.need:focus{outline:none;border-color:var(--tan);background:var(--ground-2)}
table.sheet select.need.edited{border-color:rgba(195,162,107,.45);background:rgba(195,162,107,.05)}
table.sheet select.need.zero{color:var(--ink-3)}

/* ---------- priority flag ---------- */
.sr-head{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
table.sheet td.pri{text-align:center;padding-left:8px;padding-right:0}
.pribtn{background:none;border:0;cursor:pointer;padding:6px 4px;line-height:1;
  font-size:17px;color:var(--ink-3);transition:color .15s,transform .15s}
.pribtn:hover{color:var(--tan);transform:scale(1.15)}
.pribtn.on{color:var(--tan)}
table.sheet tr.is-priority td{background:rgba(195,162,107,.045)}
table.sheet tr.is-priority td.pos{color:var(--tan-hi)}

/* ---------- recruiting-cycle toggle ----------
   Two real buttons rather than one that flips: both cycles stay visible, so
   the control shows what it can do, not just what it is doing right now.
   Each one carries its own border, fill and lip so it reads as pressable. */
.segmented{display:flex;flex-wrap:wrap;gap:10px}
.seg{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  background:var(--surface-hi);border:1px solid var(--line-hi);color:var(--ink-2);
  cursor:pointer;padding:12px 20px;border-radius:0;
  box-shadow:0 2px 0 rgba(0,0,0,.45);
  transition:background .15s,color .15s,border-color .15s,transform .12s,box-shadow .12s;
}
.seg::before{                       /* radio dot: which one is live, at a glance */
  content:"";width:11px;height:11px;border-radius:50%;
  border:1px solid currentColor;background:transparent;flex:none;
  transition:background .15s,box-shadow .15s;
}
.seg:hover{
  background:var(--line);color:var(--ink);border-color:var(--tan);
  transform:translateY(-1px);box-shadow:0 3px 0 rgba(0,0,0,.5);
}
.seg:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.45)}
.seg:focus-visible{outline:2px solid var(--tan-hi);outline-offset:2px}
.seg.on{
  background:var(--tan);border-color:var(--tan-hi);color:#17150F;font-weight:700;
  box-shadow:0 2px 0 #6E5326;
}
.seg.on::before{background:#17150F;box-shadow:inset 0 0 0 2px var(--tan)}
.seg.on:hover{background:var(--tan-hi);border-color:var(--tan-hi);color:#17150F}

/* ---------- NIL allowance ---------- */
/* three digits plus a $ is all this ever holds -- but it must not clip */
table.sheet td.nilcol{width:68px;padding-left:4px;padding-right:4px}
table.sheet input.nil{
  font-family:var(--f-mono);font-size:13px;text-align:center;
  font-variant-numeric:tabular-nums;padding:7px 3px;min-width:48px;
}

/* ---------- native select popups ----------
   The option list is drawn by the OS. Inheriting the select's light text onto a
   default white popup is what washes the menu out, so both ends are set here. */
select option,
select optgroup{
  background-color:var(--surface);
  color:var(--ink);
}

/* ---------- archetype select ---------- */
table.sheet select.arch{
  font-family:var(--f-body);font-size:14.5px;color:var(--ink);background:transparent;
  border:1px solid transparent;padding:7px 6px;width:100%;border-radius:0;
}
table.sheet select.arch:hover{border-color:var(--line)}
table.sheet select.arch:focus{outline:none;border-color:var(--tan);background:var(--ground-2)}
table.sheet select.arch.edited{border-color:rgba(195,162,107,.45);background:rgba(195,162,107,.05)}
table.sheet input.arch-custom{
  font-family:var(--f-body);font-size:14.5px;color:var(--ink);background:var(--ground-2);
  border:1px solid var(--tan);padding:7px 8px;width:100%;border-radius:0;
}
table.sheet input.arch-custom:focus{outline:none}

/* ---------- need totals ---------- */
.needsum{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:baseline;margin-top:16px;
  padding:14px 18px;border:1px solid var(--line);background:var(--surface)}
.needsum .big{font-family:var(--f-display);font-weight:800;font-size:26px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink);line-height:1}
.needsum .big b{color:var(--tan);font-weight:800}
.needsum .part{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.needsum .part b{color:var(--ink-2);font-weight:500}

@media print{
  tr.zero-need{display:none !important}
  /* the sheet has to invert properly, not just lose its chrome */
  .sheetwrap{background:#fff}
  table.sheet td{background:#fff;color:#111}
  table.sheet tr.grouphead td{background:#e9e9e9;color:#111;border-top:1px solid #999}
  table.sheet td.pos{color:#111}
  table.sheet td.pos small{color:#555}
  table.sheet .attr span{color:#555}
  table.sheet input,table.sheet textarea{color:#111 !important}
  table.sheet select.arch{
    color:#111;border-color:transparent !important;background:none !important;
    -webkit-appearance:none;appearance:none}
  table.sheet select.need{
    color:#111;border-color:transparent !important;background:none !important;
    -webkit-appearance:none;appearance:none;text-align:left;font-weight:600}
  .attrbtn,.attr .del,.rowadd,.rowdel,.rowacts{display:none !important}
  /* an empty note should print blank, not as its own prompt text */
  table.sheet textarea::placeholder{color:transparent !important}
  table.sheet textarea{resize:none !important}
  :root{color-scheme:light}
  select option,select optgroup{background-color:#fff;color:#111}
  .pribtn{color:#111 !important}
  .pribtn:not(.on){visibility:hidden}
  table.sheet tr.is-priority td{background:#f2ede1}
  .needsum{border:1px solid #999;background:none;margin-top:10px;padding:8px 10px}
  .needsum .big{color:#111;font-size:16px}
  .needsum .big b{color:#111}
  .needsum .part,.needsum .part b{color:#333}
}


/* ============================================================
   PRINT: density + weight
   The screen sheet is spacious on purpose; on paper the job is
   to fit a class on as few sheets as possible and still be
   readable under fluorescent light with a pen in your hand.
   ============================================================ */
@media print{
  @page{ size:letter portrait; margin:0.45in 0.3in; }

  /* the page's own title block is screen chrome -- .printhead carries
     the league/team/season line, which is all a printout needs */
  .pagehead{display:none !important}
  main,main>section,.wrap{padding-top:0 !important;margin-top:0 !important}
  .sheetwrap{margin-top:0 !important}
  .toolnote,.needsum .part{display:none !important}
  /* 300% of the old 12px -- this is the line that tells you which sheet
     you are holding, so it reads from across the desk */
  /* big enough to identify the sheet at a glance without eating the page */
  /* identifying line and the class total share one row above the table, so the
     totals are read with the sheet rather than hunted for at the bottom */
  .printheadrow{display:flex !important;align-items:baseline;justify-content:space-between;
    gap:16px;margin:0 0 8px}
  .printhead{display:block !important;margin:0;font-size:12px;line-height:1.1;font-weight:800;
    font-family:var(--f-display);letter-spacing:.01em;color:#000}
  .printtotals{font-family:var(--f-display);font-size:12px;font-weight:800;color:#000;
    white-space:nowrap;letter-spacing:.01em}
  .needsum{display:none !important}
  table.sheet input.nil{font-size:10.5px;font-weight:700;padding:1px 2px;width:100%;min-width:0}

  /* backgrounds (group bands, priority rows) must actually ink */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* header repeats on every sheet; no row split across a page break */
  table.sheet thead{display:table-header-group}
  table.sheet th{position:static;padding:5px 5px;font-size:8px;color:#000;font-weight:700}
  table.sheet tr{break-inside:avoid;page-break-inside:avoid}

  /* --- density --- */
  table.sheet td{padding:2px 5px;border-bottom:1px solid #bbb}
  table.sheet tr.grouphead td{padding:4px 5px;font-size:8.5px;font-weight:700;letter-spacing:.16em}
  table.sheet td.pos{font-size:12px;line-height:1.05;white-space:normal}
  table.sheet td.pos small{font-size:7px;margin-top:1px;letter-spacing:.08em}
  /* Portrait is narrow, so the columns are pinned as shares of the page rather
     than left to the browser -- fixed layout also stops any cell forcing the
     table wider than the paper. Padding is trimmed to kill the dead gaps while
     leaving the columns visibly separated. */
  /* the markup carries inline pixel widths for the screen layout; inline styles
     outrank a stylesheet, so these have to be !important to take effect here */
  table.sheet{table-layout:fixed;width:100%}
  table.sheet th:nth-child(1){width:3%  !important}
  table.sheet th:nth-child(2){width:10% !important}
  table.sheet th:nth-child(3){width:26% !important}
  table.sheet th:nth-child(4){width:5%  !important}
  table.sheet th:nth-child(5){width:7%  !important}
  table.sheet th:nth-child(6){width:19% !important}
  table.sheet th:nth-child(7){width:30% !important}
  table.sheet th:nth-child(8){width:0   !important;padding:0 !important}
  table.sheet td.notes{width:auto}
  table.sheet td.nilcol{width:auto;padding-left:3px;padding-right:3px}
  table.sheet select.arch{min-width:0;width:100%}
  /* inline-block form controls carry a line box taller than themselves;
     display:block is what actually removes the dead space in the row */
  table.sheet textarea{display:block;min-height:0 !important;height:auto;width:100%;
    padding:1px 3px;font-size:9.5px;line-height:1.3;
    white-space:pre-wrap;overflow-wrap:break-word;overflow:visible}
  table.sheet select.arch,table.sheet select.need,table.sheet input.num{display:block}
  table.sheet select.arch{padding:2px 2px;font-size:10.5px}
  table.sheet select.need{padding:2px 0;font-size:11px;width:100%;min-width:0}
  table.sheet input.num{padding:1px 1px;font-size:10.5px;width:30px;min-width:0}
  .attrs{gap:4px;align-items:center;justify-content:flex-start}
  .attr{min-width:0}
  .attr{gap:0}
  table.sheet input.num{padding:0 1px;line-height:1.2}
  table.sheet td.pri{padding:3px 0 3px 6px}
  .pribtn{font-size:12px;padding:0}

  /* --- weight: thin grey type does not survive a laser printer --- */
  table.sheet td,
  table.sheet td.pos,
  table.sheet input,
  table.sheet textarea,
  table.sheet select.arch,
  table.sheet select.need{color:#000 !important}
  table.sheet td.pos{font-weight:800}
  table.sheet td.pos small{color:#333;font-weight:600}
  table.sheet .attr span{color:#333;font-weight:600;font-size:6.8px;letter-spacing:.04em}
  table.sheet input.num{font-weight:700}
  table.sheet select.arch{font-weight:600}
  table.sheet select.need{font-weight:800}
  table.sheet textarea{font-weight:500}
  .needsum{margin-top:8px;padding:6px 9px}
  .needsum .big{font-size:14px;font-weight:800}
}