/* ---------------------------------------------------------------------------
   Free TWI — interface styles.
   Colour tokens come from tokens.css, shared with the PDF template so the
   sheet on screen and the sheet on paper cannot drift apart.
   --------------------------------------------------------------------------- */

:root{
  --ink-0:#070B11; --ink-1:#0D1420; --ink-2:#141D2B; --ink-3:#1E2937;
  --sp:4px;
  --shadow-sm:0 1px 2px rgba(14,21,32,.06), 0 1px 3px rgba(14,21,32,.04);
  --shadow-md:0 4px 12px -2px rgba(14,21,32,.08), 0 2px 6px -2px rgba(14,21,32,.05);
  --shadow-lg:0 18px 40px -14px rgba(14,21,32,.22), 0 4px 12px -4px rgba(14,21,32,.08);
  --shadow-glow:0 10px 30px -10px color-mix(in srgb, var(--a) 55%, transparent);
  --max:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:Inter,-apple-system,"Segoe UI",system-ui,sans-serif;
     background:var(--paper);color:var(--body);line-height:1.55;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--a);text-decoration:none}
:focus-visible{outline:2px solid var(--a);outline-offset:2px;border-radius:6px}

/* ---------- type ---------- */
.h1{font-size:clamp(34px,5.2vw,60px);font-weight:800;letter-spacing:-1.8px;line-height:1.04;color:var(--ink)}
.h2{font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.9px;line-height:1.14;color:var(--ink)}
.h3{font-size:19px;font-weight:700;letter-spacing:-.4px;color:var(--ink)}
.lede{font-size:clamp(16px,1.7vw,19px);color:var(--muted);max-width:58ch}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--a)}
.small{font-size:13px;color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:24px}
.wrap-narrow{max-width:560px;margin:0 auto;padding-inline:24px}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:12px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:16px}
.grow{flex:1;min-width:0}

/* ---------- brand mark ---------- */
.brandmark{display:inline-flex;align-items:center;gap:10px;min-height:26px}
.brandmark img{height:26px;max-width:170px;object-fit:contain}
.wordmark{font-weight:800;font-size:17px;letter-spacing:-.5px;color:var(--ink)}
.wordmark em{font-style:normal;background:var(--grad);-webkit-background-clip:text;
             background-clip:text;color:transparent}
.on-dark .wordmark{color:#fff}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
     background:var(--grad);color:#fff;border:none;border-radius:12px;
     padding:13px 22px;font-size:15px;font-weight:600;cursor:pointer;
     box-shadow:var(--shadow-glow);transition:transform .12s ease, box-shadow .12s ease;
     text-align:center;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;box-shadow:none;transform:none;cursor:not-allowed}
.btn-lg{padding:16px 30px;font-size:16px;border-radius:14px}
.btn-block{width:100%}
.btn-ghost{background:var(--paper);color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn-ghost:hover{border-color:var(--muted);background:var(--surf)}
.btn-dark{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);box-shadow:none}
.btn-dark:hover{background:rgba(255,255,255,.16)}
.btn-quiet{background:none;border:none;color:var(--muted);box-shadow:none;padding:8px 10px;font-size:14px}
.btn-quiet:hover{color:var(--ink);background:var(--surf);transform:none}
.link{background:none;border:none;color:var(--a);font-weight:600;cursor:pointer;padding:0;
      text-decoration:underline;text-underline-offset:3px}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:7px}
.lab{font-size:12px;font-weight:600;color:var(--body);letter-spacing:.1px}
.inp{border:1.5px solid var(--line);border-radius:11px;padding:13px 14px;font-size:16px;
     background:var(--paper);color:var(--ink);width:100%;transition:border-color .12s, box-shadow .12s}
