/*
 * Supagent's navbar, launch bar and footer (markup from lib/site-chrome.ts), the same on every product's pages. Every
 * value is a shared name of /ds/supagent.css (Central Command's Design system, loaded first): colours, fonts, the four
 * heights, the corner classes, shadows and motion, so light, dark and every theme follow it.
 */

/* Only the navbar's own switches live here. <html data-theme> and data-palette are set before the page shows
   (/ds/supagent.js): the visitor's choice from the navbar, otherwise the device's. */
:root, [data-theme="light"] {
  --c-nav: var(--color-muted); --c-nav-ico: var(--color-faint);
  --c-logo: none; --c-moon: block; --c-sun: none; --c-mode-tip: "Switch to dark mode";
}
[data-theme="dark"] {
  --c-nav: var(--color-text); --c-nav-ico: var(--color-text);  /* white in dark mode, not grey */
  --c-logo: invert(1); --c-moon: none; --c-sun: block; --c-mode-tip: "Switch to light mode";
}

/* Every product's icon, card and launch bar take the accent (Supagent's blue, or the theme's main colour; DECISIONS:
   Supagent's colour). --snav-max and --snav-pad line the bars up with each page's content (the ideas page sets its
   own). */
.snav, .snav-bar, .sfoot {
  --snav-max: 80rem; --snav-pad: 24px; --snav-h: 60px;
  box-sizing: border-box;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
.snav *, .snav-bar *, .sfoot *, .snav *::before, .snav *::after { box-sizing: border-box; }
@media (max-width: 640px) { .snav, .snav-bar, .sfoot { --snav-pad: 16px; } }
.snav-logo img { filter: var(--c-logo); }

/* Navbar: at the top of the page, scrolling away with it (not sticky: Amine, 2026-10-06), above the content so its
   cards and phone sheet open on top. Always in the page's colour, whatever a product paints (Amine, Oct 20: "always
   force"; SaaS Ideas' dotted pages painted it white). */
.snav { position: relative; z-index: 40; color: var(--color-text); background: var(--color-page) !important; border-bottom: 1px solid var(--color-line); }
/* Three columns: the logo, the pages, the tools and sign-in. The pages sit centred between the other two, with equal
   gaps on both sides (Amine, 2026-11-03: the page's exact middle left 168px on their left and 22px on their right). */
.snav-in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px; height: var(--snav-h); max-width: var(--snav-max); margin: 0 auto; padding: 0 var(--snav-pad); }
.snav-in > :first-child { grid-column: 1; justify-self: start; margin-right: 0; }
.snav-links { grid-column: 2; justify-self: center; }
.snav-end { grid-column: 3; justify-self: end; display: flex; align-items: center; }
.snav-logo { display: inline-flex; align-items: center; gap: 9px; margin-right: 18px; color: var(--color-text); text-decoration: none; }
.snav-logo img { display: block; width: 26px; height: 26px; }
/* The name, drawn (no font to download for it), in the box its text had. */
.snav-logo .snav-word { display: block; width: 85px; height: 19px; flex: none; }
.snav-links { display: flex; align-items: center; gap: 2px; }
.snav-item { position: relative; }
.snav-prod, .snav-link {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: var(--h-medium); padding: 0 11px; border: 0; border-radius: var(--radius-md);
  color: var(--c-nav); background: none; cursor: pointer; text-decoration: none;
  font: 500 14.5px/1 var(--font-sans); white-space: nowrap; transition: color var(--motion-fade), background-color var(--motion-fade);
}
.snav-prod:hover, .snav-link:hover, .snav-item.open .snav-prod, .snav-prod[aria-current="page"], .snav-link[aria-current="page"] { color: var(--color-text); }
.snav-prod:hover, .snav-link:hover, .snav-item.open .snav-prod { background: var(--color-raised); }
.snav-prod:focus-visible, .snav-link:focus-visible, .snav-btn:focus-visible, .snav-menu:focus-visible, .snav-page:focus-visible, .snav-icon:focus-visible, .snav-langs button:focus-visible, .snav-langs a:focus-visible, .snav-themes .snav-tr:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Icons stay grey until hover, focus or the current product, then take the accent. */
.snav-prod > svg:first-child { color: var(--c-nav-ico); transition: color var(--motion-fade); }
.snav-prod:hover > svg:first-child, .snav-prod:focus-visible > svg:first-child, .snav-item.open .snav-prod > svg:first-child, .snav-prod[aria-current="page"] > svg:first-child { color: var(--color-accent); }
.snav-prod > svg:last-child { color: var(--c-nav-ico); transition: transform var(--motion-pop-in); }
.snav-item.open .snav-prod > svg:last-child { transform: rotate(180deg); }
.snav-prod[aria-current="page"]::after, .snav-link[aria-current="page"]::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: calc((var(--h-medium) - var(--snav-h)) / 2); height: 2px; border-radius: var(--radius-mark); background: var(--color-accent); }
/* A state in a line (Soon): the inline height, round as a pill. */
.snav-soon { display: inline-flex; align-items: center; height: var(--h-inline); padding: 0 7px; border-radius: var(--radius-round); font-size: 11.5px; font-weight: 600; color: var(--color-muted); background: var(--color-raised); }
/* A product that is not open yet (lib/site-chrome.ts, soonItem; DECISIONS: The launch state of the site): its icon and
   name keep the quiet grey, in light and dark, hovered or open, with "Soon" and no chevron. Its pill takes the
   surface while the button is raised, so it still reads as a pill. */
