/* ══ VSSGEO design round 2 · lane "frontdoor" ═══════════════════════════════════════════════
   Overrides for Will's front door. Load AFTER src/front-door/frontdoor.css (and after
   vssgeo-theme.css), with docs/design/round2/frontdoor.js after frontdoor.js.
   Scope: the front door's own selectors, every rule under .fd (or html.fdx-*, set by the lane JS).
   Colours: --vg-* tokens only; the few literals are the same red glows / scrim door.css uses.
   Spacing: 4 · 8 · 16 · 24 · 32 · 48. Targets: 32px pointer, 40px touch. Brand ring on hover + focus.
   Motion roles: Arrive (logo blocks + hero stagger), Guide (one ring sweep on the box), Working
   (Geo + the ring flowing during the hand-off), Rest (nothing loops while nobody's doing anything). */

/* ── lane tokens (new; light values below) ─────────────────────────────────────────────── */
:root{
  --vg-s5:24px; --vg-s6:32px; --vg-s7:48px;             /* the rest of the 8-pt scale (proposed in NORTH-STAR) */
  --fdx-hit:32px;                                       /* smallest target with a pointer … */
  --vg-err-bg:rgba(178,44,46,.14); --vg-err-line:rgba(178,44,46,.55); --vg-err-ink:#ffb4ad;   /* = door #auth .err */
  --vg-ok-bg:var(--vg-accent-soft);
  --fdx-glow:0 8px 24px rgba(178,44,46,.38);            /* the red button glow door.css uses (.gsend, #auth .go) */
}
:root[data-theme="light"]{
  --vg-err-bg:rgba(178,44,46,.08); --vg-err-line:rgba(178,44,46,.45); --vg-err-ink:#8f1f21;
}
@media (pointer:coarse){:root{--fdx-hit:40px}}           /* … and with a thumb */


/* ══ 1 · Shared components: the same hand as door.css ══════════════════════════════════════ */

/* buttons speak in the display face, like .go / .new / #auth .go in the map */
.fd .btn-ghost,.fd .btn-solid,.fd .btn-login,.fd .btn-upgrade,.fd .t-cta,.fd .fdx-btn{font-family:var(--vg-font-display)}

/* the brand ring on everything clickable that didn't have one yet (hover AND keyboard focus) */
.fd .btn-ghost,.fd .theme,.fd .tick,.fd .acct,.fd .t-cta:not(.solid),.fd .faq summary,.fd .fdx-btn:not(.solid),.fd .rail-open-btn{position:relative;isolation:isolate}
.fd .btn-ghost::after,.fd .theme::after,.fd .tick::after,.fd .acct::after,.fd .t-cta:not(.solid)::after,.fd .faq summary::after,
.fd .fdx-btn:not(.solid)::after,.fd .rail-open-btn::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.4px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--vg-ang),var(--vg-gold) 0deg,var(--vg-red) 110deg,var(--vg-blue) 210deg,var(--vg-gold) 330deg,var(--vg-gold) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .22s ease}
.fd .btn-ghost:is(:hover,:focus-visible)::after,.fd .theme:is(:hover,:focus-visible)::after,.fd .tick:is(:hover,:focus-visible)::after,
.fd .acct:is(:hover,:focus-visible)::after,.fd .t-cta:not(.solid):is(:hover,:focus-visible)::after,.fd .faq summary:is(:hover,:focus-visible)::after,
.fd .fdx-btn:not(.solid):is(:hover,:focus-visible)::after,.fd .rail-open-btn:is(:hover,:focus-visible)::after{opacity:1;animation:vg-spin 4.5s linear infinite}
.fd .btn-ghost:hover,.fd .tick:hover,.fd .t-cta:not(.solid):hover,.fd .fdx-btn:not(.solid):hover{border-color:transparent}
/* the rings frontdoor.css already draws: show them for the keyboard too */
.fd .rail-item:focus-visible::after,.fd .hist-item:focus-visible::after,.fd .btn-login:focus-visible::after,.fd .fd-collapse:focus-visible::after,
.fd .x:focus-visible::after,.fd .topnav a:focus-visible::after{opacity:1;animation:vistaspin 4.5s linear infinite}
.fd .send:focus-visible::after{opacity:1;animation:vg-spin 3s linear infinite}

