/* App chrome: the two shells that recur across every screen. */

.app { min-height: 100vh; display: flex; flex-direction: column; }

/* ---- Client top bar --------------------------------------------------- */

.topbar {
  height: 64px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-hairline);
  flex: none;
  background: var(--surface-app);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-left { display: flex; align-items: center; gap: 18px; }
.topbar-logo { height: 24px; width: auto; flex: none; }
.topbar-project {
  font: 450 12px / 1.2 var(--font);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-meta);
}
.topbar-right { display: flex; align-items: center; gap: 14px; }

.tabs { display: flex; align-items: center; gap: 22px; }
.tab {
  font: 450 12px / 1.2 var(--font);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-meta);
  padding: 6px 0;
  transition: color var(--dur-fast) var(--ease);
}
.tab:hover { color: var(--text-secondary); }
.tab[aria-current="page"] { color: var(--text-primary); }

/* ---- Producer sidebar -------------------------------------------------- */

.console { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }

.sidebar {
  width: 220px;
  background: var(--surface-page);
  border-right: 1px solid var(--border-hairline);
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-logo { height: 34px; width: auto; margin: 0 22px; }

.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group > .t-label { padding: 0 22px 8px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  font: 400 13px / 1.2 var(--font);
  color: rgba(242, 242, 242, .6);
  text-align: left;
  width: 100%;
  transition: color var(--dur-fast) var(--ease);
}
.nav-item:hover { color: var(--text-primary); }
.nav-item[aria-current="page"] {
  background: var(--surface-card);
  border-radius: var(--radius-input);
  margin: 0 12px;
  padding: 11px 10px;
  width: auto;
  font-weight: 500;
  color: var(--text-primary);
}

.sidebar-user {
  margin-top: auto;
  padding: 18px 22px 0;
  border-top: 1px solid var(--border-hairline);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---- Screen layout ------------------------------------------------------ */

.screen { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.screen-header {
  min-height: 68px;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--border-hairline);
  flex: none;
}

.search {
  min-width: 200px;
  padding: 10px 14px;
  border-radius: var(--radius-input);
  border: 1px solid var(--border-hairline);
  font: 400 13px / 1.2 var(--font);
  color: var(--text-primary);
  background: transparent;
}
.search::placeholder { color: var(--text-placeholder); }

.pad     { padding: 28px 32px 36px; }
.pad-lg  { padding: 32px 48px 48px; }

/* Two-column bodies, per screen */
.split-rail   { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.split-rail-380 { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; }
/* The bordered-rail layouts fill the screen, so the rail's darker surface
   runs to the bottom of the window rather than stopping at its content. */
.split-rail-400 { display: grid; grid-template-columns: 1fr 400px; flex: 1; align-items: stretch; }
.split-rail-420 { display: grid; grid-template-columns: 1fr 420px; flex: 1; align-items: stretch; }
.split-list   { display: grid; grid-template-columns: 420px 1fr; min-height: 0; flex: 1; }

.rail {
  background: var(--surface-page);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bordered-right { border-right: 1px solid var(--border-hairline); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---- Sign in ------------------------------------------------------------- */

.signin {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 24px;
  position: relative;
  overflow: hidden;
}
.signin-card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  z-index: 1;
}
.signin .watermark {
  height: 340px;
  opacity: .05;
  right: -80px;
  bottom: -60px;
  top: auto;
}

/* ---- Phase strip (2c) ----------------------------------------------------- */

.phase-strip {
  padding: 20px 32px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid var(--border-hairline);
}
.phase-rail { flex: 1; display: flex; align-items: center; }
.phase-rail .connector { flex: 1; height: 1px; background: var(--border-hairline); }
.phase-rail .connector.done { background: var(--status-ok); }
.phase-rail .node {
  width: 10px; height: 10px; border-radius: var(--radius-pill); flex: none;
  background: var(--surface-app); border: 1px solid var(--border-strong);
}
.phase-rail .node.done { background: var(--status-ok); border: 0; }
.phase-rail .node.current {
  width: 14px; height: 14px;
  background: var(--surface-app); border: 2px solid var(--status-warn);
}

/* ---- Milestone timeline rail (project overview) ---------------------------- */

.milestone {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 20px;
  align-items: start;
}
.milestone-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
}
.milestone-rail .line { flex: 1; width: 1px; background: var(--border-hairline); min-height: 22px; }
.milestone-node {
  width: 12px; height: 12px; border-radius: var(--radius-pill); flex: none;
  background: var(--surface-app); border: 1px solid var(--border-strong);
}
.milestone-node.complete { background: var(--status-ok); border: 0; }
.milestone-node.current { border: 2px solid var(--status-warn); }

/* ---- Player (screen 1b) ------------------------------------------------------ */

.player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-page);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-media);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-mark { height: 120px; width: auto; opacity: .12; }
.player-tag {
  position: absolute; top: 16px; left: 18px;
  font: 400 9px / 1.3 var(--font);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-placeholder);
}
.player-scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background: linear-gradient(to top,
    rgba(17, 17, 17, .92) 0%, rgba(17, 17, 17, .6) 40%, transparent 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 24px 20px; gap: 10px;
}
.scrub {
  position: relative; height: 4px; border-radius: var(--radius-pill);
  background: rgba(242, 242, 242, .2); cursor: pointer;
}
.scrub-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: var(--radius-pill); background: var(--gradient-1);
}
.scrub-head {
  position: absolute; top: 50%; width: 12px; height: 12px;
  transform: translate(-50%, -50%); border-radius: var(--radius-pill);
  background: var(--surface-light);
}
.scrub-marker {
  position: absolute; top: 50%; width: 10px; height: 10px;
  transform: translate(-50%, -50%); border-radius: var(--radius-pill);
  background: var(--surface-app); border: 2px solid var(--status-warn);
  cursor: pointer;
}
.scrub-marker:hover { transform: translate(-50%, -50%) scale(1.2); }

