/* Fugal — shared design system + app shell.
   Loaded by every page; page-specific CSS stays inline in each page.
   Brand-neutral: product name lives in SITE.brand (assets/shell.js). */

/* ---------------------------------------------------------------------------
   PALETTE — neutral chrome, one accent, spent rarely.

   The neutrals used to be tinted with the accent (--bg was hue 255° at 26%
   saturation; even --ink, the *text*, was #e2ddf0 — a purple white). Tint the
   neutrals with your accent and you spend the accent on the whole canvas, and
   then the accent can't signal anything: three filled purple buttons on screen
   and a stranger can't tell which is the primary action.

   So the greys are now genuinely grey (ChatGPT/Qwen/Grok all do this), and the
   purple is unchanged but RATIONED. It appears on exactly two things:
       1. the logo mark
       2. the send button  (the action we actually want — Route is free)
   plus one accented word in the headline. Everything else is neutral.
   Before adding another --accent fill anywhere, ask what it's stealing from.
   --------------------------------------------------------------------------- */
:root{
  --bg:#1b1b1d; --panel:#242427; --panel-2:#2c2c30; --sidebar:#151517; --line:#333338;
  --ink:#ececee; --ink-dim:#a2a2a9; --ink-faint:#71717a;
  --accent:#8b6dff; --accent-dim:#7458e8; --accent-soft:rgba(139,109,255,.15);
  --good:#4db6a4; --warn:#dfa758;
  --frontier:#4db6a4; --flagship:#dfa758; --grid:rgba(255,255,255,.07);
  --shadow:0 1px 0 rgba(255,255,255,.03), 0 18px 40px -24px rgba(0,0,0,.75);
  --mono:ui-monospace,"SFMono-Regular","Cascadia Mono","Roboto Mono","DejaVu Sans Mono",monospace;
  --sans:"Segoe UI",-apple-system,system-ui,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sb-w:264px; --sb-rail:60px; --col:768px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#ffffff; --panel:#f7f7f8; --panel-2:#efeff1; --sidebar:#f7f7f8; --line:#e3e3e6;
    --ink:#1c1c1e; --ink-dim:#5c5c66; --ink-faint:#8a8a94;
    --accent:#6d3fd4; --accent-dim:#5c34b8; --accent-soft:rgba(109,63,212,.10);
    --good:#1a9c8c; --warn:#b3781f;
    --frontier:#1a9c8c; --flagship:#b3781f; --grid:rgba(0,0,0,.07);
    --shadow:0 1px 0 rgba(255,255,255,.6), 0 16px 34px -26px rgba(20,20,25,.28);
  }
}
:root[data-theme="dark"]{
  --bg:#1b1b1d; --panel:#242427; --panel-2:#2c2c30; --sidebar:#151517; --line:#333338;
  --ink:#ececee; --ink-dim:#a2a2a9; --ink-faint:#71717a;
  --accent:#8b6dff; --accent-dim:#7458e8; --accent-soft:rgba(139,109,255,.15);
  --good:#4db6a4; --warn:#dfa758;
  --frontier:#4db6a4; --flagship:#dfa758; --grid:rgba(255,255,255,.07);
  --shadow:0 1px 0 rgba(255,255,255,.03), 0 18px 40px -24px rgba(0,0,0,.75);
}
:root[data-theme="light"]{
  --bg:#ffffff; --panel:#f7f7f8; --panel-2:#efeff1; --sidebar:#f7f7f8; --line:#e3e3e6;
  --ink:#1c1c1e; --ink-dim:#5c5c66; --ink-faint:#8a8a94;
  --accent:#6d3fd4; --accent-dim:#5c34b8; --accent-soft:rgba(109,63,212,.10);
  --good:#1a9c8c; --warn:#b3781f;
  --frontier:#1a9c8c; --flagship:#b3781f; --grid:rgba(0,0,0,.07);
  --shadow:0 1px 0 rgba(255,255,255,.6), 0 16px 34px -26px rgba(20,20,25,.28);
}

