/* SnapStaq's top bar and its phone menu: ONE copy for the homepage (v3.html) and every public page
   (src/components/public-site.tsx, which gets this file as text from scripts/sync-landing.mjs), so they can
   never drift apart again (the owner, 2026-10-14: "why are these pages drifting in the first place?").
   Edit it here, then run node scripts/sync-landing.mjs. It reads the page's colour words (--bg, --text,
   --text-2, --line, --shade, --stack, --ease, --body, --head); each page sets where the bar sits. */
.top a, .top button, .nav-sheet a { -webkit-user-select: none; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* the header, as on the live site: a full-width bar across the top (src/app/pricing/pricing-content.tsx: .topnav) */
.top { position: fixed; z-index: 40; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  height: clamp(64px, 7vh, 80px); padding: 0 clamp(20px, 3vw, 48px); background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid var(--line);   /* frosted glass: the page flows under it (the owner) */
  box-shadow: 0 10px 30px -24px var(--shade); }   /* the whole bar on one floating slab (the owner) */   /* no bar behind it: it sits on the page (the owner) */
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.brand img { width: 26px; height: 26px; }
.brand span { font: 200 20px "Outfit", sans-serif; letter-spacing: .3em; text-transform: uppercase; } .brand b { font-weight: 400; color: var(--stack); }
.links { position: absolute; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); box-shadow: inset 0 0 0 1px var(--line); }   /* a slab behind the links, translucent like the bar */
.links .nl, .nav-products-btn { padding: 8px 16px; border-radius: 999px; font: 500 14px var(--body); color: var(--text-2); text-decoration: none; transition: color .2s, background .2s; }
.links .nl:hover, .links .nl.on, .nav-products-btn:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.nav-products { position: relative; }
.nav-products-btn { display: flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer; }
.nav-products-btn svg { width: 12px; height: 12px; transition: transform .2s; }
.nav-products.open .nav-products-btn svg { transform: rotate(180deg); }
.nav-products-dropdown { position: absolute; top: calc(100% + 28px); left: -90px; width: 460px; padding: 14px 0; border-radius: 10px; background: var(--bg); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -16px var(--shade);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s ease, transform .2s cubic-bezier(.22,1,.36,1), visibility .15s; }
.nav-products.open .nav-products-dropdown { opacity: 1; visibility: visible; transform: none; }
.nav-products-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -30px; height: 30px; }   /* the mouse can travel down to the menu */
.nav-products-dropdown a { display: flex; align-items: center; gap: 14px; padding: 10px 18px; color: var(--text); text-decoration: none; transition: background .15s; }
.nav-products-dropdown a:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.nav-dd-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; }
.nav-dd-icon--stacks { background: var(--stack); } .nav-dd-icon--invoice { background: rgba(196, 149, 106, .9); } .nav-dd-icon--stash { background: rgba(123, 158, 199, .9); }
.nav-dd-icon svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-dd-text { display: grid; gap: 2px; } .nav-dd-name { font-size: 15.5px; font-weight: 500; } .nav-dd-sub { font-size: 13.5px; color: var(--text-2); }
.nav-actions { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 20px); }
.themes { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--text) 5%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
/* each theme button painted in the theme it switches to, a green ring on the chosen one (the owner, 2026-10-14, "A";
   the app's own: src/components/theme-chips.tsx) */
