/* Top 25: a ranked list per platform owns the screen. Candidates and the
   rotation log sit below it. The list lays itself out by the card's width,
   not the window's, so it reads the same with or without the sidebar. */

.wl { container: wl / inline-size; display: grid; gap: 20px; }
.wl .section { margin-top: 0; }
.wl-lower { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@container wl (min-width: 1000px) { .wl-lower { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); } }

/* A button that reads as a link, for the one jump in the page deck. */
.wl-link {
  appearance: none; border: 0; padding: 0; background: none; cursor: pointer; font: inherit; color: var(--ink);
  font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: text-decoration-color var(--duration-quick) var(--ease-out);
}
.wl-link:hover { text-decoration-color: currentColor; }
@media (pointer: coarse), (max-width: 960px) { .wl-link { min-height: 44px; } }

/* ---------- Hero ---------- */
.wl-board { --pad: 24px; container: board / inline-size; padding-bottom: 0; }
@media (max-width: 720px) { .wl-board { --pad: 18px; } }
.wl-board-head { justify-content: flex-start; }
.wl-board-head h2 { margin-right: 6px; }
.wl-board-head .push { margin-left: auto; }
.wl-board-head .t-tab .mono-in, .wl-board-head .t-tab .brand-ic { margin-right: 1px; }
.wl-board .form { margin-bottom: 16px; }
@container board (max-width: 520px) {
  .wl-board-head .t-tabs { order: 3; display: flex; width: 100%; }
  .wl-board-head .t-tab { flex: 1 1 0; justify-content: center; }
}

/* Summary: the state of this list in 4 numbers. */
.wl-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 28px;
  margin: 0 0 20px; padding: 16px 20px 18px; border-radius: var(--r-md); background: var(--sunken);
}
.wl-stats > div { display: grid; gap: 4px; align-content: start; min-width: 0; }
.wl-stats dt { font-size: 14px; color: var(--ink-2); }
/* The font shorthand resets figures, so tabular figures are set again after it. */
.wl-stats dd { display: flex; align-items: baseline; gap: 6px; font: 600 22px/1.25 var(--font); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.015em; }
.wl-stats dd .ic { align-self: center; }
.wl-stats dd .wl-of { font: 500 15px/1 var(--font); font-variant-numeric: tabular-nums lining-nums; color: var(--ink-3); letter-spacing: 0; }
.wl-stats .wl-warn dd { color: var(--amber-ink); }
.wl-note { font-size: 14px; color: var(--ink-2); }
.wl-slots { display: flex; gap: 2px; height: 12px; margin-top: 4px; }
.wl-slots i { flex: 1 1 0; max-width: 5px; border-radius: 1.5px; background: var(--line-strong); }
.wl-slots i.on { background: var(--ink-2); }
@container board (max-width: 820px) { .wl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container board (max-width: 360px) { .wl-stats { padding: 14px 16px 16px; gap: 14px 16px; } }

/* ---------- Leaderboard ----------
   One grid, 3 layouts. Wide: everything on one line. Medium: notes drop to a
   second line. Narrow: each name becomes a small card with labelled numbers. */
.wl-cols, .wl-row {
  display: grid; column-gap: 14px; align-items: center;
  grid-template-columns: 24px minmax(180px, 1.5fr) 128px 104px 92px 88px 108px minmax(120px, 1fr) minmax(140px, 1.2fr) 80px;
  grid-template-areas: "rank who type imp eb pv re score notes act";
}
.wl-cols { padding: 0 0 10px; align-items: end; font-size: 14px; line-height: 1.3; font-weight: 500; color: var(--ink-3); }
.wl-cols .wl-r { text-align: right; }
.wlc-rank { grid-area: rank; text-align: right; } .wlc-who { grid-area: who; } .wlc-type { grid-area: type; padding-left: 8px; } .wlc-imp { grid-area: imp; } .wlc-eb { grid-area: eb; padding-right: 8px; } .wlc-pv { grid-area: pv; padding-right: 8px; }
.wlc-re { grid-area: re; padding-right: 8px; } .wlc-score { grid-area: score; } .wlc-notes { grid-area: notes; padding-left: 8px; } .wlc-act { grid-area: act; }

.wl-row { padding: 10px 0; border-top: var(--hair) solid var(--line-strong); }
.wl-rank { grid-area: rank; text-align: right; color: var(--ink-3); font-weight: 500; }
.wl-who { grid-area: who; display: flex; align-items: center; gap: 12px; min-width: 0; }
.wl-id { display: grid; gap: 1px; min-width: 0; }
.wl-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-name a { text-decoration-color: transparent; }
.wl-name a:hover { text-decoration-color: currentColor; }
.wl-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 14px; color: var(--ink-3); }
.wl-sub .tag { height: 22px; padding: 0 7px 0 6px; }
.wl-flag { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-weight: 500; }
.wl-flag .ic { color: var(--primary); }