*{box-sizing:border-box}
[hidden]{display:none!important}   /* keep the hidden attribute winning over display:flex rules */
html,body{height:100%}

/* slim, subtle, theme-aware scrollbars (Firefox + WebKit/Chromium) */
.sb-scroll,.scrollpane{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.sb-scroll::-webkit-scrollbar,.scrollpane::-webkit-scrollbar{width:8px;height:8px}
.sb-scroll::-webkit-scrollbar-track,.scrollpane::-webkit-scrollbar-track{background:transparent}
.sb-scroll::-webkit-scrollbar-thumb,.scrollpane::-webkit-scrollbar-thumb{
  background:var(--line);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
.sb-scroll::-webkit-scrollbar-thumb:hover,.scrollpane::-webkit-scrollbar-thumb:hover{background:var(--ink-faint)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
     -webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit}
button{font-family:inherit}

/* Keyboard focus ring. :focus-visible, not :focus — the browser shows it for keyboard
   and programmatic focus but not for mouse clicks, so pointer users never see a ring
   on a button they just pressed while keyboard users always do.
   This is a floor, not a ceiling: components with their own focus treatment (the
   composer's .inbox:focus-within glow, input.txt's border shift, frontier's chips)
   set outline:0 or override, and several inputs already suppress the default outline
   in favour of a border colour change. Those stay as they are; this rule catches
   everything else — every button, link and control that previously fell back to the
   UA default, which on a near-black ground is inconsistent across browsers. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* Skip link (injected by buildShell). Off-screen until focused rather than
   display:none — a hidden element is not focusable, so display:none would remove the
   very affordance this exists to provide. */
.skip-link{position:fixed;top:8px;left:-9999px;z-index:2000;background:var(--panel);
  color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:10px 16px;
  font-size:13.5px;font-weight:600;text-decoration:none;box-shadow:var(--shadow)}
.skip-link:focus{left:8px}
::selection{background:var(--accent-soft)}

/* ============================ app shell ============================ */
body.app{display:grid;grid-template-columns:var(--sb-w) 1fr;height:100vh;overflow:hidden;
         transition:grid-template-columns .34s cubic-bezier(.4,0,.2,1)}
body.app.sb-collapsed{grid-template-columns:0 1fr}
body.no-sb-anim{transition:none}

/* min-height:0 is load-bearing: .acct-open and .sb-rail flip this to overflow:visible (so the
   account menu / Help flyout can escape), and a visible-overflow grid item regains its automatic
   minimum size — the sidebar would then blow the 100vh grid row out to its full history height,
   shoving the footer chip and account menu below the viewport. */
.sidebar{background:var(--sidebar);border-right:1px solid var(--line);
         display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.sb-top{display:flex;align-items:center;gap:10px;padding:14px 14px 10px}
.sb-top-sp{flex:1}
.sb-brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.01em;
          font-size:16px;color:var(--ink);text-decoration:none;min-width:0}
.sb-brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;
               box-shadow:0 0 0 4px var(--accent-soft)}
.sb-brand small{font-family:var(--mono);font-weight:400;font-size:10px;color:var(--ink-faint);
                letter-spacing:.14em;text-transform:uppercase;display:block;margin-top:1px}
.iconbtn{background:none;border:1px solid transparent;color:var(--ink-dim);border-radius:8px;
         width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
         cursor:pointer;transition:.15s;flex:none}
.iconbtn:hover{background:var(--panel-2);color:var(--ink);border-color:var(--line);transform:translateY(-1px)}
.iconbtn:active{transform:translateY(0)}
.iconbtn svg{width:18px;height:18px}

/* unified pill rows: New chat, Search, and nav links all share this look */
.sb-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;border-radius:13px;
         background:none;border:0;color:var(--ink-dim);font-size:13.5px;font-weight:500;
         font-family:inherit;text-align:left;cursor:pointer;text-decoration:none;transition:.14s ease}