/* keyboard focus is always visible (door.css: 2px accent) */
.fd :focus-visible{outline:2px solid var(--vg-accent);outline-offset:2px}
.fd .composer textarea:focus-visible,.fd .hist-search input:focus-visible{outline:none}   /* these wear the ring / halo instead */

/* red glows: frontdoor.css used an undefined --lift-2, so the glow VANISHED on hover */
.fd .btn-solid:hover,.fd .btn-upgrade:hover,.fd .t-cta.solid:hover,.fd .fdx-btn.solid:hover{box-shadow:var(--fdx-glow)}
.fd .send.on:hover{box-shadow:0 8px 24px rgba(178,44,46,.42)}
.fd .btn-solid:active,.fd .btn-ghost:active,.fd .t-cta:active,.fd .fdx-btn:active{transform:scale(.97)}

/* the close X = door's .dx: 32px circle, rule border, no fill, ring + turn on hover */
.fd .x{width:32px;height:32px;background:none;border:1px solid var(--vg-rule);color:var(--vg-muted)}
.fd .x:hover{background:none;border-color:transparent;color:var(--vg-ink)}
.fd .x::after{inset:-1px;padding:1.3px}


/* ══ 2 · 8-pt spacing + hierarchy ══════════════════════════════════════════════════════════ */

/* rail */
.fd .rail-top{flex:none}                                    /* it shrank to 56px, so the 78px logo poked 7px above the window */
.fd .rail:not(.collapsed) .rail-top{padding:16px 8px 8px 16px;gap:8px;min-height:64px}
.fd .fd-collapse{width:32px;height:32px;border-radius:var(--vg-r-sm)}
.fd .fd-collapse::after{border-radius:var(--vg-r-sm)}
.fd .rail-nav{padding:8px;display:flex;flex-direction:column;gap:4px}
.fd .rail-item{gap:8px;min-height:40px;border-radius:var(--vg-r-sm);transition:background .15s,color .15s,padding-left .2s var(--vg-spring)}
.fd .rail:not(.collapsed) .rail-item{padding:8px}
.fd .rail:not(.collapsed) .rail-item:hover{padding-left:12px}              /* a 4-px micro slide, like door #hist .sess */
.fd .rail-item:hover,.fd .hist-item:hover{background:var(--vg-raise2)}     /* door: hover = raise2 + ring */
.fd .rail-item::after,.fd .hist-item::after,.fd .btn-login::after,.fd .topnav a::after{border-radius:var(--vg-r-sm)}
.fd .rail-item svg{opacity:.8}

.fd .hist-search{padding:8px 8px 0}
.fd .hist-search input{min-height:var(--fdx-hit);padding:8px;border-radius:var(--vg-r-sm);background:var(--vg-raise);border-color:var(--vg-rule);transition:border-color .2s,box-shadow .2s}
.fd .hist-search input:focus{border-color:var(--vg-accent);box-shadow:0 0 0 4px var(--vg-accent-soft)}
.fd .hist{padding:0 8px 8px}
.fd .hist-group{padding:16px 8px 8px}
.fd .hist-item{padding:8px;min-height:var(--fdx-hit);border-radius:var(--vg-r-sm);transition:background .15s,color .15s,padding-left .2s var(--vg-spring)}
.fd .hist-item:hover{padding-left:12px;color:var(--vg-ink)}
/* the "no projects yet" / "nothing matches" states: a designed card, not a stray line */
.fd .hist-empty{margin:8px 0;padding:16px;border:1px dashed var(--vg-rule);border-radius:var(--vg-r);font-size:13px;line-height:1.5;color:var(--vg-muted)}