.themes button { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  outline: 1.5px solid transparent; outline-offset: 2px; transition: transform .16s var(--ease), outline-color .16s ease; }
.themes button:hover { transform: scale(1.06); }
.themes button.on { outline-color: var(--stack); }
.themes button[data-theme="light"] { background: #F4F7F1; color: #4E6349; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.themes button[data-theme="warm"] { background: #EFE4CB; color: #55633E; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.themes button[data-theme="dark"] { background: #1C1F1B; color: #A9BFA0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.themes button[data-theme="midnight"] { background: #000; color: #A9BFA0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.themes svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-login-link { font-size: 14px; color: var(--text-2); text-decoration: none; transition: color .2s; } .nav-login-link:hover { color: var(--text); }
.nav-cta { display: inline-flex; align-items: center; gap: 10px; padding: 6px; padding-inline-start: 18px; border-radius: 999px; background: var(--stack); color: #fff; font: 600 14px var(--body); text-decoration: none; transition: opacity .2s, transform .2s; }
.nav-cta:hover { opacity: .9; transform: translateY(-1px); }
.nav-cta .btn-circle { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, #000 22%, var(--stack)); }
.nav-cta .btn-circle svg { width: 12px; height: 12px; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1100px) { .nav-login-link { display: none; } }
/* other languages' link names run longer than English: on iPads held sideways and small laptops they sit closer
   together, so the middle links never touch the buttons on the right */
@media (min-width: 901px) and (max-width: 1240px) { html:not([lang="en"]) .links .nl { padding: 8px 10px; font-size: 13.5px; } }
@media (max-width: 900px) { .links { display: none; } .top { padding: 0 16px; } .brand span { display: none; } .themes button { width: 28px; height: 28px; } }

/* the menu button and its sheet (phones and small tablets): the links, then Sign up and Log in (on a phone the theme switch shows in the bar while it is open) */
.nav-menu { display: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--text) 6%, transparent);
  box-shadow: inset 0 0 0 1px var(--line); color: var(--text); cursor: pointer; }
.nav-menu svg { width: 18px; height: 18px; }
.nav-menu path { transition: transform .25s var(--ease); transform-origin: 12px 12px; }
.nav-menu[aria-expanded="true"] path:first-child { transform: translateY(4px) rotate(45deg); }   /* the two lines turn into a cross */
.nav-menu[aria-expanded="true"] path:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav-sheet { position: absolute; top: 100%; left: 0; right: 0; display: grid; gap: 18px; padding: 18px 16px 22px; background: var(--bg);   /* solid: nothing shows through the links */
  max-height: calc(100dvh - 100%); overflow-y: auto; border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -28px var(--shade); }
.nav-sheet[hidden] { display: none; }
.nav-sheet nav { display: grid; }
.nav-sheet nav a { padding: 12px 4px; border-bottom: 1px solid var(--line); font: 400 22px/1.2 var(--head); letter-spacing: -.02em; color: var(--text); text-decoration: none; }
.nav-sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 6px; }   /* Log in and Sign up side by side (the owner) */
.nav-sheet-login { order: -1; }   /* Log in left, Sign up right */
.nav-sheet-main:only-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); }   /* signed in: Dashboard alone, the size of Sign up, in the middle (the owner, 2026-10-14) */
.nav-sheet-actions a { display: flex; align-items: center; justify-content: center; height: 50px; border-radius: 999px; font: 600 16px var(--body); text-decoration: none; }
.nav-sheet-main { position: relative; padding: 0 46px; background: var(--stack); color: #fff; }   /* the words in the middle, as Log in's (the owner); the arrow circle at the right end */
.nav-sheet-main .btn-circle { position: absolute; inset-inline-end: 7px; top: 50%; translate: 0 -50%; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, #000 22%, var(--stack)); }
.nav-sheet-main .btn-circle svg { width: 14px; height: 14px; stroke-linecap: round; stroke-linejoin: round; }
.nav-sheet-login { background: color-mix(in srgb, var(--text) 5%, transparent); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
@media (min-width: 601px) { .nav-sheet-main { display: none !important; } .nav-sheet-actions { grid-template-columns: 1fr; } }
/* the open menu dims the page under it and holds it still, and the helper robot steps aside (the owner: "it's causing confusion") */
.nav-scrim { position: fixed; inset: 0; z-index: 39; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .35s ease; }   /* just under the bar (.top z 40) */
.nav-scrim.in { opacity: 1; }
/* the menu unrolls from the bar: its edge sweeps down, the links drop in one after another, then Log in / Sign up rise
   into place; the theme switch slides into the bar beside the cross. Closing rolls it back up, quicker */
.nav-sheet { clip-path: inset(0 0 100% 0); transition: clip-path .32s cubic-bezier(.4, 0, .2, 1); }
.nav-sheet.in { clip-path: inset(0 0 -80px 0); transition: clip-path .55s cubic-bezier(.22, 1, .36, 1); }   /* -80px: its shadow shows below */
.nav-sheet nav a, .nav-sheet-actions { opacity: 0; transform: translateY(-12px); transition: opacity .2s ease, transform .3s ease; }
.nav-sheet.in nav a, .nav-sheet.in .nav-sheet-actions { opacity: 1; transform: none; transition: opacity .45s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
.nav-sheet.in nav a:nth-child(1) { transition-delay: .06s; } .nav-sheet.in nav a:nth-child(2) { transition-delay: .1s; }
.nav-sheet.in nav a:nth-child(3) { transition-delay: .14s; } .nav-sheet.in nav a:nth-child(4) { transition-delay: .18s; }
.nav-sheet.in nav a:nth-child(5) { transition-delay: .22s; } .nav-sheet.in nav a:nth-child(6) { transition-delay: .26s; }
.nav-sheet.in .nav-sheet-actions { transition-delay: .32s; }
.top.open > .nav-actions > .themes { animation: themes-in .5s cubic-bezier(.22, 1, .36, 1) both; }
.top.open > .nav-actions > .themes button { animation: chip-in .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.top.open > .nav-actions > .themes button:nth-child(2) { animation-delay: .05s; } .top.open > .nav-actions > .themes button:nth-child(3) { animation-delay: .1s; }
.top.open > .nav-actions > .themes button:nth-child(4) { animation-delay: .15s; }
@keyframes themes-in { from { opacity: 0; transform: translateX(14px); } }
@keyframes chip-in { from { transform: scale(.4); } }
@media (prefers-reduced-motion: reduce) { .nav-sheet, .nav-sheet.in, .nav-sheet nav a, .nav-sheet-actions, .nav-scrim { transition: none !important; } .top.open > .nav-actions > .themes, .top.open > .nav-actions > .themes button { animation: none; } }
.nav-scrim[hidden] { display: none; }
html.menu-open { overflow: hidden; }
html.menu-open .bot-pal, html.menu-open .bot-say { visibility: hidden; }

@media (max-width: 600px) {
  .nav-sheet-actions a { height: 44px; font-size: 15px; }
  .nav-sheet-main { padding: 0 42px; } .nav-sheet-main .btn-circle { inset-inline-end: 6px; width: 32px; height: 32px; } .nav-sheet-main .btn-circle svg { width: 13px; height: 13px; }
}

@media (max-width: 900px) {
  .nav-menu { display: grid; }
  .brand span { display: inline; font-size: 15px; letter-spacing: .24em; }   /* the wordmark stays, smaller (the owner: never the icon alone) */
  .brand img { width: 22px; height: 22px; } .brand { gap: 9px; }
}

@media (max-width: 600px) {
  .top > .nav-actions > .themes { display: none; }   /* on a phone the bar is the logo and the menu button only (the owner, 2026-10-14) */
  .top > .nav-actions > .nav-cta { display: none; }   /* Sign up / Dashboard are in the menu */
  .top.open > .nav-actions > .themes { display: flex; }   /* while the menu is open the theme switch sits in the bar, beside the cross */
  .nav-actions { gap: 8px; }
  .nav-cta { padding: 4px; padding-inline-start: 14px; font-size: 13px; } .nav-cta .btn-circle { width: 26px; height: 26px; }
  .brand span { font-size: 14px; letter-spacing: .2em; }
}

/* right to left (Arabic): the arrows point the reading way, and the theme switch slides in from the other side */
[dir="rtl"] .btn-circle svg { transform: scaleX(-1); }
[dir="rtl"] .top.open > .nav-actions > .themes { animation-name: themes-in-rtl; }
@keyframes themes-in-rtl { from { opacity: 0; transform: translateX(-14px); } }

@media (max-width: 370px) { .brand span { letter-spacing: .14em; } .nav-cta span:first-child { display: none; } .nav-cta { padding: 4px; } .themes { gap: 4px; } .themes button { width: 26px; height: 26px; } }   /* the open menu's bar fits a 320px phone */