/* Aerth site styles. Colours follow the app's own world: sky above, ground
   below, a horizon between them. Signal colours (stop / go / due) are used
   only where they carry their real meaning, never as decoration.
   Light and dark are both first-class. */

:root {
  color-scheme: light;

  /* World colours — day */
  --sky: #1E5BD6;
  --sky-tint: #EAF1FE;
  --ground: #1F9E3D;
  --ground-deep: #157A32;   /* darkened for AA text contrast on light bg */
  --ground-tint: #E9F7EE;
  --sand: #F0B400;

  /* Signal colours — used only for their real meaning (on track / leave soon / running late) */
  --signal-go: #0E8A97;
  --signal-due: #C8590C;
  --signal-stop: #C22014;

  --bg: #F5F7FB;             /* daylight haze */
  --surface: #FFFFFF;
  --surface-2: #EDEFF3;
  --ink: #23262B;            /* the grey axis, night side, softened for text */
  --ink-muted: #565B64;
  --border: #DADFE6;

  --primary: var(--sky);
  --primary-ink: #FFFFFF;
  --accent: var(--ground-deep);
  --focus: var(--sky);
  --radius: 10px;
  --max-width: 1080px;
  --shadow: 0 1px 2px rgba(35,38,43,0.06), 0 4px 16px rgba(35,38,43,0.06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sky: #6E9BEE;
    --sky-tint: #1E2A44;
    --ground: #4FCB7B;
    --ground-deep: #4FCB7B;
    --ground-tint: #1B2F22;
    --sand: #F0B400;

    --signal-go: #4FD9E3;
    --signal-due: #FFB067;
    --signal-stop: #FF6B57;

    --bg: #1B1D21;            /* the world at night */
    --surface: #24272C;
    --surface-2: #2C2F35;
    --ink: #E8ECF2;           /* the grey axis, day side, used as text on a night sky */
    --ink-muted: #AEB4BF;
    --border: #3A3E45;

    --primary: var(--sky);
    --primary-ink: #14203E;
    --accent: var(--ground);
    --focus: var(--sky);
    --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 4px 20px rgba(0,0,0,0.35);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --sky: #6E9BEE;
  --sky-tint: #1E2A44;
  --ground: #4FCB7B;
  --ground-deep: #4FCB7B;
  --ground-tint: #1B2F22;
  --sand: #F0B400;

  --signal-go: #4FD9E3;
  --signal-due: #FFB067;
  --signal-stop: #FF6B57;

  --bg: #1B1D21;
  --surface: #24272C;
  --surface-2: #2C2F35;
  --ink: #E8ECF2;
  --ink-muted: #AEB4BF;
  --border: #3A3E45;

  --primary: var(--sky);
  --primary-ink: #14203E;
  --accent: var(--ground);
  --focus: var(--sky);
  --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 4px 20px rgba(0,0,0,0.35);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  transition: background 0.15s ease, color 0.15s ease;
}

a { color: var(--primary); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* A thin horizon: sky meeting ground. Used sparingly, as a section divider. */
.horizon {
  height: 3px;
  background: linear-gradient(90deg, var(--sky), var(--ground));
  border: none;
  margin: 0;
}

/* Header / nav — the sky band at the top of the page */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--sky), var(--sky-tint)) 1;
}

.nav-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-block: 10px;   /* block only: the .wrap side gutter keeps the brand off the edge */
  gap: 10px;
}

.brand {
  margin-right: auto;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.brand sup { font-size: 0.55em; font-weight: 500; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  padding: 8px 12px;
  font-size: 0.95rem;
  cursor: pointer;
}

.nav-links {
  display: none;
  list-style: none;
  gap: 22px;
  margin: 0;
  padding: 0;
}
.nav-links a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.98rem;
}
.nav-links a[aria-current="page"] {
  color: var(--primary);
  font-weight: 600;
}
.nav-links a:hover { color: var(--primary); }

.nav-signin {
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px !important;
}

/* Phones: the open menu drops below the row as a full-width list */
.nav-panel { order: 3; flex-basis: 100%; }
.nav-panel.open .nav-links {
  display: flex;
  flex-direction: column;
  padding: 6px 0 12px;
  gap: 14px;
}

@media (min-width: 760px) {
  .nav-toggle { display: none; }
  .nav-panel .nav-links {
    display: flex !important;
    flex-direction: row;
    padding: 0;
    align-items: center;
  }
  .nav-panel {
    order: 1;
    flex-basis: auto;
    display: flex;
    align-items: center;
    gap: 24px;
  }
}

