:root {
    --bg: #f0eeea;
    --surface: #e8e5e0;
    --surface2: #dedad4;
    --border: #b8b2a6;
    --border-bright: #b0aaa4;
    --text: #252422;
    --text-dim: #5a5450;
    --text-muted: #8a8480;
    --accent: #3d3830;
    --accent3: #8b3a2a;
    --green: #3a6b4a;
    --col-w: 160px; /* minimum column width */
    --row-h: auto;
    --weekend-h: 22px;
    --header-h: 120px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    min-height: 100vh;
    overflow: auto;
  }

  /* ── TOP BAR ── */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 24px;
    height: 56px;
  }

  .logo {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: var(--text);
    white-space: nowrap;
  }

  .logo span {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-dim);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-left: 14px;
    border-left: 1px solid var(--border);
    padding-left: 14px;
    vertical-align: middle;
  }

  .topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .project-badge {
    background: var(--surface2);
    border: 1px solid var(--border-bright);
    border-radius: 4px;
    padding: 5px 12px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 1px;
  }

  .btn {
    background: var(--surface2);
    border: 1px solid var(--border-bright);
    border-radius: 4px;
    padding: 6px 14px;
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .btn:hover { border-color: var(--accent); color: var(--accent); }
  .btn.primary { background: var(--accent); color: #e8e4dc; border-color: var(--accent); font-weight: 600; }
  .btn.primary:hover { background: #5a5040; }

  /* ── SETTINGS PANEL ── */
  .settings-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 200;
    backdrop-filter: blur(4px);
  }
  .settings-overlay.open { display: flex; align-items: center; justify-content: center; }

  .settings-panel {
    background: var(--bg);
    border: 1px solid var(--border-bright);
    border-radius: 8px;
    padding: 32px;
    width: 480px;
    max-width: 90vw;
  }

  .settings-panel h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    letter-spacing: 2px;
    color: var(--accent);
    margin-bottom: 6px;
  }

  .settings-panel p {
    color: var(--text-dim);
    font-size: 12px;
    margin-bottom: 24px;
    line-height: 1.6;
  }

  .field-group { margin-bottom: 18px; }
  .field-group label {
    display: block;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
  }

  .field-group input, .field-group select {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border-bright);
    border-radius: 4px;
    padding: 9px 12px;
    color: var(--text);
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    outline: none;
    transition: border-color 0.15s;
  }
  .field-group input:focus, .field-group select:focus {
    border-color: var(--accent);
  }
  .field-group select option { background: var(--surface); }

  .settings-actions { display: flex; gap: 10px; margin-top: 24px; }

  /* ── STATUS BAR ── */
  .statusbar {
    flex-shrink: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 8px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
  }

  .status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
  }
  .status-dot.live { background: var(--green); box-shadow: 0 0 6px var(--green); }
  .status-dot.error { background: var(--accent3); }
  .status-dot.loading { background: var(--accent); animation: pulse 1s infinite; }

  @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }

  /* ── FILTERS ── */
  .filters {
    flex-shrink: 0;
    padding: 8px 16px;
    background: var(--bg);
    display: flex;
    align-items: center;
    gap: 6px;
    row-gap: 4px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
  }

  .filter-label {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .filter-select {
    background: var(--surface2);
    border: 1px solid var(--border-bright);
    border-radius: 4px;
    padding: 5px 8px;
    color: var(--text);
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    outline: none;
    cursor: pointer;
    width: auto;
    max-width: 160px;
    min-width: 0;
    flex-shrink: 0;
  }
  .filter-select:focus { border-color: var(--accent); }

  .week-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; white-space: nowrap; }


  .week-label {
    display: none;
  }

  /* ── FLOATING STICKY HEADER ── */
  #cal-stickyHeader {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surface);
    border-bottom: 2px solid var(--border-bright);
    overflow: hidden;
    display: none;
  }
  #cal-stickyHeader table {
    border-collapse: collapse;
    table-layout: fixed;
  }
  #cal-stickyHeader th {
    background: var(--surface);
    padding: 0;
    text-align: left;
    white-space: nowrap;
    border-right: 1px solid var(--border);
  }
  #cal-stickyHeader .date-col { border-right: 2px solid var(--border-bright); }

  /* ── MAIN GRID ── */
  .calendar-wrap {
    padding: 0 0 40px 0;
    flex: 1;
    overflow-x: auto;  /* horizontal scroll here ONLY */
    overflow-y: visible;
  }
  #cal-gridContainer {
    width: auto;
    display: inline-block;
  }
  #cal-gridContainer table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  table {
    border-collapse: collapse;
    width: auto;
    min-width: unset;
  }

  /* ── Week column ── */
  th.week-col, td.week-col {
    position: sticky;
    left: 0;
    z-index: 10;
    background: var(--surface);
    border-right: 1px solid var(--border);
    width: 24px;
    min-width: 24px;
    max-width: 24px;
    text-align: center;
    padding: 0;
  }
  th.week-col { z-index: 20; font-size: 8px; font-weight: 700; letter-spacing: 1px;
                text-transform: uppercase; color: #8a8480;
                text-align: center; padding: 6px 2px; }
  td.week-col { vertical-align: top; padding: 4px 0; }
  .week-ind  { font-size: 9px; font-weight: 700;
               color: rgba(37,36,34,0.35); letter-spacing: 0.5px; }
  .week-dash { font-size: 9px; color: rgba(0,0,0,0.12); }

  /* Sticky date column — offset by week col width */
  th.date-col, td.date-col {
    position: sticky;
    left: 24px;
    z-index: 10;
    background: var(--bg);
    border-right: 2px solid var(--border-bright);
  }
  th.date-col { --sc: none; }

  thead th {
    background: var(--surface);
    border-bottom: 2px solid var(--border-bright);
    border-right: 1px solid var(--border);
    padding: 0;
    text-align: left;
    white-space: nowrap;
  }
  thead th.team-last-col {
    border-right: 3px solid var(--team-border, var(--border-bright));
  }
  thead th.team-first-col {
    border-left: 3px solid var(--team-border, var(--border-bright)) !important;
  }

  .th-inner {
    padding: 14px 16px 12px;
    overflow: hidden;
  }

  .th-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
  }

  /* Unstaffed line items (no person hired yet) — visually distinct from real staff. */
  .th-name-tbd {
    font-style: italic;
    font-weight: 500;
    color: var(--text-muted);
    opacity: 0.85;
  }

  .th-role {
    font-family: 'DM Sans', sans-serif;
    font-size: 9px;
    font-weight: 700;
    color: inherit;
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }
  .th-ep-list {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 1px;
  }
  .th-role-ep {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    flex-wrap: wrap;
  }
  .th-sep {
    color: var(--border-bright);
    font-size: 9px;
  }
  .th-eps { font-size: 10px; font-weight: 500; color: inherit; }

  .th-date {
    min-width: 80px;
  }
  .th-date .th-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--accent);
  }

  tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
  }
  tbody tr:hover { background: rgba(0,0,0,0.03); }
  tbody tr.weekend { background: rgba(0,0,0,0.06); }
  tbody tr.weekend:hover { background: rgba(0,0,0,0.09); }
  tbody tr.weekend td { height: 20px !important; padding-top: 2px !important; padding-bottom: 2px !important; }
  tbody tr.weekend td.has-content,
  tbody tr.weekend td.date-col { height: auto !important; padding: 4px 8px !important; }
  tbody tr.weekend .date-num { font-size: 12px; }
  /* weekend month/dow shown but kept small via existing font styles */
  tbody tr.today { background: transparent; }
  tbody tr.today td { border-top: 1px solid rgba(107,90,62,0.4); border-bottom: 1px solid rgba(107,90,62,0.4); }
  tbody tr.today td.date-col { border-left: 3px solid var(--accent); }

  td {
    border-right: 1px solid var(--border);
    padding: 0;
    vertical-align: top;
    overflow: hidden;
  }
  td.team-last-col {
    border-right: 3px solid var(--team-border, var(--border-bright));
  }
  td.team-first-col {
    border-left: 3px solid var(--team-border, var(--border-bright)) !important;
  }

  /* Date cell */
  td.date-col {
    padding: 8px 8px;
    width: 72px;
    min-width: 72px;
    max-width: 72px;
    vertical-align: top;
  }
  .date-num {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    line-height: 1;
  }
  .date-dow {
    font-family: 'DM Sans', sans-serif;
    font-size: 9px;
    font-weight: 400;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 1px;
  }
  .date-month {
    font-family: 'DM Sans', sans-serif;
    font-size: 9px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
  }
  tr.weekend .date-num { color: var(--text-muted); }
  tr.weekend .work-chip { opacity: 0.7; }
  tr.today .date-num { color: var(--accent); }

  /* Work cell */
  .work-cell {
    padding: 5px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    height: 100%;
    box-sizing: border-box;
  }

  .work-chip:hover { border-color: var(--staff-color, var(--border-bright)); }


  .chip-activity {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-dim);
    margin-top: 2px;
  }

  .chip-milestone {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.3px;
  }


  /* Empty cell */
  .cell-empty {
    width: 100%;
    height: 100%;
  }

  /* Global milestone chip (holiday etc.) */
  .chip-global-ms {
    background: rgba(255,255,255,0.85) !important;
    border: 1px solid rgba(61,56,48,0.3) !important;
    border-left: 3px solid var(--accent) !important;
  }
  .chip-global-ms .chip-milestone {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    letter-spacing: 0.3px;
  }

  /* Dark day */
  .cell-dark {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 8px;
  }
  tr.day-dark td { background: transparent; }

  .dark-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  /* Weekend shade */
  tr.weekend td { /* no opacity dim */ }

  /* ── LOADING STATE ── */
  .loading-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    gap: 16px;
    color: var(--text-dim);
  }

  .loading-screen .spinner {
    width: 32px; height: 32px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }

  @keyframes spin { to { transform: rotate(360deg); } }

  .loading-text {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    letter-spacing: 1px;
  }

  /* ── ERROR STATE ── */
  .error-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    gap: 12px;
    color: var(--text-dim);
    text-align: center;
    padding: 24px;
  }
  .error-screen .err-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    color: var(--accent3);
    letter-spacing: 2px;
  }
  .error-screen p { font-size: 12px; max-width: 400px; line-height: 1.6; }

  /* ── LEGEND ── */
  .legend {
    display: flex;
    gap: 16px;
    padding: 10px 24px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    margin-top: auto;
  }
  .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--text-muted);
  }
  .legend-dot {
    width: 8px; height: 8px;
    border-radius: 1px;
    flex-shrink: 0;
  }

  /* Tooltip */
  .work-chip[title]:hover::after {
    content: attr(title);
    position: absolute;
    background: var(--surface);
    border: 1px solid var(--border-bright);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 10px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 50;
    margin-top: 2px;
    color: var(--text);
  }

  .cal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 52px); /* hub topbar is 52px */
    overflow: hidden;
  }

  #cal-fixedHeader {
    flex-shrink: 0;
    overflow: hidden;
    border-bottom: 2px solid var(--border-bright);
    background: var(--surface);
  }

  /* ── MOBILE (phones < 768px) ────────────────────────────── */
  @media (max-width: 767px) {

    /* Topbar — tighten up */
    .topbar { padding: 0 12px; gap: 10px; }
    .logo { font-size: 16px; letter-spacing: 1px; }
    .logo span { display: none; }

    /* Filters — wrap and shrink */
    .filters {
      padding: 8px 12px;
      gap: 4px;
      row-gap: 4px;
    }
    .filter-label { font-size: 9px; }
    .filter-select { font-size: 11px; padding: 4px 6px; max-width: 110px; }

    /* Hide week column on mobile — too narrow */
    th.week-col, td.week-col { display: none !important; }

    /* Date column narrower */
    th.date-col, td.date-col {
      left: 0 !important;
      width: 48px !important;
      min-width: 48px !important;
      max-width: 48px !important;
      padding: 4px 4px !important;
    }
    .date-num { font-size: 13px !important; }
    .date-month, .date-dow { font-size: 8px !important; }

    /* Smaller column minimum */
    :root { --col-w: 110px !important; }

    /* Chips — compact */
    .work-chip { padding: 3px 5px; }
    .chip-ep { font-size: 10px !important; }
    .chip-milestone { font-size: 9px !important; }
    .chip-editday { font-size: 8px !important; }

    /* Column headers */
    .th-inner { padding: 8px 8px 6px !important; }
    .th-name { font-size: 11px !important; }
    .th-role { font-size: 9px !important; }

    /* Week nav — hide date label, keep buttons */
    .week-label { display: none; }
    .week-nav { gap: 4px; }

    /* Status bar — shorter */
    .statusbar { padding: 5px 12px; font-size: 10px; }
  }
  /* ── Team bracket header ── */
  .team-bracket-row th {
    background: transparent;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    padding: 0;
    white-space: nowrap;
    text-align: center;
  }
  .team-bracket-cell {
    /* background set via inline style per team color */
  }
  .team-date-label {
    padding: 6px 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .team-row-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
    padding: 6px 2px;
  }

  .team-bracket-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text);
    padding: 7px 14px 6px;
    text-align: center;
  }

  /* ── Team push buttons (next to bracket header label) ── */
  .team-push-btn {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 2px 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    vertical-align: middle;
  }
  .team-push-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  /* ── DRAFT MODE BADGE ── */
  .draft-badge {
    display: none;
    align-items: center;
    gap: 6px;
    background: rgba(139,90,42,0.15);
    border: 1px solid #8b5a2a;
    border-radius: 4px;
    padding: 5px 10px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    color: #8b5a2a;
    letter-spacing: 1.5px;
  }
  .draft-badge .draft-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #d97706;
    box-shadow: 0 0 6px #d97706;
    flex-shrink: 0;
  }
  .mode-draft .draft-badge { display: flex; }
  .mode-draft #cal-btnEditSchedule { display: none; }
  .mode-draft #cal-btnDiscard { display: flex; }
  .mode-draft #cal-btnPublish { display: flex; }
  .mode-view #cal-btnDiscard { display: none; }
  .mode-view #cal-btnPublish { display: none; }

  /* ── UNRECORDED BADGE ── */
  .unrecorded-badge {
    background: rgba(139,58,42,0.12);
    border: 1px solid rgba(139,58,42,0.4);
    border-radius: 4px;
    padding: 4px 8px;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--accent3);
    cursor: pointer;
    white-space: nowrap;
  }
  .unrecorded-badge:hover { border-color: var(--accent3); }

  /* ── DRAFT TOOLBAR ── */
  #cal-draftToolbar {
    display: flex;
    flex-shrink: 0;
    background: rgba(139,90,42,0.07);
    border-bottom: 1px solid rgba(139,90,42,0.25);
    padding: 6px 24px;
    align-items: center;
    gap: 12px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
  }
  #cal-draftToolbar .toolbar-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
  .toolbar-status { display: flex; align-items: center; gap: 8px; margin: 0 auto; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-dim); }
  .cascade-label { color: var(--text-muted); letter-spacing: 0.5px; }
  .cascade-toggle {
    display: flex;
    background: var(--surface2);
    border: 1px solid var(--border-bright);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    font-size: 10px;
    font-family: 'DM Mono', monospace;
  }
  .cascade-toggle span {
    padding: 4px 10px;
    color: var(--text-muted);
    transition: all 0.15s;
  }
  .cascade-toggle span.active {
    background: var(--accent);
    color: #e8e4dc;
    font-weight: 600;
  }

  /* Draft toolbar layout sections */
  .toolbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .toolbar-timestamp {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
  }

  /* Conflict count badge in toolbar */
  .conflict-count {
    margin-left: auto;
    background: rgba(139,58,42,0.15);
    border: 1px solid rgba(139,58,42,0.4);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 10px;
    color: var(--accent3);
    display: none;
  }
  .conflict-count.visible { display: block; }

  /* ── PIN MODAL ── */
  .pin-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 300;
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
  }
  .pin-overlay.open { display: flex; }
  .pin-panel {
    background: var(--bg);
    border: 1px solid var(--border-bright);
    border-radius: 8px;
    padding: 32px;
    width: 320px;
    text-align: center;
  }
  .pin-panel h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 2px;
    color: var(--accent);
    margin-bottom: 8px;
  }
  .pin-panel p {
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 20px;
    font-family: 'DM Mono', monospace;
  }
  .pin-input {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border-bright);
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 22px;
    font-family: 'DM Mono', monospace;
    letter-spacing: 8px;
    text-align: center;
    color: var(--text);
    outline: none;
    margin-bottom: 16px;
  }
  .pin-input:focus { border-color: var(--accent); }
  .pin-error {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--accent3);
    margin-bottom: 12px;
    min-height: 16px;
  }
  .pin-actions { display: flex; gap: 8px; justify-content: center; }

  /* ── CHIP DETAIL PANEL ── */
  .chip-panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 250;
  }
  .chip-panel-overlay.open { display: block; }
  #cal-chipPanel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg);
    border: 1px solid var(--border-bright);
    border-radius: 8px;
    padding: 18px 20px 16px;
    width: 320px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    z-index: 251;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
  }
  .chip-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
  .chip-panel-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    letter-spacing: 0.5px;
    color: var(--text);
  }
  .chip-panel-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-muted);
    padding: 0 4px;
    line-height: 1;
  }
  .chip-panel-close:hover { color: var(--text); }
  .chip-panel-body { display: flex; flex-direction: column; gap: 10px; }
  .chip-panel-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .chip-panel-row label {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }
  .chip-panel-row span { font-size: 13px; }
  .chip-panel-row select, .chip-panel-row input, .chip-panel-row textarea {
    background: var(--surface2);
    border: 1px solid var(--border-bright);
    border-radius: 4px;
    padding: 5px 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: var(--text);
    width: 100%;
  }
  .chip-panel-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
  }
  .chip-panel-ep-link {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }
  .chip-panel-ep-link:hover { border-bottom-color: var(--accent); }
  .chip-panel-staff { font-size: 12px; color: var(--text-dim); }
  .chip-panel-day {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 14px;
  }
  .chip-panel-editday-link {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    font-size: 10px;
    font-family: 'DM Mono', monospace;
  }
  .chip-panel-editday-link:hover { border-bottom-color: var(--accent); }
  .chip-panel-sep {
    border: none;
    border-top: 1px solid var(--border);
    margin: 12px 0;
  }
  .ep-chips-wrap { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
  .ep-chip-btn {
    font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 600;
    padding: 3px 9px; border-radius: 3px; border: 1.5px solid var(--border-bright);
    background: var(--surface2); color: var(--text-dim); cursor: pointer;
    transition: all 0.12s;
  }
  .ep-chip-btn.selected {
    background: var(--accent); border-color: var(--accent); color: #e8e4dc;
  }
  .ep-chip-btn:hover { border-color: var(--accent); }
  .panel-field { margin-bottom: 12px; }
  .panel-field label {
    display: block;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 5px;
  }
  .panel-field select, .panel-field input, .panel-field textarea {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border-bright);
    border-radius: 4px;
    padding: 7px 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: var(--text);
    outline: none;
  }
  .panel-field select:focus, .panel-field input:focus, .panel-field textarea:focus {
    border-color: var(--accent);
  }
  .panel-field select option { background: var(--surface); }
  .panel-field textarea { resize: vertical; min-height: 60px; font-size: 12px; }
  .panel-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
  .panel-actions .btn-danger {
    background: transparent;
    border: 1px solid rgba(139,58,42,0.4);
    border-radius: 4px;
    padding: 5px 12px;
    color: var(--accent3);
    font-size: 11px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    margin-left: auto;
  }
  .panel-actions .btn-danger:hover { background: rgba(139,58,42,0.08); }
  .panel-ms-type-link {
    font-weight: 700;
    font-size: 13px;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }
  .panel-ms-type-link:hover { border-bottom-color: var(--accent); }
  .panel-date-display {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    color: var(--text);
    margin-bottom: 4px;
  }
  .panel-baseline-note {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--text-muted);
  }
  .split-day-section { margin-top: 10px; }
  .split-day-section .split-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
  }
  .split-day-section select { flex: 1; }
  .split-fraction { width: 60px !important; text-align: center; }

  /* ── DRAG GHOST ── */
  #cal-dragGhost {
    position: fixed;
    pointer-events: none;
    z-index: 500;
    opacity: 0.75;
    transform: rotate(2deg);
    display: none;
  }

  /* Drop target cell highlight */
  .drop-target {
    outline: 2px dashed var(--accent) !important;
    outline-offset: -2px;
  }
  .drop-target-invalid {
    outline: 2px dashed #c0392b !important;
    outline-offset: -2px;
    background: rgba(192,57,43,0.06) !important;
  }
  .conflict-chip {
    border-left: 3px solid #c0392b !important;
    position: relative;
  }
  .conflict-chip::after {
    content: '!';
    position: absolute;
    top: 2px; right: 4px;
    font-size: 9px;
    font-weight: 700;
    color: #c0392b;
  }

  /* Drag active body state */
  body.dragging { cursor: grabbing !important; user-select: none; }

  /* Interactive chips in Draft Mode */
  .mode-draft .work-chip[data-chip-type] { cursor: grab; }
  .mode-draft .work-chip[data-chip-type]:active { cursor: grabbing; }

  /* Conflict chip */
  .chip-conflict { border-left: 3px solid #c0392b !important; }
  .chip-conflict::after {
    content: '!';
    position: absolute;
    top: 2px; right: 4px;
    font-size: 9px;
    font-weight: 700;
    color: #c0392b;
  }

  /* Locked milestone (actualDate set) */
  .chip-locked { opacity: 0.55; cursor: not-allowed !important; }

  /* Exception day chip (work entry dropped on weekend/holiday) */
  .chip-exception {
    border-left: 3px solid #d97706 !important;
    background: rgba(217,119,6,0.1) !important;
  }

  .conflict-date-link {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    color: #c0392b;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: underline;
  }
  .conflict-count-btn {
    margin-left: 8px;
    background: rgba(139,58,42,0.12);
    border: 1px solid rgba(139,58,42,0.35);
    border-radius: 4px;
    padding: 3px 10px;
    color: var(--accent3);
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .conflict-count-btn:hover { background: rgba(139,58,42,0.2); }
  .conflict-count-btn.no-conflicts {
    background: rgba(58,107,74,0.12);
    border-color: rgba(58,107,74,0.35);
    color: var(--green);
  }
  .conflict-count-btn.no-conflicts:hover { background: rgba(58,107,74,0.2); }
  @keyframes conflict-jump-flash {
    0%, 100% { background: transparent; }
    25%, 75%  { background: rgba(192,57,43,0.15); }
  }
  .conflict-jump-flash { animation: conflict-jump-flash 1.2s ease; }

  /* ── CONFLICT POPOVER ── */
  .conflict-popover {
    position: fixed;
    background: var(--bg);
    border: 1px solid var(--border-bright);
    border-radius: 6px;
    padding: 10px 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 500;
    min-width: 280px;
    max-width: 400px;
    max-height: 320px;
    overflow-y: auto;
    font-size: 12px;
  }
  .conflict-popover-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
  }
  .conflict-popover-row:last-child { border-bottom: none; }

  /* ── PUBLISH REVIEW PANEL ── */
  .publish-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 300;
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
  }
  .publish-overlay.open { display: flex; }
  .publish-panel {
    background: var(--bg);
    border: 1px solid var(--border-bright);
    border-radius: 8px;
    width: 600px;
    max-width: 92vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .publish-panel-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .publish-panel-header h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 2px;
    color: var(--accent);
    margin-bottom: 6px;
  }
  .publish-summary {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
  }
  .publish-panel-body {
    overflow-y: auto;
    flex: 1;
    padding: 16px 24px;
  }
  .publish-conflicts-section {
    background: rgba(139,58,42,0.07);
    border: 1px solid rgba(139,58,42,0.3);
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 16px;
  }
  .publish-conflicts-section h3 {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent3);
    margin-bottom: 10px;
  }
  .conflict-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-dim);
  }
  .conflict-item input[type=checkbox] { margin-top: 2px; flex-shrink: 0; }
  .ep-diff-block {
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 10px;
    overflow: hidden;
  }
  .ep-diff-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--surface);
    cursor: pointer;
    user-select: none;
  }
  .ep-diff-header input[type=checkbox] { flex-shrink: 0; }
  .ep-diff-title {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    flex: 1;
  }
  .ep-diff-toggle { font-size: 10px; color: var(--text-muted); }
  .ep-diff-body { padding: 10px 14px; display: none; }
  .ep-diff-body.open { display: block; }
  .diff-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
    padding: 3px 0;
    border-bottom: 1px solid var(--surface);
  }
  .diff-row:last-child { border-bottom: none; }
  .diff-type { color: var(--text-muted); font-size: 10px; width: 80px; flex-shrink: 0; }
  .diff-label { flex: 1; }
  .diff-old { text-decoration: line-through; color: var(--text-muted); }
  .diff-arrow { color: var(--accent); }
  .diff-new { color: var(--accent); font-weight: 600; }
  .publish-panel-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-shrink: 0;
  }

  /* Episode popover (post work-entry drop) */
  .ep-popover {
    position: fixed;
    background: var(--bg);
    border: 1px solid var(--border-bright);
    border-radius: 6px;
    padding: 14px 16px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    z-index: 400;
    width: 240px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
  }
  .ep-popover h4 {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
  }
  .ep-popover select {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border-bright);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 12px;
    font-family: 'DM Mono', monospace;
    color: var(--text);
    margin-bottom: 10px;
    outline: none;
  }
  .ep-popover .btn-row { display: flex; gap: 8px; justify-content: flex-end; }

  /* ── Role chip multi-select in panels ── */
  .role-chips-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
  .role-chip-label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
  .role-chip-label input[type="checkbox"] { display: none; }
  .role-chip {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1.5px solid var(--border-bright);
    background: var(--surface2);
    color: var(--text-dim);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    user-select: none;
  }
  .role-chip-label input[type="checkbox"]:checked + .role-chip {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .role-chip-label:hover .role-chip { border-color: var(--accent); }

  /* ── Full entry side panel ── */
  .full-entry-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0,0,0,0.3);
  }
  .full-entry-overlay.open { display: flex; align-items: stretch; justify-content: flex-end; }
  .full-entry-panel {
    width: min(520px, 100vw);
    background: var(--bg);
    border-left: 1px solid var(--border-bright);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .full-entry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    letter-spacing: 0.5px;
  }
  .full-entry-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .full-entry-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }
  .full-entry-body .field-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .full-entry-body .field-row label {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
  }
  .full-entry-body .field-row input,
  .full-entry-body .field-row select,
  .full-entry-body .field-row textarea {
    background: var(--surface2);
    border: 1px solid var(--border-bright);
    border-radius: 4px;
    padding: 6px 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: var(--text);
    width: 100%;
  }

  /* ── Progress bar in column headers ── */
  .prog-track {
    height: 3px;
    background: rgba(0,0,0,0.08);
    margin-top: 7px;
    border-radius: 0;
  }
  .prog-fill {
    height: 100%;
    border-radius: 0;
    transition: width 0.3s;
  }

  /* ── Episode chip layout ── */
  .chip-info { flex: 1; min-width: 0; }
  .chip-ep   { font-size: 11px; font-weight: 600; line-height: 1.2;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chip-role { font-size: 8px; font-weight: 700; letter-spacing: 0.5px;
               text-transform: uppercase; opacity: 0.6; margin-top: 1px; }
  .chip-bdg  { font-size: 8px; font-weight: 700; padding: 2px 5px;
               border-radius: 2px; white-space: nowrap; flex-shrink: 0; }
  .chip-bdg-sched { opacity: 0.65; font-style: italic; letter-spacing: 0.3px; }
  /* Badge wrapper for chips with multiple badges (edit day + divider) */
  .chip-badges { display: flex; flex-direction: column; align-items: flex-end;
                 gap: 2px; flex-shrink: 0; }
  /* Divider percentage badge — subtle, doesn't compete with episode label */
  .chip-bdg-divider { font-size: 8px; font-weight: 500; padding: 1px 4px;
                      border-radius: 2px; white-space: nowrap;
                      background: rgba(0,0,0,0.06); color: var(--text-muted);
                      font-style: normal; }
  /* Unallocated day placeholder chip */
  .chip-unallocated { border: 1px dashed var(--border-bright); border-radius: 3px;
                      padding: 3px 6px; font-size: 10px; font-weight: 500;
                      color: var(--text-muted); cursor: pointer; text-align: center;
                      font-family: 'DM Mono', monospace; letter-spacing: 0.3px;
                      transition: border-color 0.15s, color 0.15s, background 0.15s; }
  .chip-unallocated:hover { border-color: var(--accent); color: var(--accent);
                            background: rgba(61,56,48,0.04); }
  /* Over-allocation warning chip */
  .chip-overallocated { border-left: 3px solid #c0392b; border-radius: 3px;
                        background: rgba(192,57,43,0.07); padding: 2px 6px;
                        font-size: 9px; font-weight: 700; color: #c0392b;
                        font-family: 'DM Mono', monospace; letter-spacing: 0.3px; }
  .work-chip { border-radius: 3px; padding: 3px 6px; display: flex;
               align-items: center; justify-content: space-between;
               gap: 4px; border: 1px solid; margin-bottom: 2px; cursor: default;
               transition: border-color 0.1s; flex-shrink: 0; }

  /* ── Milestone chips ── */
  .ms-chips-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .ms-chip {
    border-radius: 3px;
    padding: 3px 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    font-size: 10px;
  }
  /* Foreign milestone — belongs to a different episode in the same season */
  .ms-chip-foreign {
    opacity: 0.32;
    filter: saturate(0.2);
  }

  .ms-chip-cut {
    background: #6b1a1a;
    border: 1px solid #4a0f0f;
    color: #f5c4b3;
  }
  .ms-chip-cut .ms-chip-label { font-weight: 600; letter-spacing: 0.2px; }
  .ms-chip-cut .ms-chip-bdg {
    font-size: 8px; font-weight: 700; padding: 2px 5px;
    border-radius: 2px; background: rgba(255,255,255,0.14);
    color: #f5c4b3; white-space: nowrap; flex-shrink: 0;
  }
  .ms-chip-notes {
    background: #f0eeea;
    border: 1.5px solid #7a1515;
    color: #7a1515;
  }
  .ms-chip-notes .ms-chip-label { font-weight: 600; letter-spacing: 0.2px; }
  .ms-chip-notes .ms-chip-bdg {
    font-size: 8px; font-weight: 700; padding: 2px 5px;
    border-radius: 2px; background: rgba(122,21,21,0.1);
    color: #7a1515; white-space: nowrap; flex-shrink: 0;
  }
  .ms-conflict-label {
    color: #c0392b; font-weight: 700; font-size: 9px;
    text-transform: uppercase; letter-spacing: 0.4px;
  }


  /* ── Status indicators in filter bar ── */
  .status-indicator {
    display: flex; align-items: center; gap: 5px;
    font-family: 'DM Mono', monospace; font-size: 11px;
    color: var(--text-dim);
  }
  .status-dot-red  { width: 6px; height: 6px; border-radius: 50%; background: #c0392b; flex-shrink: 0; }
  .status-dot-gray { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
  .status-dot-green { width: 6px; height: 6px; border-radius: 50%; background: #3a6b4a; flex-shrink: 0; }

  /* ── WORK ENTRIES GRID ── */
  .we-grid-panel {
    position: fixed;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1400px, 100vw);
    max-width: 100vw;
    background: var(--bg);
    border-left: 1px solid var(--border-bright);
    border-right: 1px solid var(--border-bright);
    display: flex;
    flex-direction: column;
    z-index: 400;
    overflow: hidden;
  }
  .we-grid-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-bright);
    flex-shrink: 0;
  }
  .we-grid-title {
    font-family: 'Bebas Neue', cursive;
    font-size: 20px;
    letter-spacing: 1px;
    line-height: 1.1;
  }
  .we-grid-subtitle {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 1px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 1px;
  }
  .we-save-status {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    margin-left: auto;
    margin-right: 8px;
  }
  .we-filter-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg);
  }
  .we-bulk-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .we-grid-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
  }
  .we-grid-body table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
  }
  .we-grid-body th {
    background: var(--surface);
    border-bottom: 2px solid var(--border-bright);
    position: sticky;
    top: 0;
    z-index: 2;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 8px;
    white-space: nowrap;
    text-align: left;
  }
  .we-grid-body td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
  }
  .we-group-header td {
    background: var(--surface2);
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 6px 10px;
    max-width: none;
    white-space: nowrap;
    overflow: visible;
  }
  .we-cell { cursor: pointer; }
  .we-cell:hover { background: var(--surface2); }
  .we-cell-span { display: block; overflow: hidden; text-overflow: ellipsis; }
  .we-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }