/* ==========================================================================
   Spotlight: October 2026
   Loaded last. One type family (Geist, with Geist Mono for figures and
   labels), sharp 2px corners, hairline rules instead of shadows, one warm
   accent, and red reserved for "live". Structure and behaviour stay in
   styles.css and app.js; this file retunes the tokens and the shell.
   ========================================================================== */

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-mono-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-mono-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens ------------------------------------------------------------------
   Dark is the house look; theme.js applies it unless someone picked light.
   Geist has no Greek, so Greek names fall back to the self-hosted Inter. */
:root {
  --font-sans: Geist, Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --live: #d11f3a;
  --attention: #9a5b12;
  --canvas: #f7f5f2;
  --surface: #ffffff;
  --surface-raised: #f3f0ec;
  --surface-input: #ffffff;
  --surface-hover: #f1ede8;
  --surface-sunken: #ece8e3;
  --line: #e2ddd7;
  --border: #e2ddd7;
  --line-soft: #ece8e3;
  --line-strong: #cfc8c0;
  --ink: #141112;
  --muted: #5f5955;
  --muted-2: #67615c;
  --accent: #141112;
  --accent-dark: #000000;
  --accent-bright: #3a3536;
  --accent-soft: #efe9e1;
  --on-accent: #f7f5f2;
  --accent-gradient: linear-gradient(#141112, #141112);
  --gold-glow: none;
  --canvas-glow: none;
  --stage-light: radial-gradient(ellipse 38% 90% at 18% 0%, rgba(154, 112, 52, .10), transparent 70%);
  --shadow-xs: none;
  --shadow: none;
  --shadow-hover: none;
  --shadow-lg: 0 24px 60px -20px rgba(20, 17, 18, .28);
  --shadow-accent: none;
  --card-highlight: none;
  --ring: 0 0 0 1px var(--ink);
  --focus-ring: var(--ink);
  --radius: 2px;
  --radius-lg: 2px;
  --radius-xl: 2px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --attention: #f2c38a;
  --canvas: #070607;
  --surface: #0e0c0d;
  --surface-raised: #141112;
  --surface-input: #0e0c0d;
  --surface-hover: #151213;
  --surface-sunken: #0a0909;
  --line: #2b2728;
  --border: #2b2728;
  --line-soft: #1f1c1d;
  --line-strong: #3a3536;
  --ink: #f3efea;
  --muted: #a39c97;
  --muted-2: #9a938e;
  --accent: #f2e3c6;
  --accent-dark: #fff4df;
  --accent-bright: #f2e3c6;
  --accent-soft: #221d16;
  --on-accent: #0e0c0d;
  --accent-gradient: linear-gradient(#f2e3c6, #f2e3c6);
  --stage-light: radial-gradient(ellipse 38% 90% at 18% 0%, rgba(242, 227, 198, .16), transparent 70%);
  --shadow-lg: 0 28px 70px -16px rgba(0, 0, 0, .8);
  --ring: 0 0 0 1px var(--accent);
  --focus-ring: var(--accent);
  --sidebar: #070607;
  --sidebar-soft: #151213;
}

/* --- Type ----------------------------------------------------------------- */
body,
body :where(button, input, select, textarea, h1, h2, h3, h4, h5, h6, strong, small, p, span, a, label, th, td, li, dt, dd, summary, b) {
  font-family: var(--font-sans);
}
body { background: var(--canvas); color: var(--ink); letter-spacing: 0; }
body :where(code, kbd, pre, samp) { font-family: var(--font-mono); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans) !important; text-transform: none !important; letter-spacing: -.02em; }
h1 { font-weight: 300 !important; letter-spacing: -.04em !important; }
h2 { font-weight: 400 !important; }
h3 { font-weight: 500 !important; }
.eyebrow, .panel-kicker, .nav-label {
  font-family: var(--font-mono) !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  color: var(--muted) !important;
}
.eyebrow::before, #view-overview > .page-heading::after { display: none !important; }
.metric-value strong, .finance-card strong, .performance-stage strong, [class*="-total"] strong { font-weight: 300; letter-spacing: -.03em; }

/* --- Shape: everything sharp, except things that are round by meaning ---- */
body :is(*, *::before, *::after) { border-radius: 2px !important; }
body :is(.avatar, .avatar *, .stack-avatar, .brand-logo, .dot, .shift-dots i, .status-pill::before, .notification-dot,
  .system-status > i, .platform-label i, .legend-color, .planner-now-line i, .loading-spinner, .theme-toggle, .info-tip,
  .talent-edit, .profile-photo, .profile-photo *, .performance-legend-current, .performance-legend-previous) { border-radius: 50% !important; }

/* --- Surfaces: hairlines, no depth ----------------------------------------- */
.panel, .metric-card, .finance-card, .performance-stage, .creator-card, .talent-card, .owed-chatters, .attention-item {
  box-shadow: none !important;
  background-image: none !important;
}
.metric-card::after, .finance-card::after, .performance-stage::after { display: none !important; }
.button, .button-primary, .button-secondary, .icon-button, .search-trigger { box-shadow: none !important; background-image: none !important; }
.button-primary { background: var(--accent) !important; color: var(--on-accent) !important; border-color: var(--accent) !important; font-weight: 500; }
.button-primary:hover { background: var(--accent-dark) !important; }
.button-secondary { background: transparent !important; border: 1px solid var(--line) !important; color: var(--ink) !important; }
.button-secondary:hover { border-color: var(--line-strong) !important; }
.text-button { color: var(--accent); font-weight: 400; }
:focus-visible { outline: 1px solid var(--focus-ring) !important; outline-offset: 3px; }

/* --- Shell: a top bar on wide screens -------------------------------------
   The sidebar element and its drawer behaviour stay; at 1181px and up it lays
   out as one row. Narrower screens keep the drawer from styles.css. */
@media (min-width: 1181px) {
  :root { --sidebar-w: 0px; }
  .sidebar {
    inset: 0 0 auto 0 !important;
    width: auto !important;
    height: 64px;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    padding: 0 196px 0 32px;
    background: var(--canvas) !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
    transform: none !important;
  }
  .brand { padding: 0; gap: 10px; flex: 0 0 auto; max-width: 220px; }
  .brand-logo { width: 28px; height: 28px; padding: 2px; background: var(--surface-raised); }
  .brand strong { color: var(--ink); font-size: 12px; font-weight: 500; letter-spacing: .22em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand small { display: none; }
  .primary-nav { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0 24px; overflow: visible; }
  .primary-nav > .nav-label { display: none !important; }
  .primary-nav > .nav-item, .nav-more > summary {
    width: auto;
    min-height: 63px;
    padding: 0;
    gap: 6px;
    border-radius: 0 !important;
    border-bottom: 1px solid transparent;
    background: none !important;
    box-shadow: none !important;
    color: var(--muted);
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
  }
  .primary-nav > .nav-item > span:first-child, .nav-more > summary > span:first-child { display: none; }
  .primary-nav > .nav-item:hover, .nav-more > summary:hover { color: var(--ink); }
  .primary-nav > .nav-item.active, .nav-more.active > summary { color: var(--ink); border-bottom-color: var(--ink); }
  .nav-item b { min-width: 0; padding: 0; background: none !important; color: var(--accent) !important; font-family: var(--font-mono); font-size: 11px; font-weight: 400; }
  .nav-more { position: relative; margin: 0; }
  .nav-more-links {
    position: absolute;
    top: calc(100% + 1px);
    left: -18px;
    z-index: 40;
    min-width: 248px;
    margin: 0;
    padding: 10px 18px 12px;
    border: 1px solid var(--line);
    border-left: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
  }
  .nav-more-links .nav-label { display: block; margin: 12px 0 4px; }
  .nav-more-links .nav-label:first-child { margin-top: 4px; }
  .nav-more-links .nav-item { min-height: 38px; padding: 0; gap: 8px; background: none !important; box-shadow: none !important; color: var(--muted); font-size: 14px; font-weight: 400; }
  .nav-more-links .nav-item > span:first-child { display: none; }
  .nav-more-links .nav-item:hover, .nav-more-links .nav-item.active { color: var(--ink); }
  .nav-more-links .nav-item.active::before { content: ""; width: 4px; height: 4px; margin-right: 2px; background: var(--accent); }
  .sidebar-foot { display: flex; align-items: center; gap: 14px; padding: 0; border: 0; flex: 0 0 auto; }
  .sidebar-foot-row { display: flex; align-items: center; gap: 8px; }
  .system-status { display: none; }
  .profile-chip { padding: 0; border: 0; gap: 8px; }
  .profile-chip > span { display: none; }
  .profile-chip .avatar { width: 30px; height: 30px; font-size: 11px; }
  .profile-logout, .theme-toggle { width: 34px; height: 34px; border-color: var(--line) !important; color: var(--muted); background: transparent; }
  .main { margin-left: 0 !important; padding-top: 64px; }
  .topbar {
    position: fixed;
    top: 0;
    right: 32px;
    z-index: 31;
    height: 64px;
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
  }
  .topbar .crumb, .topbar .mobile-menu { display: none !important; }
  .top-actions { gap: 8px; }
  .search-trigger { width: 40px; min-width: 0; padding: 0; justify-content: center; border: 1px solid var(--line); background: transparent; }
  .search-trigger > span:not(:first-child), .search-trigger kbd { display: none; }
  #quick-add { width: 40px; min-width: 0; padding: 0; justify-content: center; }
  #quick-add > span:not(:first-child) { display: none; }
  .icon-button { border: 1px solid var(--line); background: transparent; }
}
@media (min-width: 1181px) and (max-width: 1360px) {
  .sidebar { gap: 18px; }
  .primary-nav { gap: 0 16px; }
  .brand { max-width: 150px; }
}
/* The drawer (phones and tablets) keeps its layout but takes the new palette. */
@media (max-width: 1180px) {
  .sidebar { background: var(--surface) !important; color: var(--ink); border-right: 1px solid var(--line) !important; }
  .sidebar .nav-item, .sidebar .nav-more > summary { color: var(--muted); }
  .sidebar .nav-item:hover, .sidebar .nav-item.active, .sidebar .nav-more > summary:hover { background: var(--surface-hover) !important; color: var(--ink); box-shadow: inset 2px 0 0 var(--accent) !important; }
  .sidebar .brand strong, .sidebar .system-status strong, .sidebar .profile-chip strong { color: var(--ink); }
  .sidebar .brand small, .sidebar .profile-chip small { color: var(--muted); }
  .sidebar .nav-more-links { border-left-color: var(--line); }
  .sidebar .profile-logout { border-color: var(--line); color: var(--muted); }
  .sidebar-foot, .profile-chip { border-color: var(--line-soft); }
  .topbar { background: var(--canvas); border-bottom: 1px solid var(--line-soft); }
}

/* --- Phone tabs ------------------------------------------------------------- */
.phone-tabs { display: none; }
@media (max-width: 920px) {
  .phone-tabs {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 29;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--line-soft);
    background: var(--canvas);
  }
  .phone-tabs button {
    min-height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    cursor: pointer;
  }
  .phone-tabs button::before { content: ""; width: 16px; height: 1px; background: transparent; }
  .phone-tabs button.active { color: var(--ink); }
  .phone-tabs button.active::before { background: var(--ink); }
  .phone-tabs button[hidden] { display: none; }
  .main { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  .mobile-fab { bottom: calc(74px + env(safe-area-inset-bottom)) !important; }
  body.sidebar-open .phone-tabs, body.drawer-open .phone-tabs { visibility: hidden; }
}

/* --- Tonight: the spotlight ------------------------------------------------- */
.spotlight-stage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  margin: 0 0 32px;
  padding: 40px;
  border: 1px solid var(--line-soft);
  background: var(--stage-light), var(--surface);
}
.spotlight-portrait {
  flex: 0 0 auto;
  width: 220px;
  height: 276px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 88px;
  font-weight: 200;
  letter-spacing: -.04em;
}
.spotlight-portrait img { width: 100%; height: 100%; object-fit: cover; }
.spotlight-copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.spotlight-tag { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.spotlight-tag i { width: 8px; height: 8px; background: var(--live); }
.spotlight-tag.is-next i { background: var(--accent); }
.spotlight-copy h2 { margin: 0; font-size: clamp(44px, 6vw, 84px); line-height: .94; font-weight: 300 !important; letter-spacing: -.045em !important; overflow-wrap: anywhere; }
.spotlight-meta { margin: 0; color: var(--muted); font-size: 16px; }
.spotlight-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 620px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.spotlight-stats > div { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
.spotlight-stats > div:first-child { padding-left: 0; }
.spotlight-stats > div + div { border-left: 1px solid var(--line); }
.spotlight-stats span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.spotlight-stats strong { font-size: 28px; font-weight: 300; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.spotlight-progress { height: 2px; max-width: 620px; background: var(--line); }
.spotlight-progress i { display: block; height: 2px; background: var(--accent); }
.spotlight-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.spotlight-others { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--muted); font-size: 13px; }
.spotlight-others button { padding: 6px 0; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.spotlight-others button[aria-pressed="true"] { border-bottom-color: var(--ink); }
.spotlight-others button i { display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: var(--live); vertical-align: 1px; }
.spotlight-checks { flex: 1 1 280px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.spotlight-checks li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); color: var(--muted); }
.spotlight-checks li::before { content: ""; flex: 0 0 12px; height: 12px; border: 1px solid var(--line-strong); }
.spotlight-checks li.done { color: var(--ink); }
.spotlight-checks li.done::before { border-color: var(--accent); background: var(--accent); }
.spotlight-checks li.warn { color: var(--attention); }
.spotlight-checks li.warn::before { border-color: var(--attention); }

/* --- Tonight: the next 24 hours --------------------------------------------- */
.tonight-section { margin: 0 0 32px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; }
.section-head h2 { margin: 0; font-size: 18px; }
.tonight-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(168px, 1fr); overflow-x: auto; border-top: 1px solid var(--line); scrollbar-width: thin; }
.tonight-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: -1px;
  padding: 16px 18px 16px 0;
  border: 0;
  border-top: 2px solid var(--line);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tonight-item:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.tonight-item time { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.tonight-item strong { font-size: 15px; font-weight: 500; }
.tonight-item small { color: var(--muted); font-size: 12px; }
.tonight-item em { font-style: normal; font-size: 12px; color: var(--muted); }
.tonight-item.is-live { border-top-color: var(--live); }
.tonight-item.is-live em { color: var(--ink); }
.tonight-item.is-next { border-top-color: var(--accent); }
.tonight-item.is-next em { color: var(--accent); }
.tonight-item.is-open, .tonight-item.is-finish { border-top: 2px dashed var(--attention); }
.tonight-item.is-open em, .tonight-item.is-finish em { color: var(--attention); }
.tonight-empty { padding: 18px 0; color: var(--muted); border-top: 1px solid var(--line); }

/* The cues read as a ruled list rather than cards. */
#view-overview .attention-panel { padding: 0; border: 0; background: none; margin-bottom: 32px; }
#view-overview .attention-panel .panel-head { padding: 0 0 14px; border-bottom: 1px solid var(--line); }
#view-overview .attention-item { padding: 14px 0; border: 0; border-bottom: 1px solid var(--line-soft); background: none; }
#view-overview .attention-item:hover { background: none; }
#view-overview .attention-icon { background: none !important; width: 18px; }

@media (max-width: 720px) {
  .spotlight-stage { gap: 20px; padding: 22px 18px; }
  .spotlight-portrait { width: 84px; height: 104px; font-size: 34px; }
  .spotlight-copy { flex-basis: 220px; gap: 12px; }
  .spotlight-stats strong { font-size: 22px; }
  .spotlight-stats > div { padding: 10px 8px; }
}

/* styles.css forces a white focus ring on the old dark sidebar; the bar now
   follows the page, so the ring follows the page too. */
.sidebar { --focus-ring: var(--accent); }

/* --- Corrections to the older layers ---------------------------------------- */
/* The October hero panel behind the overview heading gives way to the stage. */
#view-overview > .page-heading { margin-bottom: 24px; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
#view-overview > .page-heading::before, #view-overview > .page-heading::after { display: none !important; }
#view-overview > .page-heading h1 { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: var(--ink) !important; font-size: 32px !important; }
#view-overview > .page-heading .eyebrow { color: var(--muted) !important; }
@media (min-width: 1181px) {
  /* .main is its own stacking layer; the fixed action bar has to escape it. */
  .main { z-index: auto; }
  .nav-item::before, .nav-item::after { display: none !important; }
  .nav-item:hover, .nav-more > summary:hover { transform: none !important; }
  .nav-more-links .nav-item.active { font-weight: 500; }
  body.is-scrolled .topbar { border-bottom-color: transparent; box-shadow: none; }
}
.spotlight-stage.is-next .spotlight-copy h2 { font-size: clamp(34px, 4.4vw, 60px); }
.tonight-item.is-late { border-top: 2px dashed var(--attention); }
.tonight-item.is-late em { color: var(--attention); }
@media (max-width: 720px) {
  .spotlight-copy { flex: 1 1 180px; }
  .spotlight-stage { align-items: flex-start; }
}