/* Hero — a hint of sky at the top of the page, settling into daylight */
.hero {
  padding: 32px 0 24px;
  background: linear-gradient(180deg, var(--sky-tint), var(--bg) 70%);
}
.eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin: 0 0 14px;
}
.hero h1 {
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.1;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}
.hero p.lede {
  font-size: 1.15rem;
  color: var(--ink-muted);
  max-width: 46ch;
  margin: 0 0 20px;
}
.hero p.lede:last-child { margin-bottom: 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta-row.secondary-row { margin-top: 14px; }

.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
  border: 1px solid transparent;
}
.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-text { color: var(--ink-muted); text-decoration: underline; font-size: 0.92rem; }
.btn:hover { filter: brightness(1.06); }

/* Sections */
section { padding: 40px 0; }
section.alt { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
section.ground {
  background: var(--ground-tint);
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--sky), var(--ground)) 1;
}
h2 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); letter-spacing: -0.01em; margin: 0 0 8px; }
.section-lede { color: var(--ink-muted); max-width: 60ch; margin: 0 0 28px; }

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 680px) {
  .grid.cols-2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.card .label {
  display: block;
  font: 700 11px ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.card h3 { margin: 0 0 8px; font-size: 1.1rem; }
.card p { margin: 0; color: var(--ink-muted); }
.card .tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 10px;
}

.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.list-plain li:last-child { border-bottom: none; }

/* A quiet legend for the signal colours — only shown where it explains a real state */
.signal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  font-size: 0.88rem;
  color: var(--ink-muted);
}
.signal-legend .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
}
.signal-legend .dot.go { background: var(--signal-go); }
.signal-legend .dot.due { background: var(--signal-due); }
.signal-legend .dot.stop { background: var(--signal-stop); }

/* Stardust — a calm, living-world signal, not a hype stat */
.stardust {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.95rem;
  color: var(--ink);
}
.stardust strong { font-weight: 700; }
.stardust .as-of { font-size: 0.78rem; color: var(--ink-muted); }

/* Forms */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.92rem; }
.field .optional { font-weight: 400; color: var(--ink-muted); font-size: 0.85rem; }
.field input, .field textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.field textarea { min-height: 120px; resize: vertical; }
.form-note { font-size: 0.85rem; color: var(--ink-muted); margin-top: 10px; }

.placeholder-box {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 20px;
  color: var(--ink-muted);
  background: var(--surface);
}

/* Footer — the ground at the bottom of the page */
.site-footer {
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--sky), var(--ground)) 1;
  background: var(--ground-tint);
  padding: 32px 0 40px;
  color: var(--ink-muted);
  font-size: 0.9rem;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.footer-links a { color: var(--ink-muted); text-decoration: none; }
.footer-links a:hover { color: var(--primary); }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--primary);
  color: var(--primary-ink);
  padding: 10px 16px;
  z-index: 100;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.callout {
  border-left: 4px solid var(--sky);
  background: var(--surface-2);
  padding: 16px 18px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 20px 0;
}

.callout.quiet {
  border-left-color: var(--border);
  font-style: italic;
  color: var(--ink-muted);
}

.brand-mark {
  width: 28px;
  height: 28px;
  vertical-align: middle;
  margin-right: 6px;
}

/* Quiet reveal-on-scroll, echoing the app's own site — off by default for
   anyone who has asked for less motion. */
/* Content is always fully opaque: only a small slide is animated, so
   screenshots and text are never shown faded. */
.reveal {
  transform: translateY(12px);
  transition: transform 0.5s ease;
}
.reveal.on { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; transform: none; }
}

.section-image {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: block;
}

/* Phone captures at roughly real device width. Desktop: several per row.
   Phones: one swipeable row with snap points. */
.phone-shot-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

.phone-shot {
  flex: 0 0 min(64vw, 240px);
  scroll-snap-align: start;
  margin: 0;
}

@media (min-width: 760px) {
  .phone-shot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 230px));
    justify-content: center;
    gap: 24px;
    overflow: visible;
  }
}

.phone-device {
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 2.2);
  box-shadow: var(--shadow);
}

.phone-device .section-image {
  border-radius: calc(var(--radius) * 1.6);
}