.snav-item.next .snav-prod, .snav-item.next .snav-prod:hover, .snav-item.next.open .snav-prod { color: var(--color-muted); }
.snav-item.next .snav-prod > svg:first-child, .snav-item.next .snav-prod:hover > svg:first-child, .snav-item.next .snav-prod:focus-visible > svg:first-child, .snav-item.next.open .snav-prod > svg:first-child { color: var(--color-faint); }
.snav-item.next .snav-prod:hover .snav-soon, .snav-item.next.open .snav-prod .snav-soon { background: var(--color-surface); }

/* Hover card: the product's pages, its state and its pricing. */
.snav-card {
  position: absolute; top: calc(100% + 10px); left: -6px; display: grid; gap: 3px; width: 340px; padding: 8px;  /* each line on one, beside its tile */
  border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--motion-pop-in), transform var(--motion-pop-in), visibility var(--motion-pop-in);
}
.snav-card::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.snav-item.open .snav-card { opacity: 1; visibility: visible; transform: none; }
/* Each page with its icon and its line (a row with a title and a note: the large height), the page being shown tinted
   in the accent (Amine, Oct 16: roomier rows, 20px icons). */
/* No head row since Oct 16: a product still holding an older navbar copy hides it too (its copy refreshes within minutes). */
.snav-card-head { display: none; }
/* The row's background fades with its icon tile (Amine, Oct 20: the tile came a little after the row). */
.snav-page { display: flex; align-items: center; gap: 20px; min-height: var(--h-large); padding: 15px 16px; border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; transition: background-color var(--motion-fade); }
.snav-page > svg { flex: none; width: 20px; height: 20px; color: var(--color-faint); transition: color var(--motion-fade); }
/* Each page's icon on a tile in the theme's own colours (Amine, Oct 16): raised and the text colour at rest, the
   accent's tint and the accent on hover and on the page being shown. */
.snav-ico { display: grid; flex: none; place-items: center; width: var(--h-medium); height: var(--h-medium); border-radius: var(--radius-md); background: var(--color-raised); color: var(--color-text); transition: background var(--motion-fade), color var(--motion-fade); }
.snav-ico svg { width: 20px; height: 20px; }
.snav-page:hover { background: var(--color-raised); }
.snav-page:hover > svg, .snav-page[aria-current="page"] > svg { color: var(--color-accent); }
.snav-page:hover .snav-ico, .snav-page[aria-current="page"] .snav-ico { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 13%, transparent); }
.snav-page[aria-current="page"] { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.snav-page.soon { cursor: default; }
.snav-page-t { flex: 1; min-width: 0; }
.snav-page b { display: block; font-size: 14px; font-weight: 550; line-height: 20px; }
.snav-page-t span { display: block; color: var(--color-muted); font-size: 12.5px; }
/* A product that still holds the navbar from before Oct 15 (its copy refreshes within minutes): its card's footer row
   and page addresses stay hidden, so it already looks like today's. */
.snav-card-foot, .snav-page code { display: none; }
/* The card of a product that is not open yet: what it is (its icon on a tile, its name, its line), then the way to
   get notified, the home's form for it. Narrower than a card of pages. */
.snav-item.next .snav-card { gap: 14px; width: 300px; padding: 16px; }
.snav-next { display: flex; align-items: center; gap: 14px; }
.snav-next .snav-ico { color: var(--color-muted); }
.snav-next-t { flex: 1; min-width: 0; }
.snav-next-t b { display: block; color: var(--color-text); font-size: 14px; font-weight: 550; line-height: 20px; }
.snav-next-t span { display: block; color: var(--color-muted); font-size: 12.5px; text-wrap: pretty; }
.snav-card .snav-next-act { width: 100%; }
/* The product's state, a tag (the small height), round as a pill. Live is tinted 8% in the accent: its text reads at
   4.5:1 on it (4.7 in light, 5 in dark). A theme's main colour can be too light or too dark for that, so in a theme
   the text takes it mixed with the text colour (5.2 at least, Claude dark). */

/* Sign in and Sign up, or Account once signed in (data-auth on <html>, set by the head script). */
/* Language and light or dark: quiet icons, grey until hover, with the template's tooltip. The languages other than
   English are shown as coming. */
.snav-tools { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.snav-lang, .snav-theme { position: relative; }
.snav-icon { position: relative; display: inline-grid; place-items: center; width: var(--h-medium); height: var(--h-medium); padding: 0; border: 0; border-radius: var(--radius-md); color: var(--c-nav-ico); background: none; cursor: pointer; transition: color var(--motion-fade), background-color var(--motion-fade); }
.snav-icon:hover, .snav-icon[aria-expanded="true"] { color: var(--color-text); background: var(--color-raised); }
/* The tooltip, as the template's: the text colour behind the surface's in light, a raised dark in dark mode. */
.snav-icon::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; z-index: 50; padding: 6px 10px; border-radius: var(--radius-sm);
  color: color-mix(in oklab, var(--color-surface) calc(var(--ds-light) * 100%), var(--color-text));
  background: color-mix(in oklab, var(--color-text) calc(var(--ds-light) * 100%), color-mix(in oklab, var(--color-surface) 88%, var(--color-text)));
  font: 500 12.5px/1.2 var(--font-sans); white-space: nowrap; pointer-events: none;
  box-shadow: var(--shadow-md); opacity: 0; transform: translate(-50%, -4px); transition: opacity var(--motion-pop-in), transform var(--motion-pop-in);
}
@media (hover: hover) { .snav-icon:hover::after { opacity: 1; transform: translate(-50%, 0); } }
.snav-icon:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.snav-icon[aria-expanded="true"]::after { opacity: 0; }
/* The light or dark switch, kept for now next to the theme menu: Supagent's light or dark in one click. */
.snav-mode::after { content: var(--c-mode-tip); }
.snav-mode .i-moon { display: var(--c-moon); }
.snav-mode .i-sun { display: var(--c-sun); }
/* The navbar's menus (languages, themes, favorites): the menu's corner class, their rows the one below it. */
.snav-langs {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; display: grid; gap: 2px; min-width: 210px; padding: 6px;
  border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); animation: snav-pop var(--motion-pop-in) var(--motion-ease);
}
.snav-langs[hidden], .snav-themes[hidden] { display: none; }
.snav-langs button, .snav-langs a { transition: background-color var(--motion-fade); display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--h-medium); padding: 0 10px; border: 0; border-radius: var(--radius-md); color: var(--color-text); background: none; cursor: pointer; font: 500 14px/1.2 var(--font-sans); text-align: left; }
.snav-langs button:hover, .snav-langs a:hover, .snav-langs [aria-checked="true"] { background: var(--color-raised); }
/* A theme's depth (the first Supagent's, --shadow-depth): the filled button gets a light top line, a darker edge and a
   soft shadow in the theme's tint. Supagent stays flat. */