/* ---- Cross-project timeline (screen 1d) ------------------------------------- */

.gantt {
  display: grid;
  align-items: center;
  position: relative;
  min-width: 1100px;
}
.gantt-scroll { overflow-x: auto; padding-bottom: 8px; }
.gantt-week {
  font: 400 10px / 1.2 var(--font);
  color: var(--text-meta);
  text-align: center;
  padding: 0 2px 12px;
}
.gantt-week.clash { color: var(--status-risk); }
.gantt-label { padding: 18px 16px 18px 0; }
.gantt-sep { height: 1px; background: var(--border-hairline); }
.gantt-bar {
  height: 26px;
  border-radius: var(--radius-pill);
  margin: 0 3px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font: 400 11px / 1 var(--font);
  overflow: hidden;
  white-space: nowrap;
  z-index: 1;
}
.gantt-bar.shoot    { background: var(--surface-light); color: var(--surface-app); }
.gantt-bar.edit     { background: var(--surface-bar); color: var(--text-primary); }
.gantt-bar.review   { background: transparent; border: 1px solid var(--border-strong); color: var(--text-secondary); }
.gantt-bar.delivery { background: var(--gradient-1); color: var(--surface-app); }
.gantt-bar.phase    { background: var(--surface-panel); border: 1px solid var(--border-hairline); color: var(--text-secondary); }
.gantt-collision {
  background: rgba(51, 51, 51, .55);
  border-left: 1px solid var(--status-risk);
  border-right: 1px solid var(--status-risk);
  border-radius: var(--radius-input);
  z-index: 0;
  pointer-events: none;
  /* The grid centres its items, which collapses an empty block to nothing.
     This one has no content on purpose: it is the week highlight sitting
     behind every lane, so it has to stretch the full height. */
  align-self: stretch;
}
.legend { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.legend-swatch { width: 26px; height: 10px; border-radius: var(--radius-pill); flex: none; }

/* ---- Vendor list (screen 4a) --------------------------------------------------- */

.vendor-list {
  border-right: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
}
.vendor-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-hairline);
  width: 100%;
  text-align: left;
  transition: background var(--dur-fast) var(--ease);
  border-left: 2px solid transparent;
}
.vendor-row:hover { background: rgba(28, 28, 28, .5); }
.vendor-row[aria-current="true"] {
  background: var(--surface-card);
  border-left: 2px solid var(--status-warn);
}

.vendor-table {
  display: grid;
  grid-template-columns: 2fr 1.3fr 0.9fr 2fr 1.6fr auto;
  column-gap: 20px;
  align-items: center;
}
.vendor-table > * { padding: 16px 0; }

/* Availability strip on the vendor record */
.avail-strip { display: flex; gap: 3px; }
.avail-cell {
  flex: 1; height: 26px; border-radius: var(--radius-check);
  background: var(--border-hairline);
}
.avail-cell.booked { background: var(--surface-bar); }
.avail-cell.held { background: var(--status-warn-tint); border: 1px solid var(--status-warn-border); }