.phone-shot figcaption {
  display: grid;
  gap: 4px;
  padding: 12px 6px 0;
  color: var(--ink-muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.phone-shot figcaption strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.layer-space .phone-shot figcaption,
.layer-space .phone-shot figcaption strong {
  color: inherit;
}

/* The page reads top to bottom like looking at Aerth from above down to
   the ground you stand on: space (what's beyond anyone's control), sky
   (what's coming), the horizon (where you are now), ground (what you can
   do today). Gentle bands, not a label anywhere. */
.layer-space {
  background: linear-gradient(180deg, #14161c, #1f2a38 92%);
  color: #EDEFF3;
}
.layer-space h1, .layer-space h2, .layer-space h3 { color: #FFFFFF; }
.layer-space .eyebrow { color: #8FC7FF; }
.layer-space p.lede, .layer-space .section-lede { color: #B7C0CC; }
.layer-space .btn-secondary { color: #EDEFF3; border-color: rgba(237,239,243,0.35); }
.layer-space .btn-text { color: #AEB9C4; }
.layer-space .callout.quiet { color: #C3CBD4; border-left-color: rgba(237,239,243,0.3); background: rgba(237,239,243,0.06); }
.layer-space .stardust { background: rgba(237,239,243,0.08); border-color: rgba(237,239,243,0.2); color: #EDEFF3; }
.layer-space .stardust .as-of { color: #9AA5B1; }

.layer-sky {
  background: linear-gradient(180deg, var(--sky-tint), var(--bg) 88%);
}

.layer-horizon {
  position: relative;
  padding-top: 56px;
}
.layer-horizon:before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sky), var(--ground));
}

.layer-ground {
  background: var(--ground-tint);
}

/* ======================================================================
   Sky pages (index, features, watch): one screen in Aerth's own order.
   Space (the time) on top, the sky with the Sun's rail, the horizon, the
   ground holding the devices. Band colours are set live from the app's sky
   palette by js/sky.js; the values below are its day palette, used until
   the script runs.
   ====================================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.company-line { font-variant-numeric: tabular-nums; }

.world {
  --space-top: #000000;
  --skyline-tone: #5e9be8;
  --sky-bottom: #dcefff;
  --ground-top: #7fa56a;
  --ground-bottom: #4f7448;
  --world-h: max(100svh, 560px);
  --skyline-f: 0.13;
  --horizon-f: 0.58;
  --skyline: calc(var(--world-h) * var(--skyline-f));
  --horizon: calc(var(--world-h) * var(--horizon-f));
  --edge: 36px;              /* keeps content clear of the drawer lips */
  --foot-h: 50px;
  --caption-h: 32px;
  --shot-h: calc(var(--world-h) - var(--horizon) - 14px - var(--foot-h) - var(--caption-h));
  position: relative;
  height: var(--world-h);
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
  background: var(--space-top);
}
@media (min-width: 760px) {
  .world { --skyline-f: 0.14; --horizon-f: 0.55; --edge: 56px; --foot-h: 40px; }
}

.band { position: absolute; left: 0; right: 0; z-index: 0; }
.band-space {
  top: 0;
  height: var(--skyline);
  background: linear-gradient(180deg, var(--space-top) 0 18%, var(--skyline-tone));
}
.band-sky {
  top: var(--skyline);
  height: calc(var(--horizon) - var(--skyline));
  background: linear-gradient(180deg, var(--skyline-tone), var(--sky-bottom));
}
.band-ground {
  top: var(--horizon);
  bottom: 0;
  background: linear-gradient(180deg, var(--ground-top), var(--ground-bottom));
}

/* Felt: a small tile cut from the app's own felt art (fibre detail only,
   neutral grey), laid over the bands with soft-light, which darkens with the
   dark fibres and lightens with the light ones, like the app's felt pieces.
   One file is fetched: AVIF, else WebP, else PNG. */
.band-sky::after,
.band-ground::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/img/felt/felt.png");
  background-image: image-set(
    url("../assets/img/felt/felt.avif") type("image/avif"),
    url("../assets/img/felt/felt.webp") type("image/webp"),
    url("../assets/img/felt/felt.png") type("image/png"));
  background-size: 192px 192px;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.band-sky::after { opacity: 0.3; }
.band-ground::after { opacity: 0.65; }
/* Depth inside the ground, without a line across the horizon. */
.band-ground { box-shadow: inset 0 10px 14px -10px rgba(0,0,0,0.35); }

.world-bodies { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; }

/* The Sun (or Moon) is the time control: drag it along its rail. */
.sun-handle {
  position: absolute;
  left: 0; top: 0;
  z-index: 4;
  width: 60px; height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
}
.world[data-dragging] .sun-handle { cursor: grabbing; }
.sun-handle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Space: name, time, way in. Always on the dark of space. */
.space-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  height: var(--skyline);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: env(safe-area-inset-top, 0px) 16px 12px var(--edge);
  color: #fff;
}
.space-bar .brand { color: #fff; justify-self: start; font-size: 1.1rem; }
.space-time {
  display: grid;
  justify-items: center;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.space-date { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.space-clock { font-size: 1.35rem; font-weight: 600; letter-spacing: 0.01em; }
.space-now {
  margin-top: 2px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
}
.space-signin {
  justify-self: end;
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}
.space-bar a:focus-visible, .space-now:focus-visible { outline-color: #fff; }

/* Search line on the skyline. */
.faeri {
  position: absolute;
  z-index: 5;
  top: var(--skyline);
  left: var(--edge);
  width: min(280px, calc(100% - var(--edge) - 16px));
  margin: 0;
  transform: translateY(-50%);
}
.faeri-input {
  width: 100%;
  height: 36px;
  padding: 0 14px;
  font: inherit;
  font-size: 0.9rem;
  color: #fff;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -webkit-appearance: none;
  appearance: none;
}
.faeri-input::placeholder { color: rgba(255,255,255,0.75); }
.faeri-input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.faeri-status {
  position: absolute;
  top: 100%;
  left: 14px;
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--ink);
}
.faeri-status:empty { display: none; }
.site-weather {
  position: absolute;
  z-index: 4;
  top: calc(var(--skyline) + 26px);
  right: 16px;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(255,255,255,0.45);
}
.site-weather[hidden] { display: none; }

/* Sky: the one line of what Aerth is. Text takes the page ink, which the
   sky itself sets (dark ink on a bright sky, light ink on a dark one). */
.sky-hero {
  position: absolute;
  z-index: 2;
  top: calc(var(--skyline) + 34px);
  left: var(--edge);
  right: 16px;
  max-width: 36rem;
  padding: 0;
}
.sky-hero .eyebrow { color: inherit; opacity: 0.8; margin: 0 0 6px; font-size: 0.8rem; }
.sky-hero h1 {
  font-size: clamp(1.55rem, 5.6vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.sky-hero .btn { padding: 10px 16px; font-size: 0.92rem; }
.sky-hero .btn-primary { background: var(--ink); color: var(--bg); }
.sky-hero .btn-secondary { color: inherit; border-color: color-mix(in srgb, currentColor 40%, transparent); }

/* Ground: the devices standing on it. */
.ground-showcase {
  position: absolute;
  z-index: 2;
  top: calc(var(--horizon) + 14px);
  left: 0; right: 0;
  padding: 0;
}
.showcase-row {
  display: flex;
  justify-content: safe center;
  align-items: flex-end;
  gap: 14px;
  margin: 0;
  padding: 0 16px 0 var(--edge);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.showcase-row::-webkit-scrollbar { display: none; }
.showcase-item { flex: 0 0 auto; scroll-snap-align: center; }
.showcase-item figure { margin: 0; display: grid; justify-items: center; gap: 4px; }
.showcase-row .phone-device {
  height: var(--shot-h);
  width: calc(var(--shot-h) * 780 / 1688);
  padding: 3px;
  background: #0b0d11;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}
.showcase-row .phone-device img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 13px;
}
.showcase-row .watch-device {
  height: var(--shot-h);
  width: calc(var(--shot-h) * 0.62);
  display: grid;
  place-items: center;
}
.showcase-row .watch-device img {
  width: 100%; height: auto;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.showcase-item figcaption {
  height: var(--caption-h);
  max-width: calc(var(--shot-h) * 0.62);
  overflow: hidden;
  font-size: 0.72rem;
  line-height: 1.25;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
.showcase-item figcaption strong { font-weight: 600; }

.ground-foot {
  position: absolute;
  z-index: 2;
  left: 0; right: 0;
  bottom: 0;
  min-height: var(--foot-h);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 2px 14px;
  padding: 4px 16px calc(6px + env(safe-area-inset-bottom, 0px)) var(--edge);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.ground-foot p { margin: 0; }
.ground-links { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ground-links a { color: #fff; }

/* Drawers: the app's left-edge grammar. The lip rides the panel's outer
   edge; each lip sits in its own band. */
.edge-drawer { position: static; }
.edge-drawer-panel {
  position: absolute;
  left: 0;
  z-index: 10;
  width: min(88vw, 440px);
  display: flex;
  transform: translateX(calc(-100% * (1 - var(--drawer-progress, 0))));
  transition: transform 0.22s ease;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-left: 0;
  border-radius: 0 16px 16px 0;
  box-shadow: 4px 4px 22px rgba(0,0,0,0.18);
}
/* The open (or moving) drawer rides above the other lips. */
.edge-drawer[data-open="true"] .edge-drawer-panel,
.edge-drawer[data-dragging] .edge-drawer-panel { z-index: 12; }
.edge-drawer[data-open="true"] .edge-drawer-toggle,
.edge-drawer[data-dragging] .edge-drawer-toggle { z-index: 13; }
.edge-drawer[data-dragging] .edge-drawer-panel,
.edge-drawer[data-dragging] .edge-drawer-toggle { transition: none; }
.space-drawer .edge-drawer-panel { top: 8px; height: min(74%, 40rem); }
.sky-drawer .edge-drawer-panel { top: var(--skyline); height: calc(var(--horizon) - var(--skyline)); }
.horizon-drawer .edge-drawer-panel { top: calc(var(--horizon) - 30%); height: 60%; }
.ground-drawer .edge-drawer-panel { top: min(var(--horizon), 45%); bottom: 8px; }

/* Space holds what is outside the day; its drawer stays black. */
.space-drawer .edge-drawer-panel {
  color-scheme: dark;
  --surface: #000000;
  --surface-2: rgba(255,255,255,0.06);
  --ink: #E8ECF2;
  --ink-muted: #AEB4BF;
  --border: rgba(255,255,255,0.14);
  --primary: #8FB6F5;
  --accent: #7FD3A0;
  --sky: #8FB6F5;
  background: rgba(0,0,0,0.84);
}

.edge-drawer-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 22px 22px 18px;
  outline: none;
  font-size: 0.92rem;
  line-height: 1.5;
}
.edge-drawer-name {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.edge-drawer-content > section { padding: 0 0 18px; margin: 0 0 18px; border-bottom: 1px solid var(--border); background: none; }
.edge-drawer-content > section:last-child { border-bottom: 0; margin-bottom: 0; }
.edge-drawer-content .wrap { padding: 0; max-width: none; }
.edge-drawer-content h2 { font-size: 1.08rem; margin: 0 0 6px; }
.edge-drawer-content h3 { font-size: 0.95rem; margin: 0 0 2px; }
.edge-drawer-content .tag {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 4px;
}
.edge-drawer-content .section-lede { margin: 0 0 10px; font-size: 0.9rem; }
.edge-drawer-content .lede { margin: 0; font-size: 1rem; }
.edge-drawer-content .grid { grid-template-columns: 1fr !important; gap: 0; }
.edge-drawer-content .card {
  background: none; border: 0; box-shadow: none; border-radius: 0;
  padding: 8px 0;
}
.edge-drawer-content .card .tag { display: inline-block; background: none; padding: 0; margin: 0 0 2px; color: var(--accent); }
.edge-drawer-content .callout { margin: 8px 0; padding: 10px 12px; }
.edge-drawer-content .cta-row { margin-top: 8px; }
.edge-drawer-content .btn { padding: 8px 14px; font-size: 0.88rem; }
.edge-drawer-content .list-plain li { padding: 6px 0; }
.edge-drawer-content .signal-legend { margin-top: 8px; font-size: 0.8rem; gap: 10px; }
.edge-drawer-content .is-found { outline: 2px solid var(--primary); outline-offset: 6px; border-radius: 4px; }

.edge-drawer-toggle {
  position: absolute;
  left: 0;
  z-index: 11;
  display: flex;
  align-items: stretch;
  gap: 5px;
  min-height: 64px;
  padding: 0 6px 0 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: grab;
  touch-action: none;
  transform: translate(calc(var(--drawer-progress, 0) * var(--drawer-edge-width, 0px)), -50%);
  transition: transform 0.22s ease;
}
.edge-drawer-lip {
  width: 7px;
  border-radius: 0 999px 999px 0;
  background: color-mix(in srgb, currentColor 45%, transparent);
  box-shadow: 0 2px 7px rgba(0,0,0,0.12);
}
.edge-drawer-tab {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  align-self: center;
  padding: 8px 0;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.edge-drawer-toggle:hover .edge-drawer-lip,
.edge-drawer[data-open="true"] .edge-drawer-lip { background: color-mix(in srgb, currentColor 70%, transparent); }
.edge-drawer-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 0 8px 8px 0; }
.space-drawer .edge-drawer-toggle { color: #fff; top: calc(var(--skyline) / 2); }
.sky-drawer .edge-drawer-toggle { top: calc((var(--skyline) + var(--horizon)) / 2 + 20px); }
.horizon-drawer .edge-drawer-toggle { top: var(--horizon); }
.ground-drawer .edge-drawer-toggle { top: calc(var(--horizon) + (var(--world-h) - var(--horizon)) * 0.4); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .edge-drawer-panel, .edge-drawer-toggle { transition: none; }
}