.snav-btn.solid { box-shadow: var(--shadow-depth); }
/* The theme menu, as designed in the first Supagent, in the shape of every menu: each row painted in its own theme,
   corners included, with four of its colours (main, second, accent, neutral), the chosen one bordered in its main
   colour. */
.snav-themes {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; display: grid; gap: 4px; width: max-content; padding: 8px;
  max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--color-line) transparent;
  border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); animation: snav-pop var(--motion-pop-in) var(--motion-ease);
}
.snav-themes .snav-tr {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 6px 8px;
  border: 2px solid transparent; border-radius: var(--radius-md); color: var(--color-text); background: var(--color-page); cursor: pointer;
  font: 500 15px/1.45 var(--font-sans); text-align: left; white-space: nowrap; transition: border-color var(--motion-fade);
}
.snav-themes .snav-tr:hover { border-color: color-mix(in srgb, var(--c-sw1) 45%, transparent); }
.snav-themes .snav-tr[aria-checked="true"] { border-color: var(--c-sw1); }
/* Each row's four colours, in its own theme: Supagent's (text, faint, accent, raised) or the theme's, as supagent.css
   defines them. */
.snav-tr { --c-sw1: var(--color-text); --c-sw2: var(--color-faint); --c-sw3: var(--color-accent); --c-sw4: var(--color-raised); }
.snav-tr[data-palette] { --c-sw1: var(--t-primary); --c-sw2: var(--t-secondary); --c-sw3: var(--t-accent); --c-sw4: var(--t-neutral); }
.snav-sw { display: flex; align-items: center; gap: 0; }
.snav-sw i { width: 15px; height: 25px; }  /* Amine, Oct 20: the row about 41px, its padding's */
.snav-sw .s1 { background: var(--c-sw1); }
.snav-sw .s2 { background: var(--c-sw2); }
.snav-sw .s3 { background: var(--c-sw3); }
.snav-sw .s4 { background: var(--c-sw4); }
.snav-langs img { flex: none; width: 18px; height: 18px; border-radius: 50%; }
.snav-langs button > svg, .snav-langs a > svg, .snav-langs .snav-soon { margin-left: auto; }
/* A live language is a link (lib/site-chrome.ts): the same row, and its check shows on the page's own language only. */
.snav-langs a { box-sizing: border-box; text-decoration: none; }
.snav-langs a:not([aria-checked="true"]) > svg { display: none; }
.snav-langs [aria-disabled="true"] { color: var(--color-muted); cursor: default; }
.snav-langs [aria-disabled="true"]:hover { background: none; }
.snav-langs [aria-disabled="true"] img { opacity: .6; }
@keyframes snav-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* Favorites: what every product saved, grouped by product (Agent Hub's list); the count sits on the heart and the
   heart bumps when something is saved. */
.snav-favs { position: relative; }
.snav-favs-n {
  position: absolute; top: 2px; right: -2px; display: none; align-items: center; justify-content: center; min-width: 15px; height: 16px; padding: 0 2px;
  border: 1.5px solid var(--c-nav-ico); border-radius: var(--radius-xs); color: var(--color-text); background: var(--color-page); font: 700 8px/1 var(--font-mono);
}
.snav-favs-n::before { content: var(--snav-favs, ""); }
html[data-favs] .snav-favs-n { display: inline-flex; }
.snav-favs-btn:hover .snav-favs-n, .snav-favs-btn[aria-expanded="true"] .snav-favs-n { border-color: var(--color-text); }
/* brand.js takes .bump off once it ended, so the next spark's landing (.is-supagent-saved) bounces and flashes again. */
.snav-favs-btn.bump { animation: snav-bump .42s cubic-bezier(.2, .7, .3, 1.1); }
@keyframes snav-bump { 35% { transform: scale(1.32); } 60% { transform: scale(.9); } }
/* A spark from a product's heart lands (supagent.js): the heart flashes red (supagent.css), its count too. */
.snav-favs-btn.is-supagent-saved .snav-favs-n { animation: snav-count-flash 1s cubic-bezier(.3, .6, .4, 1); }
@keyframes snav-count-flash { 15%, 72% { border-color: var(--color-saved); color: var(--color-page); background: var(--color-saved); } }
.snav-favs-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; display: flex; flex-direction: column; width: 320px; max-height: 400px; overflow: hidden;
  border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); animation: snav-pop var(--motion-pop-in) var(--motion-ease);
}
.snav-favs-pop[hidden] { display: none; }
.snav-favs-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--color-line); color: var(--color-text); font: 600 12px/1 var(--font-sans); letter-spacing: .02em; text-transform: uppercase; }
.snav-favs-total { display: inline-flex; align-items: center; justify-content: center; min-width: var(--h-inline); height: var(--h-inline); border: 1px solid var(--color-text); border-radius: var(--radius-xs); font: 700 10px/1 var(--font-mono); }
.snav-favs-body { flex: 1; overflow-y: auto; padding: 4px 0 6px; }
.snav-favs-group + .snav-favs-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--color-line); }
.snav-favs-ghead { display: flex; align-items: center; gap: 7px; margin: 0; padding: 8px 14px 4px; color: var(--color-muted); font: 600 10.5px/1.2 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }
.snav-favs-ghead svg { flex: none; color: var(--color-accent); }
.snav-favs-ghead span { margin-left: auto; color: var(--color-faint); font: 500 10.5px/1 var(--font-mono); letter-spacing: 0; }
.snav-favs-item { display: flex; align-items: center; gap: 10px; height: var(--h-large); margin: 2px 8px; padding: 0 8px; border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; transition: background-color var(--motion-fade); }
.snav-favs-item:hover, .snav-favs-item:focus-visible { background: var(--color-raised); }
.snav-favs-item:focus-visible, .snav-favs-all:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.snav-favs-tile {
  display: inline-grid; flex: none; place-items: center; width: var(--h-small); height: var(--h-small); border-radius: var(--radius-sm); font: 700 11px/1 var(--font-mono);
  color: color-mix(in srgb, hsl(var(--h, 200) 60% 28%) calc(var(--ds-light) * 100%), hsl(var(--h, 200) 70% 82%));
  background: color-mix(in srgb, hsl(var(--h, 200) 70% 92%) calc(var(--ds-light) * 100%), hsl(var(--h, 200) 30% 24%));
}
.snav-favs-main { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.snav-favs-main b, .snav-favs-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snav-favs-main b { font-size: 13.5px; font-weight: 550; }
.snav-favs-main span { color: var(--color-muted); font-size: 12px; }
.snav-favs-item > svg { flex: none; color: var(--color-faint); opacity: 0; transition: opacity var(--motion-fade); }
.snav-favs-item:hover > svg, .snav-favs-item:focus-visible > svg { opacity: 1; }
.snav-favs-all { transition: color var(--motion-fade), background-color var(--motion-fade); display: flex; align-items: center; min-height: var(--h-medium); margin: 2px 8px 6px; padding: 0 8px; border-radius: var(--radius-md); color: var(--color-muted); font-size: 13px; font-weight: 600; text-decoration: none; }
.snav-favs-all:hover { color: var(--color-text); background: var(--color-raised); }
.snav-favs-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 22px 30px; color: var(--color-faint); text-align: center; }
.snav-favs-empty b { margin-top: 4px; color: var(--color-text); font-size: 13.5px; font-weight: 600; }
.snav-favs-empty span { max-width: 240px; font-size: 12.5px; line-height: 1.45; }
/* The menus pop in and the hovers fade on the shared motion names, which reduced motion zeroes (supagent.css); the
   bump and the count's flash have no name yet, so they stop here. */