.fd .rail-foot{padding:8px;gap:4px}
.fd .foot-note{padding:16px 8px 8px;gap:0 8px}
.fd .foot-note b{margin:0 0 4px}
.fd .btn-login{margin-top:8px;min-height:40px;padding:8px 16px;gap:8px;border-radius:var(--vg-r-sm);background:var(--vg-raise);border-color:var(--vg-rule)}
.fd .btn-login:hover{background:var(--vg-raise2)}
.fd .acct{padding:8px;gap:8px;border-radius:var(--vg-r-sm);min-height:48px}
.fd .avatar{width:32px;height:32px}

@media (min-width:761px){
  .fd .rail.collapsed .rail-top{padding:16px 0 40px}
  .fd .rail.collapsed .fd-collapse{top:48px}
  .fd .rail.collapsed .rail-nav,.fd .rail.collapsed .rail-foot{padding:8px}
  .fd .rail.collapsed .rail-item,.fd .rail.collapsed .btn-login,.fd .rail.collapsed .acct{width:40px;min-height:40px;padding:8px 0}
}

/* top bar */
.fd .topbar{padding:8px 24px;min-height:56px;gap:8px}
.fd .brandlab{gap:8px}
.fd .brandlab em{color:var(--vg-muted)}                     /* faint failed contrast in light mode (≈2.8:1) */
.fd .topnav{margin-left:24px;gap:4px}
.fd .topnav a{padding:8px 16px;min-height:var(--fdx-hit);display:inline-flex;align-items:center;border-radius:var(--vg-r-sm)}
.fd .topbar .right{gap:8px}
.fd .btn-ghost,.fd .btn-solid{min-height:40px;padding:0 16px;font-size:14px;justify-content:center}
.fd .btn-ghost{border-color:var(--vg-rule)}
.fd .theme{width:40px;height:40px}
.fd .theme svg{transition:transform .3s var(--vg-spring)}
.fd .theme:hover{transform:none}                           /* door turns the icon, not the button */
.fd .theme:hover svg{transform:rotate(-18deg)}
.fd .plan-chip{padding:4px 16px;min-height:var(--fdx-hit);display:inline-flex;align-items:center;font-family:var(--vg-font-mono);font-weight:500;border-color:var(--vg-rule)}
.fd[data-user="pro"] .plan-chip,.fd[data-user="ent"] .plan-chip{color:var(--vg-accent);background:var(--vg-accent-soft);border-color:transparent}   /* gold text was ≈1.9:1 on light */
.fd .rail-open-btn{width:40px;height:40px;margin:0 0 0 -8px;border-radius:var(--vg-r-sm)}
.fd .rail-open-btn:hover{background:var(--vg-raise2)}

/* the stage: headline → 16 → lede → 32 → the box → 16 → hint → 8 → way in → 32 → examples */
.fd .stage{padding:0 24px 48px}
.fd .stage .center>h1{margin:0 0 16px}
.fd .lede{margin:0 auto 32px;font-size:15px;line-height:1.6;color:var(--vg-muted)}

/* the question box = the map's Geo message box (door .gbox): 16-px radius, Geo inside, send bottom-right */
.fd .composer{border-radius:var(--vg-r-lg);padding:8px;gap:8px;align-items:flex-end;background:var(--vg-raise);border-color:var(--vg-rule)}
.fd .composer textarea,.fd .composer textarea:focus{padding:8px 0;height:40px;min-height:40px;line-height:24px}
.fd .send{width:40px;height:40px}
.fd .send.on svg{animation-iteration-count:1}              /* the nudge plays once when it arms, then rests */
.fd .hint{margin-top:16px;font-size:12.5px;color:var(--vg-muted)}

/* Geo sits in the box (inserted by the lane JS): listening at rest, working after Enter */
.fd .fdx-geo{flex:none;width:40px;height:40px;display:grid;place-items:center;margin-left:4px}
.fd .fdx-geo img{display:block;width:27px;height:18px;image-rendering:pixelated;transition:transform .35s var(--vg-spring)}
.fd .composer:focus-within .fdx-geo img{transform:translateY(-2px)}
.fd.fdx-working .fdx-geo img{width:33px;height:22px;transform:none}

/* a way in without a question: never a dead end */
.fd .fdx-way{margin:8px 0 0;text-align:center;font-size:12.5px;line-height:1.5;color:var(--vg-muted)}
.fd .fdx-way a{display:inline;padding:8px 0;color:var(--vg-ink);font-weight:600;   /* inline padding: a 32-px hit area without loosening the line */
  text-decoration:underline;text-decoration-color:var(--vg-rule);text-underline-offset:4px;text-decoration-thickness:1px;transition:text-decoration-color .15s}
.fd .fdx-way a:hover{text-decoration-color:var(--vg-accent)}
.fd .fdx-way a::after{content:"→";margin-left:4px;display:inline-block;transition:transform .25s var(--vg-spring)}
.fd .fdx-way a:hover::after{transform:translateX(4px)}

/* the examples: door chips (pill, raise, ring + accent-soft on hover) */
.fd .ticker{margin-top:32px;animation-duration:.4s;animation-delay:.3s}
.fd .tick-row{gap:8px;padding:4px 0}
.fd .tick{padding:8px 16px;min-height:var(--fdx-hit);border-color:var(--vg-rule);transition:transform .25s var(--vg-spring),border-color .18s,background .18s,color .18s}
.fd .tick:hover{background:var(--vg-accent-soft);color:var(--vg-ink);transform:translateY(-2px)}
.fd .tick:active{transform:scale(.96)}
.fd .sugg-hint{margin-top:16px;font:600 10.5px var(--vg-font-display);letter-spacing:.12em;color:var(--vg-faint)}
.fd .legal{padding:0 24px 16px}

/* pop-ups (plans, how it works): the same sheet as #auth in the map */
.fd .modal{background:var(--vg-panel);border-color:var(--vg-rule);border-radius:var(--vg-r-lg)}
.fd .modal-head{padding:32px 32px 0;gap:16px}
.fd .modal-head p{margin:8px 0 0}
.fd .modal-body{padding:24px 32px 32px}
.fd .tiers{gap:16px}
.fd .tier{padding:24px 16px;gap:8px;border-radius:var(--vg-r-lg)}
.fd .tier::after,.fd .ent::after{border-radius:var(--vg-r-lg)}
.fd .tier:hover{box-shadow:var(--vg-shadow)}                /* was a black 0 16px 40px, heavy on light */
.fd .tier ul{gap:8px}
.fd .tier li{position:relative;padding-left:16px}           /* the gold dots were positioned on the <ul>, not each line */
.fd .tier li::before{left:4px;top:.6em}
.fd .t-tag{border-radius:0 var(--vg-r-lg) 0 var(--vg-r-sm);padding:4px 8px}
.fd .t-tag-want{color:var(--vg-accent-ink)}                 /* dark ink on the light-mode red */
.fd .tier.wanted{box-shadow:0 0 0 1px var(--vg-accent),var(--vg-shadow)}
.fd .t-cr{margin:-4px 0 8px}
.fd .t-cta{min-height:40px;padding:8px 16px;border-radius:var(--vg-pill);display:flex;align-items:center;justify-content:center;font-size:13px;border-color:var(--vg-rule);background:var(--vg-raise2)}
.fd .t-cta.ghost{background:none}
.fd .t-cta.solid{background:var(--vg-red);border-color:var(--vg-red);color:#fff}
.fd .free-strip{margin-top:16px}
.fd .ent{margin-top:16px;padding:24px;border-radius:var(--vg-r-lg)}
.fd .ent-top{gap:24px;padding-bottom:16px;margin-bottom:16px}
.fd .ent-top:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}   /* a closing rule with nothing under it */
.fd .ent-cta{width:auto;padding:8px 24px}
.fd .help-contact{margin-top:24px;padding:24px;border-radius:var(--vg-r-lg)}
.fd .help-contact b{margin-bottom:4px}
.fd .help-contact p{margin:0 0 16px}
.fd .help-contact .t-cta{display:inline-flex;padding:8px 24px}
.fd .faq{gap:0}
.fd .faq details{padding:0}
.fd .faq summary{padding:8px;margin:4px -8px;min-height:40px;gap:8px;border-radius:var(--vg-r-sm)}
.fd .faq summary::before{content:"›";width:16px;text-align:center;font-size:18px;line-height:1;color:var(--vg-accent);transition:transform .25s var(--vg-spring)}
.fd .faq details[open] summary::before{content:"›";transform:rotate(90deg)}
.fd .faq p{margin:0 0 16px 24px;animation:vg-in .25s ease both}

