/* =====================================================================
   Boards addon — new components for "Start & Sit" (start/sit) and
   "Waiver Wire" (waiver priority). Extends style.css using the same design
   tokens (--lime, --surface, --raised, --gain/--loss/--avoid/--warn,
   Barlow Condensed for labels, Inter for prose). No token overrides —
   this file only adds selectors that don't exist yet.
   ===================================================================== */

/* ---------- Confidence rail (mirrors .tier-rail, semantic labels) ---------- */
.conf-rail{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;
  position:sticky;top:calc(var(--header-h) + 14px);z-index:15;
}
.conf-rail button{
  background:var(--surface);border:1px solid var(--line);color:var(--mute);
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:12px;letter-spacing:.06em;
  padding:7px 12px;border-radius:8px;display:flex;align-items:center;gap:7px;text-transform:uppercase;
}
.conf-rail button:hover{color:var(--white)}
.conf-rail .dot{width:8px;height:8px;border-radius:50%;background:var(--tier-c,var(--lime))}
.conf-rail .ct{color:var(--mute-dim);font-weight:700}

/* ---------- Confidence board + blocks (mirrors .tier-board/.tier-block) ---------- */
.conf-board{display:block}
@media (min-width:900px){
  .conf-board{display:grid;grid-template-columns:1fr;gap:16px}
}
.conf-block{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);
  padding:18px 18px 8px;
  margin-bottom:16px;
  position:relative;
  overflow:hidden;
  scroll-margin-top:150px;
}
.conf-block::before{
  content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--tier-c, var(--lime));
}
.conf-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.conf-head .titles{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.conf-head .tag{font-family:'Barlow Condensed',sans-serif;font-weight:900;letter-spacing:.1em;font-size:15px;color:var(--tier-c,var(--lime));text-transform:uppercase}
.conf-head .subtag{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.06em;font-size:12px;color:var(--mute);text-transform:uppercase}
.conf-count{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.06em;font-size:11.5px;
  color:var(--white);background:var(--raised);border:1px solid var(--line);padding:4px 10px;border-radius:999px;display:inline-block;
}

/* Single-line chips, not padded cards — a real weekly slate runs every
   startable player per position (a full RB/WR list easily runs 40-60+
   players some weeks), not a curated handful with room for prose per
   entry. Dense grid of short rows scales to that; boxy cards with a
   rationale paragraph don't. */
.conf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px;padding-bottom:16px}
.call-chip{
  display:flex;align-items:center;gap:8px;min-width:0;
  background:var(--raised);border:1px solid var(--line-soft);border-radius:8px;
  padding:7px 10px;
  transition:border-color .15s;
}
.call-chip:hover{border-color:var(--tier-c,var(--lime-line))}
.call-chip .team-logo{width:22px;height:22px;border-radius:6px;flex:0 0 auto;display:grid;place-items:center;overflow:hidden;background:var(--ink)}
.call-chip .team-logo img{width:100%;height:100%;object-fit:contain;padding:2px}
.call-chip .name{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:13.5px;text-transform:uppercase;letter-spacing:.01em;color:var(--white);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-chip .opp{font-family:'Barlow Condensed',sans-serif;color:var(--mute);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;flex:0 0 auto;white-space:nowrap}
.call-chip .link-out{color:var(--mute-dim);flex:0 0 auto;display:flex}
.call-chip .link-out:hover{color:var(--lime-text)}

/* FLEX-tab source badge (shows which native position a merged flex chip came from) */
.src-chip{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:9.5px;letter-spacing:.06em;
  color:var(--ink);background:var(--mute);padding:1px 6px;border-radius:4px;display:inline-block;flex:0 0 auto;
}

@media (max-width:640px){
  .conf-grid{grid-template-columns:1fr}
}

/* ---------- Waiver: type chips ---------- */
.type-chip{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:10.5px;letter-spacing:.06em;line-height:1;
  padding:4px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;text-transform:uppercase;
  border:1px solid currentColor;
}
.type-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.type-chip.priority{color:var(--lime-text)}
.type-chip.streamer{color:var(--info)}
.type-chip.stash{color:#B98CFF}
.type-chip.need{color:var(--mute)}
.type-chip.buy{color:var(--gain)}
.type-chip.sell{color:var(--loss)}

/* ---------- Waiver: FAAB gauge ---------- */
/* Flex ignores the td's text-align:right, so pin the % + bar to the right
   edge under the FAAB header. Fixed .faab-pct/.faab-bar widths keep the
   numbers and bar starts in their own straight columns. */
.faab-cell{display:flex;align-items:center;justify-content:flex-end;gap:8px;white-space:nowrap}
.faab-pct{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:13.5px;color:var(--white);width:34px;text-align:right}
.faab-bar{width:56px;height:5px;border-radius:3px;background:var(--raised);overflow:hidden;flex:0 0 auto}
.faab-bar__fill{height:100%;border-radius:3px;background:var(--lime)}

/* ---------- Waiver: roster % ---------- */
.ros-cell{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;color:var(--mute)}
.ros-cell .lbl{color:var(--mute-dim);font-size:10px;letter-spacing:.06em;text-transform:uppercase;display:block;margin-top:1px}

/* ---------- Waiver: priority number ---------- */
.data-table td.prio{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:17px;color:var(--white);width:36px}

/* Caret leads on right-aligned headers so the label, not the caret, lines
   up with the right edge of the numbers below. */
#wireTable thead th.num button{flex-direction:row-reverse;justify-content:flex-start}

/* Wire table has more columns than rankings/sleepers (Rk, Player, Week 1,
   Type, Ros %, FAAB, expand) — too many to fit at phone widths even after
   dropping one column like the existing tables do. Drop the opponent column
   (still visible in the expand row) and de-ornament Type/FAAB/Ros% down to
   their numbers so the remaining five columns actually fit at 360px. Avoids
   overflow-x on .table-wrap on purpose — see the sticky-thead note above,
   it would demote position:sticky from viewport-relative to
   container-relative and break the sticky header. */
@media (max-width:640px){
  #wireTable th:nth-child(3),#wireTable td:nth-child(3){display:none}
  .faab-bar{display:none}
  .ros-cell .lbl{display:none}
  .type-chip{padding:3px 7px;font-size:9px;letter-spacing:.03em}
  .type-chip::before{display:none}
  #wireTable td,#wireTable thead th button,#wireTable thead th .th-label{padding-left:8px;padding-right:8px}
  /* Carets don't show direction, and in these narrow columns flex was already
     squeezing them to nothing — leaving a stray gap that pushed labels off
     the content edge. Headers still sort on tap. nowrap stops "Ros %"
     breaking onto two lines. */
  #wireTable thead th .caret{display:none}
  #wireTable thead th button,#wireTable thead th .th-label{white-space:nowrap}

  /* The legacy HTML table auto-layout algorithm sizes columns off each
     cell's unbroken content width and doesn't reliably honor
     overflow/text-overflow as a signal it's allowed to shrink below that —
     unlike flex/grid. With six columns of real content (badges + numbers,
     not just one delta column like rankings/sleepers) that under-shrinks
     the name column instead of the badges, and the table blows past the
     wrap. table-layout:fixed with explicit % widths sizes columns from CSS
     instead of content, so ellipsis on .type-chip/.name actually applies. */
  #wireTable{table-layout:fixed;width:100%}
  #wireTable th:nth-child(1),#wireTable td:nth-child(1){width:8%}
  #wireTable th:nth-child(2),#wireTable td:nth-child(2){width:37%}
  #wireTable th:nth-child(4),#wireTable td:nth-child(4){width:27%}
  #wireTable th:nth-child(5),#wireTable td:nth-child(5){width:14%}
  #wireTable th:nth-child(6),#wireTable td:nth-child(6){width:14%}
  #wireTable th:nth-child(7),#wireTable td:nth-child(7){width:6%}
  .type-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}
  .type-chip::before{content:none}
  .player-cell .who{overflow:hidden}

  /* Belt-and-suspenders: the type/position seg controls use shortened
     filter labels above so they fit at phone width, but a segmented
     control (single-line by design, no internal wrap) is exactly the kind
     of chip row that should scroll rather than overflow the page if a
     label set ever grows past what fits — same pattern as a mobile tab bar.
     Flex items default to min-width:auto (can't shrink below their content),
     so without min-width:0 on the whole chain, overflow-x:auto on the seg
     itself never gets a bounded box to clip against — the overflow just
     bubbles up and widens the page instead. */
  .toolbar .wrap,.toolbar-group{min-width:0}
  #typeSeg,#posSeg{max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* Buy/Sell table: fewer columns than the wire table (Rk, Player, Call,
   expand), but the same auto-layout shrink problem shows up with a
   3-column phone width once the Call badge competes with the name for
   space — same table-layout:fixed fix as #wireTable above. */
@media (max-width:640px){
  #buySellTable{table-layout:fixed;width:100%}
  /* style.css has a generic ".data-table td:nth-child(3){display:none}" rule
     for rankings/sleepers, where the 3rd column is droppable. This table's
     3rd column is the Call badge — the whole point of the board — so it
     must stay visible; the #buySellTable id selector outweighs that class
     selector, this just needs to explicitly restate the default display. */
  #buySellTable th:nth-child(1),#buySellTable td:nth-child(1){width:8%}
  #buySellTable th:nth-child(2),#buySellTable td:nth-child(2){width:57%}
  #buySellTable th:nth-child(3),#buySellTable td:nth-child(3){width:27%;display:table-cell}
  #buySellTable th:nth-child(4),#buySellTable td:nth-child(4){width:8%}
  #buySellTable td,#buySellTable thead th button{padding-left:8px;padding-right:8px}
  #buySellTable .type-chip{padding:3px 7px;font-size:9px;letter-spacing:.03em}
  #buySellTable .type-chip::before{display:none;content:none}
}

/* ---------- Methodology / freshness note (reused pattern from home's adp-source) ---------- */
.method-note{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line-soft);color:var(--mute);font-size:13.5px;line-height:1.6}
.method-note a{text-decoration:underline;color:var(--lime-text)}
.method-note strong{color:var(--prose);font-weight:600}