.sb-item svg{width:17px;height:17px;flex:none;opacity:.9;transition:transform .18s ease}
.sb-item:hover{background:var(--panel-2);color:var(--ink);transform:translateY(-1px)}
.sb-item:hover svg{transform:scale(1.1);opacity:1}
.sb-item.active{background:var(--accent-soft);color:var(--ink);font-weight:600}
.sb-item.active svg{color:var(--accent);opacity:1}
.sb-item.primary{color:var(--ink);font-weight:600}
.sb-nav-top{padding-top:2px}

.sb-nav{display:flex;flex-direction:column;gap:2px;padding:6px 8px}
.sb-nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:13px;
          color:var(--ink-dim);text-decoration:none;font-size:13.5px;font-weight:500;transition:.14s ease}
.sb-nav a:hover{background:var(--panel-2);color:var(--ink);transform:translateY(-1px)}
.sb-nav a.active{background:var(--accent-soft);color:var(--ink);font-weight:600}
.sb-nav a.active svg{color:var(--accent);opacity:1}
.sb-nav a svg{width:17px;height:17px;flex:none;opacity:.9;transition:transform .18s ease}
.sb-nav a:hover svg{transform:scale(1.1);opacity:1}
.sb-nav-foot{border-top:1px solid var(--line);margin:0 8px;padding-top:8px}
.sb-rail .sb-nav-foot{margin:0;padding-top:8px}

.sb-section{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
            color:var(--ink-faint);padding:14px 20px 6px}
.sb-group{flex:1;display:flex;flex-direction:column;min-height:0}
.sb-hdr{display:flex;align-items:center;justify-content:space-between;width:calc(100% - 16px);
        margin:0 8px;background:none;border:0;cursor:pointer;border-radius:8px;
        padding:12px 12px 6px;transition:color .15s}
.sb-hdr:hover{color:var(--ink-dim)}
.sb-hdr .chev{width:15px;height:15px;opacity:.7;transition:transform .25s ease}
.sb-group.collapsed .sb-hdr .chev{transform:rotate(-90deg)}
.sb-searchbox{display:flex;align-items:center;gap:9px;width:100%;padding:8px 8px 8px 12px;
              border-radius:13px;background:var(--panel-2);border:1px solid var(--line);transition:border-color .15s}
.sb-searchbox:focus-within{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.sb-searchbox svg{width:17px;height:17px;flex:none;color:var(--ink-faint)}
.sb-searchbox input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);
                    font-family:inherit;font-size:13.5px}
.sb-searchbox input::placeholder{color:var(--ink-faint)}
.sb-searchx{background:none;border:0;color:var(--ink-faint);cursor:pointer;font-size:19px;line-height:1;
            padding:0 3px;flex:none;transition:color .15s}
.sb-searchx:hover{color:var(--ink)}
.sb-rail .sb-searchbox{display:none}

/* search mode: collapse the sidebar to just New chat + the search field */
.sb-searching .sb-hdr,
.sb-searching .sb-nav-foot{display:none}
.sb-group.collapsed .sb-scroll{flex:0;height:0;overflow:hidden;opacity:0}
.sb-scroll{flex:1;overflow-y:auto;min-height:0;transition:opacity .2s ease}
.sb-hist{display:flex;flex-direction:column;gap:1px;padding:0 8px}
/* group labels inside the history list: Pinned, then time strata (Today / Yesterday / …) */
.hist-group{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
            color:var(--ink-faint);padding:12px 11px 4px}
.hist-group:first-child{padding-top:4px}
.hist-item{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:8px;
           color:var(--ink-dim);font-size:13px;cursor:pointer;transition:.12s;
           white-space:nowrap;overflow:hidden}
