/* Shared appearance tokens for every page with the Fieldbook sidebar. Day and Night.
   Surfaces: canvas (the app background), panel (side lists and toolbars), page (the white paper the work sits on,
   with the one soft shadow; Night uses a lighter surface and a hairline instead).
   Color hierarchy is the directory's color tape: phase tapes (Development amber, Prep teal, Shoot coral, Post violet,
   Money green), status tapes with words, tinted fills for what is selected. Cyan stays the primary action.
   Never: colored dots, colored edge strips on cards or rows, gradients. Theme preference is browser-level. */
@font-face { font-family: 'Big Shoulders Display'; font-weight: 800; font-display: swap; src: url('fonts/big-shoulders-display-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Big Shoulders Display'; font-weight: 900; font-display: swap; src: url('fonts/big-shoulders-display-latin-900-normal.woff2') format('woff2'); }
@font-face { font-family: 'Martian Mono'; font-weight: 400; font-display: swap; src: url('fonts/martian-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Martian Mono'; font-weight: 500; font-display: swap; src: url('fonts/martian-mono-latin-500-normal.woff2') format('woff2'); }
@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Jost[wght].ttf') format('truetype');
}
.ws, .vault-interface {
  --ws-canvas: #edebe5;
  --ws-panel: #f6f5f1;
  --ws-page: #ffffff;
  --ws-page-edge: #e3e1d9;
  --ws-shadow: 0 1px 2px rgba(18, 20, 22, .06), 0 8px 24px rgba(18, 20, 22, .06);
  --ws-paper: var(--ws-canvas);
  --ws-sheet: var(--ws-page);
  --ws-sunk: #f0efe9;
  --ws-hover: #f3f2ed;
  --ws-ink: #121416;
  --ws-soft: #59574f;
  --ws-line: #e3e1d9;
  --ws-line-strong: #89877f;
  --ws-band: #f0efe9;
  --ws-stage-paid: #121416;
  --ws-stage-paid-ink: #ffffff;
  --ph-dev-strong: #8f5b00;
  --ph-prep-strong: #0b7366;
  --ph-shoot-strong: #b03f27;
  --ph-post-strong: #6a46c0;
  --ph-money-strong: #2a7636;
  --ph-dev-tint: #fcefd5;
  --ph-prep-tint: #dcf4f0;
  --ph-shoot-tint: #fde6df;
  --ph-post-tint: #ede5fc;
  --ph-money-tint: #e0f2e2;
  color-scheme: light;
  --ws-accent: #46e6f2;
  --ws-on-accent: #121416;
  --ws-tape-ink: #121416;
  --ws-rail: #121416;
  --ws-rail-ink: #f4f3ee;
  --ws-rail-soft: #bbc1bc;
  --ws-radius-page: 8px;
  /* Phase tapes: dark text on the tape passes AA in both themes. */
  --ph-dev: #f2b64a;
  --ph-prep: #3fc7b6;
  --ph-shoot: #f48a74;
  --ph-post: #b79cf2;
  --ph-money: #80cf8a;
  /* Status tapes: always a word on a solid fill. */
  --st-go: #80cf8a;
  --st-hold: #f2b64a;
  --st-hold2: #f6d68f;
  --st-ask: #a9c8f5;
  --st-out: #f48a74;
  --st-teal: #7fd6cb;
  --st-off: #d3d1c9;
  --st-quiet: #e4e2da;
  /* The current page's phase (shell.js sets body[data-fb-phase]); neutral when none. */
  --ph: var(--st-quiet);
  --ph-strong: var(--ws-ink);
  --ph-tint: var(--ws-sunk);
  --ws-stage-lead: #a47be8;
  --ws-stage-quoted: #4c8df0;
  --ws-stage-booked: #2bb3a3;
  --ws-stage-prepro: #6cc28f;
  --ws-stage-shooting: #f3c531;
  --ws-stage-post: #f28c28;
  --ws-stage-delivered: #e86fa7;
  --ws-stage-invoiced: #f0786b;
  --ws-stage-archived: #a5a39b;
  --ws-drive-B: #0061fe;
  --ws-drive-S: #7d4fd0;
  --ws-drive-W: #b5832f;
  --ws-drive-G: #5dbb4f;
  --ws-drive-Z: #e86fa7;
  --ws-drive-T: #f3c531;
  --ws-drive-V: #e4572e;
  --ws-drive-N: #2f6fca;
  --ws-drive-X: #2bb3a3;
  --ws-drive-E: #f28c28;
  --ws-drive-F: #9aa3ad;
  --ws-drive-I: #f2f2ee;
  --ws-drive-D: #2f3a45;
  --ws-drive-C: #c9a5e8;
  --ws-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --ws-ui: Jost, Arial, sans-serif;
  --ws-mono: 'Martian Mono', ui-monospace, monospace;
  --ws-label: 10px;
  --ws-meta: 12.5px;
  --ws-row-pad: 11px;
  --ws-radius: 12px;
}
.ws[data-theme='overnight'], .vault-interface[data-theme='overnight'], :root[data-theme='night'] .fieldbook-redesign {
  --ws-canvas: #111314;
  --ws-panel: #171a1c;
  --ws-page: #1d2124;
  --ws-page-edge: #2e3438;
  --ws-shadow: 0 0 0 1px #2e3438;
  --ws-paper: var(--ws-canvas);
  --ws-sheet: var(--ws-page);
  --ws-sunk: #262b2e;
  --ws-hover: #23282b;
  --ws-ink: #f4f3ee;
  --ws-soft: #b9c0bb;
  --ws-line: #353c40;
  --ws-line-strong: #8c9690;
  --ws-band: #262b2e;
  --ws-stage-paid: #e8ebe6;
  --ws-stage-paid-ink: #121416;
  --ph-dev-strong: var(--ph-dev);
  --ph-prep-strong: var(--ph-prep);
  --ph-shoot-strong: var(--ph-shoot);
  --ph-post-strong: var(--ph-post);
  --ph-money-strong: var(--ph-money);
  --ph-dev-tint: #3a2e14;
  --ph-prep-tint: #11312d;
  --ph-shoot-tint: #3d2019;
  --ph-post-tint: #2a2342;
  --ph-money-tint: #18321d;
  color-scheme: dark;
}
/* Root state determines first paint before body/host adapters are available. */
@media screen {
  :root[data-theme='day'], :root:not([data-theme]) { color-scheme: light; }
  :root[data-theme='night'] { color-scheme: dark; }
  :root[data-theme='day'] :is(.ws, .vault-interface) {
    --ws-canvas: #edebe5;
    --ws-panel: #f6f5f1;
    --ws-page: #ffffff;
    --ws-page-edge: #e3e1d9;
    --ws-shadow: 0 1px 2px rgba(18, 20, 22, .06), 0 8px 24px rgba(18, 20, 22, .06);
    --ws-paper: var(--ws-canvas);
    --ws-sheet: var(--ws-page);
    --ws-sunk: #f0efe9;
    --ws-hover: #f3f2ed;
    --ws-ink: #121416;
    --ws-soft: #59574f;
    --ws-line: #e3e1d9;
    --ws-line-strong: #89877f;
    --ws-band: #f0efe9;
    --ws-stage-paid: #121416;
    --ws-stage-paid-ink: #ffffff;
    --ph-dev-strong: #8f5b00;
    --ph-prep-strong: #0b7366;
    --ph-shoot-strong: #b03f27;
    --ph-post-strong: #6a46c0;
    --ph-money-strong: #2a7636;
    --ph-dev-tint: #fcefd5;
    --ph-prep-tint: #dcf4f0;
    --ph-shoot-tint: #fde6df;
    --ph-post-tint: #ede5fc;
    --ph-money-tint: #e0f2e2;
    color-scheme: light;
  }
  :root[data-theme='night'] :is(.ws, .vault-interface) {
    --ws-canvas: #111314;
    --ws-panel: #171a1c;
    --ws-page: #1d2124;
    --ws-page-edge: #2e3438;
    --ws-shadow: 0 0 0 1px #2e3438;
    --ws-paper: var(--ws-canvas);
    --ws-sheet: var(--ws-page);
    --ws-sunk: #262b2e;
    --ws-hover: #23282b;
    --ws-ink: #f4f3ee;
    --ws-soft: #b9c0bb;
    --ws-line: #353c40;
    --ws-line-strong: #8c9690;
    --ws-band: #262b2e;
    --ws-stage-paid: #e8ebe6;
    --ws-stage-paid-ink: #121416;
    --ph-dev-strong: var(--ph-dev);
    --ph-prep-strong: var(--ph-prep);
    --ph-shoot-strong: var(--ph-shoot);
    --ph-post-strong: var(--ph-post);
    --ph-money-strong: var(--ph-money);
    --ph-dev-tint: #3a2e14;
    --ph-prep-tint: #11312d;
    --ph-shoot-tint: #3d2019;
    --ph-post-tint: #2a2342;
    --ph-money-tint: #18321d;
    color-scheme: dark;
  }
  .fieldbook-theme-status { margin: 0; color: var(--ws-ink); font: 400 14px/1.4 var(--ws-ui); overflow-wrap: anywhere; }
  #themeSaveStatus { order: 6; flex-basis: 100%; }
  .fieldbook-redesign > header:has(#themeSaveStatus:not([hidden])) { height: auto; flex-wrap: wrap; }
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; }
  :root:not([data-theme]) :is(.ws, .vault-interface) {
    --ws-canvas: #111314;
    --ws-panel: #171a1c;
    --ws-page: #1d2124;
    --ws-page-edge: #2e3438;
    --ws-shadow: 0 0 0 1px #2e3438;
    --ws-paper: var(--ws-canvas);
    --ws-sheet: var(--ws-page);
    --ws-sunk: #262b2e;
    --ws-hover: #23282b;
    --ws-ink: #f4f3ee;
    --ws-soft: #b9c0bb;
    --ws-line: #353c40;
    --ws-line-strong: #8c9690;
    --ws-band: #262b2e;
    --ws-stage-paid: #e8ebe6;
    --ws-stage-paid-ink: #121416;
    --ph-dev-strong: var(--ph-dev);
    --ph-prep-strong: var(--ph-prep);
    --ph-shoot-strong: var(--ph-shoot);
    --ph-post-strong: var(--ph-post);
    --ph-money-strong: var(--ph-money);
    --ph-dev-tint: #3a2e14;
    --ph-prep-tint: #11312d;
    --ph-shoot-tint: #3d2019;
    --ph-post-tint: #2a2342;
    --ph-money-tint: #18321d;
    color-scheme: dark;
  }
}
:is(.ws, .vault-interface)[data-fb-phase='dev'] { --ph: var(--ph-dev); --ph-strong: var(--ph-dev-strong); --ph-tint: var(--ph-dev-tint); }
:is(.ws, .vault-interface)[data-fb-phase='prep'] { --ph: var(--ph-prep); --ph-strong: var(--ph-prep-strong); --ph-tint: var(--ph-prep-tint); }
:is(.ws, .vault-interface)[data-fb-phase='shoot'] { --ph: var(--ph-shoot); --ph-strong: var(--ph-shoot-strong); --ph-tint: var(--ph-shoot-tint); }
:is(.ws, .vault-interface)[data-fb-phase='post'] { --ph: var(--ph-post); --ph-strong: var(--ph-post-strong); --ph-tint: var(--ph-post-tint); }
:is(.ws, .vault-interface)[data-fb-phase='money'] { --ph: var(--ph-money); --ph-strong: var(--ph-money-strong); --ph-tint: var(--ph-money-tint); }
/* Any element can carry its own phase. */
[data-ph='dev'] { --ph: var(--ph-dev); --ph-strong: var(--ph-dev-strong); --ph-tint: var(--ph-dev-tint); }
[data-ph='prep'] { --ph: var(--ph-prep); --ph-strong: var(--ph-prep-strong); --ph-tint: var(--ph-prep-tint); }
[data-ph='shoot'] { --ph: var(--ph-shoot); --ph-strong: var(--ph-shoot-strong); --ph-tint: var(--ph-shoot-tint); }
[data-ph='post'] { --ph: var(--ph-post); --ph-strong: var(--ph-post-strong); --ph-tint: var(--ph-post-tint); }
[data-ph='money'] { --ph: var(--ph-money); --ph-strong: var(--ph-money-strong); --ph-tint: var(--ph-money-tint); }
.ws[data-labels='larger'] { --ws-label: 12px; --ws-meta: 14px; }
.ws[data-density='compact'] { --ws-row-pad: 7px; }

/* ---------- color tape: the signature. A colored label with a notched end. ---------- */
.ws-tape {
  display: inline-flex;
  align-items: center;
  flex: none;
  max-width: 100%;
  padding: 5px 10px 5px 7px;
  background: var(--ws-tape-color, var(--ws-stage-archived));
  color: #121416;
  font: 500 var(--ws-label)/1.2 var(--ws-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 22%, 100% 44%, calc(100% - 2px) 66%, 100% 86%, calc(100% - 3px) 100%, 0 100%);
}
.ws-tape[data-stage='lead'] { --ws-tape-color: var(--ws-stage-lead); }
.ws-tape[data-stage='quoted'] { --ws-tape-color: var(--ws-stage-quoted); }
.ws-tape[data-stage='booked'] { --ws-tape-color: var(--ws-stage-booked); }
.ws-tape[data-stage='prepro'] { --ws-tape-color: var(--ws-stage-prepro); }
.ws-tape[data-stage='shooting'] { --ws-tape-color: var(--ws-stage-shooting); }
.ws-tape[data-stage='post'] { --ws-tape-color: var(--ws-stage-post); }
.ws-tape[data-stage='delivered'] { --ws-tape-color: var(--ws-stage-delivered); }
.ws-tape[data-stage='invoiced'] { --ws-tape-color: var(--ws-stage-invoiced); }
.ws-tape[data-stage='paid'] { --ws-tape-color: var(--ws-stage-paid); color: var(--ws-stage-paid-ink); }
.ws-tape[data-drive='B'] { --ws-tape-color: var(--ws-drive-B); }
.ws-tape[data-drive='S'] { --ws-tape-color: var(--ws-drive-S); }
.ws-tape[data-drive='W'] { --ws-tape-color: var(--ws-drive-W); }
.ws-tape[data-drive='G'] { --ws-tape-color: var(--ws-drive-G); }
.ws-tape[data-drive='Z'] { --ws-tape-color: var(--ws-drive-Z); }
.ws-tape[data-drive='T'] { --ws-tape-color: var(--ws-drive-T); }
.ws-tape[data-drive='V'] { --ws-tape-color: var(--ws-drive-V); }
.ws-tape[data-drive='N'] { --ws-tape-color: var(--ws-drive-N); }
.ws-tape[data-drive='X'] { --ws-tape-color: var(--ws-drive-X); }
.ws-tape[data-drive='E'] { --ws-tape-color: var(--ws-drive-E); }
.ws-tape[data-drive='F'] { --ws-tape-color: var(--ws-drive-F); }
.ws-tape[data-drive='I'] { --ws-tape-color: var(--ws-drive-I); border: 1px solid #121416; }
.ws-tape[data-drive='D'] { --ws-tape-color: var(--ws-drive-D); }
.ws-tape[data-drive='C'] { --ws-tape-color: var(--ws-drive-C); }
.ws-tape[data-drive='B'], .ws-tape[data-drive='S'], .ws-tape[data-drive='N'], .ws-tape[data-drive='D'] { color: #ffffff; }
.ws-tape--group { padding: 6px 13px 6px 9px; }
.ws-tape--letter { padding: 3px 8px 3px 6px; }
.ws-tape--next { --ws-tape-color: var(--ws-stage-invoiced); }

/* Phase tape: the page's place in the job (DEVELOPMENT, PREP, SHOOT, POST, MONEY). */
.fb-tape {
  display: inline-flex; align-items: center; flex: none; max-width: 100%; box-sizing: border-box;
  min-height: 24px; padding: 3px 13px 3px 8px;
  background: var(--ph); color: var(--ws-tape-ink);
  font: 600 14px/1.1 var(--ws-ui); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 22%, 100% 44%, calc(100% - 3px) 66%, 100% 86%, calc(100% - 4px) 100%, 0 100%);
}
.fb-tape--studio { --ph: var(--st-quiet); }

/* Status tape: a word on a solid fill, never a bare dot. */
.fb-pill {
  display: inline-flex; align-items: center; flex: none; box-sizing: border-box; vertical-align: baseline;
  min-height: 24px; padding: 2px 12px 2px 8px;
  background: var(--pill, var(--st-quiet)); color: var(--ws-tape-ink);
  font: 500 14px/1.2 var(--ws-ui); font-style: normal; letter-spacing: 0; text-transform: none; white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 25%, 100% 50%, calc(100% - 4px) 75%, 100% 100%, 0 100%);
}
.fb-pill[data-status='confirmed'], .fb-pill[data-status='booked'], .fb-pill[data-status='approved'], .fb-pill[data-status='paid'], .fb-pill[data-status='delivered'] { --pill: var(--st-go); }
.fb-pill[data-status='first_hold'], .fb-pill[data-status='held'], .fb-pill[data-status='in_review'], .fb-pill[data-status='review'] { --pill: var(--st-hold); }
.fb-pill[data-status='second_hold'], .fb-pill[data-status='weather_hold'], .fb-pill[data-status='requested'], .fb-pill[data-status='pending'] { --pill: var(--st-hold2); }
.fb-pill[data-status='avail_check'], .fb-pill[data-status='shortlisted'] { --pill: var(--st-ask); }
.fb-pill[data-status='reserved'] { --pill: var(--st-teal); }
.fb-pill[data-status='out'], .fb-pill[data-status='overdue'], .fb-pill[data-status='missing'], .fb-pill[data-status='repair'] { --pill: var(--st-out); }
.fb-pill[data-status='released'], .fb-pill[data-status='wrapped'], .fb-pill[data-status='used'] { --pill: var(--st-off); }
.fb-pill[data-status='in'], .fb-pill[data-status='draft'] { --pill: var(--st-quiet); }

/* Full-width band: a row that is a different kind of thing (overlay, day break, call sheet section). */
.fb-band { background: var(--ph-tint); color: var(--ws-ink); }

@media print {
  .fb-tape, .fb-pill, .ws-tape { background: none !important; color: #000 !important; clip-path: none; border: 1px solid #000; }
  .fb-band { background: none !important; }
  :is(.ws, .vault-interface) { --ws-shadow: none; }
}
