/* Street2Sim — shared brand system.
   Palette, type, and page chrome per ../brand/brand.md §3.
   Night-run cartography: asphalt ground, contour linework, one amber road. */

/* Moving between our pages cross-fades instead of flashing (cross-document
   view transitions; a browser without them just navigates). Both pages must
   opt in, so the rule lives here, on every main page. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* .stay-dark keeps a section on night inside a light page (dark video
   stages, map screens): the tokens re-set on it, so its subtree draws dark. */
:root, .stay-dark {
  color-scheme: dark;

  /* Palette (brand.md §3) */
  --asphalt:   #0E0F12;
  --basalt:    #16181D;
  --basalt-2:  #1B1E24;
  --contour:   #2A2E36;
  --gravel:    #8A919D;
  --chalk:     #E8E6E0;
  --sodium:    #FFA43B;
  --sodium-dim:#7a5320;
  --taillight: #E5484D;
  --signal:    #63D471;

  /* Roles the palette above doesn't name, so the light theme can move them:
     --sodium-fill  amber behind dark text (primary buttons, badges); the
                    same as --sodium here, a brighter amber than the
                    light theme's text amber there
     --on-sodium    text on --sodium-fill
     --well         below the page: inputs, code, wells
     --faint        placeholders and the faintest text
     --tint-rgb     the colour hovers and faint fills mix in (white on night)
     --*-rgb        the palette as "r g b" for rgb(var(--x-rgb) / .5) */
  --sodium-fill: #FFA43B;
  --on-sodium:   #191006;
  --well:        #0A0B0E;
  --faint:       #5b6270;
  --contour-line-1: #191c22;
  --contour-line-2: #15181d;
  --asphalt-rgb: 14 15 18;
  --basalt-rgb:  22 24 29;
  --contour-rgb: 42 46 54;
  --tint-rgb:    255 255 255;
  --shade-rgb:   0 0 0;
  --glass-rgb:   8 9 11;   /* chips and panels laid over footage */
  --space:       #08090B;  /* behind the library globe */
  --signal-line: #2c4a33;  /* green-tinted cards */
  --signal-wash: #101a13;
  /* Status boxes and accent inks pages drew with literals. */
  --err-bg:   #251316; --err-line:  #4a2126; --err-ink:  #f2a6a9;
  --ok-bg:    #0f1a13; --ok-line:   #23402a; --ok-ink:   #a6e0b1;
  --warn-bg:  #1c1710; --warn-line: #3a2d16; --warn-ink: #b9903f;
  --amber-wash: #19150f; --amber-line: #4a3a1a;
  --info:     #8fb4ff; --info-line: #2c3d63;
  --violet:   #b9b2ff;
  --red-ink:  #ff7a6b; --green-ink: #6fd08c;
  --gold:     #FFD24A; --silver: #cfd5de; --bronze: #d79a5c;
  /* Lesser greys pages used as literals: --lede body copy a step under
     chalk, --muted small print (5:1), --line-2/3 stronger rules and key caps,
     --raise/--raise-2 faint fills one and two steps above the well. */
  --lede:    #c9ccd2;
  --muted:   #7d8491;
  --line-2:  #3a3f49;
  --line-3:  #4a505c;
  --raise:   #1f232a;
  --raise-2: #262a31;

  --display: "Space Grotesk", "Archivo", "Segoe UI", system-ui, sans-serif;
  --body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", "Cascadia Code", ui-monospace, Consolas, monospace;

  /* The content width grows with the screen: 1120px on a laptop, up to
     1400px on a wide monitor, so a 2560px screen isn't half empty. Text
     blocks keep their own narrower measure (policy pages 820px, ledes ch). */
  --shell: clamp(1120px, 76vw, 1400px);
  --radius: 12px;

  /* Height of the sticky header, border included: one 68px row on desktop,
     two rows (58 + 44) under 860px, one 58px row once the links fold into
     the menu button (see "menu button" below). Sticky offsets and anchor
     jumps read it. */
  --nav-h: 69px;
}
@media (max-width: 860px) { :root { --nav-h: 104px; } }

/* ---------- light theme ("Day Run") ----------
   The same survey map printed on paper instead of night: warm paper ground,
   white sheets, graphite ink and the amber road. theme.js sets
   <html data-theme="light"> from the visitor's pick or the system setting.
   Amber text darkens to keep 4.5:1 on paper (WCAG AA); amber fills stay
   bright behind dark text. Contrast on --asphalt / --basalt:
   every text ink is at least 4.5:1 on --asphalt, --basalt, --basalt-2 and
   --well (chalk 15.7:1, gravel 5.3:1, sodium 5.5:1, faint 5.8:1). */