/* phones */
@media (max-width:760px){
  .fd .topbar{padding:8px 16px}
  .fd .stage{padding:0 16px 32px}
  .fd .fd-collapse{width:40px;height:40px;margin:-4px -8px -4px 0}
  .fd .tick{padding:8px 16px;min-height:40px}
  .fd .rail.rail-open{box-shadow:var(--vg-shadow)}
  .fd .modal-head{padding:24px 16px 0}
  .fd .modal-body{padding:16px 16px 24px}
  .fd .back{padding:16px}
}
@media (max-width:560px){ .fd .brandlab em{display:none} }
/* at 375 the bar measured 418px ("Sign up free" was cut off at the edge). Log in stays one tap away in the menu. */
@media (max-width:420px){ .fd .topbar .signed-out .btn-ghost{display:none} }


/* ══ 3 · States: empty · offline · slow · working (the element is added by the lane JS) ═════ */
.fd .fdx-state{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:8px;min-height:24px;
  font-size:13px;line-height:1.5;color:var(--vg-muted);text-align:center;animation:vg-in .25s ease both}
.fd .fdx-state[hidden]{display:none}
.fd .fdx-state:not([hidden])~.hint{display:none}             /* one line of guidance at a time */
.fd[data-fdx="empty"] .fdx-state{color:var(--vg-ink)}
.fd .fdx-dot{width:8px;height:8px;flex:none;border-radius:2px;background:var(--vg-accent)}   /* a block, not a bullet */

/* the card for things that went wrong (door #auth .err, grown up) */
.fd .fdx-card{display:flex;gap:16px;align-items:flex-start;width:100%;text-align:left;padding:16px;border-radius:var(--vg-r);
  background:var(--vg-err-bg);border:1px solid var(--vg-err-line);color:var(--vg-ink)}
.fd .fdx-card.ok{background:var(--vg-ok-bg);border-color:var(--vg-rule)}
.fd .fdx-card img{flex:none;width:27px;height:18px;margin-top:4px;image-rendering:pixelated}
.fd .fdx-card b{display:block;font:600 14px/1.4 var(--vg-font-display);color:var(--vg-ink)}
.fd .fdx-card:not(.ok) b{color:var(--vg-err-ink)}
.fd .fdx-card p{margin:4px 0 0;font-size:13px;color:var(--vg-muted)}
.fd .fdx-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.fd .fdx-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 16px;border-radius:var(--vg-pill);
  border:1px solid var(--vg-rule);background:var(--vg-raise);color:var(--vg-ink);font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;
  transition:transform .25s var(--vg-spring),box-shadow .2s,background .2s}
