/* ============================================================
   Draft Room styles. Assumes css/tokens.css is already loaded.
   ============================================================ */

  .scoreboard{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:16px 20px; display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:16px; margin-bottom:18px;
  }
  .sb-left{display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
  .sb-block{display:flex; flex-direction:column; gap:2px;}
  .sb-label{font-size:11px; letter-spacing:1px; color:var(--text-faint); text-transform:uppercase;}
  .sb-value{font-size:22px; font-weight:800;}
  .sb-onclock{
    background:var(--gold); color:var(--gold-ink); padding:8px 16px; border-radius:8px;
    font-size:20px; font-weight:800; display:flex; align-items:center; gap:10px;
  }
  .sb-onclock select{
    background:transparent; border:none; color:var(--gold-ink); font-weight:800;
    font-size:20px; cursor:pointer;
  }
  .sb-actions{display:flex; gap:8px;}
  button{
    font-family:inherit; cursor:pointer; border-radius:8px; border:1px solid var(--line);
    background:var(--panel2); color:var(--text); padding:9px 14px; font-size:13.5px; font-weight:600;
  }
  button:hover{border-color:var(--text-faint);}
  button.primary{background:var(--gold); color:var(--gold-ink); border-color:var(--gold);}
  button.danger{background:transparent; color:#F09595; border-color:#5C2E2E;}
  button:disabled{opacity:.4; cursor:not-allowed;}

  .layout{display:grid; grid-template-columns:1fr 380px; gap:18px;}
  @media (max-width:980px){ .layout{grid-template-columns:1fr;} }

  .panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px;}
  .panel h2{font-size:14px; letter-spacing:.5px; text-transform:uppercase; color:var(--text-dim); margin:0 0 12px;}

  .controls{display:flex; gap:10px; margin-bottom:12px; flex-wrap:wrap;}
  .controls input[type=text]{
    flex:1; min-width:160px; background:var(--panel2); border:1px solid var(--line); border-radius:8px;
    color:var(--text); padding:9px 12px; font-size:14px;
  }
  /* Provider selector. Sits between the search controls and the position
     tabs because it changes what the board means, not just what it shows. */
  .provider-bar{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px;
    font-size:13px; color:var(--text-dim);
  }
  .provider-bar select{
    background:var(--panel2); border:1px solid var(--line); border-radius:8px;
    color:var(--text); padding:7px 10px; font-size:13px; font-weight:600; font-family:inherit;
  }
  .link-btn{
    background:transparent; border:none; color:var(--accent); padding:6px 2px;
    font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:3px;
  }
  .link-btn:hover{border:none; opacity:.8;}
  .provider-note{
    font-size:12px; color:var(--text-faint); flex:1 1 100%; min-width:0;
  }
  .provider-note.warn{color:var(--orange); font-weight:600;}

  .tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px;}
  .tab{
    padding:7px 13px; border-radius:20px; border:1px solid var(--line); background:var(--panel2);
    color:var(--text-dim); font-size:13px; font-weight:700; cursor:pointer;
  }
  .tab.active{background:var(--gold); color:var(--gold-ink); border-color:var(--gold);}

  .legend{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
  .legend span{
    font-size:11px; padding:3px 9px; border-radius:6px; font-weight:700;
  }

  .player-list{max-height:640px; overflow-y:auto;}
  .prow{
    display:flex; align-items:center; gap:12px; padding:10px 10px; border-radius:8px;
    border-left:4px solid transparent; margin-bottom:6px; background:var(--panel2);
  }
  .prow.drafted{opacity:.35;}
  .prow.drafted .pname{text-decoration:line-through;}
  .prow .rank{width:28px; text-align:center; font-weight:800; font-size:13px; color:var(--text-faint); flex-shrink:0;}
  /* Unranked by the active provider. Deliberately not a substituted rank from
     another provider or scoring format - see issue #11. */
  .prow .rank-na{font-size:10px; letter-spacing:0.5px; opacity:0.55; font-weight:700;}
  .avatar-wrap{position:relative; width:42px; height:42px; flex-shrink:0;}
  .avatar{
    width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:14px; letter-spacing:.5px;
  }
  .team-badge{
    position:absolute; bottom:-3px; right:-3px; width:20px; height:20px; border-radius:50%;
    background:#0E1626; border:2px solid #0E1626; object-fit:contain;
  }
  .mini-logo{width:16px; height:16px; border-radius:50%; vertical-align:-3px; margin-right:4px; object-fit:contain;}
  .prow .pinfo{flex:1; min-width:0;}
  .prow .pname{font-weight:700; font-size:15px;}
  .prow .pmeta{font-size:12px; color:var(--text-faint); margin-top:1px;}
  /* What the other providers say. Muted by default; the wide variant marks a
     player the sources genuinely disagree about, which is the whole reason
     this is on the row rather than behind a click. */
  .prow .spread{
    margin-left:6px; padding-left:6px; border-left:1px solid var(--line);
    color:var(--text-faint);
  }
  .prow .spread.wide{color:var(--orange); font-weight:700;}
  .prow .draftedto{font-size:12px; color:var(--gold); margin-top:1px; font-weight:700;}
  .prow button{padding:7px 14px; font-size:12.5px; flex-shrink:0;}

  .tier1{border-left-color:var(--gold);}
  .tier2{border-left-color:var(--green);}
  .tier3{border-left-color:var(--blue);}
  .tier4{border-left-color:var(--orange);}
  .tier5{border-left-color:var(--gray);}

  .teams-list{max-height:760px; overflow-y:auto; display:flex; flex-direction:column; gap:10px;}
  .team-card{
    background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:10px 12px;
  }
  .team-card.onclock{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset;}
  .team-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
  .team-name{font-weight:800; font-size:14.5px;}
  .team-count{font-size:11px; color:var(--text-faint);}
  .slot-row{display:flex; justify-content:space-between; font-size:12.5px; padding:2px 0; gap:8px;}
  .slot-row .slot-label{color:var(--text-faint); min-width:44px;}
  .slot-row .slot-player{flex:1; text-align:right; color:var(--text);}
  .slot-row .slot-empty{color:var(--text-faint); font-style:italic;}

  .empty-msg{color:var(--text-faint); font-size:13px; text-align:center; padding:30px 0;}
  .done-banner{
    background:var(--green); color:var(--green-ink); padding:14px; border-radius:8px;
    text-align:center; font-weight:800; margin-bottom:14px;
  }
  ::-webkit-scrollbar{width:8px;}
  ::-webkit-scrollbar-thumb{background:var(--line); border-radius:8px;}

  /* ---------- League setup modal ---------- */
  .overlay{
    position:fixed; inset:0; background:rgba(6,10,18,.72);
    display:flex; align-items:flex-start; justify-content:center;
    padding:40px 20px; overflow-y:auto; z-index:50;
  }
  .overlay[hidden]{display:none;}
  .modal{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:20px 22px; width:100%; max-width:460px; box-shadow:0 18px 50px rgba(0,0,0,.5);
  }
  .modal h2{font-size:15px; letter-spacing:.5px; text-transform:uppercase; color:var(--text-dim); margin:0 0 6px;}
  .setup-hint{margin:0 0 14px; font-size:12px; color:var(--text-faint);}
  .setup-locked{
    margin:0 0 14px; font-size:12px; line-height:1.5; color:var(--gold);
    background:rgba(245,198,75,.08); border:1px solid rgba(245,198,75,.3);
    border-radius:8px; padding:9px 11px;
  }
  .setup-teams{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
  .setup-row{display:flex; align-items:center; gap:7px;}
  .setup-num{
    width:22px; text-align:right; font-size:12px; font-weight:800;
    color:var(--text-faint); flex-shrink:0;
  }
  .setup-row input{
    flex:1; min-width:0; background:var(--panel2); border:1px solid var(--line);
    color:var(--text); border-radius:7px; padding:7px 10px; font-size:14px;
    font-family:inherit;
  }
  .setup-row input:focus{outline:none; border-color:var(--accent);}
  .row-btn{
    background:var(--panel2); border:1px solid var(--line); color:var(--text-dim);
    border-radius:6px; width:26px; height:30px; font-size:13px; cursor:pointer;
    flex-shrink:0; padding:0; line-height:1;
  }
  .row-btn:hover:not(:disabled){border-color:var(--accent); color:var(--text);}
  .row-btn:disabled{opacity:.3; cursor:default;}
  .row-btn.remove:hover:not(:disabled){border-color:#E5534B; color:#E5534B;}
  .setup-tools{display:flex; align-items:center; gap:8px; margin-bottom:16px; flex-wrap:wrap;}
  .setup-count{font-size:12px; color:var(--text-faint); margin-left:auto;}
  .setup-footer{display:flex; align-items:center; gap:8px; justify-content:flex-end;}
  .setup-error{margin-right:auto; font-size:12px; color:#E5534B;}
  .modal button{
    background:var(--panel2); border:1px solid var(--line); color:var(--text);
    border-radius:7px; padding:8px 14px; font-size:13px; font-weight:600;
    cursor:pointer; font-family:inherit;
  }
  .modal button:hover:not(:disabled){border-color:var(--accent);}
  .modal button:disabled{opacity:.4; cursor:default;}
  .modal button.primary{background:var(--accent); color:var(--gold-ink); border-color:var(--accent);}

  /* ---------- Out-of-order assign menu ---------- */
  .assign-menu{
    position:fixed; z-index:60; min-width:210px; max-height:60vh; overflow-y:auto;
    background:var(--panel); border:1px solid var(--line); border-radius:9px;
    box-shadow:0 14px 40px rgba(0,0,0,.55); padding:5px;
  }
  .assign-menu[hidden]{display:none;}
  .assign-head{
    font-size:10px; letter-spacing:.8px; text-transform:uppercase;
    color:var(--text-faint); padding:6px 9px 7px; border-bottom:1px solid var(--line);
    margin-bottom:4px;
  }
  .assign-head b{display:block; color:var(--text-dim); font-size:12px; letter-spacing:0; text-transform:none; margin-top:2px;}
  .assign-item{
    display:flex; justify-content:space-between; align-items:baseline; gap:10px;
    width:100%; text-align:left; background:none; border:0; color:var(--text);
    padding:6px 9px; border-radius:6px; font-size:13px; cursor:pointer;
    font-family:inherit;
  }
  .assign-item:hover:not(:disabled), .assign-item:focus-visible{background:var(--panel2); outline:none;}
  .assign-item:disabled{opacity:.4; cursor:default;}
  .assign-slot{font-size:11px; color:var(--text-faint); white-space:nowrap;}
  .prow .assign-btn{
    background:var(--panel2); border:1px solid var(--line); color:var(--text-dim);
    border-radius:6px; padding:6px 8px; font-size:12px; cursor:pointer;
    flex-shrink:0; font-family:inherit; line-height:1;
  }
  .prow .assign-btn:hover{border-color:var(--accent); color:var(--text);}

  /* ---------- Keepers ---------- */
  .keeper-list{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
  .keeper-empty{font-size:12px; color:var(--text-faint); font-style:italic; padding:4px 0;}
  .keeper-row{
    display:flex; align-items:center; gap:9px; background:var(--panel2);
    border:1px solid var(--line); border-radius:7px; padding:7px 10px; font-size:13px;
  }
  .keeper-row .k-team{font-weight:700; white-space:nowrap;}
  .keeper-row .k-player{flex:1; min-width:0; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .keeper-row .k-round{font-size:11px; color:var(--text-faint); white-space:nowrap;}
  .keeper-add{display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap;}
  .keeper-add select{
    flex:1; min-width:0; background:var(--panel2); border:1px solid var(--line);
    color:var(--text); border-radius:7px; padding:7px 8px; font-size:13px; font-family:inherit;
  }
  .keeper-add #keeperPlayer{flex:2.2;}
  .keeper-add select:focus{outline:none; border-color:var(--accent);}

  /* ---------- Scoring + roster slot config ---------- */
  .setup-sub{
    font-size:11px; letter-spacing:.8px; text-transform:uppercase;
    color:var(--text-faint); margin:18px 0 8px; padding-top:14px;
    border-top:1px solid var(--line);
  }
  .setup-select{
    width:100%; background:var(--panel2); border:1px solid var(--line);
    color:var(--text); border-radius:7px; padding:8px 10px; font-size:13px;
    font-family:inherit;
  }
  .setup-select:focus{outline:none; border-color:var(--accent);}
  .slot-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:7px;}
  .slot-cell{display:flex; align-items:center; gap:6px;}
  .slot-cell label{font-size:12px; color:var(--text-dim); flex:1; min-width:0;}
  .slot-cell input{
    width:46px; background:var(--panel2); border:1px solid var(--line);
    color:var(--text); border-radius:6px; padding:5px 6px; font-size:13px;
    text-align:center; font-family:inherit;
  }
  .slot-cell input:focus{outline:none; border-color:var(--accent);}
  .slot-cell input:disabled{opacity:.4;}

  /* ---------- Import rankings ---------- */
  .modal-wide{max-width:660px;}
  .import-steps{
    display:flex; gap:6px; list-style:none; margin:0 0 16px; padding:0;
    font-size:11px; letter-spacing:.6px; text-transform:uppercase; font-weight:700;
    counter-reset:step;
  }
  .import-steps li{
    flex:1; color:var(--text-faint); border-top:2px solid var(--line);
    padding-top:7px; counter-increment:step;
  }
  .import-steps li::before{content:counter(step) ". ";}
  .import-steps li.active{color:var(--accent); border-top-color:var(--accent);}
  .import-steps li.done{color:var(--text-dim); border-top-color:var(--text-faint);}

  .import-fields{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px;}
  .import-fields label{
    flex:1; min-width:180px; display:flex; flex-direction:column; gap:5px;
    font-size:12px; color:var(--text-dim);
  }
  .import-fields input, .import-fields select, .import-step textarea{
    background:var(--panel2); border:1px solid var(--line); color:var(--text);
    border-radius:7px; padding:8px 10px; font-size:13px; font-family:inherit; width:100%;
  }
  .import-step textarea{
    /* Ranking pastes are column-aligned; a proportional font hides a bad
       column split that monospace makes obvious. */
    font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:12px;
    line-height:1.5; resize:vertical; margin-bottom:12px;
  }
  .import-fields input:focus, .import-fields select:focus, .import-step textarea:focus{
    outline:none; border-color:var(--accent);
  }
  .import-label{display:block; font-size:12px; color:var(--text-dim); margin-bottom:5px;}
  .import-file{margin-bottom:14px;}
  .import-file input[type=file]{font-size:12px; color:var(--text-dim); font-family:inherit;}

  .import-help{
    border:1px solid var(--line); border-radius:8px; padding:9px 11px;
    background:var(--panel2); font-size:12px;
  }
  .import-help summary{cursor:pointer; color:var(--text-dim); font-weight:600;}
  .import-help-body{margin-top:10px; color:var(--text-faint); line-height:1.55;}
  .import-help-body h4{margin:12px 0 4px; font-size:12px; color:var(--text-dim);}
  .import-help-body ul{margin:0; padding-left:18px;}
  .import-help-body li{margin-bottom:3px;}
  .import-why{margin:0 0 4px; padding-bottom:9px; border-bottom:1px solid var(--line);}

  .import-list{display:flex; flex-direction:column; gap:6px;}
  .imp-row{
    display:flex; align-items:center; gap:9px; background:var(--panel2);
    border:1px solid var(--line); border-radius:7px; padding:7px 10px; font-size:13px;
  }
  .imp-name{font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .imp-meta{margin-left:auto; font-size:11px; color:var(--text-faint); white-space:nowrap;}
  .import-custom{margin-top:10px; font-size:12px;}
  .import-custom summary{cursor:pointer; color:var(--text-dim); margin-bottom:6px;}
  .import-custom .imp-row{margin-bottom:5px;}

  .import-colmap{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
  .colmap-cell{display:flex; flex-direction:column; gap:4px; flex:1; min-width:120px;}
  .colmap-cell span{
    font-size:11px; color:var(--text-faint); overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap;
  }
  .colmap-cell select{
    background:var(--panel2); border:1px solid var(--line); color:var(--text);
    border-radius:7px; padding:6px 8px; font-size:12px; font-family:inherit;
  }
  .import-preview{max-height:300px; overflow:auto;}
  .preview-table{width:100%; border-collapse:collapse; font-size:12px;}
  .preview-table th{
    text-align:left; font-size:10px; letter-spacing:.7px; text-transform:uppercase;
    color:var(--text-faint); padding:5px 8px; border-bottom:1px solid var(--line);
    position:sticky; top:0; background:var(--panel);
  }
  .preview-table td{padding:5px 8px; border-bottom:1px solid var(--line); color:var(--text-dim);}

  .import-bulk{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px;}
  .import-bulk .setup-hint{margin:0; flex:1 1 100%;}
  .import-unmatched{max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:8px;}
  .um-row{background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:9px 11px;}
  .um-head{display:flex; align-items:baseline; gap:8px; margin-bottom:7px; flex-wrap:wrap;}
  .um-rank{font-size:11px; font-weight:800; color:var(--text-faint);}
  .um-meta{font-size:11px; color:var(--text-faint); margin-left:auto;}
  .um-row select{
    background:var(--panel); border:1px solid var(--line); color:var(--text);
    border-radius:7px; padding:6px 9px; font-size:12.5px; font-family:inherit; width:100%;
  }
  .um-row select:focus{outline:none; border-color:var(--accent);}
  .um-new{display:flex; gap:7px; margin-top:7px;}
  .um-new[hidden]{display:none;}
  .um-new select{width:auto; flex:1;}