.hist-item:hover{background:var(--panel-2);color:var(--ink)}
.hist-item.active{background:var(--panel-2);color:var(--ink)}
.hist-item .ht{flex:1;overflow:hidden;text-overflow:ellipsis}
.hist-item .hist-pin{flex:none;color:var(--accent);display:inline-flex;align-items:center}
.hist-item .hist-pin svg{width:12px;height:12px}
.hist-dots{flex:none;opacity:0;background:none;border:0;color:var(--ink-faint);cursor:pointer;
           padding:3px;border-radius:6px;display:inline-flex;align-items:center;transition:.12s}
.hist-dots svg{width:16px;height:16px}
.hist-item:hover .hist-dots,.hist-item.active .hist-dots{opacity:.65}
.hist-dots:hover{opacity:1;background:var(--panel);color:var(--ink)}
.ht-edit{flex:1;min-width:0;background:var(--panel-2);border:1px solid var(--accent);border-radius:6px;
         color:var(--ink);font-family:inherit;font-size:13px;padding:3px 6px;outline:0}
.sb-empty{color:var(--ink-faint);font-size:12px;padding:6px 20px;font-style:italic}

/* per-chat options menu */
.chat-menu{position:fixed;z-index:60;background:var(--panel);border:1px solid var(--line);border-radius:11px;
           box-shadow:var(--shadow);padding:5px;min-width:154px;display:flex;flex-direction:column;gap:1px}
.cm-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:8px;background:none;
         border:0;color:var(--ink-dim);font-family:inherit;font-size:13px;text-align:left;cursor:pointer;transition:.12s}
.cm-item:hover{background:var(--panel-2);color:var(--ink)}
.cm-item svg{width:15px;height:15px;flex:none}
.cm-item.danger{color:var(--warn)}
.cm-item.danger:hover{background:color-mix(in srgb,var(--warn) 15%,transparent);color:var(--warn)}

/* top-center toast */
.toast-host{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:80;
            display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);
       border-radius:12px;box-shadow:var(--shadow);padding:10px 12px 10px 14px;font-size:13.5px;color:var(--ink);
       pointer-events:auto;animation:toastin .2s ease-out}
.toast.out{opacity:0;transform:translateY(-8px);transition:.2s ease}
.toast .ti{display:inline-flex;color:var(--accent);flex:none}
.toast .ti svg{width:17px;height:17px}
.toast .tm{white-space:nowrap}
.toast-undo{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);border-radius:8px;
            padding:5px 13px;font-weight:600;font-size:12.5px;cursor:pointer;font-family:inherit;transition:.12s}
.toast-undo:hover{border-color:var(--accent);color:var(--accent)}
@keyframes toastin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* ===================== account chip + menu ======================= */
.sb-foot{border-top:1px solid var(--line);padding:8px;position:relative}
.acct-chip{display:flex;align-items:center;gap:10px;width:100%;padding:8px 9px;border-radius:13px;
           background:none;border:0;color:var(--ink);font-family:inherit;text-align:left;cursor:pointer;
           transition:.14s ease}
.acct-chip:hover{background:var(--panel-2)}
.acct-av{width:30px;height:30px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);
         color:var(--ink-dim);display:inline-flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.acct-av svg{width:17px;height:17px}
.acct-av.has-user{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 35%,var(--line));color:var(--accent)}
.acct-av img{width:100%;height:100%;object-fit:cover}
.acct-ini{font-size:12px;font-weight:700;letter-spacing:.02em}
.acct-meta{display:flex;flex-direction:column;min-width:0;line-height:1.3;flex:1}
.acct-name{font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-sub{font-size:11px;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-cog{flex:none;color:var(--ink-faint);display:inline-flex;transition:.18s ease}
.acct-cog svg{width:16px;height:16px}
.acct-chip:hover .acct-cog{color:var(--ink-dim)}
.acct-chip[aria-expanded="true"] .acct-cog{color:var(--accent);transform:rotate(45deg)}

.acct-menu{position:absolute;left:8px;right:8px;bottom:calc(100% - 2px);z-index:70;
           background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
           padding:6px;display:flex;flex-direction:column;gap:1px;animation:rpop .16s ease-out}
.acct-menu[hidden]{display:none}
/* Collapsed to the 60px rail, left:8px/right:8px would make this menu 44px wide — and .sidebar
   is overflow:hidden, so it got clipped to a sliver. Anchor it to the left edge and let it break
   out of the rail at its natural width. (The signed-out menu no longer holds a form at all — auth
   opens the modal — but Settings/theme/Sign out still live here and still need room.) */
.sb-rail .acct-menu{right:auto;width:248px;z-index:80}
.sb-rail .sidebar{overflow:visible}          /* .sb-scroll keeps its own scroll, so this is safe */
.am-head{display:flex;align-items:center;gap:10px;padding:9px}
.am-head .am-av{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);flex:none;overflow:hidden;
                display:inline-flex;align-items:center;justify-content:center;color:var(--accent)}
.am-head .am-av img{width:100%;height:100%;object-fit:cover}
.am-id{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.am-id b{font-size:13.5px;color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-id small{font-size:11.5px;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-head-out{flex-direction:column;align-items:flex-start;gap:2px;padding:10px 10px 8px}
.am-head-out b{font-size:13.5px;color:var(--ink);font-weight:700}
.am-head-out small{font-size:11.5px;color:var(--ink-dim);line-height:1.4}
.am-demo{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--warn);
         background:color-mix(in srgb,var(--warn) 12%,transparent);border-radius:7px;padding:5px 9px;margin:0 3px 3px}
.am-div{height:1px;background:var(--line);margin:5px 4px}
.am-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:9px;background:none;border:0;
         color:var(--ink-dim);font-family:inherit;font-size:13px;text-align:left;cursor:pointer;text-decoration:none;transition:.12s}
.am-item:hover{background:var(--panel-2);color:var(--ink)}
.am-item svg{width:16px;height:16px;flex:none}
.am-signin{color:var(--ink);font-weight:600}
.am-signin svg{width:17px;height:17px}
/* Log in = the primary action in the signed-out menu; Sign up sits under it as the quieter
   sibling. Both just open the modal. */
/* Auth CTAs are neutral; the accent belongs to the product's own action (send). Same rule as
   .tb-signup — see the palette note at the top of this file. */
.am-cta{background:var(--ink);color:var(--bg);font-weight:600;justify-content:flex-start;margin:2px 0}
.am-cta:hover{background:var(--ink);color:var(--bg);filter:brightness(.92)}
.am-ind{width:16px;flex:none}                /* spacer so "Sign up" aligns with the iconed rows */
.am-danger{color:var(--warn)}
.am-danger:hover{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)}
.am-gbtn{display:flex;justify-content:center;padding:4px 2px 6px;min-height:40px;color-scheme:light}
.am-oauth{border:1px solid var(--line);color:var(--ink);font-weight:600;justify-content:flex-start;margin:2px 0}
.am-oauth:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));background:var(--panel-2)}
.am-oauth svg{width:17px;height:17px}
.am-or{display:flex;align-items:center;gap:9px;margin:7px 6px 4px;
       font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.am-or::before,.am-or::after{content:"";flex:1;height:1px;background:var(--line)}
.am-email{display:flex;flex-direction:column;gap:7px;padding:2px 2px 4px}
.am-email input{width:100%;min-width:0;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;
                color:var(--ink);font-family:inherit;font-size:13px;padding:9px 11px;outline:0;transition:border-color .15s}
.am-email input:focus{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.am-email input::placeholder{color:var(--ink-faint)}
/* Neutral-strong, not accent: SSO (Google) is the fast path we want the eye on, and the accent
   is reserved for the product's own send action (same rule as .am-cta / .tb-signup). */
.am-emailbtn{width:100%;border-radius:9px;background:var(--ink);color:var(--bg);border:0;cursor:pointer;
             font-family:inherit;font-size:13px;font-weight:600;padding:9px 11px;transition:.15s}
.am-emailbtn:hover{filter:brightness(.92)}
.am-sent{display:flex;align-items:center;gap:10px;padding:11px 10px;color:var(--good);font-size:13px;line-height:1.4}
.am-sent svg{width:17px;height:17px;flex:none}
/* auth stack failed to load on a real origin — we say so rather than offering a mock login */
.am-sent.am-warn{color:var(--warn)}
.am-legal{display:flex;justify-content:center;align-items:center;gap:8px;padding:6px 4px 3px;
          font-size:11px;color:var(--ink-faint)}
.am-legal i{font-style:normal}
.am-legal a{color:var(--ink-faint);text-decoration:none;transition:color .12s}
.am-legal a:hover{color:var(--ink-dim);text-decoration:underline}

/* Help = nested flyout (ChatGPT/Grok). The trigger stays a normal row; its panel is anchored to
   the account menu (nearest positioned ancestor — .am-sub is left static on purpose) and flies out
   to the right. Revealed by hover, keyboard focus, or a click that adds .open (touch). */
.am-sub{position:static}
.am-subtrig .chev-r{margin-left:auto;width:15px;height:15px;color:var(--ink-faint);transition:.12s}
.am-sub:hover .am-subtrig .chev-r,.am-sub.open .am-subtrig .chev-r{color:var(--ink-dim)}
/* bottom-anchored: the account menu opens from the screen's bottom edge, so a flyout taller
   than the menu must grow UP into free space — top-anchored it ran off-screen (Privacy row). */
.am-flyout{position:absolute;left:100%;bottom:0;margin-left:6px;min-width:210px;z-index:82;
           background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
           padding:6px;display:none;flex-direction:column;gap:1px;animation:rpop .16s ease-out}
/* transparent bridge over the 6px gap so the pointer can cross without the flyout closing */
.am-flyout::before{content:"";position:absolute;left:-8px;top:0;bottom:0;width:8px}
.am-sub:hover .am-flyout,.am-sub:focus-within .am-flyout,.am-sub.open .am-flyout{display:flex}
/* the flyout escapes the sidebar to the right — lift the clip while the account menu is open */
body.acct-open .sidebar{overflow:visible}

/* ===================== rail (icon-only) mode ====================== */
/* The 60px column is DESKTOP-ONLY. Below 821px the sidebar is position:fixed (an off-canvas
   drawer, out of grid flow); a 60px first column would then strand .main inside it and blank
   the app. On mobile the rail class only ever styles the drawer's internals, never the grid. */
@media (min-width:821px){
  body.app.sb-rail{grid-template-columns:var(--sb-rail) 1fr}
}
.sb-rail .sb-top{justify-content:center;padding:14px 0 10px}
.sb-rail .sb-brand,.sb-rail .sb-top-sp{display:none}
.sb-rail .sb-nav{padding:6px 0;align-items:center}
.sb-rail .sb-item,.sb-rail .sb-nav a{padding:0;width:40px;height:40px;justify-content:center;gap:0}
.sb-rail .sb-item span,.sb-rail .sb-nav a span{display:none}
.sb-rail .sb-section,.sb-rail .sb-hist,.sb-rail .sb-empty{display:none}
.sb-rail .sb-foot{padding:8px 0}
.sb-rail .acct-chip{padding:0;width:40px;height:40px;justify-content:center;gap:0;margin:0 auto}
.sb-rail .acct-meta,.sb-rail .acct-cog{display:none}
.sb-rail .acct-menu{left:8px;right:auto;width:236px}

/* ============================ main pane ============================ */
.main{display:flex;flex-direction:column;height:100vh;min-width:0;overflow:hidden}
.topbar{height:52px;flex:none;display:flex;align-items:center;gap:12px;
        padding:0 clamp(12px,3vw,22px);border-bottom:1px solid var(--line);background:var(--bg)}
.topbar .tb-title{font-weight:700;font-size:15px;letter-spacing:-.01em}
.topbar .spacer{flex:1}
.tb-menu{display:none}
#budget{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint)}
#budget b{color:var(--good);font-weight:600}
#budget.out b{color:var(--warn)}

.scrollpane{flex:1;overflow-y:auto;min-width:0}

/* backdrop for mobile drawer */
.sb-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;
             transition:.2s;z-index:40}

/* ============================ shared bits ============================ */
.btn{background:var(--accent);color:#fff;border:0;border-radius:11px;padding:10px 18px;
     font-weight:700;font-size:14px;cursor:pointer;transition:.15s}
.btn:hover{background:var(--accent-dim)}
.btn:disabled{opacity:.45;cursor:default}
.btn.ghost{background:var(--panel-2);color:var(--ink-dim);border:1px solid var(--line);font-weight:600}
.btn.ghost:hover{color:var(--ink);border-color:var(--accent)}

.seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:3px}
.seg button{font-family:var(--mono);font-size:12px;color:var(--ink-dim);background:none;border:0;
            padding:6px 12px;border-radius:7px;cursor:pointer;transition:.15s;white-space:nowrap}
/* Route/Answer is a MODE TOGGLE, not an action. Filled with the accent it carried the same
   visual weight as the send button, so two things on screen both looked like "the thing to
   press". The active segment is now a raised neutral pill — selected, not shouting. */
.seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.25)}

/* ================== first-visit landing ==================
   The sidebar is always present; on the empty landing it rides the rail (see rail mode above).
   The hero carries its own brand lockup, but that would DOUBLE the wordmark whenever the full
   sidebar is showing (its own brand top-left) — so hide the hero's lockup then. Desktop-only:
   on mobile the sidebar is a closed drawer, so the hero stays the only visible brand. In rail
   mode the sidebar hides its brand, so the hero lockup is again the only one — keep it. */
@media (min-width:821px){
  body.app:not(.sb-rail) .brandrow{display:none}
}

/* topbar auth cluster (guests only) */
.tb-auth{display:none;align-items:center;gap:8px}
body.signed-out .tb-auth{display:inline-flex}
.tb-auth button{font-family:inherit;font-size:13px;font-weight:600;border-radius:999px;
                padding:7px 16px;cursor:pointer;transition:.15s;white-space:nowrap}
/* Log in is the FILLED one, Sign up the outlined one — ChatGPT's arrangement. Neither is the
   brand purple: the accent belongs to the send button, because the action we actually want on
   this page is "type a question" (routing is free and needs no account). Making Sign up the
   quiet one also keeps us honest — we are not hard-selling an account for a product whose whole
   pitch is that you don't need one. */