@media (prefers-reduced-motion: reduce) { .snav-favs-btn.bump, .snav-favs-btn.is-supagent-saved .snav-favs-n { animation: none; } }

.snav-auth { display: flex; align-items: center; gap: 8px; margin-left: 10px; }
.snav-btn { display: inline-flex; align-items: center; justify-content: center; height: var(--h-medium); padding: 0 15px; border-radius: var(--radius-md); font: 600 14px/1 var(--font-sans); text-decoration: none; white-space: nowrap; transition: background-color var(--motion-fade), opacity var(--motion-fade); }
/* Sign in (Amine, 2026-11-11: "the sign in should be like this", an outlined button): the template's outline button in
   the navbar's own classes. See-through, its border and words in Supagent's blue (the accent: the primary on a light
   page, its lighter blue on a dark one, where the primary would not read), a light tint of it on hover and focus. */
.snav-btn.ghost { color: var(--color-accent); background: transparent; border: 1.5px solid var(--color-accent); }  /* ds: own (a border's width has no name yet) */
.snav-btn.ghost:hover, .snav-btn.ghost:focus-visible { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.snav-btn.solid { color: var(--color-primary-content); background: var(--color-primary); border: 1px solid var(--color-primary); }
.snav-btn.solid:hover { opacity: .86; }
/* Signed in: the person's avatar, round, in the icons' tap area, opening their account menu (Amine, 2026-11-10: generic
   avatars). A drawing on a colour (config/supagent.ts, avatars). The boot script says which (data-av, and the colour's
   hue in --snav-av-h, on <html>): the colour is made here, a middle tone that reads on a light or a dark bar; the
   drawing is a picture (--snav-av-img, with data-avimg), kept in this browser from the page before, or painted by
   brand.js once it has loaded the drawings, which only a signed-in visitor does. Until then the colour carries the
   person's initial. The account page's pickers give each face its own (data-face, --snav-av-h and its drawing on it).
   The colours are the avatars' own: the Design system has none per person yet. Without an id, the initial on the
   primary, as before; with neither, the Account icon. */
.snav-user { position: relative; }
.snav-icon.snav-user-btn { width: var(--h-medium); border-radius: var(--radius-round); }
.snav-user-btn::after { display: none; }  /* no tooltip: the face is the person */
.snav-icon.snav-user-btn:hover, .snav-icon.snav-user-btn[aria-expanded="true"] { background: none; }
.snav-face {
  display: inline-grid; flex: none; place-items: center; width: var(--h-small); height: var(--h-small); overflow: hidden;
  border-radius: var(--radius-round); color: var(--color-primary-content); background: var(--color-primary);
  font: 650 14px/1 var(--font-sans); transition: box-shadow var(--motion-fade);
}
.snav-face::before { content: var(--snav-initial, none); grid-area: 1 / 1; }
.snav-face > svg { display: none; grid-area: 1 / 1; }
html:not([data-initial]):not([data-av]) .snav-face > .snav-face-none { display: block; }
html[data-av] .snav .snav-face, .snav-face[data-face] {
  color: var(--color-on-color);
  background: oklch(calc(.62 + var(--ds-light) * .05) .14 var(--snav-av-h)) center / 100% 100% no-repeat;  /* ds: own */
}
html[data-avimg] .snav .snav-face { background-image: var(--snav-av-img); }
html[data-avimg] .snav .snav-face::before, .snav-face[data-face]::before { content: none; }
.snav-face[data-face] > .snav-faces { display: block; width: 100%; height: 100%; stroke-linecap: round; stroke-linejoin: round; }
/* A person's avatar wears a ring in its own colour, a gap away, always (Amine picked it from four, 2026-11-10): in the
   bar, at the head of its menu and on the account page's preview (.snav-face-ring). --ring-on is what it sits on, for
   the gap; the bar's is a little wider on hover and while its menu is open. Before the avatar is known, the
   initial's own colour. */
.snav-user .snav-face, .snav-face-ring {
  --ring: var(--color-primary);
  box-shadow: 0 0 0 var(--ring-gap, 2px) var(--ring-on, var(--color-page)), 0 0 0 calc(var(--ring-gap, 2px) + var(--ring-w, 1.5px)) var(--ring);  /* ds: own */
}
html[data-av] .snav-user .snav-face, .snav-face-ring[data-face] { --ring: oklch(calc(.62 + var(--ds-light) * .05) .14 var(--snav-av-h)); }  /* ds: own */
.snav-user-btn:hover :is(.snav-me, .snav-face), .snav-user-btn[aria-expanded="true"] :is(.snav-me, .snav-face) { --ring-w: 2.5px; }  /* ds: own */
.snav-user-head > :is(.snav-me, .snav-face) { --ring-on: var(--color-surface); margin: 4px; }  /* ds: own (room for the ring) */
/* The member's own avatar (.snav-me, around the face: the bar's, its menu's, the account page's preview) and, for a
   paid member, its gold (Amine, 2026-11-11: "put this for paid users", then "also add some golden glow"): the ring in
   a soft gold gradient, lighter at the top left, in the coloured ring's place and size, so nothing moves; a soft golden
   light around it, a little stronger on a dark page, on hover and while the menu is open; and at the top right a black
   badge with a gold crown (.snav-pro: 3/7 of the avatar, 12px in the bar), edged in what it sits on, a little lighter
   on a dark page so it still reads. Who pays: data-paid on <html>, which brand.js keeps in this browser from /api/me
   (the pages are the same for everyone); the account page, drawn for its member, says it itself (data-paid on its
   preview). The ring is drawn behind the face: the gradient, and over its middle a disc of --ring-on, the gap. --me is
   the avatar's size where it is not the bar's. The golds and the badge's black are the paid member's own: the Design
   system has none yet. */
:root {
  --snav-pro-light: oklch(.87 .12 93);  /* ds: own */
  --snav-pro: oklch(.81 .15 86);  /* ds: own */
  --snav-pro-deep: oklch(.67 .14 70);  /* ds: own */
  --snav-pro-on: oklch(.15 0 0);  /* ds: own */
}
.snav-me { --pro-glow: calc(1.2 - var(--ds-light) * .2); position: relative; display: inline-grid; flex: none; isolation: isolate; }
.snav-user-btn:hover .snav-me, .snav-user-btn[aria-expanded="true"] .snav-me { --pro-glow: calc(1.55 - var(--ds-light) * .25); }
.snav-pro { display: none; }
:is(html[data-paid] .snav-me, .snav-me[data-paid]) > .snav-face { box-shadow: none; }
:is(html[data-paid] .snav-me, .snav-me[data-paid])::before {
  content: ""; position: absolute; z-index: -1; inset: calc(-1 * (var(--ring-gap, 2px) + var(--ring-w, 1.5px))); pointer-events: none;  /* ds: own */
  padding: var(--ring-w, 1.5px); border-radius: calc(var(--radius-round) + var(--ring-gap, 2px) + var(--ring-w, 1.5px));  /* ds: own (the face's corner, grown by the gap and the ring; a border would snap to whole pixels) */
  background: linear-gradient(var(--ring-on, var(--color-page)) 0 0) content-box, linear-gradient(135deg, var(--snav-pro-light), var(--snav-pro) 45%, var(--snav-pro-deep)) border-box;
  box-shadow: 0 0 calc(var(--me, var(--h-small)) / 7) color-mix(in oklab, var(--snav-pro) calc(40% * var(--pro-glow)), transparent), 0 0 calc(var(--me, var(--h-small)) / 2) calc(var(--me, var(--h-small)) / 28) color-mix(in oklab, var(--snav-pro-light) calc(34% * var(--pro-glow)), transparent);  /* ds: own */
  transition: inset var(--motion-fade), padding var(--motion-fade), box-shadow var(--motion-fade);
}
:is(html[data-paid] .snav-me, .snav-me[data-paid]) > .snav-pro {
  position: absolute; top: calc(100% / -7); right: calc(100% / -7); display: grid; place-items: center; width: calc(300% / 7); height: calc(300% / 7);
  border-radius: var(--radius-round); color: var(--snav-pro); background: var(--snav-pro-on);
  box-shadow: 0 0 0 max(1.5px, var(--me, var(--h-small)) / 20) color-mix(in oklab, var(--ring-on, var(--color-page)) calc(78% + var(--ds-light) * 22%), var(--color-text));  /* ds: own */
}
.snav-pro > svg { width: calc(500% / 6); height: calc(500% / 6); fill: currentColor; }
/* Read aloud, never shown: the avatar button's name ("Your account"; the crown adds "Pro member" to it, once). */
.snav-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }  /* ds: own */
/* The account menu, in the shape of the navbar's other menus: who is signed in, My account and Billing with quiet icons,
   Central Command for those who may open it, then Sign out in the error colour, its icon too (Central Command's
   profile menu). */
