/* The site's stylesheet, in three parts, as it came out of the Wrap mock (wrap-design/wrap/):
   1. src/base.css  — the shared parts (buttons, cards, type, forms); the app's own rules are still in here and can be pruned.
   2. src/parts.css — the public site's shell (.site, .site-h, .site-m, .site-f), the portal and the rest.
   3. pages/70-site.js — the landing and the other site pages' own rules (the hero, the carousel, the pricing table…).
   Colours come from css/tokens.css only. */

/* ---- 1. base ---- */
/* the root: set on html, body and .site alike, so the page reads the same as a file and inside a viewer that wraps it in its own body */
html, body, .site { font-family: var(--ms-font); font-size: var(--fs-body); line-height: 1.5; color: var(--ms-text); background: var(--ms-surface); }
body { margin: 0; font-feature-settings: 'tnum' 1; -webkit-font-smoothing: antialiased; }
a { color: var(--ms-link); text-decoration: none; } a:hover { color: var(--ms-accent-hover); }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.muted { color: var(--ms-muted); }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 2px; }
.btn { height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--ms-border-strong); background: var(--ms-surface); color: var(--ms-text); font-size: var(--ms-fs); font-weight: 500; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--ms-surface-2); }
.btn.is-primary { border-color: transparent; background: var(--ms-accent); color: var(--ms-accent-text); }
.btn.is-primary:hover { background: var(--ms-accent-hover); }
.btn.is-primary:disabled { opacity: .45; cursor: default; }
.btn.is-quiet { border-color: transparent; background: transparent; color: var(--ms-text-3); }
.btn.is-quiet:hover { background: var(--ms-surface-2); color: var(--ms-text); }
.btn.is-sm { height: 30px; padding: 0 10px; font-size: var(--ms-fs-xs); border-radius: 8px; }
.btn.is-lg { height: 44px; padding: 0 20px; font-size: var(--ms-fs-md); }
.btn.is-xl { height: 52px; padding: 0 28px; font-size: var(--fs-btn-xl); border-radius: var(--ms-r); }
.btn.is-inverse { border-color: transparent; background: var(--ms-accent-text); color: var(--ms-accent); } .btn.is-inverse:hover { background: var(--ms-bg); }
.pill { display: inline-block; font-size: var(--ms-fs-xs); font-weight: 500; padding: 3px 9px; border-radius: var(--ms-r-pill); background: var(--ms-surface-3); color: var(--ms-text-3); white-space: nowrap; }
.pill.is-ok { background: var(--ms-ok-bg); color: var(--ms-ok); }
.c-red { color: var(--ms-danger) !important; } .c-amber { color: var(--ms-warn) !important; } .c-green { color: var(--ms-ok) !important; }

/* ---------- Shell ---------- */
.app { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 24px; padding: 24px 16px 20px; background: var(--ms-surface); border-right: 1px solid var(--ms-border); overflow: hidden; }
/* the mark: a tick in a rounded square, drawn inline as SVG (the same markup in the header and the footer); the wordmark at 600 with slight negative tracking */
.brand { display: flex; align-items: center; gap: 9px; padding: 0; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; color: var(--ms-text); }
.brand-mark { width: 24px; height: 24px; flex: none; display: block; color: var(--ms-accent); }
.brand-mark svg { display: block; width: 100%; height: 100%; } .brand-mark rect { fill: currentColor; } .brand-mark .tick { fill: none; stroke: var(--ms-accent-text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-label { padding: 0 10px 6px; font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ms-muted); }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--ms-r-sm); color: var(--ms-text-2); min-width: 0; }
.nav-item:hover { background: var(--ms-surface-2); color: var(--ms-text); }
.nav-item.is-active { background: var(--ms-surface-2); color: var(--ms-text); font-weight: 500; }
.nav-item .name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item .meta { flex: none; font-size: var(--ms-fs-xs); color: var(--ms-muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
#railJobs .nav-item { flex-wrap: wrap; row-gap: 0; padding-top: 6px; padding-bottom: 6px; } #railJobs .nav-item .name { flex: 1 1 100%; } #railJobs .nav-item .meta { flex: 1 1 100%; font-size: 11px; }
.nav-item .cnt { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ms-accent); color: var(--ms-accent-text); font-size: 11px; font-weight: 500; line-height: 18px; text-align: center; }
.nav-item .meta.is-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ms-accent); animation: pulse 1.4s ease-in-out infinite; }
.nav-item .name { position: relative; }
.nav-item.needs .name::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ms-danger); margin-right: 8px; vertical-align: 1px; }
.nav-item.needs.is-amber .name::before { background: var(--ms-warn); }
.who.is-active b { color: var(--ms-accent); }
.rail-jobs { flex: 1 1 auto; min-height: 0; overflow: auto; }
/* the rail's job groups: one per stage, collapsible */
.rail-g summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 10px 4px; font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ms-muted); }
.rail-g summary::-webkit-details-marker { display: none; } .rail-g summary::before { content: ""; width: 5px; height: 5px; border-right: 1px solid var(--ms-muted); border-bottom: 1px solid var(--ms-muted); transform: rotate(45deg); flex: none; margin-top: -2px; transition: transform .12s; }
.rail-g:not([open]) summary::before { transform: rotate(-45deg); } .rail-g summary .n { margin-left: auto; font: inherit; color: var(--ms-muted); }
.rail-g summary:hover { color: var(--ms-text-2); } .rail-g summary:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: -2px; border-radius: 6px; }
.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--ms-border); }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 4px; }
.avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--ms-surface-3); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--ms-text-3); }
.who b { display: block; font-weight: 500; font-size: var(--ms-fs-sm); }
.who small { display: block; font-size: var(--ms-fs-xs); color: var(--ms-muted); }
.sync { display: flex; align-items: center; gap: 6px; padding: 0 4px; font-size: var(--ms-fs-xs); color: var(--ms-muted); }
.sync::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ms-ok); }
.topbar-only { display: none; }
.content { max-width: 1280px; margin: 0 auto; width: 100%; padding: 28px var(--gutter) 72px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.main { grid-column: 1 / 9; min-width: 0; display: flex; flex-direction: column; gap: 30px; }
.island { grid-column: 9 / 13; min-width: 0; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 48px); overflow: auto; scrollbar-width: thin; }
.island > .pod { flex: none; }

/* ---------- Today as a timetable (the brief of 2 Nov): calm, precise, one loud signal per row ---------- */
.content.is-tt { display: block; max-width: calc(880px + 2 * var(--gutter)); padding-top: 48px; }
.tt-brief { display: flex; flex-direction: column; gap: 8px; margin-bottom: 44px; }
.tt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tt-new { height: 40px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent; background: var(--accent); color: var(--ms-accent-text); font: 600 14px/1 var(--ms-font); cursor: pointer; white-space: nowrap; }
.tt-new:hover { background: var(--ms-accent-hover); }
.newjob { margin-top: 20px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.newjob label { display: flex; flex-direction: column; gap: 4px; font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); min-width: 0; }
.newjob input, .newjob select { height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; font: 400 14px var(--ms-font); color: var(--text); background: var(--surface); min-width: 0; letter-spacing: 0; text-transform: none; }
.newjob input:focus, .newjob select:focus { outline: none; border-color: var(--accent); }
.newjob details.calwrap { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; } .newjob details.calwrap summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font: 400 14px var(--ms-font); color: var(--text); } .newjob details.calwrap summary::-webkit-details-marker { display: none; }
.newjob details.calwrap summary .lab { font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); flex-basis: 100%; } .newjob details.calwrap summary .pick { font: 500 13px var(--ms-font); color: var(--accent); } .newjob details.calwrap[open] summary .pick { color: var(--muted); }
.newjob details.calwrap .cal { max-width: 420px; }
.newjob .acts { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
.newjob .acts small { margin-left: auto; font-size: 12px; color: var(--muted); }
.newjob .nj-h { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; font: 500 13px var(--ms-font); color: var(--text); padding-top: 8px; border-top: 1px solid var(--line); margin-top: 4px; }
.newjob .nj-h:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.newjob .nj-h small { font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.newjob textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: 400 14px/1.4 var(--mono); color: var(--text); background: var(--surface); resize: vertical; min-width: 0; }
.newjob textarea:focus { outline: none; border-color: var(--accent); }
.newjob label.is-err input, .newjob label.is-err select { border-color: var(--red); } .newjob label .err { font: 400 12px var(--ms-font); letter-spacing: 0; text-transform: none; color: var(--red); }
.newjob label.tall { grid-column: span 2; } .newjob label small { font: 400 12px var(--ms-font); letter-spacing: 0; text-transform: none; color: var(--muted); }
.newjob label.file { grid-column: span 2; flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px; border: 1px dashed var(--faint); border-radius: 10px; cursor: pointer; text-transform: none; letter-spacing: 0; font: inherit; }
.newjob label.file:hover { border-color: var(--accent); }
.newjob label.file .fl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .newjob label.file .fl b { font-size: 14px; font-weight: 500; color: var(--text); } .newjob label.file .fl small { font-size: 12px; color: var(--muted); }
.newjob label.file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.newjob label.file .fn { flex: none; font: 500 12px var(--ms-font); color: var(--accent); white-space: nowrap; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.newjob label.file.is-set { border-style: solid; border-color: color-mix(in srgb, var(--green) 50%, transparent); } .newjob label.file.is-set .fn { color: var(--green); }
.newjob label.sw { grid-column: span 2; flex-direction: row; align-items: center; gap: 10px; text-transform: none; letter-spacing: 0; font: inherit; cursor: pointer; }
.newjob label.sw input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.newjob label.sw span { display: flex; flex-direction: column; } .newjob label.sw b { font-size: 14px; font-weight: 500; color: var(--text); } .newjob label.sw small { font-size: 12px; color: var(--muted); }
.newjob .calwrap { grid-column: span 2; display: flex; flex-direction: column; gap: 6px; }
.newjob .calwrap .lab { font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.newjob .calwrap small { font-size: 12px; color: var(--muted); }
.cal { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 10px 12px 12px; max-width: 340px; }
.cal .cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal .cal-h b { font: 500 13px var(--ms-font); color: var(--text); }
.cal .cal-h button { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); cursor: pointer; font-size: 14px; }
.cal .cal-h button:hover { border-color: var(--accent); color: var(--accent); }
.cal .cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal .cal-g .dn { font: 400 10px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; padding-bottom: 4px; }
.cal .cal-g button { height: 34px; border: 1px solid transparent; border-radius: 8px; background: transparent; font: 400 13px var(--ms-font); color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums; }
.cal .cal-g button:hover { background: var(--hover); }
.cal .cal-g button.is-pad { color: var(--faint); }
.cal .cal-g button.is-today { border-color: var(--line); }
.cal .cal-g button.is-on { background: var(--accent); color: var(--ms-accent-text); font-weight: 500; }
.cal .cal-g button.is-wrap { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent); }
.newjob .ch { grid-column: span 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.newjob .ch .ct { display: flex; flex-direction: column; } .newjob .ch .ct b { font-size: 14px; font-weight: 500; color: var(--text); } .newjob .ch .ct small { font-size: 12px; color: var(--muted); }
.newjob .opts2 { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.newjob .opts2 label { display: block; flex-direction: row; cursor: pointer; }
.newjob .opts2 input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.newjob .opts2 span { display: block; padding: 0 12px; height: 32px; line-height: 32px; font: 500 13px/32px var(--ms-font); color: var(--text-2); background: var(--surface); }
.newjob .opts2 label + label span { border-left: 1px solid var(--line); }
.newjob .opts2 input:checked + span { background: var(--accent); color: var(--ms-accent-text); }
@media (max-width: 639px) { .newjob label.tall, .newjob label.file, .newjob label.sw, .newjob .ch { grid-column: 1 / -1; } }
@media (max-width: 639px) { .newjob { grid-template-columns: 1fr 1fr; } }
.tt-top .bs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.tt-links { height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 500 14px/1 var(--ms-font); cursor: pointer; white-space: nowrap; }
.tt-links { display: inline-flex; align-items: center; gap: 8px; }
.tt-links .ico { width: 20px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tt-links .ico rect { fill: none; } .tt-links .ico .arr { transition: transform .18s ease; }
.tt-links .chev { font-size: 16px; line-height: 1; color: var(--muted); transition: transform .18s ease; }
.tt-links:hover { border-color: var(--accent); color: var(--accent); }
.tt-links:hover .ico .arr { transform: translateX(2px); } .tt-links:hover .chev { transform: translateX(3px); color: var(--accent); }
/* the timesheet links panel: a slide-over from the right */
.tsp.is-wide { width: min(920px, 100%); }
.tsp { position: fixed; top: 0; right: 0; height: 100vh; width: min(460px, 100%); z-index: 30; background: var(--surface); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform .22s ease; display: flex; flex-direction: column; }
.tsp.is-open { transform: none; }
/* a destructive confirm on a phone comes up from the bottom as a sheet (add is-sheet to #drawer while it is open) */
@media (max-width: 639px) { .tsp.is-sheet { top: auto; bottom: 0; height: auto; max-height: 80vh; width: 100%; border-left: 0; border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; transform: translateY(100%); } .tsp.is-sheet.is-open { transform: none; } }
.tsp-h { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.tsp-h b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; flex: 1; }
.tsp-b { overflow: auto; padding: 8px 20px 24px; display: flex; flex-direction: column; gap: 22px; }
.tsp h3 { margin: 14px 0 6px; font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tl li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto; gap: 3px 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.tl li:hover { border-color: var(--faint); }
.tl .nm { grid-column: 1; font-size: 15px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl .nm small { font-weight: 400; color: var(--muted); margin-left: 8px; font-size: 13px; }
.tl .lk { grid-column: 1; display: inline-block; justify-self: start; max-width: 100%; font: 400 12px/1.4 var(--mono); color: var(--text-2); background: transparent; padding: 0; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl .st { grid-column: 1; font-size: 12px; color: var(--muted); }
.tl .ex { grid-column: 1; font: 400 12px/1.4 var(--mono); color: var(--muted); }
.tl .ex.is-soon { color: var(--amber); } .tl .ex.is-past { color: var(--red); } .tl .ex.is-near { color: var(--text-2); }
.tl .ex a { color: var(--accent); margin-left: 6px; cursor: pointer; font-family: var(--ms-font); font-weight: 500; }
.tl li.is-new .st { color: var(--green); font-weight: 500; }
.tl .cp { grid-column: 2; grid-row: 1 / span 4; align-self: center; height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); font: 500 13px/1 var(--ms-font); color: var(--accent); cursor: pointer; white-space: nowrap; }
.tl .cp:hover { background: var(--accent); border-color: var(--accent); color: var(--ms-accent-text); }
.tl .cp.is-done { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); background: var(--ms-ok-bg); }
.tsb { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.tsb .go { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.tsb .go .btn.is-lg { height: 42px; }
.tsb .made { padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); background: var(--ms-ok-bg); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }
.tsb .made .lk { font: 500 13px/1.4 var(--mono); color: var(--accent); word-break: break-all; }
.tsb .made .ex { font-size: 12px; color: var(--muted); }
.tsb .made .bs { display: flex; gap: 8px; flex-wrap: wrap; }
.tsb .made .sent { font-size: 12px; color: var(--green); font-weight: 500; align-self: center; }
.tsb .adj summary { cursor: pointer; font-size: 13px; color: var(--muted); list-style: none; }
.tsb .adj summary::before { content: "▸ "; } .tsb .adj[open] summary::before { content: "▾ "; }
.tsb .adj summary::-webkit-details-marker { display: none; }
.tsb .adjb { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding-top: 10px; }
.tsb label { display: flex; flex-direction: column; gap: 4px; font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); min-width: 0; }

.tsb input, .tsb select { height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; font: 400 14px var(--ms-font); color: var(--text); background: var(--surface); min-width: 0; }
.tsb input:focus, .tsb select:focus { outline: none; border-color: var(--accent); }
.tsb .flds { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.tsb .flds label { flex-direction: row; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: 400 13px var(--ms-font); letter-spacing: 0; text-transform: none; color: var(--text-2); cursor: pointer; }
.tsb .flds label:has(input:checked) { border-color: var(--accent); color: var(--accent); background: var(--ms-info-bg); }
.tsb .flds input { height: auto; margin: 0; accent-color: var(--accent); }
.tsb .acts { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.tsb .acts small { color: var(--muted); font-size: 12px; margin-left: auto; }
.tsp .preview { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.tsp .preview .ph { font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tsp .preview .pc { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; color: var(--text-2); }
.tsp .preview .pc b { display: block; font-weight: 500; color: var(--text); margin-bottom: 2px; }
.tsp .preview .pc small { color: var(--muted); }
.tsp .preview .pb { align-self: flex-start; height: 30px; padding: 0 12px; border-radius: 8px; background: var(--accent); color: var(--ms-accent-text); font: 500 12px/30px var(--ms-font); }
.tsb .days { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 1 / -1; }
.tsb .days::before { content: "Shoot days"; flex-basis: 100%; font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tsb .depts::before { content: "Departments on the list"; flex-basis: 100%; font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tsb .day, .tsb .dept { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--accent); border-radius: 999px; background: var(--ms-info-bg); font: 400 13px var(--ms-font); color: var(--accent); }
.tsb .day b { font-weight: 500; } .tsb .day small { color: var(--muted); }
.tsb .day button, .tsb .dept button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 0; line-height: 1; }
.tsb .dept.is-off { border-color: var(--line); background: var(--surface); color: var(--muted); }
.tsb .addday { display: flex; gap: 6px; } .tsb .addday input { flex: 1; }
.tsb label.wide .addday { font: 400 14px var(--ms-font); letter-spacing: 0; text-transform: none; }
.tt-eyebrow { font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tt-h1 { margin: 0; font-size: 30px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); }
.tt-lead { margin: 4px 0 0; font-size: 16px; line-height: 1.5; color: var(--text-2); max-width: 60ch; }
.tt-lead b { font-weight: 500; color: var(--text); }
.tt-lead .red { font-weight: 500; color: var(--red); }
.tt-group { margin-bottom: 32px; }
.tt-group h2 { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tt-group h2 .n { color: var(--muted); }
.tt-group h2 .keys { margin-left: auto; letter-spacing: 0; text-transform: none; font-family: var(--mono); }
.tt-group h2 .keys kbd { font: inherit; }
.tt-group ul { list-style: none; margin: 0; padding: 0; }
.tt-row.entry { display: grid; grid-template-columns: 76px 1fr auto 92px; gap: 20px; align-items: baseline; padding: 16px 12px; margin: 0 -12px; border-radius: 8px; border-bottom: 1px solid var(--line); cursor: pointer; }
.tt-row.entry:hover, .tt-row.entry.is-selected { background: var(--hover); padding-left: 12px; padding-right: 12px; margin-left: -12px; margin-right: -12px; border-bottom-color: var(--line); }
.tt-row.entry:hover .tt-job { text-decoration: none; }
.tt-row:last-child { border-bottom: 0; }
.tt-when { font: 400 13px/1.4 var(--mono); color: var(--muted); white-space: nowrap; }
.tt-main { min-width: 0; }
.tt-job { font-size: 15px; font-weight: 500; color: var(--text); }
.tt-act { font-size: 14px; color: var(--text-2); margin-top: 2px; }
.tt-fact { font-size: 13px; color: var(--muted); margin-top: 2px; }
.tt-sig { font: 500 12px/1.4 var(--mono); color: var(--text-2); white-space: nowrap; }
.tt-left { font: 400 13px/1.4 var(--mono); color: var(--text-2); text-align: right; white-space: nowrap; }
/* one loud signal per row: the time left, coloured by urgency; nothing else on the row is red */
.tt-row.is-red .tt-left { color: var(--red); font-weight: 500; } .tt-row.is-amber .tt-left { color: var(--amber); font-weight: 500; }
.tt-row.is-green .tt-sig, .tt-row.is-green .tt-left { color: var(--green); }
.tt-row.is-checking .tt-act { color: var(--muted); }
.tt-row .proc-bar { max-width: 320px; margin-top: 8px; }
@media (max-width: 639px) {
  .content.is-tt { padding-top: 24px; }
  .tt-top { flex-direction: column; align-items: stretch; }
  .tt-top .bs { margin-top: 0; }
  .tt-group h2 .keys { display: none; }
  .tt-row.entry { grid-template-columns: 1fr auto; gap: 4px 16px; padding: 14px 8px; margin: 0 -8px; }
  .tt-row.entry:hover, .tt-row.entry.is-selected { padding-left: 8px; padding-right: 8px; margin-left: -8px; margin-right: -8px; }
  .tt-when { grid-column: 1; } .tt-left { grid-column: 2; grid-row: 1; }
  .tt-main { grid-column: 1 / -1; } .tt-sig { grid-column: 1 / -1; }
}
/* ---------- Brief ---------- */
.eyebrow { font-size: var(--ms-fs-sm); color: var(--ms-muted); }
.greet { margin: 6px 0 0; font-size: 34px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.15; }
.did { margin: 10px 0 0; font-size: var(--ms-fs-md); color: var(--ms-text-2); max-width: 64ch; }
.stats { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: var(--ms-fs-sm); color: var(--ms-text-3); }
.stat b { font-weight: 500; color: var(--ms-text); font-size: var(--ms-fs); margin-right: 4px; }
.stat.is-red b { color: var(--ms-danger); }
.first { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px 14px 14px; border-radius: var(--ms-r-lg); background: var(--ms-surface); border: 1px solid var(--ms-border); color: var(--ms-text); }
.first:hover { border-color: var(--ms-accent); }
.first .mark { margin: 0; flex: none; }
.first .t { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.first .t small { font-size: var(--ms-fs-xs); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--ms-danger); }
.first .t b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ms-accent); }
.first .t b span { font-weight: 400; color: var(--ms-text-3); }
.first .r { text-align: right; flex: none; }
.first .r b { display: block; font-size: 22px; font-weight: 300; letter-spacing: -0.02em; color: var(--ms-danger); font-variant-numeric: tabular-nums; line-height: 1.1; }
.first .r small { font-size: var(--ms-fs-xs); color: var(--ms-muted); white-space: nowrap; }
.guide { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ms-border); }
.guide .g { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.guide .g > small { font-size: var(--ms-fs-xs); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--ms-muted); }
.guide .g.is-red > small { color: var(--ms-danger); } .guide .g.is-amber > small { color: var(--ms-warn); }
.guide a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: var(--ms-r-pill); background: var(--ms-surface); border: 1px solid var(--ms-border-strong); font-size: var(--ms-fs-sm); color: var(--ms-text); }
.guide a:hover { border-color: var(--ms-accent); color: var(--ms-accent); }
.guide a i { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; font: 600 11px/1 var(--ms-font); font-style: normal; color: var(--tint); background: color-mix(in srgb, var(--tint) 16%, var(--ms-surface)); }
.guide a b { font-weight: 500; } .guide a span { color: var(--ms-muted); }
.path { width: 28px; display: flex; flex-direction: column; align-items: center; align-self: stretch; position: relative; }
.path b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--ms-accent); background: var(--ms-surface); border: 1.5px solid var(--ms-accent); margin-top: 10px; z-index: 1; }
.is-red .path b { color: var(--ms-accent-text); background: var(--ms-danger); border-color: var(--ms-danger); }
.is-amber .path b { color: var(--ms-accent-text); background: var(--ms-warn); border-color: var(--ms-warn); }
.is-green .path b { color: var(--ms-ok); border-color: var(--ms-ok); }
.path::after { content: ""; position: absolute; top: 34px; bottom: -18px; width: 2px; background: var(--ms-border-strong); }
.entry:last-child .path::after { display: none; }
.entry.is-job { grid-template-columns: 28px 40px minmax(0, 1fr) auto; }
.snips li:first-child { font-weight: 500; color: var(--ms-accent); }
.snips li:first-child::after { content: "›"; color: var(--ms-muted); margin-left: 2px; }

/* the park icon (the ⏸ glyph draws as a box in Plex) and the link-styled buttons in a card's foot */
.ico-park { display: inline-block; vertical-align: -1px; fill: currentColor; }
.pf-f .lnk, button.lnk { background: none; border: 0; padding: 0; font: 500 12px var(--ms-font); color: var(--ms-accent); cursor: pointer; white-space: nowrap; }
.own a { font-size: 12px; color: var(--ms-text-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; align-self: center; }
/* ---------- The ledger: type and hairlines, no cards, no buttons in the rows ---------- */
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ms-border-strong); }
.sec-h h2 { margin: 0; font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ms-muted); }
.sec-h h2 .count { font-weight: 400; margin-left: 6px; color: var(--ms-muted); }
.sec-h h2 .count.is-red { color: var(--ms-danger); }
.hint { font-size: var(--ms-fs-xs); color: var(--ms-muted); }
.hint kbd { font: 500 11px/1 var(--ms-font); padding: 2px 5px; border: 1px solid var(--ms-border-strong); border-radius: 5px; background: var(--ms-surface); margin: 0 1px; }
.ledger { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 28px; align-items: start; padding: 18px 10px 18px 0; margin: 0 -10px 0 0; border-bottom: 1px solid var(--ms-border); cursor: pointer; position: relative; border-radius: var(--ms-r); }
.entry:hover .e-name, .entry:hover .e-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--ms-border-strong); }
.entry.is-selected { background: var(--ms-surface-2); padding-left: 14px; margin-left: -14px; padding-right: 14px; margin-right: -14px; border-bottom-color: transparent; }
.entry:last-child { border-bottom: 0; }
.e-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.entry.is-job { gap: 4px 16px; }
.mark { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--tint); background: color-mix(in srgb, var(--tint) 16%, var(--ms-surface)); margin-top: 2px; }
.is-green .mark { color: var(--ms-muted); background: var(--ms-surface-3); }
.strip { display: flex; gap: 3px; width: 140px; margin: 6px 0 4px; }
.strip span { flex: 1; height: 3px; border-radius: 2px; background: var(--ms-surface-3); }
.strip span.is-on { background: var(--tint, var(--ms-accent)); }
.is-green .strip span.is-on { background: var(--ms-ok); }
.snips { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.snips li { display: flex; gap: 8px; font-size: var(--ms-fs-sm); color: var(--ms-muted); min-width: 0; }
.snips li::before { content: "•"; color: var(--ms-border-strong); flex: none; }
.snips li:first-child { font-size: var(--ms-fs-md); color: var(--ms-text); }
.snips li:first-child::before { color: var(--tint, var(--ms-accent)); }
.snips li b { font-weight: 500; color: var(--ms-text-2); }
.e-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.e-name { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; color: var(--ms-accent); }
.e-sub { font-size: var(--ms-fs-xs); color: var(--ms-muted); }
.e-act { font-size: var(--ms-fs-md); color: var(--ms-text); margin-top: 3px; }
.e-act .n { color: var(--ms-muted); }
.e-did { font-size: var(--ms-fs-sm); color: var(--ms-muted); }
.e-side { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding-top: 2px; text-align: right; min-width: 92px; }
.e-left { font-size: 24px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; color: var(--ms-text-2); font-variant-numeric: tabular-nums; }
.e-left small { font-size: var(--ms-fs-sm); color: var(--ms-muted); margin-left: 2px; font-weight: 400; }
.e-when { font-size: var(--ms-fs-xs); color: var(--ms-muted); white-space: nowrap; }
.is-red .e-left { color: var(--ms-danger); } .is-amber .e-left { color: var(--ms-warn); } .is-green .e-left { color: var(--ms-ok); font-size: 18px; font-weight: 500; }
.is-green .e-name { color: var(--ms-text-3); font-weight: 500; }
.e-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--ms-text); }
.is-green .e-title { color: var(--ms-text-3); font-weight: 500; }
.e-who { font-size: var(--ms-fs-xs); color: var(--ms-muted); }
.e-tag { font-size: var(--ms-fs-xs); color: var(--ms-muted); white-space: nowrap; }
.e-tag.is-big { color: var(--ms-accent); }
.e-prop { font-size: var(--ms-fs-sm); color: var(--ms-accent); font-weight: 500; }
.e-prop::before { content: "→ "; color: var(--ms-muted); }
.is-parked .e-prop, .is-no .e-prop { color: var(--ms-muted); font-weight: 400; }
.e-side.acts { flex-direction: row; align-items: center; gap: 4px; min-width: 0; }
.dec { height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid transparent; background: transparent; font-size: var(--ms-fs-xs); font-weight: 500; color: var(--ms-text-3); cursor: pointer; white-space: nowrap; visibility: hidden; }
.entry.is-selected .dec, .entry:hover .dec, .entry:focus-within .dec, .entry .dec.ok { visibility: visible; }
@media (hover: none) { .dec { visibility: visible; } }
.dec:hover { background: var(--ms-surface-2); color: var(--ms-text); }
.dec.ok { color: var(--ms-accent-text); background: var(--ms-accent); } .dec.ok:hover { background: var(--ms-accent-hover); }
.dec.no:hover { color: var(--ms-danger); } .dec.park:hover { color: var(--ms-warn); }
.e-state { font-size: var(--ms-fs-xs); font-weight: 500; white-space: nowrap; }
.e-state.ok { color: var(--ms-ok); } .e-state.no { color: var(--ms-danger); } .e-state.park { color: var(--ms-warn); }
.is-no .e-title, .is-parked .e-title { color: var(--ms-text-3); font-weight: 500; }
.sec-h .all { font-size: var(--ms-fs-xs); font-weight: 500; color: var(--ms-accent); background: none; border: 0; cursor: pointer; padding: 0; }
.sec-h .all:hover { text-decoration: underline; }
.sec-h h2 .sub { font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 8px; }
/* the question row, the payroll tab's way: the question, the value, ✓ the proposal, ✗ the other way, ⏸ park, ✎ your own */
.qrow { display: grid; grid-template-columns: minmax(0, 1fr) 72px auto auto auto auto; gap: 8px 14px; align-items: center; padding: 11px 10px 11px 14px; border-bottom: 1px solid var(--ms-row-line); border-left: 3px solid var(--ms-border-strong); margin-left: -14px; cursor: default; }
.qrow:last-child { border-bottom: 0; }
.qrow.is-selected { background: var(--ms-surface-2); border-left-color: var(--ms-accent); }
.qrow.is-red { border-left-color: var(--ms-danger); } .qrow.is-amber { border-left-color: var(--ms-warn); }
.qrow.is-red.is-selected, .qrow.is-amber.is-selected { border-left-color: var(--ms-accent); }
.qrow .qt { font-size: var(--ms-fs-md); color: var(--ms-text); line-height: 1.4; min-width: 0; cursor: pointer; }
.qrow .qt b { font-weight: 600; }
.qrow .qt .det { font-size: var(--ms-fs-sm); color: var(--ms-link); margin-left: 8px; white-space: nowrap; }
.qrow .qt .det::before { content: "▸ "; }
.qrow .qt:hover .det { text-decoration: underline; }
.qrow .qv { font-size: var(--ms-fs-md); font-variant-numeric: tabular-nums; color: var(--ms-text-2); text-align: right; white-space: nowrap; }
.qb { height: 34px; padding: 0 12px; border-radius: 8px; font-size: var(--ms-fs-sm); font-weight: 500; cursor: pointer; white-space: nowrap; border: 1px solid var(--ms-border-strong); background: var(--ms-surface); color: var(--ms-text-2); }
.qb:hover { background: var(--ms-surface-2); }
.qb.yes { border-color: var(--ms-accent); color: var(--ms-accent); background: var(--ms-info-bg); font-weight: 600; }
.qb.yes:hover { background: var(--ms-accent); color: var(--ms-accent-text); }
.qb.ico { width: 34px; padding: 0; text-align: center; color: var(--ms-text-3); }
.qb.ico.park:hover { color: var(--ms-warn); }
.qrow.is-done .qt, .qrow.is-done .qv { color: var(--ms-muted); }
.qrow.is-done .ans { grid-column: 3 / 7; display: flex; align-items: center; gap: 10px; font-size: var(--ms-fs-sm); font-weight: 500; white-space: nowrap; }
.qrow.is-done .ans.ok { color: var(--ms-ok); } .qrow.is-done .ans.no { color: var(--ms-text-3); } .qrow.is-done .ans.park { color: var(--ms-warn); }
.qrow .ans a { font-weight: 400; color: var(--ms-muted); cursor: pointer; }
.qrow .ans a:hover { color: var(--ms-accent); }
.qrow .open { grid-column: 3 / 7; }
/* pre-flight: the job's defaults, each a card with its options */
.pf { background: var(--ms-surface); border: 1px solid var(--ms-border); border-radius: var(--ms-r-lg); padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.pf .pf-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pf .tag { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
.pf .tag.await { color: var(--ms-warn); background: var(--ms-warn-bg); border: 1px solid color-mix(in srgb, var(--ms-warn) 40%, transparent); }
.pf .tag.done { color: var(--ms-ok); background: var(--ms-ok-bg); border: 1px solid color-mix(in srgb, var(--ms-ok) 40%, transparent); }
.pf h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ms-text); flex: 1 1 auto; min-width: 0; }
.pf .applied { font-size: var(--ms-fs-xs); color: var(--ms-ok); border: 1px solid color-mix(in srgb, var(--ms-ok) 40%, transparent); border-radius: 6px; padding: 2px 8px; }
.pf .pwho { list-style: none; margin: 0; padding: 0; max-width: 560px; }
.pf .pwho li { display: flex; align-items: baseline; gap: 8px; font-size: var(--ms-fs-sm); color: var(--ms-text-2); padding: 3px 0; }
.pf .pwho li::after { content: ""; flex: 1; border-bottom: 1px dotted var(--ms-border-strong); min-width: 20px; transform: translateY(-4px); }
.pf .pwho li > span:nth-child(2) { color: var(--ms-muted); order: 3; }
.pf .pwho li .pr { order: 4; }
.pf .opts { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.pf .opt { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--ms-border); border-radius: var(--ms-r); cursor: pointer; font-size: var(--ms-fs-md); color: var(--ms-text); background: var(--ms-surface); text-align: left; width: 100%; }
.pf .opt:hover { border-color: var(--ms-border-strong); background: var(--ms-bg); }
.pf .opt .rad { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ms-border-strong); flex: none; display: grid; place-items: center; }
.pf .opt.is-on { border-color: var(--ms-accent); background: var(--ms-info-bg); }
.pf .opt.is-on .rad { border-color: var(--ms-accent); } .pf .opt.is-on .rad::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ms-accent); }
.pf .opt .prop { font-size: var(--ms-fs-xs); color: var(--ms-muted); border: 1px solid var(--ms-border-strong); border-radius: 6px; padding: 2px 7px; margin-left: 4px; }
.pf .pf-f { display: flex; align-items: center; gap: 14px; font-size: var(--ms-fs-sm); }
.pf .pf-f a { color: var(--ms-muted); text-decoration: underline; text-decoration-style: dotted; cursor: pointer; }
.pf .pf-f .at { color: var(--ms-ok); }
.proc-bar { height: 4px; margin-top: 8px; border-radius: 2px; background: var(--ms-surface-3); overflow: hidden; max-width: 420px; position: relative; }
.proc-bar > span { position: absolute; inset: 0 auto 0 0; width: var(--p, 58%); background: var(--ms-accent); border-radius: 2px; transition: width 1.2s ease; }
.proc-bar > span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform: translateX(-100%); animation: sweep 1.8s ease-in-out infinite; }
.proc-bar.is-light { background: var(--island-2); } .proc-bar.is-light > span { background: var(--ms-accent-text); }
@keyframes sweep { to { transform: translateX(100%); } }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .proc-bar > span::after, .nav-item .meta.is-live::before, .sheet.is-reading i, .pod.is-dark .dot { animation: none; } }
.empty { padding: 22px 0; color: var(--ms-muted); font-size: var(--ms-fs-sm); }
.groups { display: flex; flex-direction: column; gap: 26px; }

