/* Hero film (public/film/). The drawing is SVG; the record, thread strip and controls are HTML.
   Wide composition above 640 px (record panel from 1000 px), portrait 4:5 at 640 px and below. */

/* No browser text inflation inside the film (Android font boosting); a user's own text size still
   applies to the HTML parts, which are in rem and size to their content. */
.film { position: relative; margin: 0; min-width: 0; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

.film-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--paper);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(13, 27, 42, 0.08), 0 2px 2px rgba(13, 27, 42, 0.03), 0 32px 64px -36px rgba(13, 27, 42, 0.4);
}
.film-view { position: relative; min-width: 0; aspect-ratio: 720 / 460; align-self: start; }
.film[data-mode="tall"] .film-view { aspect-ratio: 4 / 5; }
.film-view > svg { width: 100%; height: 100%; }
.film-record { display: none; position: relative; min-width: 0; border-left: 1px solid var(--line); background: var(--paper-2); transition: background-color 300ms ease, border-color 300ms ease; }
.film-record.is-blank, .film-thread.is-blank { background: var(--paper); border-color: var(--paper); }

@media (min-width: 1000px) {
  .film-stage { grid-template-columns: minmax(0, 720fr) minmax(0, 480fr); }
  .film-record { display: block; }
  .film-thread { display: none; }
}

/* no JavaScript, or the film failed: the chapters as a list */
.film-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 24px clamp(20px, 4vw, 48px);
  list-style: none;
  background: var(--paper);
  color: var(--steel);
  font-size: 0.95rem;
  line-height: 1.45;
  opacity: 0;
  animation: film-fallback 0.3s ease 1.6s forwards;
}
.film.is-ready .film-fallback { display: none; }
@keyframes film-fallback { to { opacity: 1; } }

/* ---- the drawing ---- */