.snav-user-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; width: 220px; padding: 6px;
  border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); animation: snav-pop var(--motion-pop-in) var(--motion-ease);
}
.snav-user-pop[hidden] { display: none; }
.snav-user-head { display: flex; align-items: center; gap: 12px; padding: 8px 10px 12px; }
.snav-user-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.snav-user-who b, .snav-user-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snav-user-who b { color: var(--color-text); font: 600 14.5px/1.3 var(--font-sans); }
.snav-user-who span { color: var(--color-muted); font: 500 13px/1.3 var(--font-sans); }
.snav-user-who span:empty { display: none; }
/* A paid member: "Pro" under the name, where the others have their email (Amine, 2026-11-11, with the menu at 220px). */
.snav-user-who .snav-user-plan, html[data-paid] .snav-user-who span:not(.snav-user-plan) { display: none; }
html[data-paid] .snav-user-who .snav-user-plan { display: block; }
.snav-user-pop [role="menu"] { display: grid; gap: 2px; }
.snav-user-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--h-medium); padding: 0 10px; border: 0; border-radius: var(--radius-md);
  color: var(--color-text); background: none; cursor: pointer; font: 500 14px/1.2 var(--font-sans); text-align: left; text-decoration: none; transition: background-color var(--motion-fade);
}
.snav-user-row > svg { flex: none; color: var(--color-faint); transition: color var(--motion-fade); }
.snav-user-row:hover, .snav-user-row:focus-visible { background: var(--color-raised); }
.snav-user-row:hover > svg, .snav-user-row:focus-visible > svg { color: var(--color-accent); }
.snav-user-row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.snav-user-sep { height: 1px; margin: 4px -6px; background: var(--color-line); }
/* Central Command's row, in its own group, for its admins and guests only: hidden until brand.js finds the session among
   its keys. Its icon is Supagent's mark, as the navbar's logo (light on a dark bar). */