.inp::placeholder{color:#A9B4C2}
.inp:focus{outline:none;border-color:var(--a);
           box-shadow:0 0 0 3.5px color-mix(in srgb,var(--a) 13%,transparent)}
.inp:disabled{background:var(--surf);color:var(--muted)}
textarea.inp{resize:vertical;min-height:88px;line-height:1.5}
.hint{font-size:12.5px;color:var(--muted);line-height:1.5}
.code-inp{font-size:30px;letter-spacing:12px;text-align:center;font-weight:700;
          text-transform:uppercase;padding:16px 10px 16px 22px;font-family:ui-monospace,Menlo,monospace}
.form{display:flex;flex-direction:column;gap:17px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}

.alert{font-size:13.5px;border-radius:10px;padding:12px 14px;line-height:1.5}
.alert-err{background:#FDECEC;color:#9B1C23;border:1px solid #F6D2D4}
.alert-warn{background:#FDF8EF;color:#7A5208;border:1px solid #F0D9AE}
.alert-info{background:var(--tint);color:#0A3D82;border:1px solid #CFE3FB}

/* ---------- cards ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;
      box-shadow:var(--shadow-sm)}
.card-pad{padding:22px}
.panel{background:var(--surf);border:1px solid var(--line);border-radius:14px;padding:18px}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
      padding:5px 11px;border-radius:999px;letter-spacing:.2px}
.chip-ok{background:#E2F5EC;color:#0A6B48}
.chip-work{background:#FDF0DC;color:#8A5208}
.chip-no{background:#FDECEC;color:#9B1C23}
.chip-idle{background:var(--surf);color:var(--muted);border:1px solid var(--line)}
.chip-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.chip-work .chip-dot{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* =========================================================================
   LANDING
   ========================================================================= */
.landing{background:var(--paper)}
.topbar{position:sticky;top:0;z-index:40;backdrop-filter:blur(12px);
        background:color-mix(in srgb,var(--ink-0) 82%,transparent);
        border-bottom:1px solid rgba(255,255,255,.07)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;
              gap:16px;padding-block:14px}
.topbar.on-light{background:color-mix(in srgb,#fff 88%,transparent);border-bottom-color:var(--line)}

.hero{background:
        radial-gradient(1100px 520px at 78% -8%, color-mix(in srgb,var(--b) 26%,transparent), transparent 62%),
        radial-gradient(820px 420px at 8% 4%, color-mix(in srgb,var(--a) 30%,transparent), transparent 60%),
        var(--ink-0);
      color:#C9D6E5;padding-block:clamp(56px,8vw,104px);position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:rgba(255,255,255,.09)}
.hero .h1{color:#fff}
.hero .lede{color:#93A6BD;margin-top:18px;font-size:clamp(16px,1.8vw,20px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero-cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.hero-note{margin-top:18px;font-size:13px;color:#6F8199;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* the sheet mock in the hero */
.mock{background:var(--paper);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg);
      transform:rotate(-1.1deg);border:1px solid rgba(255,255,255,.14)}
.mock-hero{background:var(--ink);padding:16px 18px;color:#fff;position:relative}
.mock-hero:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad)}
.mock-hero .e{font-size:8.5px;letter-spacing:1.6px;color:var(--b);font-weight:700}
.mock-hero h4{font-size:18px;font-weight:800;letter-spacing:-.5px;margin-top:7px}
.mock-hero .d{font-size:10.5px;color:#8FA1B7;margin-top:4px}
.mock-row{display:grid;grid-template-columns:82px 1fr 1fr;border-bottom:1px solid var(--line)}
.mock-row>div{padding:10px 12px}
.mock-im{background:var(--surf);padding:8px!important}
.mock-im .ph{width:100%;aspect-ratio:1;border-radius:6px;
             background:linear-gradient(135deg,#D9E4F2,#EFF4FA);display:grid;place-items:center;
             font-size:8.5px;color:var(--muted)}
.mock-im img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px}
.mock-why{background:var(--tint)}
.mock-mini{font-size:8px;font-weight:700;letter-spacing:1.2px;color:var(--muted);margin-bottom:4px}
.mock-why .mock-mini{color:var(--a)}
.mock b{font-size:12px;color:var(--ink)}
.mock p{font-size:10.5px;margin-top:4px;color:var(--body);line-height:1.45}

.section{padding-block:clamp(52px,7vw,88px)}
.section-alt{background:var(--surf);border-block:1px solid var(--line)}
.section-head{max-width:62ch;margin-bottom:42px}
.section-head .h2{margin-top:10px}
.section-head .lede{margin-top:14px}

.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:860px){.steps3{grid-template-columns:1fr}}
.step3{position:relative;padding-top:26px}
.step3 .num{position:absolute;top:0;left:0;width:30px;height:30px;border-radius:9px;
            background:var(--grad);color:#fff;font-weight:700;font-size:14px;
            display:grid;place-items:center;box-shadow:var(--shadow-glow)}
.step3 h3{margin-top:16px;font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.3px}
.step3 p{margin-top:8px;font-size:14.5px;color:var(--muted);line-height:1.6}

.twogrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px);align-items:start}
@media(max-width:880px){.twogrid{grid-template-columns:1fr}}
.deflist{display:flex;flex-direction:column;gap:20px;margin-top:8px}
.deflist div b{display:block;color:var(--ink);font-size:15.5px;font-weight:700;margin-bottom:5px}
.deflist div p{font-size:14.5px;color:var(--muted);line-height:1.6}

.callout{border-left:3px solid var(--a);background:var(--tint);border-radius:0 12px 12px 0;
         padding:18px 20px;font-size:15px;color:var(--ink);line-height:1.6}

/* sample sheet on the landing page */
.sample{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper);
        box-shadow:var(--shadow-md)}
.sample-head{background:var(--ink);color:#fff;padding:20px 24px;position:relative}
.sample-head:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad)}
.sample-head .e{font-size:9px;letter-spacing:1.7px;color:var(--b);font-weight:700}
.sample-head h3{font-size:22px;font-weight:800;letter-spacing:-.6px;margin-top:8px;color:#fff}
.sample-head .d{font-size:12.5px;color:#8FA1B7;margin-top:5px}
.sheet-row{display:grid;grid-template-columns:132px 1fr 1fr;border-bottom:1px solid var(--line)}
.sheet-row>div{padding:15px 17px}
.sheet-im{background:var(--surf);padding:11px!important}
.sheet-im img,.sheet-im .ph{width:100%;aspect-ratio:1;border-radius:8px;object-fit:cover;
                            background:linear-gradient(135deg,#D9E4F2,#EFF4FA)}
.sheet-im .ph{display:grid;place-items:center;font-size:10px;color:var(--muted)}
.sheet-im .ts{font-size:10.5px;color:var(--muted);text-align:center;margin-top:6px}
.sheet-why{background:var(--tint)}
.sheet-mini{font-size:9px;font-weight:700;letter-spacing:1.3px;color:var(--muted);margin-bottom:6px}
.sheet-why .sheet-mini{color:var(--a)}
.sheet-row b{font-size:15px;color:var(--ink);font-weight:700}
.sheet-kp{font-size:13.5px;margin-top:9px;padding-left:15px;position:relative;line-height:1.55}
.sheet-kp:before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
                 border-radius:50%;background:var(--a)}
.tag{display:inline-block;font-size:8.5px;font-weight:700;padding:2px 7px;border-radius:999px;
     margin-left:6px;vertical-align:2px;letter-spacing:.3px}
.tag-ok{background:#E2F5EC;color:#0A6B48}
.tag-ask{background:#FDF0DC;color:#8A5208}
.sheet-none{color:var(--muted);font-style:italic;font-size:13.5px}

.footer{background:var(--ink-0);color:#7488A0;padding-block:38px;font-size:13.5px}
.footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.footer a{color:#A9BDD4}

/* =========================================================================
   APP SHELL
   ========================================================================= */
.app{min-height:100dvh;display:flex;flex-direction:column;background:var(--surf)}
.appbar{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.appbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:13px}
.appbar-actions{display:flex;align-items:center;gap:6px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--grad);color:#fff;
        display:grid;place-items:center;font-size:13px;font-weight:700}

.page{flex:1;padding-block:clamp(26px,4vw,44px)}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
           flex-wrap:wrap;margin-bottom:26px}

.jobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.job{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px;
     text-align:left;cursor:pointer;transition:border-color .14s, box-shadow .14s, transform .14s;
     display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-sm);width:100%}
.job:hover{border-color:color-mix(in srgb,var(--a) 40%,var(--line));
           box-shadow:var(--shadow-md);transform:translateY(-2px)}
.job-title{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.3px;line-height:1.3}
.job-meta{font-size:12.5px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.job-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto}
.job-bar{height:4px;border-radius:999px;background:var(--surf);overflow:hidden}
.job-bar i{display:block;height:100%;background:var(--grad);transition:width .6s ease}

/* Retained recordings. Plain rows: this is a disclosure, not a feature to sell. */
.vrow{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--line)}
.vrow:last-child{border-bottom:0}
.vrow-t{font-size:14.5px;font-weight:650;color:var(--ink)}
.vrow-m{font-size:12.5px;color:var(--muted);margin-top:3px}

.empty{text-align:center;padding:60px 24px;border:1.5px dashed var(--line);border-radius:16px;
       background:var(--paper)}
.empty h3{font-size:19px;color:var(--ink);font-weight:700;margin-bottom:8px}
.empty p{color:var(--muted);font-size:14.5px;max-width:44ch;margin:0 auto 22px}

/* branding card */
.brandcard{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.logo-slot{width:132px;height:66px;border-radius:11px;border:1.5px dashed var(--line);
           display:grid;place-items:center;background:var(--surf);overflow:hidden;
           cursor:pointer;flex:0 0 auto;transition:border-color .14s}
.logo-slot:hover{border-color:var(--a)}
.logo-slot img{max-width:110px;max-height:52px;object-fit:contain}
.logo-slot span{font-size:11.5px;color:var(--muted);text-align:center;padding:8px;line-height:1.4}
.swatches{display:flex;gap:10px;align-items:center}
.swatch{display:flex;flex-direction:column;gap:6px}
.swatch input[type=color]{width:46px;height:34px;padding:3px;border:1.5px solid var(--line);
                          border-radius:9px;background:var(--paper);cursor:pointer}
.swatch span{font-size:10.5px;color:var(--muted);text-align:center}

/* =========================================================================
   HANDOFF / QR
   ========================================================================= */
.handoff{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center}
@media(max-width:700px){.handoff{grid-template-columns:1fr;text-align:center;justify-items:center}}
.qr{width:216px;height:216px;padding:14px;background:#fff;border-radius:16px;
    border:1px solid var(--line);box-shadow:var(--shadow-md)}
.qr svg{width:100%;height:100%;display:block;shape-rendering:crispEdges}
.passcode{font-family:ui-monospace,Menlo,monospace;font-size:29px;font-weight:700;
          letter-spacing:9px;color:var(--ink);background:var(--surf);border:1.5px solid var(--line);
          border-radius:12px;padding:13px 10px 13px 19px;text-align:center;display:inline-block}
.handoff-steps{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:16px}
.handoff-steps li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--body)}
.handoff-steps .n{width:21px;height:21px;border-radius:50%;background:var(--grad);color:#fff;
                  font-size:11px;font-weight:700;display:grid;place-items:center;flex:0 0 auto;margin-top:1px}

/* =========================================================================
   REVIEW WORKSTATION (desktop, three panes)
   ========================================================================= */
.ws{display:grid;grid-template-columns:232px minmax(0,1fr) 330px;gap:0;
    background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;
    box-shadow:var(--shadow-md);min-height:640px}
@media(max-width:1080px){.ws{grid-template-columns:1fr}
  .ws-left{display:none}
  .ws-right{border-left:none;border-top:1px solid var(--line)}}

/* The editor is a workstation, not a page.
   The rest of the app is capped at a 1180px reading measure, which left the
   middle column around 470px — so the sheet could never reach the 8.5in it
   prints at, and what was on screen was a squashed version of the document
   rather than the document. Here the shell gives up its cap entirely and the
   panes fill the window. */
.app-ws .appbar .wrap{max-width:none;padding-inline:20px}
.app-ws .page{padding-block:0;display:flex;min-height:0}
.app-ws .page > .wrap{max-width:none;padding-inline:0;flex:1;display:flex;min-width:0}
.app-ws .ws{flex:1;border:0;border-radius:0;box-shadow:none;min-height:0}

/* Three columns only while the sheet can be shown at full print width:
   8.5in plus the middle's padding plus both side panes is about 1420px.
   Below that the assistant drops underneath rather than the sheet shrinking,
   because the sheet is the thing being worked on. */
.ws-edit{
  grid-template-columns:minmax(340px,30%) minmax(0,1fr);
  grid-template-areas:"src sheet";
}
.ws-edit .ws-left{grid-area:src}
.ws-edit .ws-mid{grid-area:sheet;padding:20px;display:flex;justify-content:center;
  align-items:flex-start}
/* Each pane scrolls inside itself, so the window never scrolls as a whole and
   the sheet stays put while the transcript moves. */
.ws-edit .ws-left{overflow:auto}

/* Below a page's worth of width the source pane goes above the sheet rather
   than squeezing it. */
@media (max-width:980px){
  .ws-edit{grid-template-columns:1fr;grid-template-areas:"src" "sheet"}
  .ws-edit .ws-left{border-right:0;border-bottom:1px solid var(--line)}
}

.ws-left{background:var(--surf);border-right:1px solid var(--line);padding:18px;overflow:auto}
.ws-mid{padding:24px;background:var(--surf);overflow:auto}
.ws-right{background:var(--surf);border-left:1px solid var(--line);padding:18px;
          display:flex;flex-direction:column;gap:12px}
.ws-label{font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:1.2px;
          text-transform:uppercase;margin:16px 0 9px}
.ws-label:first-child{margin-top:0}
.ws-step{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:9px;
         cursor:pointer;border:1px solid transparent;width:100%;text-align:left;background:none}
.ws-step:hover{background:var(--paper)}
.ws-step.on{background:var(--paper);border-color:var(--line);box-shadow:var(--shadow-sm)}
.ws-step .n2{width:21px;height:21px;border-radius:7px;background:var(--paper);
             border:1px solid var(--line);font-size:11px;font-weight:700;color:var(--muted);
             display:grid;place-items:center;flex:0 0 auto}
.ws-step.on .n2{background:var(--grad);color:#fff;border-color:transparent}
.ws-step span{font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-step.flag .n2{background:#FDF0DC;color:#8A5208;border-color:#F0D9AE}

.chat{flex:1;display:flex;flex-direction:column;gap:10px;overflow:auto;min-height:130px}
.msg{border-radius:12px;padding:11px 13px;font-size:13.5px;line-height:1.55;max-width:100%}
.msg-you{background:var(--grad);color:#fff;margin-left:24px}
.msg-sys{background:var(--paper);border:1px solid var(--line);color:var(--body)}
.msg-err{background:#FDECEC;border:1px solid #F6D2D4;color:#9B1C23}
.composer{display:flex;gap:9px;align-items:flex-end;border:1.5px solid var(--line);
          border-radius:12px;background:var(--paper);padding:9px 9px 9px 13px}
.composer textarea{border:none;background:none;resize:none;font-size:14px;flex:1;
                   max-height:110px;min-height:24px;line-height:1.5;outline:none}
.send{width:34px;height:34px;border-radius:9px;background:var(--grad);border:none;color:#fff;
      font-size:15px;cursor:pointer;flex:0 0 auto;display:grid;place-items:center}
.send:disabled{opacity:.4;cursor:not-allowed}

/* =========================================================================
   MOBILE CAPTURE
   ========================================================================= */
.capture{min-height:100dvh;background:#05080C;color:#E4ECF6;display:flex;flex-direction:column}
.capture > div{flex:1;display:flex;flex-direction:column;min-height:0}
.cap-pad{padding:26px 22px calc(26px + env(safe-area-inset-bottom))}
.cap-title{font-size:25px;font-weight:800;color:#fff;letter-spacing:-.7px;line-height:1.15}
.cap-sub{color:#8397AF;font-size:14.5px;margin-top:9px}
.cap-job{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
         border-radius:13px;padding:15px 16px;margin-top:22px}
.cap-job .e{font-size:9.5px;letter-spacing:1.4px;color:var(--b);font-weight:700}
.cap-job h2{font-size:18px;color:#fff;font-weight:700;margin-top:6px;letter-spacing:-.3px}
.cap-job p{font-size:13px;color:#8397AF;margin-top:7px;line-height:1.5}
.cap-tips{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:12px}
.cap-tips li{display:flex;gap:11px;font-size:14px;color:#B6C6D9;line-height:1.5}
.cap-tips .b{color:var(--b);flex:0 0 auto;font-weight:700}

.view{flex:1;position:relative;display:flex;flex-direction:column;justify-content:space-between;
      padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom));background:#05080C}
.view video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vtop,.vbot{position:relative;z-index:2}
.vtop{display:flex;justify-content:space-between;align-items:center;gap:10px}
.rec{display:flex;align-items:center;gap:8px;background:rgba(9,14,20,.72);
     border:1px solid rgba(255,110,110,.45);color:#FF9A9A;padding:6px 13px;border-radius:999px;
     font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.rec i{width:8px;height:8px;border-radius:50%;background:#FF5A5A;display:block;
       animation:pulse 1.3s infinite}
.jobchip{font-size:12px;color:#E4ECF6;background:rgba(9,14,20,.72);padding:6px 12px;
         border-radius:999px;max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flip{width:38px;height:38px;border-radius:50%;background:rgba(9,14,20,.72);color:#fff;
      border:1px solid rgba(255,255,255,.18);font-size:16px;cursor:pointer;flex:0 0 auto}
.prompt{background:rgba(6,10,15,.88);border:1px solid rgba(255,255,255,.14);border-radius:14px;
        padding:14px 15px;backdrop-filter:blur(8px)}
.prompt .k{font-size:9.5px;font-weight:700;color:var(--b);letter-spacing:1.1px;margin-bottom:6px}
.prompt p{font-size:14px;line-height:1.45;color:#E9F0F8}
.shutter{display:flex;align-items:center;justify-content:center;gap:30px;padding:20px 0 6px}
.sbtn{width:72px;height:72px;border-radius:50%;border:3.5px solid rgba(255,255,255,.92);
      background:none;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.sbtn i{width:30px;height:30px;border-radius:50%;background:#FF4747;display:block;
        transition:border-radius .18s, width .18s, height .18s}
.sbtn.on i{border-radius:6px;width:26px;height:26px}
.sside{color:#8397AF;font-size:12px;width:64px;text-align:center}
.verr{position:absolute;left:16px;right:16px;bottom:118px;z-index:3;font-size:13.5px;
      background:rgba(155,28,35,.95);color:#fff;padding:12px 14px;border-radius:11px}

/* progress list */
.proc{margin-top:22px;display:flex;flex-direction:column}
.prow{display:flex;gap:13px;align-items:flex-start;padding:11px 0}
.tick{width:23px;height:23px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
      font-size:11px;font-weight:700;color:#fff;background:var(--grad)}
.tick.wait{background:transparent;border:1.5px solid rgba(255,255,255,.2);color:#6F8199}
.tick.run{background:var(--grad);animation:pulse 1.4s infinite}
.prow b{font-size:14.5px;font-weight:600;display:block;color:#fff}
.prow .st{font-size:12.5px;color:#8397AF}
.bar{height:5px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;margin:18px 0}
.bar i{display:block;height:100%;width:0;background:var(--grad);transition:width .6s ease}

/* light variant of the progress list, for desktop */
.proc-light .prow b{color:var(--ink)}
.proc-light .prow .st{color:var(--muted)}
.proc-light .tick.wait{border-color:var(--line);color:var(--muted);background:var(--surf)}
.proc-light .bar{background:var(--surf)}

.center-screen{min-height:100dvh;display:flex;flex-direction:column;align-items:center;
               justify-content:center;text-align:center;padding:28px;gap:16px}
.done-check{width:66px;height:66px;border-radius:50%;background:var(--grad);display:grid;
            place-items:center;color:#fff;font-size:30px;box-shadow:var(--shadow-glow)}

.skeleton{background:linear-gradient(90deg,var(--surf) 25%,#EDF2F9 50%,var(--surf) 75%);
          background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:8px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* ---- admin ---- */
.adm-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-top:20px}
.adm-tile{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.adm-k{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.adm-v{font-size:27px;font-weight:800;color:var(--ink);letter-spacing:-.6px;margin-top:6px;line-height:1.1}
.adm-n{font-size:12.5px;color:var(--muted);margin-top:3px}
.adm-limits{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  align-items:start;margin-top:18px}
/* Tables are the one thing allowed to be wider than the page. */
.adm-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.adm-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
.adm-table th{text-align:left;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:0 12px 9px 0;border-bottom:1px solid var(--line)}
.adm-table td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);vertical-align:top}
.adm-table tr:last-child td{border-bottom:0}
/* A finished sheet with no frames is the failure this page exists to surface. */
.adm-warn{color:#9B1C23;font-weight:700}


/* ---- the source pane: recording and transcript ---- */
/* No forced aspect ratio. A job filmed upright on a phone is not 16:9, and
   pouring it into a 16:9 box either crops the frame or shrinks it to a strip
   between black bars — either way you cannot see what you filmed. The box
   takes the shape of whatever is in it and is bounded by height instead. */
.src-video{position:relative;border-radius:11px;overflow:hidden;background:#0B1018;
  display:grid;place-items:center;min-height:200px;max-height:52vh}
.src-video video{max-width:100%;max-height:52vh;width:auto;height:auto;display:block}
.src-none{padding:20px;text-align:center;font-size:13px;color:#93A3B7;line-height:1.5}
.src-bar{display:flex;align-items:center;gap:10px;margin-top:10px}
.src-play{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
  background:var(--paper);cursor:pointer;font-size:12px;color:var(--ink);flex:none}
.src-play:disabled{opacity:.4;cursor:default}
.src-scrub{flex:1;accent-color:var(--a)}
.src-time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.src-act{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:10px;padding:9px 11px;background:var(--paper);border:1px solid var(--line);
  border-radius:10px}

/* Word-level transcript. Each word carries its own moment and its own end, so
   clicking one marks the start of a stretch, shift-clicking another marks the
   end, and dragging across a run does both at once. */
.tx{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:13px;
  font-size:13.5px;line-height:1.85;max-height:34vh;overflow:auto;color:var(--body)}
.tx .w{cursor:pointer;border-radius:3px;padding:1px 0}
.tx .w:hover{background:var(--tint);box-shadow:0 0 0 2px var(--tint)}
.tx .w.in{background:var(--tint);box-shadow:0 0 0 2px var(--tint)}
.tx .w.on{background:var(--a);color:#fff;box-shadow:0 0 0 2px var(--a)}
.tx-plain{white-space:pre-wrap}

/* ---- the range bar ---- */
/* Always on screen, never hidden behind a successful drag. Whatever is picked
   is written in it in plain numbers, so a range that didn't register looks
   different from one that did — which is the whole failure it replaces. */
.rg{margin-top:10px;padding:11px 12px;background:var(--paper);border:1px solid var(--line);
  border-radius:11px}
.rg-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rg-name{font-size:12.5px;color:var(--ink)}
.rg-clear{padding:2px 8px;font-size:11.5px}
.rg-row{display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px;margin-top:9px}
.rg-f{display:flex;flex-direction:column;gap:3px}
.rg-in{width:74px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;
  background:var(--surf);color:var(--ink);font-size:13px;font-variant-numeric:tabular-nums}
.rg-in:focus{outline:0;border-color:var(--a);box-shadow:0 0 0 2px var(--tint)}
.rg-dash{color:var(--muted);padding-bottom:7px}
.rg-say{margin-top:9px;color:var(--muted);line-height:1.45}
.rg-say.rg-on{color:var(--a);font-variant-numeric:tabular-nums}
.rg-say.rg-bad{color:#C0392B}
.rg-act{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.rg-act button:disabled{opacity:.45;cursor:default}
.rg-act button:disabled:hover{border-color:var(--line);color:var(--body)}

/* ---- the sheet, edited in place ---- */
/* Real page width so what is on screen is the printed measure, not a guess. */
/* Exactly the printed measure when there is room for it, so the line breaks
   and column widths on screen are the ones that come out of the printer. It
   only narrows when the window genuinely cannot hold a page. */
.paper{background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-sm);overflow:hidden;width:8.5in;max-width:100%;margin:0 auto}
.paper [contenteditable]{outline:0;border-radius:4px}
.paper [contenteditable]:hover{box-shadow:0 0 0 3px var(--tint)}
.paper [contenteditable]:focus{box-shadow:0 0 0 2px var(--a)}
.paper tr.on td{background:var(--tint)}

/* Controls that are not part of the printed sheet. */
.row-act{display:flex;gap:6px;margin-top:9px;opacity:0;transition:opacity .12s}
tr:hover .row-act,.row-act:focus-within{opacity:1}
.mini{font-size:11px;font-weight:650;padding:3px 8px;border-radius:7px;cursor:pointer;
  border:1px solid var(--line);background:var(--paper);color:var(--body)}
.mini:hover{border-color:var(--a);color:var(--a)}
.mini.danger:hover{border-color:#C0392B;color:#C0392B}
.mini.ghost{border:0;background:transparent;color:var(--muted);padding:2px 6px;
  position:absolute;right:6px;top:8px;opacity:0}
/* Classifying a key point. An editor-only control, so it lives here rather
   than in the sheet's own stylesheet — nothing in this file can reach paper. */
.kind-pick{display:block;margin-top:9px;font-size:11px;font-weight:600;padding:2px 6px;
  border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--muted);
  opacity:0;transition:opacity .12s;cursor:pointer;max-width:130px}
tr:hover .kind-pick,.kind-pick:focus{opacity:1}
/* A point already classified keeps its control visible: the badge is on the
   printed page, so how it got there should not be hidden behind a hover. */
.col-kp:has(.k-safety) .kind-pick,.col-kp:has(.k-quality) .kind-pick{opacity:1}
.kind-pick:focus{outline:0;border-color:var(--a);color:var(--ink)}

/* Asked for at the desk, but folded away: the job of this form is to get
   someone to the camera, and three more open fields is a wall in front of it. */
.needs-ask{border:1px solid var(--line);border-radius:11px;padding:13px 15px;background:var(--surf)}
.needs-ask summary{cursor:pointer;font-size:14px;font-weight:650;color:var(--ink);
  display:flex;align-items:center;gap:9px}
.needs-ask summary::marker{color:var(--muted)}
.needs-ask[open] summary{margin-bottom:2px}
.needs-ask .form{gap:13px}

/* Choosing what is being captured. Two real alternatives rather than a
   checkbox: they lead to different screens, not to a variation of one. */
.kindpick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.kindpick{grid-template-columns:1fr}}
.kindpick label{display:block;border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;
  cursor:pointer;background:var(--paper);transition:border-color .12s,background .12s}
.kindpick label:hover{border-color:var(--a)}
.kindpick label:has(input:checked){border-color:var(--a);background:var(--tint)}
.kindpick input{margin-right:8px;accent-color:var(--a)}
.kindpick b{font-size:14px;color:var(--ink)}
.kindpick span{display:block;margin-top:4px;font-size:12.5px;color:var(--muted);line-height:1.45}

/* Aiming a frame's zoom. The frame is shown whole here, never already
   cropped — re-aiming a zoom by looking through it is how people get lost. */
.zoomer{position:fixed;inset:0;z-index:60;background:rgba(9,14,20,.62);
  display:grid;place-items:center;padding:24px}
.zoom-panel{background:var(--paper);border-radius:15px;padding:20px;width:min(880px,100%);
  box-shadow:var(--shadow-lg,0 24px 60px rgba(9,14,20,.3))}
.zoom-stage{position:relative;display:grid;place-items:center;background:#0B1018;
  border-radius:10px;overflow:hidden;user-select:none;cursor:crosshair}
.zoom-stage img{max-width:100%;max-height:56vh;display:block;pointer-events:none}
.zoom-sel{position:absolute;border:2px solid var(--a);background:rgba(1,81,190,.14);
  pointer-events:none;box-shadow:0 0 0 9999px rgba(9,14,20,.42)}
tr:hover .mini.ghost{opacity:1}

/* ---- silent stretches and narration ---- */
/* A minute of quiet work used to read the same as a minute of talking. These
   are where a step is usually missing, so they are shown, not skipped. */
.tx-gap{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:10px 0;padding:9px 11px;border:1px dashed var(--line);border-radius:9px;
  background:var(--surf);line-height:1.4}
.tx-gap .small{font-style:italic}

.rec{margin-top:10px;padding:12px 13px;border:1px solid #F0C9C9;background:#FFF7F7;
  border-radius:11px}
.rec-dot{width:9px;height:9px;border-radius:50%;background:#C0392B;flex:none;
  animation:pulse 1.4s ease-in-out infinite}