/* ff-room.css — the draft room's own layout, shared by all THREE rooms.
   ---------------------------------------------------------------------------
   admin/ff-draft-room.html · my/draft-room.html · mock-draft.html (guest)

   Every rule here was previously duplicated as an inline <style> block inside
   the two signed-in rooms; the guest room made that three copies, so it moved
   to one file. The values are UNCHANGED — desktop must stay pixel-identical.

   LOAD ORDER MATTERS: this file goes after kit.css and BEFORE ff-mobile.css,
   which is exactly where the inline <style> sat, so ties still resolve the same
   way and ff-mobile.css's @media(max-width:768px) rules still win on the phone.
   --------------------------------------------------------------------------- */

/* the draft board wants the whole window, not the 1240px reading column */
.content{ max-width:1600px; }
.pos{ display:inline-block; min-width:32px; text-align:center; padding:2px 6px; border-radius:6px; font-weight:800; font-size:11px; color:var(--bg); }
.pos.QB{ background:var(--bad); }  .pos.RB{ background:var(--ok); }
.pos.WR{ background:var(--accent); } .pos.TE{ background:var(--warn); }
.pos.DEF{ background:var(--brand); } .pos.K{ background:var(--muted); }

.ffgrid{ display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:16px; align-items:start; }
@media(max-width:1200px){ .ffgrid{ grid-template-columns:1fr; } }
.ffcol-side{ display:flex; flex-direction:column; gap:14px; }

/* The room's layout rows are CLASSES, not inline styles, so the mobile shell
   (assets/ff-mobile.css) can turn them into horizontal scrollers — an inline
   flex-wrap:wrap cannot be overridden by a stylesheet. Values are exactly
   what they were inline, so desktop is unchanged. */
.ffcontrols{ padding:14px; margin-bottom:14px; }
.ffctlrow{ display:flex; gap:10px; flex-wrap:wrap; align-items:end; }
.ffbtnrow{ display:flex; gap:8px; flex-wrap:wrap; }
.ffstatusrow{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-top:12px;
              padding:9px 12px; border-radius:10px; background:var(--surface); font-size:13px; }
.ffrow{ padding:12px 14px; border-bottom:1px solid var(--border); display:flex; gap:8px;
        flex-wrap:wrap; align-items:center; }
.ffrow.tight{ padding:10px 14px; }
.ffsearch{ flex:1; min-width:170px; }
.ffsel{ display:block; margin-top:4px; min-width:190px; }
/* a panel the phone needs but the desktop column never printed when empty */
.p-hide-desktop{ display:none; }

.tablewrap{ max-height:calc(100vh - 300px); overflow:auto; }
/* Give the board its natural width and let the wrapper scroll — squeezing 14 columns
   into the panel turned the outlook column into "Healthy —" and nothing else. */
table.pt{ width:100%; min-width:1240px; border-collapse:collapse; font-size:13px; }
table.pt th, table.pt td{ padding:6px 8px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
table.pt th{ position:sticky; top:0; z-index:2; background:var(--bg); font-size:10.5px; text-transform:uppercase;
             letter-spacing:.05em; color:var(--muted); cursor:pointer; user-select:none; }
table.pt th:hover{ color:var(--text); }
/* The outlook is one line with the full text on hover — letting it wrap pushed the
   Draft column off the right edge of the board, which is not a column you can hide. */
table.pt th.note, table.pt td.note{ width:300px; max-width:300px; overflow:hidden; text-overflow:ellipsis;
                                    font-size:12px; color:var(--muted); }
/* …and the action column is pinned, so it is reachable at any scroll position. */
table.pt th.act, table.pt td.act{ position:sticky; right:0; background:inherit; z-index:1;
                                  box-shadow:-8px 0 12px -8px rgba(0,0,0,.55); }
table.pt thead th.act{ z-index:3; background:var(--bg); }
tr.prow{ background:var(--bg); }
tr.prow:nth-child(even){ background:color-mix(in srgb,var(--surface) 45%,var(--bg)); }
tr.prow.canpick{ cursor:pointer; }
tr.prow.canpick:hover{ outline:2px solid var(--brand); outline-offset:-2px; }
tr.prow.reco{ outline:2px solid var(--accent); outline-offset:-2px;
              background:color-mix(in srgb,var(--accent) 14%,transparent) !important; }

.up{ color:var(--ok); font-weight:700; } .down{ color:var(--bad); font-weight:700; }
.mini{ display:inline-block; font-size:9px; font-weight:800; padding:0 5px; border-radius:999px; margin-left:4px; vertical-align:middle; }
.mini.out{ background:color-mix(in srgb,var(--bad) 22%,transparent); color:var(--bad); }
.mini.risk{ background:color-mix(in srgb,var(--warn) 22%,transparent); color:var(--warn); }
.mini.watch{ background:color-mix(in srgb,var(--muted) 22%,transparent); color:var(--muted); }
.mini.r3d{ background:color-mix(in srgb,var(--ok) 20%,transparent); color:var(--ok); }
.mini.rcom{ background:color-mix(in srgb,var(--warn) 20%,transparent); color:var(--warn); }
.mini.rhc{ background:color-mix(in srgb,var(--muted) 20%,transparent); color:var(--muted); }
.mini.reco{ background:var(--accent); color:var(--bg); }

/* ── the live pick ticker (v1.5.0) ────────────────────────────────────────
   Shown only while "Watch picks live" is on and a draft is running. It sits
   directly above the coach bar so the two "what is happening right now" lines
   are together, and it is the only element on the page that animates. */
.fflivetog{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  color:var(--muted); cursor:pointer; padding:6px 10px; border:1px solid var(--border);
  border-radius:10px; background:var(--surface); align-self:flex-end; }
.fflivetog:hover{ border-color:var(--brand); color:var(--text); }
.fflivetog input{ accent-color:var(--brand); width:15px; height:15px; }
.fflivetog small{ display:block; font-weight:500; font-size:10.5px; opacity:.75; }

.fflive{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:9px 14px; margin-bottom:12px; border-radius:var(--radius);
  border:1px solid var(--border); border-left:4px solid var(--muted);
  background:var(--surface); font-size:13.5px; }
.fflive.on{ border-left-color:var(--ok); }
.fflive .dot{ width:9px; height:9px; border-radius:50%; background:var(--muted); flex:none; }
.fflive.on .dot{ background:var(--ok); animation:ffpulse 2s ease-in-out infinite; }
.fflive .pk{ font-weight:800; color:var(--muted); font-variant-numeric:tabular-nums; }
.fflive .who{ color:var(--muted); }
.fflive .verb{ color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.fflive .pl{ font-weight:800; }
.fflive .tm{ color:var(--muted); font-size:12px; }
.fflive .next{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); white-space:nowrap; }
.fflive .next.you{ color:var(--brand); }
/* Re-keyed on every render, so each new pick replays the flash — that IS the
   "coming off the board" cue, and it costs nothing when the ticker is off. */
.fflive.on .pl{ animation:ffland .5s ease-out; }
@keyframes ffpulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.8); } }
@keyframes ffland{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

/* The player the ticker is showing is still IN the list for its two seconds,
   struck through, so you watch it leave rather than notice it gone.
   Mixed over var(--bg), NOT transparent: `td.act` is sticky with
   `background:inherit`, so a see-through row lets the outlook column scroll
   visibly underneath the pinned Draft/Team cell. */
tr.prow.justtaken{ background:color-mix(in srgb,var(--warn) 16%,var(--bg)) !important;
  animation:ffstrike .5s ease-out; }
tr.prow.justtaken td.c-name, tr.prow.justtaken td.c-rank{ text-decoration:line-through; opacity:.72; }
@keyframes ffstrike{ from{ background:color-mix(in srgb,var(--warn) 42%,var(--bg)); } to{ background:color-mix(in srgb,var(--warn) 16%,var(--bg)); } }
.logrow.fresh{ background:color-mix(in srgb,var(--warn) 16%,transparent); border-radius:6px; padding:3px 6px; }
@media (prefers-reduced-motion:reduce){
  .fflive.on .dot, .fflive.on .pl, tr.prow.justtaken{ animation:none; }
}

.coachbar{ padding:12px 16px; border-radius:var(--radius); border:1px solid var(--border);
           border-left:4px solid var(--accent); background:color-mix(in srgb,var(--accent) 7%,transparent); margin-bottom:12px; }
.coachbar .why{ color:var(--muted); font-size:12.5px; margin-top:4px; }

.chipbtn{ padding:5px 11px; font-size:12px; border-radius:999px; border:1px solid var(--border);
          background:transparent; color:var(--muted); cursor:pointer; font-weight:600; }
.chipbtn:hover{ border-color:var(--brand); color:var(--text); }
.chipbtn.on{ background:var(--brand); border-color:var(--brand); color:var(--bg); }

.slotrow{ display:flex; justify-content:space-between; gap:8px; align-items:center;
          padding:5px 6px; border-bottom:1px dashed var(--border); font-size:13px; }
.slotrow .lbl{ color:var(--muted); font-weight:700; font-size:11px; min-width:42px; }
.slotrow.empty .pl{ color:var(--muted); font-style:italic; }
.clash{ color:var(--bad); font-weight:700; }

.logrow{ display:flex; gap:8px; padding:3px 0; border-bottom:1px solid var(--border); font-size:12.5px; }
.logrow.you{ background:color-mix(in srgb,var(--brand) 12%,transparent); border-radius:6px; padding:3px 6px; }
.logrow .pk{ color:var(--muted); font-weight:700; min-width:40px; }
.wi{ display:flex; justify-content:space-between; gap:8px; padding:3px 0; border-bottom:1px solid var(--border); font-size:12.5px; }
.wi.dev{ background:color-mix(in srgb,var(--warn) 12%,transparent); border-radius:5px; padding:3px 5px; }
.scrollbox{ max-height:340px; overflow:auto; }
/* ── the draft-position picker (v1.4.0) ───────────────────────────────────
   Opened by Start draft in all THREE rooms, so it lives here rather than in a
   page. z-index sits above the mobile shell's tab bar (60) and the fixed #flash
   card (70) — and matches ff-guest.js's modal (1200/1201) so the two can never
   fight. Everything is finger-sized: the seat buttons are ≥52px tall and the
   grid stays five across at 390px. */
.ffseat-bg{ position:fixed; inset:0; background:rgba(0,0,0,.62); z-index:1200; }
.ffseat-card{ position:fixed; z-index:1201; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(520px,94vw); max-height:92vh; overflow:auto; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.7); }
.ffseat-card h3{ font-size:20px; margin:0 0 8px; line-height:1.2; }
.ffseat-card p.sub{ color:var(--muted); font-size:13.5px; line-height:1.6; margin:0 0 16px; }
.ffseat-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.ffseat{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:58px; padding:8px 4px; border-radius:12px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); cursor:pointer; line-height:1.1; }
.ffseat .n{ font-size:18px; font-weight:800; }
.ffseat .tag{ font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.ffseat:hover{ border-color:var(--brand); }
.ffseat:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ffseat.on{ background:var(--brand); border-color:var(--brand); color:var(--bg); }
.ffseat.on .tag{ color:var(--bg); }
.ffseat-picks{ margin-top:14px; font-size:12.5px; line-height:1.5; color:var(--muted); min-height:38px; }
.ffseat-picks b{ color:var(--text); }
.ffseat-acts{ display:flex; gap:9px; flex-wrap:wrap; margin-top:6px; }
@media(max-width:768px){
  .ffseat-card{ padding:16px; }
  .ffseat-grid{ gap:6px; }
  .ffseat{ min-height:52px; }
  .ffseat .n{ font-size:17px; }
}

.bgrid{ display:grid; grid-auto-flow:column; gap:8px; grid-auto-columns:140px; overflow:auto; padding-bottom:6px; }
.tcol{ border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.tcol h4{ margin:0; padding:6px; font-size:11px; text-align:center; background:var(--surface); }
.tcol.you h4{ background:var(--brand); color:var(--bg); }
.tcol .pk{ padding:4px 6px; font-size:11px; border-top:1px solid var(--border); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }