/* SPDX-FileCopyrightText: 2026 Bluelabs Pty Ltd */
/* SPDX-License-Identifier: MIT */
/* FN3: every function and every call on one zoomable board, in colour, by day or by night.
   The line work stays neutral; colour marks the file a piece of code lives in, the trail a call leaves, and the code itself. */
.as-fn3{margin-top:var(--as-g,24px);--fn3-mono:var(--mono,ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace)}

/* ---- night (default) */
.fn3-card{
  --bg:#141519;--ink:#f3f3f5;--ln:rgba(255,255,255,.62);--dim:rgba(255,255,255,.34);--txt:#9a9ba2;--txt2:#85868d;
  --hex:rgba(255,255,255,.04);--box:#17181c;--box-on:#3a3b40;--box-hover:#26272c;--port:#fff;
  --edge:rgba(255,255,255,.065);--edge-far:rgba(255,255,255,.03);--edge-used:rgba(255,255,255,.3);--edge-lit:rgba(255,255,255,.95);--edge-peek:rgba(255,255,255,.6);
  --glow0:rgba(255,255,255,.34);--glow1:rgba(255,255,255,.09);
  --chrome:rgba(30,31,36,.86);--chrome-ink:#e7e7ea;--chrome-line:rgba(255,255,255,.09);
  --rail:#2a2b31;--rail-edge:rgba(255,255,255,.07);--rail-ink:rgba(255,255,255,.7);--rail-dim:rgba(255,255,255,.3);--rail-hover:rgba(255,255,255,.09);
  --rail-on:rgba(255,255,255,.17);--rail-line:rgba(255,255,255,.14);--rail-th:#7aa3f8;--rail-hg:#ff9d45;
  --f-app:#63e6e2;--f-vault:#c4a1ff;--f-passkey:#4fd1e0;--f-shell:#ffb366;--f-ui:#b8bac2;--f-data:#ff8fb8;--f-sample:#f5d76e;
  --th:#306ff3;--th-soft:rgba(48,111,243,.3);--th-used:rgba(48,111,243,.62);--hg:#ff8a1f;--hg-soft:rgba(255,138,31,.24);--hg-used:rgba(255,138,31,.55);
  --tk:#c9cad0;--tk-k:#7aa2ff;--tk-s:#ff9e7a;--tk-n:#d4a5ff;--tk-t:#5fd4e3;--tk-c:#6e6f78;--gut:#55565e;
  position:relative;height:clamp(520px,82vh,880px);border-radius:22px;background:var(--bg);overflow:hidden;color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.06);transition:background-color .35s}
/* ---- day */
.fn3-card[data-theme="day"]{
  --bg:#f7f7f9;--ink:#1d1d1f;--ln:rgba(0,0,0,.58);--dim:rgba(0,0,0,.3);--txt:#6e6e73;--txt2:#86868b;
  --hex:rgba(0,0,0,.045);--box:#fff;--box-on:#e3e3e8;--box-hover:#efeff3;--port:#1d1d1f;
  --edge:rgba(0,0,0,.07);--edge-far:rgba(0,0,0,.035);--edge-used:rgba(0,0,0,.28);--edge-lit:rgba(0,0,0,.85);--edge-peek:rgba(0,0,0,.5);
  --glow0:rgba(47,107,255,.2);--glow1:rgba(47,107,255,.05);
  --chrome:rgba(255,255,255,.88);--chrome-ink:#1d1d1f;--chrome-line:rgba(0,0,0,.08);
  --rail:#0a0a0a;--rail-edge:transparent;--rail-ink:rgba(255,255,255,.62);--rail-dim:rgba(255,255,255,.28);--rail-hover:rgba(255,255,255,.08);
  --rail-on:rgba(255,255,255,.14);--rail-line:rgba(255,255,255,.14);--rail-th:#6f9cf8;--rail-hg:#ff8a1f;
  --f-app:#0a7f7b;--f-vault:#7a3db8;--f-passkey:#0e6e86;--f-shell:#b25a00;--f-ui:#636366;--f-data:#b4235f;--f-sample:#8a6d00;
  --th:#306ff3;--th-soft:rgba(48,111,243,.24);--th-used:rgba(48,111,243,.55);--hg:#b25500;--hg-soft:rgba(178,85,0,.22);--hg-used:rgba(178,85,0,.5);
  --tk:#3a3a3c;--tk-k:#1f4fbf;--tk-s:#a3381b;--tk-n:#7a3db8;--tk-t:#0e6e86;--tk-c:#8e8e93;--gut:#aeaeb2;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.05)}
.f-app{--fc:var(--f-app)}.f-vault{--fc:var(--f-vault)}.f-passkey{--fc:var(--f-passkey)}.f-shell{--fc:var(--f-shell)}
.f-ui{--fc:var(--f-ui)}.f-data{--fc:var(--f-data)}.f-sample{--fc:var(--f-sample)}
/* layers: THEUS in BlueLabs blue, HOURGLASS orange. They win over the file's colour */
.by-theus{--fc:var(--th)}.by-hourglass{--fc:var(--hg)}

.fn3-vp{position:absolute;inset:0;outline:none;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.fn3-vp.is-dragging{cursor:grabbing}
.fn3-vp:focus-visible{box-shadow:inset 0 0 0 2px #6f9cf8;border-radius:22px}
.fn3-svg{display:block;width:100%;height:100%;font-family:var(--fn3-mono)}
.fn3-empty{margin:0;padding:28px;color:var(--txt);font:500 13px/20px var(--fn3-mono)}
.fn3-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ground and glow (the glow is unchanged from Functions II) */
.fn3-hex{fill:none;stroke:var(--hex);stroke-width:1}
.fn3-gs0{stop-color:var(--glow0)}.fn3-gs1{stop-color:var(--glow1)}.fn3-gs2{stop-color:var(--glow1);stop-opacity:0}
.fn3-g{opacity:0;transition:opacity .45s ease-out}.fn3-g.on{opacity:1;transition-duration:.18s}

/* group headings */
.fn3-gsq{fill:var(--ink)}.fn3-gsq[class*="f-"]{fill:var(--fc)}
.fn3-gtitle{fill:var(--ink);font-size:13px;font-weight:600;letter-spacing:.14em}
.fn3-gsub{fill:var(--txt2);font-size:9.5px;letter-spacing:.04em}
.fn3-gtag{fill:none;stroke:var(--fc);stroke-width:1.2}
.fn3-gtagtext{fill:var(--fc);font-size:9px;font-weight:700;letter-spacing:.12em}
.fn3-sub.by-theus .fn3-subico,.fn3-sub.by-hourglass .fn3-subico,.fn3-right.by-theus .fn3-subico,.fn3-right.by-hourglass .fn3-subico{fill:var(--fc);opacity:1}
.fn3-sub.by-theus .fn3-subtext,.fn3-sub.by-hourglass .fn3-subtext,.fn3-right.by-theus .fn3-subtext,.fn3-right.by-hourglass .fn3-subtext{fill:var(--fc)}
.fn3-sub.by-hourglass .fn3-subbox,.fn3-right.by-hourglass .fn3-rbox,.fn3-sub.by-theus .fn3-subbox,.fn3-right.by-theus .fn3-rbox{stroke:var(--fc);stroke-opacity:.75}

/* edges: faint until a call uses them */
.fn3-edge{fill:none;stroke:var(--edge);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .5s,stroke-width .5s}
.fn3-edge.far{stroke:var(--edge-far)}
.fn3-edge.used{stroke:var(--edge-used);stroke-width:1.1}
.fn3-edge.lit{stroke:var(--edge-lit);stroke-width:1.6;transition-duration:.15s}
.fn3-edge.peek{stroke:var(--edge-peek);stroke-width:1.2;transition-duration:.2s}
/* a call into or inside a layer: dashed in the layer's colour, like the stage's layer wires */
.fn3-edge.by-theus{stroke:var(--th-soft);stroke-dasharray:4 4}
.fn3-edge.by-theus.used{stroke:var(--th-used)}
.fn3-edge.by-theus.lit,.fn3-edge.by-theus.peek{stroke:var(--th);stroke-dasharray:none}
.fn3-edge.by-hourglass{stroke:var(--hg-soft);stroke-dasharray:4 4}
.fn3-edge.by-hourglass.used{stroke:var(--hg-used)}
.fn3-edge.by-hourglass.lit,.fn3-edge.by-hourglass.peek{stroke:var(--hg);stroke-dasharray:none}
/* the trail a packet leaves: three dashes of the edge, each longer and fainter */
.fn3-trail{fill:none;stroke:var(--fc,var(--ink));stroke-linecap:round;transition:opacity .6s ease-out}
.fn3-trail.t1{stroke-width:3;opacity:.95}
.fn3-trail.t2{stroke-width:2.2;opacity:.5}
.fn3-trail.t3{stroke-width:1.6;opacity:.22}
.fn3-trail.out{opacity:0}
.fn3-pk{fill:var(--fc,var(--ink))}

/* a lane */
.fn3-lane{cursor:pointer;outline:none}
.fn3-hit{fill:transparent}
.fn3-lane:hover .fn3-hit{fill:var(--hex)}
.fn3-lane:focus-visible .fn3-port{stroke:#6f9cf8;stroke-width:2}
.fn3-ln{stroke:var(--ln);stroke-width:1.1}.fn3-ln.stub{stroke:var(--dim)}
.fn3-port{fill:var(--fc,var(--port));stroke:none;transition:fill .3s}
.fn3-lane.quiet .fn3-port{fill:none;stroke:var(--fc,var(--dim));stroke-width:1.2;stroke-opacity:.7}
.fn3-notch{fill:var(--ink);opacity:.8;transition:opacity .2s}
.fn3-notch.tap{fill:var(--fc)}
.fn3-walk path{fill:var(--fc,var(--ink))}
.fn3-pill{fill:none;stroke:var(--ink);stroke-opacity:.82;stroke-width:1.3}
.fn3-fill{fill:var(--ink);opacity:.82;transition:opacity .3s}
.fn3-lab{fill:var(--txt2);font-size:9px;font-weight:500;letter-spacing:.02em;transition:fill .25s}
.fn3-tri{fill:none;stroke:var(--ink);stroke-opacity:.86;stroke-width:1.5;stroke-linejoin:round;transition:fill .25s}
.fn3-tick{stroke:var(--ink);stroke-opacity:.6;stroke-width:1.3}
.fn3-tick.th{stroke:var(--th);stroke-opacity:.9;stroke-width:1.5}
.fn3-lane.by-theus .fn3-lab,.fn3-lane.by-hourglass .fn3-lab{fill:var(--fc)}
.fn3-lane.by-theus.quiet .fn3-port,.fn3-lane.by-hourglass.quiet .fn3-port{stroke:var(--fc);stroke-opacity:1}
.fn3-lane.by-theus .fn3-bar,.fn3-lane.by-hourglass .fn3-bar{stroke:var(--fc);stroke-opacity:.55}
.fn3-lane.by-theus .fn3-notch,.fn3-lane.by-hourglass .fn3-notch{fill:var(--fc)}
.fn3-term{fill:var(--ink);opacity:.9}
.fn3-ms{fill:var(--txt);font-size:8px;font-weight:500;letter-spacing:.04em}
.fn3-bar{stroke:var(--ink);stroke-opacity:.5;stroke-width:3;stroke-linecap:round;transition:stroke .3s,stroke-opacity .3s}
.fn3-dots{stroke:var(--ink);stroke-opacity:.42;stroke-width:2;stroke-linecap:round;stroke-dasharray:.1 7 .1 58}
.fn3-lane.idle .fn3-fill{opacity:.5}.fn3-lane.idle .fn3-term{opacity:.45}
.fn3-lane.run .fn3-lab{fill:var(--fc,var(--ink))}
.fn3-lane.run .fn3-ms{fill:var(--ink)}
.fn3-lane.run .fn3-fill{fill:var(--fc,var(--ink));opacity:1}
.fn3-lane.run .fn3-tri{fill:var(--fc,var(--ink));stroke:var(--fc,var(--ink))}
.fn3-lane.run .fn3-bar{stroke:var(--fc,var(--ink));stroke-opacity:1}
.fn3-lane.run.quiet .fn3-port{fill:var(--fc)}
.fn3-lane.ran .fn3-lab{fill:var(--ink)}
.fn3-lane.ran .fn3-fill{fill:var(--fc,var(--ink));opacity:.9}
.fn3-lane.ran .fn3-bar{stroke-opacity:.85}
.fn3-lane.err .fn3-term{fill:#ff6961;opacity:1}.fn3-lane.err .fn3-lab{fill:#ff6961}
/* the light lands in the square */
.fn3-lane.hit .fn3-port{fill:var(--fc,var(--ink));stroke:var(--fc,var(--ink));stroke-width:2.4;stroke-opacity:1}
.fn3-ring{fill:none;stroke:var(--fc,var(--ink));stroke-width:1.4;transform-box:fill-box;transform-origin:center;animation:fn3-ring .65s ease-out forwards}
@keyframes fn3-ring{from{transform:scale(1);opacity:1}to{transform:scale(3.2);opacity:0}}

/* register functions: run key, stage cards, stores */
.fn3-fn{cursor:pointer;outline:none}
.fn3-box{fill:var(--box);stroke:var(--ink);stroke-opacity:.9;stroke-width:1.4;transition:fill .35s}
.fn3-fn.active .fn3-box{fill:var(--box-on)}
.fn3-fn:hover .fn3-box{fill:var(--box-hover)}
.fn3-fn.active:hover .fn3-box{fill:var(--box-on)}
.fn3-fn:focus-visible .fn3-box{stroke:#6f9cf8;stroke-width:2}
.fn3-boxico{fill:var(--ink)}
.fn3-key{fill:var(--ink);font-size:13.5px;font-weight:600;letter-spacing:.06em}
.fn3-key.code{fill:var(--txt)}
.fn3-subbox,.fn3-rbox{fill:var(--box);stroke:var(--ink);stroke-opacity:.55;stroke-width:1.1;transition:stroke-opacity .3s,fill .3s}
.fn3-subico{fill:var(--ink);opacity:.9}
.fn3-subtext{fill:var(--txt);font-size:8px;font-weight:600;letter-spacing:.08em}
.fn3-fn.active .fn3-subbox{stroke-opacity:.95}.fn3-fn.active .fn3-subtext{fill:var(--ink)}
.fn3-joint{fill:none;stroke:var(--ink);stroke-opacity:.7;stroke-width:1}
.fn3-conn{fill:none;stroke:var(--dim);stroke-width:1.1;transition:stroke .3s}
.fn3-fn.active .fn3-conn{stroke:var(--ln)}
.fn3-right.hit .fn3-rbox{fill:var(--box-on);stroke-opacity:1}
.fn3-right.hit .fn3-subtext,.fn3-right.ran .fn3-subtext{fill:var(--ink)}
.fn3-right.ran .fn3-rbox{stroke-opacity:.9}

/* chrome over the board */
.fn3-status{position:absolute;top:12px;left:calc(var(--fn3-sl,0px) + 12px);display:flex;align-items:center;gap:9px;height:36px;box-sizing:border-box;padding:0 14px;border-radius:999px;
  pointer-events:none;background:var(--chrome);box-shadow:inset 0 0 0 1px var(--chrome-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  font:500 10px/1 var(--fn3-mono);letter-spacing:.12em;color:var(--txt2);max-width:calc(100% - 300px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fn3-sttext{overflow:hidden;text-overflow:ellipsis}
.fn3-stmode{font-weight:600;color:var(--txt)}
.fn3-status.compact .fn3-stmore{display:none}
.fn3-stdot{width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.2px var(--txt)}
.fn3-stdot.live{background:var(--ink);box-shadow:none;animation:fn3-beat 1.6s ease-in-out infinite}
@keyframes fn3-beat{50%{opacity:.35}}
/* the toolbar is the stage's tab (APPLICATION-SHELL.md: 28 thick, tools as 10-radius pills 4 in from its 14-radius
   edge, concave 14 shoulders on the board's top edge), placed on the page's centre axis by fn3.js.
   By day it is the stage's own black; by night a raised graphite, so it still reads on the dark board. */
.fn3-rail{position:absolute;top:0;left:var(--fn3-rail-c,50%);z-index:5;width:var(--fn3-rail-w,max-content);height:28px;transform:translateX(-50%);
  user-select:none;-webkit-user-select:none}
.fn3-rail-bg{position:absolute;left:-14px;top:0;overflow:visible;pointer-events:none}
.fn3-rail-bg path{fill:var(--rail);stroke:var(--rail-edge);stroke-width:1}
.fn3-rail-in{position:relative;display:flex;align-items:center;gap:4px;width:100%;height:28px;padding:4px;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;overscroll-behavior-x:contain}
.fn3-rail-in::-webkit-scrollbar{display:none}
.fn3-tool{position:relative;display:grid;place-items:center;flex:none;width:28px;height:20px;padding:0;border:0;border-radius:10px;background:none;
  color:var(--rail-ink);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.fn3-tool::after{content:"";position:absolute;inset:-4px -2px}
.fn3-tool:hover{background:var(--rail-hover)}
.fn3-tool:active{background:var(--rail-on);color:#fff}
.fn3-tool:focus-visible,.fn3-key-btn:focus-visible{outline:2px solid #6f9cf8;outline-offset:-2px}
.fn3-tool svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fn3-tool .i-pause rect,.fn3-tool .i-play{fill:currentColor;stroke:none}
.fn3-tool .i-play{display:none}.fn3-tool.is-paused .i-play{display:inline}.fn3-tool.is-paused .i-pause{display:none}
.fn3-tool.is-paused{background:var(--rail-on);color:#fff}
.fn3-tool .i-sun{display:none}.fn3-tool .i-moon{fill:currentColor;stroke:none}
.fn3-card[data-theme="night"] .fn3-tool .i-sun{display:inline}.fn3-card[data-theme="night"] .fn3-tool .i-moon{display:none}
.fn3-sep{flex:none;width:1px;height:12px;margin:0 2px;background:var(--rail-line)}
.fn3-zl{flex:none;width:38px;text-align:center;font:500 11px/20px -apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-variant-numeric:tabular-nums;
  color:var(--rail-ink)}
.fn3-key-btn{position:relative;display:flex;align-items:center;gap:6px;flex:none;height:20px;padding:0 9px 0 7px;border:0;border-radius:10px;background:none;
  cursor:pointer;font:700 9.5px/1 var(--fn3-mono);letter-spacing:.1em}
.fn3-key-btn::after{content:"";position:absolute;inset:-4px -2px}
.fn3-key-btn:hover{background:var(--rail-hover)}
.fn3-key-btn.by-theus{color:var(--rail-th)}.fn3-key-btn.by-hourglass{color:var(--rail-hg)}
.fn3-kdot{width:7px;height:7px;border-radius:2px;background:var(--fc)}

/* the code at the foot */
.fn3-console{position:absolute;left:0;right:0;bottom:0;height:236px;box-sizing:border-box;padding:40px 28px 18px var(--fn3-cx,28px);pointer-events:none;
  background:linear-gradient(to top,var(--bg) 0,var(--bg) 78%,transparent 100%);font-family:var(--fn3-mono)}
.fn3-chead{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.fn3-csq{width:11px;height:11px;background:var(--fc,var(--txt))}
.fn3-ctitle{font-size:16px;font-weight:600;letter-spacing:.16em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fn3-ccorner{position:relative;width:16px;height:16px;flex:none}
.fn3-ccorner::before{content:"";position:absolute;left:2px;top:3px;border-left:9px solid transparent;border-top:9px solid var(--fc,var(--ink))}
.fn3-ccorner::after{content:"";position:absolute;left:10px;top:-2px;width:1px;height:16px;background:var(--dim)}
.fn3-cmeta{font-size:9.5px;line-height:14px;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fn3-ccode{margin-top:10px;font-size:11.5px;line-height:15.5px}
.fn3-crow{display:flex;gap:14px;white-space:pre;overflow:hidden;color:var(--tk);opacity:.82}
.fn3-crow.cur{opacity:1}
.fn3-cgut{flex:none;width:30px;text-align:right;color:var(--gut);font-variant-numeric:tabular-nums;margin-left:-44px}
.fn3-ctext{overflow:hidden;text-overflow:ellipsis}
.tk-k{color:var(--tk-k)}.tk-s{color:var(--tk-s)}.tk-n{color:var(--tk-n)}.tk-t{color:var(--tk-t)}.tk-c{color:var(--tk-c);font-style:italic}
.fn3-caret{color:var(--ink)}.fn3-caret.off{opacity:0}

@media (max-width:600px){
  .fn3-card{height:clamp(480px,78vh,720px);border-radius:18px}
  .fn3-status{top:40px;left:10px;max-width:calc(100% - 20px)}
  .fn3-console{padding:32px 16px 14px}
  .fn3-ccode{font-size:10.5px;line-height:14px}
}
@media (prefers-reduced-motion:reduce){
  .fn3-g,.fn3-g.on,.fn3-edge,.fn3-fill,.fn3-box,.fn3-bar,.fn3-subbox,.fn3-rbox,.fn3-conn,.fn3-lab,.fn3-tri,.fn3-card,.fn3-trail{transition:none}
  .fn3-stdot.live{animation:none}
  .fn3-ring{animation:none;opacity:0}
}
@media (prefers-contrast:more){
  .fn3-card{--edge:rgba(255,255,255,.16);--txt:#c4c5ca;--txt2:#b4b5bb;--dim:rgba(255,255,255,.6)}
  .fn3-card[data-theme="day"]{--edge:rgba(0,0,0,.18);--txt:#3a3a3c;--txt2:#48484a;--dim:rgba(0,0,0,.55)}
}

/* the stage on this page wears the same colours: THEUS in BlueLabs blue, HOURGLASS orange
   (the shell's defaults are THEUS orange and HOURGLASS purple) */
.as-page{--th:#306ff3;--th-ink:#2457c9;--th-tint:#e8efff;--hg:#ff8a1f;--hg-ink:#b25500;--hg-tint:#fff0e0}

/* in the app shell: FN3 takes the stage's and the code column's place in the card, under the phone. The shell's own
   stage and column stay in the page (hidden), so the shell's layout and code are untouched. */
@media (min-width:1101px){
  .as-trip.has-fn3>.as-stage,.as-trip.has-fn3>.as-fns{visibility:hidden;pointer-events:none}
  .as-trip.has-fn3>.as-fn3{position:absolute;inset:0;margin:0;z-index:2}
  .as-trip.has-fn3>.as-fn3 .fn3-card{height:100%;border-radius:var(--as-phr,22px) 22px 22px var(--as-phr,22px)}
}
@media (max-width:1100px){
  .as-trip.has-fn3>.as-stage,.as-trip.has-fn3>.as-fns{display:none}
  .as-trip.has-fn3>.as-fn3{margin:0}
}