/* =====================================================================================
   First-run walkthrough (app/walkthrough/*) — direction C · Focus, V2 (interactive steps). Kit tokens only (v3-base.css), Pearl only.
   The D30 "say less" carve-out (owner, 2026-10-12) covers [data-tour-root] and nothing else.
   The page recedes under one frosted veil (blur + pearl tint); the target stays crisp in a window cut out of the veil (a
   clip-path hole, spotlight.js) lifted by a soft shadow and an accent glow; the card is a pearl sheet with an optional visual
   plate and a caret toward the window; the welcome is a 640 sheet of chapter tiles over the same veil.
   Motion is JS (the window glides per frame) plus transform/opacity; the wrap-up check draws once (stroke-dashoffset).

   EVERY visual value a designer would tune is a custom property in the first block. Parts: .fc-veil · .fc-win · .fc-card ·
   .fc-plate · .fc-sheet (welcome). Nothing below the first block needs to change for a look sync.
   ===================================================================================== */

.wt-root,dialog.fc-welcome,dialog:has(>.wt-root[data-in-dialog]){
  /* veil: one blur layer, one pearl tint, a touch of desaturation — at three levels (a step's `focus` in script.js): `context` keeps
     the rest of the app readable around the target, `balanced` is the default, `isolate` sets the target apart. The blur radius is
     never animated: a change of level cross-fades two veil layers by opacity (spotlight.js). Phone values are lighter. The
     window's accent ring / halo / glow (alpha per level) is what says "this is the subject": it is strongest at `context`. */
  --wt-veil-color-context:rgb(249 251 253/.20);  --wt-veil-blur-context:1.5px;  --wt-veil-sat-context:.97;  --wt-ring-context:.68;  --wt-halo-context:.17;  --wt-glow-context:.28;
  --wt-veil-color-balanced:rgb(249 251 253/.32); --wt-veil-blur-balanced:3px;    --wt-veil-sat-balanced:.92;  --wt-ring-balanced:.52;  --wt-halo-balanced:.14;  --wt-glow-balanced:.23;
  --wt-veil-color-isolate:rgb(249 251 253/.44);  --wt-veil-blur-isolate:5.5px;   --wt-veil-sat-isolate:.86;   --wt-ring-isolate:.46;   --wt-halo-isolate:.11;   --wt-glow-isolate:.20;
  --wt-veil-flat:rgb(244 247 249/.78);   /* no clip-path path() / no backdrop-filter: a flat tint cast by the window */
  /* window: the crisp cut-out, padded around the target. spotlight.js reads pad (a region), pad-small (a target no bigger than
     48 px: a pill, a nav row) and the minimum radius; a step can override `pad` and `radii` */
  --wt-window-pad:6px;
  --wt-window-pad-small:8px;
  --wt-window-radius-min:12px;
  --wt-ring-a:var(--wt-ring-balanced);--wt-halo-a:var(--wt-halo-balanced);--wt-glow-a:var(--wt-glow-balanced);   /* the root's level overrides these */
  --wt-glow:0 0 0 1px rgb(29 106 208/var(--wt-ring-a)),0 0 0 5px rgb(29 106 208/var(--wt-halo-a)),0 0 30px 2px rgb(29 106 208/var(--wt-glow-a));   /* accent ring + halo + glow (no white border) */
  --wt-window-shadow:0 14px 30px -10px rgb(16 30 42/.30);   /* the lift */
  /* card + welcome sheet */
  --wt-card-bg:rgb(255 255 255/.98);
  --wt-card-filter:none;
  --wt-card-shadow:0 0 0 .5px rgb(16 30 42/.12),0 1px 2px rgb(16 30 42/.06),0 8px 20px -8px rgb(16 30 42/.14),0 28px 56px -18px rgb(16 30 42/.30),inset 0 1px 0 var(--wt-white);
  --wt-card-width:340px;                 /* the card; 20 px of air all round (--wt-card-pad) */
  --wt-card-pad:20px;
  --wt-card-gap:16px;                    /* window → card (read by the placer); the caret takes the first ~10 px */
  --wt-sheet-width:640px;
  --wt-caret-fill:var(--wt-card-bg);
  --wt-caret-ring:0 0 0 .5px rgb(16 30 42/.16);
  --wt-plate-bg:var(--accent-wash);      /* a plate and a welcome tile: one quiet wash and a hairline */
  --wt-plate-edge:inset 0 0 0 .5px var(--hair);
  --wt-close-bg:rgb(255 255 255/.74);
  --wt-white:#fff;                       /* plate surfaces and the tile glyph well */
}
.wt-root[data-level=context]{--wt-ring-a:var(--wt-ring-context);--wt-halo-a:var(--wt-halo-context);--wt-glow-a:var(--wt-glow-context)}
.wt-root[data-level=isolate]{--wt-ring-a:var(--wt-ring-isolate);--wt-halo-a:var(--wt-halo-isolate);--wt-glow-a:var(--wt-glow-isolate)}
.is-phone .wt-root,.is-phone dialog.fc-welcome,.is-phone dialog:has(>.wt-root[data-in-dialog]){--wt-veil-blur-context:1px;--wt-veil-blur-balanced:2.5px;--wt-veil-blur-isolate:4px}

/* The body-mounted root sits above everything the app layers, the search palette (.sp-root, z 80) included. When a step
   lives inside a modal dialog the engine moves the root into it (top layer) and sets --wt-x / --wt-y so it still
   covers the window even where the dialog is the containing block of fixed boxes (glass, a translate). */
.wt-root{position:fixed;inset:0;z-index:90;pointer-events:none;color:var(--ink-1);font:var(--t-body)}
.wt-root[data-in-dialog]{inset:auto;left:var(--wt-x,0px);top:var(--wt-y,0px);width:100vw;height:100vh;height:100dvh}

