/*
  Production Tracker — visual system v2
  Author: Emiliano Sifri Venegas Ramirez
  Portfolio: https://www.instagram.com/emilianosifri?igsh=MXM3OGJlcXcwN2h6OA==

  Rebuilt as one coherent stylesheet (tokens → base → primitives →
  layout → views → schedule → responsive) instead of stacked patches.
  The design language is taken from the Schedule tab, which set the
  bar: quiet panels, hairline borders, mono kickers, status color as
  the only loud voice on the page.
*/

/* =====================================================================
   1. TOKENS
   ===================================================================== */
:root {
  --bg: #060f1b;
  --bg-raise: #081524;
  --panel: #0b1a2b;
  --card: #0e2033;
  --card-soft: #12283e;
  --ink-well: rgba(4, 11, 19, 0.65);

  --border: rgba(158, 194, 232, 0.12);
  --border-strong: rgba(158, 194, 232, 0.24);

  --text: #eaf2fa;
  --muted: #89a1bb;
  --muted-strong: #b4c7da;

  --accent: #38bdf8;
  --accent-deep: #0369a1;
  --accent-soft: rgba(56, 189, 248, 0.14);
  --danger: #ef4444;
  --danger-deep: #991b1b;
  --green: #22c55e;
  --amber: #f59e0b;
  --orange: #f97316;
  --slate: #475569;
  --violet: #8b5cf6;
  --cyan: #06b6d4;
  --yellow: #eab308;
  --pink: #f472b6;

  --view-accent: var(--accent);
  --view-accent-rgb: 56, 189, 248;
  --view-secondary: var(--green);
  --view-secondary-rgb: 34, 197, 94;
  --view-panel: rgba(56, 189, 248, 0.08);
  --view-panel-strong: rgba(56, 189, 248, 0.14);
  --view-border: rgba(56, 189, 248, 0.32);
  --view-border-strong: rgba(56, 189, 248, 0.52);
  --view-glow: rgba(56, 189, 248, 0.34);

  --radius: 20px;
  --radius-small: 14px;
  --radius-xs: 10px;
  --control-h: 42px;

  /* Layered elevation: tight contact shadow + ambient falloff. */
  --shadow-soft:
    0 1px 2px rgba(2, 8, 16, 0.5),
    0 8px 20px rgba(2, 8, 16, 0.34),
    0 24px 48px -18px rgba(2, 8, 16, 0.5);
  --shadow-raise:
    0 2px 4px rgba(2, 8, 16, 0.55),
    0 14px 30px rgba(2, 8, 16, 0.42),
    0 34px 64px -20px rgba(3, 10, 20, 0.6);
  --glow-accent: 0 0 24px -4px rgba(56, 189, 248, 0.4);
  --glow-green: 0 0 22px -6px rgba(34, 197, 94, 0.45);

  /* Surfaces read as lit from above: brighter top edge, deeper base. */
  --surface-panel: linear-gradient(180deg, rgba(20, 40, 63, 0.85), rgba(9, 21, 36, 0.92)) padding-box, var(--panel);
  --card-sheen:
    inset 0 1px 0 rgba(214, 234, 255, 0.09),
    inset 0 -1px 0 rgba(2, 8, 16, 0.4);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(56, 189, 248, 0.55);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --font-head: "Outfit", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

/* =====================================================================
   2. BASE
   ===================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  min-height: 100%;
  width: 100%;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-head);
  font-size: 17px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  background: var(--bg);
  overflow-y: visible;
  overscroll-behavior-y: auto;
  touch-action: pan-y;
}

@supports (overflow: clip) {
  html,
  body { overflow-x: clip; }
}

/* All atmosphere lives on one fixed, GPU-composited layer so scrolling never
   repaints it — this is what killed the background flicker/jitter. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transform: translateZ(0);
  background:
    linear-gradient(rgba(158, 194, 232, 0.03) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(158, 194, 232, 0.03) 1px, transparent 1px) 0 0 / 44px 44px,
    radial-gradient(1200px 480px at 18% -8%, rgba(56, 189, 248, 0.13), transparent 66%),
    radial-gradient(1000px 420px at 88% -12%, rgba(139, 92, 246, 0.07), transparent 62%),
    radial-gradient(900px 520px at 50% 118%, rgba(6, 182, 212, 0.06), transparent 70%),
    linear-gradient(180deg, #081527 0%, var(--bg) 40%, #040b14 100%);
}

h1, h2, h3, h4, p { margin: 0; }

::selection { background: rgba(56, 189, 248, 0.32); }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus { outline: none; }
:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

* { scrollbar-width: thin; scrollbar-color: rgba(120, 152, 188, 0.35) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(120, 152, 188, 0.3); border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

/* Kicker: the mono, uppercase eyebrow used across the app. */
.dashboard-kicker,
.eyebrow,
.chip-label,
.insight-label,
.drive-step-label,
.stat .label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =====================================================================
   3. PRIMITIVES — buttons
   ===================================================================== */
button,
.file-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--control-h);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 8px 16px;
  color: var(--text);
  background: var(--card);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(180deg, #12283e, #0d1e31);
  box-shadow: inset 0 1px 0 rgba(214, 234, 255, 0.07), 0 1px 2px rgba(2, 8, 16, 0.45);
  transition:
    border-color 160ms var(--ease-out),
    background-color 160ms var(--ease-out),
    color 160ms var(--ease-out),
    transform 160ms var(--ease-out),
    box-shadow 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  button:hover:not(:disabled),
  .file-label:hover {
    border-color: var(--border-strong);
    background: linear-gradient(180deg, #16304a, #102438);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(214, 234, 255, 0.09), 0 6px 14px -4px rgba(2, 8, 16, 0.6);
  }
}

button:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(2, 8, 16, 0.5); }

button:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  border-color: rgba(120, 212, 255, 0.65);
  background: linear-gradient(180deg, #3fb3ef 0%, #1a8ad2 55%, #1173b4 100%);
  color: #04121f;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(3, 34, 56, 0.45),
    0 4px 14px -3px rgba(56, 189, 248, 0.45);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #55c1f5 0%, #2398de 55%, #157fc4 100%);
  border-color: rgba(160, 226, 255, 0.9);
  color: #04121f;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(3, 34, 56, 0.45),
    0 8px 22px -4px rgba(56, 189, 248, 0.55);
}

.btn-add {
  border-color: rgba(56, 189, 248, 0.4);
  background: var(--accent-soft);
  color: #9adcff;
}
.btn-add:hover:not(:disabled) { background: rgba(56, 189, 248, 0.22); border-color: rgba(56, 189, 248, 0.6); }

.tracker-workspace .btn-add {
  border-color: var(--view-border-strong, rgba(56, 189, 248, 0.4));
  background: rgba(var(--view-accent-rgb), 0.12);
  color: #dff6ff;
}
.tracker-workspace .btn-add:hover:not(:disabled) {
  border-color: rgba(var(--view-accent-rgb), 0.68);
  background: rgba(var(--view-accent-rgb), 0.2);
}

