/* ==========================================================================
   Draft Assistant — shared styles
   Design tokens are the DKL house set (dkl-tools/public/index.html), kept
   byte-identical so this tool looks like it belongs next to the others.
   ========================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg-primary: #09090b;
  --bg-secondary: #18181b;
  --bg-card: #1c1c21;
  --bg-card-hover: #27272a;
  --border: #2e2e33;
  --border-hover: #3f3f46;
  --text-primary: #fafafa;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --accent: #8b5cf6;
  --accent-glow: rgba(139, 92, 246, 0.15);
  --radius: 12px;
  --radius-lg: 16px;

  --good: #34d399;
  --bad: #f87171;
  --warn: #fbbf24;

  /* Position palette.
     ------------------------------------------------------------------
     Six categorical colors CANNOT be made colorblind-safe when any two
     may sit side by side — which is exactly the board grid's situation.
     Validated against this surface (#1c1c21): six hues bottom out at
     ΔE 1.6 for deuteranopia, and no fourth hue clears the floors either.
     Three is the real limit.

     So position is encoded twice, and hue is the weaker half:
       - Every badge always prints its label. That never fails.
       - RB / WR / TE — the flex-eligible three you actually compare when
         reading a board — get the three validated hues (worst all-pairs
         ΔE 9.4 CVD, 20.9 normal vision; all checks pass).
       - QB / K / DEF are drawn OUTLINED instead of filled. A fill-vs-
         outline difference survives any color vision, so they can never
         be confused with the three, only with each other — and their
         labels separate them.
     ------------------------------------------------------------------ */
  --pos-rb:  #d95926;   /* slot 2 — orange */
  --pos-wr:  #3987e5;   /* slot 1 — blue   */
  --pos-te:  #199e70;   /* slot 3 — aqua   */
  --pos-qb:  #9085e9;   /* outlined, not competing on hue */
  --pos-k:   #a1a1aa;
  --pos-def: #a1a1aa;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.bg-glow {
  position: fixed; top: -200px; left: 50%;
  transform: translateX(-50%); width: 800px; height: 600px;
  background: radial-gradient(ellipse, rgba(139,92,246,.08) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; }
.container.wide { max-width: none; padding: 0 16px; }

/* --- typography ---------------------------------------------------------- */
h1 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
h3 { font-size: 13px; font-weight: 600; text-transform: uppercase;
     letter-spacing: .06em; color: var(--text-muted); }
.subtitle { color: var(--text-secondary); font-size: 14px; margin-top: 4px; }
.muted { color: var(--text-muted); }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* --- header -------------------------------------------------------------- */
header { padding: 32px 0 20px; }
.back { color: var(--text-muted); text-decoration: none; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; transition: color .15s; }
.back:hover { color: var(--text-secondary); }
.back svg { width: 16px; height: 16px; }
.head-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.title-row { display: flex; align-items: center; gap: 12px; }
.badge-icon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent-glow); color: var(--accent); flex-shrink: 0; }
.badge-icon svg { width: 22px; height: 22px; }

/* --- surfaces ------------------------------------------------------------ */
.card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px;
}
.panel {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); display: flex; flex-direction: column; min-height: 0;
}
.panel-head {
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0;
}
.panel-body { padding: 12px 14px; overflow: auto; flex: 1; min-height: 0; }
.panel-body.flush { padding: 0; }

/* --- controls ------------------------------------------------------------ */
input[type="text"], input[type="email"], input[type="password"], input[type="search"], select, textarea {
  width: 100%; background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; color: var(--text-primary);
  font-family: inherit; font-size: 14px; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
}
input::placeholder { color: var(--text-muted); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-primary);
  border-radius: 10px; padding: 9px 14px; font-family: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background .15s, border-color .15s, opacity .15s; white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--bg-card-hover); border-color: var(--border-hover); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { background: #7c4ded; border-color: #7c4ded; }
.btn.danger { color: var(--bad); border-color: rgba(248,113,113,.3); }
.btn.danger:hover:not(:disabled) { background: rgba(248,113,113,.1); }
.btn.sm { padding: 6px 10px; font-size: 13px; border-radius: 8px; }
.btn.icon { padding: 7px; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-secondary);
  border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 500;
  cursor: pointer; user-select: none; transition: all .12s;
}
.chip:hover { border-color: var(--border-hover); color: var(--text-primary); }
.chip.on { background: var(--accent-glow); border-color: var(--accent); color: var(--text-primary); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }

.slider-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.slider-row label { flex: 0 0 86px; font-size: 12.5px; color: var(--text-secondary); }
.slider-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.slider-row .val { flex: 0 0 34px; text-align: right; font-size: 12.5px; color: var(--text-muted); }

