/* ══════════════════════════════════════════════════════════════════════════════
   THE DESK KIT — the shared shell that turns a long Club page into a routed tool.
   Cam, 2026-09-29: "not just a long one page link but multiple pages… easy to
   navigate and find everything." The pattern is THE CUE's, generalised.

   Everything here is namespaced .dk-* and every colour falls back, so the kit can
   drop onto any surface in the estate without touching its own stylesheet.
   Grouped nav by THE JOB YOU ARE DOING, never by topic.
   ══════════════════════════════════════════════════════════════════════════════ */

:root{
  --dk-void:var(--void,#070606);
  --dk-ink:var(--ink,#100D0D);
  --dk-panel:var(--panel,#151111);
  --dk-panel2:var(--panel-2,#1A1514);
  --dk-line:var(--line,#2A211F);
  --dk-line2:var(--line-2,#3A2E2B);
  --dk-red:var(--red,#E2241F);
  --dk-red-hot:var(--red-bright,#FF3B30);
  --dk-green:var(--green,#5FBF7E);
  --dk-green-hot:var(--green-hot,#7FE3A0);
  --dk-green-deep:var(--green-deep,#2E7C4F);
  --dk-gold:var(--gold,#D8A24A);
  --dk-royal:var(--royal,#1E4FFF);
  --dk-royal-ice:var(--royal-ice,#8FB4FF);
  --dk-bone:var(--bone,#F4EFE9);
  --dk-smoke:var(--smoke,#CCC4BC);
  --dk-ash:var(--ash,#8C837C);
  --dk-ash-dim:var(--ash-dim,#5C5450);
  --dk-display:var(--font-display,'Anton','Arial Narrow',sans-serif);
  --dk-body:var(--font-body,'Inter',system-ui,sans-serif);
  --dk-mono:var(--font-mono,'Space Mono',ui-monospace,monospace);
  --dk-chrome:var(--chrome,linear-gradient(178deg,#ECEEF2 8%,#9AA0A8 42%,#565A60 55%,#ECEEF2 92%));
  --dk-bar:58px;
}

/* the page's own sticky header is replaced by the desk bar — it stays in the DOM
   so the page's own JS keeps writing to its chip, which we mirror */
body.dk-on .top{display:none!important}
body.dk-on{padding-top:0}

/* ── the bar ───────────────────────────────────────────────────────────── */
.dk-bar{position:sticky;top:0;z-index:400;background:rgba(7,6,6,.95);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--dk-line);}
.dk-bar-in{max-width:1000px;margin:0 auto;padding:9px 14px;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.dk-home{display:flex;align-items:center;gap:9px;text-decoration:none;min-width:0}
.dk-home video,.dk-home img{width:30px;height:30px;border-radius:4px;object-fit:cover;flex:none}
.dk-home .t{font-family:var(--dk-display);font-size:14.5px;letter-spacing:.04em;color:var(--dk-bone);line-height:1;white-space:nowrap}
.dk-home .t em{font-style:normal;color:var(--dk-red)}
.dk-home .s{font-family:var(--dk-mono);font-size:8px;letter-spacing:.15em;color:var(--dk-ash);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-state{font-family:var(--dk-mono);font-size:8.5px;letter-spacing:.13em;padding:6px 9px;border:1px solid var(--dk-line2);
  border-radius:3px;color:var(--dk-ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;justify-self:center}
.dk-state.on{border-color:var(--dk-green-deep);color:var(--dk-green-hot)}
.dk-state.act{border-color:var(--dk-red);color:var(--dk-red-hot)}
.dk-btns{display:flex;gap:6px;align-items:center}
.dk-btn{font-family:var(--dk-mono);font-size:9px;letter-spacing:.11em;padding:8px 10px;border-radius:3px;
  border:1px solid var(--dk-line2);background:var(--dk-panel);color:var(--dk-smoke);cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.dk-btn:hover{border-color:var(--dk-line2);color:var(--dk-bone)}
.dk-btn.red{border-color:var(--dk-red);background:rgba(226,36,31,.1);color:var(--dk-red-hot)}
.dk-w{display:inline}

/* ── the nav ───────────────────────────────────────────────────────────── */
.dk-nav{position:sticky;top:var(--dk-bar);z-index:380;background:rgba(7,6,6,.93);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--dk-line);overflow:hidden}
.dk-nav-in{max-width:1000px;margin:0 auto;padding:8px 14px;display:flex;gap:6px;align-items:center;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.dk-nav-in::-webkit-scrollbar{display:none}
.dk-grp{display:flex;gap:5px;align-items:center;flex:none;padding-right:6px;border-right:1px solid var(--dk-line);margin-right:2px}
.dk-grp:last-child{border-right:0}
.dk-grp-l{font-family:var(--dk-mono);font-size:7.5px;letter-spacing:.16em;color:var(--dk-ash-dim);flex:none;padding-right:2px}
.dk-pill{font-family:var(--dk-mono);font-size:9px;letter-spacing:.09em;padding:8px 10px;border-radius:3px;
  border:1px solid transparent;background:transparent;color:var(--dk-ash);cursor:pointer;white-space:nowrap;flex:none;
  display:inline-flex;align-items:center;gap:6px}
.dk-pill:hover{color:var(--dk-bone)}
.dk-pill.on{border-color:var(--dk-red);color:var(--dk-red-hot);background:rgba(226,36,31,.1)}
.dk-pill .n{font-size:8px;color:var(--dk-royal-ice)}
.dk-pill.done .n{color:var(--dk-green-hot)}

/* ── section shell ─────────────────────────────────────────────────────── */
body.dk-on main>section.sec{display:none}
body.dk-on main>section.sec.dk-live{display:block;animation:dk-in .22s ease}
body.dk-on.dk-all main>section.sec{display:block;animation:none}
@keyframes dk-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* everything that is not a section is hero copy — only on the map */
body.dk-on main>.kick,body.dk-on main>h1.big,body.dk-on main>.lead,body.dk-on main>.truth,body.dk-on main>.foot{display:none}
body.dk-on.dk-map main>.kick,body.dk-on.dk-map main>h1.big,body.dk-on.dk-map main>.lead,body.dk-on.dk-map main>.truth{display:block}
body.dk-on.dk-all main>.kick,body.dk-on.dk-all main>h1.big,body.dk-on.dk-all main>.lead,body.dk-on.dk-all main>.truth,
body.dk-on.dk-all main>.foot{display:block}
/* the old footer row of the six links is replaced by the switcher */
body.dk-on main>[data-set-row]{display:none}
body.dk-on.dk-all main>[data-set-row]{display:flex}
/* the footer belongs on the map too */
body.dk-on.dk-map main>.foot{display:block}

/* ── the map (the desk home) ───────────────────────────────────────────── */
.dk-map-wrap{display:none}
body.dk-on.dk-map .dk-map-wrap{display:block}
.dk-next{border:1px solid var(--dk-red);border-radius:6px;background:linear-gradient(120deg,rgba(226,36,31,.1),rgba(226,36,31,.03));
  padding:15px 16px;margin:18px 0 22px;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
.dk-next.good{border-color:var(--dk-green-deep);background:linear-gradient(120deg,rgba(95,191,126,.09),transparent)}
.dk-next.warn{border-color:var(--dk-gold);background:linear-gradient(120deg,rgba(216,162,74,.09),transparent)}
.dk-next .k{font-family:var(--dk-mono);font-size:8.5px;letter-spacing:.16em;color:var(--dk-red-hot);margin-bottom:8px}
.dk-next.good .k{color:var(--dk-green-hot)}
.dk-next.warn .k{color:var(--dk-gold)}
.dk-next .v{font-size:14.5px;color:var(--dk-bone);line-height:1.55}
.dk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:11px;margin:18px 0 8px}
.dk-card{border:1px solid var(--dk-line);border-radius:6px;background:linear-gradient(180deg,var(--dk-panel),var(--dk-ink));
  padding:15px 15px 14px;cursor:pointer;transition:border-color .16s,transform .16s;display:flex;flex-direction:column;gap:8px;text-align:left}
.dk-card:hover{border-color:var(--dk-line2);transform:translateY(-2px)}
.dk-card .no{font-family:var(--dk-mono);font-size:8.5px;letter-spacing:.16em;color:var(--dk-ash)}
.dk-card .ti{font-family:var(--dk-display);font-size:17px;line-height:1.05;letter-spacing:.02em;color:var(--dk-bone);text-transform:uppercase}
.dk-card .jb{font-size:13px;color:var(--dk-smoke);line-height:1.55;flex:1}
.dk-card .go{font-family:var(--dk-mono);font-size:8.5px;letter-spacing:.13em;color:var(--dk-red-hot);display:flex;align-items:center;gap:6px}
.dk-card.has{border-left:3px solid var(--dk-green)}
.dk-card .st{font-family:var(--dk-mono);font-size:9px;color:var(--dk-royal-ice)}
.dk-card.has .st{color:var(--dk-green-hot)}
.dk-grid-h{font-family:var(--dk-mono);font-size:9px;letter-spacing:.17em;color:var(--dk-ash);
  padding-bottom:9px;margin:26px 0 4px;border-bottom:1px solid var(--dk-line)}

/* ── prev / next ───────────────────────────────────────────────────────── */
.dk-feet{display:none;gap:10px;margin:26px 0 8px}
body.dk-on:not(.dk-map):not(.dk-all) .dk-feet{display:grid;grid-template-columns:1fr 1fr}
.dk-foot{border:1px solid var(--dk-line);border-radius:6px;background:var(--dk-panel2);padding:13px 15px;
  cursor:pointer;text-align:left;transition:border-color .16s}
.dk-foot:hover{border-color:var(--dk-red)}
.dk-foot[disabled]{opacity:.3;cursor:default}
.dk-foot .k{font-family:var(--dk-mono);font-size:8px;letter-spacing:.15em;color:var(--dk-ash);margin-bottom:6px}
.dk-foot .v{font-size:13.5px;color:var(--dk-bone);font-weight:600;line-height:1.3}
.dk-foot.nx{text-align:right}

/* ── sheets (search + the 14) ──────────────────────────────────────────── */
.dk-sheet{position:fixed;inset:0;z-index:600;background:rgba(5,4,4,.82);backdrop-filter:blur(8px);display:none;
  align-items:flex-start;justify-content:center;padding:70px 14px 20px;overflow-y:auto}
.dk-sheet.on{display:flex}
.dk-sheet-in{width:100%;max-width:660px;border:1px solid var(--dk-line2);border-radius:8px;
  background:linear-gradient(180deg,var(--dk-panel),var(--dk-ink));overflow:hidden}
.dk-sheet-h{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:14px 15px;border-bottom:1px solid var(--dk-line)}
.dk-sheet-h .t{font-family:var(--dk-display);font-size:16px;letter-spacing:.05em;color:var(--dk-bone);text-transform:uppercase}
.dk-x{background:none;border:1px solid var(--dk-line2);color:var(--dk-ash);width:30px;height:30px;border-radius:3px;
  font-size:16px;line-height:1;cursor:pointer}
.dk-x:hover{border-color:var(--dk-red);color:var(--dk-red-hot)}
.dk-search{width:100%;background:var(--dk-void);border:0;border-bottom:1px solid var(--dk-line);color:var(--dk-bone);
  font-family:var(--dk-mono);font-size:15px;padding:15px;outline:none}
.dk-search::placeholder{color:var(--dk-ash-dim)}
.dk-hits{max-height:52vh;overflow-y:auto}
.dk-hit{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:baseline;padding:12px 15px;cursor:pointer;
  border-bottom:1px solid rgba(244,239,233,.05);text-align:left;width:100%;background:none;border-left:0;border-right:0;border-top:0}
.dk-hit:hover,.dk-hit.sel{background:rgba(226,36,31,.08)}
.dk-hit .no{font-family:var(--dk-mono);font-size:8.5px;letter-spacing:.13em;color:var(--dk-red-hot);white-space:nowrap}
.dk-hit .ti{font-size:14px;color:var(--dk-bone)}
.dk-hit .sub{font-size:12px;color:var(--dk-ash);margin-top:3px}
.dk-empty{padding:26px 16px;text-align:center;color:var(--dk-ash);font-size:13.5px}

/* ── the doors ──────────────────────────────────────────────────────── */
.dk-doors{padding:6px 0 10px}
.dk-door-g{font-family:var(--dk-mono);font-size:8.5px;letter-spacing:.17em;color:var(--dk-ash);padding:13px 15px 7px}
.dk-door{display:grid;grid-template-columns:1fr auto;gap:11px;align-items:center;padding:11px 15px;text-decoration:none;
  border-bottom:1px solid rgba(244,239,233,.05)}
.dk-door:hover{background:rgba(244,239,233,.03)}
.dk-door .n{font-size:14px;color:var(--dk-bone);font-weight:600}
.dk-door .w{font-size:12.5px;color:var(--dk-ash);margin-top:4px;line-height:1.45}
.dk-door .h{font-family:var(--dk-mono);font-size:8.5px;letter-spacing:.11em;color:var(--dk-royal-ice);white-space:nowrap}
.dk-door.here{background:rgba(226,36,31,.07)}
.dk-door.here .h{color:var(--dk-red-hot)}

/* ── floating switcher, for the surfaces that keep their own shell ─────── */
.dk-float{position:fixed;right:14px;bottom:14px;z-index:500;font-family:var(--dk-mono);font-size:9px;letter-spacing:.12em;
  color:var(--dk-smoke);border:1px solid var(--dk-line2);background:rgba(7,6,6,.93);backdrop-filter:blur(8px);
  padding:11px 13px;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.dk-float:hover{border-color:var(--dk-red);color:var(--dk-red-hot)}

@media (max-width:640px){
  .dk-bar-in{grid-template-columns:1fr auto;padding:8px 12px}
  .dk-state{display:none}
  .dk-w{display:none}
  .dk-home .s{display:none}
  .dk-cards{grid-template-columns:1fr}
  .dk-feet{grid-template-columns:1fr}
  .dk-sheet{padding:54px 10px 16px}
}
@media print{
  .dk-bar,.dk-nav,.dk-feet,.dk-sheet,.dk-float,.dk-next,.dk-cards,.dk-grid-h{display:none!important}
  body.dk-on main>section.sec{display:block!important}
  body.dk-on main>.kick,body.dk-on main>h1.big,body.dk-on main>.lead,body.dk-on main>.truth,body.dk-on main>.foot{display:block!important}
}

/* ── THE CLUB CLIENT · the gate and the badge (club.js) ────────────────── */
html.club-locked body > *:not(.club-door){display:none!important}
html.club-locked{overflow:hidden}
.club-door{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  padding:24px 16px;background:var(--dk-void,#070606);overflow-y:auto}
.club-door-in{max-width:620px;width:100%}
.club-door-k{font-family:var(--dk-mono,ui-monospace,monospace);font-size:9.5px;letter-spacing:.2em;
  color:var(--dk-red,#E2241F);margin-bottom:14px}
.club-door-h{font-family:var(--dk-display,'Anton',sans-serif);font-size:clamp(30px,8vw,56px);line-height:.96;
  color:var(--dk-bone,#F4EFE9);text-transform:uppercase;margin-bottom:16px}
.club-door-p{font-size:15.5px;line-height:1.7;color:var(--dk-smoke,#CCC4BC);margin-bottom:22px;max-width:56ch}
.club-door-p b{color:var(--dk-bone,#F4EFE9);font-weight:600}
/* what the wing costs — royal, because it is data, under the colour law */
.club-door-price{font-family:var(--dk-mono,ui-monospace,monospace);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dk-royal-ice,#8FB4FF);margin:-8px 0 20px}
.club-door-a{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.club-btn{display:inline-block;font-family:var(--dk-mono,ui-monospace,monospace);font-size:10px;letter-spacing:.13em;
  padding:13px 16px;border-radius:4px;text-decoration:none;border:1px solid var(--dk-red,#E2241F);
  background:rgba(226,36,31,.12);color:var(--dk-red-hot,#FF3B30)}
.club-btn:hover{background:rgba(226,36,31,.2)}
.club-btn.ghost{border-color:var(--dk-line-2,#3A2E2B);background:transparent;color:var(--dk-smoke,#CCC4BC)}
.club-btn.ghost:hover{border-color:var(--dk-bone,#F4EFE9);color:var(--dk-bone,#F4EFE9)}
.club-door-f{font-size:13px;color:var(--dk-ash,#8C837C);line-height:1.6;border-left:2px solid var(--dk-green-deep,#2E7C4F);padding-left:12px}

/* the badge — green, because it is a DONE state under the colour law */
.club-badge{position:fixed;left:14px;bottom:14px;z-index:520;font-family:var(--dk-mono,ui-monospace,monospace);
  font-size:9px;letter-spacing:.12em;padding:9px 12px;border-radius:4px;
  border:1px solid var(--dk-green-deep,#2E7C4F);background:rgba(7,6,6,.94);color:var(--dk-green-hot,#7FE3A0);
  display:flex;align-items:center;gap:7px;opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .25s,transform .25s}
.club-badge.on{opacity:1;transform:none;pointer-events:auto}
.club-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--dk-green-hot,#7FE3A0);flex:none}
.club-badge a{color:var(--dk-royal-ice,#8FB4FF);text-decoration:none;margin-left:4px}
@media (max-width:560px){.club-badge{left:10px;right:10px;bottom:10px;justify-content:center}}