/* ---------- Job page head ---------- */
.back { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ms-fs-sm); color: var(--ms-muted); }
.back:hover { color: var(--ms-text); }
.job-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.job-head .t { min-width: 0; flex: 1 1 320px; }
.job-head h1 { margin: 4px 0 0; font-size: 34px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.15; }
.job-head .line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; font-size: var(--ms-fs-sm); color: var(--ms-text-3); }
.job-head .primary { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.job-head .primary small { font-size: var(--ms-fs-xs); color: var(--ms-muted); }
.steps { display: flex; gap: 4px; margin-top: 12px; max-width: 420px; }
.steps span { flex: 1; height: 4px; border-radius: 2px; background: var(--ms-surface-3); }
.steps span.is-on { background: var(--ms-accent); }

/* ---------- The island ---------- */
.pod { background: var(--ms-surface); border: 1px solid var(--ms-border); border-radius: var(--ms-r-lg); min-width: 0; }
.pod.is-dark { background: var(--island); color: var(--ms-accent-text); border-color: transparent; padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 2px; }
.pod.is-dark .k { font-size: var(--ms-fs-xs); color: rgba(255,255,255,.62); letter-spacing: .02em; text-transform: uppercase; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.pod.is-dark .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ms-accent-text); animation: pulse 1.4s ease-in-out infinite; }
.pod.is-dark .big { font-size: 44px; font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; margin-top: 6px; font-variant-numeric: tabular-nums; }
.pod.is-dark .big small { font-size: var(--ms-fs-md); font-weight: 400; color: rgba(255,255,255,.7); margin-left: 4px; letter-spacing: 0; }
.pod.is-dark .what { font-size: var(--ms-fs-md); font-weight: 500; margin-top: 4px; }
.pod.is-dark .when { font-size: var(--ms-fs-sm); color: rgba(255,255,255,.7); }
.pod.is-dark .next { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--island-2); font-size: var(--ms-fs-xs); color: rgba(255,255,255,.7); display: flex; justify-content: space-between; gap: 10px; }
.pod.is-dark .next b { color: var(--ms-accent-text); font-weight: 500; }
.pod.is-dark.is-red .big { color: var(--island-red); } .pod.is-dark.is-amber .big { color: var(--island-amber); }
/* the small pod: where the job is, step by step */
.pod.steps-pod { padding: 12px 16px 12px; }
.pod.steps-pod .k { font-size: var(--ms-fs-xs); color: var(--ms-muted); letter-spacing: .02em; text-transform: uppercase; font-weight: 500; display: flex; justify-content: space-between; gap: 10px; }
.pod.steps-pod .k b { color: var(--ms-text); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: var(--ms-fs-sm); }
.stepper { display: flex; gap: 3px; margin-top: 10px; }
.stepper span { flex: 1; height: 5px; border-radius: 3px; background: var(--ms-surface-3); }
.stepper span.is-on { background: var(--ms-accent); } .stepper span.is-now { background: var(--ms-accent); box-shadow: 0 0 0 2px var(--ms-surface), 0 0 0 3px var(--ms-accent); }
.stepnames { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: var(--ms-fs-xs); color: var(--ms-muted); }
.stepnames b { color: var(--ms-accent); font-weight: 600; font-size: var(--ms-fs-sm); }
.stepnames b::before { content: "● "; font-size: 9px; vertical-align: 2px; }
.stepnames .done::before { content: "✓ "; color: var(--ms-ok); }
/* the big pod: the next action, expandable into quick actions */
.pod.is-dark .act { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; margin-top: 2px; color: inherit; text-decoration: none; }
.pod.is-dark a.act:hover, .pod.is-dark a.act:focus-visible { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; outline: none; }
.pod.is-dark .row2 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 2px; }
.pod.is-dark .row2 .big { margin-top: 0; font-size: 36px; }
.pod.is-dark .snips li { color: rgba(255,255,255,.72); } .pod.is-dark .snips li::before { color: rgba(255,255,255,.35); }
.pod.is-dark .snips li:first-child { color: var(--ms-accent-text); font-size: var(--ms-fs-sm); } .pod.is-dark .snips li:first-child::before { color: rgba(255,255,255,.35); }
.pod.is-dark .snips li:first-child::after { content: none; }
.pod.is-dark .snips li a:hover span { color: var(--ms-accent-text) !important; }
.pod.is-dark .snips li b { color: var(--ms-accent-text); }
.pod.is-dark .toggle { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--island-2); display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--ms-fs-xs); color: rgba(255,255,255,.7); cursor: pointer; background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; text-align: left; }
.pod.is-dark .toggle:hover { color: var(--ms-accent-text); }
.pod.is-dark .toggle::after { content: "▾"; font-size: 13px; } .pod.is-dark.is-x .toggle::after { content: "▴"; }
.quick { display: none; flex-direction: column; gap: 6px; margin-top: 8px; }
.pod.is-dark.is-x .quick { display: flex; }
.qa { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 8px 12px; border-radius: 9px; background: var(--island-2); font-size: var(--ms-fs-sm); color: var(--ms-accent-text); cursor: pointer; border: 0; width: 100%; text-align: left; }
.qa:hover { background: rgba(255,255,255,.22); }
.qa small { color: rgba(255,255,255,.65); font-size: var(--ms-fs-xs); margin-left: 6px; }
.qa .go { color: rgba(255,255,255,.75); font-size: var(--ms-fs-xs); white-space: nowrap; }
.qa.is-primary { background: var(--ms-accent-text); color: var(--island); font-weight: 500; } .qa.is-primary:hover { background: rgba(255,255,255,.9); }
.qa.is-primary small, .qa.is-primary .go { color: rgba(27,36,71,.6); }
.qa.is-done { background: transparent; color: rgba(255,255,255,.6); cursor: default; } .qa.is-done .go { color: var(--island-green); }
.qa:disabled { opacity: .45; cursor: default; }
/* in and out */
.inout { display: grid; grid-template-columns: 112px 1fr 1fr; align-items: center; }
.ring { display: grid; place-items: center; width: 112px; height: 112px; border-right: 1px solid var(--ms-border); }
.ring > * { grid-area: 1 / 1; }
.ring svg { width: 84px; height: 84px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; stroke-linecap: butt; }
.ring .track { stroke: var(--ms-surface-3); } .ring .in { stroke: var(--ms-accent); } .ring .out { stroke: var(--ms-warn); }
.ring .mid { text-align: center; font-size: 15px; font-weight: 500; line-height: 1; }
.ring .mid small { display: block; font-size: 10px; color: var(--ms-muted); margin-top: 3px; font-weight: 400; }
.inout .fact:nth-child(2) { border-right: 1px solid var(--ms-border); }
.inout .fact { border-bottom: 0; }
.legend { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.legend.in { background: var(--ms-accent); } .legend.out { background: var(--ms-warn); }
.jobs-io { border-top: 1px solid var(--ms-border); }
.jobs-io li { align-items: center; gap: 10px; padding: 7px 16px; }
.jobs-io .bar { flex: 1; height: 6px; border-radius: 3px; background: var(--ms-warn-bg); overflow: hidden; }
.jobs-io .bar > span { display: block; height: 100%; background: var(--ms-accent); border-radius: 3px; }
.jobs-io .r { min-width: 56px; text-align: right; }
.inout .fact b { font-size: 24px; font-weight: 300; letter-spacing: -0.02em; }
.inout .fact b em { font-size: var(--ms-fs-sm); display: block; margin-left: 0; }
.inout .fact.is-out b { color: var(--ms-warn); }
.inout-foot { padding: 8px 16px 10px; font-size: var(--ms-fs-xs); color: var(--ms-muted); border-top: 1px solid var(--ms-border); display: flex; justify-content: space-between; gap: 10px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; }
.fact { padding: 12px 16px; border-right: 1px solid var(--ms-border); border-bottom: 1px solid var(--ms-border); min-width: 0; }
.fact:nth-child(2n) { border-right: 0; } .fact:nth-last-child(-n+2) { border-bottom: 0; }
.fact small { display: block; font-size: var(--ms-fs-xs); color: var(--ms-muted); }
.fact b { display: block; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fact b em { font-style: normal; font-size: var(--ms-fs-sm); color: var(--ms-muted); font-weight: 400; margin-left: 3px; }
.list { list-style: none; margin: 0; padding: 4px 0; }
.list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 16px; font-size: var(--ms-fs-sm); }
.list li + li { border-top: 1px solid var(--ms-row-line); }
.list .l { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .l small { color: var(--ms-muted); margin-left: 6px; }
.list .r { color: var(--ms-muted); white-space: nowrap; }
.list .r b { font-weight: 500; color: var(--ms-text-2); }
.pod-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 16px 10px; border-bottom: 1px solid var(--ms-border); }
.pod-h b { font-size: var(--ms-fs-xs); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--ms-muted); }
.pod-h small { font-size: var(--ms-fs-xs); color: var(--ms-muted); }

