/* ==========================================================================
   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 ----
   Elements only: :is() cannot hold pseudo-elements, so ::before/::after keep
   their own shapes (status dots stay round); square ones are set explicitly. */
body * { border-radius: 2px !important; }
body :is(.avatar, .avatar *, .stack-avatar, .brand-logo, .dot, .shift-dots i, .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;
  }
  /* The agency's name is real data and can be long ("Space Management
     Agency"). It wraps onto a second line inside a fixed width and is cut with
     an ellipsis only after that, so it can never run into the menu. */
  .brand { padding: 0; gap: 10px; flex: 0 0 auto; width: 196px; max-width: 196px; min-width: 0; }
  .brand > div { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  .brand-logo { width: 28px; height: 28px; padding: 2px; background: var(--surface-raised); }
  .brand strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: var(--ink);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .2em;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .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; }
}
/* 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 strong { font-weight: 500; letter-spacing: .2em; line-height: 1.3; }
  .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; }
}

/* ==========================================================================
   Stage 2: planner, earnings and creators, plus the shared pieces they use.
   ========================================================================== */

/* --- Charts: a warm monochrome series, told apart by lightness ------------- */
:root {
  --chart-1: #141112; --chart-2: #6e6764; --chart-3: #9a5b12; --chart-4: #a39c97; --chart-5: #3a3536; --chart-6: #c9c2bb;
  --bar-top: #141112; --bar-bottom: #3a3536; --chart-muted: #e2ddd7;
}
:root[data-theme="dark"] {
  --chart-1: #f2e3c6; --chart-2: #a39c97; --chart-3: #f2c38a; --chart-4: #6e6764; --chart-5: #fff4df; --chart-6: #4a4445;
  --bar-top: #f2e3c6; --bar-bottom: #c9b896; --chart-muted: #2b2728;
}

