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

  .panel{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:18px 20px; margin-bottom:18px;
  }
  .panel h2{font-size:14px; letter-spacing:.5px; text-transform:uppercase; color:var(--text-dim); margin:0 0 10px;}
  .hint{font-size:12px; color:var(--text-faint); line-height:1.55; margin:0 0 12px;}
  .hint .warn{color:var(--orange); font-weight:600;}
  .empty-msg{font-size:13px; color:var(--text-faint); font-style:italic; padding:14px 2px;}

  button{
    font-family:inherit; cursor:pointer; border-radius:8px; border:1px solid var(--line);
    background:var(--panel2); color:var(--text); padding:8px 13px; font-size:13px; font-weight:600;
  }
  button:hover:not(:disabled){border-color:var(--accent);}
  button:disabled{opacity:.35; cursor:not-allowed;}
  button.primary{background:var(--gold); color:var(--gold-ink); border-color:var(--gold);}
  button.danger{background:transparent; color:#F09595; border-color:#5C2E2E;}
  select, input[type=text], input[type=number]{
    background:var(--panel2); border:1px solid var(--line); color:var(--text);
    border-radius:8px; padding:8px 10px; font-size:13px; font-family:inherit;
  }
  select:focus, input:focus{outline:none; border-color:var(--accent);}

  /* ---------- Empty state ---------- */
  .empty-state p{max-width:620px; font-size:14px; color:var(--text-dim); line-height:1.6;}
  .seed-row{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:16px 0 10px;}
  .seed-row label{font-size:13px; color:var(--text-dim);}

  /* ---------- Board chrome ---------- */
  .board-head{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:10px;}
  .board-name{display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--text-dim);}
  .board-name input{min-width:220px;}
  .board-actions{display:flex; gap:7px; margin-left:auto; flex-wrap:wrap;}

  .tier-editor{
    border:1px solid var(--line); border-radius:8px; background:var(--panel2);
    padding:10px 12px; margin-bottom:14px; font-size:13px;
  }
  .tier-editor summary{cursor:pointer; color:var(--text-dim); font-weight:700;}
  .tier-count{display:flex; align-items:center; gap:8px; margin:12px 0 10px; font-size:12px; color:var(--text-dim);}
  .tier-count input{width:64px; text-align:center;}
  .tier-list{display:flex; flex-direction:column; gap:6px;}
  .tier-row{display:flex; align-items:center; gap:8px;}
  .tier-row input{flex:1; min-width:0;}
  .tier-n{font-size:11px; color:var(--text-faint); white-space:nowrap; width:80px; text-align:right;}
  .tier-chip{
    width:26px; height:26px; border-radius:6px; display:flex; align-items:center;
    justify-content:center; font-weight:800; font-size:12px; flex-shrink:0;
  }

  /* Tier colours come from the shared tokens, so a board tier reads the same
     as a draft-room tier. */
  .t-gold{background:var(--gold); color:var(--gold-ink);}
  .t-green{background:var(--green); color:var(--green-ink);}
  .t-blue{background:var(--blue); color:var(--blue-ink);}
  .t-orange{background:var(--orange); color:var(--orange-ink);}
  .t-gray{background:var(--gray); color:var(--gray-ink);}

  .controls{display:flex; gap:10px; margin-bottom:12px; flex-wrap:wrap; align-items:center;}
  .controls input[type=text]{flex:1; min-width:180px;}
  .check{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-dim); white-space:nowrap;}
  .tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px;}
  .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);}
  .reorder-hint{margin-bottom:10px;}

  /* ---------- Rows ---------- */
  .board-list{max-height:660px; overflow-y:auto;}
  .brow{
    display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
    background:var(--panel2); margin-bottom:5px; border-left:4px solid transparent;
    border-top:2px solid transparent; border-bottom:2px solid transparent;
  }
  .brow.t-gold{border-left-color:var(--gold); background:var(--panel2);}
  .brow.t-green{border-left-color:var(--green);}
  .brow.t-blue{border-left-color:var(--blue);}
  .brow.t-orange{border-left-color:var(--orange);}
  .brow.t-gray{border-left-color:var(--gray);}
  /* The tier classes also paint chips, so reset the fill they would apply. */
  .brow[class*="t-"]{color:var(--text);}
  .brow.dragging{opacity:.4;}
  .brow.drop-above{border-top-color:var(--accent);}
  .brow.drop-below{border-bottom-color:var(--accent);}
  .brow.flag-never .bname{text-decoration:line-through; opacity:.7;}

  .grip{cursor:grab; color:var(--text-faint); font-size:14px; flex-shrink:0; letter-spacing:-2px;}
  .brank{width:30px; text-align:center; font-weight:800; font-size:13px; color:var(--text-faint); flex-shrink:0;}
  .binfo{flex:1; min-width:0; display:flex; flex-direction:column;}
  .bname{font-weight:700; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .bmeta{font-size:11.5px; color:var(--text-faint);}
  .btier{flex-shrink:0; padding:6px 8px; font-size:12px; max-width:140px;}
  .bflags{display:flex; gap:4px; flex-shrink:0;}
  .flag-btn{
    padding:5px 9px; font-size:11px; font-weight:700; border-radius:6px;
    background:transparent; color:var(--text-faint); border:1px solid var(--line);
  }
  .flag-btn.on[data-flag=target]{background:var(--green); color:var(--green-ink); border-color:var(--green);}
  .flag-btn.on[data-flag=avoid]{background:var(--orange); color:var(--orange-ink); border-color:var(--orange);}
  .flag-btn.on[data-flag=never]{background:#E5534B; color:#2A0A08; border-color:#E5534B;}
  .bmove{display:flex; gap:4px; flex-shrink:0;}
  .row-btn{
    background:var(--panel); border:1px solid var(--line); color:var(--text-dim);
    border-radius:6px; width:28px; height:30px; font-size:13px; padding:0; line-height:1;
  }
  .avatar-wrap{position:relative; width:34px; height:34px; flex-shrink:0;}
  .avatar{
    width:34px; height:34px; border-radius:50%; display:flex; align-items:center;
    justify-content:center; font-weight:800; font-size:12px;
  }
  .team-badge{
    position:absolute; bottom:-2px; right:-2px; width:16px; height:16px; border-radius:50%;
    background:#0E1626; border:2px solid #0E1626; object-fit:contain;
  }

  @media (max-width:820px){
    .brow{flex-wrap:wrap;}
    .btier, .bflags, .bmove{margin-left:auto;}
  }

  /* ---------- The printed sheet ----------
     The artifact people actually want on draft night. Screen chrome is not
     just hidden but removed from flow, and the sheet goes back to black on
     white - a dark board would empty a colour cartridge for nothing. */
  .print-only{display:none;}
  @media print{
    :root{color-scheme:light;}
    body{background:#fff; color:#000;}
    .wrap{max-width:none; padding:0;}
    .brand, .panel, .empty-state{display:none !important;}
    .print-only{display:block;}
    .print-only h1{font-size:18pt; margin:0 0 2pt;}
    .p-sub{font-size:8pt; color:#444; margin:0 0 10pt;}
    .p-cols{column-count:3; column-gap:14pt;}
    /* Tiers must be allowed to break: the top tier can hold fifty players,
       and a block that size marked break-inside:avoid cannot fit a column at
       all - it gets pushed whole onto its own page, wasting most of it. Rows
       and headings are what must stay intact. */
    .p-tier{break-inside:auto; margin-bottom:9pt;}
    .p-tier h2{
      font-size:9pt; text-transform:uppercase; letter-spacing:.5pt;
      border-bottom:1pt solid #000; margin:0 0 3pt; padding-bottom:1pt;
      break-after:avoid; break-inside:avoid;
    }
    .p-tier ol{list-style:none; margin:0; padding:0;}
    .p-tier li{font-size:8.5pt; line-height:1.4; break-inside:avoid;}
    .p-rank{display:inline-block; width:20pt; color:#666; font-size:7.5pt;}
    .p-pos{color:#666; font-size:7pt;}
    .p-target{font-weight:700;}
    .p-never{text-decoration:line-through; color:#666;}
  }