/* the people pod: who we are waiting on, what went out, the draft, one action */
.people { list-style: none; margin: 0; padding: 0; }
.people li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--ms-row-line); }
.people .av { width: 34px; height: 34px; border-radius: 50%; background: var(--ms-surface-3); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--ms-text-3); grid-row: span 2; }
.people b { font-weight: 500; font-size: var(--ms-fs); }
.people b small { font-weight: 400; color: var(--ms-muted); margin-left: 6px; font-size: var(--ms-fs-sm); }
.people .st { grid-column: 2; font-size: var(--ms-fs-xs); color: var(--ms-muted); }
.people .st.is-warn { color: var(--ms-warn); }
.people .opened { font-size: var(--ms-fs-xs); color: var(--ms-muted); text-align: right; grid-row: span 2; white-space: nowrap; }
.people .opened.is-ok { color: var(--ms-ok); }
.draft { margin: 12px 16px 4px; padding: 10px 12px; border: 1px dashed var(--ms-border-strong); border-radius: var(--ms-r); font-size: var(--ms-fs-sm); color: var(--ms-text-2); white-space: pre-line; }
.draft small { display: block; font-size: var(--ms-fs-xs); color: var(--ms-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .02em; font-weight: 500; }
/* the follow-up pod: who is outstanding, how to reach them */
.fu-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px 10px; border-bottom: 1px solid var(--ms-border); }
.fu-h b { font-size: var(--ms-fs-xs); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--ms-muted); }
.fu-h .n { font-size: var(--ms-fs-sm); color: var(--ms-warn); font-weight: 500; }
.fu-h .btn { margin-left: auto; }
.fu { list-style: none; margin: 0; padding: 0; }
.fu li { padding: 8px 16px; border-bottom: 1px solid var(--ms-row-line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; align-items: baseline; }
.fu li:last-child { border-bottom: 0; }
.fu .nm { min-width: 0; font-size: var(--ms-fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fu .nm b { font-weight: 500; color: var(--ms-text); }
.fu .nm span { color: var(--ms-muted); margin-left: 6px; }
.fu .op { font-size: var(--ms-fs-xs); color: var(--ms-muted); white-space: nowrap; text-align: right; }
.fu .op.is-ok { color: var(--ms-ok); }
.fu .ms { font-size: var(--ms-fs-xs); color: var(--ms-muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fu .ms b { font-weight: 500; color: var(--ms-warn); }
.fu .ct { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.fu .ct a { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 6px; border: 1px solid var(--ms-border-strong); font-size: 11px; color: var(--ms-text-2); background: var(--ms-surface); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fu .ct a:hover { border-color: var(--ms-accent); color: var(--ms-accent); }
.fu .ct a.mail { color: var(--ms-accent); border-color: color-mix(in srgb, var(--ms-accent) 40%, transparent); background: var(--ms-info-bg); }
.fu .ct .sent { font-size: 11px; color: var(--ms-ok); }
.fu-more { padding: 8px 16px; font-size: var(--ms-fs-xs); color: var(--ms-muted); border-top: 1px solid var(--ms-row-line); }
.fu-draft { margin: 0; padding: 8px 16px 9px; border-top: 1px solid var(--ms-border); font-size: var(--ms-fs-xs); color: var(--ms-muted); }
.fu-draft summary { cursor: pointer; font-weight: 500; }
.fu-draft p { margin: 8px 0 0; color: var(--ms-text-2); font-size: var(--ms-fs-sm); white-space: pre-line; }
.fu-none { padding: 18px 16px; font-size: var(--ms-fs-sm); color: var(--ms-muted); }
/* a question's facts, under its row */
.qrow .rowdet { grid-column: 1 / -1; margin: 4px 0 2px; padding: 4px 12px; border: 1px solid var(--ms-border); border-radius: var(--ms-r); background: var(--ms-surface); }
.qrow .rowdet .dl { padding: 0; columns: 2; column-gap: 24px; }
.qrow .rowdet .dl li { break-inside: avoid; }
/* the details pod: the question's facts, no drawn page */
.dl { list-style: none; margin: 0; padding: 4px 16px 6px; }
.dl li { display: grid; grid-template-columns: 110px minmax(0, 1fr) 18px; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--ms-row-line); font-size: var(--ms-fs-sm); }
.dl li:last-child { border-bottom: 0; }
.dl .k { color: var(--ms-muted); } .dl .v { font-weight: 500; min-width: 0; }
.dl .v small { display: block; font-weight: 400; color: var(--ms-warn); font-size: var(--ms-fs-xs); }
.dl .c { text-align: right; font-size: 12px; color: var(--ms-ok); } .dl li.is-low .c { color: var(--ms-warn); } .dl li.is-low .v { color: var(--ms-warn); }
.own { display: flex; gap: 8px; padding: 10px 16px 0; }
.own input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--ms-border-strong); font: inherit; font-size: var(--ms-fs); background: var(--ms-surface); color: var(--ms-text); }
.own input:focus { outline: none; border-color: var(--ms-accent); box-shadow: 0 0 0 3px var(--ms-info-bg); }
.qrow .own { grid-column: 1 / -1; padding: 0; }
.qrow.is-ok { border-left-color: var(--ms-ok); } .qrow.is-no { border-left-color: var(--ms-danger); } .qrow.is-park { border-left-color: var(--ms-warn); }
.pf .note { margin: 0; font-size: var(--ms-fs-md); color: var(--ms-text-2); max-width: 64ch; }
.pf .amts { list-style: none; margin: 0; padding: 0; max-width: 560px; }
.pf .amts li { display: flex; align-items: baseline; gap: 8px; font-size: var(--ms-fs-sm); color: var(--ms-text-2); padding: 4px 0; border-bottom: 1px dotted var(--ms-border-strong); }
.pf .amts li > span:nth-child(2) { font-variant-numeric: tabular-nums; }
.pf .amts li.tot { border-bottom: 0; font-weight: 500; color: var(--ms-text); }
.pf .opt .amt { font-variant-numeric: tabular-nums; color: var(--ms-muted); font-size: var(--ms-fs-sm); margin-left: 4px; }
.pf .own { padding: 0; }
.pf .pr { display: flex; align-items: center; gap: 4px; margin-left: 10px; flex: none; }
.pf .pr button { height: 26px; min-width: 26px; padding: 0 7px; border-radius: 7px; border: 1px solid var(--ms-border-strong); background: var(--ms-surface); font-size: 12px; color: var(--ms-text-3); cursor: pointer; }
/* the desk's push control on an open row: a word, not a glyph; marked rows carry the navy edge */
.pf .pr.pr-push { margin-left: 6px; } .pf .pr.pr-push button { font: 500 12px var(--ms-font); color: var(--ms-text-2); white-space: nowrap; } .pf .pr.pr-push button[aria-pressed="true"] { background: var(--ms-info-bg); border-color: var(--ms-accent); color: var(--ms-accent); } .pf .pr.pr-push small { font-size: 11px; color: var(--ms-muted); white-space: nowrap; }
.pf .qs li.is-marked { box-shadow: inset 3px 0 0 var(--ms-accent); }
.pf .pr button:hover { border-color: var(--ms-accent); color: var(--ms-accent); }
.pf .pr .st { font-size: var(--ms-fs-xs); font-weight: 500; white-space: nowrap; }
.pf .pr .st.ok { color: var(--ms-ok); } .pf .pr .st.no { color: var(--ms-danger); }
.pf .pr .st a { font-weight: 400; color: var(--ms-muted); margin-left: 6px; cursor: pointer; }
.pf .pr .st small { color: var(--ms-muted); font-weight: 400; margin-left: 6px; }
.pf .amts li, .pf .pwho li { flex-wrap: wrap; }
.pf .cm { flex-basis: 100%; display: flex; gap: 6px; padding: 6px 0 2px; }
.pf .cm input { flex: 1; min-width: 0; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--ms-border-strong); font: inherit; font-size: var(--ms-fs-sm); }
.pf .cm input:focus { outline: none; border-color: var(--ms-accent); }
.pf .qs { list-style: none; margin: 0; padding: 0; }
.pf .qs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 7px 0; border-bottom: 1px dotted var(--ms-border-strong); font-size: var(--ms-fs); color: var(--ms-text-2); }
.pf .qs li .qn { min-width: 0; flex: 1 1 260px; }
.pf .qs li .qn b { font-weight: 500; color: var(--ms-text); }
.pf .qs li .qn .det { font-size: var(--ms-fs-sm); color: var(--ms-link); margin-left: 8px; white-space: nowrap; cursor: pointer; }
.pf .qs li .qn .det::before { content: "▸ "; }
.pf .qs li .qp { font-variant-numeric: tabular-nums; color: var(--ms-accent); font-weight: 500; white-space: nowrap; }
.pf .qs li .qp::before { content: "→ "; color: var(--ms-muted); font-weight: 400; }
.pf .qs li.is-selected { background: var(--ms-surface-2); margin: 0 -8px; padding: 7px 8px; border-radius: 8px; }
.pf .qs li .rowdet { flex-basis: 100%; margin: 4px 0 2px; padding: 4px 10px; border: 1px solid var(--ms-border); border-radius: var(--ms-r); }
.pf .qs li .rowdet .dl { padding: 0; columns: 2; column-gap: 24px; } .pf .qs li .rowdet .dl li { break-inside: avoid; display: grid; border-bottom: 1px solid var(--ms-row-line); }
.pf .qs li .own { flex-basis: 100%; padding: 4px 0 2px; }
.pf .qs li.is-ok .qn, .pf .qs li.is-no .qn, .pf .qs li.is-park .qn { color: var(--ms-muted); }
.pf .qs li.is-no .qp { color: var(--ms-muted); text-decoration: line-through; }
.pf .pr .st.park { color: var(--ms-warn); }
.pf .qs li .open { margin-left: auto; }
.lnbox { width: 92px; height: 26px; padding: 0 8px; border: 1px solid var(--ms-border-strong); border-radius: 7px; font: 500 13px/1 var(--mono); color: var(--ms-text); background: var(--ms-surface); }
.lnbox:focus { outline: none; border-color: var(--ms-accent); box-shadow: 0 0 0 3px var(--ms-info-bg); }
.lnbox::placeholder { color: var(--ms-muted); font-weight: 400; }
/* the quick-decision pod */
.pod.doc { display: flex; flex-direction: column; }
.pod.is-dark, .pod.facts-pod { flex: none; }
.doc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 16px 10px; border-bottom: 1px solid var(--ms-border); }
.doc-head .t { min-width: 0; }
.doc-head .t b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-head .t small { display: block; font-size: var(--ms-fs-xs); color: var(--ms-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-close { display: none; }
.doc-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.doc-body > * { flex: none; }
.pagewrap { position: relative; overflow: hidden; aspect-ratio: 8.5 / 6.2; border-radius: 3px; }
.pagewrap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(180deg, rgba(255,255,255,0), var(--ms-surface)); pointer-events: none; }
.sheet { position: relative; width: 100%; aspect-ratio: 8.5 / 11; background: var(--ms-surface); border: 1px solid var(--ms-border-strong); border-radius: 3px; padding: 6% 7%; font-size: 10px; line-height: 1.3; color: var(--ms-text-2); overflow: hidden; user-select: none; }
.sheet .ttl { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6%; }
.sheet .frm { display: grid; grid-template-columns: 1fr 1fr; gap: 4% 6%; margin-bottom: 7%; }
.sheet .f { display: flex; gap: 6px; align-items: baseline; border-bottom: 1px solid var(--ms-border-strong); padding-bottom: 2px; min-width: 0; }
.sheet .f.wide { grid-column: 1 / -1; }
.sheet .f span { color: var(--ms-muted); font-size: 8.5px; white-space: nowrap; }
.sheet i { font-style: italic; color: var(--ink); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.sheet i.big { font-size: 13px; }
.sheet i.print { font-style: normal; color: var(--ms-text-2); font-size: 10px; }
.sheet table { width: 100%; border-collapse: collapse; }
.sheet th { font-weight: 500; font-size: 8.5px; color: var(--ms-muted); text-align: left; padding: 3px 4px; border-bottom: 1px solid var(--ms-border-strong); }
.sheet td { padding: 4px; border-bottom: 1px solid var(--ms-row-line); height: 20px; position: relative; }
.sheet .sig { position: absolute; left: 7%; right: 45%; bottom: 8%; border-bottom: 1px solid var(--ms-border-strong); padding-bottom: 2px; }
.sheet .sig i { font-size: 13px; transform: rotate(-4deg); display: inline-block; }
.sheet .smudge { position: absolute; inset: -2px -6px; background: radial-gradient(ellipse at 40% 60%, rgba(43,63,140,.22), transparent 70%); filter: blur(1.2px); pointer-events: none; }
.sheet .is-low { outline: 1.5px solid var(--ms-warn); outline-offset: 1px; background: var(--ms-warn-bg); border-radius: 2px; }
.sheet .is-hot { outline: 2px solid var(--ms-accent); outline-offset: 1px; background: var(--ms-info-bg); border-radius: 2px; }
.sheet.is-reading i { animation: pulse 1.4s ease-in-out infinite; }
.sheet.is-small { max-height: 190px; width: auto; aspect-ratio: auto; height: 190px; overflow: hidden; }
.sheet.is-small > * { transform-origin: 0 0; }
.decide { display: flex; flex-direction: column; gap: 10px; }
.q { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--ms-border); border-left: 3px solid var(--ms-warn); border-radius: var(--ms-r); }
.q .q1 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.q b { font-weight: 500; font-size: var(--ms-fs-sm); }
.q b em { font-style: normal; color: var(--ms-warn); }
.q small { font-size: var(--ms-fs-xs); color: var(--ms-muted); text-align: right; }
.loupe { height: 54px; border: 1px solid var(--ms-border-strong); border-radius: 6px; overflow: hidden; position: relative; background: var(--ms-surface); }
.loupe .sheet { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; }
.q .bs { display: flex; gap: 6px; flex-wrap: wrap; }
.q.is-done { border-left-color: var(--ms-ok); }
.q.is-done b em { color: var(--ms-ok); }
.q.is-done .loupe, .q.is-done .bs, .q.is-done small { display: none; }
.more { display: flex; align-items: center; gap: 8px; padding: 4px 4px 0; font-size: var(--ms-fs-sm); color: var(--ms-muted); }
.more b { font-weight: 500; color: var(--ms-ok); }
.more a { margin-left: auto; cursor: pointer; }
.fields { border-top: 1px solid var(--ms-row-line); }
.field { display: grid; grid-template-columns: 96px minmax(0, 1fr) 18px; gap: 10px; align-items: baseline; padding: 6px 4px; border-bottom: 1px solid var(--ms-row-line); font-size: var(--ms-fs-sm); border-radius: 6px; }
.field:hover { background: var(--ms-bg); }
.field .k { color: var(--ms-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field .v { font-weight: 500; min-width: 0; }
.field .c { font-size: 12px; text-align: right; color: var(--ms-ok); }
.doc-acts { display: flex; gap: 8px; align-items: center; padding: 12px 16px 14px; border-top: 1px solid var(--ms-border); }
.doc-acts .spacer { flex: 1; }
.doc-acts .btn.is-primary { min-width: 104px; }
.doc-note { font-size: var(--ms-fs-xs); color: var(--ms-muted); }
.toobig { padding: 18px 16px; display: flex; flex-direction: column; gap: 8px; }
.toobig b { font-weight: 500; }
.toobig p { margin: 0; font-size: var(--ms-fs-sm); color: var(--ms-muted); }
.src { position: relative; border-bottom: 1px dotted var(--ms-border-strong); cursor: help; }
.src:hover, .src:focus { border-bottom-color: var(--ms-accent); }
.src:hover::after, .src:focus::after { content: attr(data-src); position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 5; white-space: nowrap; font-size: var(--ms-fs-xs); font-weight: 400; color: var(--ms-accent-text); background: var(--ms-text); padding: 5px 8px; border-radius: 6px; pointer-events: none; }

/* ---------- The full review, for what is too big for the island ---------- */
.full { display: flex; flex-direction: column; gap: 18px; }
.full-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.full-h h2 { margin: 4px 0 0; font-size: 26px; font-weight: 300; letter-spacing: -0.02em; }
.full-h p { margin: 6px 0 0; color: var(--ms-text-3); font-size: var(--ms-fs-md); }
.table { background: var(--ms-surface); border: 1px solid var(--ms-border); border-radius: var(--ms-r-lg); overflow-x: auto; overflow-y: hidden; }
.tr { display: grid; grid-template-columns: minmax(140px, 1.4fr) minmax(120px, 1fr) minmax(120px, 1fr) 70px 110px; gap: 16px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--ms-row-line); font-size: var(--ms-fs-sm); }
.tr:last-child { border-bottom: 0; }
.tr.th { font-size: var(--ms-fs-xs); color: var(--ms-muted); border-bottom-color: var(--ms-border); padding-block: 10px; }
.tr .ok { color: var(--ms-ok); }
.tr .r { text-align: right; }
.tr .more-rows { grid-column: 1 / -1; color: var(--ms-muted); }
.backdrop { display: none; }

.island-h { display: none; }
.peek { display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--island); color: var(--ms-accent-text); border-radius: var(--ms-r-lg); cursor: pointer; border: 0; width: 100%; text-align: left; font: inherit; }
.peek b { font-weight: 500; } .peek small { color: rgba(255,255,255,.7); font-size: var(--ms-fs-xs); }
.peek .big { font-size: 22px; font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .main { grid-column: 1 / -1; }
  .island { position: fixed; top: 0; right: 0; height: 100vh; max-height: none; width: min(440px, 100% - 48px); z-index: 20; transform: translateX(100%); transition: transform .22s ease; background: var(--ms-bg); padding: 0 16px 16px; overflow: auto; border-left: 1px solid var(--ms-border); }
  .island-h { display: flex; position: sticky; top: 0; z-index: 1; margin: 0 -16px 0; padding: 10px 10px 10px 16px; align-items: center; justify-content: space-between; background: var(--ms-bg); border-bottom: 1px solid var(--ms-border); font-weight: 500; font-size: var(--ms-fs-sm); }
  .island-h .btn { height: 36px; width: 36px; padding: 0; }
  .island.is-open { transform: none; }
  .doc-close { display: inline-flex; }
  .backdrop { display: block; position: fixed; inset: 0; background: rgba(27,27,35,.28); z-index: 19; opacity: 0; pointer-events: none; transition: opacity .22s; }
  .backdrop.is-open { opacity: 1; pointer-events: auto; }
  .peek { display: flex; }
}
@media (max-width: 639px) {
  :root { --gutter: 16px; }
  .app { display: block; }
  .rail { position: sticky; top: 0; z-index: 10; height: auto; flex-direction: row; align-items: center; gap: 12px; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--ms-border); }
  .rail .nav, .rail .nav-label, .rail .rail-jobs, .rail .rail-foot { display: none; }
  .topbar-only { display: flex; margin-left: auto; align-items: center; gap: 10px; }
  .menu-btn { height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--ms-border-strong); background: var(--ms-surface); font: 500 13px var(--ms-font); color: var(--ms-text); cursor: pointer; }
  .topbar-only .sync { padding: 0; }
  .content { padding-top: 20px; display: flex; flex-direction: column; }
  .content > .main { width: 100%; min-width: 0; } .content > .island { min-width: 0; }
  .greet, .job-head h1 { font-size: 28px; }
  .entry:not(.tt-row), .entry.is-job { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .mark, .entry .path { display: none; }
  .entry.is-job { grid-template-columns: minmax(0, 1fr); }
  .e-side { flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; text-align: left; }
  .e-left { font-size: 20px; }
  .e-name { font-size: 18px; } .e-title { font-size: 16px; }
  .sec-h .hint { display: none; }
  .job-head .primary { align-items: flex-start; }
  .dec { visibility: visible; }
  .e-side.acts { flex-wrap: wrap; }
  .qrow { grid-template-columns: minmax(0, 1fr) auto; margin-left: 0; padding-left: 12px; }
  .qrow .qbs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
  .qrow.is-done .ans, .qrow .open { grid-column: 1 / -1; }
  .qrow .rowdet .dl { columns: 1; }
  .pf .qs li .rowdet .dl { columns: 1; }
  .full .tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 48px; } .full .tr > :nth-child(2), .full .tr > :nth-child(5) { display: none; }
}