:root[data-theme="light"] {
  color-scheme: light;
  --asphalt:   #F4F2EC;
  --basalt:    #FFFFFF;
  --basalt-2:  #ECE9E1;
  --contour:   #D9D5CA;
  --gravel:    #5E6470;
  --chalk:     #17191E;
  --sodium:    #9A4C00;
  --sodium-dim:#E2B57A;
  --taillight: #B42A30;
  --signal:    #146C2D;

  --sodium-fill: #FFA43B;
  --on-sodium:   #191006;
  --well:        #FAF9F5;
  --faint:       #585E6A;
  --contour-line-1: #E3DFD4;
  --contour-line-2: #E8E4DA;
  --asphalt-rgb: 244 242 236;
  --basalt-rgb:  255 255 255;
  --contour-rgb: 217 213 202;
  --tint-rgb:    23 25 30;
  --shade-rgb:   60 52 36;
  --glass-rgb:   255 255 255;
  --space:       #E9E6DE;
  --signal-line: #A9D3B3;
  --signal-wash: #EEF6EF;
  --err-bg:   #FCEDED; --err-line:  #EBB9BB; --err-ink:  #9E2A2F;
  --ok-bg:    #EBF5EE; --ok-line:   #A9D3B3; --ok-ink:   #1C6B33;
  --warn-bg:  #FBF3E4; --warn-line: #E5C88F; --warn-ink: #855600;
  --amber-wash: #FFF5E6; --amber-line: #E2B57A;
  --info:     #2F5FB3; --info-line: #B5C7EA;
  --violet:   #5B4FC4;
  --red-ink:  #B4302B; --green-ink: #146C2D;
  --gold:     #835A00; --silver: #565D69; --bronze: #8A4C16;
  --lede:    #3A3F49;
  --muted:   #5E6470;
  --line-2:  #C4BFB2;
  --line-3:  #B3AD9F;
  --raise:   #E4E0D6;
  --raise-2: #DAD5CA;
}
/* The hairpin glyph's contour rings and dashed centre line are drawn for
   night; on paper they take the paper's own line and ink. */