.fd .fdx-btn.solid{background:var(--vg-red);border-color:var(--vg-red);color:#fff}
.fd .fdx-btn:hover{transform:translateY(-1px)}

/* empty question: the box shakes once (door's vg-shake), the line says what to do */
.fd .composer.fdx-shake{animation:fdx-shake .42s ease both}
@keyframes fdx-shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.fd[data-fdx="offline"] .fdx-card{animation:fdx-shake .42s ease both}

/* the hand-off stays on screen: Geo works on it until the map paints (was: the whole page faded to 0) */
.fd.leaving{opacity:1}
.fd.fdx-working .rail,.fd.fdx-working .topbar,.fd.fdx-working .legal{opacity:.4;transition:opacity .3s ease}
.fd.fdx-working .center>h1,.fd.fdx-working .lede,.fd.fdx-working .fdx-way,.fd.fdx-working .sugg-hint{opacity:0;transition:opacity .25s ease}
.fd.fdx-working .ticker{animation:none;opacity:0;transition:opacity .25s ease}
.fd.fdx-working .composer{box-shadow:0 0 48px var(--vg-accent-soft);border-color:transparent}
.fd.fdx-working .composer textarea{color:var(--vg-muted)}
.fd.fdx-working .send{background:var(--vg-raise2);color:var(--vg-muted);box-shadow:none}
.fd.fdx-working .send svg{animation:none}
.fd.fdx-slow .fdx-state{pointer-events:auto}                 /* .leaving turns pointer events off for the page */

/* the Tetris loader: four blocks drop into place, clear, repeat — only while Geo is working */
.fd .fdx-load{display:inline-grid;grid-template-columns:repeat(4,8px);gap:4px;height:8px;flex:none}
.fd .fdx-load i{width:8px;height:8px;border-radius:2px;background:var(--vg-gold);opacity:0;animation:fdx-fall 1.2s steps(4,end) infinite}
.fd .fdx-load i:nth-child(2){background:var(--vg-red);animation-delay:.15s}
.fd .fdx-load i:nth-child(3){background:var(--vg-blue);animation-delay:.3s}
.fd .fdx-load i:nth-child(4){background:var(--vg-accent);animation-delay:.45s}
@keyframes fdx-fall{0%{opacity:0;transform:translateY(-12px)}35%{opacity:1;transform:none}85%{opacity:1;transform:none}100%{opacity:0;transform:none}}


/* ══ 4 · Motion roles ═══════════════════════════════════════════════════════════════════════ */

/* REST — the box's ring holds still while you're not typing (it used to spin forever: the box is
   focused on load, so the page never rested). It flows while you type, and while Geo works. */
.fd .composer:focus-within::after{animation:vg-spin 6s linear infinite;animation-play-state:paused}
.fd .composer.fdx-typing:focus-within::after{animation-play-state:running}

/* GUIDE — one sweep of the ring round the box when the page lands: "this is where you start" */
@keyframes fdx-sweep{from{--vg-ang:0deg}to{--vg-ang:360deg}}
.fd .composer.fdx-guide::after,.fd .composer.fdx-guide:focus-within::after{opacity:1;animation:fdx-sweep .8s cubic-bezier(.4,0,.2,1) 1 both;animation-play-state:running}
/* …and if nobody has typed after a while, the label under the examples lights up once */
.fd .sugg-hint.fdx-cue{color:var(--vg-accent);animation:vg-in .4s var(--vg-spring) both}

/* WORKING — the ring flows fast round the box while Geo opens the map */
.fd.fdx-working .composer::after,.fd.fdx-working .composer:focus-within::after{opacity:1;animation:vg-spin 1.6s linear infinite;animation-play-state:running}

/* ARRIVE — the logo builds block by block (cells made by the JS), then the hero stacks in */
.fd .fdx-host{position:relative}
.fd img.fdx-hide{visibility:hidden}
.fd .fdx-blocks{position:absolute;pointer-events:none;z-index:1}
.fd .fdx-blocks i{position:absolute;display:block;background-repeat:no-repeat;image-rendering:pixelated;
  animation:fdx-drop .2s steps(4,end) both}
@keyframes fdx-drop{0%{opacity:0;transform:translateY(-300%)}.1%{opacity:1;transform:translateY(-300%)}100%{opacity:1;transform:none}}
html.fdx-arrive .fd .stage .center>h1,html.fdx-arrive .fd .lede,html.fdx-arrive .fd .composer,html.fdx-arrive .fd .hint,html.fdx-arrive .fd .fdx-way{
  animation:vg-in .32s var(--vg-spring) both}
html.fdx-arrive .fd .stage .center>h1{animation-delay:.1s}
html.fdx-arrive .fd .lede{animation-delay:.15s}
html.fdx-arrive .fd .composer{animation-delay:.2s}
html.fdx-arrive .fd .hint,html.fdx-arrive .fd .fdx-way{animation-delay:.25s}

/* reduced motion: everything still, nothing mid-pose; Geo's working state shows as a still frame */
@media (prefers-reduced-motion:reduce){
  .fd .composer::after,.fd .composer.fdx-guide::after,.fd.fdx-working .composer::after,
  .fd .fdx-load i,.fd .fdx-blocks i,.fd .composer.fdx-shake,.fd .fdx-state,.fd .fdx-card,.fd .sugg-hint.fdx-cue,.fd .faq p,
  .fd .btn-ghost::after,.fd .theme::after,.fd .tick::after,.fd .acct::after,.fd .t-cta::after,.fd .faq summary::after,.fd .fdx-btn::after,.fd .rail-open-btn::after,
  html.fdx-arrive .fd .stage .center>h1,html.fdx-arrive .fd .lede,html.fdx-arrive .fd .composer,html.fdx-arrive .fd .hint,html.fdx-arrive .fd .fdx-way{animation:none!important}
  .fd .fdx-load i{opacity:1}
  .fd .rail-item,.fd .hist-item,.fd .tick,.fd .fdx-btn,.fd .fdx-way a::after,.fd .theme svg,.fd .fdx-geo img{transition:none}
  .fd .rail:not(.collapsed) .rail-item:hover,.fd .hist-item:hover{padding-left:8px}
  .fd .tick:hover,.fd .fdx-btn:hover,.fd .fdx-way a:hover::after,.fd .composer:focus-within .fdx-geo img,.fd .theme:hover svg{transform:none}
}
/* PROTECTED: Will's logo and octopus are never clipped, rounded, masked or cropped (lead, 2026-09-27) */
.fd :is(.logo-word,.logo-icon,.pix,img[src*=vssgeo-],img[src*=geo.svg]){border-radius:0!important;clip-path:none!important;-webkit-mask:none!important;mask:none!important}
/* The page now arrives through the block reveal (door/r2/blocks.js), so the headline, lede and box no longer drift in
   on their own - one clean arrival, the logo's language (lead, 2026-09-27) */
html.fdx-arrive .fd .stage .center>h1,html.fdx-arrive .fd .lede,html.fdx-arrive .fd .composer,html.fdx-arrive .fd .hint,html.fdx-arrive .fd .fdx-way{animation:none!important}

/* Sign out sits right under the account (Evan, 2026-10-04: it was four steps deep in Settings) */
.btn-signout{display:none!important;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:4px;padding:7px;
  white-space:nowrap;border-radius:8px;border:1px solid var(--rule);background:none;color:var(--muted);font:inherit;
  font-weight:500;font-size:12.5px;cursor:pointer}
.btn-signout svg{flex:none}
.rail.collapsed .btn-signout{padding:8px 0}
.fd:not([data-user="out"]) .rail .btn-signout{display:flex!important}
.fd:not([data-user="out"]) .btn-signout:hover{color:var(--ink);background:var(--raise2)}
.fd:not([data-user="out"]) .btn-signout[disabled]{opacity:.6;cursor:default}