.tb-signin{background:var(--ink);color:var(--bg);border:1px solid var(--ink);font-weight:600}
.tb-signin:hover{filter:brightness(.92);transform:translateY(-1px)}
.tb-signup{background:transparent;color:var(--ink);border:1px solid var(--line)}
.tb-signup:hover{border-color:var(--ink-faint);background:var(--panel);transform:translateY(-1px)}

/* proof links under the landing hero */
.hero-links{display:none;justify-content:center;align-items:center;gap:10px;margin-top:16px;
            font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase}
.main.landing .hero-links{display:flex}
.hero-links a{color:var(--ink-faint);text-decoration:none;transition:.15s}
.hero-links a:hover{color:var(--accent)}
.hero-links i{color:var(--line);font-style:normal}
/* locked Answer mode — guests see the gate before they spend a keystroke */
.seg button .lk{width:11px;height:11px;margin-left:5px;vertical-align:-1px;opacity:.75}
.seg button.locked{color:var(--ink-faint)}
.seg button.locked:hover{color:var(--ink)}

/* ===================== auth modal (sign in / sign up) ===================== */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;
       background:rgba(8,6,16,.62);backdrop-filter:blur(3px);animation:mfade .16s ease-out}
.modal[hidden]{display:none}
@keyframes mfade{from{opacity:0}to{opacity:1}}
@keyframes mpop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.auth-card{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--line);
           border-radius:22px;box-shadow:var(--shadow);padding:38px 36px 32px;position:relative;
           animation:mpop .2s cubic-bezier(.4,0,.2,1)}