/* The page takes no clicks while a step shows. LOOK: a click that lands inside the window is Next (engine). GO and DO: spotlight.js
   cuts a hole in the catcher (clip-path) over the lit control, so a real click reaches it and nothing else does. */
.wt-catcher{position:absolute;inset:0;pointer-events:auto;cursor:default}

/* ---------- the veil and its window ---------- */
.fc-veil{position:absolute;inset:0;opacity:0;pointer-events:none;background:var(--lv-color);
  -webkit-backdrop-filter:blur(var(--lv-blur)) saturate(var(--lv-sat));backdrop-filter:blur(var(--lv-blur)) saturate(var(--lv-sat))}
.fc-veil[data-level=context]{--lv-color:var(--wt-veil-color-context);--lv-blur:var(--wt-veil-blur-context);--lv-sat:var(--wt-veil-sat-context)}
.fc-veil[data-level=balanced]{--lv-color:var(--wt-veil-color-balanced);--lv-blur:var(--wt-veil-blur-balanced);--lv-sat:var(--wt-veil-sat-balanced)}
.fc-veil[data-level=isolate]{--lv-color:var(--wt-veil-color-isolate);--lv-blur:var(--wt-veil-blur-isolate);--lv-sat:var(--wt-veil-sat-isolate)}
.fc-win{position:absolute;left:0;top:0;opacity:0;pointer-events:none;box-shadow:var(--wt-glow),var(--wt-window-shadow)}   /* transparent inside; every shadow falls outside the box */
/* A modal dialog's own ::backdrop is what the page behind it sees. While the tour stands in a dialog the veil (inside the dialog)
   tints and blurs the dialog's content, and the backdrop adds only the blur at the step's level, so the page behind recedes too
   (one tint, not two). */
dialog:has(>.wt-root[data-in-dialog][data-level=context]){--wt-bd-blur:var(--wt-veil-blur-context);--wt-bd-sat:var(--wt-veil-sat-context)}
dialog:has(>.wt-root[data-in-dialog][data-level=balanced]){--wt-bd-blur:var(--wt-veil-blur-balanced);--wt-bd-sat:var(--wt-veil-sat-balanced)}
dialog:has(>.wt-root[data-in-dialog][data-level=isolate]){--wt-bd-blur:var(--wt-veil-blur-isolate);--wt-bd-sat:var(--wt-veil-sat-isolate)}
dialog[open]:has(>.wt-root[data-in-dialog])::backdrop{background:transparent!important;-webkit-backdrop-filter:blur(var(--wt-bd-blur,4px)) saturate(var(--wt-bd-sat,.9))!important;backdrop-filter:blur(var(--wt-bd-blur,4px)) saturate(var(--wt-bd-sat,.9))!important}
/* The search palette brings its own black scrim (.sp-scrim, rgba(0,0,0,.5) + blur 8px) and the Book's inspector its own (.ls-scrim).
   While the tour is up the veil is the only dimmer, so both go quiet. */
body:has(.wt-root) :is(.sp-root .sp-scrim,.ls-scrim,.lg-scrim){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---------- the card (V2): one quiet family. A meta line ("Chapter · 3 of 6"), one slim progress bar for the whole tour, the title, one
   sentence, an optional plate, then a footer. Three kinds of step share it (data-mode): look (read: Back / Next), go and do (use the
   real lit control: a quiet "Waiting for your click" in the footer, "Show me" in the same place later; no Next). There is no close
   control in the mandatory flow; a replay of a finished tour gets one (.fc-close). ---------- */
.wt-root .fc-card{position:absolute;left:0;top:0;z-index:1;width:var(--wt-card-width);max-width:calc(100vw - 24px);padding:var(--wt-card-pad);border-radius:var(--r-sheet);pointer-events:auto;
  background:var(--wt-card-bg);-webkit-backdrop-filter:var(--wt-card-filter);backdrop-filter:var(--wt-card-filter);box-shadow:var(--wt-card-shadow)}
.fc-card.is-off{visibility:hidden;pointer-events:none}
.fc-card:focus{outline:none}   /* the card itself takes focus on a GO / DO step (Enter there = Show me); it is not a control */
.fc-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fc-meta{font:500 12px/16px var(--font-ui);letter-spacing:.004em;color:var(--ink-2)}
.fc-meta i{font-style:normal;margin:0 5px;opacity:.55}
.fc-meta b{font-weight:inherit;font-variant-numeric:tabular-nums}
/* the progress bar: one continuous 3 px track, the fill is the whole tour so far. The fill is full width and slides under the
   track's rounded clip (transform only), so its ends never stretch; card.js eases it from the last card's value. */
.fc-prog{height:3px;margin-top:10px;border-radius:var(--r-pill);overflow:hidden;isolation:isolate;background:var(--track)}
.fc-prog>i{display:block;width:100%;height:100%;border-radius:inherit;background:var(--accent);
  transform:translateX(calc((var(--p,0) - 1) * 100%));transition:transform 320ms var(--ease-drawer)}
.fc-text{margin-top:16px}
.fc-title{font:600 17px/1.3 var(--font-ui);letter-spacing:-.012em;color:var(--ink-1)}
.fc-body{margin-top:6px;font:400 14px/1.5 var(--font-ui);color:var(--ink-2);text-wrap:pretty}
/* the inline reference: mirrors the real control the sentence names (a menu item, a button). Inline, so it sits on the text's own
   baseline and never grows the line. */
.fc-ref{display:inline;margin:0 1px;padding:1px 7px;border-radius:6px;background:var(--accent-tint);color:var(--accent-ink);font-size:13px;font-weight:500;white-space:nowrap;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.fc-ref:has(.i){padding-left:5px}
.fc-ref .i{display:inline-block;width:13px;height:13px;margin-right:4px;vertical-align:-2px;stroke-width:2}
.fc-ref.is-btn{background:var(--accent);color:var(--on-accent)}
.fc-ref.is-btn .i{color:var(--on-accent)}
.fc-plate{position:relative;display:flex;align-items:center;justify-content:center;min-height:72px;margin-top:14px;padding:8px;border-radius:var(--r-card);overflow:hidden;
  background:var(--wt-plate-bg);box-shadow:var(--wt-plate-edge)}
.fc-plate:has(.fc-vig){height:88px;padding:0}
.fc-plate[hidden]{display:none}
.fc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
.fc-btns{display:flex;align-items:center;gap:4px;margin-left:auto}
.fc-back{margin-left:-10px;padding:0 10px;color:var(--ink-2)}   /* a quiet text button, optically flush with the text column */
/* Sign out (the veil covers the sidebar's): a quiet text button, in the card's meta line (it never grows the line) and in the welcome's footer */
.fc-signout{padding:0 10px;color:var(--ink-2)}
.fc-card .fc-signout{margin:calc((16px - var(--h-ctl)) / 2) -10px calc((16px - var(--h-ctl)) / 2) 0}
dialog.fc-welcome .fc-signout{order:-1;margin-left:-10px}   /* left of Start in the row; after it in the DOM, so Start stays first in the tab order */
/* the footer's right slot has a fixed height and swaps its content in place: the status, then "Show me" (no jump) */
.fc-end{display:flex;align-items:center;justify-content:flex-end;min-height:var(--h-ctl);margin-left:auto}
.fc-wait{display:inline-flex;align-items:center;gap:8px;font:400 13px/1 var(--font-ui);color:var(--ink-2)}
.fc-wait i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.fc-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;flex:none;width:28px;height:28px;padding:0;border:0;border-radius:50%;
  background:var(--wt-close-bg);box-shadow:0 0 0 .5px var(--hair);color:var(--ink-2)}
.fc-close[hidden]{display:none}
.fc-close .i{width:14px;height:14px;stroke-width:2.14}
@media (hover:hover){.fc-close:hover{color:var(--ink-1)}}

/* the caret: a rounded-tip triangle on the card edge that faces the window. Built for "up" and rotated into place by card.js
   (data-side = which side of the window the card is on); it paints the card's own colour, so the join is seamless. */
.fc-tip{position:absolute;z-index:1;width:24px;height:10.5px;overflow:hidden;pointer-events:none}
.fc-tip[hidden]{display:none}
.fc-tip::before{content:"";position:absolute;left:50%;top:3.1px;width:15px;height:15px;margin-left:-7.5px;border-radius:4px;background:var(--wt-caret-fill);transform:rotate(45deg);box-shadow:var(--wt-caret-ring)}

/* ---------- click affordance (go and do): the lit control pulses a ring outward, and a pointer glides from the card to it and taps
   once (spotlight.js drives the pointer; transform and opacity only) ---------- */
.fc-win.is-click::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 0 2px rgb(29 106 208/.46);
  animation:fc-pulse 1.9s var(--ease-out) infinite;pointer-events:none}
@keyframes fc-pulse{0%{transform:scale(1);opacity:0}14%{opacity:1}100%{transform:scale(var(--fc-sx,1.08),var(--fc-sy,1.08));opacity:0}}
@keyframes fc-ring-in{from{opacity:0}to{opacity:.85}}
.fc-hand{position:absolute;left:0;top:0;z-index:3;width:28px;height:28px;margin:-3px 0 0 -6px;pointer-events:none;will-change:transform;
  filter:drop-shadow(0 3px 4px rgb(16 30 42/.30)) drop-shadow(0 0 .6px rgb(16 30 42/.55))}
.fc-hand svg{display:block;width:28px;height:28px}
.fc-tap{position:absolute;left:0;top:0;z-index:2;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;pointer-events:none;opacity:0;
  background:rgb(29 106 208/.12);box-shadow:0 0 0 1.5px rgb(29 106 208/.50)}
.is-phone .wt-root .fc-hand{width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:rgb(16 30 42/.18);
  box-shadow:inset 0 0 0 2px rgb(255 255 255/.9),0 3px 10px rgb(16 30 42/.28);filter:none}
.is-phone .wt-root .fc-hand svg{display:none}

/* ---------- plate illustrations (visuals.js): kit primitives drawn small, monochrome + accent. A plate is an excerpt, never a copy of
   the target: one lifted subject (.fc-surf) with faint ghost neighbours that fade out at the plate's edges. The rgb() values here
   are alpha steps of --ink-1 / --accent for skeleton bars and hairlines (the kit has tokens for only a few of them). ---------- */
.fc-vig{display:grid;gap:6px;justify-items:center;align-content:center;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(transparent,black 22%,black 78%,transparent);mask-image:linear-gradient(transparent,black 22%,black 78%,transparent)}
.fc-surf{background:var(--wt-white);box-shadow:var(--sh-3),var(--spec)}
.fc-bar{display:block;height:6px;border-radius:3px;background:rgb(16 30 42/.12)}
.fc-bar.s{height:5px;background:rgb(16 30 42/.09)}
.fc-bar.a{background:rgb(29 106 208/.32)}
.fc-ghost{display:flex;align-items:center;gap:10px;width:276px;height:30px;padding:0 14px 0 10px;border-radius:var(--r-ctl);background:rgb(255 255 255/.58);box-shadow:0 0 0 .5px rgb(16 30 42/.07)}
.fc-ghost .fc-dot-s{width:14px;height:14px;flex:none;border-radius:50%;background:rgb(16 30 42/.09)}
.fc-ghost .end{margin-left:auto}
.fc-row{display:flex;align-items:center;gap:10px;width:288px;height:42px;padding:0 14px 0 12px;border-radius:var(--r-card)}
.fc-row .logo{width:22px;height:22px;border-radius:6px}
.fc-row b{font:600 13px/1.2 var(--font-ui);letter-spacing:-.003em;white-space:nowrap}
.fc-row .end{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--font-ui);color:var(--ink-2)}
.fc-row.warn{box-shadow:var(--sh-3),var(--spec),inset 3px 0 0 var(--rq)}
.fc-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--ntc);box-shadow:0 0 0 4px var(--ntc-wash)}
.fc-st{display:inline-grid;place-items:center;min-width:28px;height:22px;padding:0 6px;border-radius:var(--r-tag);background:var(--accent-tint);color:var(--accent-ink);font:600 11px/1 var(--font-ui)}
.fc-av0{color:var(--accent-ink)}.fc-av0 .i{width:58%;height:58%;stroke-width:2.2;opacity:.55}
.fc-logo0{width:22px;height:22px;flex:none;border-radius:6px;background:rgb(16 30 42/.09)}
.fc-st0{display:inline-block;width:28px;height:22px;border-radius:var(--r-tag);background:var(--accent-tint)}
.fc-pip{position:absolute;top:6px;right:5px;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2.5px var(--wt-white)}
.fc-saved{height:38px;padding:0 16px 0 10px;gap:9px;font-weight:600}
.fc-okc{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--pos-wash);color:var(--pos)}.fc-okc .i{width:12px;height:12px;stroke-width:2.8}
.fc-hash{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:var(--r-tag);background:rgb(16 30 42/.06);color:var(--ink-2);font:600 12px/1 var(--font-ui)}

.fc-field{display:flex;align-items:center;gap:8px;width:288px;height:42px;padding:0 10px 0 14px;border-radius:var(--r-card)}
.fc-field .i{color:var(--ink-2)}
.fc-ph{font:400 15px/1 var(--font-ui);letter-spacing:-.006em;color:var(--ink-2)}
.fc-keys{display:flex;gap:4px;margin-left:auto}
.fc-key{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:var(--r-tag);background:rgb(16 30 42/.05);box-shadow:inset 0 0 0 .5px rgb(16 30 42/.10);font:600 12px/1 var(--font-ui);color:var(--ink-2)}
.fc-person{display:flex;align-items:center;gap:10px;width:288px;height:46px;padding:0 14px 0 12px;border-radius:var(--r-card)}
.fc-who{display:grid;gap:2px}.fc-who b{font:600 13px/1.2 var(--font-ui)}.fc-who small{font:400 12px/1.2 var(--font-ui);color:var(--ink-2)}
.fc-menu{display:grid;gap:2px;width:236px;padding:5px;border-radius:var(--r-card)}
.fc-menu span{display:flex;align-items:center;gap:8px;height:26px;padding:0 8px;border-radius:var(--r-row);font:500 12.5px/1 var(--font-ui);color:var(--ink-1)}
.fc-menu span .i{width:14px;height:14px;color:var(--ink-2)}
.fc-menu span.hl{background:var(--accent);color:var(--wt-white)}.fc-menu span.hl .i{color:var(--wt-white)}
.fc-opts{display:flex;gap:8px}
.fc-opt{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--r-ctl);font:500 13px/1 var(--font-ui);color:var(--ink-2);white-space:nowrap}
.fc-opt .i{width:12px;height:12px;stroke-width:2.8;margin-left:-2px}
.fc-opt.on{color:var(--accent-ink);font-weight:600;box-shadow:var(--sh-3),inset 0 0 0 1.5px var(--accent)}
.fc-chips{display:flex;gap:8px;flex-wrap:nowrap}
.fc-chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px 0 11px;border-radius:var(--r-card);font:500 13px/1 var(--font-ui);color:var(--ink-1);white-space:nowrap}
.fc-chip .st{gap:7px}
.fc-pill{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 15px 0 12px;border-radius:var(--r-pill);font:600 13px/1 var(--font-ui);color:var(--accent-ink)}
.fc-pill .i{color:var(--accent)}

