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

:root {
  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;

  --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;

  --shell: 1120px;
  --radius: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

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, #191c22 58px 59px),
    repeating-radial-gradient(circle at 6% 78%, transparent 0 74px, #15181d 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: #0A0B0E; border: 1px solid var(--contour);
  border-radius: 5px; padding: 1px 6px;
}

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
.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: rgba(14, 15, 18, .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 stops growing at 1120px, so on a page with four links (the builder,
   Your builds) the free-tier counter never fits 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); pages set
   sticky tops and scroll margins from that. 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 rgba(42, 46, 54, .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; }
}

/* ---------- 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; transition: .16s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--sodium); color: #191006; }
.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: rgba(255,255,255,.03); }
.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; }

/* ---------- 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: #0A0B0E;
  border: 1px solid var(--contour); border-radius: 8px;
  transition: border-color .15s ease;
}
input::placeholder { color: #5b6270; }
input:focus { outline: none; border-color: var(--sodium); }
input.mono-input { font-family: var(--mono); font-size: .9rem; }

/* ---------- 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: #5c6270; line-height: 1.7;
}

@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; }
}
/* 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 */
}