/* --- position badges -----------------------------------------------------
   Filled = flex-eligible (RB/WR/TE), the group you scan and compare.
   Outlined = QB/K/DEF. The fill-vs-outline split is the encoding that does
   not depend on color vision at all; the label is the one that never fails. */
.pos {
  display: inline-grid; place-items: center; min-width: 34px; padding: 2px 6px;
  border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  border: 1.5px solid transparent;
}
.pos-RB  { background: var(--pos-rb); color: #09090b; }
.pos-WR  { background: var(--pos-wr); color: #09090b; }
.pos-TE  { background: var(--pos-te); color: #09090b; }

.pos-QB  { background: transparent; border-color: var(--pos-qb);  color: var(--pos-qb); }
.pos-K   { background: transparent; border-color: var(--pos-k);   color: var(--pos-k); }
.pos-DEF { background: transparent; border-color: var(--pos-def); color: var(--pos-def); }

/* --- status / feedback --------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500;
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-secondary); color: var(--text-secondary);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.pill.live { border-color: rgba(52,211,153,.35); color: var(--good); }
.pill.live .dot { background: var(--good); animation: pulse 1.8s ease-in-out infinite; }
.pill.offline { border-color: rgba(251,191,36,.35); color: var(--warn); }
.pill.offline .dot { background: var(--warn); }
.pill.error { border-color: rgba(248,113,113,.35); color: var(--bad); }
.pill.error .dot { background: var(--bad); }

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.banner {
  border-radius: 10px; padding: 11px 14px; font-size: 13.5px;
  display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
}
.banner.warn { background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.3); color: var(--warn); }
.banner.err  { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3); color: var(--bad); }
.banner.ok   { background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.3); color: var(--good); }
.banner svg { width: 17px; height: 17px; flex-shrink: 0; }

.empty { text-align: center; padding: 48px 20px; color: var(--text-muted); font-size: 14px; }
.empty svg { width: 34px; height: 34px; margin-bottom: 12px; opacity: .5; }

/* --- tables -------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; font-weight: 600; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); padding: 9px 10px;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
td { padding: 9px 10px; border-bottom: 1px solid var(--border); }
tbody tr:hover { background: var(--bg-card-hover); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Any wide block scrolls inside itself; the page body never scrolls sideways. */
.scroll-x { overflow-x: auto; max-width: 100%; }

/* --- draft board grid -----------------------------------------------------
   The grid scrolls inside its own box in BOTH directions; the page body never
   scrolls sideways no matter how many teams the league has. */
.board-wrap {
  overflow: auto; max-height: 40vh; position: relative;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card);
}
.board-wrap.collapsed { max-height: 74px; }

.board-grid {
  display: grid;
  grid-template-columns: 46px repeat(var(--board-cols, 12), minmax(94px, 1fr));
  min-width: max-content;
}

.board-corner, .board-head {
  position: sticky; top: 0; z-index: 3;
  background: var(--bg-secondary); border-bottom: 1px solid var(--border);
  padding: 7px 6px; font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.board-corner { left: 0; z-index: 4; }
.board-head.mine { color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--accent); }

.board-gutter {
  position: sticky; left: 0; z-index: 2;
  background: var(--bg-secondary); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text-muted); gap: 1px;
}
.board-gutter .rd { font-weight: 700; color: var(--text-secondary); }
.board-gutter .dir { font-size: 10px; opacity: .65; }

.board-cell {
  position: relative; min-height: 46px; padding: 5px 6px 4px;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  font-size: 11.5px; overflow: hidden; cursor: default;
}
.board-cell.my-column { background: rgba(139, 92, 246, .05); }
.board-cell .pick-no {
  position: absolute; top: 3px; right: 5px; font-size: 9.5px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.board-cell .pick-name {
  font-weight: 600; color: var(--text-primary); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; padding-right: 16px;
}
.board-cell .pick-meta { font-size: 10px; color: var(--text-muted); }

/* Filled cells carry a left rail in the position color — same encoding as the
   badges, so a run of one position reads as a stripe down a column. */
.board-cell.filled { box-shadow: inset 3px 0 0 var(--rail, var(--border)); }
.board-cell.filled.pos-RB  { --rail: var(--pos-rb);  background: color-mix(in srgb, var(--pos-rb) 9%, transparent); }
.board-cell.filled.pos-WR  { --rail: var(--pos-wr);  background: color-mix(in srgb, var(--pos-wr) 9%, transparent); }
.board-cell.filled.pos-TE  { --rail: var(--pos-te);  background: color-mix(in srgb, var(--pos-te) 9%, transparent); }
.board-cell.filled.pos-QB  { --rail: var(--pos-qb);  background: color-mix(in srgb, var(--pos-qb) 7%, transparent); }
.board-cell.filled.pos-K,
.board-cell.filled.pos-DEF { --rail: var(--pos-k); }

.board-cell.on-clock {
  background: var(--accent-glow); box-shadow: inset 0 0 0 2px var(--accent);
  animation: pulse 1.8s ease-in-out infinite;
}
.board-cell.on-clock .pick-name { color: var(--accent); font-size: 10.5px; }
.board-cell.my-pick:not(.filled) { box-shadow: inset 0 0 0 1px var(--accent); }
.board-cell.upcoming .pick-no { opacity: .5; }
.board-cell.skipped { opacity: .4; }

/* --- player list --------------------------------------------------------- */
.list-toolbar {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 9px; flex-shrink: 0;
}
.search-row { position: relative; }
.search-row input { padding-left: 32px; }
.search-row .icon-left {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--text-muted); pointer-events: none;
}
.search-row kbd {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  font-size: 10.5px; color: var(--text-muted); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; font-family: inherit;
}

.plist { flex: 1; overflow-y: auto; min-height: 0; position: relative; }
.plist-inner { position: relative; }
.prow {
  position: absolute; left: 0; right: 0; height: 46px;
  display: grid; grid-template-columns: 42px 1fr 62px 54px 54px 54px 40px;
  align-items: center; gap: 8px; padding: 0 12px;
  border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13px;
}
.prow:hover { background: var(--bg-card-hover); }
.prow.drafted { opacity: .35; }
.prow.drafted .pname { text-decoration: line-through; }
.prow.sel { background: var(--accent-glow); box-shadow: inset 2px 0 0 var(--accent); }
.prow .pname { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .psub { font-size: 11px; color: var(--text-muted); }
.prow .num { text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.prow .delta.good { color: var(--good); }
.prow .delta.bad { color: var(--bad); }
.prow .tier { font-size: 10px; color: var(--text-muted); }

.plist-head {
  display: grid; grid-template-columns: 42px 1fr 62px 54px 54px 54px 40px;
  gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--border);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); flex-shrink: 0; background: var(--bg-card);
}
.plist-head span { cursor: pointer; user-select: none; }
.plist-head span:hover { color: var(--text-secondary); }
.plist-head span.num { text-align: right; }
.plist-head span.on { color: var(--accent); }

/* --- recommendations ----------------------------------------------------- */
.rec {
  padding: 11px 12px; border-bottom: 1px solid var(--border); cursor: pointer;
  display: flex; gap: 10px; align-items: flex-start;
}
.rec:hover { background: var(--bg-card-hover); }
.rec .rank {
  width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  background: var(--bg-secondary); font-size: 11px; font-weight: 700; color: var(--text-muted);
  flex-shrink: 0; margin-top: 1px;
}
.rec:first-child { background: var(--accent-glow); }
.rec:first-child .rank { background: var(--accent); color: #fff; }
.rec .body { min-width: 0; flex: 1; }
.rec .top { display: flex; align-items: center; gap: 7px; }
.rec .nm { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec .why { font-size: 11.5px; color: var(--text-secondary); margin-top: 3px; line-height: 1.35; }

/* --- roster -------------------------------------------------------------- */
.slot-row {
  display: flex; align-items: center; gap: 9px; padding: 6px 0;
  border-bottom: 1px solid var(--border); font-size: 13px;
}
.slot-row:last-child { border-bottom: none; }
.slot-row .slot-label {
  width: 44px; font-size: 10.5px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.slot-row.empty .slot-name { color: var(--text-muted); font-style: italic; }

.draft-layout {
  display: grid; grid-template-columns: 300px minmax(0, 1fr) 288px;
  gap: 12px; margin-top: 12px; height: calc(100vh - 260px); min-height: 440px;
}
@media (max-width: 1200px) {
  .draft-layout { grid-template-columns: 1fr; height: auto; }
  .draft-layout > .panel { max-height: 60vh; }
}

/* --- login --------------------------------------------------------------- */
.gate { max-width: 400px; margin: 14vh auto 0; }
.gate .card { padding: 28px; }
.gate h1 { font-size: 22px; margin-bottom: 6px; }
.gate p { color: var(--text-secondary); font-size: 14px; margin-bottom: 20px; line-height: 1.5; }

.spinner {
  width: 15px; height: 15px; border: 2px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hidden { display: none !important; }