/* ---- 2. parts ---- */
/* ==== parts the site needs beyond today-v2: forms, cards, tabs, tables, drawer, toast, the site, the portal, bare ==== */
/* layout modes */
.content.is-wide { display: block; max-width: 1280px; }
.content.is-wide .main { display: flex; flex-direction: column; gap: 30px; }
.content.is-tt .main { display: flex; flex-direction: column; gap: 30px; }
.nav-item.is-quiet { color: var(--ms-muted); font-size: var(--ms-fs-sm); }
.who { color: inherit; } .who:hover b { color: var(--ms-accent); }
.viewas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 0 4px; font-size: 11px; color: var(--ms-muted); }
.viewas span { margin-right: 2px; }
.viewas button, .viewas a { height: 20px; padding: 0 7px; border-radius: 6px; border: 1px solid var(--ms-border-strong); background: var(--ms-surface); font: 500 11px/18px var(--ms-font); color: var(--ms-text-3); cursor: pointer; }
.viewas button.is-on { background: var(--ms-accent); border-color: var(--ms-accent); color: var(--ms-accent-text); }
.viewas a:hover, .viewas button:hover { border-color: var(--ms-accent); color: var(--ms-accent); } .viewas button.is-on:hover { color: var(--ms-accent-text); }
.topbar-only .avatar { text-decoration: none; }
/* page head (the eyebrow · h1 · lead · the one primary at the right), the timetable's type */
.ph { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.ph .t { min-width: 0; flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; }
.ph .acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ph .t > .lead { max-width: 740px; } /* the page header stacks: title, then the lead under it at a reading width (Vlad, Nov 9: the title-left / lead-right header "seems odd") */
/* the full width, tidy and even (Vlad, Nov 6: "it looks like I chopped half the text"): from 900px up, a one-block section (.ws-split) puts its heading on the left and the text on the right; For crew's SIN section puts the quote on the left and the paragraphs on the right. Phones stay one column. */
@media (min-width: 900px) {
  .ws-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 56px; align-items: baseline; } .ws-split > h2 { margin: 0; } .ws-split .p { max-width: 72ch; }
  .ws-qs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 56px; align-items: start; } .ws-qs .p { max-width: 72ch; }
}
.ws-qs > div > .p + .p { margin-top: 12px; } @media (max-width: 899px) { .ws-qs > div { margin-top: 16px; } }
.eyebrow-m { font: 500 var(--fs-label)/1.4 var(--ms-font); letter-spacing: .01em; color: var(--ms-text-3); }
.h1 { margin: 0; font-size: var(--fs-title); font-weight: 400; letter-spacing: -0.025em; line-height: 1.15; color: var(--text); text-wrap: balance; }
.h1 b { font-weight: 500; }
.lead { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-2); max-width: 60ch; }
.lead b { font-weight: 500; color: var(--text); } .lead .red { font-weight: 500; color: var(--red); }
.h2 { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.h2 .n { color: var(--muted); } .h2 .r { margin-left: auto; letter-spacing: 0; text-transform: none; font-family: var(--ms-font); font-size: var(--ms-fs-xs); }
.h2 .r a, .h2 .r button { font: 500 12px var(--ms-font); color: var(--ms-accent); background: none; border: 0; padding: 0; cursor: pointer; }
.sec { display: flex; flex-direction: column; gap: 12px; }
.p { margin: 0; font-size: var(--ms-fs-md); line-height: 1.55; color: var(--ms-text-2); max-width: 64ch; }
.p b { font-weight: 500; color: var(--ms-text); }
.small { font-size: var(--ms-fs-xs); color: var(--ms-muted); }
.mono { font-family: var(--mono); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.site-m p + .row { margin-top: 14px; }   /* a button row after a paragraph breathes (For crew's Who to ask) */
.spacer { flex: 1; }
.btn.is-danger { border-color: transparent; background: var(--ms-danger); color: var(--ms-accent-text); } .btn.is-danger:hover { background: var(--ms-danger-hover); }
.btn.is-link { border-color: transparent; background: transparent; color: var(--ms-accent); padding: 0 4px; } .btn.is-link:hover { text-decoration: underline; background: none; }
.btn.is-ghost { border-color: var(--ms-accent); color: var(--ms-accent); } .btn.is-ghost:hover { background: var(--ms-info-bg); }
.pill.is-warn { background: var(--ms-warn-bg); color: var(--ms-warn); } .pill.is-danger { background: var(--ms-danger-bg); color: var(--ms-danger); } .pill.is-info { background: var(--ms-info-bg); color: var(--ms-accent); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ms-border-strong); margin-right: 6px; vertical-align: 1px; }
.dot.is-red { background: var(--ms-danger); } .dot.is-amber { background: var(--ms-warn); } .dot.is-green { background: var(--ms-ok); } .dot.is-navy { background: var(--ms-accent); }
/* cards: one level only; a card holds rows, never cards */
.card { background: var(--ms-surface); border: 1px solid var(--ms-border); border-radius: var(--ms-r-lg); min-width: 0; }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 16px 10px; border-bottom: 1px solid var(--ms-border); }
.card-h b { font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ms-muted); }
.card-h small { font-size: var(--ms-fs-xs); color: var(--ms-muted); }
.card-h .r { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.card-b { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.card-f { padding: 10px 16px 12px; border-top: 1px solid var(--ms-border); display: flex; align-items: center; gap: 10px; font-size: var(--ms-fs-sm); color: var(--ms-muted); }
.card.is-flat { border: 0; background: transparent; }
.notice { padding: 12px 14px; border: 1px solid var(--ms-border); border-left: 3px solid var(--ms-accent); border-radius: var(--ms-r); background: var(--ms-surface); font-size: var(--ms-fs-sm); color: var(--ms-text-2); }
.notice.is-warn { border-left-color: var(--ms-warn); } .notice.is-danger { border-left-color: var(--ms-danger); } .notice.is-ok { border-left-color: var(--ms-ok); }
.notice b { font-weight: 500; color: var(--ms-text); }
/* tabs (the job's and the settings') */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs.is-scroll, .table-wrap.is-scroll { -webkit-mask-image: linear-gradient(90deg, var(--ms-text) calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, var(--ms-text) calc(100% - 40px), transparent); }
.tabs a { flex: none; padding: 10px 12px; font-size: var(--ms-fs-sm); font-weight: 500; color: var(--ms-text-3); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--ms-text); } .tabs a.is-active { color: var(--ms-accent); border-bottom-color: var(--ms-accent); }
.tabs a .n { margin-left: 6px; font-size: 11px; color: var(--ms-muted); } .tabs a .n.is-red { color: var(--ms-danger); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.seg.is-wrap { flex-wrap: wrap; max-width: 100%; } .seg.is-wrap button { border-bottom: 1px solid var(--line); margin-bottom: -1px; }
.seg button, .seg a { height: 32px; padding: 0 12px; border: 0; background: var(--surface); font: 500 13px/32px var(--ms-font); color: var(--text-2); cursor: pointer; }
.seg > * + * { border-left: 1px solid var(--line); }
.seg .is-on { background: var(--accent); color: var(--ms-accent-text); }
/* forms: a mono uppercase label over the control, like New job */
.form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.form.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form.is-1 { grid-template-columns: minmax(0, 1fr); } .form.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fld { display: flex; flex-direction: column; gap: 4px; font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); min-width: 0; }
.fld.span2 { grid-column: span 2; } .fld.span3 { grid-column: span 3; } .fld.full { grid-column: 1 / -1; }
.fld input, .fld select, .fld textarea { height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; font: 400 14px var(--ms-font); color: var(--text); background: var(--surface); min-width: 0; letter-spacing: 0; text-transform: none; }
.fld textarea { height: auto; min-height: 84px; padding: 8px 10px; line-height: 1.4; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ms-info-bg); }
.fld input:disabled, .fld select:disabled { background: var(--ms-surface-2); color: var(--ms-muted); }
.fld small { font: 400 12px var(--ms-font); letter-spacing: 0; text-transform: none; color: var(--muted); }
.fld .err { font: 400 12px var(--ms-font); letter-spacing: 0; text-transform: none; color: var(--red); }
.fld.is-err input, .fld.is-err select, .fld.is-err textarea { border-color: var(--red); }
.fld input[aria-invalid="true"], .fld select[aria-invalid="true"], .fld textarea[aria-invalid="true"] { border-color: var(--red); }
.form-h { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; font: 500 13px var(--ms-font); color: var(--text); padding-top: 8px; border-top: 1px solid var(--line); margin-top: 4px; }
.form-h:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.form-h small { font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.form-acts { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; padding-top: 4px; }
.form-acts small { margin-left: auto; font-size: 12px; color: var(--muted); }
.ws-contact noscript .notice { margin: 0 0 12px; }
.sw { display: flex; align-items: center; gap: 12px; cursor: pointer; font: inherit; letter-spacing: 0; text-transform: none; }
.sw input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sw .tg { flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--ms-border-strong); position: relative; transition: background .15s; }
.sw .tg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ms-accent-text); transition: transform .15s; }
.sw input:checked + .tg { background: var(--accent); } .sw input:checked + .tg::after { transform: translateX(14px); }
.sw input:focus-visible + .tg { outline: 2px solid var(--accent); outline-offset: 2px; }
.sw .t { display: flex; flex-direction: column; min-width: 0; } .sw .t b { font-size: 14px; font-weight: 500; color: var(--text); } .sw .t small { font-size: 12px; color: var(--muted); }
.chk { display: flex; align-items: center; gap: 10px; cursor: pointer; font: 400 14px var(--ms-font); letter-spacing: 0; text-transform: none; color: var(--text); }
.chk input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.opts2 { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.opts2 label { display: block; cursor: pointer; } .opts2 input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.opts2 span { display: block; padding: 0 12px; height: 32px; font: 500 13px/32px var(--ms-font); color: var(--text-2); background: var(--surface); }
.opts2 label + label span { border-left: 1px solid var(--line); } .opts2 input:checked + span { background: var(--accent); color: var(--ms-accent-text); }
.opts2 input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.upload input:focus-visible ~ .fn, .upload:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.upload { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px dashed var(--faint); border-radius: 10px; cursor: pointer; font: inherit; letter-spacing: 0; text-transform: none; color: var(--text); background: var(--surface); }
.upload:hover { border-color: var(--accent); } .upload.is-set { border-style: solid; border-color: color-mix(in srgb, var(--green) 50%, transparent); }
.upload .fl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .upload .fl b { font-size: 14px; font-weight: 500; } .upload .fl small { font-size: 12px; color: var(--muted); }
.upload .fn { flex: none; font: 500 12px var(--ms-font); color: var(--accent); white-space: nowrap; max-width: 40%; overflow: hidden; text-overflow: ellipsis; } .upload.is-set .fn { color: var(--green); }
.upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.kbd { font: 500 11px/1 var(--ms-font); padding: 2px 5px; border: 1px solid var(--ms-border-strong); border-radius: 5px; background: var(--ms-surface); }
/* the grid table (set --cols) */
.table .tr { grid-template-columns: var(--cols, minmax(140px, 1.4fr) minmax(120px, 1fr) minmax(120px, 1fr) 70px 110px); }
.table .tr.is-link { cursor: pointer; } .table .tr.is-link:hover { background: var(--hover); }
.table .tr .r.num, .table .tr .num { font-variant-numeric: tabular-nums; }
.table .tr.is-muted > * { color: var(--ms-muted); }
.table .tr.is-sel { background: var(--ms-surface-2); }
.table .tr.is-sum { font-weight: 500; border-top: 1px solid var(--ms-border); }
.table-wrap { overflow-x: auto; }
.who-cell { display: flex; align-items: center; gap: 10px; min-width: 0; } .who-cell .avatar { width: 28px; height: 28px; font-size: 11px; } .who-cell b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .who-cell small { display: block; font-size: var(--ms-fs-xs); color: var(--ms-muted); }
/* big figures */
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; background: var(--ms-surface); border: 1px solid var(--ms-border); border-radius: var(--ms-r-lg); overflow: hidden; }
.fig { padding: 12px 16px; border-right: 1px solid var(--ms-border); min-width: 0; } .fig:last-child { border-right: 0; }
.fig small { display: block; font-size: var(--ms-fs-xs); color: var(--ms-muted); }
.fig b { display: block; font-size: 24px; font-weight: 300; letter-spacing: -0.02em; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fig b em { font-style: normal; font-size: var(--ms-fs-sm); color: var(--ms-muted); font-weight: 400; margin-left: 3px; }
.fig.is-red b { color: var(--ms-danger); } .fig.is-amber b { color: var(--ms-warn); } .fig.is-green b { color: var(--ms-ok); } .fig.is-navy b { color: var(--ms-accent); }
.hero-num { font-size: 44px; font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.hero-num small { font-size: var(--ms-fs-md); font-weight: 400; color: var(--ms-muted); margin-left: 4px; letter-spacing: 0; }
.hero-num .cents { color: var(--ms-muted); }
.bar { height: 6px; border-radius: 3px; background: var(--ms-surface-3); overflow: hidden; } .bar > span { display: block; height: 100%; background: var(--ms-accent); border-radius: 3px; }
.bar.is-warn > span { background: var(--ms-warn); } .bar.is-ok > span { background: var(--ms-ok); }
/* empty states and the toast */
.empty-state { padding: 28px 16px; text-align: center; color: var(--ms-muted); font-size: var(--ms-fs-sm); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.empty-state b { font-size: var(--ms-fs-md); font-weight: 500; color: var(--ms-text-2); }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; pointer-events: none; max-width: calc(100% - 32px); }
.toast { display: inline-flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 10px; background: var(--ms-text); color: var(--ms-accent-text); font-size: var(--ms-fs-sm); font-weight: 500; box-shadow: 0 6px 24px rgba(27,27,35,.18); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.toast .undo { pointer-events: auto; height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: var(--ms-accent-text); font: 500 12px var(--ms-font); cursor: pointer; } .toast .undo:hover { background: rgba(255,255,255,.12); }
.toast.is-ok { background: var(--ms-ok); } .toast.is-danger { background: var(--ms-danger); }
.confirm { display: flex; flex-direction: column; gap: 14px; font-size: var(--ms-fs-md); color: var(--ms-text-2); }
.confirm b { font-weight: 500; color: var(--ms-text); }
.confirm-acts { display: flex; gap: 8px; padding-top: 6px; }
.backdrop { display: block; position: fixed; inset: 0; background: rgba(27,27,35,.28); z-index: 19; opacity: 0; pointer-events: none; transition: opacity .22s; }
.backdrop.is-open { opacity: 1; pointer-events: auto; }
.tsp-h small { font-weight: 400; }
/* a link inside running text is underlined; a navy word in grey text is not enough on its own */
p a:not(.btn), small a, .muted a, .lead a, .p a, .prose a, .snips a, .empty a, .empty-state a, .notice a, .card-f a, .fu-more a, .pf-f a, .ans a, .st a, .e-did a, .tt-fact a, .site-f nav a, .portal-f a, .help-foot a, .list a.lnk, a.lnk { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--ms-border-strong); }
p a:not(.btn):hover, .muted a:hover, a.lnk:hover { text-decoration-color: currentColor; }
/* hover-only row actions: .hv shows on hover, focus, selection and on any touch screen */
.hv { opacity: 0; transition: opacity .12s; } *:hover > .hv, *:focus-within > .hv, .is-sel > .hv, .is-selected > .hv { opacity: 1; }
@media (hover: none) { .hv { opacity: 1; } }
/* the chip back to the app while viewing as the crew or the public site */
.back-app { position: fixed; left: 12px; bottom: 12px; z-index: 40; height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ms-border-strong); background: var(--ms-surface); color: var(--ms-text-2); font: 500 12px/28px var(--ms-font); }
.back-app:hover { border-color: var(--ms-accent); color: var(--ms-accent); }
/* the rail, drawn inside the phone menu */
.rail-menu { display: flex; flex-direction: column; gap: 20px; } .rail-menu .brand { display: none; } .rail-menu .viewas { display: flex; } .rail-menu .rail-jobs { overflow: visible; }
/* the public site */
.site { min-height: 100vh; display: flex; flex-direction: column; background: var(--ms-surface); overflow-x: clip; }
.site-h { display: flex; align-items: center; gap: 32px; padding: 18px max(var(--site-pad), env(safe-area-inset-right, 0px)) 18px max(var(--site-pad), env(safe-area-inset-left, 0px)); max-width: var(--site-w); width: 100%; margin: 0 auto; }
.site-nav { display: flex; gap: 24px; font-size: var(--ms-fs); font-weight: 500; }
.site-nav a { color: var(--ms-text-2); } .site-nav a:hover, .site-nav a.is-active { color: var(--ms-accent); }
.site-acts { margin-left: auto; display: flex; gap: 8px; } .site-acts .btn { display: inline-flex; align-items: center; }
/* the phone menu: a bordered button that opens the three links under the header (hidden above 639px) */
.site-menu { display: none; width: 40px; height: 40px; padding: 0; border-radius: 9px; border: 1px solid var(--ms-border-strong); background: var(--ms-surface); cursor: pointer; place-items: center; flex: none; }
.site-menu span, .site-menu span::before, .site-menu span::after { display: block; width: 16px; height: 2px; border-radius: 1px; background: var(--ms-text); content: ""; position: relative; }
.site-menu span::before { position: absolute; top: -5px; } .site-menu span::after { position: absolute; top: 5px; }
.site-menu:hover { background: var(--ms-surface-2); }
.site-h.is-open .site-menu span { background: transparent; } .site-h.is-open .site-menu span::before { top: 0; transform: rotate(45deg); } .site-h.is-open .site-menu span::after { top: 0; transform: rotate(-45deg); }
.site-m { flex: 1; width: 100%; max-width: var(--site-w); margin: 0 auto; padding: 24px max(var(--site-pad), env(safe-area-inset-right, 0px)) 80px max(var(--site-pad), env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 56px; }
/* the footer: its rule as wide as the content, the brand line and the links on one centre line, no underlines */
.site-f { width: calc(100% - 2 * var(--site-pad)); max-width: calc(var(--site-w) - 2 * var(--site-pad)); margin: 0 auto; padding: 28px 0 32px; border-top: 1px solid var(--ms-border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-size: var(--fs-small); color: var(--ms-text-3); }
.site-f-brand { display: flex; align-items: center; gap: 8px; min-width: 0; } .site-f-brand .brand-mark { width: 18px; height: 18px; }
.site-f nav { display: flex; flex-wrap: wrap; gap: 0 18px; } .site-f nav a { display: inline-block; padding: 10px 0; line-height: 18px; color: var(--ms-text-3); text-decoration: none; } .site-f nav a:hover { color: var(--ms-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--ms-border-strong); } .site-f nav a.is-active { color: var(--ms-text); font-weight: 500; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 32px; }
.hero h1 { margin: 0; font-size: var(--fs-h1); font-weight: 300; letter-spacing: -0.03em; line-height: 1.06; text-wrap: balance; }
.hero h1 b { font-weight: 500; color: var(--ms-accent); }
.hero p { font-size: var(--fs-lead); line-height: 1.55; color: var(--ms-text-2); max-width: 50ch; margin: 20px 0 0; text-wrap: pretty; } /* pretty: no one-word last line (round four, 6 Nov; the HTML also binds "sure of") */
.hero .acts { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; } .hero .acts .btn { display: inline-flex; align-items: center; }
.hero .ws-car { margin-top: calc(var(--fs-label) * 1.4 + 18px); } /* the frame starts on the headline's line, under the eyebrow */
.site-sec h2 { margin: 0 0 28px; font-size: var(--fs-h2); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.site-sec h2 b { font-weight: 500; }
.prose { max-width: 68ch; font-size: var(--ms-fs-md); line-height: 1.6; color: var(--ms-text-2); }
.prose h1 { font-size: var(--fs-title); font-weight: 400; letter-spacing: -0.025em; margin: 0 0 6px; color: var(--ms-text); } .prose h2 { font-size: 18px; font-weight: 500; margin: 28px 0 8px; color: var(--ms-text); } .prose p { margin: 0 0 12px; } .prose ul { padding-left: 20px; margin: 0 0 12px; } .prose li { margin-bottom: 4px; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan { border: 1px solid var(--ms-border); border-radius: var(--ms-r-lg); padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 10px; background: var(--ms-surface); }
.plan.is-main { border-color: var(--ms-accent); }
.plan .k { font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.plan .price { font-size: 34px; font-weight: 300; letter-spacing: -0.03em; } .plan .price small { font-size: var(--ms-fs-sm); color: var(--ms-muted); margin-left: 4px; }
.plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--ms-fs-sm); color: var(--ms-text-2); }
.plan ul li::before { content: "✓ "; color: var(--ms-ok); }
/* the crew's portal: a narrow column in the company's name */
.portal { min-height: 100vh; background: var(--ms-bg); display: flex; flex-direction: column; align-items: center; padding: 28px max(16px, env(safe-area-inset-left, 0px)) 48px; }
.portal-h { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 560px; font-weight: 600; } .portal-brand { font-size: var(--ms-fs-md); }
.portal-eyebrow { margin-left: auto; font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.portal-m { width: 100%; max-width: 560px; margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.portal-f { width: 100%; max-width: 560px; margin-top: 24px; font-size: var(--ms-fs-xs); color: var(--ms-muted); text-align: center; }
/* bare: sign-in, errors */
.bare { min-height: 100vh; background: var(--ms-bg); display: grid; place-items: center; padding: 24px max(16px, env(safe-area-inset-left, 0px)); }
.bare-m { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; }
.bare-m .brand { justify-content: center; margin-bottom: 8px; }
.bare .card-b { gap: 14px; }
@media (max-width: 900px) { .hero, .plans { grid-template-columns: 1fr; } .hero { gap: 40px; } .hero > div:first-child { max-width: 640px; } .hero .ws-car { margin-top: 0; } .ws-showcase .ws-mock .rv > span:nth-child(2), .ws-showcase .ws-mock .rv > span:nth-child(6) { white-space: normal; overflow: visible; text-overflow: clip; } .form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .form, .form.is-2, .form.is-3 { grid-template-columns: minmax(0, 1fr); } .fld.span2, .fld.span3 { grid-column: 1 / -1; } .site-h, .site-m { padding-left: max(var(--site-pad-m), env(safe-area-inset-left, 0px)); padding-right: max(var(--site-pad-m), env(safe-area-inset-right, 0px)); } .site-f { width: calc(100% - 2 * var(--site-pad-m)); } .site-h { flex-wrap: wrap; gap: 10px; padding-top: 12px; padding-bottom: 12px; } .site-h .site-acts { margin-left: auto; } .site-menu { display: grid; } .site-nav { display: none; order: 3; flex-basis: 100%; flex-direction: column; gap: 0; border-top: 1px solid var(--ms-border); margin-top: 2px; padding: 4px 0 6px; } .site-h.is-open .site-nav { display: flex; } .site-nav a { display: block; padding: 12px 0; line-height: 20px; font-size: var(--fs-body); } .hero h1 { font-size: var(--fs-h1-m); } .hero p { font-size: var(--ms-fs-md); } .site-sec h2 { font-size: var(--fs-h2-m); } .h1, .prose h1 { font-size: var(--fs-title-m); } .figs { grid-template-columns: 1fr 1fr; } .fig:nth-child(2n) { border-right: 0; } .fig { border-bottom: 1px solid var(--ms-border); } .viewas { display: none; } }

@media (max-width: 639px) {
  .btn.is-sm, .pf .pr button, .qb.ico, .dec, .seg button, .seg a { position: relative; }
  .btn.is-sm::after, .pf .pr button::after, .qb.ico::after, .dec::after, .seg button::after, .seg a::after { content: ""; position: absolute; inset: -7px; }
  .pf .pr button::after { inset: -9px; }
}
@media print { .rail, .viewas, #toast, .backdrop, #drawer, .tabs { display: none !important; } .app { display: block; } .content { padding: 0; max-width: none; } body { background: var(--ms-surface); } }

/* round two (B, 20-job): the island's "Recorded · Wrap is processing" pod and the desk's ring across the running jobs */
.pod.pod-proc .big { font-size: 36px; margin-top: 0; }
.pod.pod-proc .what { margin-top: 6px; }
.pod.pod-proc .row2 { align-items: baseline; }
.pod.pod-proc .proc-bar { max-width: none; margin-top: 6px; }
.pod.pod-proc.is-done .big { font-size: 44px; margin-top: 6px; }
.pod.pod-proc.is-done .k { color: rgba(255,255,255,.62); }
.proc-ring .inout { border-top: 0; }
.proc-ring .ring .track { stroke: var(--ms-surface-3); }
.proc-ring .ring .in { stroke: var(--ms-accent); transition: stroke-dasharray 1s linear; }
.proc-ring .list .l { display: flex; flex-direction: column; gap: 1px; min-width: 0; color: var(--ms-text); }
.proc-ring .list .l small { margin-left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proc-ring .list .r b { font-weight: 500; color: var(--ms-text); }
.proc-ring .list .r b.c-green { color: var(--ms-ok); }


/* ---- 3. the site pages ---- */
/* the landing's rhythm: sections alternate white and the page tint, with ~112px between them on the desktop and ~72px on a phone */
.site-m.is-landing { gap: 0; padding-top: 0; padding-bottom: 0; }
.is-landing > section, .is-landing > .ws-band-sec { padding: calc(var(--sec-gap) / 2) 0; }
.is-landing > .hero { padding-top: 48px; }
.is-landing > .ws-band-sec { padding-bottom: var(--sec-gap); }
.is-tint { position: relative; isolation: isolate; }
.is-tint::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--ms-bg); z-index: -1; }
/* the hero's eyebrow: two parts that each stay whole, so a break can only fall at the dot */
.ws-eb { display: block; margin-bottom: 18px; } .ws-eb > span { white-space: nowrap; }
/* the carousel inside a product frame: a window bar, the screens, then the captions and the controls under it */
.ws-car { min-width: 0; outline: none; display: flex; flex-direction: column; gap: 18px; }
.ws-car:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 6px; border-radius: var(--ms-r-sm); }
.ws-frame { border: 1px solid var(--ms-border); border-radius: var(--ms-r-lg); background: var(--ms-surface); box-shadow: var(--shadow-frame); overflow: hidden; min-width: 0; }
.ws-frame-bar { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; background: var(--ms-bg); border-bottom: 1px solid var(--ms-border); }
.ws-frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--ms-border-strong); flex: none; }
.ws-frame-bar::after { content: ""; width: 42px; flex: none; }
.ws-frame-bar > span { margin: 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 12px; border-radius: var(--ms-r-sm); border: 1px solid var(--ms-border); background: var(--ms-surface); font: 500 var(--ms-fs-xs)/1 var(--ms-font); color: var(--ms-text-3); white-space: nowrap; }
.ws-frame-bar > span .brand-mark { width: 14px; height: 14px; }
.ws-car-vp { overflow: hidden; }
.ws-car-tr { display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; transform: translateX(calc(var(--i, 0) * -100%)); transition: transform .4s ease; }
.ws-slide { flex: 0 0 100%; min-width: 0; display: flex; }
.ws-slide .ws-mock { flex: 1; }
/* one caption per slide, all in one grid cell, so the block keeps the tallest caption's height and nothing jumps */
.ws-caps { display: grid; margin: 0; padding: 0; list-style: none; }
.ws-caps li { grid-area: 1 / 1; visibility: hidden; display: flex; flex-direction: column; gap: 4px; }
.ws-caps li.is-on { visibility: visible; }
.ws-caps b { font-size: var(--fs-h4); font-weight: 500; color: var(--ms-text); } .ws-caps p { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--ms-text-2); }
.ws-car-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ws-car-nav .arrow { width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--ms-border-strong); background: var(--ms-surface); color: var(--ms-text-2); cursor: pointer; display: grid; place-items: center; flex: none; }
.ws-car-nav .arrow svg { width: 16px; height: 16px; display: block; } .ws-car-nav .arrow path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ws-car-nav .arrow:hover { border-color: var(--ms-accent); color: var(--ms-accent); background: var(--ms-info-bg); }
.ws-car-nav .arrow:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 2px; }
/* the dots: each a 32px square tap target with the 8px dot centred, side by side with no overlap */
.ws-car-nav .dots { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; } .ws-car-nav .dots li { flex: none; }
.ws-car-nav .dots button { display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.ws-car-nav .dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--ms-text-3); background: transparent; transition: transform .15s, background .15s; }
.ws-car-nav .dots button:hover::before { border-color: var(--ms-accent); transform: scale(1.3); }
.ws-car-nav .dots button.is-on::before { background: var(--ms-accent); border-color: var(--ms-accent); }
.ws-car-nav .dots button:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: -2px; }
/* the screens: CSS-drawn, no fixed height (the track stretches every slide to the tallest), mono for data only */
.ws-mock { padding: 10px 16px 12px; background: var(--ms-surface); display: flex; flex-direction: column; font-size: var(--fs-mock); line-height: 1.4; color: var(--ms-text-2); min-width: 0; }
.ws-mock .h { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0 5px; border-bottom: 1px solid var(--ms-border); font: 500 var(--fs-mock-sm)/1.4 var(--ms-font); color: var(--ms-text-3); }
.ws-mock .h > span:last-child { font-family: var(--mono); font-weight: 400; white-space: nowrap; }
.ws-mock .h + .h { margin-top: 6px; }
.ws-mock .r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--ms-row-line); }
.ws-mock .r > span { min-width: 0; } .ws-mock .r > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-mock .r b { font-weight: 500; color: var(--ms-text); } .ws-mock .r small { color: var(--ms-text-3); margin-left: 6px; font-size: var(--fs-mock-sm); }
.ws-mock .m { font: 400 var(--fs-mock-sm)/1.4 var(--mono); color: var(--ms-text-3); white-space: nowrap; } .ws-mock .r.is-red .m { color: var(--ms-danger); font-weight: 500; } .ws-mock .r.is-amber .m { color: var(--ms-warn); font-weight: 500; } .ws-mock .r.is-ok .m { color: var(--ms-ok); }
.ws-mock .r.cr { border-left: 3px solid transparent; padding-left: 10px; margin-left: -13px; }
.ws-mock .r.cr.is-in { background: var(--ms-ok-bg); border-left-color: var(--ms-ok); } .ws-mock .r.cr.is-in .m { color: var(--ms-ok); font-weight: 500; } .ws-mock .r.cr.is-miss { border-left-color: var(--ms-danger); }
/* the questions: a card with its own inner padding, the meta line left-aligned and free to wrap */
.ws-mock .q { padding: 8px 10px 9px 12px; margin-top: 8px; border: 1px solid var(--ms-border); border-left: 3px solid var(--ms-warn); border-radius: var(--ms-r-sm); }
.ws-mock .q b { display: block; font-weight: 500; color: var(--ms-text); } .ws-mock .q small { display: block; color: var(--ms-text-3); font-size: var(--fs-mock-sm); text-align: left; margin-top: 1px; } .ws-mock .q .opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ws-mock .q .opts span { border: 1px solid var(--ms-border-strong); border-radius: 6px; padding: 2px 9px; font-size: var(--fs-mock-sm); font-weight: 500; color: var(--ms-text-2); } .ws-mock .q .opts span.is-on { background: var(--ms-accent); border-color: var(--ms-accent); color: var(--ms-accent-text); }
/* the payroll log, as the budget prints it: all mono, it is a print */
.ws-mock.lg { font-family: var(--mono); font-size: var(--fs-mock-sm); } .ws-mock .lr { display: grid; grid-template-columns: minmax(0, 1.5fr) 34px 72px 62px 76px 36px; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--ms-row-line); font-variant-numeric: tabular-nums; }
.ws-mock .lr > span { min-width: 0; white-space: nowrap; } .ws-mock .lr > span:first-child { white-space: normal; overflow-wrap: anywhere; } .ws-mock .lr > span + span { text-align: right; } .ws-mock .lr.th { color: var(--ms-text-3); background: var(--ms-surface-3); padding: 4px 6px; margin: 8px -6px 0; border-bottom: 0; text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-mock-xs); }
.ws-mock .lr.tot { border-top: 1px solid var(--ms-border-strong); border-bottom: 0; font-weight: 500; color: var(--ms-text); } .ws-mock .lr.is-est { background: var(--ms-warn-bg); color: var(--ms-warn); }
.ws-mock .ttl { font: 500 var(--fs-mock)/1.4 var(--mono); color: var(--ms-text); letter-spacing: .04em; padding: 6px 0 0; } .ws-mock .ttl small { font-weight: 400; color: var(--ms-text-3); margin-left: 8px; }
.ws-mock .pk { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: auto; padding: 12px 0 4px; } .ws-mock .pk .go { border: 1px solid var(--ms-accent); color: var(--ms-accent); border-radius: 8px; padding: 5px 12px; font-weight: 500; font-size: var(--fs-mock); white-space: nowrap; } .ws-mock .pk .m { min-width: 0; white-space: normal; }
/* the review against the budget: line, position, Bid, Working, Actual */
.ws-mock .rv { display: grid; grid-template-columns: 32px minmax(0, 1fr) 60px 60px 64px; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--ms-row-line); font-variant-numeric: tabular-nums; }
.ws-mock .rv > span { min-width: 0; white-space: nowrap; } .ws-mock .rv > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; } .ws-mock .rv > span:first-child, .ws-mock .rv > span:nth-child(n+3) { font: 400 var(--fs-mock-sm)/1.4 var(--mono); color: var(--ms-text-2); } .ws-mock .rv > span:nth-child(n+3) { text-align: right; }
.ws-mock .rv.th > span { font: 500 var(--fs-mock-xs)/1.4 var(--ms-font); letter-spacing: .02em; color: var(--ms-text-3); } .ws-mock .rv.sec > span { color: var(--ms-text-3); font: 500 var(--fs-mock-sm)/1.4 var(--ms-font); padding-top: 6px; white-space: normal; }
.ws-mock .rv > span.over { color: var(--ms-danger); font-weight: 500; } .ws-mock .rv > span.warn { color: var(--ms-warn); font-weight: 500; } .ws-mock .rv .blank { color: var(--faint); }
/* the full-width showcase under the hero: the review table in its own frame, a sixth column for who is on the line */
@media (prefers-reduced-motion: reduce) { .ws-car-tr { transition: none; } }
/* how a job runs: four columns, each with a small coloured marker (the stage's colour on the landing, navy elsewhere) */
.ws-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.ws-steps .s { border-top: 1px solid var(--ms-border-strong); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.ws-steps .k { display: flex; align-items: center; gap: 8px; font: 500 var(--fs-label)/1.4 var(--ms-font); letter-spacing: .01em; color: var(--ms-text-3); }
.ws-steps .k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ms-accent); flex: none; }
.ws-steps.is-stages .s:nth-child(2) .k::before { background: var(--ms-ok); } .ws-steps.is-stages .s:nth-child(3) .k::before { background: var(--ms-warn); }
.ws-steps b { font-size: var(--fs-h4); font-weight: 500; } .ws-steps p { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--ms-text-2); }
.ws-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; }
.ws-two h3 { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--ms-border); font: 500 var(--fs-label)/1.4 var(--ms-font); letter-spacing: .01em; color: var(--ms-text-3); }
.ws-two ul { list-style: none; margin: 0; padding: 0; }
.ws-two li { padding: 11px 0; border-bottom: 1px solid var(--ms-row-line); font-size: var(--fs-body); line-height: 1.5; color: var(--ms-text-2); }
.ws-two li b { font-weight: 500; color: var(--ms-text); }
.ws-two code, .ws-tree, .ws-m { font-family: var(--mono); font-size: 13px; }
/* the numbers: the figure is the hero, the label under it; a navy rule at the left instead of a box */
.ws-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.ws-figs .fig { padding: 4px 0 4px 20px; border-left: 2px solid var(--ms-accent); min-width: 0; }
.ws-figs .fig b { display: block; font-size: var(--fs-fig); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--ms-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ws-figs .fig .l { display: block; margin-top: 12px; font-size: var(--fs-body); font-weight: 500; color: var(--ms-text); }
.ws-figs .fig small { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--ms-text-3); }
.ws-quote { margin: 0; max-width: 46ch; } .ws-quote p { margin: 0; font-size: 24px; font-weight: 300; line-height: 1.4; letter-spacing: -0.01em; color: var(--ms-text); text-wrap: balance; }
.ws-quote cite { display: block; margin-top: 12px; font: 500 var(--fs-label)/1.4 var(--ms-font); letter-spacing: .01em; color: var(--ms-text-3); font-style: normal; }
.ws-close { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; padding-top: 24px; border-top: 1px solid var(--ms-border); }
.ws-close p { margin: 0; font-size: var(--fs-h3); font-weight: 400; letter-spacing: -0.01em; }
.ws-close a { font-weight: 500; }
/* the closing band: navy, the headline, one large solid button */
.ws-band { border-radius: var(--ms-r-lg); background: var(--island); color: var(--ms-accent-text); padding: 64px 56px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.ws-band p { margin: 0; font-size: var(--fs-h2); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.ws-band .btn { display: inline-flex; align-items: center; }
.ws-seven { border-top: 1px solid var(--line); }
.ws-seven .r { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); gap: 8px 32px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.ws-seven .r.th { padding: 10px 0; font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ws-seven .n { display: flex; flex-direction: column; gap: 4px; } .ws-seven .n small { font: 400 11px/1.4 var(--mono); letter-spacing: .08em; color: var(--muted); } .ws-seven .n b { font-size: 17px; font-weight: 500; }
.ws-seven p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); } .ws-seven .lbl { display: none; }
.ws-seven .you p { color: var(--text); }
.ws-what .card { overflow: hidden; } /* Vlad, Nov 9: all three card headers navy */ .ws-what .card-h { --tone: var(--ms-accent); background: color-mix(in srgb, var(--tone) 10%, var(--ms-surface)); border-bottom-color: color-mix(in srgb, var(--tone) 30%, var(--ms-border)); } .ws-what .card-h b { color: var(--tone); font-weight: 500; }
.ws-demo { display: block; color: inherit; text-decoration: none; } .ws-demo:hover { border-color: var(--ms-accent); } .ws-demo .p { display: flex; justify-content: space-between; gap: 12px; color: var(--ms-text-2); } .ws-demo .go { color: var(--ms-accent); font-weight: 500; white-space: nowrap; } /* the Demos cards on What is WrapDesk? (Nov 13): each opens its demo on demos.html */
.ws-what { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 28px; } .ws-what .p { margin: 0; padding: 16px; max-width: none; } @media (max-width: 899px) { .ws-what { grid-template-columns: 1fr; } .ws-split > h2 { margin-bottom: 16px; } } /* What is WrapDesk? (Nov 9): the three blocks side by side, stacked under 900px */
.ws-tree { list-style: none; margin: 0; padding: 4px 0; }
.ws-acc > .p { max-width: none; margin-bottom: 20px; } /* What reaches accounting (Vlad, Nov 6: "extend it to the whole screen"): the lead runs the full width, with room before the file list */
.ws-tree li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 10px 16px; border-bottom: 1px solid var(--ms-row-line); align-items: baseline; }
.ws-tree li:last-child { border-bottom: 0; } .ws-tree .pth { color: var(--text); overflow-wrap: anywhere; } .ws-tree .d { font-family: var(--ms-font); font-size: 13px; color: var(--muted); }
.ws-tree li.in .pth { padding-left: 20px; }
.ws-rounds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ws-rounds .s { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.ws-rounds .s > b { font-size: 26px; font-weight: 300; letter-spacing: -0.02em; } .ws-rounds p b { font-weight: 500; color: var(--text); } .ws-rounds small { font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .ws-rounds p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.ws-rounds ul { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--text-2); } /* the round cards (Nov 6): Round 1's day-by-day timeline, the others' ticked lines */
.ws-tl li { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px; padding-left: 10px; border-left: 2px solid var(--ms-border-strong); } .ws-tl li span { font: 400 12px/1.6 var(--mono); color: var(--ms-text); }
.ws-ck li { position: relative; padding-left: 20px; } .ws-ck li::before { content: "✓"; position: absolute; left: 0; font-weight: 600; color: var(--ms-ok); }
.ws-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: 0; margin-right: 6px; } .ws-sw.g { background: var(--ms-ok-bg); border: 1px solid var(--ms-ok); } .ws-sw.o { background: var(--ms-warn-bg); border: 1px solid var(--ms-warn); }
/* pricing (4 Nov): three tier cards side by side (stacked on the phone), a slim 150+ row, the two rules under them, then the four billing points (the landing's step columns), the FAQ as a plain list of question and answer */
.ws-pricing { display: flex; flex-direction: column; gap: 0; }
.ws-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ws-tier { border: 1px solid var(--ms-border); border-radius: var(--ms-r-lg); background: var(--ms-surface); padding: 26px 28px 26px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ws-tier.is-main { border-color: var(--ms-accent); }
.ws-tier .k { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.01em; color: var(--ms-text); }
.ws-tier .tag { font: 500 var(--fs-small)/1 var(--ms-font); letter-spacing: 0; color: var(--ms-accent); background: var(--ms-info-bg); border-radius: var(--ms-r-pill); padding: 5px 10px; white-space: nowrap; }
.ws-tier .price { font-size: var(--fs-price); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--ms-accent); font-variant-numeric: tabular-nums; }
.ws-tier .price small { font-size: var(--fs-body); font-weight: 400; letter-spacing: 0; color: var(--ms-text-3); margin-left: 6px; }
.ws-tier ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-body); line-height: 1.5; color: var(--ms-text-2); }
.ws-tier li::before { content: "✓ "; color: var(--ms-ok); }
.ws-tier .btn { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; }
.ws-tier-row { margin-top: 16px; border: 1px solid var(--ms-border); border-radius: var(--ms-r-lg); background: var(--ms-surface); padding: 14px 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.ws-tier-row p { margin: 0; font-size: var(--fs-body); color: var(--ms-text-2); } .ws-tier-row b { font-size: var(--fs-h4); font-weight: 500; color: var(--ms-text); margin-right: 12px; }
.ws-tier-row .btn { display: inline-flex; align-items: center; }
.ws-rules { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--ms-border-strong); }
.ws-rules li { padding: 14px 0; border-bottom: 1px solid var(--ms-row-line); font-size: var(--fs-body); line-height: 1.55; color: var(--ms-text); }
.ws-rules .eg { color: var(--ms-text-3); white-space: nowrap; }
.ws-inc { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; } .ws-inc li { break-inside: avoid; padding: 7px 0; border-bottom: 1px solid var(--ms-row-line); font-size: 14px; color: var(--text-2); } .ws-inc li::before { content: "✓ "; color: var(--muted); }
.ws-faq { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
.ws-faq > div { border-top: 1px solid var(--ms-border-strong); padding-top: 14px; min-width: 0; }
.ws-faq dt { margin: 0 0 6px; font-size: var(--fs-h4); font-weight: 500; color: var(--ms-text); }
.ws-faq dd { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--ms-text-2); }
.ws-svc { list-style: none; margin: 0; padding: 0; }
.ws-svc li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 12px 16px; border-bottom: 1px solid var(--ms-row-line); align-items: baseline; }
.ws-svc li b .dot { margin-right: 8px; } .ws-svc li:last-child { border-bottom: 0; } .ws-svc b { font-weight: 500; font-size: 14px; } .ws-svc small { grid-column: 1; font-size: 12px; color: var(--muted); } .ws-svc .st { grid-row: 1 / span 2; grid-column: 2; text-align: right; font-size: 13px; color: var(--green); font-weight: 500; white-space: nowrap; } .ws-svc .st small { display: block; color: var(--muted); font-weight: 400; font-family: var(--mono); font-size: 11px; }
.ws-inc-l { list-style: none; margin: 0; padding: 0; } .ws-inc-l li { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 4px 24px; } .ws-inc-l .w { font: 400 12px/1.5 var(--mono); color: var(--muted); } .ws-inc-l b { font-weight: 500; display: block; margin-bottom: 2px; } .ws-inc-l p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.55; max-width: 84ch; }
.ws-meta { font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 20px; }
.ws-legal { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; }
.ws-toc { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); padding-top: 10px; }
.ws-toc a { font-size: 13px; color: var(--text-2); padding: 4px 0; } .ws-toc a:hover, .ws-toc a.is-on { color: var(--accent); }
.ws-prose blockquote { margin: 0 0 14px; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--ms-info-bg); border-radius: 0 8px 8px 0; color: var(--text); }
.ws-prose code { font-family: var(--mono); font-size: 13px; background: var(--ms-surface-3); padding: 1px 5px; border-radius: 5px; }
/* the storage pass (4 Nov): the draft band on the legal pages (a bordered amber band under the page head), the crew’s “Where your paperwork goes” card, the pricing FAQ’s closing line, and the anchors the links land on */
.ws-draft { margin: 0 0 24px; padding: 10px 14px; border: 1px solid var(--ms-warn); border-radius: var(--ms-r); background: var(--ms-warn-bg); color: var(--ms-warn); font: 500 var(--fs-label)/1.4 var(--ms-font); letter-spacing: .02em; }
.ws-paper { border: 1px solid var(--ms-border); border-radius: var(--ms-r-lg); background: var(--ms-surface); padding: 24px 28px; }
.ws-paper > p { margin: 0 0 20px; font-size: var(--fs-h3); font-weight: 400; line-height: 1.45; letter-spacing: -0.01em; color: var(--ms-text); max-width: 60ch; text-wrap: pretty; }
.ws-paper ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }
.ws-paper li { border-top: 1px solid var(--ms-border); padding-top: 12px; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-body); line-height: 1.5; color: var(--ms-text-2); min-width: 0; }
.ws-paper li b { font: 500 var(--fs-label)/1.4 var(--ms-font); letter-spacing: .01em; color: var(--ms-text-3); }
.ws-faq-f { margin-top: 28px; }
#paperwork, .ws-prose h2[id] { scroll-margin-top: 24px; }
.ws-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px; align-items: start; }
.ws-contact .dl { padding: 0; } .ws-contact .dl li { grid-template-columns: 110px minmax(0, 1fr); }
@media (max-width: 900px) { .ws-steps { grid-template-columns: 1fr 1fr; } .ws-tiers, .ws-faq, .ws-contact, .ws-legal { grid-template-columns: 1fr; } .ws-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px 14px; } .ws-rounds { grid-template-columns: 1fr; } }
@media (max-width: 639px) { .ws-steps, .ws-two { grid-template-columns: 1fr; } .ws-seven .r { grid-template-columns: 1fr; } .ws-seven .r.th { display: none; } .ws-seven .lbl { display: block; font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; } .ws-inc { columns: 1; } .ws-tier { padding: 22px 20px; } .ws-tier .price { font-size: var(--fs-price-m); } .ws-tier .btn { width: 100%; } .ws-tier-row { padding: 14px 20px; } .ws-tier-row .btn { width: 100%; justify-content: center; } .ws-rules .eg { white-space: normal; } .ws-inc-l li { grid-template-columns: 1fr; } .ws-quote p { font-size: var(--fs-quote-m); } .ws-paper { padding: 20px; } .ws-paper ul { grid-template-columns: 1fr; } .ws-paper > p { font-size: var(--fs-h4); } .ws-mock { padding: 8px 14px 10px; } .ws-mock .r.cr { margin-left: -11px; } .ws-figs { grid-template-columns: 1fr; } .ws-figs .fig b { font-size: var(--fs-fig-m); } .ws-band { padding: 40px 24px; } .ws-band p { font-size: var(--fs-h2-m); } .ws-band .btn { width: 100%; justify-content: center; } .ws-showcase .ws-mock { padding: 10px 14px 12px; font-size: var(--fs-mock); } .ws-showcase .ws-mock .rv { grid-template-columns: 30px minmax(0, 1fr) 60px 64px; gap: 8px; } .ws-showcase .ws-mock .rv > span:nth-child(4), .ws-showcase .ws-mock .rv > span:nth-child(6) { display: none; } }
@media (max-width: 639px) { :root { --sec-gap: var(--sec-gap-m); } }
/* the phone: inside the mocks the secondary columns go and the small text wraps; no ellipsis on a name or a figure */
@media (max-width: 480px) {
  .ws-mock .r > span:first-child { white-space: normal; overflow: visible; text-overflow: clip; } .ws-mock .r small { display: block; margin-left: 0; }
  .ws-mock .lr { grid-template-columns: minmax(0, 1fr) 28px 72px 76px; gap: 6px; } .ws-mock .lr > span:nth-child(4), .ws-mock .lr > span:nth-child(6) { display: none; }
  .ws-mock .rv { grid-template-columns: 28px minmax(0, 1fr) 56px 56px 60px; gap: 6px; } .ws-mock .rv > span:nth-child(2) { white-space: normal; overflow: visible; text-overflow: clip; }
  .ws-mock .h { white-space: normal; } .ws-mock .h > span:last-child { white-space: normal; text-align: right; } .ws-showcase .ws-mock .h { flex-wrap: wrap; gap: 2px 8px; } .ws-showcase .ws-mock .h > span:last-child { flex-basis: 100%; text-align: left; }
  .ws-car-nav .arrow { width: var(--tap-lg); height: var(--tap-lg); }
}

