/* ═══════════ HOT BOARDS · DASHBOARD COMPONENTS ═══════════
   Extracted verbatim from dashboard-wireframe.html.
   Depends on the design tokens in :root — copy those first. */

/* ───────────── 1. NAV / ENTITLEMENT GATE ───────────── */
.nav{background:linear-gradient(180deg,#181B21 0%,#141619 55%,#111316 100%);
  display:flex;flex-direction:column;overflow-y:auto;position:relative}
/* right edge reads as a lit seam, brightest where the brand sits */
.nav::after{content:'';position:absolute;top:0;right:0;bottom:0;width:1px;pointer-events:none;
  background:linear-gradient(180deg,rgba(216,174,110,.42),rgba(44,49,59,.9) 22%,rgba(44,49,59,.9))}
.brand{display:flex;align-items:center;gap:9px;padding:16px 16px 15px;position:relative}
.brand::after{content:'';position:absolute;left:16px;right:16px;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(216,174,110,.40),rgba(255,255,255,.05))}
.brand svg{width:24px;height:24px;flex:none}
.brand b{font-family:var(--font-d);font-size:15px;letter-spacing:.8px;font-weight:700}
.navsec{font-family:var(--font-m);font-size:9.5px;color:var(--txt4);letter-spacing:1.5px;
  text-transform:uppercase;padding:14px 16px 6px}

.row{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 18px;position:relative;
  transition:.13s;width:100%;text-align:left}
.row:hover{background:linear-gradient(90deg,rgba(255,255,255,.055),rgba(255,255,255,.012))}
/* skewed gold tick — same mark as the broadcast-window headers */
.row::before{content:'';position:absolute;left:4px;top:50%;width:4px;height:20px;border-radius:1px;
  transform:translateY(-50%) skewX(-11deg) scaleY(0);transform-origin:center;
  background:linear-gradient(180deg,var(--heat-hi),var(--heat-lo));
  box-shadow:0 0 12px rgba(216,174,110,.5);transition:transform .16s}
.row.active::before{transform:translateY(-50%) skewX(-11deg) scaleY(1)}
.row.active{background:linear-gradient(90deg,rgba(216,174,110,.11),rgba(216,174,110,.01) 72%),#1C1F26;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),inset 0 -1px 0 rgba(0,0,0,.4)}
.row .ic{width:17px;height:17px;flex:none;color:var(--heat-hi)}
.row .nm{display:block;font-family:var(--font-d);font-size:14.5px;letter-spacing:.4px;font-weight:600;
  line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt2)}
.row.active .nm{color:var(--txt)}
.row .sb{display:block;font-family:var(--font-m);font-size:9.5px;color:var(--txt4);margin-top:3px;
  letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .txtwrap{flex:1;min-width:0}
/* board count — same chamfer as the badges on the board */
.row .cnt{font-family:var(--font-m);font-size:10px;font-weight:700;color:var(--txt2);flex:none;
  padding:3px 8px;letter-spacing:.4px;
  background:linear-gradient(180deg,#262B33,#191D23);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}

/* not owned but buyable — the price is the pitch, so let it read */
.row.locked .ic{color:var(--txt4)}
.row.locked .nm{color:var(--txt3)}
.row.locked .sb{color:var(--heat)}
.row.locked:hover .nm{color:var(--txt2)}
.row.locked:hover .sb{color:var(--heat-hi)}
/* genuinely not shipped yet — recede, no price to sell */
.row.soon .ic{color:#4A4741}
.row.soon .nm{color:var(--txt4)}
.row.soon .sb{color:#59554F}
.row.soon:hover .nm{color:var(--txt3)}

.divider{height:1px;background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,.02));
  margin:10px 16px}
.addrow{margin-top:auto;padding:12px 14px 14px;position:relative}
.addrow::before{content:'';position:absolute;left:16px;right:16px;top:0;height:1px;
  background:linear-gradient(90deg,rgba(216,174,110,.32),rgba(255,255,255,.04))}
.addrow .row{padding:11px 14px;justify-content:center;gap:8px;
  background:linear-gradient(180deg,#241E13,#191510);
  box-shadow:inset 0 1px 0 rgba(216,174,110,.22),inset 0 0 0 1px rgba(216,174,110,.16);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.addrow .row:hover{background:linear-gradient(180deg,#33291A,#211B12);
  box-shadow:inset 0 1px 0 rgba(216,174,110,.34),inset 0 0 0 1px rgba(216,174,110,.30)}
.addrow .row::before{display:none}
.addrow .row .txtwrap{flex:0 1 auto}
.addrow .ic{width:15px;height:15px;color:var(--heat-hi)}
.addrow .nm{font-family:var(--font-d);font-size:12.5px;color:var(--heat-hi);font-weight:600;
  letter-spacing:1.1px;text-transform:uppercase}


/* ───────────── 2. WEEK TABS ───────────── */
/* week selector — chamfered broadcast tabs, same corner language as the row badges */
.weeks{display:flex;gap:6px;flex-wrap:wrap;margin:20px 0 6px;align-items:center}
.wk{font-family:var(--font-d);font-size:13px;font-weight:600;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--txt3);padding:9px 16px 8px;position:relative;
  white-space:nowrap;transition:.14s;
  background:linear-gradient(180deg,#22262E,#15181D);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 1px 3px rgba(0,0,0,.55);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.wk:hover{color:var(--txt);background:linear-gradient(180deg,#2B303A,#1B1F26)}
.wk.on{color:var(--on-heat);font-weight:700;
  background:linear-gradient(180deg,var(--heat-hi),var(--heat));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 10px rgba(182,138,78,.42)}
/* selected tab reads as a lit segment, not just a gold button */
.wk.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:rgba(21,17,10,.42)}

/* ───────────── 3. FILTER BAR ───────────── */
.fbar{display:flex;align-items:center;gap:8px;margin-top:18px;flex-wrap:wrap}
.bigsrch{display:flex;align-items:center;gap:9px;padding:10px 15px;flex:1;min-width:250px;
  background:linear-gradient(180deg,#1A1D23,#111419);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.045),
             0 1px 3px rgba(0,0,0,.5);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.bigsrch input{background:none;border:none;outline:none;color:var(--txt);font-family:var(--font-m);
  font-size:12px;width:100%}
.bigsrch input::placeholder{color:var(--txt4)}
.bigsrch svg{width:14px;height:14px;color:var(--txt3);flex:none}
/* filter chips — sized and cut to match the network badges in the rows */
.fchip{font-family:var(--font-m);font-size:10px;font-weight:700;color:var(--txt2);
  padding:9px 13px;letter-spacing:.9px;transition:.14s;white-space:nowrap;text-transform:uppercase;
  background:linear-gradient(180deg,#22262E,#171A20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 1px 3px rgba(0,0,0,.5);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.fchip:hover{color:var(--txt);background:linear-gradient(180deg,#2B303A,#1B1F26)}
.fchip.on{color:var(--on-heat);
  background:linear-gradient(180deg,var(--heat-hi),var(--heat));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 9px rgba(182,138,78,.38)}

/* ───────────── 4. SCHEDULE ROW ───────────── */
/* ---------- schedule row (seam blocks) ---------- */
.rw{display:grid;grid-template-columns:16px minmax(0,1fr) 120px 62px 62px 118px;
  align-items:center;gap:0 16px;padding:0 14px 0 0;height:54px;position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.003));
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(0,0,0,.60);
  transition:background .13s,box-shadow .13s}
.rw::after{content:'';position:absolute;right:200px;top:10px;bottom:10px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.10),transparent)}
.rw:hover{background:linear-gradient(180deg,rgba(216,174,110,.11),rgba(216,174,110,.012));
  box-shadow:inset 0 0 0 1px rgba(216,174,110,.18)}
/* left edge — one meaning, priority: built board beats marquee */
.rw .edge{height:100%;position:relative}
.rw.mq{background:linear-gradient(180deg,rgba(216,174,110,.055),rgba(255,255,255,.004))}
.rw.mq .edge::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--heat-hi),var(--heat-lo))}
.rw.isready .edge::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--grn);box-shadow:0 0 12px -1px var(--grn)}
.rw .match{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);
  align-items:center;gap:0}

/* team block — bounded color, reads on dark schools */
.blk{height:42px;border-radius:3px;display:grid;place-items:center;position:relative;
  background:var(--p);background-image:linear-gradient(150deg,rgba(255,255,255,.24),rgba(0,0,0,.34));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 0 0 1px rgba(255,255,255,.07),
             0 2px 6px rgba(0,0,0,.55);overflow:hidden}
.blk b{font-family:var(--font-d);font-size:21px;font-weight:600;letter-spacing:1.1px;color:#fff;
  line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.6);padding-bottom:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 22px)}
/* step down as the name gets long so nothing crowds the plate */
.blk[data-len="m"] b{font-size:19px;letter-spacing:.8px}
.blk[data-len="l"] b{font-size:17px;letter-spacing:.5px}
.blk[data-len="xl"] b{font-size:14.5px;letter-spacing:.3px}
.blk i{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:30px;height:2px;
  background:var(--red);border-radius:2px}
.blk s{position:absolute;top:0;left:0;font-family:var(--font-m);font-size:8px;font-weight:700;
  color:var(--on-heat);background:var(--heat-hi);padding:1.5px 4px 2px;line-height:1;
  text-decoration:none;border-bottom-right-radius:3px;letter-spacing:.2px}

/* team plate — angular broadcast chip */
.plate{position:relative;width:34px;height:28px;border-radius:2px;display:grid;place-items:center;
  background:linear-gradient(168deg,var(--p),var(--p));transform:skewX(-9deg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -2px 0 rgba(0,0,0,.38),
             0 2px 5px rgba(0,0,0,.55);overflow:hidden;flex:none}
.plate::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,0) 52%,rgba(0,0,0,.16))}
.plate i{font-family:var(--font-d);font-weight:700;font-size:12px;letter-spacing:.2px;line-height:1;
  color:var(--s);transform:skewX(9deg);font-style:normal;position:relative;z-index:1;
  text-shadow:0 1px 2px rgba(0,0,0,.45)}
.plate[data-l="4"] i{font-size:9.5px;letter-spacing:-.1px}
.plate.lg{width:52px;height:42px;border-radius:3px}
.plate.lg i{font-size:18px}
.plate.lg[data-l="4"] i{font-size:14px}

.rw .at3{justify-self:center;width:24px;height:24px;border-radius:50%;background:#0E1116;
  border:1px solid rgba(255,255,255,.15);display:grid;place-items:center;font-family:var(--font-m);
  font-size:7px;color:var(--txt3);letter-spacing:.8px;box-shadow:0 2px 6px rgba(0,0,0,.7)}
.rw .net{font-family:var(--font-m);font-size:9px;font-weight:700;letter-spacing:.8px;color:var(--txt2);
  text-align:center;padding:4px 0;border-radius:2px;
  background:linear-gradient(180deg,#22262E,#171A20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 1px 2px rgba(0,0,0,.5);
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}
.rw .tmz{font-family:var(--font-m);font-size:11.5px;color:var(--txt2);
  font-variant-numeric:tabular-nums;text-align:right;letter-spacing:.3px}
.rw .act{justify-self:end}
.rw .mini{font-family:var(--font-m);font-size:9.5px;letter-spacing:.8px;font-weight:700;padding:7px 12px;
  white-space:nowrap;transition:.14s;width:100%;text-align:center;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.mini.open{background:linear-gradient(180deg,var(--heat-hi),var(--heat));color:var(--on-heat);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 8px rgba(182,138,78,.4)}
.mini.build{background:linear-gradient(180deg,#262B33,#191D23);color:var(--txt2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 1px 3px rgba(0,0,0,.5)}
.rw:hover .mini.build{background:linear-gradient(180deg,#3A3120,#241E13);color:var(--heat-hi);
  box-shadow:inset 0 1px 0 rgba(216,174,110,.28),0 2px 8px rgba(0,0,0,.5)}
.mini.buy{background:linear-gradient(180deg,#1F232A,#15181D);color:var(--txt3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.rw:hover .mini.buy{color:var(--heat-hi);box-shadow:inset 0 1px 0 rgba(216,174,110,.25)}