.btn-green {
  border-color: rgba(84, 224, 138, 0.6);
  background: linear-gradient(180deg, #2cbd62 0%, #189049 60%, #12793d 100%);
  color: #03130a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(4, 42, 20, 0.5),
    0 4px 14px -3px rgba(34, 197, 94, 0.4);
}
.btn-green:hover:not(:disabled) {
  background: linear-gradient(180deg, #39d073 0%, #1ea254 60%, #168a46 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(4, 42, 20, 0.5),
    0 8px 20px -4px rgba(34, 197, 94, 0.5);
}

.btn-ghost {
  background: transparent;
  color: var(--muted-strong);
  box-shadow: none;
}
.btn-ghost:hover:not(:disabled) { box-shadow: none; transform: none; }
.btn-ghost:hover:not(:disabled) { color: var(--text); background: rgba(158, 194, 232, 0.07); }
.btn-ghost.active { color: var(--accent); border-color: rgba(56, 189, 248, 0.45); background: var(--accent-soft); }

.btn-danger {
  border-color: rgba(252, 129, 129, 0.6);
  background: linear-gradient(180deg, #ef4444 0%, #cf2929 60%, #b91c1c 100%);
  color: #fff;
  text-shadow: 0 1px 3px rgba(80, 7, 7, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(80, 7, 7, 0.45),
    0 4px 14px -4px rgba(239, 68, 68, 0.5);
}
.btn-danger:hover:not(:disabled) {
  background: linear-gradient(180deg, #f75c5c 0%, #dd3232 60%, #c62222 100%);
  border-color: rgba(255, 165, 165, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(80, 7, 7, 0.45),
    0 7px 18px -4px rgba(239, 68, 68, 0.6);
}

.btn-danger-ghost {
  background: transparent;
  border-color: transparent;
  color: #f8867f;
  box-shadow: none;
}
.btn-danger-ghost:hover:not(:disabled) { box-shadow: none; transform: none; }
.btn-danger-ghost:hover:not(:disabled) { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.35); color: #fda4a4; }

.btn-mini {
  min-height: 32px;
  padding: 5px 12px;
  font-size: 0.78rem;
  border-radius: 9px;
}

.add-row-btn { width: 100%; margin-top: 14px; }

/* =====================================================================
   3b. PRIMITIVES — fields & forms
   ===================================================================== */
.field { display: grid; gap: 6px; min-width: 0; }

.field label,
.settings-form label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

input[type="text"],
input[type="url"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
textarea,
select {
  width: 100%;
  min-height: var(--control-h);
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--ink-well);
  color: var(--text);
  color-scheme: dark;
  box-shadow: inset 0 2px 5px rgba(2, 8, 16, 0.45), inset 0 0 0 1px rgba(2, 8, 16, 0.15);
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out), box-shadow 200ms var(--ease-out);
}

input[type="date"] { font-family: var(--font-mono); font-size: 0.82rem; }
input[type="number"] { font-family: var(--font-mono); }

input::placeholder,
textarea::placeholder { color: rgba(137, 161, 187, 0.55); }

input:hover:not(:disabled),
textarea:hover:not(:disabled) { border-color: var(--border-strong); }

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow:
    inset 0 2px 5px rgba(2, 8, 16, 0.4),
    0 0 0 3px rgba(56, 189, 248, 0.18),
    0 0 16px -4px rgba(56, 189, 248, 0.4);
  border-radius: var(--radius-xs);
}

input[readonly] { color: var(--muted); background: rgba(4, 11, 19, 0.4); }

textarea {
  min-height: 64px;
  resize: vertical;
  line-height: 1.4;
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.field-hint {
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.45;
}

.form-grid { display: grid; gap: 14px; }

.option-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: rgba(158, 194, 232, 0.04);
  font-size: 0.86rem;
  color: var(--muted-strong);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.option-toggle:hover { border-color: var(--border-strong); background: rgba(158, 194, 232, 0.07); }
.option-toggle input { margin-top: 2px; flex: 0 0 auto; }

/* =====================================================================
   3c. PRIMITIVES — dropdown
   ===================================================================== */
.dropdown { position: relative; min-width: 0; }

.dropdown-button {
  width: 100%;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--ink-well);
  font-weight: 500;
  text-align: left;
}
@media (hover: hover) and (pointer: fine) {
  .dropdown-button:hover:not(:disabled) { background: rgba(4, 11, 19, 0.85); }
}
.dropdown.open .dropdown-button {
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16);
}

.dropdown-current {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.dropdown-caret {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--muted);
  transform: scaleY(0.8);
  transition: transform 140ms ease, color 140ms ease;
}
.dropdown.open .dropdown-caret { transform: scaleY(-0.8); color: var(--accent); }

/* Hidden until the JS portals it to <body> and sets display:grid. */
.dropdown-menu { display: none; }

.dropdown-menu-portal {
  z-index: 240;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  background: rgba(13, 30, 49, 0.92);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  box-shadow:
    inset 0 1px 0 rgba(214, 234, 255, 0.08),
    0 8px 20px rgba(2, 8, 16, 0.5),
    0 28px 56px -12px rgba(2, 8, 16, 0.7);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dropdown-option {
  position: relative;
  width: 100%;
  min-height: 36px;
  justify-content: flex-start;
  gap: 10px;
  padding: 7px 10px 7px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-weight: 500;
  font-size: 0.85rem;
  text-align: left;
  color: var(--muted-strong);
}
.dropdown-option::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .dropdown-option:hover:not(:disabled) { background: rgba(158, 194, 232, 0.09); color: var(--text); }
}
.dropdown-option.active { color: var(--text); background: transparent; font-weight: 600; }
.dropdown-option.active::before { opacity: 1; }

.dropdown-swatch {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.dropdown-option-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown.is-disabled .dropdown-button,
.dropdown.is-disabled .dropdown-option {
  cursor: default;
}

/* =====================================================================
   3d. PRIMITIVES — badges, chips, meters, avatars, empty states
   ===================================================================== */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #a8bccf;
  background: rgba(71, 85, 105, 0.26);
}

.badge-unstarted { color: #94a3b8; background: rgba(71, 85, 105, 0.26); }
.badge-wip,
.badge-rough,
.badge-shooting { color: #ffc861; background: rgba(245, 158, 11, 0.16); }
.badge-cbb { color: #ffab73; background: rgba(249, 115, 22, 0.16); }
.badge-finished { color: #6ee7a0; background: rgba(34, 197, 94, 0.16); }
.badge-late,
.badge-redo { color: #fca5a5; background: rgba(239, 68, 68, 0.17); }
.badge-blockout,
.badge-layout,
.badge-review,
.badge-tests { color: #7dd3fc; background: rgba(56, 189, 248, 0.15); }
.badge-polish,
.badge-background,
.badge-client { color: #c4b0ff; background: rgba(139, 92, 246, 0.16); }
.badge-surfacing,
.badge-color,
.badge-render,
.badge-compositing { color: #67e8f9; background: rgba(6, 182, 212, 0.15); }
.badge-lighting,
.badge-cleanup,
.badge-quickfix { color: #fde26b; background: rgba(234, 179, 8, 0.15); }
.badge-vfx { color: #f9a8d4; background: rgba(236, 72, 153, 0.16); }

.late-chip,
.task-late-flag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fda4a4;
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.empty-state {
  padding: 22px 18px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-small);
  background: rgba(158, 194, 232, 0.03);
  color: var(--muted-strong);
  text-align: center;
  font-size: 0.9rem;
}

.avatar,
.comment-avatar,
.team-avatar-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(160deg, #17466b, #0d2b45);
  border: 1px solid var(--border-strong);
}
.avatar b,
.comment-avatar b,
.team-avatar-chip b {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #bfe3ff;
}
.avatar img,
.comment-avatar img,
.team-avatar-chip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =====================================================================
   3e. PRIMITIVES — toast & cloud alerts
   ===================================================================== */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(26px + var(--safe-bottom));
  z-index: 260;
  transform: translate(-50%, 14px) scale(0.97);
  max-width: min(440px, calc(100vw - 32px));
  padding: 12px 18px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: var(--radius-small);
  background: rgba(11, 26, 43, 0.86);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(214, 234, 255, 0.08), var(--shadow-raise), var(--glow-accent);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }

.cloud-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: rgba(158, 194, 232, 0.04);
  margin-bottom: 14px;
}
.cloud-notice-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: rgba(158, 194, 232, 0.05);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
}
.cloud-notice-copy { min-width: 0; }
.cloud-notice-copy strong,
.cloud-notice-copy span { display: block; }
.cloud-notice-copy strong { font-size: 0.86rem; }
.cloud-notice-copy span {
  margin-top: 2px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--muted);
}
.cloud-notice-warning { border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.06); }
.cloud-notice-warning .cloud-notice-mark,
.cloud-notice-warning strong { color: #ffc861; }
.cloud-notice-ready { border-color: rgba(34, 197, 94, 0.35); }
.cloud-notice-ready .cloud-notice-mark,
.cloud-notice-ready strong { color: #6ee7a0; }
.cloud-notice-active .cloud-notice-mark,
.cloud-notice-active strong { color: var(--accent); }
.cloud-sync-action { min-height: 34px; padding: 6px 14px; font-size: 0.8rem; }

/* =====================================================================
   4. SHELL, HERO, TABS, FOOTER
   ===================================================================== */
.app-root { min-height: 100vh; }

.shell,
.hub {
  width: min(1280px, 100% - clamp(24px, 5vw, 64px));
  margin: 0 auto;
  padding: clamp(18px, 3vw, 34px) 0 30px;
}

.hero { margin-bottom: 16px; }

.hero-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.hero h1,
.hub-title {
  font-size: clamp(1.55rem, 3.4vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
  background: linear-gradient(100deg, #f6ecd9 0%, #dcecfb 34%, #7cc7f2 58%, #a9ecc0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #eaf2fa; /* fallback */
}

.status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.pulse {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
  animation: pulse-dot 2.6s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18); }
  50% { box-shadow: 0 0 0 6px rgba(56, 189, 248, 0.06); }
}

.hero-actions { display: flex; gap: 8px; }
.hero-actions .btn-mini { min-height: 36px; }
.settings-button { padding-inline: 12px; font-size: 1rem; }

/* --- Tabs --------------------------------------------------------- */
.tabs {
  --view-accent: var(--accent);
  --view-accent-rgb: 56, 189, 248;
  position: sticky;
  top: calc(10px + var(--safe-top));
  z-index: 60;
  isolation: isolate;
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 5px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  background: rgba(8, 18, 31, 0.78);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(214, 234, 255, 0.06),
    0 10px 30px -10px rgba(2, 8, 16, 0.7);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs-active-marker {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  z-index: 0;
  width: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(var(--view-accent-rgb), 0.28), rgba(var(--view-accent-rgb), 0.11));
  box-shadow:
    inset 0 0 0 1px rgba(var(--view-accent-rgb), 0.46),
    inset 0 1px 0 rgba(190, 232, 255, 0.25),
    0 4px 16px -4px rgba(var(--view-accent-rgb), 0.4);
  opacity: 0;
  pointer-events: none;
}
.tabs-active-marker.is-ready {
  opacity: 1;
  transition:
    width 190ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 190ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 100ms ease;
}

.tab {
  position: relative;
  z-index: 1;
  isolation: isolate;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  justify-content: center;
  min-height: 38px;
  padding: 7px 16px;
  border: none;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  scroll-snap-align: start;
  touch-action: manipulation;
  overflow: hidden;
  transition:
    color 180ms var(--ease-out),
    background-color 180ms var(--ease-out);
}
.tab-label {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .tab:hover:not(:disabled) { color: var(--muted-strong); background: rgba(158, 194, 232, 0.06); transform: none; box-shadow: none; }
}
.tab.active {
  color: #cdeeff;
  background: transparent;
  box-shadow: none;
  text-shadow: 0 0 14px rgba(var(--view-accent-rgb), 0.48);
}

/* --- Overdue notice ------------------------------------------------ */
.overdue-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(239, 68, 68, 0.38);
  border-radius: var(--radius-small);
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.04));
  font-size: 0.88rem;
}
.overdue-alert b { color: #fda4a4; }
.overdue-alert-action {
  min-height: 34px;
  padding: 6px 14px;
  border-color: rgba(239, 68, 68, 0.4);
  background: transparent;
  color: #fda4a4;
  font-size: 0.8rem;
}
.overdue-alert-action:hover:not(:disabled) { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.6); }

/* --- Footer -------------------------------------------------------- */
.site-footer {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 4px;
}
.footer-name {
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-strong);
}
.footer-line { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); }
.footer-links { display: flex; gap: 14px; font-family: var(--font-mono); font-size: 0.72rem; }

/* =====================================================================
   5. TRACKER LAYOUT — command deck (rail) above the work area
   ===================================================================== */
.view-stage { min-height: 40vh; }

.tracker-workspace {
  --view-accent: var(--accent);
  --view-accent-rgb: 56, 189, 248;
  --view-secondary: var(--green);
  --view-secondary-rgb: 34, 197, 94;
  --view-panel: rgba(var(--view-accent-rgb), 0.08);
  --view-panel-strong: rgba(var(--view-accent-rgb), 0.14);
  --view-border: rgba(var(--view-accent-rgb), 0.32);
  --view-border-strong: rgba(var(--view-accent-rgb), 0.52);
  --view-glow: rgba(var(--view-accent-rgb), 0.34);
  display: grid;
  gap: 16px;
}

.tracker-rail {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.tracker-rail > .dashboard { grid-column: 1 / -1; }
.tracker-rail > .progress-panel { grid-column: 1 / 5; }
.tracker-rail > .chart-panel { grid-column: 5 / -1; }
.tracker-rail > .quick-nav { grid-column: 1 / -1; }

.tracker-main { display: grid; gap: 14px; align-content: start; }

/* Sequence views lay out as a two-column board on wide screens; an open
   sequence takes the whole row so its scene grid gets full width. */
@media (min-width: 1121px) {
  .view-stage[data-view="animation"] .tracker-main,
  .view-stage[data-view="backgrounds"] .tracker-main,
  .view-stage[data-view="compositing"] .tracker-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .tracker-main > .sequence.open,
  .tracker-main > .composition-drive-toolbar,
  .tracker-main > .empty-state { grid-column: 1 / -1; }
}

/* --- Dashboard stat band ------------------------------------------- */
.dashboard {
  display: grid;
  grid-template-columns: minmax(230px, 1.6fr) repeat(4, minmax(120px, 1fr));
  gap: 12px;
}

.dashboard-feature,
.stat {
  position: relative;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(21, 41, 64, 0.9), rgba(10, 22, 37, 0.95));
  box-shadow: var(--card-sheen), var(--shadow-soft);
  overflow: hidden;
  transition: transform 200ms var(--ease-out), box-shadow 240ms var(--ease-out), border-color 200ms var(--ease-out);
}

/* Colored signal line along the top of each stat, matched to its number. */
.stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 2px;
  border-radius: 999px;
  background: var(--stat-hue, var(--accent));
  opacity: 0.75;
  box-shadow: 0 0 12px 1px var(--stat-hue, var(--accent));
}
.stat:has(.number.total) { --stat-hue: var(--view-accent, var(--accent)); }
.stat:has(.number.finished) { --stat-hue: var(--green); }
.stat:has(.number.wip) { --stat-hue: var(--amber); }
.stat:has(.number.cbb) { --stat-hue: var(--orange); }

.dashboard-feature {
  display: grid;
  align-content: center;
  gap: 6px;
  border-color: rgba(var(--view-accent-rgb), 0.36);
  background:
    radial-gradient(380px 160px at 0% 0%, rgba(var(--view-accent-rgb), 0.22), transparent 70%),
    radial-gradient(280px 140px at 100% 100%, rgba(var(--view-secondary-rgb), 0.11), transparent 70%),
    linear-gradient(180deg, rgba(21, 41, 64, 0.9), rgba(10, 22, 37, 0.95));
  box-shadow: var(--card-sheen), var(--shadow-soft), 0 0 34px -10px rgba(var(--view-accent-rgb), 0.3);
}
.dashboard-feature::after {
  content: attr(data-view-mark);
  position: absolute;
  right: 18px;
  bottom: 12px;
  font-family: var(--font-mono);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  color: rgba(var(--view-accent-rgb), 0.08);
  pointer-events: none;
}

.dashboard-view-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.dashboard-view-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid rgba(var(--view-accent-rgb), 0.44);
  border-radius: 999px;
  background: rgba(var(--view-accent-rgb), 0.12);
  color: #dff5ff;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: 0 0 16px -8px rgba(var(--view-accent-rgb), 0.8);
}
.dashboard-view-note {
  margin-top: 2px;
  color: var(--muted-strong);
  font-size: 0.76rem;
}

.dashboard-progress-value {
  position: relative;
  z-index: 1;
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.dashboard-progress-copy {
  position: relative;
  z-index: 1;
  font-size: 0.8rem;
  color: var(--muted-strong);
}

.dashboard-meter {
  position: relative;
  z-index: 1;
  height: 6px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(158, 194, 232, 0.12);
  overflow: hidden;
}
.dashboard-meter span {
  position: relative;
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--view-accent), var(--view-secondary));
  box-shadow: 0 0 10px rgba(var(--view-accent-rgb), 0.52);
  overflow: hidden;
}
.dashboard-meter span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: meter-shimmer 3.4s var(--ease-out) infinite;
}
@keyframes meter-shimmer {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}

