/* Draft companion styles. Uses the app's tokens from style.css with fallbacks. */
#tab-draft { --t1: #1f8f4a; --t2: #2d6fb3; --t3: #b08a1d; --t4: #7a5a9c; --t5: #7a4a3a; --t6: #3a4a44; }
#tab-draft .muted { color: var(--muted, #8fa398); }
#tab-draft .small { font-size: 12px; }
#tab-draft .strong { font-weight: 700; color: var(--gold, #f3c34a); }
#tab-draft .num { text-align: right; font-variant-numeric: tabular-nums; }
#tab-draft h3 { margin: 18px 0 8px; font-size: 15px; }

.draft-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.draft-title { margin: 0 0 4px; font-size: 20px; }
.draft-title .muted { font-size: 14px; font-weight: 500; }
.draft-views { display: flex; gap: 6px; }
.draft-banner { background: var(--card, #1a2420); border: 1px solid var(--gold2, #c9962a); border-radius: var(--radius, 12px); padding: 10px 12px; margin-bottom: 10px; font-size: 13px; word-break: break-word; }
.draft-note { font-size: 13px; color: var(--gold, #f3c34a); margin: 6px 0 10px; }

.draft-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.draft-toolbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.seg { display: inline-flex; border: 1px solid var(--line, #2a3a33); border-radius: 8px; overflow: hidden; }
.seg button { background: transparent; border: none; color: var(--muted, #8fa398); padding: 6px 10px; font-weight: 600; cursor: pointer; font-size: 13px; }
.seg button.on { background: var(--card2, #20302a); color: var(--gold, #f3c34a); }

.draft-tablewrap { max-height: 70vh; overflow: auto; }
.draft-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.draft-table th { position: sticky; top: 0; background: var(--bg2, #141c18); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line, #2a3a33); font-size: 12px; color: var(--muted, #8fa398); z-index: 1; }
.draft-table td { padding: 5px 8px; border-bottom: 1px solid var(--line, #2a3a33); vertical-align: top; }
.draft-table.compact td { padding: 4px 6px; }
.draft-table tr.taken { opacity: 0.4; text-decoration: line-through; }
.draft-table td.name { font-weight: 600; white-space: nowrap; }
.draft-table td.sig { color: var(--muted, #8fa398); font-size: 12px; min-width: 200px; max-width: 420px; }
.draft-table tr td:first-child { border-left: 4px solid transparent; }
.draft-table tr.tier-1 td:first-child { border-left-color: var(--t1); }
.draft-table tr.tier-2 td:first-child { border-left-color: var(--t2); }
.draft-table tr.tier-3 td:first-child { border-left-color: var(--t3); }
.draft-table tr.tier-4 td:first-child { border-left-color: var(--t4); }
.draft-table tr.tier-5 td:first-child { border-left-color: var(--t5); }
.draft-table tr.tier-6 td:first-child { border-left-color: var(--t6); }
.tier-pill { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--card2, #20302a); color: var(--text, #e8efe9); }
tr.tier-1 .tier-pill { background: var(--t1); color: #fff; }
tr.tier-2 .tier-pill { background: var(--t2); color: #fff; }
tr.tier-3 .tier-pill { background: var(--t3); color: #111; }
.inj { color: var(--red, #e5544b); font-weight: 700; font-size: 12px; }

.room-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
.room-side { min-width: 0; }
.clock { background: var(--card, #1a2420); border: 1px solid var(--line, #2a3a33); border-radius: var(--radius, 12px); padding: 14px 16px; margin-bottom: 12px; }
.clock.mine { border-color: var(--gold, #f3c34a); background: linear-gradient(135deg, #2a2410, var(--card, #1a2420)); animation: draftpulse 1.4s infinite; }
@keyframes draftpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(243, 195, 74, 0.35); } 50% { box-shadow: 0 0 0 8px rgba(243, 195, 74, 0); } }
.clock-big { font-size: 20px; font-weight: 800; letter-spacing: 0.3px; }
.clock.mine .clock-big { color: var(--gold, #f3c34a); }
.clock-sub { color: var(--muted, #8fa398); margin-top: 4px; font-size: 13px; }

.rec-card { background: var(--card, #1a2420); border: 1px solid var(--line, #2a3a33); border-radius: var(--radius, 12px); padding: 12px 14px; margin-bottom: 8px; }
.rec-card.hot { border-color: var(--green, #35c46a); }
.rec-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rec-head h3 { margin: 0; }
.rec-picks { display: grid; gap: 8px; margin: 10px 0; }
.rec-pick { display: flex; gap: 10px; align-items: flex-start; background: var(--card2, #20302a); border-radius: 8px; padding: 8px 10px; }
.rec-n { width: 26px; height: 26px; border-radius: 50%; background: var(--gold, #f3c34a); color: #1a1a1a; font-weight: 800; display: grid; place-items: center; flex: none; }
.rec-name { font-weight: 700; font-size: 15px; }
.rec-card details { margin-top: 6px; }
.rec-card summary { cursor: pointer; color: var(--muted, #8fa398); font-size: 13px; }
.ask-row { display: flex; gap: 8px; margin-top: 10px; }
.ask-row input { flex: 1; background: var(--bg2, #141c18); color: var(--text, #e8efe9); border: 1px solid var(--line, #2a3a33); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
#rec-answer { margin-top: 8px; font-size: 14px; }

.my-roster .pos-row { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; border-bottom: 1px solid var(--line, #2a3a33); }
.pos-label { width: 52px; flex: none; font-weight: 700; font-size: 13px; }
.pos-players { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { background: var(--card2, #20302a); border-radius: 999px; padding: 2px 8px; font-size: 12px; white-space: nowrap; }
.scarcity .scar-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.meter { flex: 1; height: 8px; background: var(--card2, #20302a); border-radius: 4px; overflow: hidden; }
.meter div { height: 100%; background: linear-gradient(90deg, var(--red, #e5544b), var(--gold, #f3c34a), var(--green, #35c46a)); }
.ticker { display: grid; gap: 3px; max-height: 360px; overflow: auto; }
.tick { display: grid; grid-template-columns: 34px 1fr auto; gap: 6px; font-size: 12px; padding: 4px 6px; border-radius: 6px; background: var(--card, #1a2420); }
.tick.mine { background: #2a2410; border: 1px solid var(--gold2, #c9962a); }
.tick-n { color: var(--muted, #8fa398); font-variant-numeric: tabular-nums; }
.tick-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tick-team { white-space: nowrap; }

@media (max-width: 900px) {
  .room-grid { grid-template-columns: 1fr; }
  .draft-tablewrap { max-height: none; }
  .draft-table td.sig { min-width: 140px; }
}