/* ============================================================================
   Big Giant Production OS
   Palette, type, grain, and motion all carried over from biggiantpicture.co —
   the projector flicker, the film grain, the horizontal wipe, the grain wash.
   ========================================================================== */

:root {
  --bg: #000000;
  --text: #ffffff;
  --secondary: #9a9a9a;
  --dim: #6f6f6f;
  --hairline: #262626;
  --hairline-soft: #1a1a1a;
  --surface: rgba(10, 10, 10, 0.72);
  --surface-solid: #0c0c0c;
  --gold: #FFC700;          /* sampled from live biggiantpicture.co */
  --gold-deep: #B88F00;
  --red: #E2432A;
  --green: #4FB477;
  --nav-h: 64px;
  --pad-x: clamp(20px, 5vw, 84px);
}

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

html { background: var(--bg); scrollbar-width: none; scroll-behavior: smooth; }
::-webkit-scrollbar { display: none; }

body {
  /* transparent so the fixed backdrop layers at negative z-index show through */
  background: transparent;
  color: var(--text);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  font-size: 15px;
  line-height: 1.5;
}

::selection { background: var(--gold); color: #000; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }

/* ---------- projector flicker: black text inside a flickering glow -------- */
@keyframes projector-flicker {
  0%   { filter: url(#pj-a) brightness(1); }
  6%   { filter: url(#pj-a) brightness(1.22); }
  11%  { filter: url(#pj-b) brightness(0.9); }
  17%  { filter: url(#pj-b) brightness(1.1); }
  26%  { filter: url(#pj-a) brightness(0.82); }
  33%  { filter: url(#pj-a) brightness(1.15); }
  41%  { filter: url(#pj-b) brightness(1); }
  52%  { filter: url(#pj-b) brightness(1.25); }
  60%  { filter: url(#pj-a) brightness(0.88); }
  68%  { filter: url(#pj-a) brightness(1.06); }
  77%  { filter: url(#pj-b) brightness(0.94); }
  85%  { filter: url(#pj-b) brightness(1.18); }
  100% { filter: url(#pj-a) brightness(1); }
}
.glow-link { transition: color 0.18s ease; }
.glow-link:hover {
  color: #000 !important;
  animation: projector-flicker 1.6s linear infinite;
}

/* ---------- film grain --------------------------------------------------- */
.grain {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 999; overflow: hidden;
  mix-blend-mode: screen; opacity: 0.175;
}
.grain::after {
  content: "";
  position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='198' height='198'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0.33 0.33 0.33 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 198px 198px;
  animation: grain 0.65s steps(6) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  16% { transform: translate(-3%, -6%); }
  33% { transform: translate(-9%, 4%); }
  50% { transform: translate(5%, -8%); }
  66% { transform: translate(-4%, 9%); }
  83% { transform: translate(7%, 3%); }
}

/* ---------- ambient reel smoke -------------------------------------------
   The SiteBackground treatment from josh-goldsmith.com: the reel is blurred
   past recognition into a slow color bleed. It reads as light in the room,
   never as an image competing with the data on top of it. */
.reel-bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: #000; }
.reel-bg video {
  position: absolute; inset: -10%;
  width: 120%; height: 120%; object-fit: cover;
  filter: blur(90px) saturate(1.4) brightness(0.42);
  opacity: 0; transition: opacity 1.1s ease;
}
.reel-bg video.on { opacity: 0.5; }
.reel-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(ellipse at center, transparent 15%, rgba(0,0,0,0.72) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.55), transparent 35%, transparent 60%, rgba(0,0,0,0.7));
}
/* working pages sit on an even quieter ground */
.reel-bg.flat video { filter: blur(110px) saturate(1.3) brightness(0.3); }
.reel-bg.flat video.on { opacity: 0.42; }

/* ---------- nav ---------------------------------------------------------- */
.bleed {
  position: fixed; top: 0; left: 0; right: 0; height: 150px;
  z-index: 35; overflow: hidden; pointer-events: none; background: var(--bg);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black var(--nav-h), transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black var(--nav-h), transparent 100%);
}
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 18px;
  padding: 0 var(--pad-x);
  font-size: 13px;
}
.nav-logo { display: flex; align-items: center; gap: 12px; }
.nav-logo img { height: 26px; width: auto; display: block; }
.nav-logo:hover img { animation: projector-flicker 1.6s linear infinite; }
.nav-wordmark {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--secondary); white-space: nowrap;
}
@media (max-width: 720px) { .nav-wordmark { display: none; } }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
/* Nav links opt out of the projector flicker — at 13px that filter's halo
   lands as a hard edge. A soft bloom reads like the same light, smoothed. */
.nav-right a {
  color: var(--secondary); white-space: nowrap;
  position: relative; padding: 4px 2px;
  transition: color 0.28s ease, text-shadow 0.28s ease;
}
.nav-right a:not(.nav-cta):not(.btn)::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
/* Two wide shadows banded on a near-black ground and read as a hard-edged
   plate. Several tighter stops fall off gradually instead. */
.nav-right a:not(.nav-cta):not(.btn):hover {
  color: var(--text);
  text-shadow:
    0 0 3px  rgba(255, 199, 0, 0.46),
    0 0 6px  rgba(255, 199, 0, 0.30),
    0 0 10px rgba(255, 199, 0, 0.18),
    0 0 15px rgba(255, 199, 0, 0.08);
}
.nav-right a:not(.nav-cta):not(.btn):hover::after { transform: scaleX(1); }
.nav-right a.active { color: var(--text); }
.nav-right a.active:not(.nav-cta):not(.btn)::after { transform: scaleX(1); background: var(--gold); }

.nav-right .nav-cta {
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 7px 16px; color: var(--text); font-weight: 600;
  transition: border-color 0.28s ease, background 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
}
/* On hover the CTA trades its fill for the site's projector treatment: the
   text and ring become the glow source, so the flicker blooms across the
   whole pill and the hard edge melts into it. */
.nav-right .nav-cta:hover,
.nav-right .nav-cta.active:hover {
  background: transparent;
  border-color: #000;
  color: #000;
  box-shadow: none;
  animation: projector-flicker 1.6s linear infinite;
}
.nav-right .nav-cta.active { background: var(--gold); color: #000; border-color: var(--gold); }
.nav-scroll {
  display: flex; align-items: center; gap: 20px;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* overflow-x:auto silently makes overflow-y auto as well, which was slicing
     the hover glow flat across its top and bottom. Pad the scroll box out and
     pull it back with margin so the bloom has room to fall off inside it. */
  padding-block: 18px;
  margin-block: -18px;
}
.nav-scroll::-webkit-scrollbar { display: none; }
.nav-seat { margin-left: 4px; }
/* the seat button fills gold on hover — no underline, no glow */
.nav-right a.nav-seat:hover {
  background: var(--gold); color: #000; border-color: var(--gold);
  text-shadow: none;
}

/* Narrow screens: the nav becomes a single scrolling rail, faded at its right
   edge so it reads as "there's more" rather than "it's cut off". */
@media (max-width: 900px) {
  nav { padding: 0 16px; gap: 12px; }
  .nav-right { gap: 0; font-size: 12.5px; min-width: 0; }
  .nav-scroll {
    gap: 16px;
    padding-right: 18px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
  }
  .nav-logo img { height: 22px; }
  .nav-right .nav-cta { padding: 6px 13px; }
}

/* ---------- layout shells ------------------------------------------------ */
main { position: relative; padding-top: var(--nav-h); }
.wrap    { max-width: 1120px; margin: 0 auto; padding: 0 var(--pad-x); }
.wrap-md { max-width: 860px;  margin: 0 auto; padding: 0 var(--pad-x); }
.wrap-sm { max-width: 660px;  margin: 0 auto; padding: 0 var(--pad-x); }
.pt-page { padding-top: 56px; }
.pb-page { padding-bottom: 140px; }

footer.site-foot {
  border-top: 1px solid var(--hairline);
  padding: 26px var(--pad-x) 40px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dim);
}

/* ---------- type --------------------------------------------------------- */
.display {
  text-transform: uppercase;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 0.95;
}
.kicker {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--secondary); font-weight: 400;
}
.kicker-tight { letter-spacing: 0.12em; }
.gold { color: var(--gold); }
.muted { color: var(--secondary); }
.dim { color: var(--dim); }
.lede { color: rgba(255,255,255,0.78); font-size: 16px; line-height: 1.6; }

h1.display { font-size: clamp(40px, 8.4vw, 104px); }

/* Working pages get a page title, not a hero: sized between the kicker and the
   display treatment so a queue reads like software instead of a title card. */
.page-title {
  font-size: clamp(21px, 2.2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
h2.display { font-size: clamp(26px, 4vw, 46px); }
h3.display { font-size: 20px; }

/* ---------- animations: rise, tick, wash --------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise   { animation: rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.rise-1 { animation-delay: 0.06s; }
.rise-2 { animation-delay: 0.14s; }
.rise-3 { animation-delay: 0.22s; }
.rise-4 { animation-delay: 0.30s; }

@keyframes tick {
  0%   { opacity: 0; transform: scale(0.5) rotate(-14deg); }
  60%  { opacity: 1; transform: scale(1.12) rotate(4deg); }
  100% { opacity: 1; transform: none; }
}
.tick { animation: tick 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

/* the site's signature: content burns in through film grain */
@keyframes grain-unwash {
  0%   { opacity: 0; filter: contrast(5) brightness(7) blur(3px); }
  50%  { opacity: 0.5; filter: contrast(2.5) brightness(2.5) blur(1px); }
  100% { opacity: 1; filter: none; }
}
@keyframes grain-wash {
  0%   { opacity: 1; filter: none; }
  40%  { opacity: 0.6; filter: contrast(2.4) brightness(2.2) blur(1px); }
  100% { opacity: 0; filter: contrast(5) brightness(7) blur(3px); }
}
.unwash { animation: grain-unwash 0.5s steps(6) both; }
.wash   { animation: grain-wash 0.42s steps(7) both; }

@keyframes fade { to { opacity: 1; } }
.fade-in { opacity: 0; animation: fade 0.9s ease 0.2s forwards; }

@media (prefers-reduced-motion: reduce) {
  .rise, .tick, .unwash, .wash, .fade-in { animation: none !important; opacity: 1 !important; }
  .grain { display: none; }
  html { scroll-behavior: auto; }
}

/* ---------- cards -------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.card-flat { background: rgba(8,8,8,0.6); border: 1px solid var(--hairline-soft); }
.card-gold { border-color: var(--gold); }
.card-ink  { background: #ffffff; color: #000; border-color: #fff; }
.p-4 { padding: 16px; } .p-5 { padding: 20px; } .p-6 { padding: 24px; } .p-7 { padding: 28px; }

/* hover-lift with a gold offset — the OS read of the site's gold accent */
.lift { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.lift:hover {
  transform: translate(-2px, -2px);
  border-color: var(--gold);
  box-shadow: 6px 6px 0 0 rgba(255, 199, 0, 0.22);
}

/* ---------- buttons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 999px;
  padding: 12px 26px; font-size: 14px; font-weight: 600;
  cursor: pointer; user-select: none;
  transition: transform 0.12s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--text); color: #000; border-color: var(--text); }
.btn-primary:hover { background: var(--gold); border-color: var(--gold); }
.btn-accent { background: var(--gold); color: #000; border-color: var(--gold); }
.btn-accent:hover { background: var(--text); border-color: var(--text); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--hairline); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn:disabled { opacity: 0.35; pointer-events: none; }
.btn-sm { padding: 7px 16px; font-size: 12.5px; }
.btn-lg { padding: 15px 40px; font-size: 16px; }

/* ---------- form controls ------------------------------------------------ */
.input, .textarea, .select {
  width: 100%;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--hairline);
  border-radius: 0;
  padding: 12px 14px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  color: var(--text);
}
.textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--gold);
  box-shadow: 3px 3px 0 0 rgba(255, 199, 0, 0.35);
}
.input::placeholder, .textarea::placeholder { color: #5b5b5b; }
.select { appearance: none; cursor: pointer; }
input[type="date"] { color-scheme: dark; }

.field { padding: 20px 0; border-bottom: 1px solid var(--hairline-soft); }
.field:first-child { padding-top: 0; }
.field:last-child { border-bottom: 0; padding-bottom: 0; }
.field-label { font-size: 14.5px; font-weight: 600; }
.field-label .req { color: var(--gold); margin-left: 4px; }
.field-help { color: var(--secondary); font-size: 13px; margin-top: 4px; }
.field-why {
  margin-top: 10px; font-size: 12.5px; color: var(--secondary);
  border-left: 2px solid var(--gold); padding-left: 10px;
}
.field-why b { color: var(--text); font-weight: 600; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 8px 15px; font-size: 13px; font-weight: 500;
  background: transparent; cursor: pointer; user-select: none;
  transition: all 0.14s ease;
}
.chip:hover { border-color: var(--gold); transform: translateY(-1px); }
.chip.on { background: var(--gold); color: #000; border-color: var(--gold); font-weight: 600; }

.radio-card {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--hairline);
  padding: 12px 16px; font-size: 14.5px; font-weight: 500;
  background: rgba(0,0,0,0.4); cursor: pointer; user-select: none;
  transition: all 0.14s ease;
}
.radio-card:hover { border-color: var(--gold); transform: translate(-1px, -1px); }
.radio-card.on {
  background: var(--gold); color: #000; border-color: var(--gold); font-weight: 600;
  box-shadow: 4px 4px 0 0 rgba(255,199,0,0.2);
}

.tag {
  display: inline-flex; align-items: center;
  border-radius: 999px; padding: 4px 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  white-space: nowrap;
}
.tag-ink   { background: var(--text); color: #000; }
.tag-quiet { background: rgba(255,255,255,0.08); color: var(--secondary); border: 1px solid var(--hairline); }
.tag-gold  { background: var(--gold); color: #000; }
.tag-red   { background: var(--red); color: #fff; }
.tag-green { background: var(--green); color: #000; }
.tag-pulse { animation: tag-pulse 1.6s ease-in-out infinite; }
@keyframes tag-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

.stack   { display: flex; flex-direction: column; gap: 8px; }
.stack-2 { display: flex; flex-direction: column; gap: 16px; }
.row     { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row-gap { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.spread  { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.grid-2  { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
.grid-3  { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.grid-4  { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- home --------------------------------------------------------- */
.home-hero { padding: clamp(60px, 12vh, 130px) 0 56px; }
/* sized to hold "Production OS" on a single line at every width */
.home-hero h1 { white-space: nowrap; font-size: clamp(24px, 8.6vw, 88px); }

.doors { display: grid; gap: 2px; grid-template-columns: repeat(3, 1fr); margin-bottom: 90px; }
@media (max-width: 860px) { .doors { grid-template-columns: 1fr; } }
.door {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  background: var(--surface-solid);
  border: 1px solid var(--hairline);
  padding: 28px 24px 24px;
  min-height: 235px;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.door::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 0% 100%, rgba(255,199,0,0.12), transparent 62%);
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.door:hover { transform: translate(-3px, -3px); border-color: var(--gold); box-shadow: 8px 8px 0 0 rgba(255,199,0,0.18); }
.door:hover::after { opacity: 1; }
.door .door-title { font-size: 25px; line-height: 1.02; }
.door .door-sub { font-size: 13.5px; color: var(--secondary); line-height: 1.55; }
.door .door-go { margin-top: auto; padding-top: 10px; color: var(--gold); font-weight: 600; transition: transform 0.2s ease; }
.door:hover .door-go { transform: translateX(5px); }

.why-strip {
  border-top: 1px solid var(--hairline);
  padding: 46px 0 30px;
  display: grid; gap: 34px; grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 860px) { .why-strip { grid-template-columns: 1fr; } }
.why-strip .display { font-size: 21px; margin-bottom: 10px; }
.why-strip p { color: var(--secondary); font-size: 14px; line-height: 1.6; }

/* ---------- drift shelf (marquee) ---------------------------------------- */
.shelf {
  overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.shelf:active { cursor: grabbing; }
.shelf-track { display: flex; width: max-content; align-items: center; }
.caps {
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding: 22px 0; white-space: nowrap; margin-bottom: 70px;
}
.caps .shelf-track {
  font-size: clamp(17px, 2.4vw, 27px); font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.01em;
}
.caps .shelf-track span { color: var(--secondary); margin: 0 16px; }
.caps .shelf-track .dot { color: var(--gold); }

/* ---------- wizard ------------------------------------------------------- */
.wiz-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 22px; }
.wiz-count { text-align: right; flex-shrink: 0; }
.wiz-count .n { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; }
@media (max-width: 560px) {
  .wiz-head { flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
  .wiz-count { text-align: left; }
  .wiz-head h1.display, .wiz-head .display { font-size: 30px !important; }
}
.wiz-count .of { color: var(--secondary); font-weight: 600; }
.wiz-save { font-size: 11px; color: var(--dim); height: 16px; letter-spacing: 0.1em; text-transform: uppercase; }

.wiz-bar { height: 2px; background: var(--hairline); overflow: hidden; margin-bottom: 12px; }
.wiz-bar span { display: block; height: 100%; background: var(--gold); transition: width 0.5s cubic-bezier(0.65,0,0.35,1); }

.wiz-steps { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 30px; }
.wiz-steps button, .wiz-steps span {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 9px; background: none; border: 0; cursor: default; color: #4a4a4a;
  transition: color 0.18s ease, background 0.18s ease;
}
.wiz-steps .done { color: var(--secondary); cursor: pointer; }
.wiz-steps .done:hover { color: var(--gold); }
.wiz-steps .now { background: var(--gold); color: #000; }

/* horizontal wipe between steps — the HomeTabs move from the site */
.wiz-viewport { overflow-x: clip; }
.wiz-panel { will-change: transform, opacity; }
@keyframes wipe-in-next  { from { opacity: 0; transform: translateX(38px); } to { opacity: 1; transform: none; } }
@keyframes wipe-in-prev  { from { opacity: 0; transform: translateX(-38px); } to { opacity: 1; transform: none; } }
.wipe-next { animation: wipe-in-next 0.42s cubic-bezier(0.65, 0, 0.35, 1) both; }
.wipe-prev { animation: wipe-in-prev 0.42s cubic-bezier(0.65, 0, 0.35, 1) both; }

.wiz-nav { display: flex; justify-content: space-between; margin-top: 28px; gap: 12px; }
.wiz-still { margin-top: 14px; color: var(--gold); font-weight: 600; font-size: 13.5px; }
.wiz-foot { margin-top: 46px; text-align: center; font-size: 13px; color: var(--secondary); }
.wiz-foot a:hover { color: var(--gold); }

.resume {
  border: 1px solid var(--gold); background: rgba(255,199,0,0.06);
  padding: 12px 16px; margin-bottom: 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  font-size: 13.5px; font-weight: 500;
}
.resume button { background: none; border: 0; color: var(--gold); font-weight: 600; cursor: pointer; white-space: nowrap; }

/* links + files + commitments editors */
.link-row, .file-row {
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--hairline-soft); padding: 9px 0; font-size: 13.5px;
}
.link-row a { color: var(--gold); word-break: break-all; }
.link-row button, .file-row button, .kill {
  background: none; border: 0; color: var(--dim); cursor: pointer; font-size: 15px; margin-left: auto;
  padding: 4px 8px; transition: color 0.18s ease;
}
.link-row button:hover, .file-row button:hover, .kill:hover { color: var(--red); }
.dropzone {
  border: 1px dashed var(--hairline); padding: 22px; text-align: center;
  color: var(--secondary); font-size: 13px; cursor: pointer; transition: all 0.18s ease;
}
.dropzone:hover, .dropzone.over { border-color: var(--gold); color: var(--gold); }

.commit-card { border: 1px solid var(--hairline); padding: 16px; margin-bottom: 10px; background: rgba(0,0,0,0.4); }
.commit-card .commit-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.firm-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.firm { border: 1px solid var(--hairline); background: transparent; }
.firm.on-confirmed  { background: var(--text); color: #000; border-color: var(--text); }
.firm.on-assumption { background: var(--gold); color: #000; border-color: var(--gold); }
.firm.on-unknown    { background: var(--red); color: #fff; border-color: var(--red); }
.firm.on-na         { background: #2a2a2a; color: var(--secondary); border-color: #2a2a2a; }

.fact-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.fact-row .fact-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dim);
}

/* select-menu (client picker / multiselect) */
.menu-wrap { position: relative; margin-top: 8px; }
.menu-btn { display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; }
.menu-btn .caret { margin-left: auto; color: var(--secondary); }
.menu {
  position: absolute; z-index: 60; top: calc(100% + 3px); left: 0; right: 0;
  max-height: 290px; overflow-y: auto;
  background: #060606; border: 1px solid var(--hairline);
  box-shadow: 6px 6px 0 0 rgba(255,199,0,0.16);
  animation: rise 0.2s ease both;
}
.menu button {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; text-align: left; font-size: 14px; font-weight: 500;
  background: none; border: 0; cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.menu button:hover { background: rgba(255,199,0,0.1); color: var(--gold); }
.menu button.on { background: rgba(255,255,255,0.06); }
.menu .divider { border-top: 1px solid var(--hairline); }
.client-dot {
  width: 24px; height: 24px; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #1a1a1a; border: 1px solid var(--hairline);
  font-size: 11px; font-weight: 700; color: var(--secondary);
  object-fit: contain;
}
/* official marks arrive in brand colors — render them uniformly white, the
   same treatment the marketing site's client wall uses */
img.client-dot {
  background: transparent; border-color: transparent; padding: 1px;
  filter: brightness(0) invert(1); opacity: 0.9;
}

/* ---------- considerations ----------------------------------------------- */
.consider {
  border: 1px solid var(--hairline); border-left-width: 3px;
  padding: 12px 15px; background: rgba(0,0,0,0.42);
}
.consider.flag  { border-left-color: var(--red); }
.consider.watch { border-left-color: var(--gold); }
.consider.note  { border-left-color: var(--hairline); }
.consider .c-text { font-size: 13.5px; font-weight: 600; }
.consider .c-cat {
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--secondary); margin-right: 8px; font-weight: 600;
}
.consider .c-why { font-size: 12.5px; color: var(--secondary); margin-top: 4px; line-height: 1.5; }

.guidance { background: var(--text); color: #000; padding: 22px; }
.guidance .kicker { color: rgba(0,0,0,0.5); }
.guidance .g-head { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-top: 4px; }
.guidance .g-head b { color: var(--gold-deep); font-weight: 700; }
.guidance .g-detail { font-size: 14px; margin-top: 8px; color: rgba(0,0,0,0.72); line-height: 1.55; }

/* ---------- done page ---------------------------------------------------- */
.done-tick {
  width: 62px; height: 62px; border-radius: 999px;
  background: var(--gold); color: #000;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; margin-bottom: 22px;
}
.open-item { font-size: 14.5px; font-weight: 500; }
.open-item .arrow { color: var(--gold); font-weight: 700; margin-right: 6px; }

/* ---------- queue -------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 16px; }
.req-card {
  display: flex; flex-direction: column; gap: 9px;
  border: 1px solid var(--hairline); background: rgba(8,8,8,0.62);
  padding: 16px 18px;
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.req-card:hover { border-color: var(--gold); transform: translateX(3px); background: rgba(14,14,14,0.75); }
.req-card .r-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; transition: color 0.18s ease; }
.req-card:hover .r-title { color: var(--gold); }
.req-card .r-client { font-size: 13.5px; color: var(--secondary); }
.req-card .r-meta { font-size: 12.5px; color: var(--dim); display: flex; flex-wrap: wrap; gap: 8px; }
.req-card .r-meta .flagged { color: var(--red); font-weight: 600; }
.empty { border: 1px dashed var(--hairline); padding: 42px; text-align: center; color: var(--secondary); }

/* ---------- record ------------------------------------------------------- */
.rec-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 26px; align-items: start; }
@media (max-width: 980px) { .rec-grid { grid-template-columns: 1fr; } }
.answer-row {
  display: grid; grid-template-columns: minmax(0, 34%) 1fr; gap: 10px 32px;
  padding: 9px 0; border-bottom: 1px solid var(--hairline-soft); font-size: 14px;
}
.answer-row:last-child { border-bottom: 0; }
.answer-row dt { color: var(--secondary); font-weight: 500; }
.answer-row dd { white-space: pre-wrap; }
@media (max-width: 620px) { .answer-row { grid-template-columns: 1fr; gap: 2px; } }
.commit-line { border-bottom: 1px solid var(--hairline-soft); padding: 11px 0; }
.commit-line:last-child { border-bottom: 0; }
.commit-line .c-topic { font-weight: 600; font-size: 14.5px; }
.commit-line .c-meta { font-size: 12px; color: var(--secondary); margin-top: 2px; }
.activity li { border-bottom: 1px solid var(--hairline-soft); padding: 10px 0; font-size: 13px; }
.activity li:last-child { border-bottom: 0; }
.activity .a-when { color: var(--dim); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- insights / bars ---------------------------------------------- */
.stat .kicker { margin-bottom: 6px; }
.stat .stat-n { font-size: 40px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.stat .stat-sub { font-size: 12.5px; color: var(--secondary); margin-top: 8px; }
.bar-row { display: flex; align-items: center; gap: 12px; font-size: 13.5px; }
.bar-row .bar-label { width: 168px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .bar { flex: 1; height: 16px; background: rgba(255,255,255,0.07); overflow: hidden; }
.bar-row .bar i { display: block; height: 100%; background: var(--text); transition: width 0.7s cubic-bezier(0.65,0,0.35,1); }
.bar-row .bar i.gold { background: var(--gold); }
.bar-row .bar-n { width: 40px; text-align: right; font-weight: 700; }
@media (max-width: 620px) { .bar-row .bar-label { width: 110px; font-size: 12.5px; } }
.rank-list li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hairline-soft); font-size: 14px; }
.rank-list li:last-child { border-bottom: 0; }
.rank-list .rank-n { color: var(--gold); font-weight: 700; font-size: 12px; width: 22px; flex-shrink: 0; }

/* ---------- big board (resourcing calendar) ------------------------------ */
.board-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
/* minmax(0,1fr), not 1fr: a plain 1fr floors at min-content, so one long pill
   would widen its whole column and throw the week out of square. Explicit
   header row first, then equal-height day rows. */
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: auto;
  grid-auto-rows: minmax(96px, auto);
  border-left: 1px solid var(--hairline); border-top: 1px solid var(--hairline);
}
.month-grid .dow {
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
  padding: 8px 6px; text-align: center;
  border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.day {
  min-width: 0; padding: 6px;
  border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 3px;
  transition: background 0.18s ease;
}
.day:hover { background: rgba(255,255,255,0.025); }
.day.off { background: rgba(255,255,255,0.015); }
.day .dnum { font-size: 11px; color: var(--dim); }
.day.today .dnum { color: var(--gold); font-weight: 700; }
.pill {
  font-size: 9.5px; line-height: 1.25; padding: 3px 5px;
  border-left: 2px solid var(--gold); background: rgba(255,199,0,0.09);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%; min-width: 0;
}
/* coded by production phase — five tints inside the brand family, so the board
   reads as one picture rather than a bag of highlighters */
.pill.k-prep     { border-left-color: #7f8c8d;        background: rgba(127,140,141,0.14); }
.pill.k-shoot    { border-left-color: var(--gold);    background: rgba(255,199,0,0.14); }
.pill.k-post     { border-left-color: var(--gold-deep); background: rgba(184,143,0,0.14); }
.pill.k-delivery { border-left-color: #ffffff;        background: rgba(255,255,255,0.10); }
.pill.k-due      { border-left-color: var(--red);     background: rgba(226,67,42,0.12); color: #f0a293; }

.legend { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; }
.legend .swatch { display: inline-flex; align-items: center; gap: 7px; }
.legend .swatch i { width: 16px; height: 10px; display: block; border-left: 2px solid var(--gold);
  background: rgba(255,199,0,0.12); }
.legend .swatch i.k-prep     { border-left-color: #7f8c8d;        background: rgba(127,140,141,0.16); }
.legend .swatch i.k-shoot    { border-left-color: var(--gold);    background: rgba(255,199,0,0.16); }
.legend .swatch i.k-post     { border-left-color: var(--gold-deep); background: rgba(184,143,0,0.16); }
.legend .swatch i.k-delivery { border-left-color: #ffffff;        background: rgba(255,255,255,0.12); }
.legend .swatch i.k-due      { border-left-color: var(--red);     background: rgba(226,67,42,0.16); }
@media (max-width: 760px) {
  .month-grid { grid-auto-rows: minmax(62px, auto); }
  .pill { font-size: 8.5px; }
}

.person-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 0; border-bottom: 1px solid var(--hairline-soft);
}
.person-row:last-child { border-bottom: 0; }
.person-row .p-name { font-weight: 600; font-size: 14.5px; }
.person-row .p-role { font-size: 12px; color: var(--secondary); }
.person-row .p-load { margin-left: auto; font-size: 12.5px; color: var(--secondary); }
.risk-line {
  display: flex; gap: 12px; align-items: baseline;
  border: 1px solid var(--hairline-soft); background: rgba(0,0,0,0.4);
  padding: 11px 14px; font-size: 13.5px;
}
.risk-line .lvl { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; flex-shrink: 0; }
.risk-line .lvl.risk { color: var(--red); }
.risk-line .lvl.watch { color: var(--gold); }

/* ---------- project (production OS) cards -------------------------------- */
.proj-card { border: 1px solid var(--hairline); background: var(--surface-solid); padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.proj-card .p-title { font-size: 22px; }
.proj-card .p-go { margin-top: 10px; color: var(--gold); font-weight: 600; }

/* ---------- toast -------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
  background: var(--gold); color: #000; font-weight: 600; font-size: 13.5px;
  padding: 11px 22px; border-radius: 999px; z-index: 900;
  animation: rise 0.3s ease both;
}

/* ---------- project workspace: tabs -------------------------------------- */
.tabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 22px;
}
.tab {
  background: none; border: 0; cursor: pointer;
  padding: 10px 16px;
  font-size: 13px; font-weight: 500; color: var(--secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.tab:hover { color: var(--text); }
.tab.on { color: var(--text); border-bottom-color: var(--gold); font-weight: 600; }

.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--gold); font-size: 13px; font-weight: 600;
  transition: opacity 0.18s ease;
}
.link-btn:hover { opacity: 0.7; }

/* label + borderless input, for dense header grids */
.inline-field { display: inline-flex; align-items: baseline; gap: 8px; }
.inline-field > span {
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--secondary); white-space: nowrap;
}
.bare-input {
  background: none; border: 0; border-bottom: 1px solid var(--hairline);
  padding: 5px 2px; font-size: 14px; color: var(--text);
  outline: none; width: 100%; min-width: 0;
  transition: border-color 0.18s ease;
}
.bare-input:focus { border-bottom-color: var(--gold); }
.bare-input::placeholder { color: #4a4a4a; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- calendar editor rows ----------------------------------------- */
.cal-row {
  display: flex; gap: 10px; align-items: center; flex-wrap: nowrap;
  padding: 9px 0; border-bottom: 1px solid var(--hairline-soft);
}
.cal-row:last-of-type { border-bottom: 0; }
@media (max-width: 860px) { .cal-row { flex-wrap: wrap; } }

/* ---------- bid spec requirement rows ------------------------------------ */
.req-row {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--hairline-soft);
}
.req-row:last-child { border-bottom: 0; }
.req-label { font-size: 13.5px; }
.owner {
  width: 26px; height: 24px; flex-shrink: 0;
  border: 1px solid var(--hairline); background: transparent;
  color: var(--dim); font-size: 11px; font-weight: 700; cursor: pointer;
  transition: all 0.15s ease;
}
.owner:hover { border-color: var(--gold); color: var(--gold); }
.owner.on { background: var(--gold); color: #000; border-color: var(--gold); }

/* ---------- budget: agency category table -------------------------------- */
.budget-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, minmax(64px, 104px)) minmax(40px, 56px);
  gap: 12px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--hairline-soft);
  font-size: 13.5px;
}
.budget-row:last-child { border-bottom: 0; }
.budget-head {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--secondary); border-bottom-color: var(--hairline);
}
.budget-head span:not(:first-child) { text-align: right; }
@media (max-width: 860px) {
  .budget-row { grid-template-columns: minmax(0, 1fr) repeat(2, minmax(58px, 1fr)); }
  .budget-row > *:nth-child(n+4) { display: none; }
}

/* ---------- budget: studio line-production ------------------------------- */
.section-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--text); padding: 4px 0;
}
.sec-key {
  color: var(--gold); font-weight: 700; font-size: 13px;
  width: 18px; flex-shrink: 0;
}
.sec-title { font-size: 15px; font-weight: 600; }
.sec-total { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

.line-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) repeat(5, minmax(46px, 0.6fr)) minmax(72px, 0.9fr) 28px;
  gap: 6px 10px; align-items: center;
}
.line-head {
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim); padding-bottom: 4px;
}
.line-head:not(:first-child) { text-align: right; }
.line-grid .num { font-size: 13px; }
@media (max-width: 900px) {
  .line-grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(42px, 1fr)) minmax(66px, 1fr) 26px; }
  .line-grid > *:nth-child(8n+5), .line-grid > *:nth-child(8n+6) { display: none; }
}

.sum-row {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 7px 0; border-bottom: 1px solid var(--hairline-soft); font-size: 13.5px;
}
.sum-row.strong { font-weight: 600; }
.sum-row.grand {
  border-bottom: 0; border-top: 1px solid var(--gold);
  margin-top: 8px; padding-top: 14px;
  font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
}
.sum-row.grand .num { color: var(--gold); }



.migrate-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--hairline-soft);
}
.migrate-row:last-of-type { border-bottom: 0; }

.pill.k-review    { border-left-color: #8fa7c4;        background: rgba(143,167,196,0.13); }
.pill.k-milestone { border-left-color: var(--green);   background: rgba(79,180,119,0.14); }
.pill.k-hold      { border-left-color: #5a5a5a;        background: rgba(255,255,255,0.05); color: var(--secondary); }
.legend .swatch i.k-review    { border-left-color: #8fa7c4;      background: rgba(143,167,196,0.16); }
.legend .swatch i.k-milestone { border-left-color: var(--green); background: rgba(79,180,119,0.16); }
.legend .swatch i.k-hold      { border-left-color: #5a5a5a;      background: rgba(255,255,255,0.07); }

/* clickable day cells in the project calendar */
.day-click { cursor: pointer; }
.day-click:hover { background: rgba(255, 199, 0, 0.06); }
.day-click:hover .dnum { color: var(--gold); }
.cal-row.focused { background: rgba(255, 199, 0, 0.05); }

/* ---------- project calendar: rolling three-month grid ------------------- */
.cal-wide .dow { font-size: 9px; letter-spacing: 0.1em; }
.day .dmon {
  font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dim); margin-left: 4px;
}
.day.today .dmon { color: var(--gold); }
.day.drop { background: rgba(255, 199, 0, 0.12); box-shadow: inset 0 0 0 1px var(--gold); }
.pill[draggable="true"] { cursor: grab; }
.pill[draggable="true"]:active { cursor: grabbing; }
.pill.picked { box-shadow: 0 0 0 1px var(--gold); }
.pill.k-travel { border-left-color: #6f9c8f; background: rgba(111,156,143,0.14); }
.legend .swatch i.k-travel { border-left-color: #6f9c8f; background: rgba(111,156,143,0.16); }

.entry-editor {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--gold);
}
.entry-editor .cal-row { border-bottom: 0; padding-bottom: 0; }

/* ---------- bid comparison grid ------------------------------------------ */
.compare-scroll { overflow-x: auto; }
.compare-grid { display: grid; gap: 0 1px; min-width: min-content; }
.cmp-head {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--secondary); padding: 0 10px 12px;
  border-bottom: 1px solid var(--hairline);
}
.cmp-bidder { display: flex; flex-direction: column; gap: 4px; }
.cmp-group {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); padding: 22px 10px 8px;
}
.cmp-label {
  font-size: 13px; padding: 8px 10px;
  border-bottom: 1px solid var(--hairline-soft);
  display: flex; align-items: center;
}
.cmp-cell {
  padding: 4px 10px; border-bottom: 1px solid var(--hairline-soft);
  display: flex; align-items: center;
}
.cmp-cell.is-low  { background: rgba(79, 180, 119, 0.12); }
.cmp-cell.is-high { background: rgba(226, 67, 42, 0.12); }
.swatch-lo { color: var(--green); font-weight: 600; }
.swatch-hi { color: var(--red); font-weight: 600; }

/* Month boundary in the rolling calendar. Inset shadows, not borders, so the
   rule never shifts the grid by a pixel. */
.day.mb-top  { box-shadow: inset 0 1px 0 0 var(--gold); }
.day.mb-left { box-shadow: inset 1px 0 0 0 var(--gold); }
.day.mb-top.mb-left { box-shadow: inset 0 1px 0 0 var(--gold), inset 1px 0 0 0 var(--gold); }

/* ---------- SOW ---------------------------------------------------------- */
.sow-edit { min-height: 60vh; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.65; }
.sow-preview { max-width: 78ch; }
.md-h {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
  margin: 28px 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}
.md-h:first-child { margin-top: 0; }
.md-p { font-size: 14.5px; line-height: 1.7; margin-bottom: 12px; color: rgba(255,255,255,0.86); }
.md-ul { margin: 0 0 14px; }
.md-ul li {
  font-size: 14.5px; line-height: 1.65; padding-left: 18px; margin-bottom: 6px;
  position: relative; color: rgba(255,255,255,0.86);
}
.md-ul li::before { content: "—"; position: absolute; left: 0; color: var(--gold); }

.cmp-missing {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--red); cursor: help;
}



/* category rows open to reveal their PO and invoice lines */
.cat-toggle {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--text); font: inherit; text-align: left;
  display: flex; align-items: center; gap: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color 0.18s ease;
}
.cat-toggle:hover { color: var(--gold); }
.budget-total {
  border-bottom: 0; border-top: 1px solid var(--gold);
  margin-top: 6px; padding-top: 12px; font-weight: 700;
}
.budget-total .num { color: var(--gold); }

.po-wrap {
  padding: 12px 0 16px 20px;
  border-bottom: 1px solid var(--hairline-soft);
  border-left: 1px solid var(--hairline);
  margin-left: 4px;
}
.po-grid {
  display: grid;
  grid-template-columns: minmax(70px,.8fr) minmax(70px,.8fr) minmax(70px,.8fr) minmax(0,1.6fr) minmax(110px,1fr) minmax(120px,1.1fr) 26px;
  gap: 6px 10px; align-items: center;
}
.po-status { padding: 4px 6px; font-size: 12px; }
.ov-grid {
  display: grid;
  grid-template-columns: minmax(0,1.6fr) minmax(90px,1fr) minmax(70px,.8fr) minmax(80px,.9fr) minmax(70px,.8fr) minmax(0,1.2fr) 26px;
  gap: 6px 10px; align-items: center;
}
@media (max-width: 900px) {
  .po-grid, .ov-grid { grid-template-columns: 1fr 1fr 1fr 26px; }
  .po-grid > *:nth-child(7n+4), .po-grid > *:nth-child(7n+5) { display: none; }
}

/* ---------- overview date rows ------------------------------------------- */
.ov-date { display: flex; flex-direction: column; gap: 2px; }

/* ---------- bid spec spot grid ------------------------------------------- */
.spot-grid { display: grid; gap: 6px 8px; align-items: center; overflow-x: auto; }
.spot-flag {
  height: 24px; border: 1px solid var(--hairline); background: transparent;
  color: var(--dim); font-size: 11px; cursor: pointer; transition: all 0.15s ease;
}
.spot-flag:hover { border-color: var(--gold); }
.spot-flag.on { background: var(--gold); color: #000; border-color: var(--gold); font-weight: 700; }

/* ---------- links table --------------------------------------------------- */
.link-grid {
  display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2.4fr) 26px;
  gap: 8px 12px; align-items: center;
}
@media (max-width: 620px) { .link-grid { grid-template-columns: 1fr 1fr 24px; } }

/* ---------- clearance checklist ------------------------------------------ */
.clear-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 8px 0; border-bottom: 1px solid var(--hairline-soft);
  color: var(--secondary); font-size: 13.5px;
  transition: color 0.16s ease;
}
.clear-row:last-child { border-bottom: 0; }
.clear-row:hover { color: var(--text); }
.clear-row.on { color: var(--text); }
.clear-box {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 1px solid var(--hairline); display: flex;
  align-items: center; justify-content: center;
  font-size: 11px; color: #000;
  transition: all 0.16s ease;
}
.clear-row.on .clear-box { background: var(--green); border-color: var(--green); }

/* ---------- printable documents ------------------------------------------ */
#printHolder { display: none; }

@media print {
  /* the app disappears; only the document prints */
  body.printing > *:not(#printHolder) { display: none !important; }
  body.printing #printHolder { display: block; }

  @page { margin: 18mm 16mm; }
  html, body { background: #fff !important; color: #000 !important; }

  .print-doc {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #000; font-size: 10.5pt; line-height: 1.5;
  }
  .print-head {
    display: flex; align-items: flex-start; gap: 18px;
    border-bottom: 2px solid #000; padding-bottom: 14px; margin-bottom: 22px;
  }
  .print-logo { height: 30px; filter: brightness(0); }
  .print-title h1 {
    font-size: 20pt; font-weight: 700; text-transform: uppercase;
    letter-spacing: -0.02em; line-height: 1.05; margin: 4px 0;
  }
  .print-kicker {
    font-size: 7.5pt; letter-spacing: 0.16em; text-transform: uppercase; color: #666;
  }
  .print-sub { font-size: 9.5pt; color: #444; }
  .print-note {
    border-left: 3px solid #000; padding: 8px 12px; margin-bottom: 20px;
    font-size: 9pt; background: #f4f4f4;
  }
  .print-doc section { margin-bottom: 22px; break-inside: avoid; }
  .print-doc h2 {
    font-size: 8.5pt; letter-spacing: 0.16em; text-transform: uppercase;
    border-bottom: 1px solid #000; padding-bottom: 5px; margin-bottom: 10px;
  }
  .print-doc h3 {
    font-size: 9.5pt; font-weight: 700; margin: 12px 0 5px;
  }
  .print-body { white-space: pre-wrap; margin-bottom: 8px; }
  .print-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .print-dl > div {
    display: grid; grid-template-columns: 42% 1fr; gap: 10px;
    padding: 4px 0; border-bottom: 1px solid #ddd; break-inside: avoid;
  }
  .print-dl dt { color: #555; font-size: 9pt; }
  .print-dl dd { font-weight: 600; font-size: 9pt; }
  .print-table { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
  .print-table th {
    text-align: left; border-bottom: 1px solid #000; padding: 5px 4px;
    font-size: 7.5pt; letter-spacing: 0.08em; text-transform: uppercase;
  }
  .print-table td { padding: 5px 4px; border-bottom: 1px solid #e2e2e2; }
  .print-foot {
    margin-top: 28px; padding-top: 10px; border-top: 1px solid #000;
    font-size: 8pt; color: #666;
  }
  /* the SOW reuses the markdown renderer — restate it for paper */
  .print-doc .md-h {
    color: #000; border-color: #000;
    font-size: 8.5pt; letter-spacing: 0.16em; margin: 20px 0 8px;
  }
  .print-doc .md-p, .print-doc .md-ul li { color: #000; font-size: 10pt; }
  .print-doc .md-ul li::before { color: #000; }
}

/* ---------- payment schedule + cash timeline ----------------------------- */
.pay-grid {
  display: grid;
  grid-template-columns: minmax(0,1.8fr) minmax(50px,.5fr) minmax(80px,.8fr) minmax(130px,1fr) 44px 26px;
  gap: 6px 10px; align-items: center;
}
.cash-row {
  display: grid;
  grid-template-columns: minmax(150px,1fr) minmax(0,2fr) auto minmax(90px,.7fr) minmax(90px,.7fr);
  gap: 12px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--hairline-soft);
  font-size: 13.5px;
}
.cash-row:last-child { border-bottom: 0; }
.cash-date { font-size: 12.5px; }
.cash-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cash-who a:hover { color: var(--gold); }
.cash-amt { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.cash-run { text-align: right; font-variant-numeric: tabular-nums; color: var(--dim); font-size: 12.5px; }
.cash-row.in  .cash-amt { color: var(--green); }
.cash-row.out .cash-amt { color: var(--red); }
.cash-row.late { background: rgba(226,67,42,0.07); }
.cash-row.late .cash-date { color: var(--red); }
@media (max-width: 860px) {
  .cash-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .cash-row .cash-run, .cash-row .tag { display: none; }
  .pay-grid { grid-template-columns: 1fr 1fr 44px 26px; }
  .pay-grid > *:nth-child(6n+2), .pay-grid > *:nth-child(6n+4) { display: none; }
}

/* one intake, one door */
.doors-one { grid-template-columns: 1fr; }
.door-solo { min-height: 200px; max-width: 640px; }
.door-solo .door-title { font-size: clamp(26px, 3.4vw, 38px); }
.door-solo .door-sub { font-size: 15px; max-width: 34em; }

/* an icon nav item shouldn't inherit the 13px label sizing */
.nav-right a.nav-icon {
  font-size: 21px; line-height: 1;
  /* glyph is re-centred with padding, not a positional shift — shifting the
     element would drag its underline below the other links' shared baseline */
  padding: 4.5px 4px 2.5px;
}
.nav-right a.nav-icon:hover {
  text-shadow:
    0 0 4px  rgba(255, 199, 0, 0.42),
    0 0 9px  rgba(255, 199, 0, 0.20),
    0 0 15px rgba(255, 199, 0, 0.09);
}

/* ---------- ledger: invoices & POs --------------------------------------- */
.led-card {
  border: 1px solid var(--hairline); border-left-width: 3px;
  background: rgba(8,8,8,0.6); padding: 14px 16px; margin-bottom: 10px;
}
.led-card.tone-go   { border-left-color: var(--green); }
.led-card.tone-warn { border-left-color: var(--gold); }
.led-card.tone-bad  { border-left-color: var(--red); }
.led-card.tone-done { border-left-color: var(--hairline); opacity: 0.62; }
.led-card.tone-idle { border-left-color: var(--hairline); }

.led-head {
  display: grid;
  grid-template-columns: 12px 30px minmax(110px,1.1fr) minmax(0,1.8fr) minmax(76px,.6fr) auto 24px;
  gap: 12px; align-items: center;
}
.led-dot {
  width: 9px; height: 9px; border-radius: 999px; background: var(--hairline);
  display: inline-block; flex-shrink: 0;
}
.led-card.tone-go   .led-dot, .led-dot.tone-go   { background: var(--green); box-shadow: 0 0 8px rgba(79,180,119,0.7); }
.led-card.tone-warn .led-dot, .led-dot.tone-warn { background: var(--gold); }
.led-card.tone-bad  .led-dot, .led-dot.tone-bad  { background: var(--red); }
.led-card.tone-done .led-dot, .led-dot.tone-done { background: #3a3a3a; }
.led-dir {
  font-size: 9px; letter-spacing: 0.14em; color: var(--dim); font-weight: 700;
}
.led-card.in  .led-dir { color: var(--green); }
.led-party { font-weight: 600; }
.led-amt { font-weight: 700; }

.led-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px 14px; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--hairline-soft);
}
.led-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.led-field > span {
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim);
}
.led-select { padding: 4px 6px; font-size: 12.5px; }
.led-action {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline-soft);
}
.go-note { color: var(--green); font-size: 12.5px; font-weight: 600; }
.num.over { color: var(--red); }
.sec-spend { font-size: 11px; color: var(--gold); margin-left: auto; }
.sec-spend + .sec-total { margin-left: 14px; }

@media (max-width: 980px) {
  .led-head {
    grid-template-columns: 12px minmax(0,1fr) minmax(70px,auto) 24px;
    row-gap: 6px;
  }
  .led-head .led-dir { display: none; }
  .led-head .led-desc { grid-column: 2 / -1; }
  .led-head .tag { grid-column: 2 / 4; justify-self: start; }
}

/* ---------- money page: the greenlight board ----------------------------- */
.gl-block { border-top: 1px solid var(--hairline-soft); padding: 14px 0; }
.gl-block:first-of-type { border-top: 0; padding-top: 0; }
.gl-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.gl-title { font-weight: 600; font-size: 14.5px; }
.gl-title:hover { color: var(--gold); }
.gl-row {
  display: grid;
  grid-template-columns: 12px minmax(0,2fr) auto minmax(90px,.7fr) minmax(80px,.6fr);
  gap: 12px; align-items: center;
  padding: 6px 0 6px 6px; font-size: 13px;
}
.gl-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-date { font-size: 12px; text-align: right; }
.gl-amt { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.gl-amt.in { color: var(--green); }
.gl-amt.out { color: var(--red); }
@media (max-width: 760px) {
  .gl-row { grid-template-columns: 12px 1fr auto; }
  .gl-row .gl-date { display: none; }
}