.stat { display: grid; align-content: center; gap: 6px; }

.stat .number {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1;
}
.number.total { color: var(--view-accent, var(--accent)); text-shadow: 0 0 18px color-mix(in srgb, var(--view-accent, var(--accent)) 42%, transparent); }
.number.finished { color: var(--green); text-shadow: 0 0 18px rgba(34, 197, 94, 0.4); }
.number.wip { color: var(--amber); text-shadow: 0 0 18px rgba(245, 158, 11, 0.35); }
.number.cbb { color: var(--orange); text-shadow: 0 0 18px rgba(249, 115, 22, 0.35); }

/* --- Chart panel ---------------------------------------------------- */
.chart-panel,
.progress-panel {
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--view-accent, var(--accent)) 18%, var(--border));
  border-radius: var(--radius);
  background:
    radial-gradient(420px 180px at 100% 0%, rgba(var(--view-accent-rgb), 0.08), transparent 70%),
    linear-gradient(180deg, rgba(19, 38, 60, 0.88), rgba(9, 21, 36, 0.94));
  box-shadow: var(--card-sheen), var(--shadow-soft);
  min-width: 0;
}

.chart-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.chart-heading h2 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-strong);
}
.chart-heading span { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); }

.chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.donut-wrap {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 18px;
  min-height: 100%;
}

.chart-dial { position: relative; }
.chart-dial-main::after,
.chart-dial-mobile::after {
  content: "";
  position: absolute;
  inset: 21%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #0f2138 0%, #0a1728 55%, #060f1c 100%);
  border: 1px solid rgba(158, 194, 232, 0.1);
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.05),
    inset 0 -3px 8px rgba(2, 8, 16, 0.6),
    0 6px 16px -4px rgba(2, 8, 16, 0.7);
  pointer-events: none;
}
.chart-dial-center { z-index: 1; }
.chart-dial-main::before,
.chart-dial-mobile::before {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.16) 0%, rgba(56, 189, 248, 0.05) 45%, transparent 68%);
  pointer-events: none;
}
.chart-dial-main { width: 216px; height: 216px; }
.chart-dial-mobile { width: 132px; height: 132px; }
.chart-dial-preview { width: 46px; height: 46px; }
.chart-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.chart-dial-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 1px;
  text-align: center;
  pointer-events: none;
}
.chart-dial-value { font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1; }
.chart-dial-mobile .chart-dial-value { font-size: 1.2rem; }
.chart-dial-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.status-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: start;
  gap: 6px;
  min-width: 0;
  max-width: 320px;
}
.status-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(158, 194, 232, 0.04);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--muted-strong);
  white-space: nowrap;
}
.status-legend span.is-zero { opacity: 0.45; }
.status-legend i { width: 8px; height: 8px; border-radius: 50%; }
.status-legend b { font-weight: 700; color: var(--text); }

/* Other-view previews */
.chart-preview-grid { display: grid; gap: 8px; align-content: start; min-width: 0; }

.chart-preview-card {
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: linear-gradient(180deg, rgba(158, 194, 232, 0.06), rgba(158, 194, 232, 0.015));
  box-shadow: inset 0 1px 0 rgba(214, 234, 255, 0.05);
  transition: border-color 160ms var(--ease-out);
}
.chart-preview-card:hover { border-color: var(--border-strong); }

/* Row: mini donut | copy (head + breakdown chips) */
.chart-preview-mini {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.chart-preview-mini > .chart-dial { width: 58px; height: 58px; }
.chart-dial-pin { display: none; }

.chart-preview-copy { display: grid; gap: 8px; min-width: 0; }
.chart-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.chart-preview-label { font-weight: 700; font-size: 0.94rem; }
.chart-preview-meta { margin-top: 2px; font-family: var(--font-mono); font-size: 0.64rem; color: var(--muted); }
.chart-preview-percent {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}

/* Done / Active / Fixes chips */
.chart-preview-breakdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.chart-preview-breakdown span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid rgba(2, 8, 16, 0.5);
  border-radius: 8px;
  background: rgba(2, 8, 16, 0.4);
  box-shadow: inset 0 1px 3px rgba(2, 8, 16, 0.45);
}
.chart-preview-breakdown i {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.chart-preview-breakdown i.finished-dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
.chart-preview-breakdown i.wip-dot { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.chart-preview-breakdown i.cbb-dot { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.chart-preview-breakdown b { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 700; }
.chart-preview-breakdown em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Insights (progress panel) -------------------------------------- */
.progress-insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.progress-insights > article:nth-of-type(1),
.progress-insights > article:nth-of-type(2) { grid-column: 1 / -1; }
.progress-panel { display: grid; align-content: start; }

.mobile-progress-donut { display: none; }

.insight-card {
  display: grid;
  gap: 4px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: linear-gradient(180deg, rgba(158, 194, 232, 0.07), rgba(158, 194, 232, 0.02));
  box-shadow: inset 0 1px 0 rgba(214, 234, 255, 0.05);
}
.insight-card.tone-alert { border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.06); }
.insight-card.tone-alert .insight-label { color: #fda4a4; }
.insight-card.tone-good { border-color: rgba(34, 197, 94, 0.3); }
.insight-card.tone-good .insight-label { color: #6ee7a0; }

.insight-value { font-weight: 700; font-size: 1rem; line-height: 1.2; }
.insight-note { font-size: 0.74rem; color: var(--muted); }

.insight-track,
.week-track {
  display: flex;
  height: 5px;
  margin-top: 5px;
  border-radius: 999px;
  background: rgba(158, 194, 232, 0.1);
  overflow: hidden;
}
.insight-track span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--view-accent, var(--accent)), var(--view-secondary, var(--green)));
  box-shadow: 0 0 8px rgba(var(--view-accent-rgb), 0.42);
}
.week-track span { display: block; height: 100%; }
.week-track span.late { background: var(--danger); }
.week-track span.wip { background: var(--amber); }
.week-track span.cbb { background: var(--orange); }
.week-track span.finished { background: var(--green); }

.week-counts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.week-counts span {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--muted-strong);
}
.week-counts span.late { color: #fda4a4; border-color: rgba(239, 68, 68, 0.35); }
.week-counts span.wip { color: #ffc861; border-color: rgba(245, 158, 11, 0.35); }
.week-counts span.cbb { color: #ffab73; border-color: rgba(249, 115, 22, 0.35); }
.week-counts span.finished { color: #6ee7a0; border-color: rgba(34, 197, 94, 0.35); }

/* --- Quick nav ------------------------------------------------------ */
.quick-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--view-accent, var(--accent)) 28%, var(--border));
  border-radius: var(--radius-small);
  background:
    radial-gradient(460px 120px at 0% 0%, rgba(var(--view-accent-rgb), 0.1), transparent 72%),
    linear-gradient(180deg, rgba(14, 29, 47, 0.8), rgba(8, 18, 31, 0.85));
  box-shadow: inset 0 1px 0 rgba(214, 234, 255, 0.05), 0 4px 14px -6px rgba(2, 8, 16, 0.5);
}
.quick-nav button {
  min-height: 34px;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  border-radius: 9px;
  background: transparent;
  color: var(--muted-strong);
}
@media (hover: hover) and (pointer: fine) {
  .quick-nav button:hover:not(:disabled):not(.is-open) { background: rgba(158, 194, 232, 0.07); }
}
.quick-nav button.is-open {
  color: #dff6ff;
  border-color: var(--view-border-strong, rgba(56, 189, 248, 0.45));
  background: rgba(var(--view-accent-rgb), 0.14);
  box-shadow: inset 0 0 0 1px rgba(var(--view-accent-rgb), 0.2);
}

/* =====================================================================
   6. SEQUENCES & WORK CARDS
   ===================================================================== */
.sequence {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--view-accent, var(--accent)) 22%, var(--border));
  border-radius: var(--radius);
  background:
    radial-gradient(520px 160px at 0% 0%, rgba(var(--view-accent-rgb), 0.09), transparent 72%),
    linear-gradient(180deg, rgba(18, 37, 58, 0.88), rgba(10, 22, 37, 0.94));
  box-shadow: var(--card-sheen), var(--shadow-soft);
  overflow: hidden;
  scroll-margin-top: 92px; /* clear the sticky tab bar on anchor jumps */
  transition: border-color 200ms var(--ease-out), box-shadow 240ms var(--ease-out), transform 200ms var(--ease-out);
}
.sequence::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--view-accent, var(--accent)), var(--view-secondary, var(--cyan)));
  opacity: 0.38;
  transition: opacity 220ms var(--ease-out);
  pointer-events: none;
}
.sequence:has(.seq-toggle:hover) { border-color: var(--view-border-strong, var(--border-strong)); }

.sequence.open {
  border-color: var(--view-border-strong, rgba(56, 189, 248, 0.35));
  box-shadow: var(--card-sheen), var(--shadow-raise), 0 0 36px -16px var(--view-glow, rgba(56, 189, 248, 0.35));
}
.sequence.open::before { opacity: 1; box-shadow: 0 0 14px rgba(var(--view-accent-rgb), 0.65); }

.seq-header { position: relative; }
@media (min-width: 861px) {
  .seq-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .seq-drive-actions { padding: 0 18px 0 0; flex-wrap: nowrap; }
  .seq-drive-actions:not(:empty) { padding-bottom: 0; }
}

.seq-toggle {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 14px 18px 12px;
  border: none;
  border-radius: 0;
  background: transparent;
  text-align: left;
}
.seq-toggle:hover:not(:disabled) { background: rgba(158, 194, 232, 0.04); }

.seq-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.seq-name { font-size: 1.02rem; font-weight: 700; }
.seq-sub { margin-top: 2px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); }

.seq-right { display: flex; align-items: center; gap: 12px; }
.seq-pct { font-family: var(--font-mono); font-size: 0.86rem; font-weight: 700; color: var(--view-accent, var(--accent)); }

.arrow {
  display: grid;
  place-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--muted);
  transform: scaleY(0.85);
  transition: transform 160ms ease, color 160ms ease, border-color 160ms ease;
}
.sequence.open .arrow { transform: scaleY(-0.85); color: var(--view-accent, var(--accent)); border-color: var(--view-border-strong, rgba(56, 189, 248, 0.4)); }

.seq-mini-track {
  height: 5px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(158, 194, 232, 0.1);
  overflow: hidden;
}
.seq-mini-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--view-accent, var(--accent)), var(--view-secondary, var(--green)));
  box-shadow: 0 0 8px rgba(var(--view-accent-rgb), 0.48);
  transition: width 420ms var(--ease-out);
}

.seq-drive-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 18px;
}
.seq-drive-actions:not(:empty) { padding-bottom: 12px; }

.seq-body { display: none; padding: 4px 18px 18px; }
.sequence.open .seq-body { display: block; }

/* --- Card grid ------------------------------------------------------ */
.scene-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  align-items: start;
}

.scene-slot { display: grid; gap: 8px; min-width: 0; }

.insert-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, visibility 0s linear 140ms;
}
.scene-slot:hover .insert-divider,
.insert-divider:focus-within,
.scene-grid > .insert-divider {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.insert-divider .line { flex: 1; height: 1px; background: var(--border-strong); }
.insert-divider button {
  min-height: 26px;
  padding: 3px 12px;
  border-radius: 999px;
  border-color: var(--border);
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.insert-divider button:hover:not(:disabled) { color: #dff6ff; border-color: var(--view-border-strong, rgba(56, 189, 248, 0.45)); background: rgba(var(--view-accent-rgb), 0.12); }

/* --- Item card (scenes, backgrounds, assets) ------------------------ */
.item-card {
  --status-color: var(--slate);
  --status-soft: rgba(71, 85, 105, 0.12);
  --status-border: rgba(71, 85, 105, 0.6);
  position: relative;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--view-accent, var(--status-color)) 58%, var(--status-border));
  border-radius: var(--radius-small);
  background:
    radial-gradient(320px 140px at 0% 0%, rgba(var(--view-accent-rgb), 0.16), transparent 72%),
    radial-gradient(240px 110px at 100% 0%, var(--status-soft), transparent 74%),
    linear-gradient(180deg, rgba(17, 34, 54, 0.75), rgba(9, 20, 34, 0.92));
  box-shadow:
    var(--card-sheen),
    0 4px 12px rgba(2, 8, 16, 0.4),
    0 0 28px -13px var(--view-accent, var(--status-color));
  min-width: 0;
  overflow: hidden;
  transition: box-shadow 220ms var(--ease-out), border-color 180ms var(--ease-out);
}

.item-card.is-late {
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow:
    var(--card-sheen),
    0 4px 12px rgba(2, 8, 16, 0.4),
    0 0 24px -8px rgba(239, 68, 68, 0.7);
}

.item-card.has-card-image {
  background:
    radial-gradient(320px 140px at 0% 0%, rgba(var(--view-accent-rgb), 0.14), transparent 72%),
    linear-gradient(rgba(10, 22, 37, 0.9), rgba(10, 22, 37, 0.96)),
    var(--card-image) center / cover no-repeat,
    var(--card);
}

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 7px;
  min-width: 0;
}

.item-code {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* Image thumb */
.thumb-wrap { flex: 0 0 auto; }

.thumb-area {
  position: relative;
  width: 122px;
  height: 76px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--ink-well);
  overflow: hidden;
  font-size: 0.68rem;
  color: var(--muted);
}
.thumb-area:hover:not(:disabled) { border-color: rgba(56, 189, 248, 0.5); color: var(--muted-strong); }
.thumb-area.is-empty { border-style: dashed; }
.thumb-area img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.image-action-label {
  position: absolute;
  inset: auto 0 0;
  padding: 3px 4px;
  background: rgba(4, 11, 19, 0.78);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #cde7fa;
  opacity: 0;
  transition: opacity 140ms ease;
}
.thumb-area:hover .image-action-label,
.thumb-area:focus-visible .image-action-label { opacity: 1; }
.thumb-fallback { padding: 4px; text-align: center; }

.image-action-menu { position: relative; }
.image-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: none;
  min-width: 130px;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: #0d1e31;
  box-shadow: var(--shadow-soft);
}
.image-action-menu.open .image-menu-panel { display: grid; gap: 2px; }
.image-menu-panel button {
  min-height: 32px;
  justify-content: flex-start;
  border: none;
  border-radius: 7px;
  background: transparent;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted-strong);
}
.image-menu-panel button:hover:not(:disabled) { background: rgba(158, 194, 232, 0.09); color: var(--text); }
.image-menu-panel button[data-action="delete-shot-image"]:hover { color: #fda4a4; background: rgba(239, 68, 68, 0.1); }

/* Technique row */
.card-technique-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.card-technique-row > span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.method-chip-group {
  display: flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(2, 8, 16, 0.55);
  border-radius: 999px;
  background: var(--ink-well);
  box-shadow: inset 0 2px 5px rgba(2, 8, 16, 0.55), inset 0 -1px 0 rgba(214, 234, 255, 0.04);
}
.method-chip {
  --method-color: var(--accent);
  flex: 1 1 0;
  min-height: 26px;
  padding: 2px 12px;
  border: none;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--muted);
  transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .method-chip:hover:not(:disabled):not(.active) {
    color: var(--muted-strong);
    background: rgba(158, 194, 232, 0.08);
    transform: none;
    box-shadow: none;
  }
}
.method-chip.active {
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--method-color) 88%, #fff), color-mix(in srgb, var(--method-color) 82%, #000));
  text-shadow: 0 1px 4px rgba(2, 8, 16, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(2, 8, 16, 0.35),
    0 0 14px -2px var(--method-color);
}

/* Fields stack inside the card */
.item-card .fields { display: grid; gap: 10px; }

/* Stage track */
.stage-track {
  display: flex;
  align-items: center;
  gap: 10px;
}
.stage-track-segments {
  display: flex;
  flex: 1;
  gap: 4px;
  height: 7px;
}
.stage-track-segments i {
  flex: 1;
  border-radius: 999px;
  background: rgba(2, 8, 16, 0.55);
  box-shadow: inset 0 1px 2px rgba(2, 8, 16, 0.6);
  transition: background-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.stage-track-segments i.on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--seg-color, var(--accent)) 90%, #fff), var(--seg-color, var(--accent)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 10px -1px var(--seg-color, var(--accent));
}
.stage-track-label {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--muted);
}
.stage-track.is-finished .stage-track-label { color: #6ee7a0; }
.stage-track.is-attention .stage-track-label { color: #ffab73; }

/* Assignment grid */
.assignment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.assignment-grid .field:first-child { grid-column: 1 / -1; }
.assignment-grid input[type="date"] {
  min-width: 0;
  max-width: 100%;
  padding-inline: 8px;
  font-size: 0.74rem;
}

/* Card footer */
.card-footer,
.background-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.updated { font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted); }
.row-actions { display: flex; gap: 8px; margin-left: auto; }
.delete-item-button { opacity: 0.75; }
.item-card:hover .delete-item-button { opacity: 1; }

.drive-link-stack {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
}
.card-footer .updated,
.background-footer .updated {
  flex: 1 1 100%;
}
.drive-link {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 11px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.08);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  color: #9adcff;
}
.drive-link:hover { background: rgba(56, 189, 248, 0.16); text-decoration: none; }
.tracker-workspace .drive-link {
  border-color: var(--view-border, rgba(56, 189, 248, 0.3));
  background: rgba(var(--view-accent-rgb), 0.08);
  color: #dff6ff;
}
.tracker-workspace .drive-link:hover {
  border-color: var(--view-border-strong, rgba(56, 189, 248, 0.45));
  background: rgba(var(--view-accent-rgb), 0.16);
}
.drive-sync-error { border-color: rgba(245, 158, 11, 0.45); color: #ffc861; background: rgba(245, 158, 11, 0.08); }

.shell.is-read-only input:not([type="hidden"]),
.shell.is-read-only textarea {
  cursor: default;
  opacity: 0.72;
}
.shell.is-read-only .comment-compose,
.shell.is-read-only .reply-compose,
.shell.is-read-only .image-action-label,
.shell.is-read-only .insert-divider,
.shell.is-read-only .add-row-btn,
.shell.is-read-only .delete-item-button,
.shell.is-read-only [data-action="schedule-add-phase"],
.shell.is-read-only [data-action="schedule-autoplan"],
.shell.is-read-only [data-action="schedule-clear-plan"],
.shell.is-read-only [data-action="schedule-remove-phase"] {
  display: none;
}
.shell.is-read-only .method-chip,
.shell.is-read-only .dropdown-button,
.shell.is-read-only .dropdown-option,
.shell.is-read-only input:not([type="hidden"]),
.shell.is-read-only textarea {
  pointer-events: none;
}

/* =====================================================================
   6b. COMMENTS
   ===================================================================== */
.comment-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: rgba(158, 194, 232, 0.04);
}
.comment-preview.empty-comments {
  display: block;
  padding: 8px 11px;
  border-style: dashed;
  background: transparent;
  font-size: 0.76rem;
  color: var(--muted);
  text-align: center;
}

.comment-preview-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.comment-preview-body { display: grid; gap: 1px; min-width: 0; }

.comment-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--muted);
}
.comment-meta strong { font-size: 0.78rem; color: var(--text); }
.comment-meta span { font-family: var(--font-mono); font-size: 0.62rem; }

.comment-text {
  font-size: 0.8rem;
  color: var(--muted-strong);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.comment-open-button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 4px 11px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  color: #9adcff;
  border-color: rgba(56, 189, 248, 0.3);
  background: rgba(56, 189, 248, 0.08);
}
.comment-open-button:hover:not(:disabled) { background: rgba(56, 189, 248, 0.16); }

.comment-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}
.comment-compose textarea { min-height: 44px; font-size: 0.82rem; }

/* Full comment panel (card flips into comment mode) */
.item-card.comment-mode { padding: 14px 14px 14px 17px; }

.comment-panel { display: grid; gap: 12px; }

.comment-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.comment-panel-head span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.comment-panel-head strong { font-size: 0.95rem; }
.comment-back-button { min-height: 32px; padding: 5px 14px; font-size: 0.78rem; background: transparent; }

.comment-thread {
  display: grid;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}
.comment-thread.empty-comments {
  padding: 14px;
  border: 1px dashed color-mix(in srgb, var(--view-accent, var(--accent)) 35%, var(--border-strong));
  border-radius: var(--radius-xs);
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}

.comment-thread-group { display: grid; gap: 8px; }

.comment {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.comment-body {
  flex: 1;
  min-width: 0;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--view-accent, var(--accent)) 16%, var(--border));
  border-radius: 4px 12px 12px 12px;
  background: linear-gradient(180deg, rgba(var(--view-accent-rgb), 0.055), rgba(158, 194, 232, 0.035));
}
.comment-body .comment-text { display: block; -webkit-line-clamp: unset; }