/* ---- Call sheet: the one intentionally light surface -------------------------- */

.document {
  background: var(--surface-light);
  color: var(--text-on-light);
  border-radius: var(--radius-media);
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  letter-spacing: var(--tracking-tight);
}
.document h2, .document h3 { color: var(--text-on-light); }
.document .doc-meta { color: var(--text-on-light-meta); }
.document .doc-secondary { color: var(--text-on-light-secondary); }
.document .doc-hairline { height: 1px; background: var(--border-hairline-light); }
.document .doc-label {
  font: 450 10px / 1.2 var(--font);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-on-light-meta);
}
.doc-schedule { display: grid; grid-template-columns: 96px 1fr 180px; }
.doc-schedule > * { padding: 10px 0; border-top: 1px solid var(--border-hairline-light); }
.doc-schedule > .last { border-bottom: 1px solid var(--border-hairline-light); }
.doc-crew { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.doc-crew-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-top: 1px solid var(--border-hairline-light);
}
.doc-note {
  background: rgba(51, 51, 51, .08);
  border-radius: var(--radius-media);
  padding: 20px 22px;
}
.doc-time { font: 500 12px / 1.4 var(--font-mono); letter-spacing: 0; }

/* ---- Onboarding --------------------------------------------------------------- */

.progress-rail { display: flex; gap: 6px; align-items: center; }
.progress-rail span {
  width: 26px; height: 3px; border-radius: var(--radius-pill);
  background: var(--border-hairline);
}
.progress-rail .done { background: var(--status-ok); }
.progress-rail .current { background: var(--gradient-1); }

.waveform { display: flex; align-items: flex-end; gap: 5px; height: 96px; }
.waveform span {
  flex: 1; border-radius: var(--radius-pill);
  background: var(--border-strong);
  transition: background var(--dur-fast) var(--ease);
}
.record-button {
  width: 60px; height: 60px; border-radius: var(--radius-pill);
  background: var(--gradient-1);
  display: flex; align-items: center; justify-content: center;
  flex: none;
  transition: filter var(--dur-fast) var(--ease);
}
.record-button:hover { filter: brightness(1.08); }
.record-button .stop {
  width: 20px; height: 20px; background: var(--surface-app); border-radius: 3px;
}
.record-button .go {
  width: 20px; height: 20px; background: var(--surface-app); border-radius: var(--radius-pill);
}

.onboard-2col { display: grid; grid-template-columns: 1fr 400px; gap: 64px; padding: 64px 36px 56px; }
.onboard-brief { display: grid; grid-template-columns: 1fr 340px; gap: 40px; padding: 40px 36px 56px; }
.onboard-record { display: grid; grid-template-columns: 1fr 440px; gap: 40px; padding: 40px 36px 56px; }
.onboard-review { display: grid; grid-template-columns: 1fr 1fr 380px; gap: 24px; padding: 0 36px 56px; }

.drop-zone {
  border: 1px dashed var(--status-ok-border);
  border-radius: var(--radius-media);
  padding: 22px;
  text-align: center;
  font: 400 12px / 1.4 var(--font);
  color: var(--text-meta);
}
.drop-zone.avoid { border-color: var(--status-risk-border); }

/* ---- Responsive ----------------------------------------------------------------- */
/* These screens are desktop-first, at a 1280–1440px design width. Below that
   the rails stack rather than compress, so nothing is squeezed out of its
   specified proportions. A real mobile client room is still to be designed. */

@media (max-width: 1200px) {
  .split-rail, .split-rail-380, .split-rail-400, .split-rail-420 {
    grid-template-columns: 1fr;
  }
  .rail { min-height: auto; }
  .onboard-review { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .console { grid-template-columns: 1fr; }
  .sidebar {
    position: static; width: auto; height: auto;
    flex-direction: row; align-items: center; overflow-x: auto;
    border-right: 0; border-bottom: 1px solid var(--border-hairline);
  }
  .sidebar .nav-group { flex-direction: row; }
  .sidebar .nav-group > .t-label { display: none; }
  .sidebar-user { margin-top: 0; border-top: 0; padding-top: 0; }
  .split-list { grid-template-columns: 1fr; }
  .vendor-list { height: auto; max-height: 420px; }
  .onboard-2col, .onboard-brief, .onboard-record, .onboard-review {
    grid-template-columns: 1fr; gap: 32px; padding: 32px 24px 48px;
  }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .pad, .pad-lg { padding: 24px; }
  .topbar { padding: 0 20px; }
  .tabs { gap: 14px; }
}