/* Type: who the account is to him. A field that saves on change. */
.wl-type { grid-area: type; min-width: 0; }
.wl-list select.wl-sel {
  width: 100%; text-align: left; padding-right: 26px; appearance: none; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8f9c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center;
}
/* Importance: 3 rising bars and a word. High takes the accent, and the word carries it without the colour. */
.wl-imp { grid-area: imp; min-width: 0; }
.wl-imp-v { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.wl-lvl { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; flex: none; }
.wl-lvl i { width: 4px; border-radius: 1.5px; background: var(--line-strong); }
.wl-lvl i:nth-child(1) { height: 6px; } .wl-lvl i:nth-child(2) { height: 10px; } .wl-lvl i:nth-child(3) { height: 14px; }
.wl-lvl i.on { background: var(--ink-2); }
.wl-imp.wl-high .wl-imp-v { color: var(--ink); font-weight: 600; }
.wl-imp.wl-high .wl-lvl i.on { background: var(--primary); }
.wl-imp.wl-low .wl-imp-v { color: var(--ink-3); }
.wl-imp.wl-low .wl-lvl i.on { background: var(--ink-3); }

/* Above the list: what is in it, and how it is sorted. */
.wl-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin: 0 0 16px; }
.wl-tools-sum { font-size: 14px; color: var(--ink-2); min-width: 0; }
.wl-tools-sort { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wl-tools-k { font-size: 14px; color: var(--ink-3); white-space: nowrap; }
@container board (max-width: 520px) {
  .wl-tools-sort { width: 100%; flex-wrap: wrap; }
  .wl-tools-sort .t-tabs { display: flex; width: 100%; }
  .wl-tools-sort .t-tab { flex: 1 1 0; justify-content: center; }
}

.wl-nums { display: contents; }
.wl-eb { grid-area: eb; } .wl-pv { grid-area: pv; } .wl-re { grid-area: re; }
.wl-n { min-width: 0; text-align: right; }
.wl-k { display: none; }
.wl-v { display: block; padding-right: 8px; }
.wl-list .cell { width: 100%; }
.wl-list .cell.text { min-width: 0; }

.wl-score { grid-area: score; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; }
.wl-sv { min-width: 4ch; text-align: right; font-weight: 600; }
.wl-bar { height: 6px; border-radius: 3px; background: var(--sunken); box-shadow: inset 0 0 0 var(--hair) var(--line); overflow: hidden; }
.wl-bar i { display: block; height: 100%; border-radius: 3px; background: var(--primary); transform-origin: left; }
.wl-row.wl-risk .wl-bar i { background: var(--amber); }
main.enter .wl-bar i { animation: grow var(--duration-very-slow) var(--ease-smooth-out) var(--duration-fast) both; }
.wl-list.swap .wl-bar i { animation: grow var(--duration-medium) var(--ease-smooth-out) both; }

.wl-notes { grid-area: notes; min-width: 0; }
.wl-act { grid-area: act; display: flex; justify-content: flex-end; gap: 4px; }
.wl-list .btn.quiet { color: var(--ink-3); }
.wl-list .btn.quiet:hover { color: var(--ink); }
.wl-list .wl-pin[aria-pressed="true"] { background: var(--primary-wash); color: var(--primary-ink); box-shadow: none; }
.wl-list .wl-pin[aria-pressed="true"]:hover { background: color-mix(in oklch, var(--primary-wash) 80%, var(--primary)); }
.wl-err { grid-column: 1 / -1; padding: 6px 0 2px; }
/* While a remove waits for its confirm, the button takes the cell beside it so its words fit. */
.wl-row.wl-confirming .wl-act { grid-column: notes-start / act-end; }
.wl-row.wl-confirming .wl-notes { visibility: hidden; }
/* In the wide layout the Notes header explains the column, so empty notes stay quiet until you reach for the row. */
@media (hover: hover) {
  @container board (min-width: 1200px) {
    .wl-row:not(:hover) .cell.text:not(:focus)::placeholder { color: transparent; }
  }
}

.wl-empty { padding-bottom: 4px; }
.wl-foot {
  display: flex; gap: 10px; align-items: flex-start; margin: 20px calc(var(--pad) * -1) 0; padding: 14px var(--pad) 18px;
  border-top: var(--hair) solid var(--line-strong); font-size: 14px; color: var(--ink-2);
}
.wl-foot > .ic { flex: none; margin-top: 2px; color: var(--ink-3); }
.wl-foot b { color: var(--ink); font-weight: 600; }
.wl-list + .wl-foot { margin-top: 0; }
/* How the score works: 1 line on the model, then the 3 inputs side by side. */
.wl-how { display: grid; gap: 10px; min-width: 0; max-width: 1080px; }
.wl-how-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 24px; }
.wl-how-list li { display: grid; gap: 2px; align-content: start; }
.wl-how-k { color: var(--ink); font-weight: 600; }
@container board (max-width: 759px) { .wl-how-list { grid-template-columns: minmax(0, 1fr); gap: 10px; } }