/* --- Tabs: segmented controls, filter pills and switchers read as text ----- */
.filter-pills, .segmented, .planner-density, .density-switcher {
  gap: 4px 20px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.filter-pills button, .segmented button, .planner-density button, .density-switcher button {
  min-height: 34px;
  padding: 0 0 4px !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}
.filter-pills button:hover, .segmented button:hover, .planner-density button:hover, .density-switcher button:hover { color: var(--ink) !important; }
.filter-pills button.active, .segmented button.active, .segmented button[aria-pressed="true"],
.planner-density button[aria-pressed="true"], .density-switcher button[aria-pressed="true"] {
  color: var(--ink) !important;
  border-bottom-color: var(--ink) !important;
}
.planner-density > span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* --- Figure rows: summaries are ruled rows, not boxes --------------------- */
/* Each figure carries its own top rule, so a row that wraps stays aligned. */
.finance-summary { gap: 0 24px !important; border-bottom: 1px solid var(--line); }
.finance-card {
  min-height: 0 !important;
  padding: 18px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  background: none !important;
}
.finance-card span { color: var(--muted) !important; font-family: var(--font-mono); font-size: 11px !important; font-weight: 400 !important; letter-spacing: .12em !important; text-transform: uppercase !important; }
.finance-card strong { font-weight: 300 !important; font-size: clamp(22px, 16cqi, 34px) !important; letter-spacing: -.03em; }
.finance-card small { color: var(--muted); }

/* --- Tables: mono headers, hairline rows ---------------------------------- */
.data-table th {
  background: none !important;
  color: var(--muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}
.data-table td { border-color: var(--line-soft) !important; }
.data-table tbody tr:nth-child(even) td { background: none !important; }
.data-table tbody tr:hover td { background: var(--surface-hover) !important; }

/* --- Status: a coloured word with its dot, not a filled pill -------------- */
.status-pill { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; }
.status-pill::before { animation: none !important; }

/* --- Planner -------------------------------------------------------------- */
.planner-shell { border: 1px solid var(--line-soft); box-shadow: none !important; }
.planner-head { background: var(--surface) !important; }
.planner-head span { font-family: var(--font-mono); font-weight: 400 !important; letter-spacing: .12em; }
.planner-head strong { font-weight: 300 !important; font-size: 20px !important; }
.planner-head.today { background: var(--surface) !important; }
.planner-head.today strong { background: none !important; box-shadow: none !important; color: var(--ink) !important; border-bottom: 1px solid var(--ink); }
.planner-day.today { background-color: color-mix(in srgb, var(--accent) 4%, var(--surface)) !important; }
.planner-time-rail span { font-family: var(--font-mono); }
.planner-now-line, .planner-now-line i { background: var(--live) !important; }
.planner-summary { gap: 6px 22px; padding: 0; border: 0; background: none; }
.planner-summary > span { padding: 0 !important; border: 0 !important; background: none !important; color: var(--muted); font-size: 13px; }
.planner-summary-title { display: none; }
.planner-summary strong { font-weight: 400 !important; font-family: var(--font-mono); color: var(--ink) !important; }
.planner-summary .is-live strong { color: var(--live) !important; }
.planner-summary .needs-attention strong, .planner-summary .has-variance strong { color: var(--attention) !important; }
.planner-tool-button { border: 1px solid var(--line) !important; background: transparent !important; box-shadow: none !important; }

/* Blocks are neutral; state decides the edge. Type keeps only its label hue. */
.shift-card { box-shadow: none !important; filter: none !important; }
.shift-card:hover .shift-card-actual, .shift-card:hover .shift-card-planned { border-color: var(--ink) !important; }
.shift-card-planned { border: 1px dashed var(--line-strong) !important; background: transparent !important; }
.shift-card-actual { border: 1px solid var(--line-strong) !important; background: var(--surface-raised) !important; box-shadow: none !important; }
.shift-card-scheduled .shift-card-planned { border-style: solid !important; background: var(--surface-raised) !important; }
.shift-card-in_progress .shift-card-actual, .shift-card-in_progress .shift-card-planned { border-top: 2px solid var(--live) !important; }
.shift-card-completed .shift-card-actual { background: var(--surface-sunken) !important; border-color: var(--line) !important; }
.shift-card-completed .shift-card-content > strong { color: var(--muted); }
.shift-card-open .shift-card-planned, .shift-card-has-gap .shift-card-planned,
.shift-card-needs_finish .shift-card-planned, .shift-card-needs_finish .shift-card-actual {
  border: 1px dashed var(--attention) !important;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--attention) 12%, transparent) 0 5px, transparent 5px 10px) !important;
}
.shift-type-tag, .shift-state-tag {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-family: var(--font-mono);
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: .1em !important;
}
.shift-type-tag { color: color-mix(in srgb, var(--shift-color) 80%, var(--ink)) !important; }
.shift-state-tag { color: var(--muted) !important; }
.shift-state-tag.now { color: var(--ink) !important; }
.shift-state-tag.now::before { content: ""; width: 6px; height: 6px; margin-right: 5px; background: var(--live); }
.shift-state-tag.needs-finish { color: var(--attention) !important; }
.shift-card-content > strong { font-weight: 500 !important; }
.shift-card-time { font-family: var(--font-mono); font-weight: 400 !important; }