.fc-cols{display:grid;grid-template-columns:repeat(3,auto);gap:26px;align-items:start}
.fc-cols>div{display:grid;gap:7px}
.fc-lab{font:var(--t-label);color:var(--ink-2)}
.fc-nv{display:flex;align-items:center;gap:7px}.fc-nv i.ic{width:11px;height:11px;border-radius:3px;background:var(--accent);opacity:.55}
.fc-nv .fc-bar{height:5px}
.fc-notif{display:flex;align-items:center;gap:14px}
.fc-bellb{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%}
.fc-bellb .i{width:20px;height:20px;color:var(--ink-1)}
.fc-lines{display:grid;gap:6px}
.fc-lines .fc-ghost{width:188px;height:28px;background:var(--wt-white);box-shadow:var(--sh-3)}
.fc-lines .fc-ghost+.fc-ghost{opacity:.55}
.fc-tabs{display:flex;gap:2px;padding:3px;border-radius:var(--r-card);width:fit-content}
.fc-tabs span{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:9px;font:500 12.5px/1 var(--font-ui);color:var(--ink-2)}
.fc-tabs span.on{background:var(--accent-tint);color:var(--accent-ink);font-weight:600}
.fc-form{display:grid;gap:6px;width:236px;padding:10px 14px 12px;border-radius:var(--r-card)}
.fc-form .hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.fc-form .hd b{font:600 12.5px/1 var(--font-ui)}
.fc-field-s{height:20px;border-radius:6px;background:rgb(16 30 42/.045);box-shadow:inset 0 0 0 .5px rgb(16 30 42/.10)}
.fc-pf4{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:250px;padding:10px;border-radius:var(--r-card)}
.fc-pf{display:flex;align-items:center;height:26px;padding:0 10px;border-radius:7px;background:rgb(16 30 42/.045);box-shadow:inset 0 0 0 .5px rgb(16 30 42/.10);font:500 11.5px/1 var(--font-ui);color:var(--ink-2)}
.fc-say{font:600 12px/1.2 var(--font-ui);color:var(--wt-white);white-space:nowrap}
.fc-ask{display:grid;gap:10px;width:240px;padding:11px 12px 12px;border-radius:var(--r-card)}
.fc-ask .hd{display:flex;align-items:center;gap:6px;font:600 12.5px/1 var(--font-ui);color:var(--accent-ink)}.fc-ask .hd .i{width:14px;height:14px;color:var(--accent)}
.fc-ask .in{display:flex;align-items:center;gap:8px;height:30px;padding:0 4px 0 10px;border-radius:9px;background:rgb(16 30 42/.045);box-shadow:inset 0 0 0 .5px rgb(16 30 42/.10)}
.fc-ask .send{display:grid;place-items:center;width:22px;height:22px;margin-left:auto;border-radius:50%;background:var(--accent);color:var(--wt-white)}.fc-ask .send .i{width:12px;height:12px;stroke-width:2.6}
.fc-stp{display:flex;align-items:flex-start;width:292px}
.fc-stp>div{flex:1;display:grid;justify-items:center;gap:6px;position:relative;font:500 11.5px/1 var(--font-ui);color:var(--ink-2)}
.fc-stp>div::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--wt-white);box-shadow:inset 0 0 0 2px rgb(16 30 42/.18);position:relative;z-index:1}
.fc-stp>div:not(:last-child)::after{content:"";position:absolute;left:calc(50% + 10px);right:calc(-50% + 10px);top:5px;height:2px;border-radius:1px;background:var(--track)}
.fc-stp>div.done::before{background:var(--accent);box-shadow:none}
.fc-stp>div.done::after{background:var(--accent)}
.fc-stp>div.cur::before{background:var(--wt-white);box-shadow:inset 0 0 0 3.5px var(--accent),0 0 0 3px var(--accent-tint)}
.fc-stp>div.done,.fc-stp>div.cur{color:var(--ink-1)}
.fc-stp>div.cur{font-weight:600}
.fc-tiles{display:flex;align-items:center;gap:8px}
.fc-tiles .arrow{color:var(--ink-2);opacity:.6}
.fc-tl{display:grid;justify-items:center;gap:6px;font:500 11px/1 var(--font-ui);color:var(--ink-2)}
.fc-tl .fc-surf{display:grid;place-items:center;width:46px;height:40px;border-radius:var(--r-card);color:var(--accent)}
.fc-tl .fc-surf .i{width:18px;height:18px}
.fc-rec{display:grid;gap:7px;width:288px}
.fc-rec .hd{display:flex;align-items:center;gap:10px;padding:0 4px}
.fc-rec .hd .av{width:26px;height:26px;font-size:10px}
.fc-seg{display:inline-flex;align-items:center;height:32px;padding:3px;border-radius:var(--r-ctl);background:rgb(16 30 42/.07);box-shadow:inset 0 0 0 .5px rgb(16 30 42/.05)}
.fc-seg span{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 14px;border-radius:6px;font:500 12.5px/1 var(--font-ui);color:var(--ink-1)}
.fc-seg span.on{background:var(--wt-white);font-weight:600;box-shadow:0 0 0 .5px rgb(16 30 42/.14),0 1px 2px rgb(16 30 42/.14)}
.fc-seg .av{width:18px;height:18px;font-size:8px}
.fc-bars{display:flex;align-items:flex-end;gap:6px;height:56px}
.fc-bars i{display:block;width:14px;border-radius:3px 3px 1.5px 1.5px;background:var(--data-seq-2)}
.fc-bars i:nth-child(n+5){background:var(--data-seq-4)}
.fc-kpis{display:flex;align-items:center;gap:20px}
.fc-kpis .fc-surf{display:grid;gap:5px;min-width:78px;padding:9px 11px;border-radius:var(--r-card)}
.fc-kpis .k{font:600 10.5px/1 var(--font-ui);color:var(--ink-2)}
.fc-pod{display:flex;align-items:flex-end;gap:6px}
.fc-pod>div{display:grid;justify-items:center;gap:5px}
.fc-pod .av{width:22px;height:22px;font-size:9px}
.fc-pod .blk{display:grid;place-items:start center;padding-top:5px;width:56px;border-radius:7px 7px 3px 3px;background:rgb(255 255 255/.8);box-shadow:var(--sh-3);font:600 12px/1 var(--font-ui);color:var(--ink-2)}
.fc-pod .first .blk{background:var(--wt-white);color:var(--accent-ink);box-shadow:var(--sh-3),inset 0 2px 0 var(--accent)}
.fc-kan{display:flex;gap:7px;align-items:flex-start}
.fc-kan>div{display:grid;gap:5px;width:84px;padding:6px;border-radius:9px;background:rgb(255 255 255/.55);box-shadow:0 0 0 .5px rgb(16 30 42/.08)}
.fc-kan .hd{display:block;height:5px;width:34px;border-radius:3px;background:rgb(16 30 42/.16)}
.fc-kan .cd{display:grid;gap:4px;padding:6px;border-radius:6px;background:var(--wt-white);box-shadow:var(--sh-3)}
.fc-kan .cd.a{box-shadow:var(--sh-3),inset 0 0 0 1px var(--accent)}
.fc-cmp{display:flex;gap:10px}
.fc-cmp .fc-surf{display:grid;gap:6px;width:128px;padding:10px 12px;border-radius:var(--r-card)}
.fc-plate .fc-cmp .top{position:static;display:flex;align-items:center;justify-content:space-between;height:auto;padding:0;box-shadow:none}   /* not the phone's header.top */
.fc-cmp .fc-surf.on{box-shadow:var(--sh-3),inset 0 0 0 1.5px var(--accent)}
.fc-cmp .tick{display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:var(--accent);color:var(--wt-white)}.fc-cmp .tick .i{width:9px;height:9px;stroke-width:3.2}
.fc-chat{display:grid;gap:6px;width:262px}
.fc-bub{display:grid;gap:5px;width:fit-content;max-width:196px;padding:8px 11px;border-radius:12px 12px 12px 4px;background:var(--wt-white);box-shadow:var(--sh-3)}
.fc-bub.me{justify-self:end;border-radius:12px 12px 4px 12px;background:var(--accent)}
.fc-bub.me .fc-bar{background:rgb(255 255 255/.7)}
.fc-lock{display:flex;align-items:center;gap:10px;width:260px;height:42px;padding:0 12px;border-radius:var(--r-card);color:var(--ink-2)}
.fc-lock .i{width:16px;height:16px}
.fc-lock b{font:600 13px/1 var(--font-ui);color:var(--ink-1)}
.fc-lock .pro{margin-left:auto;display:inline-grid;place-items:center;height:20px;padding:0 8px;border-radius:var(--r-tag);background:var(--accent-tint);color:var(--accent-ink);font:600 11px/1 var(--font-ui)}