[data-theme="light"] .mark svg g[clip-path] { stroke: #CFCABD; }
[data-theme="light"] .mark svg path[stroke-dasharray] { stroke: #17191E; }
/* A switch cross-fades the page instead of snapping (theme.js adds the
   class for a moment). */
html.theme-fading, html.theme-fading * { transition: background-color .2s ease, border-color .2s ease, color .2s ease, fill .2s ease !important; }

/* ---------- theme button (theme.js) ---------- */
.theme-toggle {
  display: inline-grid; place-items: center; flex: none;
  width: 36px; height: 36px; padding: 0; border-radius: 10px;
  border: 1px solid var(--contour); background: transparent; color: var(--gravel);
  cursor: pointer; transition: color .15s, border-color .15s; touch-action: manipulation;
}
.theme-toggle:hover { color: var(--chalk); border-color: var(--gravel); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-moon { display: none; }
[data-theme="light"] .theme-toggle .i-sun { display: none; }
[data-theme="light"] .theme-toggle .i-moon { display: block; }
.nav .theme-toggle { margin-left: auto; }
.nav .theme-toggle + .actions { margin-left: 0; }
.back .theme-toggle { margin-left: auto; }
.back .theme-toggle + .right, .back .theme-toggle + [data-notify-bell] { margin-left: 10px !important; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Anchor jumps, scrollIntoView and focus land below the sticky header. */
html:has(.nav, .nr-header, .topbar) { scroll-padding-top: calc(var(--nav-h) + 16px); }

::selection { background: rgba(255, 164, 59, .32); color: var(--chalk); }

/* One focus ring for everything a keyboard can reach. Text inputs show
   focus with their amber border instead (forms below). */
:focus-visible { outline: 2px solid var(--sodium); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

body {
  margin: 0;
  background: var(--asphalt);
  color: var(--chalk);
  font: 16px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Faint contour survey grid over the whole page — the "map printed on night". */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-radial-gradient(circle at 82% -6%, transparent 0 58px, var(--contour-line-1) 58px 59px),
    repeating-radial-gradient(circle at 6% 78%, transparent 0 74px, var(--contour-line-2) 74px 75px);
  opacity: .55;
  mask-image: radial-gradient(ellipse 130% 90% at 50% 0%, #000 20%, transparent 78%);
}
body > * { position: relative; z-index: 1; }

a { color: var(--sodium); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--display); line-height: 1.12; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }

code {
  font-family: var(--mono); font-size: .88em; color: var(--chalk);
  background: var(--well); border: 1px solid var(--contour);
  border-radius: 5px; padding: 1px 6px;
}

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 24px; }

/* Visually hidden, still read and indexed (page headings on the library and
   community pages, form labels). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Keyboard users jump past the nav (it appears only when focused). */
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 1000; padding: 10px 16px;
  border-radius: 10px; background: var(--sodium-fill); color: var(--on-sodium); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }
#content:focus { outline: none; }
.mono { font-family: var(--mono); font-size: .82rem; letter-spacing: .02em; }

/* ---------- glyph + wordmark ---------- */

.mark { display: flex; align-items: center; gap: 11px; }
.mark svg { width: 34px; height: 34px; flex: none; }
.mark .word {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--chalk);
  white-space: nowrap;
}

/* ---------- nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgb(var(--asphalt-rgb) / .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--contour);
}
.nav .shell {
  display: flex; align-items: center; gap: 28px;
  height: 68px;
}
.nav a.mark:hover { text-decoration: none; }
.nav .links { display: flex; gap: 26px; }
.nav .links a {
  color: var(--gravel); font-size: .9rem; font-weight: 500; white-space: nowrap;
}
.nav .links a:hover { color: var(--chalk); text-decoration: none; }
.nav .links a[aria-current="page"] {
  color: var(--chalk); box-shadow: inset 0 -2px 0 var(--sodium); padding-bottom: 4px;
}
/* The signed-in email is the part of the bar that gives: whenever the links
   and the signed-in controls (email, counter, Upgrade, Sign out) would run
   past the edge, at any width, it shortens with an ellipsis (auth.js caps it
   at 180px) instead of pushing Sign out off screen. */
.nav .actions { display: flex; align-items: center; gap: 14px; margin-left: auto; min-width: 0; }
.nav .actions .auth-who { min-width: 0; flex: 0 1 auto; }

/* Four links plus the signed-in controls don't share a small-laptop bar:
   the counter gives way first (Upgrade goes to the same plans page). The
   shell is 1120px on most laptops, so on a page with four links (the
   builder, Your builds) the free-tier counter doesn't fit beside a full
   email: there it gives way at every width. */
@media (min-width: 861px) and (max-width: 1180px) {
  .nav .shell { gap: 22px; }
  .nav .links { gap: 20px; }
  .nav .actions .auth-avail { display: none !important; }
}
.nav .shell:has(.links > a:nth-child(4)) .actions .auth-avail { display: none !important; }

/* Phones and tablets: the links drop to their own row under the logo and
   the sign-in controls, full width, and scroll sideways when they don't
   fit. The shell's side padding is 24px here (16px under 640px); the row
   bleeds through it so it scrolls edge to edge.
   The header is exactly two rows (58 + 44px, 104 with borders; --nav-h),
   or one once the menu button takes the links. So row one never wraps: the
   sign-in controls take whatever the logo leaves (a zero basis always fits
   beside it), the counter waits for a wider screen and the email shortens. */
@media (max-width: 860px) {
  .nav .shell { flex-wrap: wrap; height: auto; column-gap: 16px; row-gap: 0; }
  .nav .mark, .nav .actions { min-height: 58px; }
  .nav .actions { flex: 1 1 0; justify-content: flex-end; }
  .nav .actions .auth-avail { display: none !important; }
  .nav .links {
    order: 3; flex: 0 0 calc(100% + 48px); margin: 0 -24px; padding: 0 14px;
    gap: 2px; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; border-top: 1px solid rgb(var(--contour-rgb) / .6);
  }
  .nav .links::-webkit-scrollbar { display: none; }
  .nav .links a {
    flex: none; display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 10px; font-size: .88rem;
  }
  .nav .links a[aria-current="page"] { padding-bottom: 0; }
}

/* ---------- menu button ----------
   Under 860px a page whose header carries a .nav-toggle (site-ui.js adds
   one where the markup doesn't) folds the links into a panel that drops
   from the bar, and the bar is a single row. Without scripts the links
   keep their sideways-scrolling row above. night.css styles the panel for
   the night-skin headers. */
.nav-toggle { display: none; }
@media (max-width: 860px) and (scripting: enabled) {
  :root:has(.nav-toggle) { --nav-h: 59px; }
  .nav-toggle {
    display: inline-grid; place-items: center; flex: none; order: 2;
    width: 40px; height: 40px; padding: 0;
    border-radius: 10px; border: 1px solid var(--contour);
    background: rgb(var(--basalt-rgb) / .85); color: var(--chalk); cursor: pointer;
    transition-property: border-color, background-color; transition-duration: .15s;
    touch-action: manipulation;
  }
  .nav-toggle:hover, .nav-toggle[aria-expanded="true"] { border-color: var(--sodium); }
  .nav-toggle svg { width: 20px; height: 20px; }
  .nav-toggle path {
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
    transform-origin: 12px 12px; transition: transform .22s cubic-bezier(.16, 1, .3, 1), opacity .15s;
  }
  /* Outer lines slide to the middle, then turn about the centre: an X. */
  .nav-toggle[aria-expanded="true"] path:nth-child(1) { transform: rotate(45deg) translateY(5px); }
  .nav-toggle[aria-expanded="true"] path:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] path:nth-child(3) { transform: rotate(-45deg) translateY(-5px); }

  .nav .shell:has(.nav-toggle) .links { display: none; }
  .nav.menu-open .shell .links {
    display: flex; flex-direction: column; gap: 2px;
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    padding: 8px 12px 14px; overflow: visible;
    background: var(--basalt); border-top: 0; border-bottom: 1px solid var(--contour);
    animation: menu-in .2s cubic-bezier(.16, 1, .3, 1);
  }
  .nav.menu-open .links a {
    min-height: 48px; padding: 0 12px; border-radius: 8px;
    color: var(--chalk); font-size: 1rem;
  }
  .nav.menu-open .links a:hover { background: var(--basalt-2); }
  .nav.menu-open .links a[aria-current="page"] { box-shadow: none; color: var(--sodium); }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .nav-toggle path { transition: none; }
  .nav.menu-open .shell .links, .nr-header.menu-open .row .links, .topbar.menu-open .row .links { animation: none; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--body); font-size: .95rem; font-weight: 600;
  padding: 11px 20px; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition-property: background-color, border-color, color, opacity, transform;
  transition-duration: .16s; transition-timing-function: ease-out;
  touch-action: manipulation;
}
.btn:hover { text-decoration: none; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn-primary { background: var(--sodium-fill); color: var(--on-sodium); }
.btn-primary:hover { background: #ffb35c; }
.btn-primary:disabled { opacity: .45; cursor: wait; }
.btn-ghost { background: transparent; color: var(--chalk); border-color: var(--contour); }
.btn-ghost:hover { border-color: var(--gravel); background: rgb(var(--tint-rgb) / .03); }
.btn-ghost:disabled, .btn-quiet:disabled { opacity: .5; cursor: not-allowed; }
.btn-quiet { background: transparent; color: var(--gravel); padding: 11px 4px; }
.btn-quiet:hover { color: var(--chalk); }
.btn-block { width: 100%; }
.btn-lg { padding: 14px 26px; font-size: 1.02rem; }
@media (prefers-reduced-motion: reduce) { .btn:active:not(:disabled) { transform: none; } }

/* ---------- loading ----------
   One ring for every wait:
   .spinner: an inline ring element, e.g. in a .loading-row.
   .is-loading: a status line whose text says it is loading; the ring goes
   in front of the text (library.js, index.html).
   .btn[aria-busy="true"]: a button whose request is running (site-ui.js
   s2sForm.busy(), builds.html); the ring goes in front of the label.
   Under reduced motion the ring stops turning but stays, so the wait still
   reads as a wait. */
.spinner, .is-loading::before, .btn[aria-busy="true"]::before {
  content: ""; display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -.15em;
  border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite;
}
.spinner, .is-loading::before { opacity: .8; }
.is-loading::before { margin-right: .6em; }
.btn[aria-busy="true"] { cursor: wait; }
.loading-row {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 28px 16px; color: var(--gravel); font-size: .92rem;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner, .is-loading::before, .btn[aria-busy="true"]::before {
    animation: none; border-right-color: currentColor; opacity: .45;
  }
}

/* ---------- scroll progress (site-ui.js, pages with data-scroll-progress) ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 41; height: 2px;
  background: var(--sodium-fill); transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* ---------- cards / surfaces ---------- */

.card {
  background: var(--basalt);
  border: 1px solid var(--contour);
  border-radius: var(--radius);
  padding: 24px;
}

.eyebrow {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sodium);
}
.section-label {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gravel);
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
}
.section-label::after {
  content: ""; flex: 1; height: 1px; background: var(--contour);
}

.dim { color: var(--gravel); }

/* Country as a small code badge ("US"). Stands in for flag emoji, which
   Windows draws as two bare letters. */
.cc {
  display: inline-block; font: 500 .64rem/1.5 var(--mono); letter-spacing: .06em;
  color: var(--gravel); border: 1px solid var(--contour); border-radius: 4px;
  padding: 0 4px; margin-right: 6px; vertical-align: 1px; text-decoration: none; cursor: default;
}

/* ---------- forms ---------- */

label.field {
  display: block; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gravel);
  margin-bottom: 7px;
}
input[type=text], input[type=email], input[type=password] {
  width: 100%; padding: 11px 13px; font-size: .98rem; font-family: var(--body);
  color: var(--chalk); background: var(--well);
  border: 1px solid var(--contour); border-radius: 8px;
  transition: border-color .15s ease;
}
input::placeholder { color: var(--faint); }
input:focus { border-color: var(--sodium); }
/* Text-like inputs show focus with the border; checkboxes, radios and
   sliders have none, so they keep the focus ring. */