.snav-user-cc { display: grid; gap: 2px; }
.snav-user-cc[hidden] { display: none; }
.snav-user-row > img { flex: none; width: 18px; height: 18px; filter: var(--c-logo); }
.snav-user-out { margin: 0; }
.snav-user-out .snav-user-row, .snav-user-out .snav-user-row > svg { color: var(--color-error); }
.snav-user-out .snav-user-row:hover, .snav-user-out .snav-user-row:focus-visible { background: color-mix(in srgb, var(--color-error) 10%, transparent); }
.snav [data-in], html[data-auth="in"] .snav [data-out] { display: none; }
html[data-auth="in"] .snav [data-in] { display: inline-flex; }

/* Phones and tablets: one menu button, then a sheet with every product and its pages. */
.snav-menu { display: none; align-items: center; justify-content: center; width: var(--h-medium); height: var(--h-medium); margin-left: 6px; border: 1px solid var(--color-line); border-radius: var(--radius-md); color: var(--color-text); background: transparent; cursor: pointer; }
.snav-menu > svg:last-child, .snav-menu[aria-expanded="true"] > svg:first-child { display: none; }
.snav-menu[aria-expanded="true"] > svg:last-child { display: block; }
.snav-sheet { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100dvh - var(--snav-h)); overflow-y: auto; padding: 6px var(--snav-pad) 20px; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); background: var(--color-page); box-shadow: var(--shadow-lg); }
.snav-sheet[hidden] { display: none; }
html.snav-lock { overflow: hidden; }
.snav-sheet { overscroll-behavior: contain; }
.snav-sheet-sec { padding: 8px 0; border-bottom: 1px solid var(--color-line); }
/* the product: its icon in a solid tile, its name bold */
.snav-sheet-head { display: flex; align-items: center; gap: 12px; min-height: var(--h-large); color: var(--color-text); font: 650 16.5px/1.3 var(--font-sans); }
.snav-sheet-tile { display: grid; flex: none; place-items: center; width: var(--h-medium); height: var(--h-medium); border-radius: var(--radius-md); background: var(--color-text); color: var(--color-surface); }
.snav-sheet-sec.current .snav-sheet-tile { background: var(--color-accent); color: var(--color-accent-content); }
/* a page: a small plain icon and a lighter name, lined up under the product's name */
.snav-sheet-page { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-left: calc(var(--h-medium) + 12px); color: var(--color-muted); font-size: 15px; text-decoration: none; }
.snav-sheet-page svg { flex: none; color: var(--color-faint); }
/* not open yet: its pages greyed, without links */
.snav-sheet-page.soon, .snav-sheet-page.soon svg { color: var(--color-faint); }
/* a product that is not open yet: its name and tile in the quiet grey, its line, then the way to get notified */
.snav-sheet-sec.next .snav-sheet-head { color: var(--color-muted); }
.snav-sheet-sec.next .snav-sheet-tile { background: var(--color-raised); color: var(--color-faint); }
.snav-sheet-page.snav-next-act { color: var(--color-text); font-weight: 600; }
/* the page being shown */
.snav-sheet-page[aria-current="page"], .snav-sheet-page[aria-current="page"] svg { color: var(--color-accent); }
.snav-sheet-page[aria-current="page"] { font-weight: 600; }
@media (hover: hover) { a.snav-sheet-page:hover, a.snav-sheet-page:hover svg { color: var(--color-accent); } }
.snav-sheet-sec p { margin: 2px 0 8px calc(var(--h-medium) + 12px); color: var(--color-muted); font-size: 14px; }
.snav-sheet-link { display: block; padding: 14px 0; border-bottom: 1px solid var(--color-line); color: var(--color-text); font-size: 15.5px; font-weight: 600; text-decoration: none; }
.snav-sheet-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 16px; }
.snav-sheet-auth .snav-btn { height: var(--h-large); border-radius: var(--radius-lg); font-size: 15px; }
html[data-auth="in"] .snav-sheet-auth { grid-template-columns: 1fr; }
/* The launch state (SaaS Ideas, Launch Videos soon, Pricing; Amine, 2026-11-11): the bar needs about 920px signed out,
   "Soon" included, so at 960px and below, one menu button. Before: 1100px, and no pills under 1240px, measured with
   three products and the longer name (Launch Video Agent, Oct 19 to Nov 11). */
@media (max-width: 960px) {
  .snav-links, .snav-auth { display: none; }
  .snav-menu { display: inline-flex; }
  /* Signed in, the avatar stays in the bar and opens the same menu (My account is also in the phone menu). */
  html[data-auth="in"] .snav-auth { display: flex; margin-left: 4px; }
}
@media (max-width: 640px) { .snav-favs-pop { position: fixed; top: calc(var(--snav-h) + 6px); right: 12px; left: 12px; width: auto; } }
@media (max-width: 420px) {
  .snav-mode { display: none; } /* the theme menu has light and dark too */
  .snav-logo { margin-right: 6px; }
  .snav-icon { width: 34px; }
  .snav-tools { gap: 0; }
}
@media (max-width: 359px) { .snav-in > .snav-logo .snav-word { display: none; } }
@media (min-width: 961px) { .snav-sheet { display: none !important; } }
/* A product's own page adds its item before it opens (Agent Hub's, Site Intel's: locally and on test copies), three in
   the bar: about 1110px with Agent Hub's, 1050px with Site Intel's, so the menu button takes over up to 1140px. A
   fourth item needs a new measure. */
@media (min-width: 961px) and (max-width: 1140px) {
  .snav:has(.snav-links > .snav-item:nth-child(3)) :is(.snav-links, .snav-auth) { display: none; }
  .snav:has(.snav-links > .snav-item:nth-child(3)) .snav-menu { display: inline-flex; }
  html[data-auth="in"] .snav:has(.snav-links > .snav-item:nth-child(3)) .snav-auth { display: flex; margin-left: 4px; }
  .snav:has(.snav-links > .snav-item:nth-child(3)) .snav-sheet:not([hidden]) { display: block !important; }
}

/* Longer words (Spanish needs 992px of bar, German about 985px, French 968px): a page in Spanish, German or French keeps the menu
   button up to 1064px (Italian fits, as English does), so the wordmark never meets the first item, the bar's right padding is the same as English's and the
   page never scrolls sideways. English pages keep 960px. */
@media (min-width: 961px) and (max-width: 1064px) {
  html:not([lang^="en"], [lang^="it"]) .snav :is(.snav-links, .snav-auth) { display: none; }
  html:not([lang^="en"], [lang^="it"]) .snav .snav-menu { display: inline-flex; }
  html[data-auth="in"]:not([lang^="en"], [lang^="it"]) .snav .snav-auth { display: flex; margin-left: 4px; }
  html:not([lang^="en"], [lang^="it"]) .snav .snav-sheet:not([hidden]) { display: block !important; }
}

/* Launch bar: under the navbar, tinted in the accent (Supagent's blue, or the theme's main colour), closable. Its
   action is the accent, a fifth darker on a light page (mixed with the text); in a theme, mixed with the text in both
   halves, as the Live pill (5.4:1 at least). */
.snav-bar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px;
  padding: 9px var(--snav-pad); color: var(--color-text); font-size: 14px; font-weight: 500; line-height: 1.4; text-align: center;
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-page)); border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 16%, var(--color-page));
}
.snav-bar > svg { flex: none; color: var(--color-accent); }
.snav-bar-act { padding: 0; border: 0; color: color-mix(in srgb, var(--color-accent) calc(100% - var(--ds-light) * 20%), var(--color-text)); background: none; cursor: pointer; font: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
:root[data-palette] .snav-bar-act { color: color-mix(in oklab, var(--color-accent) 70%, var(--color-text)); }
/* Close: a small icon button; on touch screens the medium one, the bar keeping its height. */
.snav-bar-x { transition: color var(--motion-fade), background-color var(--motion-fade); display: grid; place-items: center; width: var(--h-small); height: var(--h-small); padding: 0; border: 0; border-radius: var(--radius-sm); color: var(--color-muted); background: none; cursor: pointer; }
.snav-bar-x:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
html[data-sbar="off"] .snav-bar { display: none; }
@media (pointer: coarse) {
  /* Tapped on its own: an invisible 48px tap area around its look (Sizes, Amine, Oct 20), the logo's 26px included. */
  .snav-logo, .snav-btn, .snav-menu, .snav-bar-x { position: relative; }
  .snav-logo::before, .snav-icon::before, .snav-btn::before, .snav-menu::before, .snav-bar-x::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 48px); height: max(100%, 48px); translate: -50% -50%;
  }
  /* The tools' icons sit 2px apart: their tap areas grow up and down only, to the middle of each gap, so none covers a
     neighbour (SaaS Ideas' probe, Oct 20: half of Favorites' own box went to Language). */
  .snav-tools .snav-icon::before { width: calc(100% + 2px); }
  /* The avatar sits 4px from the theme icon and 6px from the menu button (which covers that gap): up and down only. */
  .snav-user-btn::before { width: 100%; }
  .snav-bar-act { padding-block: 13px; margin-block: -13px; }
  /* The footer's links, 9px apart: wide enough for a short one (X), and tall to the middle of each gap, so none covers a
     neighbour; the look stays. */
  .sfoot-col a, .sfoot-legal a { min-width: var(--h-large); padding-block: 4.5px; margin-block: -4.5px; }
  .snav-bar-x { width: var(--h-medium); height: var(--h-medium); margin: -4px -4px -4px 0; border-radius: var(--radius-md); }
}
@media (max-width: 640px) {
  .snav-bar { display: grid; grid-template-columns: 1fr auto; align-items: start; justify-items: start; gap: 4px 10px; font-size: 13px; text-align: left; }
  .snav-bar > svg { display: none; }
  .snav-bar-x { grid-column: 2; grid-row: 1; }
  .snav-bar-act { grid-column: 1; grid-row: 2; }
}