.comment-actions { display: flex; gap: 10px; margin-top: 4px; }
.comment-reply-button,
.comment-delete {
  min-height: 0;
  padding: 2px 4px;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.comment-reply-button:hover:not(:disabled) { color: var(--accent); background: transparent; }
.comment-delete:hover:not(:disabled) { color: #fda4a4; background: transparent; }

.reply-thread {
  display: grid;
  gap: 8px;
  margin-left: 22px;
  padding-left: 12px;
  border-left: 1px solid var(--border-strong);
}
.reply .comment-avatar { width: 26px; height: 26px; }
.reply .comment-avatar b { font-size: 0.56rem; }

.reply-compose { margin-left: 34px; }

/* =====================================================================
   7. ASSETS — characters & props
   ===================================================================== */
.characters-panel { display: grid; gap: 14px; }

.asset-create-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 12px 24px;
  align-items: center;
  border-color: var(--view-border, var(--border));
  background:
    radial-gradient(520px 150px at 0% 0%, rgba(var(--view-accent-rgb), 0.12), transparent 72%),
    linear-gradient(180deg, rgba(19, 38, 60, 0.88), rgba(9, 21, 36, 0.94));
}
.asset-create-head h2 { font-size: 1.1rem; font-weight: 700; }
.asset-create-head p { margin-top: 3px; font-size: 0.84rem; color: var(--muted); }

.asset-create-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 14px;
  align-items: start;
}

.asset-top { align-items: stretch; }

.asset-thumb {
  display: grid;
  justify-items: center;
  flex: 0 0 auto;
}

.character-portrait {
  position: relative;
  display: grid;
  place-content: center;
  width: clamp(86px, 8.8vw, 108px);
  height: clamp(86px, 8.8vw, 108px);
  border: 1px solid color-mix(in srgb, var(--view-accent, var(--status-color)) 58%, transparent);
  border-radius: 22px;
  background:
    radial-gradient(90px 72px at 30% 20%, rgba(var(--view-accent-rgb), 0.24), transparent 75%),
    linear-gradient(160deg, #123350, #0b2036);
  box-shadow:
    inset 0 1px 0 rgba(214, 234, 255, 0.1),
    0 4px 12px -3px rgba(2, 8, 16, 0.6),
    0 0 20px -7px var(--view-accent, var(--status-color));
  overflow: hidden;
}
.character-portrait span {
  font-family: var(--font-mono);
  font-size: 1.28rem;
  font-weight: 700;
  color: #dff1ff;
  text-shadow: 0 0 12px rgba(var(--view-accent-rgb), 0.72);
}
.character-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.item-name-input { font-weight: 600; }
.card-meta .item-name-input { width: 100%; margin-top: 2px; }

.asset-advanced {
  border: 1px solid color-mix(in srgb, var(--view-accent, var(--accent)) 24%, var(--border));
  border-radius: var(--radius-xs);
  background: rgba(var(--view-accent-rgb), 0.035);
}
.asset-advanced summary {
  padding: 9px 12px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.asset-advanced summary::-webkit-details-marker { display: none; }
.asset-advanced summary::before { content: "+ "; color: var(--view-accent, var(--accent)); }
.asset-advanced[open] summary::before { content: "− "; }
.asset-advanced summary:hover { color: var(--muted-strong); }
.asset-advanced-body { display: grid; gap: 10px; padding: 2px 12px 12px; }

.asset-stage-rows { display: grid; gap: 6px; }

.asset-stage-row {
  --status-color: var(--slate);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--view-accent, var(--accent)) 16%, var(--border));
  border-left: 3px solid var(--status-color);
  border-radius: var(--radius-xs);
  background: linear-gradient(180deg, rgba(var(--view-accent-rgb), 0.035), var(--ink-well));
}
.asset-stage-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted-strong);
}
.stage-step {
  display: grid;
  place-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--muted);
}

/* =====================================================================
   8. TEAMS
   ===================================================================== */
.settings-page { display: grid; gap: 14px; }

.settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 18px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(19, 38, 60, 0.85), rgba(9, 21, 36, 0.94));
  box-shadow: var(--card-sheen), var(--shadow-soft);
}
.settings-head h2 { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; }
.settings-head p { margin-top: 4px; max-width: 640px; font-size: 0.86rem; color: var(--muted); }
.settings-head > span { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); }
.settings-head .btn-add { flex: 0 0 auto; }

.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  align-items: start;
}

.settings-panel {
  position: relative;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(19, 38, 60, 0.85), rgba(9, 21, 36, 0.94));
  box-shadow: var(--card-sheen), var(--shadow-soft);
  min-width: 0;
}
.tracker-workspace .settings-panel {
  border-color: color-mix(in srgb, var(--view-accent, var(--accent)) 34%, var(--border));
  background:
    radial-gradient(520px 150px at 0% 0%, rgba(var(--view-accent-rgb), 0.12), transparent 72%),
    linear-gradient(180deg, rgba(19, 38, 60, 0.88), rgba(9, 21, 36, 0.94));
  box-shadow: var(--card-sheen), var(--shadow-soft), 0 0 30px -16px var(--view-glow, rgba(56, 189, 248, 0.3));
}
.settings-panel > h2 { margin-bottom: 12px; font-size: 0.98rem; font-weight: 700; }

.team-group-panel {
  --team-color: var(--accent);
  display: grid;
  gap: 12px;
  padding-left: 21px;
  overflow: hidden;
}
.team-group-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--team-color);
}
.team-group-panel > h2 { margin-bottom: 0; }

.team-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.team-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--team-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-color) 20%, transparent);
}

.team-name-field { flex: 1; min-width: 0; }

.team-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.team-stat {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--muted-strong);
}

.team-avatars { display: flex; }
.team-avatars .team-avatar-chip { margin-right: -8px; border: 2px solid var(--panel); }

.team-lead-row {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: rgba(158, 194, 232, 0.04);
}
.team-lead-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.team-lead-name { font-weight: 600; font-size: 0.88rem; }
.team-lead-note { font-size: 0.74rem; color: var(--muted); }

.team-members-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.team-member-toggles { display: grid; gap: 5px; }

.team-member-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.team-member-toggle:hover { background: rgba(158, 194, 232, 0.06); }
.team-member-toggle.is-on { border-color: rgba(56, 189, 248, 0.3); background: var(--accent-soft); }
.team-member-toggle.is-lead { border-color: rgba(245, 158, 11, 0.35); }
.team-member-name { flex: 1; min-width: 0; font-size: 0.86rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-member-check { flex: 0 0 auto; }

.team-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.team-empty-note { font-size: 0.8rem; color: var(--muted); }

.team-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: rgba(158, 194, 232, 0.03);
}

.role-badge {
  --role-color: var(--muted);
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-left: 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--role-color) 45%, transparent);
  background: color-mix(in srgb, var(--role-color) 14%, transparent);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--role-color);
  vertical-align: middle;
}

/* =====================================================================
   9. CALENDAR
   ===================================================================== */
.calendar-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(19, 38, 60, 0.85), rgba(9, 21, 36, 0.94));
  box-shadow: var(--card-sheen), var(--shadow-soft);
}

.calendar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.calendar-head h2 { font-size: 1.2rem; font-weight: 800; }
.calendar-head p { margin-top: 3px; font-size: 0.84rem; color: var(--muted); }

.calendar-head-controls { display: flex; flex-wrap: wrap; gap: 8px; }

.calendar-toggle {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--ink-well);
}
.calendar-toggle button {
  min-height: 30px;
  padding: 4px 15px;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-size: 0.8rem;
  color: var(--muted);
}
@media (hover: hover) and (pointer: fine) {
  .calendar-toggle button:hover:not(:disabled):not(.active) {
    color: var(--muted-strong);
    background: rgba(158, 194, 232, 0.07);
  }
}
.calendar-toggle button.active { color: #bfe7ff; background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.35); }

.calendar-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.calendar-filter-chip {
  --filter-color: var(--muted-strong);
  min-height: 30px;
  padding: 4px 12px;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--muted);
}
.calendar-filter-chip i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--filter-color);
}
@media (hover: hover) and (pointer: fine) {
  .calendar-filter-chip:hover:not(:disabled):not(.active) { color: var(--muted-strong); }
}
.calendar-filter-chip.active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--filter-color) 55%, transparent);
  background: color-mix(in srgb, var(--filter-color) 13%, transparent);
}

.calendar-week-summary {
  display: flex;
  gap: 12px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--muted);
}
.calendar-week-summary b { color: var(--text); }
.calendar-week-summary .is-late b { color: #fda4a4; }
.calendar-week-summary .is-done b { color: #6ee7a0; }

.next-due-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 12px 16px;
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: var(--radius-small);
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.1), transparent 65%);
}
.next-due-chip.tone-alert { border-color: rgba(239, 68, 68, 0.4); background: linear-gradient(90deg, rgba(239, 68, 68, 0.1), transparent 65%); }
.next-due-chip.tone-warn { border-color: rgba(245, 158, 11, 0.4); background: linear-gradient(90deg, rgba(245, 158, 11, 0.09), transparent 65%); }
.chip-title { margin-top: 2px; font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700; }
.chip-note { margin-top: 2px; font-size: 0.76rem; color: var(--muted); }

.next-due-side { display: flex; align-items: center; gap: 8px; }
.due-countdown {
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  color: #9adcff;
  background: rgba(56, 189, 248, 0.12);
}
.due-countdown.tone-alert { color: #fda4a4; background: rgba(239, 68, 68, 0.14); }
.due-countdown.tone-warn { color: #ffc861; background: rgba(245, 158, 11, 0.13); }

.calendar-body {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
  gap: 14px;
  align-items: start;
}

.calendar-frame {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: rgba(9, 20, 34, 0.6);
  min-width: 0;
}

.calendar-month-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.calendar-month-center { display: grid; gap: 3px; justify-items: center; }
.calendar-month-title { font-size: 1.02rem; font-weight: 700; }

.calendar-today-btn {
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--muted);
}
.calendar-today-btn:hover:not(:disabled) { color: #bfe7ff; border-color: rgba(56, 189, 248, 0.4); }

.calendar-arrow {
  flex: 0 0 auto;
  width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 50%;
  font-size: 1rem;
  color: var(--muted-strong);
  background: transparent;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.calendar-weekdays span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
}
.calendar-weekdays span.is-weekend { opacity: 0.55; }

.calendar-grid { display: grid; gap: 4px; }

.calendar-week { display: grid; gap: 2px; }

.calendar-week-cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-cell {
  position: relative;
  display: block;
  min-height: 58px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: rgba(158, 194, 232, 0.025);
  text-align: left;
}
.calendar-cell:hover:not(:disabled) { border-color: var(--border-strong); background: rgba(158, 194, 232, 0.06); }
.calendar-cell.is-weekend { background: rgba(4, 11, 19, 0.35); }
.calendar-cell.muted { opacity: 0.4; }
.calendar-cell.has-task { background: rgba(56, 189, 248, calc(0.035 + var(--load, 0) * 0.016)); }
.calendar-cell.today {
  border-color: rgba(56, 189, 248, 0.9);
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.15), rgba(56, 189, 248, 0.06));
  box-shadow:
    inset 0 0 0 1px rgba(56, 189, 248, 0.42),
    0 0 22px -12px rgba(56, 189, 248, 0.95);
}
.calendar-cell.selected:not(.today) {
  border-color: rgba(125, 211, 252, 0.5);
  border-style: dashed;
  background: rgba(56, 189, 248, 0.035);
  box-shadow: none;
}

.cal-daynum { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--muted-strong); }
.calendar-cell.today .cal-daynum { color: #dff6ff; text-shadow: 0 0 12px rgba(56, 189, 248, 0.55); }
.cal-today-word {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6ee7ff;
}

.cal-late-badge {
  position: absolute;
  top: 5px;
  right: 6px;
  display: grid;
  place-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  color: #fff;
}

.calendar-week-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 20px;
  gap: 2px 4px;
}

