/* Rook design system — obsidian/iris. Single source of truth for the redesigned
   shells (admin, marketing, auth, employee). Pairs with rook-tw.js (Tailwind
   palette) and rook-charts.js (SVG chart helpers). */

:root{ --b:rgba(255,255,255,.08); --b2:rgba(255,255,255,.12); color-scheme:dark; }

html,body{ height:100% }
body{
  background:#07070A; color:#ECECF2; position:relative;
  font-family:"Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* Faint film grain only — no corner aurora glow. */
body::after{ content:""; position:fixed; inset:0; z-index:-1; opacity:.04; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---- typographic + numeric helpers ---- */
.num{ font-variant-numeric:tabular-nums lining-nums }
.gtext{ color:#F4F3F9 }
.kicker{ letter-spacing:.1em; text-transform:uppercase; font-size:.65rem; font-weight:600; color:#7E7E93 }

/* ---- surfaces ---- */
.glass{ background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border:1px solid var(--b); border-radius:20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 26px 50px -30px rgba(0,0,0,.85);
  backdrop-filter:blur(14px); transition:transform .25s ease, border-color .25s ease; }
.glass:hover{ border-color:var(--b2) }
.lift:hover{ transform:translateY(-3px) }

/* ---- sidebar nav ---- */
.navi{ position:relative; display:flex; align-items:center; gap:.7rem; color:#9A9AAE;
  border-radius:11px; border:1px solid transparent; transition:.18s }
.navi svg{ width:18px; height:18px; flex:none; opacity:.8; transition:.18s }
.navi:hover{ background:rgba(255,255,255,.05); color:#ECECF2 }
.navi:hover svg{ opacity:1 }
.navi.on{ color:#fff; background:linear-gradient(180deg, rgba(139,92,246,.20), rgba(124,92,255,.07));
  border-color:rgba(167,139,250,.26); box-shadow: inset 0 1px 0 rgba(255,255,255,.09) }
.navi.on svg{ color:#C4B5FD; opacity:1 }
.navi.on::before{ content:""; position:absolute; left:-7px; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:3px; background:linear-gradient(180deg,#A78BFA,#7C5CFF);
  box-shadow:0 0 10px rgba(139,92,246,.55) }
/* sub-nav link (e.g. playbook sub-pages) */
.navi-sub{ display:block; color:#7E7E93; font-size:.8rem; padding:.25rem 0; transition:.15s }
.navi-sub:hover{ color:#ECECF2 }
.navi-sub.on{ color:#C4B5FD }

/* ---- search / keyboard hint ---- */
.sbtn{ display:flex; align-items:center; gap:.6rem; width:100%; color:#8E8EA0; font-size:.82rem;
  background:rgba(255,255,255,.035); border:1px solid var(--b); border-radius:11px; padding:.5rem .7rem; transition:.18s }
.sbtn:hover{ color:#ECECF2; border-color:var(--b2); background:rgba(255,255,255,.06) }
.kbd{ margin-left:auto; font-size:.62rem; font-weight:600; color:#8E8EA0; background:rgba(255,255,255,.06);
  border:1px solid var(--b); border-radius:6px; padding:.05rem .35rem; font-variant-numeric:tabular-nums }

/* ---- segmented control ---- */
.seg{ display:inline-flex; background:rgba(255,255,255,.04); border:1px solid var(--b); border-radius:12px; padding:3px }
.seg button, .seg a{ font-size:.78rem; padding:.3rem .72rem; border-radius:9px; color:#9A9AAE; transition:.15s }
.seg button.on, .seg a.on{ background:rgba(255,255,255,.08); color:#fff; font-weight:600; box-shadow:inset 0 1px 0 rgba(255,255,255,.12) }
/* dark form controls used across migrated admin pages */
.fctl{ background:rgba(255,255,255,.04); color:#ECECF2; border:1px solid var(--b); border-radius:10px;
  padding:.45rem .65rem; font-size:.82rem; outline:none; transition:.15s }
.fctl:hover{ border-color:var(--b2) }
.fctl:focus{ border-color:rgba(167,139,250,.5); box-shadow:0 0 0 3px rgba(139,92,246,.18) }
/* Native <select> popups inherit the control's light text, but Windows/Chrome
   ignores the translucent control background and paints the option list with
   the OS theme (white) -> white-on-white "empty box". Force an opaque dark bg. */
select option, select optgroup{ background-color:#14141B; color:#ECECF2 }

/* ---- pills / chips ---- */
.pill{ font-size:.72rem; font-weight:600; padding:.2rem .55rem; border-radius:999px;
  border:1px solid transparent; font-variant-numeric:tabular-nums }
.chip{ font-size:.7rem; font-weight:600; padding:.12rem .5rem; border-radius:7px }
.chip-mint{ background:rgba(52,226,176,.10); color:#34E2B0; border:1px solid rgba(52,226,176,.28) }
.chip-amber{ background:rgba(245,181,68,.10); color:#F5B544; border:1px solid rgba(245,181,68,.28) }
.chip-rose{ background:rgba(251,111,146,.10); color:#FB6F92; border:1px solid rgba(251,111,146,.30) }
.chip-iris{ background:rgba(167,139,250,.10); color:#C4B5FD; border:1px solid rgba(167,139,250,.28) }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:.45rem; font-size:.85rem; font-weight:600;
  border-radius:11px; padding:.5rem .9rem; border:1px solid transparent; transition:.15s; cursor:pointer }
.cta, .btn-primary{ background:linear-gradient(180deg,#8B5CF6,#6D4DF0); color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset }
.cta:hover, .btn-primary:hover{ filter:brightness(1.08) }
.btn-ghost{ background:rgba(255,255,255,.04); border:1px solid var(--b); color:#C7C7D4 }
.btn-ghost:hover{ background:rgba(255,255,255,.07); border-color:var(--b2); color:#fff }
.btn-danger{ background:transparent; color:#FB6F92; border:1px solid transparent }
.btn-danger:hover{ background:rgba(251,111,146,.12) }

/* ---- table row + waveform + chevron (latest pitches / clip lists) ---- */
.row:hover{ background:rgba(255,255,255,.035) }
.wavewrap{ position:relative; display:flex; align-items:center }
.wavewrap .bars{ display:flex; align-items:center; gap:2px; height:28px; width:100%; transition:opacity .2s; color:rgba(255,255,255,.2) }
.wavewrap .bars span{ flex:1 1 0; min-width:0; border-radius:2px; background:currentColor }
.wavewrap .play{ position:absolute; inset:0; display:none; align-items:center; justify-content:center }
.row:hover .wavewrap .bars{ opacity:.28; color:#A78BFA }
.row:hover .wavewrap .play{ display:flex }
.chev{ opacity:.5; transition:.2s }
.row:hover .chev{ opacity:1; color:#fff; background:rgba(255,255,255,.08); border-color:var(--b2) }

/* ---- scrollbar ---- */
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:8px; border:2px solid transparent; background-clip:padding-box }