/* ---- 4. the five animated slides and the three workflow videos (rounds one and two, 4 Nov): CSS drawings in the site's own style. One timeline per slide, --loop long (tokens.css); every
   keyframe is a percentage of it, so a slide reads as one scene. The animations run only on the current slide (.is-current, set by site.js) and
   restart each time it comes round. Most elements animate one registered number, --on (0 → 1 at their moment, the in<N> keyframes below), and
   draw their state from it: opacity, or a colour mixed in. Reduced motion: every animation is paused at 90 % of the loop, the end state. ---- */
@property --on { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --rd { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --tp { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --n { syntax: '<integer>'; inherits: false; initial-value: 0; }
@keyframes in2 { 0%, 2% { --on: 0; } 4%, 100% { --on: 1; } }
@keyframes in4 { 0%, 4% { --on: 0; } 6%, 100% { --on: 1; } }
@keyframes in6 { 0%, 6% { --on: 0; } 8%, 100% { --on: 1; } }
@keyframes in8 { 0%, 8% { --on: 0; } 10%, 100% { --on: 1; } }
@keyframes in10 { 0%, 10% { --on: 0; } 12%, 100% { --on: 1; } }
@keyframes in12 { 0%, 12% { --on: 0; } 14%, 100% { --on: 1; } }
@keyframes in14 { 0%, 14% { --on: 0; } 16%, 100% { --on: 1; } }
@keyframes in16 { 0%, 16% { --on: 0; } 18%, 100% { --on: 1; } }
@keyframes in18 { 0%, 18% { --on: 0; } 20%, 100% { --on: 1; } }
@keyframes in20 { 0%, 20% { --on: 0; } 22%, 100% { --on: 1; } }
@keyframes in22 { 0%, 22% { --on: 0; } 24%, 100% { --on: 1; } }
@keyframes in24 { 0%, 24% { --on: 0; } 26%, 100% { --on: 1; } }
@keyframes in25 { 0%, 25% { --on: 0; } 27%, 100% { --on: 1; } }
@keyframes in26 { 0%, 26% { --on: 0; } 28%, 100% { --on: 1; } }
@keyframes in28 { 0%, 28% { --on: 0; } 30%, 100% { --on: 1; } }
@keyframes in30 { 0%, 30% { --on: 0; } 32%, 100% { --on: 1; } }
@keyframes in31 { 0%, 31% { --on: 0; } 33%, 100% { --on: 1; } }
@keyframes in32 { 0%, 32% { --on: 0; } 34%, 100% { --on: 1; } }
@keyframes in33 { 0%, 33% { --on: 0; } 35%, 100% { --on: 1; } }
@keyframes in34 { 0%, 34% { --on: 0; } 36%, 100% { --on: 1; } }
@keyframes in36 { 0%, 36% { --on: 0; } 38%, 100% { --on: 1; } }
@keyframes in38 { 0%, 38% { --on: 0; } 40%, 100% { --on: 1; } }
@keyframes in40 { 0%, 40% { --on: 0; } 42%, 100% { --on: 1; } }
@keyframes in42 { 0%, 42% { --on: 0; } 44%, 100% { --on: 1; } }
@keyframes in44 { 0%, 44% { --on: 0; } 46%, 100% { --on: 1; } }
@keyframes in46 { 0%, 46% { --on: 0; } 48%, 100% { --on: 1; } }
@keyframes in47 { 0%, 47% { --on: 0; } 49%, 100% { --on: 1; } }
@keyframes in49 { 0%, 49% { --on: 0; } 51%, 100% { --on: 1; } }
@keyframes in48 { 0%, 48% { --on: 0; } 50%, 100% { --on: 1; } }
@keyframes in50 { 0%, 50% { --on: 0; } 52%, 100% { --on: 1; } }
@keyframes in52 { 0%, 52% { --on: 0; } 54%, 100% { --on: 1; } }
@keyframes in53 { 0%, 53% { --on: 0; } 55%, 100% { --on: 1; } }
@keyframes in54 { 0%, 54% { --on: 0; } 56%, 100% { --on: 1; } }
@keyframes in56 { 0%, 56% { --on: 0; } 58%, 100% { --on: 1; } }
@keyframes in58 { 0%, 58% { --on: 0; } 60%, 100% { --on: 1; } }
@keyframes in59 { 0%, 59% { --on: 0; } 61%, 100% { --on: 1; } }
@keyframes in60 { 0%, 60% { --on: 0; } 62%, 100% { --on: 1; } }
@keyframes in61 { 0%, 61% { --on: 0; } 63%, 100% { --on: 1; } }
@keyframes in62 { 0%, 62% { --on: 0; } 64%, 100% { --on: 1; } }
@keyframes in63 { 0%, 63% { --on: 0; } 65%, 100% { --on: 1; } }
@keyframes in64 { 0%, 64% { --on: 0; } 66%, 100% { --on: 1; } }
@keyframes in68 { 0%, 68% { --on: 0; } 70%, 100% { --on: 1; } }
@keyframes in74 { 0%, 74% { --on: 0; } 76%, 100% { --on: 1; } }
@keyframes in76 { 0%, 76% { --on: 0; } 78%, 100% { --on: 1; } }
@keyframes in77 { 0%, 77% { --on: 0; } 79%, 100% { --on: 1; } }
@keyframes in82 { 0%, 82% { --on: 0; } 84%, 100% { --on: 1; } }
@keyframes in84 { 0%, 84% { --on: 0; } 86%, 100% { --on: 1; } }
@keyframes rd42 { 0%, 42% { --rd: 0; } 44%, 100% { --rd: 1; } }
@keyframes rd46 { 0%, 46% { --rd: 0; } 48%, 100% { --rd: 1; } }
@keyframes tap54 { 0%, 53% { --tp: 0; } 55% { --tp: 1; } 58%, 100% { --tp: 0; } }
@keyframes in72 { 0%, 72% { --on: 0; } 74%, 100% { --on: 1; } }
@keyframes ws-loop { 0%, 97% { opacity: 1; } 100% { opacity: 0; } }
/* the stage: one fixed height (so a layer can slide over another), a container so the drawn card's type scales with its width */
.ws-stage { position: relative; height: var(--stage-h); overflow: hidden; container-type: inline-size; }
.is-current .ws-stage { animation: ws-loop var(--loop) linear infinite; } /* .is-current: the carousel's current slide, or a workflow video in view (site.js) */
/* each stage's own loop: round two (4 Nov) set the timesheet 7.8 s, the Crew tab 6 s, the questions 7.2 s, the package 8 s; round three (6 Nov) made every slide 25% slower and added the follow-up; round four (6 Nov) another 20% slower. site.js reads each slide's own --loop */
.ws-stage.s1 { --loop: 11.7s; } .ws-stage.s2 { --loop: 11.15s; } .ws-stage.sfu { --loop: 12s; } .ws-stage.s3 { --loop: 11.9s; } .ws-stage.s4, .ws-stage.s5 { --loop: 12s; }
.ws-stage [class] { animation-duration: var(--loop); animation-timing-function: linear; animation-iteration-count: infinite; } /* every animated part shares the loop; the name comes with .is-current below */
.ws-stage .on { opacity: var(--on); }
.ws-stage .chip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border: 1px solid var(--ms-border-strong); border-radius: 6px; font: 500 var(--fs-mock-sm)/1 var(--ms-font); color: var(--ms-text-2); white-space: nowrap; background: color-mix(in srgb, var(--ms-accent) calc(var(--on) * 100%), var(--ms-surface)); }
.ws-stage .chip.is-on { background: var(--ms-accent); border-color: var(--ms-accent); color: var(--ms-accent-text); }
.ws-stage .btn-m { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 7px; font: 500 var(--fs-mock-sm)/1 var(--ms-font); white-space: nowrap; border: 1px solid var(--ms-accent); color: var(--ms-accent); background: var(--ms-surface); }
.ws-stage .btn-m.is-primary { background: var(--ms-accent); color: var(--ms-accent-text); }

/* 1 · the online timesheet: a tablet at the desktop (the strip, the details and the rate side by side, the week below), the phone under 640; the details type in, a day opens in place and its hours are logged, the next days land green, Submit, then the drawn crew timesheet time card slides over it */
.s1 { display: flex; justify-content: center; align-items: center; padding: 12px 16px; background: var(--ms-bg); }
.phn { width: var(--ph-w); max-width: 100%; height: calc(var(--stage-h) - 24px); border: 2px solid var(--ms-text-2); border-radius: var(--ph-r); background: var(--ms-surface); overflow: hidden; display: flex; flex-direction: column; font-size: var(--fs-mock-xs); line-height: 1.3; color: var(--ms-text-2); }
.ph-scr { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px 10px 0; }
.ph-top { display: flex; justify-content: space-between; font: 500 var(--fs-mock-xxs)/1.4 var(--ms-font); letter-spacing: .04em; text-transform: uppercase; color: var(--ms-text-3); }
.ph-ttl { text-align: center; margin: 4px 0 6px; } .ph-ttl small { display: inline-block; padding: 1px 7px; border-radius: var(--ms-r-pill); background: var(--island); color: var(--ms-accent-text); font: 500 var(--fs-mock-xxs)/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; } .ph-ttl b { display: block; font-size: var(--fs-mock-lg); font-weight: 600; color: var(--ms-text); margin-top: 2px; }
.ph-strip { display: grid; grid-template-columns: 1.7fr 1fr .8fr; gap: 6px; padding: 5px 0; border-top: 1px solid var(--ms-border); border-bottom: 1px solid var(--ms-border); } .ph-strip span { min-width: 0; font: 500 var(--fs-mock-xs)/1.3 var(--mono); color: var(--ms-text); white-space: nowrap; overflow: hidden; } .ph-strip small, .ph-sec, .ph-f small { display: block; font: 500 var(--fs-mock-xxs)/1.4 var(--ms-font); letter-spacing: .04em; text-transform: uppercase; color: var(--ms-text-3); }
.ph-strip .tb { display: none; } /* the fourth fact, on the tablet only */
.ph-cols { display: grid; grid-template-columns: 1fr; }
.ph-sec { margin-top: 6px; } .ph-sec span { text-transform: none; letter-spacing: 0; font-family: var(--mono); }
.ph-f { margin-top: 3px; } .ph-f2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 6px; margin-top: 3px; }
.ph-f .inp { display: block; height: 20px; border: 1px solid var(--ms-border-strong); border-radius: 6px; padding: 0 6px; font: 400 var(--fs-mock-xs)/18px var(--mono); color: var(--ms-text); overflow: hidden; }
.ty { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: 0; }
@keyframes ty-name { 0%, 3% { max-width: 0; } 10%, 100% { max-width: 14ch; } } @keyframes ty-pos { 0%, 11% { max-width: 0; } 14%, 100% { max-width: 6ch; } } @keyframes ty-rate { 0%, 15% { max-width: 0; } 18%, 100% { max-width: 3ch; } }
.is-current .t-name { animation-name: ty-name; animation-timing-function: steps(14, end); } .is-current .t-pos { animation-name: ty-pos; animation-timing-function: steps(6, end); } .is-current .t-rate { animation-name: ty-rate; animation-timing-function: steps(3, end); }
/* a day row: one line closed (the day, the date, ＋ Add hours or the hours and the ✓); open, the four time pickers and the total under it, --day-open tall */
.ph-day { height: 22px; margin-top: 2px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--ms-border); overflow: hidden; flex: none; background: color-mix(in srgb, var(--ms-ok-bg) calc(var(--on) * 100%), var(--ms-surface)); border-color: color-mix(in srgb, var(--ms-ok) calc(var(--on) * 100%), var(--ms-border)); }
.ph-day .dr { display: grid; grid-template-columns: 26px 26px minmax(0, 1fr) 14px; gap: 6px; align-items: center; height: 20px; }
.ph-day b { font-weight: 600; color: var(--ms-text); } .ph-day .dt { font-family: var(--mono); } .ph-day .add { color: var(--ms-accent); font-weight: 500; opacity: calc(1 - var(--on)); grid-area: 1 / 3; text-align: right; } .ph-day .hrs { grid-area: 1 / 3; text-align: right; font-family: var(--mono); color: var(--ms-text); opacity: var(--on); }
.ph-day .dd { grid-area: 1 / 4; color: var(--ms-ok); font-weight: 600; opacity: var(--on); }
.ph-day .pkr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 1px; }
.ph-day .pi { display: flex; flex-direction: column; justify-content: center; height: 26px; padding: 0 5px; border: 1px solid var(--ms-border-strong); border-radius: 5px; background: var(--ms-surface); min-width: 0; }
.ph-day .pi small { font: 500 var(--fs-mock-xxs)/1.1 var(--ms-font); letter-spacing: .03em; text-transform: uppercase; color: var(--ms-text-3); white-space: nowrap; overflow: hidden; } .ph-day .pi .sm { display: none; } @media (max-width: 639px) { .ph-day .pi .lg { display: none; } .ph-day .pi .sm { display: inline; } } /* the phone's pickers carry the short labels */ .ph-day .pi i { font: 400 var(--fs-mock-xs)/1.2 var(--mono); font-style: normal; color: var(--ms-text); opacity: var(--on); }
.ph-day .tw { display: flex; justify-content: space-between; align-items: center; gap: 6px; height: 20px; margin-top: 2px; } .ph-day .tot { color: var(--ms-text-3); white-space: nowrap; } .ph-day .tot b { opacity: var(--on); }
.ph-day .mk { display: inline-flex; align-items: center; height: 17px; padding: 0 7px; border-radius: 5px; font: 500 var(--fs-mock-xxs)/1 var(--ms-font); white-space: nowrap; border: 1px solid color-mix(in srgb, var(--ms-ok) calc(var(--on) * 100%), var(--ms-border-strong)); background: color-mix(in srgb, var(--ms-ok) calc(var(--on) * 100%), var(--ms-surface)); color: color-mix(in srgb, var(--ms-accent-text) calc(var(--on) * 100%), var(--ms-text-2)); }
@keyframes day-open { 0%, 19% { height: 22px; } 21%, 37% { height: var(--day-open); } 39%, 100% { height: 22px; } }
.is-current .d1 { animation-name: day-open, in38; } .is-current .d1 .add { animation-name: in20; } .is-current .d1 .hrs { animation-name: in38; }
.is-current .d1 .p1 { animation-name: in22; } .is-current .d1 .p2 { animation-name: in25; } .is-current .d1 .p3 { animation-name: in28; } .is-current .d1 .p4 { animation-name: in31; } .is-current .d1 .tot { animation-name: in33; } .is-current .d1 .mk { animation-name: in36; }
.is-current .d2 { animation-name: in44; } .is-current .d2 .add, .is-current .d2 .hrs { animation-name: in42; } .is-current .d3 { animation-name: in49; } .is-current .d3 .add, .is-current .d3 .hrs { animation-name: in47; }
.ph-bar { margin-top: auto; display: grid; grid-template-columns: 1fr 1.6fr; gap: 6px; padding: 7px 0 6px; border-top: 1px solid var(--ms-border); background: var(--ms-surface); }
.ph-bar span { display: grid; place-items: center; height: 26px; border-radius: 7px; border: 1px solid var(--ms-border-strong); font: 500 var(--fs-mock-xs)/1 var(--ms-font); color: var(--ms-text); }
.ph-bar .subm { border-color: transparent; background: color-mix(in srgb, var(--ms-accent-hover) calc(var(--on) * 100%), var(--ms-accent)); color: var(--ms-accent-text); } .ph-bar .subm i { font-style: normal; grid-area: 1 / 1; } .ph-bar .subm i:first-child { opacity: calc(1 - var(--on)); } .ph-bar .subm i:last-child { opacity: var(--on); }
.is-current .ph-bar .subm { animation-name: in53; }
/* the tablet, from 640 up: the stage's height, 4:3 wide, the facts in four, the details beside the rate */
@media (min-width: 640px) { .s1 .phn { width: min(100%, calc((var(--stage-h) - 24px) * 4 / 3)); border-radius: var(--tab-r); } .s1 .ph-scr { padding: 10px 18px 0; } .s1 .ph-strip { grid-template-columns: 1.5fr .8fr .8fr 1fr; } .s1 .ph-strip .tb { display: block; } .s1 .ph-cols { grid-template-columns: 1.3fr 1fr; gap: 0 18px; } .s1 .ph-bar { grid-template-columns: 1fr 1fr; max-width: 300px; width: 100%; margin-left: auto; margin-right: auto; } }
/* the drawn time card: landscape, the crew's ink in blue, production's pen in red; every size in --cc-fs so it scales with the stage */
.cc { position: absolute; inset: 10px 12px; background: var(--ms-surface); border: 1px solid var(--ms-border-strong); border-radius: 3px; padding: 1.2em 1.4em .6em; font-size: var(--cc-fs); line-height: 1.3; color: var(--ms-text-2); transform: translateX(106%); overflow: hidden; }
@keyframes cc-in { 0%, 56% { transform: translateX(106%); } 60%, 100% { transform: none; } } .is-current .cc { animation-name: cc-in; animation-timing-function: ease-out; }
.cc i { font-style: italic; color: var(--ink); white-space: nowrap; } .cc i.pen { color: var(--ms-danger); } .cc .csig { font-size: 1.5em; display: inline-block; transform: rotate(-3deg); }
.cc .b { color: var(--ms-accent); font-weight: 700; }
.cc i.bl { display: inline-block; width: 14em; max-width: 100%; height: 1.05em; vertical-align: middle; background: var(--ms-text); } .cc i.bl.sg { width: 11em; height: 1.4em; } /* the private fields, blacked out (round four, 6 Nov): SIN, address, phone, the crew member's signature */
.cc-top { display: grid; grid-template-columns: 1fr 2fr; gap: .8em 2.4em; align-items: start; margin-bottom: 1em; } .cc-brand b { display: block; font-size: 2.2em; font-weight: 700; letter-spacing: -.01em; color: var(--ms-text); line-height: 1.1; } .cc-brand small { display: block; font-size: .95em; color: var(--ms-text-3); margin-top: .4em; }
.cc-hdr { display: grid; grid-template-columns: 1.1fr 1fr; gap: .6em 2em; } .cc-hdr > span { display: flex; align-items: baseline; gap: .6em; border-bottom: 1px solid var(--ms-text-3); padding-bottom: .1em; min-width: 0; white-space: nowrap; overflow: hidden; } .cc-hdr > span.nb { border-bottom: 0; } .cc-hdr > span.w { grid-column: 1 / -1; } .cc-hdr small { font-size: 1em; color: var(--ms-text-2); } .cc-hdr em { font-style: normal; font-size: .9em; margin-left: auto; color: var(--ms-text-2); }
.cc table { width: 100%; border-collapse: collapse; table-layout: fixed; } .cc-t th, .cc-t td { border: 1px solid var(--ms-accent); padding: .1em .2em; height: 1.95em; font-size: .9em; text-align: center; color: var(--ms-text); } .cc-t th { font-weight: 700; line-height: 1.1; } .cc-t td.rt { text-align: right; } .cc-t col.n { width: 4.2em; } .cc-t col.w { width: 7em; }
.cc-mid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1em 1.6em; align-items: center; margin: .5em 0 .8em; } .cc-mid .tbig { font-size: 2.4em; font-weight: 700; } .cc-mid .tot { display: grid; grid-template-columns: auto 1fr 1fr; } .cc-mid .tot span { min-width: 5em; border: 1px solid var(--ms-accent); height: 2.1em; display: grid; place-items: center; font-size: .9em; padding: 0 .3em; } .cc-mid .tot span:first-child { font-weight: 700; }
.cc-low { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.2em 2em; align-items: start; }
.cc-emp { border: 1px solid var(--ms-text-3); padding: .6em .9em; display: flex; flex-direction: column; gap: .5em; } .cc-emp .cf { display: flex; align-items: baseline; gap: .5em; border-bottom: 1px solid var(--ms-text-3); white-space: nowrap; overflow: hidden; } .cc-emp .cf small, .cc-emp .cf em { font-style: normal; font-size: 1em; } .cc-emp .cf em { color: var(--ms-muted); } .cc-tag { align-self: flex-end; background: var(--ms-accent); color: var(--ms-accent-text); font-size: .85em; font-weight: 700; padding: .1em .8em; border-radius: 2px; margin-bottom: -.3em; }
.cc-right { display: flex; flex-direction: column; gap: .9em; } .cc-items th, .cc-items td { border: 1px solid var(--ms-accent); height: 2.1em; padding: .1em .5em; font-size: .9em; text-align: center; } .cc-items th { color: var(--ms-accent); font-weight: 700; } .cc-items td:first-child { text-align: left; font-weight: 600; color: var(--ms-text); }
.cc-appr { border: 1px solid var(--ms-accent); padding: .6em .9em; display: grid; grid-template-columns: 1fr 1.2fr; gap: .6em 2em; } .cc-appr > div { display: flex; flex-direction: column; gap: .7em; } .cc-appr .cf { display: flex; align-items: baseline; gap: .5em; border-bottom: 1px solid var(--ms-text-3); white-space: nowrap; } .cc-appr .cf .d { margin-left: auto; }
.cc-ft { margin-top: .4em; font-size: .9em; color: var(--ms-muted); }