/* Footer: the brand, a column per live product (its pages, then its guides), "Coming next" and Company; the legal
   pages on the last line, beside the copyright (Amine, 2026-11-09). However many columns: each takes an equal share
   beside the brand's. The brand's words (Amine, 2026-11-11: "write more text in here, it looks empty"): the tagline,
   then what Supagent is and who it is for (config/supagent.ts, about), each a quiet paragraph in the tagline's
   style, its lines evened out, 38 characters at most. */
.sfoot { color: var(--color-muted); background: var(--color-page); border-top: 1px solid var(--color-line); font-size: 14px; }
.sfoot-in { display: grid; grid-auto-flow: column; grid-template-columns: 1.4fr; grid-auto-columns: 1fr; gap: 28px; max-width: var(--snav-max); margin: 0 auto; padding: 44px var(--snav-pad) 26px; }
.sfoot-brand p { max-width: 260px; margin: 12px 0 0; line-height: 1.5; text-wrap: balance; }
.sfoot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.sfoot-h { margin: 0 0 3px; color: var(--color-text); font-size: 13.5px; font-weight: 650; }
.sfoot-col a { color: var(--color-muted); text-decoration: none; transition: color var(--motion-fade); }
.sfoot-col a:hover { color: var(--color-text); }
.sfoot-col span { color: var(--color-faint); }
.sfoot-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; max-width: var(--snav-max); margin: 0 auto; padding: 0 var(--snav-pad) 32px; color: var(--color-faint); font-size: 13px; }
.sfoot-base p { margin: 0; }
.sfoot-legal { display: flex; gap: 20px; }
.sfoot-legal a { color: var(--color-faint); text-decoration: none; transition: color var(--motion-fade); }
.sfoot-legal a:hover { color: var(--color-text); }
@media (max-width: 960px) {
  .sfoot-in { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
  .sfoot-brand { grid-column: 1 / -1; }
}

/* Error pages, the same on every product (lib/site-chrome.ts, errorPageHtml): what happened and what to do, then
   where to go next, the product's own offering or its pages (the navbar card's rows, as cards). */
.serr { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px; width: 100%; max-width: 64rem; min-height: min(55vh, 36rem); margin: 0 auto; padding: 64px 24px 88px; font-family: var(--font-sans); text-align: center; -webkit-font-smoothing: antialiased; }
.serr *, .serr *::before, .serr *::after { box-sizing: border-box; }
.serr-head { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 40rem; }
.serr-code { margin: 0; color: var(--color-muted); font: var(--text-label--font-weight) var(--text-label)/var(--text-label--line-height) var(--font-mono); letter-spacing: var(--text-label--letter-spacing); text-transform: uppercase; }
.serr-title { margin: 0; color: var(--color-text); font-size: var(--text-title-1); font-weight: var(--text-title-1--font-weight); line-height: var(--text-title-1--line-height); letter-spacing: var(--text-title-1--letter-spacing); text-wrap: balance; }
.serr-line { margin: 0; color: var(--color-muted); font-size: var(--text-body); line-height: var(--text-body--line-height); text-wrap: pretty; }
.serr-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.serr-act { display: inline-flex; align-items: center; justify-content: center; height: var(--h-large); padding: 0 22px; border-radius: var(--radius-lg); font: 600 15px/1 var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--motion-fade), opacity var(--motion-fade); }
.serr-act.solid { color: var(--color-primary-content); background: var(--color-primary); border: 1px solid var(--color-primary); box-shadow: var(--shadow-depth); }
.serr-act.solid:hover { opacity: .86; }
.serr-act.ghost { color: var(--color-text); background: var(--color-page); border: 1px solid var(--color-line); }
.serr-act.ghost:hover { background: var(--color-raised); }
.serr-act:focus-visible, .serr-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.serr-offer { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.serr-offer-h { margin: 0; color: var(--color-text); font-size: var(--text-title-3); font-weight: var(--text-title-3--font-weight); line-height: var(--text-title-3--line-height); }
.serr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 12px; text-align: start; }
.serr-card { display: flex; align-items: flex-start; gap: 16px; min-height: var(--h-large); padding: 16px; border: 1px solid var(--color-line); border-radius: var(--radius-xl); color: var(--color-text); background: var(--color-surface); text-decoration: none; transition: border-color var(--motion-fade); }
.serr-card:hover { border-color: var(--color-faint); }
.serr-card:hover .snav-ico { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 13%, transparent); }
/* Pages that are not there yet: greyed, with "Soon", and no link. */
.serr-card.soon { cursor: default; border-style: dashed; background: transparent; }
.serr-card.soon:hover { border-color: var(--color-line); }
.serr-card.soon .snav-ico, .serr-card.soon .serr-card-t b, .serr-card.soon .serr-card-t span { color: var(--color-faint); }
.serr-card-t { flex: 1; min-width: 0; }
.serr-card-t b { display: block; font-size: 14px; font-weight: 550; line-height: 20px; }
.serr-card-t span { display: block; color: var(--color-muted); font-size: 12.5px; text-wrap: pretty; }
@media (max-width: 640px) { .serr { gap: 40px; padding: 48px 16px 64px; } }