.cal-bar {
  --bar-color: var(--accent);
  --lane-color: var(--accent);
  position: relative;
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 0 8px 0 12px;
  border: none;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bar-color) 26%, #0a1a2c);
  box-shadow: inset 3px 0 0 var(--lane-color);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
}
.cal-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-bar:hover:not(:disabled) { background: color-mix(in srgb, var(--bar-color) 38%, #0a1a2c); }
.cal-bar.cont-left { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-bar.cont-right { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-bar.is-late { box-shadow: inset 3px 0 0 var(--danger), inset 0 0 0 1px rgba(239, 68, 68, 0.5); }
.cal-bar.is-done { opacity: 0.55; }

/* Week view */
.calendar-week-view {
  display: grid;
  grid-template-columns: repeat(7, minmax(96px, 1fr));
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.cw-col {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6px;
  min-width: 0;
}
.cw-head {
  display: grid;
  gap: 1px;
  justify-items: center;
  min-height: 0;
  padding: 7px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: rgba(158, 194, 232, 0.03);
}
.cw-col.is-weekend .cw-head { background: rgba(4, 11, 19, 0.35); }
.cw-col.is-today .cw-head {
  border-color: rgba(56, 189, 248, 0.9);
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.15), rgba(56, 189, 248, 0.06));
  box-shadow:
    inset 0 0 0 1px rgba(56, 189, 248, 0.42),
    0 0 22px -12px rgba(56, 189, 248, 0.95);
}
.cw-col.is-selected:not(.is-today) .cw-head {
  border-color: rgba(125, 211, 252, 0.5);
  border-style: dashed;
  box-shadow: none;
  background: rgba(56, 189, 248, 0.035);
}
.cw-dow {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.cw-num { font-family: var(--font-mono); font-size: 0.9rem; }
.cw-col.is-today .cw-num { color: #dff6ff; text-shadow: 0 0 12px rgba(56, 189, 248, 0.55); }
.cal-overdue-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--danger); }

.cw-tasks {
  display: grid;
  gap: 4px;
  align-content: start;
  min-height: 120px;
  padding: 6px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-xs);
}
.cw-empty { align-self: center; text-align: center; color: rgba(137, 161, 187, 0.4); }

.cw-task {
  --type-color: var(--accent);
  --task-color: var(--slate);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 6px;
  align-items: center;
  min-height: 0;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--type-color);
  border-radius: 8px;
  background: var(--ink-well);
  text-align: left;
}
.cw-task:hover:not(:disabled) { border-color: var(--border-strong); background: rgba(4, 11, 19, 0.85); }
.cw-task.is-late { border-color: rgba(239, 68, 68, 0.45); }
.cw-task.is-done { opacity: 0.55; }
.cw-task-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--task-color); }
.cw-task-code {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cw-task-status {
  grid-column: 2;
  font-size: 0.62rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Selected-day panel */
.calendar-selected { display: grid; gap: 12px; align-content: start; min-width: 0; }

.calendar-date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: rgba(9, 20, 34, 0.6);
}
.calendar-date-dow { font-size: 0.86rem; font-weight: 600; color: var(--muted-strong); }
.calendar-date { margin-top: 1px; font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700; }
.today-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9adcff;
  vertical-align: middle;
}

.calendar-overdue-block {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: var(--radius-small);
  background: rgba(239, 68, 68, 0.05);
}
.calendar-overdue-title { font-size: 0.84rem; font-weight: 700; color: #fda4a4; }

.calendar-tasks { display: grid; gap: 10px; }

.calendar-task {
  --status-color: var(--slate);
  --type-color: var(--accent);
  position: relative;
  display: grid;
  gap: 10px;
  padding: 12px 12px 12px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--card);
  overflow: hidden;
}
.calendar-task::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--status-color);
}
.calendar-task.is-late { border-color: rgba(239, 68, 68, 0.4); }
.calendar-task.is-done { opacity: 0.7; }

.calendar-task-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.calendar-task-headings { display: grid; gap: 2px; min-width: 0; }
.calendar-task-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.calendar-task-typedot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--type-color); }
.calendar-task-meta { font-size: 0.72rem; color: var(--muted); }

.calendar-task-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.calendar-status-readout {
  display: flex;
  align-items: center;
  min-height: var(--control-h);
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: rgba(4, 11, 19, 0.4);
  font-size: 0.85rem;
  color: var(--muted-strong);
}

.calendar-task-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 0.74rem;
  color: var(--muted);
}

/* =====================================================================
   10. SETTINGS
   ===================================================================== */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.settings-panel-wide,
.drive-panel,
.drive-locked-panel,
.team-members-panel { grid-column: 1 / -1; }
.settings-stack {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

.settings-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.settings-form .btn-primary { grid-column: 1 / -1; justify-self: start; }

.project-meta { margin-bottom: 10px; font-size: 0.78rem; color: var(--muted); }

.tab-toggle-list { display: grid; gap: 6px; }

.settings-list { display: grid; gap: 8px; }

.setting-row,
.sequence-count-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: rgba(158, 194, 232, 0.03);
}
.setting-row b { font-size: 0.88rem; }
.setting-row p { font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); }

.sequence-count-row { grid-template-columns: repeat(2, minmax(0, 1fr)); background: transparent; border: none; padding: 0; }
.sequence-counts { display: grid; gap: 10px; }

/* Members & roles */
.seats-control { display: grid; gap: 6px; max-width: 200px; }
.seat-counter {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--muted-strong);
}

.member-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.directory-panel .team-member-row,
.team-members-panel .team-member-row { flex-wrap: wrap; }
.team-member-row .project-name { font-size: 0.88rem; font-weight: 600; }
.team-member-row .field { flex: 1 1 160px; }

/* Drive setup */
.drive-panel { display: grid; gap: 12px; }

.drive-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.drive-setup-card-wide { grid-column: 1 / -1; }

.drive-setup-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: linear-gradient(180deg, rgba(158, 194, 232, 0.055), rgba(158, 194, 232, 0.015));
  box-shadow: inset 0 1px 0 rgba(214, 234, 255, 0.05);
}
.drive-setup-head { display: grid; gap: 3px; }
.drive-setup-head h3 { font-size: 0.92rem; font-weight: 700; }
.drive-setup-head p { font-size: 0.78rem; color: var(--muted); }

.drive-connection-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}
.drive-connection-form .drive-actions { grid-column: 1 / -1; }

.drive-actions,
.drive-inline-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.drive-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--muted-strong);
}
.drive-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.drive-status-ready { border-color: rgba(34, 197, 94, 0.4); color: #6ee7a0; }
.drive-status-ready::before { background: var(--green); }
.drive-status-warning { border-color: rgba(245, 158, 11, 0.4); color: #ffc861; }
.drive-status-warning::before { background: var(--amber); }
.drive-status-error { border-color: rgba(239, 68, 68, 0.4); color: #fda4a4; }
.drive-status-error::before { background: var(--danger); }

.drive-meter-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(158, 194, 232, 0.1);
  overflow: hidden;
}
.drive-meter-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--green)); }
.drive-setup-meter { display: grid; gap: 6px; }

.drive-root-links { display: flex; flex-wrap: wrap; gap: 8px; }

.drive-preview {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
}
.drive-preview summary { cursor: pointer; color: var(--muted-strong); }

.drive-advanced-card { border-color: rgba(245, 158, 11, 0.22); }

.drive-locked-panel { text-align: center; color: var(--muted); }

/* Backup / workspace */
.backup-panel,
.workspace-panel { display: grid; gap: 8px; align-content: start; }

/* =====================================================================
   11. HUB, WIZARD, USERS, AUTH
   ===================================================================== */
.hub { max-width: 880px; }
.entry-page { max-width: 1040px; }
.entry-page .hero { max-width: 780px; }

.hub-copy { margin-top: 6px; color: var(--muted); }

.hub-grid { display: grid; gap: 14px; margin-top: 22px; }
.hub-grid-single { grid-template-columns: minmax(0, 1fr); }
.entry-page .hub-grid { margin-top: 26px; }

.panel {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(19, 38, 60, 0.85), rgba(9, 21, 36, 0.94));
  box-shadow: var(--card-sheen), var(--shadow-soft);
}
.panel > h2 {
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-strong);
}

.directory-panel { padding: clamp(16px, 2.4vw, 24px); }
.directory-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.directory-heading h2 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-strong);
}
.directory-heading p {
  margin-top: 3px;
  font-size: 0.76rem;
  color: var(--muted);
}
.directory-heading .btn-add { flex: 0 0 auto; }
.directory-actions {
  display: flex;
  margin-top: 14px;
}

.projects-list,
.project-list { display: grid; gap: 10px; }

.project-card {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: linear-gradient(180deg, rgba(19, 38, 60, 0.72), rgba(11, 24, 40, 0.9));
  box-shadow: var(--card-sheen), 0 2px 8px rgba(2, 8, 16, 0.35);
  overflow: hidden;
}

.clickable-card {
  cursor: pointer;
  transition:
    border-color 180ms var(--ease-out),
    transform 180ms var(--ease-out),
    background-color 180ms var(--ease-out),
    box-shadow 220ms var(--ease-out);
}
.clickable-card:hover { border-color: rgba(56, 189, 248, 0.45); }
@media (hover: hover) {
  .clickable-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-sheen), var(--shadow-raise), var(--glow-accent);
  }
}
.clickable-card:focus-visible { box-shadow: var(--focus-ring); }
.clickable-card.is-pressing { transform: scale(0.99); }

.project-cover {
  /* JS supplies --project-image-opacity as a 0-1 fraction. */
  --project-image-opacity: 0.25;
  background:
    linear-gradient(
      rgba(8, 18, 31, calc(1 - var(--project-image-opacity) * 0.8)),
      rgba(8, 18, 31, calc(1 - var(--project-image-opacity) * 0.62))),
    var(--project-image, none) center / cover no-repeat,
    linear-gradient(180deg, rgba(19, 38, 60, 0.72), rgba(11, 24, 40, 0.9));
}

.project-card-content { display: grid; gap: 8px; }
.project-hub .project-card { padding: clamp(16px, 2.2vw, 22px); }
.project-hub .project-card-content { gap: 12px; }

.project-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.project-name { font-size: 1.02rem; font-weight: 700; }
.project-hub .project-card-title-row .project-name { font-size: 1.14rem; }
.project-hub .card-enter-cue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid rgba(56, 189, 248, 0.24);
  border-radius: 999px;
  background: rgba(7, 19, 32, 0.62);
  color: #b9e5ff;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.project-meta { font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); }
.project-card .project-meta { margin-bottom: 0; }

.project-stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(480px, 100%);
  border: 1px solid rgba(158, 194, 232, 0.14);
  border-radius: var(--radius-xs);
  background: rgba(5, 15, 27, 0.46);
  overflow: hidden;
}
.project-card-details {
  display: grid;
  grid-template-columns: minmax(320px, 480px) minmax(0, 1fr);
  align-items: center;
  gap: 12px 18px;
}
.project-card-tags { display: grid; gap: 7px; }
.project-stat-strip > span {
  padding: 9px 12px;
  border-right: 1px solid rgba(158, 194, 232, 0.12);
}
.project-stat-strip > span:last-child { border-right: 0; }
.project-stat-strip b,
.project-stat-strip small { display: block; }
.project-stat-strip b {
  font-size: 1rem;
  line-height: 1.15;
  color: var(--text);
}
.project-stat-strip small {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-asset-summary,
.project-card-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.project-asset-summary span,
.project-card-flags span {
  padding: 4px 8px;
  border: 1px solid rgba(158, 194, 232, 0.13);
  border-radius: 999px;
  background: rgba(8, 20, 34, 0.58);
  font-family: var(--font-mono);
  font-size: 0.61rem;
  color: var(--muted);
}
.project-card-flags span { color: var(--muted-strong); }
.project-card-updated {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--muted);
}