/* --- Earnings --------------------------------------------------------------- */
.earnings-summary-disclosure > summary, .density-details > summary { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
#earnings-metrics-summary .finance-card:first-child strong { font-size: clamp(34px, 5vw, 56px) !important; letter-spacing: -.045em; }
.chart-tooltip { background: var(--surface-raised) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; }

/* --- Creators: portrait cards in the house look ----------------------------- */
.talent-card { border-color: var(--line-soft) !important; transform: none !important; }
.talent-card:hover { border-color: var(--line-strong) !important; transform: none !important; }
.talent-media { aspect-ratio: 4 / 5; background: var(--surface-raised) !important; }
.talent-media::before { display: none !important; }
.talent-media::after { background: linear-gradient(to top, rgba(7, 6, 7, .86) 0%, rgba(7, 6, 7, .2) 45%, transparent 65%) !important; }
.talent-card:hover .talent-media > img { transform: none; }
.talent-monogram { color: var(--muted) !important; font: 200 clamp(56px, 8vw, 92px)/1 var(--font-sans) !important; letter-spacing: -.04em !important; text-shadow: none !important; }
.talent-title h2 { font-weight: 300 !important; font-size: 26px !important; letter-spacing: -.03em !important; text-shadow: none !important; }
.talent-title p { font-weight: 400 !important; color: rgba(243, 239, 234, .78) !important; }
.talent-status { background: rgba(7, 6, 7, .72) !important; color: #f3efea !important; padding: 5px 8px !important; font-family: var(--font-mono); font-size: 10px !important; letter-spacing: .12em !important; text-transform: uppercase !important; }
.talent-figures dt { font-family: var(--font-mono); font-size: 11px !important; font-weight: 400 !important; letter-spacing: .12em; text-transform: uppercase; }
.talent-figures dd { font-weight: 300 !important; font-size: 22px !important; }
.talent-edit { background: rgba(7, 6, 7, .6) !important; color: #f3efea; }
@media (max-width: 720px) {
  .talent-media { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   Stage 3: settlements, commissions, the creator file and the drawer.
   ========================================================================== */

/* Row actions are quiet text links; the row itself carries the information. */
.row-action {
  min-height: 36px;
  padding: 6px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  background: none !important;
  color: var(--accent) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}
.row-action:hover { border-bottom-color: var(--accent) !important; }
.row-action.danger { color: var(--attention) !important; }
.row-action.danger:hover { border-bottom-color: var(--attention) !important; background: none !important; }
.row-actions { gap: 8px 18px; }
.data-table td strong { font-weight: 500; font-variant-numeric: tabular-nums; }

/* The drawer: a calm panel with hairline sections. */
.drawer { border-left: 1px solid var(--line) !important; box-shadow: var(--shadow-lg) !important; }
.drawer-head { border-bottom-color: var(--line-soft) !important; }
.drawer-head h2 { font-weight: 300 !important; font-size: 24px !important; letter-spacing: -.03em !important; }
.drawer-section-title { font-weight: 400 !important; }
.drawer-section-title > span { background: none !important; color: var(--muted) !important; border: 1px solid var(--line) !important; box-shadow: none !important; }
.calc-preview, .calc-lines { background: none !important; box-shadow: none !important; }
.calc-line { border-color: var(--line-soft) !important; }
.calc-line strong { font-weight: 400; font-variant-numeric: tabular-nums; }
.calc-line.total strong { font-weight: 500; }

/* Commission approvals: the filters read as tabs, the count as a mono note. */
.commission-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* --- Creator file ------------------------------------------------------------ */
.talent-open { position: absolute; inset: 0; z-index: 1; padding: 0; border: 0; background: none; cursor: pointer; }
.talent-open:focus-visible { outline-offset: -4px; }
.talent-title, .talent-monogram, .talent-status { pointer-events: none; }
.talent-status, .talent-title { z-index: 2; }
.talent-edit { z-index: 3; }
.creator-file { display: flex; flex-direction: column; gap: 28px; }
.creator-file-head { display: flex; align-items: flex-end; gap: 20px; }
.creator-file-portrait {
  flex: 0 0 auto;
  width: 120px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 48px;
  font-weight: 200;
  letter-spacing: -.04em;
}
.creator-file-portrait img { width: 100%; height: 100%; object-fit: cover; }
.creator-file-title { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.creator-file-title h3 { margin: 0; font-size: 40px; line-height: .95; font-weight: 300 !important; letter-spacing: -.04em !important; overflow-wrap: anywhere; }
.creator-file-title p { margin: 0; color: var(--muted); }
.creator-file-facts { margin: 0; border-top: 1px solid var(--line); }
.creator-file-facts > div { display: flex; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.creator-file-facts dt { flex: 0 0 110px; padding-top: 2px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.creator-file-facts dd { margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.creator-file-section h4 { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 400; }
.creator-file-row {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.creator-file-row:not(.is-static):hover span:first-of-type { text-decoration: underline; text-underline-offset: 3px; }
.creator-file-row.is-static { cursor: default; }
.creator-file-row time { flex: 0 0 118px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.creator-file-row span { flex: 1; min-width: 0; }
.creator-file-row .status-pill { flex: 0 0 auto; }
.creator-file-empty { margin: 0; padding: 12px 0; color: var(--muted); }

/* Empty states: a quiet outline, not a raised tile. */
.empty-state > .empty-icon, .empty-state > span:first-child { background: none !important; border: 1px solid var(--line) !important; box-shadow: none !important; color: var(--muted) !important; }
.empty-state strong { font-weight: 400 !important; }

/* ==========================================================================
   Audit, October 2026: gaps found by the full sweep.
   ========================================================================== */

/* Light-theme status colours. The older values were picked against white and
   fell to 4.1–4.4:1 on raised, hover and sunken surfaces (a green "Active" or
   "Cleared" measured 4.31:1). These clear 5.3:1 on every light surface. */
:root {
  --mint: #0f6b51;
  --orange: #924720;
  --blue: #2558a8;
  --red: #a3303f;
  --attention: #8a500e;
}

/* On phones the drawer's action bar is fixed to the bottom with a hard-coded
   white background, so in the dark theme every secondary action (Cancel, Hold
   and about forty more) was light text on white. It follows the surface now. */
.drawer-form .form-actions, .drawer-actions, .shift-detail-actions {
  background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
  border-top-color: var(--line) !important;
  box-shadow: none !important;
}

/* Sign-in: the same stage light as Tonight, Geist, hairline rows. */
.login-screen { background: var(--canvas); }
.login-brand strong { font-family: var(--font-sans) !important; font-weight: 500 !important; letter-spacing: .22em !important; }
.login-brand small { font-family: var(--font-mono); letter-spacing: .12em; color: var(--muted); }
.login-brand .brand-logo { background: var(--surface-raised); }
.login-card { border: 1px solid var(--line-soft) !important; background: var(--surface) !important; box-shadow: none !important; }
.login-card h1 { font-size: 40px !important; }
@media (min-width: 980px) {
  .login-showcase { background: var(--stage-light), var(--surface) !important; color: var(--ink) !important; border-right: 1px solid var(--line-soft); }
  .login-showcase::after, .login-showcase-glow { display: none !important; }
  .login-showcase-kicker { color: var(--muted) !important; font-family: var(--font-mono); font-weight: 400 !important; font-size: 11px !important; letter-spacing: .12em !important; }
  .login-showcase-title {
    font-family: var(--font-sans) !important;
    font-weight: 300 !important;
    font-size: clamp(36px, 3.6vw, 56px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    color: var(--ink) !important;
  }
  .login-showcase-points { gap: 0 !important; border-top: 1px solid var(--line); }
  .login-showcase-points li { padding: 14px 0 14px 24px !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; background: none !important; backdrop-filter: none !important; }
  .login-showcase-points li::before { left: 0 !important; top: 21px !important; width: 8px !important; height: 8px !important; border-radius: 0 !important; background: var(--accent) !important; box-shadow: none !important; }
  .login-showcase-points strong { color: var(--ink) !important; font-weight: 500; }
  .login-showcase-points span { color: var(--muted) !important; }
}

/* Leftovers from the October layer. */
.command-group-label { font-family: var(--font-mono) !important; font-weight: 400 !important; letter-spacing: .12em !important; color: var(--muted) !important; }
.donut-total { font-family: var(--font-sans) !important; font-weight: 300 !important; }

/* Print: theme.css switches to a light palette with :root[data-theme], which
   this file's dark block (same specificity, loaded later) overrode, so a
   statement printed on near-black. Restate the light palette last. */
@media print {
  :root, :root[data-theme] {
    color-scheme: light;
    --canvas: #fff; --surface: #fff; --surface-raised: #f4f4f4; --surface-hover: #f4f4f4; --surface-sunken: #eee; --surface-input: #fff;
    --ink: #000; --muted: #444; --muted-2: #555; --line: #ccc; --line-soft: #ddd; --line-strong: #999; --border: #ccc;
    --accent: #000; --accent-soft: #f2f2f2; --on-accent: #fff; --attention: #6b3d0a; --stage-light: none;
    --chart-1: #000; --chart-2: #555; --chart-3: #888; --chart-4: #aaa; --chart-5: #333; --chart-6: #ccc;
  }
  .phone-tabs { display: none !important; }
}