/* ============================================================
   Animated workflow walkthrough: shared chrome.

   Every walkthrough loads this file, so every walkthrough looks
   identical. Do not fork it per demo. If a demo needs something
   new, add it here so the next one inherits it.
   ============================================================ */

:root{
  --paper:#F5F1EA; --paper-deep:#EDE7DC; --ink:#2B2825; --ink-soft:#4A453F;
  --ink-faint:#8A8278; --sage:#6B7F5C; --sage-deep:#5A6B4A; --sage-light:#8A9A7B;
  --clay:#B8956A; --line:rgba(43,40,37,.10);
  --f-display:'Newsreader',Georgia,serif;
  --f-body:'Inter Tight',system-ui,sans-serif;
  --f-mono:ui-monospace,Consolas,monospace;
  --f-office:'Aptos','Calibri','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);-webkit-font-smoothing:antialiased}

/* The page has to fit one screen: stage, narration, transport, chapters,
   steps, all without scrolling. Vertical budget is tight on purpose. */
.wt-page{max-width:1000px;margin:0 auto;padding:22px 26px 26px}
/* framed inside a write-up: no heading of its own, tighter margins */
.wt-page.embed{padding:14px 16px 16px}
.wt-page h1{font-family:var(--f-display);font-weight:400;font-size:25px;letter-spacing:-.025em;margin:0 0 3px}
.wt-note{color:var(--ink-faint);font-size:12.5px;margin:0 0 14px}

/* ================= stage ================= */
.stage{position:relative;aspect-ratio:16/9;max-height:56vh;background:#1C1A18;border-radius:7px;overflow:hidden;
       box-shadow:0 20px 44px -24px rgba(43,40,37,.55)}
/* Incoming scene sits above the outgoing one and fades in over the top, so the
   two never show through each other. Every scene needs an opaque background. */
.scene{position:absolute;inset:0;opacity:0;transition:opacity .3s ease;z-index:1;pointer-events:none}
.scene.on{opacity:1;z-index:2}

/* ---------- PDF viewer ---------- */
.pdfapp{background:#525659;display:flex;flex-direction:column}
.pdfbar{flex:0 0 34px;background:#323639;display:flex;align-items:center;gap:14px;padding:0 14px;
        color:#d6d6d6;font-size:11.5px;font-family:var(--f-body)}
.pdfbar .fn{max-width:44%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdfbar .pg{margin-left:auto;display:flex;align-items:center;gap:7px;color:#bdbdbd}
.pdfbar .box{background:#1f2224;border:1px solid #4a4e51;border-radius:2px;padding:1px 6px;color:#eee}
.pdfbar .ic{opacity:.75;font-size:13px}
.pdfscroll{flex:1;overflow:hidden;display:flex;justify-content:center;padding-top:14px}
.pdfpage{width:74%;background:#fff;box-shadow:0 3px 14px rgba(0,0,0,.45);padding:26px 30px 0;
         font-family:var(--f-mono);font-size:9px;line-height:1.85;color:#1d1d1d}
.pdfpage .co{font-family:var(--f-office);font-weight:700;font-size:14px;letter-spacing:-.01em}
.pdfpage .rt{font-family:var(--f-office);font-size:10.5px;color:#555;margin-bottom:1px}
.pdfpage .meta{color:#555;margin-bottom:11px}
/* white-space:pre is load-bearing. HTML collapses runs of spaces, and the
   column alignment is what makes this read as a generated report. */
.pdfpage .hdr{font-weight:700;border-bottom:1px solid #999;padding-bottom:2px;margin-bottom:4px;white-space:pre}
.pdfpage .grp{font-weight:700;margin:9px 0 2px}
.pdfpage .grp.faint{color:#666}
.pdfpage .row{padding:0 3px;border-radius:1px;transition:background .4s ease;white-space:pre}
.pdfpage .row.hl{background:#FBE3BC}
.pdfpage .tot{border-top:1px solid #999;margin-top:7px;padding-top:3px;font-weight:700;white-space:pre}

/* ---------- terminal ---------- */
.term{background:#232020;padding:26px 30px;font-family:var(--f-mono);font-size:13.5px;line-height:1.95;color:#E8E2D6}
.term .l{opacity:0;transform:translateY(2px);transition:opacity .14s ease,transform .14s ease;white-space:pre}
.term .l.on{opacity:1;transform:none}
.term .g{color:#9FBE8C}.term .a{color:#E9BE7E}.term .d{color:#8F8878}

/* ---------- Excel ---------- */
.xl{background:#fff;display:flex;flex-direction:column;font-family:var(--f-office)}
.xl-rib{flex:0 0 26px;background:#217346;display:flex;align-items:center;gap:16px;padding:0 12px;
        color:rgba(255,255,255,.82);font-size:11px}
.xl-rib .act{color:#fff;font-weight:600;border-bottom:2px solid #fff;padding-bottom:3px}
.xl-fbar{flex:0 0 25px;display:flex;align-items:center;border-bottom:1px solid #d0cdc7;background:#fff;font-size:11.5px}
.xl-name{width:78px;padding:0 8px;border-right:1px solid #d0cdc7;color:#333;font-family:var(--f-mono);font-size:11px}
.xl-fx{width:26px;text-align:center;color:#777;font-style:italic;border-right:1px solid #d0cdc7}
.xl-formula{padding:0 9px;font-family:var(--f-mono);font-size:11px;color:#1d1d1d;opacity:0;transition:opacity .25s ease}
.xl-formula.on{opacity:1}
.xl-grid{flex:1;overflow:hidden}
.xl table{border-collapse:collapse;width:100%;table-layout:fixed}
.colh td{background:#F1F0EE;border:1px solid #d6d3cd;color:#5a5a5a;font-size:10px;font-weight:400;
         text-align:center;height:17px;padding:0}
.colh td.sel{background:#CFE5D8;color:#183;font-weight:600}
.rn,.colh td.corner{background:#F1F0EE;border:1px solid #d6d3cd;color:#5a5a5a;font-size:10px;
                    text-align:center;width:26px;padding:0}
.rn.sel{background:#CFE5D8;color:#183;font-weight:600}
td.c{border:1px solid #e2e0dc;height:17px;padding:0 6px;font-size:11.5px;color:#1d1d1d;white-space:nowrap;overflow:hidden}
td.c.n{text-align:right;font-variant-numeric:tabular-nums}
td.c.sect{background:#EDE7DC;font-weight:600;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#63605a}
td.c.tot{background:#F6F5F2;font-weight:600;border-top:1px solid #b9b6b0}
td.c.live{transition:background .35s ease}
td.c.live.hot{background:#DFF0E4}
td.c.picked{outline:2px solid #217346;outline-offset:-2px}
.xl-tabs{flex:0 0 22px;background:#F1F0EE;border-top:1px solid #d0cdc7;display:flex;align-items:center;gap:2px;
         padding:0 8px;font-size:10.5px;color:#666}
.xl-tabs .t{background:#fff;border:1px solid #d0cdc7;border-bottom:0;padding:2px 12px;color:#217346;font-weight:600}

/* ---------- pointer ---------- */
.cursor{position:absolute;pointer-events:none;opacity:0;z-index:9;
        transition:opacity .25s ease,left .65s cubic-bezier(.4,0,.2,1),top .65s cubic-bezier(.4,0,.2,1)}
.cursor.on{opacity:1}

/* ================= narration =================
   One sentence. Nothing else lives in this bar. */
.narr{min-height:0;padding:13px 24px 15px;background:var(--paper-deep);
      border:1px solid var(--line);border-top:0;border-radius:0 0 7px 7px}
.narr p{margin:0;font-family:var(--f-display);font-size:21px;line-height:1.3;
        letter-spacing:-.015em;color:var(--ink);
        opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .35s ease}
.narr p.on{opacity:1;transform:none}
.narr b{font-weight:500;color:var(--sage-deep)}

/* ================= transport ================= */
.transport{display:flex;align-items:center;gap:14px;margin-top:13px}
.pp{width:38px;height:38px;flex:0 0 38px;border-radius:50%;cursor:pointer;
    background:var(--sage-deep);border:0;color:var(--paper);
    display:flex;align-items:center;justify-content:center;padding:0}
.pp:hover{background:var(--sage)}
.pp svg{display:block}
.scrub{flex:1;position:relative;height:22px;display:flex;align-items:center;cursor:pointer}
.scrub .track{position:absolute;left:0;right:0;height:4px;background:rgba(43,40,37,.13);border-radius:2px}
.scrub .fill{position:absolute;left:0;height:4px;background:var(--sage);border-radius:2px;width:0}
.scrub .knob{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--sage-deep);
             border:2px solid var(--paper);left:0;transform:translateX(-50%);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.scrub .marks{position:absolute;left:0;right:0;height:4px}
.scrub .mk{position:absolute;top:-3px;width:1px;height:10px;background:rgba(43,40,37,.22)}
.time{font-size:13px;color:var(--ink-faint);font-variant-numeric:tabular-nums;min-width:82px;text-align:right}

/* Navigation, not reading material: chapters across, and only the chapter
   you're in reveals its steps underneath. */
.chapters{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.chip{font-size:12px;color:var(--ink-faint);background:transparent;border:1px solid var(--line);
      border-radius:999px;padding:4px 12px;cursor:pointer;font-family:var(--f-body)}
.chip:hover{color:var(--ink);border-color:var(--ink-faint)}
.chip.on{color:var(--paper);background:var(--sage-deep);border-color:var(--sage-deep)}

.substeps{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:8px;padding-left:2px;min-height:20px}
.substep{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--f-body);font-size:11.5px;line-height:1.2;
         background:transparent;border:0;padding:2px 0;cursor:pointer;color:var(--ink-faint);opacity:.6;
         transition:opacity .25s ease,color .25s ease}
.substep:hover{opacity:1;color:var(--ink-soft)}
.substep .a{font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;opacity:.75}
.substep.me .a{color:var(--ink-faint)}
.substep.script .a{color:var(--sage-deep)}
.substep.agent .a{color:#7A6BA8}
.substep.sys .a{color:#8C6C3E}
.substep.done{opacity:.85}
.substep.now{opacity:1;color:var(--ink);font-weight:500}
.substep + .substep::before{content:'·';color:var(--ink-faint);opacity:.5;margin-right:2px}

/* full-width vs narrow text variants inside the drawn software */
.n-only{display:none}

@media (max-width:900px){
  .narr p{font-size:19px}
  .narr{min-height:88px;padding:13px 16px 16px}
  .substeps{gap:5px 7px}
}

/* ================= phones =================
   640, not 700: the embedded iframe on a desktop build page is ~692px wide,
   and the breakpoint applies to the iframe's own viewport. Set it any higher
   and desktop visitors get the phone layout inside the frame.
   The drawn software has a minimum legible size. Below this width the stage
   goes portrait to buy height, the report swaps to its short lines, and the
   spreadsheet drops the columns that aren't carrying the story. Shrinking
   everything proportionally instead would just make it all unreadable. */
@media (max-width:640px){
  .stage{aspect-ratio:3/4;max-height:none}

  .w-only{display:none}
  .n-only{display:inline}

  .pdfbar{flex-basis:28px;font-size:10px;gap:8px;padding:0 9px}
  .pdfbar .pg{gap:4px}
  .pdfscroll{padding-top:9px}
  .pdfpage{width:95%;padding:14px 12px 0;font-size:10.5px;line-height:1.7}
  .pdfpage .co{font-size:12px}
  .pdfpage .rt{font-size:9.5px}
  .pdfpage .meta{font-size:9px;margin-bottom:8px}

  .term{padding:14px 12px;font-size:10px;line-height:1.75;overflow-x:auto}

  .xl-rib{flex-basis:22px;font-size:9.5px;gap:9px;padding:0 8px}
  .xl-rib span:nth-child(n+5){display:none}
  .xl-fbar{flex-basis:22px;font-size:10.5px}
  .xl-name{width:52px;font-size:10px;padding:0 5px}
  .xl-fx{width:20px}
  .xl-formula{font-size:10px;padding:0 6px}
  .xl [data-c].nc{display:none}
  td.c{height:18px;font-size:12px;padding:0 5px}
  .colh td,.rn{font-size:9.5px;height:15px}
  .rn,.colh td.corner{width:20px}
  td.c.sect{font-size:9px}
  .xl-tabs{flex-basis:18px;font-size:9.5px}
}
@media (prefers-reduced-motion:reduce){
  .scene,.narr p,.term .l,td.c.live,.pdfpage .row,.cursor{transition:none}
}