/* 2 · the Crew tab: the call sheets upload and read in, the sheets land row by row, a name is typed in the find box and her drawer opens, the follow-up, a department filter, then a sort by status */
.s2 { display: flex; flex-direction: column; }
.flt { display: flex; align-items: center; gap: 5px; padding: 8px 0 6px; } .flt .sep { width: 1px; height: 14px; background: var(--ms-border-strong); margin: 0 3px; }
.flt .find { position: relative; margin-left: auto; height: 20px; min-width: 76px; padding: 0 8px; border: 1px solid var(--ms-border); border-radius: 6px; font: 400 var(--fs-mock-sm)/18px var(--mono); color: var(--ms-text); white-space: nowrap; } .flt .fph { position: absolute; left: 8px; top: 0; font: 400 var(--fs-mock-sm)/18px var(--ms-font); font-style: normal; color: var(--ms-muted); }
@keyframes fph { 0%, 30% { opacity: 1; } 32%, 57% { opacity: 0; } 59%, 100% { opacity: 1; } } .is-current .flt .fph { animation-name: s2x-fph; } @keyframes ty-find { 0%, 30% { max-width: 0; } 34%, 56% { max-width: 4ch; } 58%, 100% { max-width: 0; } } .is-current .t-find { animation-name: s2x-ty-find; animation-timing-function: steps(4, end); }
.flt .dep, .flt .stc { color: color-mix(in srgb, var(--ms-accent-text) calc(var(--on) * 100%), var(--ms-text-2)); border-color: color-mix(in srgb, var(--ms-accent) calc(var(--on) * 100%), var(--ms-border-strong)); }
.flt .dep { display: inline-grid; place-items: center; } .flt .dep i { grid-area: 1 / 1; font-style: normal; } .flt .dep i:first-child { opacity: calc(1 - var(--on)); } .flt .dep i:last-child { opacity: var(--on); }
.is-current .s2 .dep { animation-name: s2x-in68; } .is-current .s2 .stc { animation-name: s2x-in76; }
.cl { display: flex; flex-direction: column; }
@keyframes cl-in { 0%, 12% { opacity: 0; } 14%, 100% { opacity: 1; } } .is-current .s2 .cl { animation-name: s2x-cl-in; } /* the roster appears once the call sheets are read */
.gh { height: var(--gh-h); overflow: hidden; display: flex; align-items: flex-end; padding-bottom: 2px; font: 500 var(--fs-mock-xs)/1.4 var(--ms-font); letter-spacing: .04em; text-transform: uppercase; color: var(--ms-text-3); border-bottom: 1px solid var(--ms-border); }
.s2 .cr, .wv-a .cr { height: var(--row-h); display: grid; grid-template-columns: minmax(0, 1fr) 24px 24px; gap: 8px; align-items: center; padding: 0 0 0 10px; border-left: 3px solid var(--ms-border); border-bottom: 1px solid var(--ms-row-line); margin-left: -13px; overflow: hidden; flex: none; background: color-mix(in srgb, var(--ms-ok-bg) calc(var(--on) * 100%), var(--ms-surface)); border-left-color: color-mix(in srgb, var(--ms-ok) calc(var(--on) * 100%), var(--ms-border)); }
.s2 .cr > span:first-child, .wv-a .cr > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; } .s2 .cr b, .wv-a .cr b { font-weight: 500; color: var(--ms-text); } .s2 .cr small, .wv-a .cr small { color: var(--ms-text-3); margin-left: 6px; font-size: var(--fs-mock-sm); }
.s2 .cr .ts, .s2 .cr .inv, .wv-a .cr .ts, .wv-a .cr .inv { display: grid; font: 500 var(--fs-mock)/1 var(--mono); text-align: center; } .s2 .cr .ts i, .s2 .cr .ts s, .wv-a .cr .ts i, .wv-a .cr .ts s { grid-area: 1 / 1; font-style: normal; text-decoration: none; } .s2 .cr .ts i, .wv-a .cr .ts i { color: var(--ms-ok); opacity: var(--on); } .s2 .cr .ts s, .wv-a .cr .ts s { color: var(--ms-muted); opacity: calc(1 - var(--on)); } .s2 .cr .inv, .wv-a .cr .inv { color: var(--ms-muted); } .s2 .cr .inv.is-amber { color: var(--ms-warn); } .s2 .cr .inv.is-ok { color: var(--ms-ok); }
.s2 .cr.is-miss { border-left-color: var(--ms-danger); } .s2 .cr.is-miss .ts { color: var(--ms-danger); } .s2 .cr.is-miss small { color: var(--ms-danger); }
/* the folds: the find box leaves one row (35–58 %), the department filter folds Camera (69 %), the sort folds the last header (78 %) */
@keyframes f-cam { 0%, 35% { height: var(--row-h); border-bottom-width: 1px; } 37%, 58% { height: 0; border-bottom-width: 0; } 60%, 69% { height: var(--row-h); border-bottom-width: 1px; } 71%, 100% { height: 0; border-bottom-width: 0; } }
@keyframes f-lind { 0%, 69% { height: var(--row-h); border-bottom-width: 1px; } 71%, 100% { height: 0; border-bottom-width: 0; } }
@keyframes f-el { 0%, 35% { height: var(--row-h); border-bottom-width: 1px; } 37%, 58% { height: 0; border-bottom-width: 0; } 60%, 100% { height: var(--row-h); border-bottom-width: 1px; } }
@keyframes gh-cam { 0%, 35% { height: var(--gh-h); opacity: 1; } 37%, 58% { height: 0; opacity: 0; border-bottom-width: 0; padding-bottom: 0; } 60%, 69% { height: var(--gh-h); opacity: 1; } 71%, 100% { height: 0; opacity: 0; border-bottom-width: 0; padding-bottom: 0; } }
@keyframes gh-el { 0%, 35% { height: var(--gh-h); opacity: 1; } 37%, 58% { height: 0; opacity: 0; border-bottom-width: 0; padding-bottom: 0; } 60%, 78% { height: var(--gh-h); opacity: 1; } 80%, 100% { height: 0; opacity: 0; border-bottom-width: 0; padding-bottom: 0; } }
@keyframes sort { 0%, 78% { transform: none; } 82%, 100% { transform: translateY(calc(var(--dy, 0) * var(--row-h))); } }
.is-current .s2 .gh.g-cam { animation-name: s2x-gh-cam; } .is-current .s2 .gh.g-el { animation-name: s2x-gh-el; }
.is-current .s2 .cr.l1 { animation-name: s2x-in14, s2x-f-cam; } .is-current .s2 .cr.l2 { animation-name: s2x-in16, s2x-f-lind; } .is-current .s2 .cr.l3 { animation-name: s2x-in18, s2x-f-cam; } .is-current .s2 .cr.l4 { animation-name: s2x-in20, s2x-f-cam; }
.is-current .s2 .cr.l5 { animation-name: s2x-in22, s2x-f-el, s2x-sort; } .is-current .s2 .cr.is-miss { animation-name: s2x-f-el, s2x-sort; } .is-current .s2 .cr.l6 { animation-name: s2x-in24, s2x-f-el; } .is-current .s2 .cr.l7 { animation-name: s2x-in26, s2x-f-el; }
.s2 .cnt { --n: 0; counter-reset: n var(--n); } .s2 .cnt::after { content: counter(n); } @keyframes cnt2 { 0%, 11% { --n: 0; } 13%, 14% { --n: 35; } 28%, 100% { --n: 42; } } .is-current .s2 .cnt { animation-name: s2x-cnt2; }
.chase { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 8px 12px; border: 1px solid var(--ms-border); border-radius: var(--ms-r-sm); background: var(--ms-bg); opacity: var(--on); transform: translateY(calc((1 - var(--on)) * 8px)); }
.s2 .chase { margin-top: 10px; }
.chase b { font-weight: 500; color: var(--ms-text); } .chase .wh { grid-column: 1; font: 400 var(--fs-mock-sm)/1.4 var(--mono); color: var(--ms-text-3); } .chase .wh em { font-style: normal; color: var(--ms-danger); } .chase .btn-m { grid-column: 2; grid-row: 1 / span 2; }
.is-current .chase { animation-name: s2x-in62; }
/* the upload card: the call sheets go in, then "Read 2 call sheets · 44 people" */
.upl { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: min(80%, 320px); padding: 16px 18px; border: 1px dashed color-mix(in srgb, var(--ms-ok) calc(var(--on) * 100%), var(--ms-border-strong)); border-radius: var(--ms-r); background: var(--ms-surface); display: grid; opacity: 0; }
.upl > span { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 3px; text-align: center; min-width: 0; } .upl b { font-weight: 500; color: var(--ms-text); font-size: var(--fs-mock-lg); } .upl small { font: 400 var(--fs-mock-sm)/1.4 var(--mono); color: var(--ms-text-3); white-space: normal; }
.upl .u1 { opacity: calc(1 - var(--on)); } .upl .u2 { opacity: var(--on); } .upl .u2 b { color: var(--ms-ok); }
@keyframes upl { 0%, 1% { opacity: 0; } 3%, 11% { opacity: 1; } 13%, 100% { opacity: 0; } } .is-current .upl { animation-name: s2x-upl, s2x-in6; }
/* the person's drawer: the drawn sheet's summary, TS ✓ · INV ○, Upload their PDF */
.pdr { position: absolute; top: var(--pdr-top); right: 0; bottom: 0; width: 62%; background: var(--ms-surface); border-left: 1px solid var(--ms-border-strong); padding: 12px 16px; transform: translateX(104%); display: flex; flex-direction: column; gap: 8px; }
@keyframes pdr { 0%, 40% { transform: translateX(104%); } 43%, 54% { transform: none; } 57%, 100% { transform: translateX(104%); } } .is-current .pdr { animation-name: s2x-pdr; animation-timing-function: ease-out; }
.pdr .dh { padding-bottom: 8px; border-bottom: 1px solid var(--ms-border); } .pdr .dh b { display: block; font-size: var(--fs-mock-lg); font-weight: 500; color: var(--ms-text); } .pdr .dh small { font-size: var(--fs-mock-sm); color: var(--ms-text-3); }
.pdr .st { display: flex; flex-direction: column; gap: 2px; font: 500 var(--fs-mock-sm)/1.4 var(--mono); } .pdr .st .ok { color: var(--ms-ok); } .pdr .st .am { color: var(--ms-warn); }
.pdr .sum { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; } .pdr .sum > span { display: flex; flex-direction: column; min-width: 0; padding: 2px 0; border-bottom: 1px solid var(--ms-row-line); } .pdr .sum small { font: 500 var(--fs-mock-xxs)/1.4 var(--ms-font); letter-spacing: .04em; text-transform: uppercase; color: var(--ms-text-3); } .pdr .sum i { font: italic 400 var(--fs-mock-xs)/1.4 var(--mono); color: var(--ink); white-space: nowrap; overflow: hidden; }
.pdr .up { margin-top: auto; align-self: flex-start; }
/* slide 2's own timing (Vlad, Nov 6): the call-sheet upload (the first 13% of the old 9 s loop) 50% slower, the rest 20% slower, so the loop is 11.15 s; the s2x- keyframes are the slide's keyframes with their moments moved to match */
@keyframes s2x-cl-in { 0%, 14.53% { opacity: 0; } 16.71%, 100% { opacity: 1; } }
@keyframes s2x-cnt2 { 0%, 13.32% { --n: 0; } 15.74%, 16.71% { --n: 35; } 30.27%, 100% { --n: 42; } }
@keyframes s2x-f-cam { 0%, 37.05% { height: var(--row-h); border-bottom-width: 1px; } 38.99%, 59.33% { height: 0; border-bottom-width: 0; } 61.26%, 69.98% { height: var(--row-h); border-bottom-width: 1px; } 71.92%, 100% { height: 0; border-bottom-width: 0; } }
@keyframes s2x-f-el { 0%, 37.05% { height: var(--row-h); border-bottom-width: 1px; } 38.99%, 59.33% { height: 0; border-bottom-width: 0; } 61.26%, 100% { height: var(--row-h); border-bottom-width: 1px; } }
@keyframes s2x-f-lind { 0%, 69.98% { height: var(--row-h); border-bottom-width: 1px; } 71.92%, 100% { height: 0; border-bottom-width: 0; } }
@keyframes s2x-fph { 0%, 32.21% { opacity: 1; } 34.14%, 58.36% { opacity: 0; } 60.3%, 100% { opacity: 1; } }
@keyframes s2x-gh-cam { 0%, 37.05% { height: var(--gh-h); opacity: 1; } 38.99%, 59.33% { height: 0; opacity: 0; border-bottom-width: 0; padding-bottom: 0; } 61.26%, 69.98% { height: var(--gh-h); opacity: 1; } 71.92%, 100% { height: 0; opacity: 0; border-bottom-width: 0; padding-bottom: 0; } }
@keyframes s2x-gh-el { 0%, 37.05% { height: var(--gh-h); opacity: 1; } 38.99%, 59.33% { height: 0; opacity: 0; border-bottom-width: 0; padding-bottom: 0; } 61.26%, 78.7% { height: var(--gh-h); opacity: 1; } 80.64%, 100% { height: 0; opacity: 0; border-bottom-width: 0; padding-bottom: 0; } }
@keyframes s2x-in14 { 0%, 16.71% { --on: 0; } 18.65%, 100% { --on: 1; } }
@keyframes s2x-in16 { 0%, 18.65% { --on: 0; } 20.58%, 100% { --on: 1; } }
@keyframes s2x-in18 { 0%, 20.58% { --on: 0; } 22.52%, 100% { --on: 1; } }
@keyframes s2x-in20 { 0%, 22.52% { --on: 0; } 24.46%, 100% { --on: 1; } }
@keyframes s2x-in22 { 0%, 24.46% { --on: 0; } 26.39%, 100% { --on: 1; } }
@keyframes s2x-in24 { 0%, 26.39% { --on: 0; } 28.33%, 100% { --on: 1; } }
@keyframes s2x-in26 { 0%, 28.33% { --on: 0; } 30.27%, 100% { --on: 1; } }
@keyframes s2x-in6 { 0%, 7.26% { --on: 0; } 9.69%, 100% { --on: 1; } }
@keyframes s2x-in62 { 0%, 63.2% { --on: 0; } 65.14%, 100% { --on: 1; } }
@keyframes s2x-in68 { 0%, 69.01% { --on: 0; } 70.95%, 100% { --on: 1; } }
@keyframes s2x-in76 { 0%, 76.76% { --on: 0; } 78.7%, 100% { --on: 1; } }
@keyframes s2x-pdr { 0%, 41.89% { transform: translateX(104%); } 44.8%, 55.45% { transform: none; } 58.36%, 100% { transform: translateX(104%); } }
@keyframes s2x-sort { 0%, 78.7% { transform: none; } 82.57%, 100% { transform: translateY(calc(var(--dy, 0) * var(--row-h))); } }
@keyframes s2x-ty-find { 0%, 32.21% { max-width: 0; } 36.08%, 57.39% { max-width: 4ch; } 59.33%, 100% { max-width: 0; } }
@keyframes s2x-upl { 0%, 1.21% { opacity: 0; } 3.63%, 13.32% { opacity: 1; } 15.74%, 100% { opacity: 0; } }
/* 3 · the follow-up (round three, 6 Nov; a placeholder until the follow-up animations come from their own repo): the wrap clock at day 3 of 7, two people outstanding, the e-mail and the text sent in your name, the sheet coming in */
.sfu { display: flex; flex-direction: column; gap: 8px; }
.fu-clk { display: flex; align-items: center; gap: 10px; padding-top: 6px; font: 500 var(--fs-mock-xs)/1.4 var(--mono); color: var(--ms-text-3); white-space: nowrap; } .fu-clk .bar { flex: 1; height: 6px; border-radius: var(--ms-r-pill); background: var(--ms-border); overflow: hidden; } .fu-clk .bar i { display: block; height: 100%; width: 0; background: var(--ms-warn); }
@keyframes fu-bar { 0%, 2% { width: 0; } 14%, 100% { width: 43%; } } .is-current .fu-clk .bar i { animation-name: fu-bar; animation-timing-function: ease-out; }
.fu-r { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 10px 6px 12px; border: 1px solid var(--ms-border); border-left: 3px solid var(--ms-warn); border-radius: var(--ms-r-sm); opacity: var(--on); min-width: 0; } .fu-r > span:first-child { min-width: 0; } .fu-r b { font-weight: 500; color: var(--ms-text); } .fu-r small { display: block; font-size: var(--fs-mock-xs); color: var(--ms-text-3); }
.fu-r .ev { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font: 400 var(--fs-mock-xxs)/1.4 var(--mono); color: var(--ms-text-2); white-space: nowrap; } .fu-r .ev em { font-style: normal; opacity: var(--on); }
.fu-m { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.fu-m .ml { padding: 8px 10px; border: 1px solid var(--ms-border-strong); border-radius: var(--ms-r-sm); background: var(--ms-surface); opacity: var(--on); min-width: 0; } .fu-m .mh { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid var(--ms-border); } .fu-m .mh b { font-weight: 600; color: var(--ms-text); } .fu-m .mh small { font-size: var(--fs-mock-xxs); color: var(--ms-text-3); text-align: right; }
.fu-m p { margin: 0; font-size: var(--fs-mock-xs); line-height: 1.45; color: var(--ms-text-2); } .fu-m .ml p b { display: block; margin-bottom: 2px; font-weight: 500; color: var(--ms-text); }
.fu-m .sms { opacity: var(--on); min-width: 0; } .fu-m .sms small { display: block; margin-bottom: 4px; font-size: var(--fs-mock-xxs); color: var(--ms-text-3); } .fu-m .sms p { padding: 7px 10px; border-radius: 12px 12px 12px 3px; background: var(--ms-surface-2); color: var(--ms-text); }
.fu-in { margin-top: auto; display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 12px; border: 1px solid var(--ms-border); border-left: 3px solid var(--ms-ok); border-radius: var(--ms-r-sm); background: var(--ms-ok-bg); font-size: var(--fs-mock-sm); color: var(--ms-text-2); opacity: var(--on); } .fu-in i { font-style: normal; font-weight: 600; color: var(--ms-ok); }
.is-current .sfu .fr1 { animation-name: in2; } .is-current .sfu .fr2 { animation-name: in4; } .is-current .sfu .fr1 .e1 { animation-name: in8; } .is-current .sfu .fr2 .e1 { animation-name: in10; } .is-current .sfu .ml { animation-name: in16; } .is-current .sfu .fr1 .e2, .is-current .sfu .sms { animation-name: in40; } .is-current .sfu .fu-in { animation-name: in62; }
/* 3 · the Questions tab: a sheet is read, then the questions by group: three Rates taken as WrapDesk proposed in one press (the group folds to Answered · 3), two Lines (one ✓, one with the line typed), one Item struck, then Finish V1 is the primary */
.s3 { display: flex; flex-direction: column; --q-open: 124px; } .s3 .fin { margin-left: auto; } /* one question open at a time beside the card, so each gets room to read (round four) */
.s3 .h { align-items: center; } .s3 .cnt3 { --n: 3; counter-reset: n var(--n); } .s3 .cnt3::after { content: counter(n) " to settle"; } @keyframes cnt3 { 0%, 21.9% { --n: 3; } 22%, 32.9% { --n: 2; } 33%, 44.9% { --n: 1; } 45%, 100% { --n: 0; } } .is-current .s3 .cnt3 { animation-name: s3x-cnt3; }
.ws-stage .fin { background: color-mix(in srgb, var(--ms-accent) calc(var(--on) * 100%), var(--ms-surface)); color: color-mix(in srgb, var(--ms-accent-text) calc(var(--on) * 100%), var(--ms-accent)); } .is-current .s3 .fin { animation-name: s3x-in48; }
.s3-g { display: grid; grid-template-columns: var(--ccq-col) minmax(0, 1fr); gap: 14px; padding: 10px 0 14px; } .s3 { --ccq-k: .42; --ccq-col: 40%; } .s3 .qlist { grid-column: 2; } /* Vlad, Nov 6: the sheet sits small in the top-left corner (out of the flow, below), the questions in the column beside it */
/* the sheet beside the questions (round four, 6 Nov): the same crew timesheet card as the slides and the annotations video, as read in (no pen yet), private fields blacked out; it fades in, then the questions */
.s3 .cc-q { inset: 10px 12px; z-index: 2; transform-origin: 0 0; transform: translateY(42px) scale(var(--ccq-k)); opacity: var(--on); }
@keyframes ccq-grow { 0%, 50% { transform: translateY(42px) scale(var(--ccq-k)); } 56%, 100% { transform: none; } } .is-current .s3 .cc-q { animation-name: s3x-in4, s3x-ccq-grow; animation-timing-function: linear, ease-in-out; } /* once the three questions are answered, the sheet slides out and fills the stage */
.qlist { display: flex; flex-direction: column; min-width: 0; }
/* a group: its header line (the label and, for the Rates, "Use WrapDesk's proposal on all 3") that folds to one green answered line; then its cards */
.qg { display: flex; flex-direction: column; min-width: 0; }
.qg-h { position: relative; height: 0; margin-top: 0; overflow: hidden; flex: none; }
.qg-h .qo, .qg-h .qd { position: absolute; left: 0; right: 0; top: 0; }
.qg-h .qo { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: var(--gh-h); border-bottom: 1px solid var(--ms-border); opacity: calc(1 - var(--on)); } .qg-h .qk { font: 500 var(--fs-mock-xs)/1.4 var(--ms-font); letter-spacing: .04em; text-transform: uppercase; color: var(--ms-text-3); white-space: nowrap; }
.qg-h .all { height: 19px; padding: 0 8px; font-size: var(--fs-mock-xxs); background: color-mix(in srgb, var(--ms-accent) calc(var(--on) * 100%), var(--ms-surface)); color: color-mix(in srgb, var(--ms-accent-text) calc(var(--on) * 100%), var(--ms-accent)); }
.qg-h .qd { height: var(--q-done); display: flex; align-items: center; gap: 6px; padding: 0 10px 0 12px; border: 1px solid var(--ms-border); border-left: 3px solid var(--ms-ok); border-radius: var(--ms-r-sm); background: var(--ms-ok-bg); color: var(--ms-text-2); white-space: nowrap; overflow: hidden; opacity: var(--on); } .qg-h .qd i { font-style: normal; color: var(--ms-ok); font-weight: 600; } .qg-h .qd em { font-style: normal; color: var(--ms-text); font-weight: 500; }
.qq { position: relative; height: 0; margin-top: 0; opacity: 0; overflow: hidden; flex: none; }
.qq .qopen, .qq .qdone { position: absolute; left: 0; right: 0; top: 0; }
.qq .qopen { height: var(--q-open); display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 6px 10px 6px 12px; border: 1px solid var(--ms-border); border-left: 3px solid var(--ms-warn); border-radius: var(--ms-r-sm); opacity: calc(1 - var(--on)); }
.qq .qopen .qk { display: inline-block; margin-right: 6px; font: 500 var(--fs-mock-xxs)/1.4 var(--ms-font); letter-spacing: .04em; text-transform: uppercase; color: var(--ms-text-3); } .qq .qopen .qt { line-height: 1.3; } .qq .qopen b { font-weight: 500; color: var(--ms-text); } .qq .qopen .prop { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .qq .qopen small { color: var(--ms-text-3); font-size: var(--fs-mock-sm); min-width: 0; flex: 1; } .qq .qopen small em { font-style: normal; color: var(--ms-text); font-weight: 500; }
.qq .qopts { display: flex; gap: 5px; flex: none; } .qq .qopts span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--ms-border-strong); border-radius: 6px; font: 500 var(--fs-mock)/1 var(--mono); color: var(--ms-text-2); } .qq .qopts .qok { color: color-mix(in srgb, var(--ms-accent-text) calc(var(--on) * 100%), var(--ms-ok)); background: color-mix(in srgb, var(--ms-accent) calc(var(--on) * 100%), var(--ms-surface)); border-color: color-mix(in srgb, var(--ms-accent) calc(var(--on) * 100%), var(--ms-border-strong)); }
.qq .lbox { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 7px; border: 1px solid var(--ms-border-strong); border-radius: 6px; font: 400 var(--fs-mock-xs)/1 var(--mono); color: var(--ms-text); flex: none; min-width: 52px; } .qq .lbox small { font: 500 var(--fs-mock-xxs)/1 var(--ms-font); letter-spacing: .04em; text-transform: uppercase; color: var(--ms-text-3); flex: none; min-width: 0; }
.qq .qdone { height: var(--q-done); display: flex; align-items: center; gap: 6px; padding: 0 10px 0 12px; border: 1px solid var(--ms-border); border-left: 3px solid var(--ms-ok); border-radius: var(--ms-r-sm); background: var(--ms-ok-bg); color: var(--ms-text-2); white-space: nowrap; overflow: hidden; opacity: var(--on); } .qq .qdone i { font-style: normal; color: var(--ms-ok); font-weight: 600; } .qq .qdone em { font-style: normal; color: var(--ms-text); font-weight: 500; } .qq .qdone s { color: var(--ms-text-3); }
/* the slide's timeline (Vlad, Nov 6; 10.8 s): three questions one at a time beside the small sheet (about a second each): each opens, its proposal is picked (--pk), ✓ is ticked, Next is pressed, it folds to a green line and the next opens. 1 opens at 12 %, 2 at 23 %, 3 at 34 % (the line typed 37–40 %); Finish Round 1 at 48 %; the sheet grows to fill the stage 50–56 %; the red pen writes 60–84 % and holds */
@property --pk { syntax: '<number>'; inherits: true; initial-value: 0; }
@keyframes in21 { 0%, 21% { --on: 0; } 23%, 100% { --on: 1; } } @keyframes in29 { 0%, 29% { --on: 0; } 31%, 100% { --on: 1; } } @keyframes in41 { 0%, 41% { --on: 0; } 43%, 100% { --on: 1; } } @keyframes in43 { 0%, 43% { --on: 0; } 45%, 100% { --on: 1; } } @keyframes in55 { 0%, 55% { --on: 0; } 57%, 100% { --on: 1; } } @keyframes in67 { 0%, 67% { --on: 0; } 69%, 100% { --on: 1; } } @keyframes in71 { 0%, 71% { --on: 0; } 73%, 100% { --on: 1; } } @keyframes in75 { 0%, 75% { --on: 0; } 77%, 100% { --on: 1; } } @keyframes in79 { 0%, 79% { --on: 0; } 81%, 100% { --on: 1; } } @keyframes in83 { 0%, 83% { --on: 0; } 85%, 100% { --on: 1; } } 
@keyframes pk16 { 0%, 16% { --pk: 0; } 17%, 100% { --pk: 1; } } @keyframes pk27 { 0%, 27% { --pk: 0; } 28%, 100% { --pk: 1; } } 
.s3 .prop em { padding: 0 2px; border-radius: 3px; background: color-mix(in srgb, var(--ms-accent) calc(var(--pk) * 14%), transparent); }
.s3 .prop { flex-wrap: wrap; row-gap: 4px; } .s3 .prop > small { flex: 1 0 100%; } .s3 .prop .lbox { margin-right: auto; } .s3 .prop .qopts { margin-left: auto; } .s3 .prop .lbox + .qopts { margin-left: 0; }
.s3 .nx { height: 22px; padding: 0 8px; flex: none; font-size: var(--fs-mock-xs); background: color-mix(in srgb, var(--ms-accent) calc(var(--on) * 100%), var(--ms-surface)); color: color-mix(in srgb, var(--ms-accent-text) calc(var(--on) * 100%), var(--ms-accent)); }
@keyframes kq1 { 0%, 12% { height: 0; margin-top: 0; opacity: 0; } 14%, 21% { height: var(--q-open); margin-top: 6px; opacity: 1; } 23%, 100% { height: var(--q-done); margin-top: 6px; opacity: 1; } }
@keyframes kq2 { 0%, 23% { height: 0; margin-top: 0; opacity: 0; } 25%, 32% { height: var(--q-open); margin-top: 6px; opacity: 1; } 34%, 100% { height: var(--q-done); margin-top: 6px; opacity: 1; } }
@keyframes kq3 { 0%, 34% { height: 0; margin-top: 0; opacity: 0; } 36%, 44% { height: var(--q-open); margin-top: 6px; opacity: 1; } 46%, 100% { height: var(--q-done); margin-top: 6px; opacity: 1; } }
@keyframes ty-line { 0%, 37% { max-width: 0; } 40%, 100% { max-width: 2ch; } }
.is-current .k1 { animation-name: s3x-kq1; } .is-current .k1 .prop { animation-name: s3x-pk16; } .is-current .k1 .qok { animation-name: s3x-in18; } .is-current .k1 .nx { animation-name: s3x-in20; } .is-current .k1 .qopen, .is-current .k1 .qdone { animation-name: s3x-in21; }
.is-current .k2 { animation-name: s3x-kq2; } .is-current .k2 .prop { animation-name: s3x-pk27; } .is-current .k2 .qok { animation-name: s3x-in29; } .is-current .k2 .nx { animation-name: s3x-in31; } .is-current .k2 .qopen, .is-current .k2 .qdone { animation-name: s3x-in32; }
.is-current .k3 { animation-name: s3x-kq3; } .is-current .k3 .t-line { animation-name: s3x-ty-line; animation-timing-function: steps(2, end); } .is-current .k3 .qok { animation-name: s3x-in41; } .is-current .k3 .nx { animation-name: s3x-in43; } .is-current .k3 .qopen, .is-current .k3 .qdone { animation-name: s3x-in44; }
/* the red pen onto the sheet once the questions are answered: the hours by rate, Total Pay Hours, Total Pay $, Line #, the totals and summaries, the PM's sign-off */
.s3 .cc-q .pen { opacity: var(--on); } .is-current .s3 .cc-q .p1 { animation-name: s3x-in60; } .is-current .s3 .cc-q .p2 { animation-name: s3x-in64; } .is-current .s3 .cc-q .p3 { animation-name: s3x-in68; } .is-current .s3 .cc-q .p4 { animation-name: s3x-in72; } .is-current .s3 .cc-q .p5 { animation-name: s3x-in76; } .is-current .s3 .cc-q .p6 { animation-name: s3x-in82; }
/* slide 4's own timing (Vlad, Nov 6): the three questions (12–46% of the old 10.8 s loop) 30% slower; the read-in before and Finish Round 1, the sheet sliding out and the red pen after keep their pace; the loop is 11.9 s. The s3x- keyframes are the slide's keyframes with their moments moved to match */
@keyframes s3x-ccq-grow { 0%, 54.64% { transform: translateY(42px) scale(var(--ccq-k)); } 60.08%, 100% { transform: none; } }
@keyframes s3x-cnt3 { 0%, 22.57% { --n: 3; } 22.69%, 35.55% { --n: 2; } 35.67%, 49.71% { --n: 1; } 49.83%, 100% { --n: 0; } }
@keyframes s3x-in18 { 0%, 17.97% { --on: 0; } 20.33%, 100% { --on: 1; } }
@keyframes s3x-in20 { 0%, 20.33% { --on: 0; } 22.69%, 100% { --on: 1; } }
@keyframes s3x-in21 { 0%, 21.51% { --on: 0; } 23.87%, 100% { --on: 1; } }
@keyframes s3x-in29 { 0%, 30.95% { --on: 0; } 33.31%, 100% { --on: 1; } }
@keyframes s3x-in31 { 0%, 33.31% { --on: 0; } 35.67%, 100% { --on: 1; } }
@keyframes s3x-in32 { 0%, 34.49% { --on: 0; } 36.85%, 100% { --on: 1; } }
@keyframes s3x-in4 { 0%, 3.63% { --on: 0; } 5.45%, 100% { --on: 1; } }
@keyframes s3x-in41 { 0%, 45.11% { --on: 0; } 47.47%, 100% { --on: 1; } }
@keyframes s3x-in43 { 0%, 47.47% { --on: 0; } 49.83%, 100% { --on: 1; } }
@keyframes s3x-in44 { 0%, 48.65% { --on: 0; } 51.01%, 100% { --on: 1; } }
@keyframes s3x-in48 { 0%, 52.82% { --on: 0; } 54.64%, 100% { --on: 1; } }
@keyframes s3x-in60 { 0%, 63.71% { --on: 0; } 65.53%, 100% { --on: 1; } }
@keyframes s3x-in64 { 0%, 67.34% { --on: 0; } 69.16%, 100% { --on: 1; } }
@keyframes s3x-in68 { 0%, 70.97% { --on: 0; } 72.79%, 100% { --on: 1; } }
@keyframes s3x-in72 { 0%, 74.6% { --on: 0; } 76.42%, 100% { --on: 1; } }
@keyframes s3x-in76 { 0%, 78.23% { --on: 0; } 80.05%, 100% { --on: 1; } }
@keyframes s3x-in82 { 0%, 83.68% { --on: 0; } 85.49%, 100% { --on: 1; } }
@keyframes s3x-kq1 { 0%, 10.89% { height: 0; margin-top: 0; opacity: 0; } 13.25%, 21.51% { height: var(--q-open); margin-top: 6px; opacity: 1; } 23.87%, 100% { height: var(--q-done); margin-top: 6px; opacity: 1; } }
@keyframes s3x-kq2 { 0%, 23.87% { height: 0; margin-top: 0; opacity: 0; } 26.23%, 34.49% { height: var(--q-open); margin-top: 6px; opacity: 1; } 36.85%, 100% { height: var(--q-done); margin-top: 6px; opacity: 1; } }
@keyframes s3x-kq3 { 0%, 36.85% { height: 0; margin-top: 0; opacity: 0; } 39.21%, 48.65% { height: var(--q-open); margin-top: 6px; opacity: 1; } 51.01%, 100% { height: var(--q-done); margin-top: 6px; opacity: 1; } }
@keyframes s3x-pk16 { 0%, 15.61% { --pk: 0; } 16.79%, 100% { --pk: 1; } }
@keyframes s3x-pk27 { 0%, 28.59% { --pk: 0; } 29.77%, 100% { --pk: 1; } }
@keyframes s3x-ty-line { 0%, 40.39% { max-width: 0; } 43.93%, 100% { max-width: 2ch; } }
/* 4 · the Review tab (taken out of the carousel in round three, 6 Nov; the rules stay until the design settles): Actual fills in, two lines go red, an Actual opens the drawer, then a glimpse of the log print and a timesheet */
.s4 { display: flex; flex-direction: column; }
.pg { display: flex; align-items: center; gap: 4px; padding: 8px 0 4px; } .pg span { display: grid; place-items: center; min-width: 24px; height: 20px; padding: 0 6px; border: 1px solid var(--ms-border-strong); border-radius: 6px; font: 500 var(--fs-mock-xs)/1 var(--mono); color: var(--ms-text-2); } .pg span.is-on { background: var(--ms-accent); border-color: var(--ms-accent); color: var(--ms-accent-text); }
.pg .ov { margin-left: auto; font: 500 var(--fs-mock-sm)/1.4 var(--ms-font); color: var(--ms-danger); opacity: var(--on); white-space: nowrap; } .is-current .pg .ov { animation-name: in46; }
.rv4 { display: grid; grid-template-columns: 28px minmax(0, 1fr) 62px 62px 66px 72px; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--ms-row-line); font-variant-numeric: tabular-nums; align-items: start; }
.rv4 > span { min-width: 0; white-space: nowrap; } .rv4 > span:first-child, .rv4 > span:nth-child(n+3) { font: 400 var(--fs-mock-sm)/1.4 var(--mono); color: var(--ms-text-2); } .rv4 > span:nth-child(n+3) { text-align: right; }
.rv4 > span:nth-child(2) { white-space: normal; } .rv4 > span:nth-child(2) small { display: block; font-size: var(--fs-mock-xs); color: var(--ms-text-3); line-height: 1.2; }
.rv4.th > span { font: 500 var(--fs-mock-xs)/1.4 var(--ms-font); letter-spacing: .04em; text-transform: uppercase; color: var(--ms-text-3); } .rv4.sc > span { color: var(--ms-text-3); font: 500 var(--fs-mock-sm)/1.4 var(--ms-font); padding-top: 4px; }
.rv4 .a, .rv4 .var { opacity: var(--on); color: color-mix(in srgb, var(--ms-danger) calc(var(--rd) * 100%), var(--ms-text)); font-weight: 500; } .rv4 .var .flag { display: block; font: 400 var(--fs-mock-xs)/1.2 var(--ms-font); color: var(--ms-danger); opacity: var(--rd); white-space: normal; }
.rv4 .a { border-radius: 4px; background: color-mix(in srgb, var(--ms-info-bg) calc(var(--tp) * 100%), transparent); outline: 1px solid color-mix(in srgb, var(--ms-accent) calc(var(--tp) * 100%), transparent); outline-offset: 1px; }
.is-current .r1 { animation-name: in6; } .is-current .r2 { animation-name: in12, rd42; } .is-current .r3 { animation-name: in18; } .is-current .r4 { animation-name: in24; } .is-current .r5 { animation-name: in30, rd46; } .is-current .r6 { animation-name: in36, tap54; }
.drw { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; background: var(--ms-surface); border-left: 1px solid var(--ms-border-strong); padding: 12px 16px; transform: translateX(104%); display: flex; flex-direction: column; }
@keyframes drw { 0%, 56% { transform: translateX(104%); } 60%, 76% { transform: none; } 80%, 100% { transform: translateX(104%); } } .is-current .drw { animation-name: drw; animation-timing-function: ease-out; }
.drw .dh { padding-bottom: 8px; border-bottom: 1px solid var(--ms-border); } .drw .dh b { display: block; font-size: var(--fs-mock-lg); font-weight: 500; color: var(--ms-text); } .drw .dh small { font-size: var(--fs-mock-sm); color: var(--ms-text-3); }
.drw .dr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--ms-row-line); } .drw .dr > span:nth-child(n+2) { font: 400 var(--fs-mock-sm)/1.4 var(--mono); color: var(--ms-text-2); text-align: right; } .drw .dr.tot { border-top: 1px solid var(--ms-border-strong); border-bottom: 0; font-weight: 500; color: var(--ms-text); } .drw .dr.tot > span:last-child { color: var(--ms-text); }
.drw .x { margin-top: auto; align-self: flex-start; }
.gl { position: absolute; inset: 0; display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; align-items: start; align-content: center; padding: 14px 16px; background: var(--ms-bg); transform: translateY(104%); } @keyframes gl { 0%, 82% { transform: translateY(104%); } 86%, 100% { transform: none; } } .is-current .gl { animation-name: gl; animation-timing-function: ease-out; }
.gl > div { background: var(--ms-surface); border: 1px solid var(--ms-border-strong); border-radius: 3px; padding: 10px 12px; font: 400 var(--fs-mock-xs)/1.5 var(--mono); color: var(--ms-text-2); overflow: hidden; display: flex; flex-direction: column; }
.gl b { display: block; font-weight: 500; letter-spacing: .04em; color: var(--ms-text); } .gl small { display: block; color: var(--ms-text-3); font-size: var(--fs-mock-xs); margin-bottom: 6px; } .gl span { display: block; } .gl .gt { border-top: 1px solid var(--ms-border-strong); margin-top: auto; padding-top: 4px; font-weight: 500; color: var(--ms-text); } .gl .lbl { display: block; font: 500 var(--fs-mock-xxs)/1.4 var(--ms-font); letter-spacing: .04em; text-transform: uppercase; color: var(--ms-text-3); margin-bottom: 4px; }
.gl .tsg span { font-family: var(--ms-font); } .gl .tsg i { font-style: italic; color: var(--ink); font-family: var(--mono); } .gl .tsg i.pen { color: var(--ms-danger); }