/* ---------- V2 plate pieces: flows, checks, a stepper with an optional stop, details, the example record ---------- */
.fc-flow{display:flex;align-items:center;gap:4px}
.fc-node{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 9px;border-radius:var(--r-card);font:500 11.5px/1 var(--font-ui);color:var(--ink-1);white-space:nowrap}
.fc-node .i{width:13px;height:13px;color:var(--accent)}
.fc-node.on{box-shadow:var(--sh-3),inset 0 0 0 1.5px var(--accent);color:var(--accent-ink);font-weight:600}
.fc-arrow{display:block;flex:none;width:12px;height:14px;color:var(--ink-2);opacity:.55}
.fc-arrow .i{width:12px;height:14px;stroke-width:2.2}
.fc-ckrows{display:grid;gap:6px;width:236px}
.fc-ck{display:flex;align-items:center;gap:10px;height:30px;padding:0 12px;border-radius:var(--r-ctl)}
.fc-ck .bx{display:grid;place-items:center;width:14px;height:14px;flex:none;border-radius:4px;background:var(--wt-white);box-shadow:inset 0 0 0 1px var(--edge-field)}
.fc-ck .bx.on{background:var(--accent);box-shadow:none;color:var(--wt-white)}.fc-ck .bx .i{width:9px;height:9px;stroke-width:3.4}
.fc-stp.opt>div.dash::before{background:var(--wt-white);box-shadow:inset 0 0 0 2px rgb(16 30 42/.22);border:0;outline:1.5px dashed rgb(16 30 42/.28);outline-offset:1.5px}
.fc-stp small{display:block;margin-top:-2px;font:400 10.5px/1 var(--font-ui);color:var(--ink-2)}
.fc-dl{display:grid;gap:0;width:272px;padding:4px 12px;border-radius:var(--r-card)}
.fc-dl>div{display:flex;align-items:center;justify-content:space-between;height:30px;font:400 12px/1 var(--font-ui);color:var(--ink-2)}
.fc-dl>div+div{box-shadow:inset 0 1px 0 var(--hair)}
.fc-dl>div.hl{color:var(--ink-1);font-weight:600;background:var(--accent-wash);margin:0 -12px;padding:0 12px;box-shadow:inset 3px 0 0 var(--accent)}
.fc-dl .tag{height:18px}

/* ---------- the empty-data fallback (a step whose target the account has no data for): a centered card with the real screen drawn
   small — an example, tagged as one — the part the sentence is about lit, the rest quiet ---------- */
.fc-card[data-kind=fallback]{width:380px}
.fc-plate.big{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0;min-height:0;border-radius:12px}
.fc-eg{position:static;align-self:flex-end;margin:10px 12px -2px;display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--r-tag);background:var(--wt-white);box-shadow:var(--sh-3);font:600 11px/1 var(--font-ui);color:var(--ink-2)}
.fc-mr{display:grid;gap:7px;padding:12px}
.fc-mr .blk{border-radius:10px;background:var(--wt-white);box-shadow:var(--sh-3);padding:10px 12px;transition:none}
.fc-mr[data-lit] .blk{opacity:.4}
.fc-mr[data-lit=track] .blk.track,.fc-mr[data-lit=ask] .blk.ask,.fc-mr[data-lit=reply] .blk.ask,.fc-mr[data-lit=number] .blk.dts{opacity:1}
.fc-mr .lit{opacity:1;box-shadow:var(--sh-3),0 0 0 1.5px rgb(29 106 208/.55),0 0 0 4px var(--accent-tint)}
.fc-mr .hd{display:flex;align-items:center;gap:8px;padding:8px 12px}
.fc-mr .hd .tagx{margin-left:auto}
.fc-mr .track ol{margin:0}
.fc-mr .track .trkl li{grid-template-rows:4px 1.5em auto}
.fc-mr .ask .t{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.fc-mr .ask .t b{font:600 12px/1.2 var(--font-ui)}
.fc-mr .ask .t span{font:600 10.5px/1 var(--font-ui);color:var(--ntc-ink)}
.fc-mr .cmp{display:flex;align-items:center;gap:6px;margin-top:9px;padding-top:8px;box-shadow:inset 0 1px 0 var(--hair)}
.fc-mr .cmp .fld{flex:1;height:26px;border-radius:7px;background:rgb(16 30 42/.045);box-shadow:inset 0 0 0 .5px rgb(16 30 42/.10)}
.fc-mr .cmp .clip{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--wt-white);box-shadow:var(--sh-ctl);color:var(--ink-2)}.fc-mr .cmp .clip .i{width:13px;height:13px}
.fc-mr .cmp .rp{display:grid;place-items:center;height:26px;padding:0 11px;border-radius:7px;background:var(--accent);color:var(--wt-white);font:600 11px/1 var(--font-ui)}
.fc-mr .dts{display:grid;gap:0;padding:4px 12px}
.fc-mr .dts>div{display:flex;align-items:center;justify-content:space-between;height:26px;font:400 11.5px/1 var(--font-ui);color:var(--ink-2)}
.fc-mr .dts>div+div{box-shadow:inset 0 1px 0 var(--hair)}
.fc-mr[data-lit=number] .dts>div.num{background:var(--accent-wash);box-shadow:inset 3px 0 0 var(--accent);margin:0 -12px;padding:0 12px;color:var(--ink-1);font-weight:600}