/* Medium: notes move under the name. */
@container board (max-width: 1199px) {
  .wl-cols, .wl-row {
    grid-template-columns: 24px minmax(0, 1fr) 128px 104px 88px 84px 104px 112px 80px;
    grid-template-areas: "rank who type imp eb pv re score act" ". notes notes notes notes notes notes notes notes";
  }
  .wl-cols { grid-template-areas: "rank who type imp eb pv re score act"; }
  .wlc-notes { display: none; }
  .wl-row { row-gap: 0; padding-bottom: 6px; }
  .wl-notes { padding-left: 44px; }
  .wl-row.wl-confirming .wl-act { grid-column: score-start / act-end; }
  .wl-row.wl-confirming .wl-notes { visibility: visible; }
  .wl-row.wl-confirming .wl-score { visibility: hidden; }
}
/* The compact note line is for a mouse on a wide window only. Touch and narrow windows keep 44px. */
@media (pointer: fine) and (min-width: 961px) {
  @container board (max-width: 1199px) { .wl-notes .cell.text { min-height: 30px; padding: 3px 8px; font-size: 14px; } }
}

/* Narrow: one small card per name. Numbers get their labels back. */
@container board (max-width: 999px) {
  .wl-cols { display: none; }
  .wl-row {
    grid-template-columns: 20px minmax(0, 1fr) minmax(0, 1fr) auto; column-gap: 10px; row-gap: 12px; padding: 16px 0;
    grid-template-areas: "rank who who act" "type type imp imp" "score score score score" "nums nums nums nums" "notes notes notes notes";
  }
  .wl-type, .wl-imp { display: grid; gap: 4px; align-content: start; }
  .wl-imp-v { min-height: 44px; }
  .wl-list select.wl-sel { background-position: right 10px center; padding-right: 32px; }
  .wl-row:first-child { border-top: 0; padding-top: 4px; }
  .wl-rank { align-self: center; }
  /* Labels share 1 row and values share the next, so a label that wraps keeps the values in line. */
  .wl-nums { display: grid; grid-area: nums; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 4px 8px; }
  .wl-n { grid-area: auto; grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 4px; text-align: left; }
  .wl-k { display: block; align-self: end; font-size: 14px; line-height: 1.3; color: var(--ink-3); overflow-wrap: anywhere; }
  .wl-score .wl-k { align-self: center; white-space: nowrap; }
  .wl-v { min-height: 44px; display: flex; align-items: center; padding: 0 2px; font-weight: 500; }
  .wl-list .cell, .wl-list .cell.text { min-height: 44px; text-align: left; padding: 8px 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); border-radius: 10px; }
  .wl-list .cell:focus-visible { box-shadow: inset 0 0 0 1.5px var(--primary), 0 0 0 3px var(--primary-wash); }
  .wl-row .cell.text::placeholder { color: var(--ink-3); }
  .wl-score { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; }
  .wl-score .wl-k { display: block; }
  .wl-notes { padding-left: 0; }
  .wl-row.wl-confirming .wl-act { grid-area: act; }
  .wl-row.wl-confirming .wl-score { visibility: visible; }
}
@media (pointer: coarse) { .wl-list .cell { font-size: 16px; } }
/* 44px targets on touch and narrow windows. app.css means to do this, but its base input and .cell
   rules come later in that file and win, so this tab sets it again for its own fields. */