/* 5 · the accounting package: the FINAL/V1 tree builds file by file, V2 beside it, then the download and the sent stamp */
.s5 { display: flex; flex-direction: column; }
.pk5 { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 8px; flex: 1; min-height: 0; }
.tree { font: 400 var(--fs-mock-xs)/1.35 var(--mono); color: var(--ms-text-2); min-width: 0; } @media (min-width: 481px) and (max-width: 1200px) { .tree { font-size: var(--fs-mock-xxs); } } /* the narrower two-column hero: the long file names wrap twice, so the tree sets smaller */
.tree .th { display: flex; flex-direction: column; align-items: flex-start; gap: 0; /* Nov 6: "Round 1" / "Round 2" with the folder on the line under it, the same in both columns */ padding-bottom: 4px; border-bottom: 1px solid var(--ms-border); margin-bottom: 2px; font-family: var(--ms-font); } .tree .th b { font-size: var(--fs-mock-lg); font-weight: 500; color: var(--ms-text); } .tree .th small { font-size: var(--fs-mock-xs); color: var(--ms-text-3); font-family: var(--mono); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree .tf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: start; padding: 2px 0; border-bottom: 1px solid var(--ms-row-line); opacity: var(--on); } .tree .tf > span { overflow-wrap: anywhere; } .tree .tf.tfd > span { color: var(--ms-text); font-weight: 500; } .tree .tf.tfi > span { padding-left: 12px; } .tree .tf i { font-style: normal; color: var(--ms-ok); font-weight: 600; } .tree .tf small { color: var(--ms-text-3); margin-left: 4px; }
.is-current .v1 .tf:nth-child(2) { animation-name: in4; } .is-current .v1 .tf:nth-child(3) { animation-name: in8; } .is-current .v1 .tf:nth-child(4) { animation-name: in12; } .is-current .v1 .tf:nth-child(5) { animation-name: in16; } .is-current .v1 .tf:nth-child(6) { animation-name: in20; } .is-current .v1 .tf:nth-child(7) { animation-name: in24; } .is-current .v1 .tf:nth-child(8) { animation-name: in28; } .is-current .v1 .tf:nth-child(9) { animation-name: in32; }
.tree.v2 { opacity: var(--on); } .is-current .v2 { animation-name: in46; }
.is-current .v2 .tf:nth-child(2) { animation-name: in50; } .is-current .v2 .tf:nth-child(3) { animation-name: in52; } .is-current .v2 .tf:nth-child(4) { animation-name: in54; } .is-current .v2 .tf:nth-child(5) { animation-name: in56; } .is-current .v2 .tf:nth-child(6) { animation-name: in58; } .is-current .v2 .tf:nth-child(7) { animation-name: in60; } .is-current .v2 .tf:nth-child(8) { animation-name: in62; } .is-current .v2 .tf:nth-child(9) { animation-name: in64; }
.tree .new { margin-top: 6px; opacity: var(--on); } .tree .new .lbl { display: block; font: 500 var(--fs-mock-xxs)/1.4 var(--ms-font); letter-spacing: .04em; text-transform: uppercase; color: var(--ms-ok); margin-bottom: 2px; } .tree .new span { display: block; color: var(--ms-ok); } .is-current .new { animation-name: in68; }
.s5 .pk { margin-top: auto; padding-top: 10px; } .s5 .pk .go { opacity: var(--on); } .is-current .s5 .go { animation-name: in76; } .s5 .pksent { font: 500 var(--fs-mock-sm)/1.4 var(--ms-font); color: var(--ms-ok); opacity: var(--on); min-width: 0; } .s5 .pksent small { display: block; font-weight: 400; font-family: var(--mono); color: var(--ms-text-3); } .is-current .s5 .pksent { animation-name: in84; }