/* ---------- chapter opening: the first beat of a chapter (no buttons; any click or key skips it). The same card, minus the footer. ---------- */
.fc-card[data-kind=chapter]{cursor:default}
.fc-card[data-kind=chapter] .fc-meta{display:block}
.fc-card[data-kind=chapter] .fc-h2{margin-top:16px;font:600 17px/1.3 var(--font-ui);letter-spacing:-.012em;color:var(--ink-1)}
.fc-card[data-kind=chapter] .fc-sub{margin-top:6px;font:400 14px/1.5 var(--font-ui);color:var(--ink-2)}

/* ---------- wrap-up: a check that draws once, the title, one sentence, Done ---------- */
.fc-card[data-kind=done]{padding:28px var(--wt-card-pad) var(--wt-card-pad);text-align:center}
.fc-card[data-kind=done] .fc-text{margin:0}
.fc-card[data-kind=done] .fc-body{margin:6px auto 0;max-width:260px}
.fc-card[data-kind=done] .fc-foot{justify-content:center;margin-top:20px}
.fc-card[data-kind=done] .fc-btns{margin-left:0}
.fc-card[data-kind=done] .btn{padding:0 24px}
.fc-badge{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 14px;border-radius:50%;background:var(--pos-wash);color:var(--pos)}
.fc-badge[hidden]{display:none}
.fc-check{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.fc-check path{stroke-dasharray:1;stroke-dashoffset:1;animation:fc-draw 360ms var(--ease-out) 220ms forwards}
@keyframes fc-draw{to{stroke-dashoffset:0}}
[data-input-modality=keyboard] .fc-check path{animation:none;stroke-dashoffset:0}

/* ---------- the welcome sheet (a native modal dialog: top layer, inert page, focus trap; the veil is the tour root's). Same language as the
   card: 24 px of air, a mark and a title, the chapters as a quiet two-column list (icon, name; a check once done), one primary. ---------- */
dialog.fc-welcome{position:fixed;inset:0;margin:auto;width:min(var(--wt-sheet-width),calc(100% - 24px));height:fit-content;max-height:calc(100% - 24px);overflow:auto;
  padding:24px;border:0;border-radius:var(--r-sheet);color:var(--ink-1);pointer-events:auto;
  background:var(--wt-card-bg);-webkit-backdrop-filter:var(--wt-card-filter);backdrop-filter:var(--wt-card-filter);box-shadow:var(--wt-card-shadow)}
dialog.fc-welcome::backdrop{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}   /* the tour root's veil is already behind it */
.fc-head2{display:flex;align-items:center;gap:14px}
.fc-mark{display:block;width:40px;height:40px;flex:none;border-radius:10px;box-shadow:var(--sh-ctl)}
.fc-h1{font:600 20px/1.25 var(--font-ui);letter-spacing:-.016em}
.fc-sub{margin-top:2px;font:400 14px/1.4 var(--font-ui);color:var(--ink-2)}
.fc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:20px;list-style:none;padding:0}
.fc-tile{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:8px 12px 8px 10px;border:0;border-radius:var(--r-card);text-align:left;color:inherit;font:inherit;
  background:var(--wt-plate-bg);box-shadow:var(--wt-plate-edge)}