.project-progress { display: grid; gap: 5px; }
.project-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-progress-head b { font-size: 0.72rem; color: var(--accent); }
.project-progress-track {
  height: 5px;
  border-radius: 999px;
  background: rgba(158, 194, 232, 0.1);
  overflow: hidden;
}
.project-progress-track span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--green));
}

/* Wizard */
.wizard {
  max-width: 720px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(19, 38, 60, 0.85), rgba(9, 21, 36, 0.94));
  box-shadow: var(--card-sheen), var(--shadow-soft);
}
.wizard h2 { margin-bottom: 16px; font-size: 1.15rem; font-weight: 800; }
.wizard-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

.seats-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: var(--radius-small);
  background: var(--accent-soft);
}
.seats-summary-number {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
}
.seats-summary p { margin-top: 4px; font-size: 0.8rem; color: var(--muted-strong); }

/* User select */
.user-select-grid { display: grid; gap: 10px; }

.user-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.identity-page .auth-state-line {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}
.identity-page .directory-heading .seat-counter { flex: 0 0 auto; }
.user-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 14px;
  min-height: 138px;
  padding: 16px;
}
.user-card.is-me { border-color: rgba(56, 189, 248, 0.45); background: linear-gradient(90deg, rgba(56, 189, 248, 0.08), var(--card)); }
.user-card .project-meta { margin: 0; }
.identity-page .member-card-head { align-items: flex-start; }
.member-card-copy { min-width: 0; }
.member-card-copy .project-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.member-card-copy .role-badge { margin-left: 0; }
.identity-page .user-card > .card-enter-cue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(158, 194, 232, 0.12);
  color: #aadeff;
  font-size: 0.78rem;
  font-weight: 700;
}

.seat-card {
  display: grid;
  gap: 10px;
  padding: 15px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-small);
  background: rgba(158, 194, 232, 0.03);
}
.seat-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}
.seat-card-head .seat-counter { margin-left: auto; }
.seat-card > p { font-size: 0.8rem; color: var(--muted); }

.seat-claim-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.auth-state-line { display: flex; justify-content: center; margin: 10px 0; }
.auth-state-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(9, 20, 34, 0.72);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--muted);
}