/* 6 · the job board by stage: the next deadline counts down, a job moves from Collecting to V1 */
.s6 { display: flex; flex-direction: column; --rh: var(--row-h); }
.s6 .h { height: var(--gh-h); padding: 0; margin: 0; align-items: flex-end; box-sizing: border-box; padding-bottom: 2px; } .s6 .h > span:last-child { display: grid; } .s6 .h > span:last-child > i { grid-area: 1 / 1; font-style: normal; } .s6 .h .a { opacity: calc(1 - var(--on)); } .s6 .h .b { opacity: var(--on); }
.s6 .r { height: var(--rh); padding: 0; align-items: center; box-sizing: border-box; } .s6 .r > span:first-child { display: grid; } .s6 .r > span:first-child > span { grid-area: 1 / 1; min-width: 0; white-space: nowrap; overflow: hidden; } .s6 .r .a { opacity: calc(1 - var(--on)); } .s6 .r .b { opacity: var(--on); } .s6 .r .m { display: grid; } .s6 .r .m > i { grid-area: 1 / 1; font-style: normal; text-align: right; }
.s6 .top { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0 4px; font: 500 var(--fs-mock-sm)/1.4 var(--ms-font); color: var(--ms-text); white-space: nowrap; } .s6 .top .nw { display: none; } .s6 .top i { font-style: normal; } .s6 .top .cd { font-family: var(--mono); font-weight: 400; color: var(--ms-text-3); white-space: nowrap; } .s6 .cd { --n: 59; counter-reset: n var(--n); } .s6 .cd::after { content: counter(n) " m"; }
@keyframes cnt6 { 0% { --n: 59; } 96%, 100% { --n: 44; } } .is-current .s6 .cd { animation-name: cnt6; }
@keyframes mv-row { 0%, 56% { transform: none; } 62%, 100% { transform: translateY(var(--gh-h)); } } @keyframes mv-head { 0%, 56% { transform: none; } 62%, 100% { transform: translateY(calc(-1 * var(--rh))); } }
.is-current .s6 .mv { animation-name: mv-row, in60; animation-timing-function: ease-in-out, linear; } .is-current .s6 .h.mh { animation-name: mv-head, in60; animation-timing-function: ease-in-out, linear; } .is-current .s6 .h.chd { animation-name: in60; }
.s6 .r.is-ok .m { color: var(--ms-ok); }

/* Workflow Presentations (round two, 4 Nov): three CSS-animated stages, each in a small product frame with a title and a caption, side by side at the desktop and stacked under 1024; each loops on its own --loop and plays while in view (site.js adds .is-current) */
.ws-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ws-video { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ws-video .ws-frame-bar { height: 30px; padding: 0 12px; } .ws-video .ws-frame-bar > span { height: 20px; padding: 0 9px; font-size: var(--fs-mock-xs); } .ws-video .ws-frame-bar > span .brand-mark { width: 12px; height: 12px; } .ws-video .ws-frame-bar i { width: 8px; height: 8px; }
.ws-video figcaption b { display: block; font-size: var(--fs-h4); font-weight: 500; color: var(--ms-text); margin-bottom: 4px; } .ws-video figcaption p { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--ms-text-2); }
.ws-stage.wv { height: var(--wv-h); padding: 8px 14px 10px; }
@media (max-width: 1023px) { .ws-videos { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
/* a · the Timesheet tab: the setup facts, Copy the link → ✓ Copied, the crew's phone rises with the form (a name, a day, Submit), then her sheet lands green on the Crew rows */
.wv-a { --loop: 10.4s; } /* round three (6 Nov): 30% slower (8 → 10.4 s) */
.lk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding: 10px 0 8px; } .lk > span { min-width: 0; display: flex; flex-direction: column; opacity: var(--on); } .lk small { font: 500 var(--fs-mock-xxs)/1.4 var(--ms-font); letter-spacing: .04em; text-transform: uppercase; color: var(--ms-text-3); } .lk b { font: 500 var(--fs-mock-xs)/1.3 var(--mono); color: var(--ms-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-current .lk .f1 { animation-name: in2; } .is-current .lk .f2 { animation-name: in4; } .is-current .lk .f3 { animation-name: in6; } .is-current .lk .f4 { animation-name: in8; } .is-current .lk .f5 { animation-name: in10; } .is-current .lk .f6 { animation-name: in12; }
.url { display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 9px; border: 1px solid var(--ms-border); border-radius: var(--ms-r-sm); background: var(--ms-bg); font: 400 var(--fs-mock-xs)/1.4 var(--mono); color: var(--ms-text-2); } .url > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.url .cp { display: inline-grid; place-items: center; height: 22px; flex: none; background: color-mix(in srgb, var(--ms-ok) calc(var(--on) * 100%), var(--ms-surface)); border-color: color-mix(in srgb, var(--ms-ok) calc(var(--on) * 100%), var(--ms-accent)); color: color-mix(in srgb, var(--ms-accent-text) calc(var(--on) * 100%), var(--ms-accent)); } .url .cp i { grid-area: 1 / 1; font-style: normal; } .url .cp i:first-child { opacity: calc(1 - var(--on)); } .url .cp i:last-child { opacity: var(--on); }
.is-current .url .cp { animation-name: in14; }
.wv-a .gh { margin-top: 14px; } .is-current .wv-a .lr { animation-name: in62; } .is-current .wv-a .lc { animation-name: in74; }
.phm { position: absolute; right: 14px; bottom: 0; width: var(--pm-w); height: 78%; border: 2px solid var(--ms-text-2); border-bottom: 0; border-radius: var(--ph-r) var(--ph-r) 0 0; background: var(--ms-surface); padding: 10px 10px 0; display: flex; flex-direction: column; font-size: var(--fs-mock-xs); line-height: 1.3; color: var(--ms-text-2); transform: translateY(110%); overflow: hidden; }
@keyframes phm { 0%, 20% { transform: translateY(110%); } 24%, 52% { transform: none; } 56%, 100% { transform: translateY(110%); } } .is-current .phm { animation-name: phm; animation-timing-function: ease-out; }
.phm .pm-top { text-align: center; margin-bottom: 4px; } .phm .pm-top small { display: inline-block; padding: 1px 7px; border-radius: var(--ms-r-pill); background: var(--island); color: var(--ms-accent-text); font: 500 var(--fs-mock-xxs)/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; } .phm .pm-top b { display: block; font-size: var(--fs-mock-sm); font-weight: 600; color: var(--ms-text); margin-top: 2px; }
.phm .ph-bar { grid-template-columns: 1fr; padding-bottom: 8px; } .phm .ph-day .dr { grid-template-columns: 24px minmax(0, 1fr) 10px; gap: 4px; } .phm .ph-day .dt { display: none; } .phm .ph-day .add, .phm .ph-day .hrs { grid-area: 1 / 2; } .phm .ph-day .dd { grid-area: 1 / 3; }
@keyframes ty-name-v { 0%, 26% { max-width: 0; } 32%, 100% { max-width: 14ch; } } .is-current .phm .t-name { animation-name: ty-name-v; animation-timing-function: steps(14, end); }
.is-current .phm .dv { animation-name: in38; } .is-current .phm .dv .add, .is-current .phm .dv .hrs { animation-name: in36; } .is-current .phm .subm { animation-name: in46; }
/* b · the questions (round three, 6 Nov: 40% slower, 6 → 8.4 s, and more descriptive): what each press does, the why behind each question, two Rates taken as proposed in one press, the Line typed over the proposal, a hold on the answered state, then Finish V1 */
.wv-b { --loop: 8.4s; --q-open: 92px; } .wv-b .h { align-items: center; } .wv-b .fin { margin-left: auto; } .wv-b .cntb { --n: 3; counter-reset: n var(--n); } .wv-b .cntb::after { content: counter(n) " to settle"; }
.wv-b .leg { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 0 0; font-size: var(--fs-mock-xxs); color: var(--ms-text-3); opacity: var(--on); } .wv-b .leg span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .wv-b .leg b { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 3px; border: 1px solid var(--ms-border-strong); border-radius: 4px; font: 500 var(--fs-mock-xxs)/1 var(--mono); color: var(--ms-text-2); }
.wv-b .qq .qopen { gap: 3px; padding-top: 5px; padding-bottom: 5px; } .wv-b .qq .qopen .qt { font-size: var(--fs-mock-sm); } .wv-b .why { display: block; font-size: var(--fs-mock-xxs); line-height: 1.35; color: var(--ms-text-2); }
@keyframes cntb { 0%, 33.9% { --n: 3; } 34%, 61.9% { --n: 1; } 62%, 100% { --n: 0; } } .is-current .wv-b .cntb { animation-name: cntb; } .is-current .wv-b .fin { animation-name: in82; } .is-current .wv-b .leg { animation-name: in2; }
@keyframes vg1 { 0%, 4% { height: 0; margin-top: 0; } 7%, 31% { height: var(--gh-h); margin-top: 8px; } 34%, 100% { height: var(--q-done); margin-top: 8px; } }
@keyframes vq-r { 0%, 4% { height: 0; margin-top: 0; opacity: 0; } 7%, 31% { height: var(--q-open); margin-top: 6px; opacity: 1; } 34%, 100% { height: 0; margin-top: 0; opacity: 0; } }
@keyframes vg2 { 0%, 37% { height: 0; margin-top: 0; } 40%, 100% { height: var(--gh-h); margin-top: 8px; } }
@keyframes vq3 { 0%, 37% { height: 0; margin-top: 0; opacity: 0; } 40%, 58% { height: var(--q-open); margin-top: 6px; opacity: 1; } 61%, 100% { height: var(--q-done); margin-top: 6px; opacity: 1; } }
@keyframes ty-line-v { 0%, 46% { max-width: 0; } 50%, 100% { max-width: 2ch; } }
.is-current .v1 .qg-h { animation-name: vg1, in32; } .is-current .v1 .all { animation-name: in28; } .is-current .vq1, .is-current .vq2 { animation-name: vq-r; } .is-current .vq1 .qok, .is-current .vq2 .qok { animation-name: in28; }
.is-current .v2 .qg-h { animation-name: vg2; } .is-current .vq3 { animation-name: vq3; } .is-current .vq3 .t-line { animation-name: ty-line-v; animation-timing-function: steps(2, end); } .is-current .vq3 .qok { animation-name: in54; } .is-current .vq3 .qopen, .is-current .vq3 .qdone { animation-name: in58; }
/* c · the sheet as read in, then the office's red pen onto the crew timesheet card in beats (the hours by rate, Total Pay Hours, Total Pay $, Line #, the totals and summaries, the PM's sign-off), then Filed */
.wv-c { --loop: 10.4s; justify-content: center; } /* round three (6 Nov): 30% slower (8 → 10.4 s), and the answers to the sheet's questions carried onto it (they replace the Read / pen line): each answer turns red as the pen writes it */
.ans { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; padding: 2px 0 8px; overflow: hidden; font: 500 var(--fs-mock-xxs)/1.4 var(--ms-font); color: var(--ms-text-3); opacity: var(--on); } .ans .lb { letter-spacing: .04em; text-transform: uppercase; }
.ans .a { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border: 1px solid color-mix(in srgb, var(--ms-danger) calc(var(--on) * 100%), var(--ms-border)); border-radius: 5px; background: color-mix(in srgb, var(--ms-danger-bg) calc(var(--on) * 100%), var(--ms-ok-bg)); color: color-mix(in srgb, var(--ms-danger) calc(var(--on) * 100%), var(--ms-text)); white-space: nowrap; } .ans .a b { color: color-mix(in srgb, var(--ms-danger) calc(var(--on) * 100%), var(--ms-ok)); }
.is-current .ans { animation-name: in6; } .is-current .ans .a1 { animation-name: in14; } .is-current .ans .a2 { animation-name: in38; } .is-current .ans .a3 { animation-name: in46; }
.rd { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0 6px; font: 500 var(--fs-mock-sm)/1.4 var(--ms-font); color: var(--ms-text-3); white-space: nowrap; } .rd > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .rd i { font-style: normal; color: var(--ms-ok); font-weight: 600; }
.rd .r1 { opacity: var(--on); } .rd .r2 { display: grid; text-align: right; } .rd .r2 > span { grid-area: 1 / 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .rd .pn { color: var(--ms-danger); opacity: calc(var(--on) - var(--fd)); } .rd .fl { color: var(--ms-ok); opacity: var(--fd); }
.is-current .rd .r1 { animation-name: in4; } .is-current .rd .r2 { animation-name: in14, fd68; }
@property --fd { syntax: '<number>'; inherits: true; initial-value: 0; } @keyframes fd68 { 0%, 68% { --fd: 0; } 70%, 100% { --fd: 1; } }
.wv-c .cc { position: relative; inset: auto; transform: none; flex: none; font-size: var(--cc-fs-v); } .is-current .wv-c .cc { animation-name: none; }
.wv-c .pen { opacity: var(--on); } .is-current .wv-c .p1 { animation-name: in14; } .is-current .wv-c .p2 { animation-name: in22; } .is-current .wv-c .p3 { animation-name: in30; } .is-current .wv-c .p4 { animation-name: in38; } .is-current .wv-c .p5 { animation-name: in46; } .is-current .wv-c .p6 { animation-name: in56; }
.wv-c .cc-ft { display: grid; } .wv-c .cc-ft > span { grid-area: 1 / 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wv-c .cc-ft .ft { opacity: calc(1 - var(--fd)); } .wv-c .cc-ft .fl { opacity: var(--fd); color: var(--ms-ok); font-weight: 600; } .wv-c .cc-ft .fl i { font-style: normal; } .is-current .wv-c .cc-ft { animation-name: fd68; }

/* Used by: a quiet band, six bordered tiles, a muted "Logo" mark until a logo is dropped in (28px tall, greyscale) */
.ws-used .eyebrow-m { display: block; margin-bottom: 16px; }
.ws-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.ws-logos li { height: 72px; border: 1px solid var(--ms-border); border-radius: var(--ms-r); background: var(--ms-surface); display: grid; place-items: center; min-width: 0; padding: 0 12px; }
.ws-logos img, .ws-logos svg { height: var(--logo-h); width: auto; max-width: 100%; filter: grayscale(1); opacity: .8; }
.ws-logos .ph-logo { font: 500 var(--fs-label)/1 var(--ms-font); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
@media (max-width: 639px) { .ws-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .ws-logos li { height: 60px; } }

/* the phone: the stage grows, the questions' sheet becomes one reading strip, the review loses Bid, V2 slides over V1, the drawer fills the stage */
@media (max-width: 639px) { .ws-stage.ws-mock { padding: 8px 14px 10px; } .ws-stage { height: var(--stage-h-m); } .phn { height: calc(var(--stage-h-m) - 24px); } .ws-stage.wv { height: var(--wv-h); } }
@media (max-width: 480px) {
  .s3 { --q-open: 128px; --ccq-k: .34; --ccq-col: 32%; }
  .fu-m { grid-template-columns: 1fr; } .fu-r .ev { font-size: var(--fs-mock-xxs); }
  .rv4 { grid-template-columns: 24px minmax(0, 1fr) 60px 62px 66px; gap: 6px; } .rv4 > span:nth-child(3) { display: none; } .rv4 > span:nth-child(2) { white-space: normal; overflow: visible; text-overflow: clip; }
  .drw, .pdr { width: 100%; }
  .gl { grid-template-columns: 1fr; gap: 8px; padding: 10px 12px; } .gl span { white-space: normal; }
  .pk5 { grid-template-columns: 1fr; } .tree.v2 { position: absolute; inset: 8px 0 0; background: var(--ms-surface); transform: translateX(calc((1 - var(--on)) * 104%)); }
  .s6 { --rh: var(--row-h-m); } .s6 .top .wd { display: none; } .s6 .top .nw { display: inline; } .s6 .r > span:first-child > span small { display: block; margin-left: 0; }
  .s2 .cr { margin-left: -11px; } .s2 .cr small { display: inline; margin-left: 6px; }
  .flt .chip:nth-child(2), .flt .chip:nth-child(3), .flt .chip:nth-child(4) { display: none; } .flt .find { min-width: 68px; } .pdr { top: var(--pdr-top-m); } /* the phone: the day chips go, so the strip fits; the drawer under the shorter strip */
}
/* reduced motion: every slide sits at its end state (the loop's 90 % mark), still */
@media (prefers-reduced-motion: reduce) {
  .is-current .ws-stage, .is-current .ws-stage [class] { animation-play-state: paused; animation-delay: calc(var(--loop) * -0.9); }
}

/* the phone header (WrapDesk rename, 4 Nov): the longer name leaves no room for Log in beside Start a job, so under 640px Log in moves into the menu */
.site-nav .nav-login { display: none; }
@media (max-width: 639px) { .site-acts .btn.is-quiet { display: none; } .site-nav .nav-login { display: block; } .site-h { flex-wrap: wrap; } .site-acts { margin-left: auto; } }
/* the tablet header (Nov 9): with "What is WrapDesk?" first, the four menu links need about 780px beside Log in and Start a job, so from 640 to 799px the header uses the phone's menu too */
@media (min-width: 640px) and (max-width: 799px) { .site-h { flex-wrap: wrap; gap: 10px; } .site-h .site-acts { margin-left: auto; } .site-menu { display: grid; } .site-nav { display: none; order: 3; flex-basis: 100%; flex-direction: column; gap: 0; border-top: 1px solid var(--ms-border); margin-top: 2px; padding: 4px 0 6px; } .site-h.is-open .site-nav { display: flex; } .site-nav a { display: block; padding: 12px 0; line-height: 20px; font-size: var(--fs-body); } .site-acts .btn.is-quiet { display: none; } .site-nav .nav-login { display: block; } }
.site-nav a { white-space: nowrap; }

/* mobile review (Nov 12) — fields under 16 px make an iPhone zoom in on tap (the Contact form was 14 px) */
@media (pointer: coarse) { .fld input, .fld select, .fld textarea { font-size: 16px; } }
@media (max-width: 639px) {
  /* finger-sized (they were 16–38 px tall): the footer links, the page contents, the e-mail addresses on Contact,
     the header button (an invisible tap area, so the header keeps its look) and the carousel dots */
  :root { --tap: 44px; }
  .site-f nav a { padding: 13px 0; }
  .ws-toc a { display: flex; align-items: center; min-height: 44px; }
  .v a, .site-acts .btn { position: relative; }
  .v a::after { content: ""; position: absolute; inset: -14px -4px; }
  .site-acts .btn::after { content: ""; position: absolute; inset: -4px; }
}
/* mobile review, Vlad (Nov 12): on a phone the header stays put — pinned to the top, and the page doesn't bounce */
html, body { overscroll-behavior: none; }
@media (max-width: 799px) {
  .site-h { position: sticky; top: 0; z-index: 30; background: var(--ms-surface); border-bottom: 1px solid var(--ms-border); }
  html { scroll-padding-top: 76px; }   /* a contents link lands below the pinned header, not under it */
}