/* ChatGPT proportions: full-width fully-rounded pills, centered label, roomy tap targets. Scoped
   to the modal so the sidebar account menu (which reuses .am-oauth) keeps its compact rows. */
.auth-card .am-oauth,.auth-card .am-emailbtn{justify-content:center;padding:14px 16px;font-size:14px;border-radius:999px}
.auth-card .am-oauth{margin:0}
.auth-card .am-email input{padding:14px 18px;font-size:14px;border-radius:999px}
.auth-card .am-or{margin:16px 4px}
.auth-card .am-email{gap:10px;padding:0}
/* Code-entry screen: the field reads as a slot for a short code (centered, tracked digits),
   with quiet text links under it to resend or go back and fix the address. */
.auth-card .am-code input{text-align:center;letter-spacing:.32em;font-size:16px;font-weight:600}
.auth-card .am-code input::placeholder{letter-spacing:normal;font-weight:400}
.am-alt{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:14px}
.am-link{background:none;border:0;cursor:pointer;font-family:inherit;font-size:12.5px;
         color:var(--ink-dim);padding:2px;transition:color .12s}
.am-link:hover{color:var(--ink);text-decoration:underline}
.am-alt-sep{color:var(--line)}
.auth-x{position:absolute;top:12px;right:12px;background:none;border:0;color:var(--ink-faint);
        font-size:22px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:8px;transition:.15s}
.auth-x:hover{background:var(--panel-2);color:var(--ink)}
.auth-mark{width:42px;height:42px;border-radius:13px;background:var(--accent-soft);
           display:grid;place-items:center;margin:0 auto 14px}
.auth-mark span{width:12px;height:12px;border-radius:50%;background:var(--accent);
                box-shadow:0 0 0 5px var(--accent-soft)}
.auth-card h2{margin:0 0 6px;text-align:center;font-family:var(--serif);font-size:23px;
              font-weight:600;letter-spacing:-.01em}
.auth-card .auth-sub{margin:0 0 20px;text-align:center;color:var(--ink-dim);font-size:13.5px;
                     line-height:1.5}
.auth-card .am-item{width:100%;box-sizing:border-box}
.auth-legal{margin:16px 0 0;padding-top:13px;border-top:1px solid var(--line);text-align:center;
            font-size:11px;color:var(--ink-faint);line-height:1.5}
.auth-legal a{color:var(--ink-dim);text-decoration:none}
.auth-legal a:hover{color:var(--accent);text-decoration:underline}

/* ============================ mobile ============================ */
@media (max-width:820px){
  body.app{grid-template-columns:1fr}
  .sidebar{position:fixed;inset:0 auto 0 0;width:var(--sb-w);z-index:50;
           transform:translateX(-100%);transition:transform .22s ease}
  body.app.sb-open .sidebar{transform:none}
  body.app.sb-open .sb-backdrop{opacity:1;pointer-events:auto}
  .tb-menu{display:inline-flex}

  /* The topbar carries four clusters (menu · route badge · mode toggle · auth) and at 360px
     they do not fit: everything wrapped and the Sign up pill — the primary conversion button —
     was pushed off-screen entirely. Tighten the whole row rather than dropping any cluster. */
  .topbar{gap:8px;padding:0 10px}
  .tb-auth{gap:6px}
  .tb-auth button{padding:6px 12px;font-size:12px}
  /* Even tightened, four clusters don't fit at 360px, so one pill has to go. With OAuth +
     magic-link there is no separate registration — both pills open the same providers and do
     the same thing — so a phone just needs the one door. Keep the FILLED one (Log in): it's
     the primary now, and dropping the outlined Sign up loses nothing but a second label. */
  .tb-signup{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}