button.fc-tile{cursor:default}
.fc-tile-top{display:contents}
.fc-ico{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:var(--r-ctl);background:var(--wt-white);color:var(--accent);box-shadow:var(--sh-ctl)}
.fc-ico .i{width:16px;height:16px}
.fc-name{order:2;font:500 13px/1.3 var(--font-ui);letter-spacing:-.004em;text-wrap:balance}
.fc-num{display:none}
.fc-tick{display:none;order:3;margin-left:auto;color:var(--pos)}
.fc-tile.done .fc-tick{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;background:var(--pos-wash)}
.fc-tick .i{width:11px;height:11px;stroke-width:2.8}
dialog.fc-welcome .fc-foot{margin-top:20px}
dialog.fc-welcome .fc-close{top:16px;right:16px}
@media (hover:hover){button.fc-tile:hover{box-shadow:var(--wt-plate-edge),0 0 0 2px var(--accent-tint)}}
button.fc-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- phone: the card is a bottom sheet above the tab bar (no plate on a step: the caret and the window say where) ---------- */
.is-phone .wt-root .fc-card{width:calc(100vw - 16px);max-width:none;padding:var(--wt-card-pad) var(--wt-card-pad) 16px}
.is-phone .fc-title{font-size:18px}
.is-phone .fc-body{font-size:15px;line-height:1.45}
.is-phone .fc-ref{font-size:14px}
.is-phone .fc-card .btn{height:40px;padding:0 16px;font-size:15px}
.is-phone .fc-card .btn::after{inset:-2px -2px}   /* 40 + 2 + 2 = the 44 px target */
.is-phone .fc-back{margin-left:-12px;padding:0 12px}
.is-phone .fc-card .fc-signout{margin:-12px -12px -12px 0;padding:0 12px}
.is-phone .fc-end{min-height:40px}
.is-phone .fc-wait{font-size:14px}
.is-phone .fc-card .fc-close{top:2px;right:2px;width:44px;height:44px;background:none;box-shadow:none}
.is-phone .fc-card .fc-close::before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--neu-wash)}
.is-phone .fc-card .fc-close .i{position:relative}
.is-phone .wt-root .fc-card[data-kind=fallback]{width:calc(100vw - 16px)}
.is-phone .wt-root .fc-card[data-kind=chapter]{width:min(320px,calc(100vw - 32px))}
.is-phone .wt-root .fc-card[data-kind=done]{width:min(320px,calc(100vw - 40px));padding:24px var(--wt-card-pad) var(--wt-card-pad)}
.is-phone .fc-card[data-kind=done] .btn{height:44px;padding:0 32px}
/* the welcome becomes a bottom sheet: the chapters in one calm list, one tall primary */
.is-phone dialog.fc-welcome{inset:auto 8px 12px;margin:0;width:auto;max-width:none;padding:20px 16px 16px}
.is-phone dialog.fc-welcome[open]{display:flex;flex-direction:column;overflow:hidden}   /* a long list scrolls; the title and Start stay put */
.is-phone dialog.fc-welcome .fc-head2,.is-phone dialog.fc-welcome .fc-foot{flex:none}
.is-phone .fc-head2{gap:12px}
.is-phone .fc-grid{grid-template-columns:minmax(0,1fr);gap:6px;margin-top:16px;min-height:0;overflow:auto;overscroll-behavior:contain}
.is-phone .fc-tile{min-height:44px;padding:6px 12px 6px 10px}
.is-phone .fc-name{font-size:14px}
.is-phone dialog.fc-welcome .fc-foot{display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;gap:4px;margin-top:16px}
.is-phone dialog.fc-welcome .fc-btns{display:grid;gap:2px;width:100%;margin-left:0}
.is-phone dialog.fc-welcome .btn{height:46px;font-size:16px}
.is-phone dialog.fc-welcome .fc-signout{order:0;margin:0}   /* under the tall primary */
.is-phone dialog.fc-welcome .fc-close{top:8px;right:8px}

/* ---------- adaptivity ---------- */
/* touch: 44 px hit areas without moving a visible edge (the kit does this for .is-phone; coarse pointers elsewhere get it too) */
@media (pointer:coarse){.fc-card .btn::after,dialog.fc-welcome .btn::after{content:"";position:absolute;inset:-6px -2px}}
/* no clip-path path(): the veil is dropped and the window casts a flat tint around itself (spotlight.js keeps one at the centre
   for a full-veil step) — no blur, still dimmed, still crisp */
.wt-root[data-veil=flat] .fc-veil{display:none}
.wt-root[data-veil=flat] .fc-win{box-shadow:0 0 0 100vmax var(--wt-veil-flat),var(--wt-window-shadow)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.wt-root,dialog.fc-welcome{--wt-veil-color-context:var(--wt-veil-flat);--wt-veil-color-balanced:var(--wt-veil-flat);--wt-veil-color-isolate:var(--wt-veil-flat);--wt-card-bg:var(--sheet)}}
@media (prefers-reduced-transparency:reduce){
  .wt-root,dialog.fc-welcome{--wt-veil-color-context:rgb(244 247 249/.82);--wt-veil-color-balanced:rgb(244 247 249/.82);--wt-veil-color-isolate:rgb(244 247 249/.82);--wt-card-bg:var(--sheet);--wt-close-bg:var(--sheet)}
  .fc-veil,.fc-card,dialog.fc-welcome{-webkit-backdrop-filter:none;backdrop-filter:none}
  dialog[open]:has(>.wt-root[data-in-dialog])::backdrop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
@media (prefers-contrast:more){
  .wt-root,dialog.fc-welcome{--wt-veil-color-context:rgb(244 247 249/.82);--wt-veil-color-balanced:rgb(244 247 249/.82);--wt-veil-color-isolate:rgb(244 247 249/.82);--wt-card-bg:var(--sheet);--wt-close-bg:var(--sheet)}
  .fc-veil,.fc-card,dialog.fc-welcome{-webkit-backdrop-filter:none;backdrop-filter:none}
  dialog[open]:has(>.wt-root[data-in-dialog])::backdrop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .fc-card,dialog.fc-welcome{box-shadow:var(--wt-card-shadow),inset 0 0 0 1px var(--edge-hc)}}
@media (prefers-reduced-motion:reduce){.fc-check path{animation:none;stroke-dashoffset:0}.fc-prog>i{transition:none}
  .fc-win.is-click::after{animation:fc-ring-in 320ms var(--ease-out) both;transform:scale(calc(1 + (var(--fc-sx,1.08) - 1) * .4),calc(1 + (var(--fc-sy,1.08) - 1) * .4))}   /* one still ring, no pulse, no pointer */}
/* forced colours drop box-shadows: the window keeps an edge, the veil is left to the system */
@media (forced-colors:active){
  .fc-veil{background:color-mix(in srgb,Canvas 60%,transparent)}.fc-win{box-shadow:none;outline:2px solid Highlight}.fc-win.is-click::after{display:none}.fc-tip{display:none}.fc-hand,.fc-tap{display:none}
  .fc-card,dialog.fc-welcome{border:1px solid CanvasText;background:Canvas;color:CanvasText}
  .fc-badge{background:Canvas;color:CanvasText;border:1px solid CanvasText}
  .fc-prog{background:Canvas;outline:1px solid CanvasText}.fc-prog>i{background:Highlight;forced-color-adjust:none}
  .fc-ref{outline:1px solid CanvasText}}