@media (pointer: coarse), (max-width: 960px) {
  .wl-list .cell, .wl-board .form input, .wl-board .form select, .wl-board .form textarea { min-height: 44px; }
}

/* ---------- Candidates: the people to bring in next ---------- */
.wl-stack { display: grid; gap: 2px; }
.wl-cand-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr)); gap: 12px; }
.wl-cand { display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; padding: 16px; border-radius: var(--r-md); background: var(--sunken); align-content: start; }
.wl-cand-top { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; }
.wl-cand .av.c4 { --av-bg: var(--surface); box-shadow: var(--ring); }
.wl-cand-id { display: grid; gap: 1px; min-width: 0; }
.wl-cand-name { font-weight: 600; }
.wl-cand-head { font-size: 14px; color: var(--ink-2); }
.wl-cand-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.wl-cand-facts .tag { background: var(--surface); box-shadow: var(--ring); }
.wl-cand-fit { color: var(--ink-2); }
.wl-cand-fit b { color: var(--ink); font-weight: 600; }
.wl-cand .btn { justify-self: start; }
.wl-cand .btn:not(:disabled) { background: var(--surface); }
.wl-cand .btn:not(:disabled):hover { background: color-mix(in oklch, var(--surface) 92%, var(--ink)); }
.wl-cands:focus { outline: none; }

/* ---------- Rotation log ---------- */
.wl-rot-list { display: grid; }
.wl-rot { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; padding: 14px 0; border-top: var(--hair) solid var(--line-strong); }
.wl-rot:first-child { border-top: 0; padding-top: 2px; }
.wl-rot:last-child { padding-bottom: 0; }
.wl-rot .tag { justify-self: start; }
.wl-rot-body { display: grid; gap: 2px; min-width: 0; }
.wl-rot-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.wl-rot-p { display: inline-grid; place-items: center; width: 16px; color: var(--ink-2); }
.wl-rot-why { font-size: 14px; color: var(--ink-2); }
.wl-rot-date { font-size: 14px; color: var(--ink-3); padding-top: 2px; white-space: nowrap; }
@container wl (max-width: 420px) {
  .wl-rot { grid-template-columns: minmax(0, 1fr) auto; }
  .wl-rot .tag { grid-column: 1; grid-row: 1; }
  .wl-rot-date { grid-column: 2; grid-row: 1; }
  .wl-rot-body { grid-column: 1 / -1; }
}