/* Auth screen */
.auth-screen {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
}
.auth-card {
  display: grid;
  gap: 12px;
  justify-items: center;
  width: min(400px, 100%);
  padding: 32px 28px;
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: var(--radius);
  background:
    radial-gradient(320px 160px at 50% 0%, rgba(56, 189, 248, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(20, 40, 63, 0.9), rgba(9, 21, 36, 0.95));
  box-shadow: var(--card-sheen), var(--shadow-raise), 0 0 60px -20px rgba(56, 189, 248, 0.35);
  text-align: center;
}
.auth-logo img { display: block; }
.auth-title { font-size: 1.4rem; font-weight: 800; }
.auth-subtitle { font-size: 0.86rem; color: var(--muted); }
.auth-google-btn { width: 100%; background: #fff; border-color: #fff; color: #1f2937; font-weight: 700; }
.auth-google-btn:hover:not(:disabled) { background: #eef2f7; border-color: #eef2f7; }
.auth-error { font-size: 0.8rem; color: #fda4a4; }
.auth-reload-btn { width: 100%; }
.auth-footnote { font-family: var(--font-mono); font-size: 0.64rem; color: var(--muted); }

/* Compositing drive toolbar */
.composition-drive-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid var(--view-border, rgba(139, 92, 246, 0.3));
  border-radius: var(--radius-small);
  background:
    radial-gradient(360px 120px at 0% 0%, rgba(var(--view-accent-rgb), 0.15), transparent 70%),
    linear-gradient(90deg, rgba(var(--view-accent-rgb), 0.08), transparent 70%);
}
.composition-drive-icon {
  display: grid;
  place-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid var(--view-border-strong, rgba(139, 92, 246, 0.4));
  border-radius: var(--radius-xs);
  background: rgba(var(--view-accent-rgb), 0.14);
  box-shadow: 0 0 18px -9px var(--view-accent, var(--accent));
  font-size: 1rem;
}
.composition-drive-info { flex: 1; min-width: 0; }
.composition-drive-info b { display: block; font-size: 0.9rem; }
.composition-drive-info p { margin-top: 1px; font-size: 0.76rem; color: var(--muted); }
.composition-drive-cta { flex: 0 0 auto; }

/* View transitions */
.view-stage.view-motion-forward { animation: view-forward-in 170ms var(--ease-out) both; }
.view-stage.view-motion-back { animation: view-back-in 170ms var(--ease-out) both; }

@keyframes view-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes view-forward-in {
  from { opacity: 0; transform: translate3d(10px, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes view-back-in {
  from { opacity: 0; transform: translate3d(-10px, 0, 0); }
  to { opacity: 1; transform: none; }
}

.card-enter-cue { animation: view-in 260ms ease; }

@media (prefers-reduced-motion: reduce) {
  .view-stage.view-motion-forward,
  .view-stage.view-motion-back,
  .card-enter-cue { animation: none; }
}

/* Tone aliases actually emitted by the app (ok / warn / late) plus the
   insight tones (alert / good). */
.next-due-chip.tone-late { border-color: rgba(239, 68, 68, 0.4); background: linear-gradient(90deg, rgba(239, 68, 68, 0.1), transparent 65%); }
.due-countdown.tone-late { color: #fda4a4; background: rgba(239, 68, 68, 0.14); }
.due-countdown.tone-ok { color: #6ee7a0; background: rgba(34, 197, 94, 0.13); }
.insight-card.tone-late { border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.06); }
.insight-card.tone-late .insight-label { color: #fda4a4; }
.insight-card.tone-warn { border-color: rgba(245, 158, 11, 0.32); }
.insight-card.tone-warn .insight-label { color: #ffc861; }
.insight-card.tone-ok .insight-label { color: #6ee7a0; }

.owner-lock { font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); }

/* Card the user just navigated to (calendar → open scene) */
.just-opened { animation: just-opened-flash 1.5s ease; }
@keyframes just-opened-flash {
  0% { box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.85); }
  100% { box-shadow: 0 0 0 2px rgba(56, 189, 248, 0); }
}

.item-card.dropdown-lift,
.character-stage.dropdown-lift { z-index: 6; }
/* =============================================================
   SCHEDULE (GANTT) — preserved from the previous design, which
   already worked well. Ported as-is onto the shared tokens.
   ============================================================= */

.schedule-panel {
  padding: 18px;
  margin: 12px 0;
  background: linear-gradient(180deg, rgba(19, 38, 60, 0.85), rgba(9, 21, 36, 0.94));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 16px 38px rgba(0, 0, 0, 0.12);
}

.schedule-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}

.schedule-head h2 {
  margin: 0;
  font-size: 1.08rem;
}

.schedule-head p {
  margin: 4px 0 0;
  max-width: 520px;
  color: var(--muted);
}

.schedule-plan-controls {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(255, 255, 255, 0.03));
}

.schedule-plan-controls .field {
  min-width: 150px;
}

.schedule-plan-controls .field label {
  margin-bottom: 5px;
  font-size: 0.72rem;
}

.schedule-plan-controls input[type="date"] {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: rgba(6, 16, 29, 0.7);
  color: var(--text);
  color-scheme: dark;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.schedule-plan-controls .btn-primary[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.schedule-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.schedule-summary article {
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.schedule-summary article.is-late {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.1);
}

.schedule-summary article.is-late .chip-label { color: var(--danger);
}

.schedule-summary-track {
  height: 5px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.schedule-summary-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--green));
}

.schedule-empty {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  padding: 20px;
  border: 1px dashed var(--border-strong);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--muted-strong);
  text-align: center;
}

.schedule-empty strong { color: var(--text);
}

.schedule-empty b { color: var(--accent); font-weight: 700;
}

.schedule-board {
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.schedule-grid {
  --gutter: 224px;
  position: relative;
  padding-bottom: 8px;
}

.schedule-gutter {
  flex: 0 0 var(--gutter);
  min-width: var(--gutter);
  position: sticky;
  left: 0;
  z-index: 3;
  background: linear-gradient(90deg, #0c1a2b 82%, transparent);
}

.schedule-header,
.schedule-rows-lines {
  display: flex;
}

.schedule-header {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #0c1a2b;
  border-bottom: 1px solid var(--border);
}

.schedule-header .schedule-gutter {
  background: #0c1a2b;
}

.schedule-header-track {
  flex: 1;
  min-width: 0;
}

.schedule-months-track {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.schedule-months-track span {
  padding: 8px 10px 6px;
  border-left: 1px solid var(--border);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-weeks-track {
  display: flex;
}

.schedule-week-col {
  flex: 1;
  min-width: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.schedule-week-col.is-current {
  background: rgba(56, 189, 248, 0.09);
}

.schedule-week-label {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  padding: 4px 4px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  white-space: nowrap;
  overflow: hidden;
}

.schedule-week-label b {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 800;
}

.schedule-week-label span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
}

.schedule-week-col.is-current .schedule-week-label b {
  color: var(--accent);
}

.schedule-week-days {
  display: flex;
}

.schedule-week-days span {
  flex: 1;
  min-width: 0;
  padding: 3px 0 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

.schedule-week-days span:first-child {
  border-left: 0;
}

.schedule-week-days span.is-weekend {
  color: rgba(128, 150, 174, 0.5);
  background: rgba(255, 255, 255, 0.03);
}

.schedule-week-days span.is-today {
  color: #fff;
  background: var(--danger);
  border-radius: 5px;
}

.schedule-rows {
  position: relative;
}

.schedule-rows-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.schedule-rows-lines .schedule-gutter {
  background: transparent;
}

.schedule-lines-track {
  position: relative;
  flex: 1;
  display: flex;
}

.schedule-week-shade {
  flex: 1;
  min-width: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
  background:
    linear-gradient(90deg, transparent 71.428%, rgba(255, 255, 255, 0.028) 71.428%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 14.2857%);
}

.schedule-week-shade.is-current {
  background:
    linear-gradient(rgba(56, 189, 248, 0.05), rgba(56, 189, 248, 0.05)),
    linear-gradient(90deg, transparent 71.428%, rgba(255, 255, 255, 0.028) 71.428%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 14.2857%);
}

.schedule-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--danger);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
  z-index: 2;
}

.schedule-today-line em {
  position: absolute;
  top: 2px;
  left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.9);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.schedule-row {
  display: flex;
  align-items: stretch;
  min-height: 52px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.schedule-row:last-child { border-bottom: 0;
}

.schedule-row-label {
  flex: 0 0 var(--gutter, 224px);
  min-width: var(--gutter, 224px);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  position: sticky;
  left: 0;
  z-index: 3;
  background: linear-gradient(90deg, #0c1a2b 88%, rgba(12, 26, 43, 0));
}

.schedule-row-dot {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--phase-color, var(--accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--phase-color, var(--accent)) 60%, transparent);
}

.schedule-row-label > div { min-width: 0; flex: 1;
}

.schedule-row-name {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-row-meta {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-row-percent {
  flex: 0 0 auto;
  color: var(--muted-strong);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
}

.schedule-row-percent.is-done { color: var(--green);
}

.schedule-row-percent.is-late { color: var(--danger);
}

.schedule-row-track {
  position: relative;
  flex: 1;
  min-width: 0;
}

.schedule-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 26px;
  min-width: 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--phase-color, var(--accent)) 65%, transparent);
  background: color-mix(in srgb, var(--phase-color, var(--accent)) 22%, rgba(255, 255, 255, 0.04));
  overflow: hidden;
  z-index: 1;
}

.schedule-bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--phase-color, var(--accent)) 85%, #000), var(--phase-color, var(--accent)));
  opacity: 0.85;
}

.schedule-bar span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 10px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.schedule-bar.is-late {
  border-color: rgba(239, 68, 68, 0.75);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35), 0 0 12px rgba(239, 68, 68, 0.25);
}

.schedule-bar.is-done {
  border-color: rgba(34, 197, 94, 0.7);
}

.schedule-bar-placeholder {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  opacity: 0.7;
}

.schedule-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.schedule-editor-head h3 {
  margin: 0;
  font-size: 0.95rem;
}

.schedule-phase-list {
  display: grid;
  gap: 10px;
}

.schedule-phase {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
}

.schedule-phase.is-late {
  border-color: rgba(239, 68, 68, 0.35);
}

.schedule-phase-main {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.schedule-color {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: rgba(6, 16, 29, 0.7);
  cursor: pointer;
}

.schedule-color::-webkit-color-swatch-wrapper { padding: 2px;
}

.schedule-color::-webkit-color-swatch { border: 0; border-radius: 7px;
}

.schedule-color::-moz-color-swatch { border: 0; border-radius: 7px;
}

.schedule-phase-name { flex: 1; min-width: 0;
}

.schedule-phase-name input[type="text"] {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-head);
  font-size: 0.92rem;
  font-weight: 700;
}

.schedule-phase-name input[type="text"]:hover,
.schedule-phase-name input[type="text"]:focus {
  border-color: var(--border-strong);
  background: rgba(6, 16, 29, 0.6);
  outline: none;
}

.schedule-phase-kind {
  margin-top: 2px;
  padding-left: 10px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
}

.schedule-phase-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  align-items: end;
  gap: 10px;
}

.schedule-phase-controls .field label {
  margin-bottom: 5px;
  font-size: 0.7rem;
}

.schedule-phase-controls input[type="date"],
.schedule-progress-input input[type="number"] {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: rgba(6, 16, 29, 0.7);
  color: var(--text);
  color-scheme: dark;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.schedule-progress-input {
  display: flex;
  align-items: center;
  gap: 7px;
}

.schedule-progress-input span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.schedule-progress-readout {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.schedule-progress-readout b {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.86rem;
}

.schedule-progress-readout span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-phase-actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .schedule-head { flex-direction: column;
  }
  .schedule-plan-controls { width: 100%;
  }
  .schedule-plan-controls .field { flex: 1; min-width: 130px;
  }
  .schedule-grid { --gutter: 150px;
  }
  .schedule-row-percent { display: none;
  }
  .schedule-phase-actions { justify-content: stretch;
  }
  .schedule-phase-actions button { width: 100%;
  }
}

.dropdown-menu,
.cw-tasks,
.calendar-selected,
.calendar-tasks,
.schedule-board,
.projects-list,
.settings-list,
.comment-list,
.comment-panel-list,
.asset-advanced-body,
textarea {
  overscroll-behavior: contain;
}


/* =====================================================================
   11b. TOUCH AND TABLET STABILITY
   ===================================================================== */
@media (hover: none), (pointer: coarse) {
  body::before { display: none; }

  button,
  .file-label,
  .tab,
  .dropdown-button,
  .dropdown-option,
  .quick-nav button {
    touch-action: manipulation;
  }

  .tabs,
  .quick-nav,
  .schedule-board {
    touch-action: pan-x pan-y;
  }

  .tab:hover:not(:disabled):not(.active) {
    color: var(--muted);
    background: transparent;
    transform: none;
    box-shadow: none;
  }

  .dropdown-option:hover:not(:disabled):not(.active) {
    background: transparent;
    color: var(--muted-strong);
  }
}

/* =====================================================================
   12. RESPONSIVE
   One consolidated layer, largest to smallest.
   ===================================================================== */

/* --- Big desktop: let the workspace breathe -------------------------- */
@media (min-width: 1500px) {
  .shell { width: min(1400px, 100% - 72px); }
  .chart-dial-main { width: 196px; height: 196px; }
  .scene-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

@media (max-width: 1120px) {
  .tracker-rail > .progress-panel { grid-column: 1 / -1; }
  .tracker-rail > .chart-panel { grid-column: 1 / -1; }

  .progress-insights { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .dashboard { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dashboard-feature { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-form,
  .drive-connection-form,
  .drive-setup-grid { grid-template-columns: minmax(0, 1fr); }

  .calendar-body { grid-template-columns: minmax(0, 1fr); }

  .asset-create-panel { grid-template-columns: minmax(0, 1fr); align-items: start; }

  .chart-grid { grid-template-columns: minmax(0, 1fr); }
  .chart-preview-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* --- Phone -------------------------------------------------------- */
@media (max-width: 860px) {
  html, body { font-size: 15.5px; }

  :root {
    --radius: 16px;
    --radius-small: 12px;
  }

  /* Comfortable thumb targets everywhere. */
  button, .file-label { min-height: 44px; }
  .btn-mini { min-height: 38px; }
  .tab { min-height: 42px; }

  /* The blueprint grid competes with content on small screens. */
  body::before { display: none; }

  .shell, .hub {
    padding-top: calc(14px + var(--safe-top));
    padding-bottom: calc(26px + var(--safe-bottom));
  }

  .entry-page .hub-grid { margin-top: 20px; }
  .cloud-notice {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .cloud-notice .cloud-sync-action {
    grid-column: 1 / -1;
    width: 100%;
  }
  .project-card-details { grid-template-columns: minmax(0, 1fr); }
  .project-stat-strip { width: 100%; }

  .hero-row { flex-direction: column; }
  .hero-actions { width: 100%; }
  .hero-actions .btn-mini { flex: 1; }
  .hero-actions .settings-button { flex: 0 0 auto; }

  /* Tabs: edge-to-edge glassy strip that hints at overflow. */
  .tabs {
    --rail-edge-inset: 0.35rem;
    top: calc(8px + var(--safe-top));
    margin-inline: calc(var(--rail-edge-inset) * -1);
    padding: var(--rail-edge-inset);
    scroll-padding-inline: var(--rail-edge-inset);
  }
  .tab { flex: 0 0 auto; }

  /* Quick nav: one swipeable row instead of a tall wrap. */
  .quick-nav {
    --rail-edge-inset: 0.65rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-inline: var(--rail-edge-inset);
    scroll-padding-inline: var(--rail-edge-inset);
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .quick-nav::-webkit-scrollbar { display: none; }
  .quick-nav button { flex: 0 0 auto; scroll-snap-align: start; min-height: 40px; }

  /* The big chart panel gives way to the compact donut inside the
     insights panel. */
  .tracker-rail > .chart-panel { display: none; }

  /* Reference layout: donut left, "Due this week" right, then the two
     half-width insight cards. The "Next" card is desktop-only noise here. */
  .progress-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
  .mobile-progress-donut {
    display: grid;
    place-content: center;
    padding: 6px 0;
  }
  .chart-dial-mobile { width: 148px; height: 148px; }
  .progress-insights > article:nth-of-type(1) { display: none; }
  .progress-insights > article:nth-of-type(2) { grid-column: auto; }

  /* Compact stat strip: all four in one row under the overview. */
  .dashboard { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .dashboard-feature { grid-column: 1 / -1; padding: 16px; }
  .stat { padding: 10px 6px 12px; text-align: center; }
  .stat::before { left: 10px; right: 10px; }
  .stat .label { justify-content: center; font-size: 0.5rem; letter-spacing: 0.1em; }
  .stat .number { font-size: 1.45rem; }

  .sequence { scroll-margin-top: calc(70px + var(--safe-top)); }
  .seq-toggle { padding: 13px 14px 11px; }
  .seq-body { padding: 4px 12px 14px; }
  .seq-drive-actions { padding-inline: 14px; }
  .seq-drive-actions:not(:empty) { padding-top: 8px; }

  .insert-divider { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }

  .calendar-panel { padding: 14px; }
  .calendar-frame { padding: 10px; }
  .calendar-cell { min-height: 46px; padding: 4px 6px; }
  .cal-today-word { display: none; }
  .calendar-week-bars { grid-auto-rows: 17px; }
  .cal-bar { font-size: 0.56rem; padding: 0 5px 0 8px; }
  .calendar-week-summary { margin-left: 0; width: 100%; }

  .settings-head,
  .settings-panel { padding: 14px; }

  .comment-thread { max-height: 260px; }

  .toast { bottom: calc(18px + var(--safe-bottom)); width: calc(100vw - 28px); }
}

@media (max-width: 480px) {
  .shell, .hub {
    width: auto;
    margin-inline: max(14px, var(--safe-left)) max(14px, var(--safe-right));
  }

  .scene-grid { grid-template-columns: minmax(0, 1fr); }
  .character-grid { grid-template-columns: minmax(0, 1fr); }

  .calendar-task-controls { grid-template-columns: minmax(0, 1fr); }

  .thumb-area { width: 92px; height: 60px; }

  .seat-claim-form,
  .asset-create-form { grid-template-columns: minmax(0, 1fr); }

  .wizard-actions { flex-direction: column-reverse; }
  .wizard-actions button { width: 100%; }

  .comment-compose { grid-template-columns: minmax(0, 1fr); }
  .comment-compose .btn-add { justify-self: end; }

  .user-list { grid-template-columns: minmax(0, 1fr); }
  .directory-panel { padding: 14px; }
  .directory-heading { gap: 10px; }
  .directory-heading p { font-size: 0.7rem; }
  .directory-heading .btn-add { min-height: 38px; padding: 7px 12px; }
  .project-hub .project-card { padding: 15px; }
  .project-stat-strip > span { padding: 8px 10px; }
  .identity-page .auth-state-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .identity-page .auth-state-chip {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .identity-page .user-card { min-height: 0; }

  .team-members-panel .settings-list { gap: 12px; }
  .team-members-panel .team-member-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
    padding: 14px;
  }
  .team-members-panel .member-card-head {
    width: 100%;
    align-items: flex-start;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }
  .team-members-panel .member-card-head > div { min-width: 0; }
  .team-members-panel .project-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  .team-members-panel .role-badge { margin-left: 0; }
  .team-members-panel .project-meta {
    margin: 3px 0 0;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .team-members-panel .team-member-row .field {
    width: 100%;
    min-width: 0;
  }
  .team-members-panel .btn-danger,
  .team-members-panel .owner-lock { justify-self: start; }

  .footer-links { flex-direction: column; gap: 4px; }
}

/* --- Very small phones ---------------------------------------------- */
@media (max-width: 370px) {
  html, body { font-size: 15px; }
  .dashboard { gap: 8px; }
  .dashboard-feature, .stat { padding: 12px 13px; }
  .hero h1, .hub-title { font-size: 1.4rem; }
  .project-hub .directory-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .project-hub .directory-heading .btn-add { width: 100%; }
}