input:focus:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color]) { outline: none; }
input.mono-input { font-family: var(--mono); font-size: .9rem; }
input, textarea { caret-color: var(--sodium); }

/* Form states (site-ui.js s2sForm.invalid): a field the server or the page
   rejected carries aria-invalid="true" and points at the message under it
   with aria-describedby. */
[aria-invalid="true"], [aria-invalid="true"]:focus { border-color: var(--taillight) !important; }
.field-msg { margin-top: 6px; font-size: .84rem; color: var(--taillight); }
.field-msg:empty { display: none; }

/* ---------- footer ---------- */

.foot {
  border-top: 1px solid var(--contour);
  margin-top: 96px; padding: 44px 0 56px;
  color: var(--gravel); font-size: .86rem;
}
.foot .shell { display: grid; gap: 30px; grid-template-columns: 1.4fr 1fr 1fr; }
.foot h4 {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--chalk); margin: 0 0 12px;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot ul a { color: var(--gravel); }
.foot ul a:hover { color: var(--chalk); }

/* Social accounts: a row of brand-icon buttons under the footer text. */
.social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.social a {
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: var(--radius); background: var(--basalt-2);
  border: 1px solid var(--contour); color: var(--chalk);
  transition: color .15s, border-color .15s, transform .15s;
}
.social a:hover { transform: translateY(-2px); border-color: currentColor; }
.social svg { width: 24px; height: 24px; fill: currentColor; }
.social .social-youtube:hover { color: #FF0033; }
.social .social-instagram:hover { color: #FF0069; }
.social .social-facebook:hover { color: #0866FF; }
.social .social-discord:hover { color: #5865F2; }
.legal {
  border-top: 1px solid var(--contour); margin-top: 36px; padding-top: 22px;
  font-size: .78rem; color: var(--muted); line-height: 1.7;  /* 5:1 on --asphalt (WCAG AA) */
}
[data-theme="light"] .legal { color: var(--gravel);
}

@media (max-width: 860px) {
  .foot .shell { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .foot .shell { grid-template-columns: 1fr; }
}

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  .shell { padding: 0 16px; }
  .nav .shell { column-gap: 14px; }
  .nav .links { flex-basis: calc(100% + 32px); margin: 0 -16px; padding: 0 6px; }
  .nav .links a { padding: 0 8px; }
  .nav .actions { gap: 8px; }
  .nav .actions .btn { padding: 9px 12px; font-size: .88rem; }
  .btn-lg { padding: 13px 20px; font-size: .98rem; }
  /* iOS zooms any focused input under 16px — keep them at 16 on phones. */
  input[type=text], input[type=email], input[type=password] { font-size: 16px; }
  /* The signed-in nav: email + counter + two buttons can't share 360px. */
  .auth-who { max-width: 96px !important; }
  .auth-avail { display: none !important; }
}
/* The narrowest phones: the translated sign-in buttons (Anmelden, Connexion)
   ran under the logo at 375px; tighter buttons fit every language. */
@media (max-width: 400px) {
  .nav .actions { gap: 5px; }
  .nav .actions .btn { padding: 8px 7px; font-size: .8rem; }
}
/* Under 350 even that doesn't fit beside the logo: the quiet link (Sign in,
   or Upgrade when signed in) goes; the sign-up page links to sign-in. */
@media (max-width: 350px) {
  [data-auth-nav] > a.btn-quiet { display: none; }
}
/* Below 480 the email would shorten to a few letters beside Upgrade and
   Sign out: drop it instead. */
@media (max-width: 480px) {
  .auth-who { display: none !important; }
}
@media (max-width: 440px) {
  .mark .word { display: none; }  /* the glyph alone is the mark on phones */
}

/* The language menu in the nav bar and the "view in your language?" banner
   (assets/i18n.js). */
.lang-pick { position: relative; margin-left: auto; flex: none; }
.lang-pick + .theme-toggle, .lang-pick + .actions, .lang-pick + .right,
.lang-pick + [data-notify-bell] { margin-left: 0 !important; }
.lang-pick > summary {
  list-style: none; cursor: pointer; font: 600 .74rem var(--mono); letter-spacing: .08em;
  color: var(--gravel); border: 1px solid var(--contour); border-radius: 8px; padding: 6px 9px;
  min-height: 32px; display: flex; align-items: center;
}
.lang-pick > summary::-webkit-details-marker { display: none; }
.lang-pick > summary::after { content: "▾"; margin-left: 5px; font-size: .7rem; }
.lang-pick[open] > summary, .lang-pick > summary:hover { color: var(--chalk); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 1300; min-width: 150px;
  background: var(--basalt); border: 1px solid var(--contour); border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5); padding: 6px; display: flex; flex-direction: column;
}
.lang-menu a { color: var(--chalk); padding: 8px 10px; border-radius: 7px; font-size: .9rem; text-decoration: none; }
.lang-menu a:hover { background: var(--basalt-2); text-decoration: none; }
.lang-menu a[aria-current] { color: var(--sodium); }
.lang-banner {
  position: fixed; left: 50%; top: calc(var(--nav-h, 68px) + 10px); transform: translateX(-50%); z-index: 1400;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100% - 32px); padding: 10px 12px 10px 16px; border-radius: 14px;
  background: var(--basalt); border: 1px solid var(--amber-line, var(--contour));
  box-shadow: 0 18px 50px rgba(0,0,0,.55); color: var(--chalk); font-size: .92rem;
}
.lang-banner .btn { padding: 7px 14px; min-height: 36px; }
.nav .links .lang-row, .nr-header .links .lang-row { display: none; }
@media (max-width: 860px) {
  .back .lang-pick { min-height: 58px; display: flex; align-items: center; }
  .nav .lang-pick, .nr-header .lang-pick { display: none; }
  .nr-header.menu-open .links .lang-row { display: flex; flex-wrap: wrap; gap: 2px 6px; padding-top: 8px;
    margin-top: 6px; border-top: 1px solid var(--contour); }
  .nr-header.menu-open .links .lang-row a { min-height: 40px; display: flex; align-items: center; padding: 0 10px; font-size: .9rem; }
  .nav .lang-pick + .theme-toggle { margin-left: auto !important; }
  .nav .lang-pick + .actions { margin-left: auto !important; }
  .nav.menu-open .links .lang-row { display: flex; flex-wrap: wrap; gap: 2px 6px; padding-top: 8px;
    margin-top: 6px; border-top: 1px solid var(--contour); }
  .nav.menu-open .links .lang-row a { min-height: 40px; display: flex; align-items: center; padding: 0 10px; font-size: .9rem; }
  .nav .links .lang-row a[aria-current] { color: var(--sodium); }
}
/* The language menu takes room the nav bar didn't have to spare: tighten it
   on laptop widths so the sign-in buttons keep their own (German "Anmelden"
   ran under the bell at 1366 px). */
@media (min-width: 861px) and (max-width: 1500px) {
  .nav .shell:has(.lang-pick) { gap: 12px; }
  .nav .shell:has(.lang-pick) .links { gap: 14px; }
  .nav .shell:has(.lang-pick) .actions { gap: 8px; }
  .lang-pick > summary { padding: 5px 7px; }
  .lang-pick > summary::after { display: none; }
  /* longer words than English for the same links */
  html:not([lang="en"]) .nav .links a { font-size: .9em; }
  html:not([lang="en"]) .nav .actions .btn { padding-left: 12px; padding-right: 12px; }
  /* the Gallery (an English page) gives way; it is in the phone menu and the footer */
  html:not([lang="en"]) .nav .links a[href="/gallery.html"] { display: none; }
}