.film-view text { font-family: var(--font-sans); font-variant-numeric: tabular-nums; fill: var(--ink); font-size: 12.5px; }
.film .scene { will-change: opacity, transform; }
.t-title { font-size: 15px !important; font-weight: 600; }
.t-sub, .t-rowsub, .t-colhead, .t-anno, .t-day, .t-xlcol, .t-pdfhead { fill: var(--muted) !important; }
.t-sub { font-size: 12.5px !important; }
.t-row { font-size: 13px !important; font-weight: 560; }
.t-rowsub { font-size: 12px !important; }
.t-rowsub.is-key { fill: var(--petrol) !important; font-weight: 560; }
.t-cell, .t-cellq, .t-xl, .t-legend, .t-body, .t-doc { font-size: 12.5px !important; }
.t-cellq { fill: var(--petrol) !important; }
.t-cellnum, .t-num { font-family: var(--font-sans) !important; font-size: 12px !important; fill: var(--steel) !important; }
.t-cellv, .t-readv { font-size: 13.5px !important; font-weight: 620; }
.t-cellv.is-wrong { fill: #b3261e !important; }
.t-colhead { font-size: 11.5px !important; font-weight: 560; }
.t-win { font-size: 11.5px !important; fill: var(--steel) !important; font-weight: 500; }
.t-mark { font-size: 22px !important; font-weight: 640; letter-spacing: -0.02em; }
.t-big { font-size: 24px !important; font-weight: 620; letter-spacing: -0.01em; }
.t-h3 { font-size: 16px !important; font-weight: 620; }
.t-headv { font-size: 18px !important; font-weight: 600; }
.t-headv.is-petrol { fill: var(--petrol) !important; }
.t-formula { font-size: 17px !important; font-weight: 600; fill: var(--petrol-deep) !important; }
.t-road { font-size: 9.5px !important; letter-spacing: 0.24em; fill: #a3b3c3 !important; font-weight: 500; }
.t-anno { font-size: 10px !important; }
.t-stratum, .t-dim, .t-call, .t-callv { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.t-stratum { font-size: 12px !important; fill: var(--steel) !important; font-weight: 500; }
.t-dim { font-size: 12px !important; fill: var(--steel) !important; font-weight: 500; }
.t-call { font-size: 13px !important; font-weight: 600; }
.t-callv { font-size: 13px !important; fill: var(--petrol) !important; font-weight: 560; }
.t-diff { font-size: 12.5px !important; fill: #8a5a12 !important; }
.t-fx { font-size: 12px !important; font-style: italic; fill: var(--paper) !important; font-weight: 600; }
.t-seg { font-size: 12px !important; fill: var(--steel) !important; font-weight: 500; }
.t-seg.is-on { fill: var(--paper) !important; }
.t-seg.is-petrol { fill: var(--petrol) !important; }
.t-btn { font-size: 13px !important; font-weight: 560; fill: var(--paper) !important; }
.t-btnout { font-size: 15px !important; font-weight: 560; fill: var(--petrol) !important; }
.t-sev { font-size: 12px !important; font-weight: 600; fill: var(--paper) !important; }
.t-cite { font-size: 12px !important; fill: var(--petrol) !important; font-weight: 500; }
.t-pdfhead { font-size: 9px !important; }
.t-pdfh { font-size: 11px !important; font-weight: 650; }
.t-pdfh.is-muted { fill: #9aa7b4 !important; }
.t-pdfq { font-size: 11px !important; }
.t-xlh { font-size: 12px !important; font-weight: 600; }
.t-xl.is-key { fill: var(--petrol-deep) !important; font-weight: 620; }
.t-xl.is-b { font-weight: 620; }
.t-xlcol { font-size: 10px !important; }
.t-xltab { font-size: 11.5px !important; fill: var(--petrol-deep) !important; font-weight: 560; }
.t-day { font-size: 10.5px !important; }
.t-pool { font-size: 12px !important; font-weight: 700; fill: #7a4f10 !important; }
.t-hire { font-size: 12.5px !important; font-weight: 650; fill: #b3261e !important; }
.t-chip { fill: var(--steel) !important; font-weight: 500; }
.t-chip-ok { fill: #17864d !important; font-weight: 560; }
.t-chip-info { fill: #2f5a99 !important; font-weight: 560; }
.t-chip-out { fill: var(--petrol) !important; font-weight: 560; }
.t-chip-petrol { fill: var(--paper) !important; font-weight: 600; }
.t-pill { font-size: 17px !important; font-weight: 620; fill: var(--paper) !important; letter-spacing: -0.005em; }

.panel-bg, .win-bg, .q-card { fill: var(--paper); stroke: var(--line-2); stroke-width: 1; }
.q-card.is-key { stroke: var(--teal); stroke-width: 1.5; }
.win-rule, .ln-grid, .ln-week { stroke: var(--line-2); stroke-width: 1; fill: none; }
.win-dot { fill: var(--line-2); }
.pill-bg { fill: var(--petrol); }
.caret { fill: var(--ink); }
.ring-warn { fill: rgba(179, 38, 30, 0.06); stroke: #b3261e; stroke-width: 2; }
.ring-key { fill: none; stroke: var(--teal); stroke-width: 2.5; }
.ln-trace { fill: none; stroke: #c98a2e; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.doc-xls { fill: #1f7a4d; }
.doc-pdf { fill: #c0392b; }
.tick-box { fill: var(--petrol); }
.tick-mark { fill: none; stroke: var(--paper); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chip { fill: var(--mist); stroke: var(--line-2); stroke-width: 1; }
.chip-ok { fill: #e7f5ec; stroke: #9fd3b2; stroke-width: 1; }
.chip-info { fill: #e7eef9; }
.chip-warn { fill: #fdf3e2; }
.t-chip-warn { fill: #7a4f10 !important; font-weight: 560; }
.chip-out { fill: var(--paper); stroke: var(--teal); stroke-width: 1.5; }
.chip-petrol { fill: var(--petrol); }
.btn-f { fill: var(--petrol); }
.is-pressed .btn-out, .is-pressed .cite { fill: var(--teal-tint); }
.is-pressed .btn-f { fill: var(--petrol-deep); }
.btn-out { fill: var(--paper); stroke: var(--teal); stroke-width: 1.5; }
.btn-out.is-key { stroke-width: 2.5; }
.row-hl { fill: var(--teal-tint); }
.seg { fill: var(--mist); }
.seg.is-on { fill: var(--petrol); }
.seg-out { fill: var(--paper); stroke: var(--teal); stroke-width: 1.2; }
.num-bg { fill: #e9eef3; }
.fx-bg { fill: var(--petrol); }

/* the aerial, drawn */
.aer-road { fill: none; stroke: #c3c8c0; stroke-width: 22; stroke-linecap: round; }
.aer-road.is-main { stroke: #b6bbb4; stroke-width: 30; }
.aer-roof { fill: #8e9aa6; }
.aer-roof.is-b { fill: #b49a80; }
.aer-bounds rect, .aer-bounds path { fill: none; stroke: #f2c94c; stroke-width: 1.4; }
.aer-pin { fill: #d93025; }
.aer-pipe { fill: none; stroke-width: 2.4; }
.aer-pipe.is-dashed { stroke-dasharray: 7 4; }
.aer-node { fill: var(--paper); stroke-width: 2; }
.aer-node.is-stub { stroke-width: 3; }
.aer-main { fill: none; stroke: #3366d6; stroke-linecap: round; opacity: 0.9; }

/* plan and takeoff */
.ln-lot { fill: none; stroke: #d5dee7; stroke-width: 1; }
.ln-kerb { fill: none; stroke: #9fb6ce; stroke-width: 1.2; }
.ln-design { fill: none; stroke: #2e8b57; stroke-width: 2; }
.ln-design.is-other { stroke: #8fc1a3; stroke-dasharray: 5 3; }
.mh { fill: var(--paper); stroke: var(--steel); stroke-width: 1.5; }
.ln-take { fill: none; stroke: #2f6fdb; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.ln-take.is-tag2 { stroke: #c43bc9; }
.take-pt { fill: var(--paper); stroke: #2f6fdb; stroke-width: 2; }
.sw-take { fill: #d6336c; }
.dot-tag1 { fill: #2f6fdb; }
.dot-tag2 { fill: #c43bc9; }

/* trench section */
.ln-ground { stroke: var(--ink); stroke-width: 1.5; }
.void { fill: var(--paper); }
.ln-cut-outline { fill: none; stroke: var(--petrol); stroke-width: 1.5; stroke-dasharray: 5 4; }
.pipe { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
.pipe-bore { fill: none; stroke: #9fb6ce; stroke-width: 1; }
.ln-dim, .ln-leader { fill: none; stroke: var(--blue); stroke-width: 1; }
.leader-dot { fill: var(--petrol); }
.formula-bg { fill: var(--teal-tint); }
.ln-feed { fill: none; stroke: #9fb6ce; stroke-width: 1.2; stroke-dasharray: 3 3; }

/* tender review, PDF page, workbook */
.sev-high { fill: #c62828; }
.cite { fill: var(--paper); stroke: var(--teal); stroke-width: 1.5; }
.pdf-page { fill: var(--paper); stroke: var(--line-2); stroke-width: 1; }
.pdf-line { fill: #e4e9ee; }
.pdf-hl { fill: #fff1b8; }
.xl-bg { fill: var(--paper); }
.xl-head { fill: #f3f5f7; }
.xl-grid { fill: none; stroke: #dde3e9; stroke-width: 1; }
.xl-key { fill: var(--teal-tint); }
.xl-tab { fill: var(--paper); stroke: var(--line-2); stroke-width: 1; }

/* programme and scheduler */
.ln-daygrid { stroke: #eef2f6; stroke-width: 1; fill: none; }
.weekend { fill: #f3f6f8; }
.bar { fill: #c9d6e3; }
.bar.is-key { fill: var(--teal); }
.ln-dep { fill: none; stroke: #c0392b; stroke-width: 1.4; }
.cap-part { fill: #b8c7d9; }
.cap-full { fill: #5b7aa6; }
.cap-over { fill: #b3261e; }
.pool-bg { fill: #fdf3e2; stroke: #c98a2e; stroke-width: 1; }
.hire { fill: #fde8e6; }

/* phones: bigger type, the drawing is scaled to about 0.9 */
.film[data-mode="tall"] .film-view text { font-size: 14px; }
.film[data-mode="tall"] .t-title { font-size: 20px !important; }
.film[data-mode="tall"] .t-sub { font-size: 14px !important; }
.film[data-mode="tall"] :is(.t-row, .t-call, .t-callv, .t-readv, .t-cellv) { font-size: 15px !important; }
.film[data-mode="tall"] :is(.t-rowsub, .t-cell, .t-cellq, .t-xl, .t-legend, .t-body, .t-doc, .t-cellnum, .t-num, .t-colhead, .t-xlh, .t-cite, .t-seg, .t-stratum, .t-dim, .t-diff, .t-win, .t-btn) { font-size: 14px !important; }
.film[data-mode="tall"] :is(.t-pdfq, .t-pdfh) { font-size: 13px !important; }
.film[data-mode="tall"] .t-pdfhead { font-size: 11px !important; }
.film[data-mode="tall"] .t-xlcol, .film[data-mode="tall"] .t-day { font-size: 12px !important; }
.film[data-mode="tall"] .t-formula { font-size: 22px !important; }
.film[data-mode="tall"] .t-headv { font-size: 20px !important; }
/* 20 units is 16 CSS px on a 360 px phone */
.film[data-mode="tall"] .t-pill { font-size: 20px !important; }

/* ---- the thread (record panel on desktop, strip below) ---- */

.film-thread { border-top: 1px solid var(--line); background: var(--paper-2); transition: background-color 300ms ease, border-color 300ms ease; }
.thread {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 2px 4px;
  padding: 10px 8px;
  font-size: clamp(0.72rem, 3.4vw, 0.8125rem);
  font-weight: 560;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.thread-bit { color: #b5c1cd; transition: color 300ms ease; }
.thread-bit.in { color: var(--ink); }
.thread-bit.is-new { color: var(--petrol); }
.thread-sep { color: #b5c1cd; }
@media (min-width: 641px) { .thread { font-size: 0.9375rem; gap: 2px 10px; padding: 12px 16px; } }
.thread-bit, .thread-sep { white-space: nowrap; }

.rec { height: 100%; display: flex; flex-direction: column; padding: 20px 18px 16px; font-size: 0.8125rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.rec-project { font-size: 0.9375rem; font-weight: 600; }
.rec-meta { color: var(--muted); font-size: 0.78rem; margin-top: 2px; }
.rec-item { display: flex; gap: 10px; align-items: baseline; margin: 16px 0 10px; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; opacity: 0.35; transition: opacity 300ms ease; }
.rec-item.in { opacity: 1; }
.rec-num { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 0.78rem; color: var(--steel); }
.rec-name { font-weight: 560; min-width: 0; }
.rec-row, .rec-foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  padding: 9px 2px;
  border-top: 1px solid var(--line);
}
.rec-label { color: var(--steel); }
.rec-note { color: var(--muted); font-size: 0.75rem; }
.rec-value { font-weight: 600; font-size: 0.9375rem; text-align: right; color: #c3ccd5; transition: color 300ms ease; }
.rec-value::before { content: ""; }
.rec-row:not(.in) .rec-value, .rec-foot:not(.in) .rec-value { color: transparent; background: linear-gradient(var(--line), var(--line)) center / 100% 8px no-repeat; border-radius: 4px; min-width: 72px; }
.rec-row:not(.in) .rec-note { visibility: hidden; }
.rec-row.in .rec-value, .rec-foot.in .rec-value { color: var(--ink); }
.rec-row.is-new .rec-value { color: var(--petrol); }
.rec-foot { margin-top: auto; border-top: 1px solid var(--line-2); padding-top: 12px; }
.rec-foot .rec-value { font-size: 1.125rem; }
@media (min-width: 1180px) {
  .rec { padding: 20px 24px 14px; font-size: 0.875rem; }
  .rec-row, .rec-foot { padding-block: 8px; }
  .rec-item { margin: 14px 0 8px; }
  .rec-project { font-size: 1rem; }
  .rec-value { font-size: 1.03rem; }
  .rec-note { font-size: 0.78rem; }
}

/* ---- controls ---- */

.film-controls {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-areas: "toggle rail link";
  column-gap: 16px;
  align-items: center;
  margin-top: 12px;
}
.film-toggle {
  grid-area: toggle;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.film-toggle:hover { border-color: var(--steel); }
.film-toggle svg { fill: currentColor; }
.film-toggle .icon-replay,
.film-toggle[data-state="ended"] .icon-play,
.film-toggle[data-state="ended"] .icon-pause,
.film-toggle[data-state="playing"] .icon-play,
.film-toggle[data-state="paused"] .icon-pause { display: none; }
.film-toggle[data-state="ended"] .icon-replay { display: block; }
/* a tap on the drawing pauses on touch screens */
.film-stage { -webkit-tap-highlight-color: transparent; }

.film-rail { grid-area: rail; display: flex; gap: 8px; padding: 0; list-style: none; }
.film-rail li { flex: 1 1 0; min-width: 0; }
.film-rail li:has(> [hidden]) { display: none; }
.film-rail button {
  --k: 0;
  position: relative;
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 12px 0 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.25;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}
.film-rail button::before,
.film-rail button::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--line-2);
}
.film-rail button::after { background: var(--petrol); transform-origin: left; transform: scaleX(var(--k)); }
.film-rail button:hover { color: var(--ink); }
.film-rail button[aria-current="step"] { color: var(--ink); font-weight: 560; }

.film-now { grid-area: now; display: none; font-size: 0.92rem; font-weight: 560; }
.film-recorded {
  grid-area: link;
  justify-self: end;
  display: inline-block;
  padding-block: 11px;
  line-height: 22px;
  color: var(--petrol);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 4px;
}
.film-recorded::after { content: " \2193"; }
.film-recorded:hover { color: var(--petrol-deep); text-decoration-color: currentColor; }

.film-caption { display: grid; gap: 4px; margin-top: 8px; max-width: 46em; }
.film-caption-text { color: var(--ink); font-size: 1rem; line-height: 1.5; min-height: 1.5em; }
.film-label { color: var(--muted); font-size: 0.82rem; }

@media (max-width: 640px) {
  .film-stage { border-radius: 12px; }
  .film-controls { grid-template-areas: "rail rail rail" "toggle now link"; column-gap: 12px; margin-top: 0; }
  .thread { padding-block: 6px; }
  .film-caption { margin-top: 0; }
  .film-rail { gap: 4px; }
  .film-rail button { padding: 0; font-size: 0; }
  .film-rail button::before, .film-rail button::after { top: 20px; }
  .film-rail-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .film-now { display: block; }
  .film-caption-text { font-size: 0.95rem; min-height: 3em; }
}

@media (prefers-reduced-motion: reduce) {
  .thread-bit, .rec-item, .rec-value { transition: none; }
}

/* ---- Before: the pressure, on blank paper (no Stralos UI) ---- */
.before-pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 24px clamp(20px, 2.4vw, 32px);
  opacity: 0;
  pointer-events: none;
}
.before-line {
  font-size: clamp(1.15rem, 0.6rem + 1vw, 1.5rem);
  font-weight: 620;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 260ms ease, transform 260ms ease;
}
.before-line.in { opacity: 1; transform: none; }
/* the interruptions stack at the top, as notifications land */
.before-ping {
  order: -1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-width: 17rem;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid #b3261e;
  border-radius: 8px;
  background: var(--paper-2);
  box-shadow: 0 8px 20px -14px rgba(13, 27, 42, 0.45);
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.before-ping.in { opacity: 1; transform: none; }
.before-ping:nth-of-type(2) { margin-bottom: 18px; }
.before-ping-from { font-size: 0.72rem; color: var(--muted); }
.before-ping-msg { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.film-thread { position: relative; }
.thread-before {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: clamp(0.875rem, 3.8vw, 1rem);
  font-weight: 620;
  letter-spacing: -0.01em;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .before-line, .before-ping { transition: none; transform: none; }
}