/* What's My Tide? — design system.

   Night ocean by default, because this gets used at dawn, at dusk and on a
   dock; a warm chart-paper theme for bright days. The moon pulls the tide,
   so the two signature colours are moon gold and sea-glass aqua, with a mint
   "go" green for the one thing to press. Every colour comes from a token. */

:root {
  --bg: #050F16;
  --bg-2: #081923;
  --surface: #0B1E29;
  --surface-2: #102735;
  --surface-3: #15303F;
  --glass: rgba(7, 21, 30, .95);
  --ink: #EAF5F7;
  --ink-2: #B4CAD3;
  --muted: #7B95A1;
  --line: #1B3747;
  --line-soft: #132B38;

  --accent: #4FE0C9;
  --accent-deep: #11A08C;
  --accent-ink: #8DEFDF;
  --accent-soft: rgba(79, 224, 201, .12);

  --go: #3CE2A6;
  --go-ink: #02261C;
  --go-soft: rgba(60, 226, 166, .14);

  --moon: #F6D58E;
  --moon-ink: #F8E2AE;
  --moon-soft: rgba(246, 213, 142, .13);

  --ok: #5FE3A1;
  --ok-soft: rgba(95, 227, 161, .12);
  --warn: #FFC56B;
  --warn-soft: rgba(255, 197, 107, .13);
  --bad: #FF7D6E;
  --bad-soft: rgba(255, 125, 110, .13);

  /* hub colours */
  --hub-sensory: #B9A2FF;
  --hub-narrative: #F6D58E;
  --hub-ecology: #67E4A6;
  --hub-speculative: #FF9EC1;
  --hub-practical: #78C8FF;
  --hub-tools: #4FE0C9;
  --hub-plan: #3CE2A6;

  /* names the feature screens already use */
  --ground: var(--bg);
  --ground-2: var(--bg-2);
  --sand: var(--moon);
  --sand-ink: var(--moon-ink);
  --sand-soft: var(--moon-soft);

  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-ui: "Geist", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius: 22px;
  --radius-sm: 14px;
  --radius-xs: 9px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .035) inset, 0 12px 32px -18px rgba(0, 0, 0, .7);
  --shadow-lift: 0 18px 40px -20px rgba(0, 0, 0, .8);
  --maxw: 760px;
  --tabbar-h: 62px;
  --night-shade: rgba(0, 6, 12, .34);
  --statusbar: transparent;
  --bg-glow: radial-gradient(130% 55% at 50% -12%, rgba(79, 224, 201, .09), transparent 62%),
             radial-gradient(90% 50% at 100% 0%, rgba(246, 213, 142, .05), transparent 60%);

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F4F1EA;
    --bg-2: #ECE7DC;
    --surface: #FFFEFB;
    --surface-2: #F7F3EC;
    --surface-3: #EFE9DE;
    --glass: rgba(250, 248, 243, .95);
    --ink: #0A2230;
    --ink-2: #34505E;
    --muted: #6A7F89;
    --line: #DED6C7;
    --line-soft: #EAE4D8;

    --accent: #0C9690;
    --accent-deep: #0B7F7B;
    --accent-ink: #0A6467;
    --accent-soft: rgba(12, 150, 144, .1);

    --go: #0A7F5D;
    --go-ink: #FFFFFF;
    --go-soft: rgba(10, 127, 93, .1);

    --moon: #C98A1B;
    --moon-ink: #8A5D0E;
    --moon-soft: rgba(201, 138, 27, .12);

    --ok: #12804F;
    --ok-soft: rgba(18, 128, 79, .1);
    --warn: #A36400;
    --warn-soft: rgba(163, 100, 0, .1);
    --bad: #C2412F;
    --bad-soft: rgba(194, 65, 47, .09);

    --hub-sensory: #6B4FD8;
    --hub-narrative: #A86E0A;
    --hub-ecology: #148A55;
    --hub-speculative: #C2386F;
    --hub-practical: #1C6FB8;
    --hub-tools: #0B8C88;
    --hub-plan: #0A7F5D;

    --shadow: 0 1px 2px rgba(10, 34, 48, .05), 0 10px 26px -18px rgba(10, 34, 48, .35);
    --night-shade: rgba(10, 34, 48, .09);
    --statusbar: #0A2230;
    --shadow-lift: 0 16px 36px -18px rgba(10, 34, 48, .45);
    --bg-glow: radial-gradient(130% 55% at 50% -12%, rgba(12, 150, 144, .08), transparent 62%),
               radial-gradient(90% 50% at 100% 0%, rgba(201, 138, 27, .06), transparent 60%);
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg: #F4F1EA;
  --bg-2: #ECE7DC;
  --surface: #FFFEFB;
  --surface-2: #F7F3EC;
  --surface-3: #EFE9DE;
  --glass: rgba(250, 248, 243, .95);
  --ink: #0A2230;
  --ink-2: #34505E;
  --muted: #6A7F89;
  --line: #DED6C7;
  --line-soft: #EAE4D8;

  --accent: #0C9690;
  --accent-deep: #0B7F7B;
  --accent-ink: #0A6467;
  --accent-soft: rgba(12, 150, 144, .1);

  --go: #0A7F5D;
  --go-ink: #FFFFFF;
  --go-soft: rgba(10, 127, 93, .1);

  --moon: #C98A1B;
  --moon-ink: #8A5D0E;
  --moon-soft: rgba(201, 138, 27, .12);

  --ok: #12804F;
  --ok-soft: rgba(18, 128, 79, .1);
  --warn: #A36400;
  --warn-soft: rgba(163, 100, 0, .1);
  --bad: #C2412F;
  --bad-soft: rgba(194, 65, 47, .09);

  --hub-sensory: #6B4FD8;
  --hub-narrative: #A86E0A;
  --hub-ecology: #148A55;
  --hub-speculative: #C2386F;
  --hub-practical: #1C6FB8;
  --hub-tools: #0B8C88;
  --hub-plan: #0A7F5D;

  --shadow: 0 1px 2px rgba(10, 34, 48, .05), 0 10px 26px -18px rgba(10, 34, 48, .35);
  --night-shade: rgba(10, 34, 48, .09);
  --statusbar: #0A2230;
  --shadow-lift: 0 16px 36px -18px rgba(10, 34, 48, .45);
  --bg-glow: radial-gradient(130% 55% at 50% -12%, rgba(12, 150, 144, .08), transparent 62%),
             radial-gradient(90% 50% at 100% 0%, rgba(201, 138, 27, .06), transparent 60%);
  color-scheme: light;
}

/* ------------------------------------------------------------------ base */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-glow), var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
}

h1, h2, h3 { line-height: 1.15; text-wrap: balance; margin: 0; font-weight: 600; letter-spacing: -.01em; }

p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-ink); text-underline-offset: 2px; }

.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.quiet { color: var(--ink-2); font-size: 14px; margin: 6px 0 0; }
.small { font-size: 13px; }
.plain { color: var(--ink-2); margin: 6px 0; }
.serif { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

::selection { background: var(--accent-soft); }

/* --------------------------------------------------------------- layout */

.main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
  padding-block: 14px calc(var(--tabbar-h) + 40px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.no-tabs .main { padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); }

.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; }
.row.gap { gap: 10px; }
.row.gap-sm { gap: 6px; }
.row.wrap { flex-wrap: wrap; }

/* --------------------------------------------------------------- header */

.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  /* viewport-fit=cover + a translucent status bar put the page under the
     notch, so the header pads itself clear of it */
  padding: calc(10px + env(safe-area-inset-top, 0px))
           calc(16px + env(safe-area-inset-right, 0px))
           10px
           calc(16px + env(safe-area-inset-left, 0px));
  /* the home-screen app draws a white status bar over the page (black-
     translucent), so light themes put a dark plate under it */
  background:
    linear-gradient(var(--statusbar), var(--statusbar)) top / 100% env(safe-area-inset-top, 0px) no-repeat,
    var(--glass);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--line-soft);
}

.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); min-width: 0; }
.brand-glyph { display: block; flex: none; }
.brand-name {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.005em;
  white-space: nowrap;
}
.brand-name em, .onboard-title em, .wordmark em { font-style: italic; color: var(--accent-ink); }

.header-mid { min-width: 0; }
.header-title {
  display: block;
  font-family: var(--font-display);
  font-size: 23px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-actions { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  padding: 0;
  transition: color .15s, border-color .15s, transform .15s;
}
.icon-btn:hover { color: var(--ink); border-color: var(--accent); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 19px; height: 19px; }

/* the green Use my location button, top right of home */
.btn.btn-locate {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  min-height: 40px;
  padding: 0 14px 0 12px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 13px;
}
.btn-locate svg { width: 15px; height: 15px; flex: none; }
.btn-locate.is-busy svg { animation: spin 1s linear infinite; }

/* phones: the name stays beside the mark, so the location button slims down */
@media (max-width: 480px) {
  .app-header { gap: 8px; }
  .brand { gap: 7px; }
  .brand-glyph { width: 26px; height: 26px; }
  .brand-name { font-size: 18px; }
  .btn.btn-locate { padding: 0 11px; font-size: 13px; gap: 6px; }
  .btn-locate svg { display: none; }
}
@media (max-width: 374px) {
  .brand-name { font-size: 16px; }
  .btn.btn-locate { padding: 0 9px; font-size: 12.5px; }
  .icon-btn { width: 36px; }
}


/* --------------------------------------------------------------- tab bar */

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 6px max(10px, env(safe-area-inset-left, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-right, 0px));
  background: var(--glass);
  -webkit-backdrop-filter: saturate(170%) blur(20px);
  backdrop-filter: saturate(170%) blur(20px);
  border-top: 1px solid var(--line-soft);
}
.tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 50px;
  color: var(--muted);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .01em;
  border-radius: 14px;
  transition: color .15s;
}
.tab svg { width: 23px; height: 23px; }
.tab:hover { color: var(--ink-2); }
.tab.on { color: var(--accent-ink); }
.tab.on::before {
  content: "";
  position: absolute;
  top: -7px;
  width: 26px; height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.tab-plan.on { color: var(--go); }
.tab-plan.on::before { background: var(--go); box-shadow: 0 0 12px var(--go); }

/* ---------------------------------------------------------- location bar */

.locbar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: border-color .15s;
}
.locbar:hover { border-color: var(--accent); }
.loc-dot {
  position: relative;
  flex: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--muted);
}
.loc-dot.following { background: var(--go); }
.loc-dot.following::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--go);
  opacity: 0;
  animation: ping 2.4s ease-out infinite;
}
.loc-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.loc-name { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-meta { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-meta .on { color: var(--go); font-weight: 600; }
.loc-change { flex: none; display: flex; align-items: center; gap: 3px; color: var(--accent-ink); font-size: 13px; font-weight: 500; }
.loc-change svg { width: 14px; height: 14px; }

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

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}

.card-head { margin-bottom: 14px; }
.card-title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.card-sub { color: var(--muted); font-size: 13.5px; margin: 3px 0 0; }
.sub-title { font-size: 12px; font-weight: 600; color: var(--muted); margin: 4px 0 10px; text-transform: uppercase; letter-spacing: .08em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
}

.page-intro { padding: 6px 2px 0; }
.page-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 9vw, 44px); line-height: 1.02; letter-spacing: -.01em; }
.page-title em { font-style: italic; color: var(--accent-ink); }
.page-sub { color: var(--ink-2); font-size: 15px; margin: 8px 0 0; max-width: 56ch; }

/* ------------------------------------------------------------ living water */

.hero {
  position: relative;
  height: clamp(330px, 92vw, 420px);
  border-radius: calc(var(--radius) + 4px);
  overflow: hidden;
  background: #04121B;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
  isolation: isolate;
  color: #F4FBFC;
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 64px 18px 20px;
  pointer-events: none;
  z-index: 1;
}
.hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 62%;
  background: radial-gradient(120% 100% at 0% 0%, rgba(2, 10, 16, .42), transparent 70%);
  z-index: -1;
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 8px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244, 251, 252, .78);
}
.hero-reading { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.hero-value {
  font-family: var(--font-display);
  font-size: clamp(84px, 27vw, 116px);
  line-height: .9;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.hero-unit { font-family: var(--font-display); font-style: italic; font-size: 30px; color: rgba(244, 251, 252, .8); }
.hero-trend {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 500;
  color: rgba(244, 251, 252, .92);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}
.trend-arrow {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.trend-arrow svg { width: 14px; height: 14px; }
.hero-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.hero-next {
  margin: 0;
  font-size: 14.5px;
  color: rgba(244, 251, 252, .88);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.hero-next strong { color: #FFFFFF; font-weight: 600; }
.hero-chip {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: rgba(3, 14, 22, .45);
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 12.5px;
  color: rgba(244, 251, 252, .92);
}
.hero-chip .mono { font-size: 12px; }
.live-dot {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #5FE3A1;
  box-shadow: 0 0 10px #5FE3A1;
  flex: none;
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid #5FE3A1;
  opacity: 0;
  animation: ping 2.2s ease-out infinite;
}
.hero-offline { color: #FFC56B; }

/* ---------------------------------------------------------------- curve */

.curve { display: block; width: 100%; height: 220px; touch-action: pan-y; }
.curve-card { padding: 14px 10px 10px; }
.curve-card .card-head { padding: 2px 8px 0; margin-bottom: 4px; }
.scrub-readout {
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
  margin: 6px 0 2px;
  color: var(--ink-2);
  min-height: 18px;
}

/* ---------------------------------------------------------------- turns */

.turns { display: flex; flex-direction: column; }
.turn {
  display: grid;
  grid-template-columns: 54px minmax(78px, auto) 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
}
.turn:first-child { padding-top: 2px; }
.turn:last-child { border-bottom: none; padding-bottom: 2px; }
.turn-kind {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  padding: 4px 0; border-radius: 7px; text-align: center;
}
.turn-kind.high { background: var(--accent-soft); color: var(--accent-ink); }
.turn-kind.low { background: var(--moon-soft); color: var(--moon-ink); }
.turn-time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.turn-h { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.turn-rel { font-size: 12.5px; text-align: right; }

/* conditions grid */
.glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(98px, 1fr));
  gap: 10px;
}
.glance-item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 13px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.glance-k { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.glance-v { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.glance-s { font-size: 12px; color: var(--muted); }

/* --------------------------------------------------------- Go Window teaser */

.go-teaser {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  border-color: color-mix(in srgb, var(--go) 35%, var(--line));
  background:
    radial-gradient(120% 120% at 100% 0%, var(--go-soft), transparent 60%),
    var(--surface);
  transition: transform .15s, border-color .15s;
}
.go-teaser:hover { border-color: var(--go); }
.go-teaser:active { transform: scale(.99); }
.go-teaser-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.go-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--go);
}
.go-badge svg { width: 14px; height: 14px; }
.go-activity { font-size: 13px; color: var(--ink-2); }
.go-teaser-body { display: flex; align-items: center; gap: 16px; }
.go-teaser-text { flex: 1; min-width: 0; }
.go-when { margin: 0; font-size: 13px; color: var(--muted); }
.go-time { margin: 2px 0 4px; font-family: var(--font-display); font-size: 30px; line-height: 1.05; }
.go-why { margin: 0; font-size: 13px; color: var(--ink-2); }
.go-teaser .heat { margin-top: 14px; }
.go-empty { margin: 0; color: var(--ink-2); font-size: 14px; }

/* score ring */
.ring { position: relative; flex: none; display: grid; place-items: center; }
.ring svg { display: block; transform: rotate(-90deg); }
.ring-track { stroke: var(--line); }
.ring-fill { stroke: var(--go); transition: stroke-dashoffset .6s cubic-bezier(.2, .8, .2, 1); }
.ring-value { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 26px; line-height: 1; }
.ring-sm .ring-value { font-size: 19px; }
.ring.mid .ring-fill { stroke: var(--moon); }
.ring.low .ring-fill { stroke: var(--muted); }

/* ---------------------------------------------------------- explore & hubs */

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s;
}
.chip:hover { border-color: var(--hub, var(--accent)); }
.chip-title { font-weight: 600; font-size: 14px; }
.chip-tag { font-size: 11px; color: var(--muted); }

[data-hub="sensory"] { --hub: var(--hub-sensory); }
[data-hub="narrative"] { --hub: var(--hub-narrative); }
[data-hub="ecology"] { --hub: var(--hub-ecology); }
[data-hub="speculative"] { --hub: var(--hub-speculative); }
[data-hub="practical"] { --hub: var(--hub-practical); }
[data-hub="tools"] { --hub: var(--hub-tools); }
[data-hub="plan"] { --hub: var(--hub-plan); }

.hub-block { display: flex; flex-direction: column; gap: 12px; }
.hub-head { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink); }
.hub-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1; }
.hub-tag {
  font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--hub, var(--muted));
}
.hub-arrow { margin-left: auto; color: var(--accent-ink); display: flex; align-items: center; gap: 3px; font-size: 14px; font-weight: 500; text-decoration: none; }
.hub-arrow svg { width: 16px; height: 16px; }
.hub-head .hub-arrow { color: var(--muted); }
.hub-blurb-sm { margin: -6px 0 0; color: var(--muted); font-size: 13.5px; }

.hub-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.hub-tile {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 2px;
  min-height: 104px;
  padding: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--hub) 22%, transparent), transparent 70%),
    var(--surface);
  text-decoration: none;
  color: var(--ink);
  transition: transform .15s, border-color .15s;
}
.hub-tile:hover { border-color: var(--hub); transform: translateY(-1px); }
.hub-tile-title { font-family: var(--font-display); font-size: 24px; line-height: 1; margin-top: auto; }
.hub-tile-tag { font-size: 12px; color: var(--muted); }
.hub-tile-count {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--font-mono); font-size: 11px; color: var(--hub);
}

.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 10px; }
.tool-grid.wide { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.tool {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s, transform .15s, background .15s;
}
.tool:hover { border-color: var(--hub, var(--accent)); transform: translateY(-1px); }
.tool:active { transform: scale(.98); }
.tool-icon {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  margin-bottom: 6px;
  border-radius: 12px;
  color: var(--hub, var(--accent));
  background: color-mix(in srgb, var(--hub, var(--accent)) 14%, transparent);
}
.tool-icon svg { width: 20px; height: 20px; }
.tool-title { font-weight: 600; font-size: 14.5px; line-height: 1.25; }
.tool-blurb { font-size: 12.5px; color: var(--muted); line-height: 1.38; }

/* -------------------------------------------------------------- feature */

.feature-head { display: flex; gap: 14px; align-items: flex-start; padding: 6px 2px 2px; }
.feature-icon {
  flex: none;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 16px;
  color: var(--hub, var(--accent));
  background: color-mix(in srgb, var(--hub, var(--accent)) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--hub, var(--accent)) 30%, transparent);
}
.feature-icon svg { width: 26px; height: 26px; }
.feature-hub {
  font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--hub, var(--muted)); text-decoration: none;
}
.feature-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 8.5vw, 40px); line-height: 1.02; margin-top: 3px; }
.feature-blurb { color: var(--ink-2); font-size: 15px; margin: 6px 0 0; }
.hub-intro { padding: 6px 2px 0; }
.hub-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 10vw, 46px); line-height: 1; }
.hub-blurb { color: var(--ink-2); margin: 8px 0 0; font-size: 15px; }

/* --------------------------------------------------------------- inputs */

.input {
  width: 100%;
  padding: 11px 13px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder { color: var(--muted); }
select.input {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
textarea.input { resize: vertical; }
.search-input {
  padding-left: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B95A1' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 13px 50%;
  background-size: 18px 18px;
}

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.field + .field { margin-top: 12px; }
.form-grid .field + .field { margin-top: 0; }
.field-label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 500; }
.field-hint { font-size: 12.5px; color: var(--muted); margin: 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color .15s, background .15s, transform .12s, filter .15s;
}
.btn:hover { border-color: var(--accent); }
.btn:active { transform: scale(.97); }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-primary { background: var(--accent-deep); border-color: transparent; color: #fff; }
.btn-primary:hover { filter: brightness(1.08); border-color: transparent; }
.btn-go {
  background: var(--go);
  border-color: transparent;
  color: var(--go-ink);
  font-weight: 600;
  box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--go) 70%, transparent);
}
.btn-go:hover { filter: brightness(1.06); border-color: transparent; }
.btn-xl { min-height: 54px; padding: 0 24px; font-size: 16.5px; border-radius: 16px; }
.btn-ghost { background: none; border-color: transparent; color: var(--muted); padding: 6px 10px; font-size: 13px; min-height: 0; }
.btn-ghost:hover { color: var(--bad); border-color: var(--line); }
.btn-active { background: var(--moon); border-color: var(--moon); color: #1B1408; }
.btn-block { width: 100%; }

.switch { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.switch input { width: 18px; height: 18px; accent-color: var(--accent-deep); }
.range { width: 100%; accent-color: var(--accent); }

/* ---------------------------------------------------------------- lists */

.list { display: flex; flex-direction: column; }
.list-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14.5px;
}
.list-row:last-child { border-bottom: none; }
.list-row strong { font-weight: 600; }

.search-results { display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; margin-top: 6px; }
.search-results:empty { display: none; }
.search-results.big { max-height: 56vh; }
.search-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 10px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  text-align: left;
  cursor: pointer;
}
.search-item:last-child { border-bottom: none; }
.search-item:hover { background: var(--surface-2); }

/* --------------------------------------------------------------- badges */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-left: 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .02em;
  white-space: nowrap;
  vertical-align: middle;
}
.badge.ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.badge.warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.badge.bad { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.badge.go { background: var(--go-soft); color: var(--go); border-color: color-mix(in srgb, var(--go) 45%, transparent); }

/* ----------------------------------------------------------- stats/table */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; margin: 12px 0 0; }
.stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}
.stat-k { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.stat-v { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }

.stat-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14.5px;
}
.stat-row:last-child { border-bottom: none; }
.stat-label { color: var(--ink-2); }
.stat-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }
.stat-value.ok { color: var(--ok); }
.stat-value.warn { color: var(--warn); }
.stat-value.bad { color: var(--bad); }

.table-wrap { overflow-x: auto; margin: 10px 0 0; border: 1px solid var(--line-soft); border-radius: 12px; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 360px; }
table.data th {
  text-align: left; padding: 9px 10px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.data td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }
table.data td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data td.num.bad { color: var(--bad); }
table.data tr.row-active td { background: var(--accent-soft); }

/* --------------------------------------------------------------- notices */

.notice {
  margin: 12px 0 0;
  padding: 11px 13px;
  background: var(--moon-soft);
  border: 1px solid color-mix(in srgb, var(--moon) 25%, transparent);
  border-radius: 12px;
  color: var(--ink-2);
  font-size: 13.5px;
}

.source-note {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.conf {
  flex: none;
  padding: 2px 7px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: var(--surface-2);
  color: var(--muted);
}
.conf-live { background: var(--ok-soft); color: var(--ok); }
.conf-source { background: var(--accent-soft); color: var(--accent-ink); }
.conf-derived { background: var(--accent-soft); color: var(--accent-ink); }
.conf-forecast { background: var(--moon-soft); color: var(--moon-ink); }
.conf-estimate { background: var(--warn-soft); color: var(--warn); }
.conf-illustrative { background: var(--bad-soft); color: var(--bad); }
.conf-private { background: var(--surface-2); color: var(--muted); }

.alert { padding: 12px 14px; border-radius: 12px; margin-bottom: 12px; font-size: 14px; }
.alert p { margin: 3px 0 0; font-size: 13.5px; color: var(--ink-2); }
.alert-ok { background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok); }
.alert-warn { background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); color: var(--warn); }
.alert-bad { background: var(--bad-soft); border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent); color: var(--bad); }

.empty { padding: 22px 0; text-align: center; color: var(--muted); }
.empty p { margin: 0; }
.empty-hint { font-size: 13px; margin-top: 5px !important; }

.fatal { padding: 40px 16px; text-align: center; }
.fatal h2 { font-family: var(--font-display); font-weight: 400; font-size: 28px; margin-bottom: 8px; }

.splash {
  min-height: 80vh;
  display: grid; place-content: center; justify-items: center; gap: 16px;
  padding: 80px 16px;
  color: var(--muted);
  font-size: 14px;
}
.splash-mark { animation: breathe 2.6s ease-in-out infinite; }

/* ---------------------------------------------------------------- toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 16px);
  padding: 11px 18px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 14px 36px -12px rgba(0, 0, 0, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .25s cubic-bezier(.2, .8, .2, 1);
  z-index: 60;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.no-tabs .toast, body:not(:has(.tabbar)) .toast { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.warn { border-color: var(--warn); color: var(--warn); }
.toast.ok { border-color: var(--ok); color: var(--ok); }

/* ========================================================== feature screens */

/* --------------------------------------------------------------- sensory */

.pulse-stage { display: grid; place-items: center; padding: 22px 0 12px; }
.pulse-ring {
  width: 150px; height: 150px;
  border-radius: 50%;
  border: 2px solid var(--hub-sensory);
  display: grid; place-items: center;
  background: radial-gradient(circle, color-mix(in srgb, var(--hub-sensory) 22%, transparent), transparent 70%);
}
.pulse-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--hub-sensory); box-shadow: 0 0 22px var(--hub-sensory); }
@keyframes beat {
  0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--hub-sensory) 45%, transparent); }
  60% { transform: scale(1.12); box-shadow: 0 0 0 30px transparent; }
  100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}
.pulse-ring.beat { animation: beat var(--beat-ms, 600ms) ease-out; }
.pulse-readout { text-align: center; font-size: 13.5px; color: var(--ink-2); font-family: var(--font-mono); }

.breath-stage { display: grid; place-items: center; padding: 28px 0; min-height: 230px; }
.breath-orb {
  width: 180px; height: 180px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 255, 255, .55), transparent 40%),
    radial-gradient(circle at 50% 50%, var(--accent), var(--accent-deep) 72%);
  box-shadow: 0 0 60px -10px var(--accent);
  transform: scale(.55);
  transition: transform .1s linear;
  opacity: .92;
}
.breath-phase { text-align: center; font-size: 30px; font-family: var(--font-display); margin: 0; }
.breath-count { text-align: center; color: var(--muted); font-size: 13px; margin: 2px 0 12px; }

.organism-canvas { display: block; width: 100%; height: 300px; border-radius: var(--radius-sm); }

/* --------------------------------------------------------------- ecology */

.gauge-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.gauge {
  display: flex; flex-direction: column; gap: 5px;
  padding: 13px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
}
.gauge-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.gauge-band { font-size: 24px; font-family: var(--font-display); line-height: 1.05; }
.gauge-band.ok { color: var(--ok); }
.gauge-band.warn { color: var(--warn); }
.gauge-band.bad { color: var(--bad); }
.gauge-track { height: 6px; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.gauge-fill { height: 100%; border-radius: 4px; background: var(--accent); }
.gauge-fill.ok { background: var(--ok); }
.gauge-fill.warn { background: var(--warn); }
.gauge-fill.bad { background: var(--bad); }

.creature { display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.creature:last-child { border-bottom: none; }
.creature-emoji {
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--hub-ecology) 13%, transparent);
  font-size: 23px; line-height: 1;
}
.creature-body { min-width: 0; flex: 1; }
.creature-head { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.creature-window { margin: 5px 0 0; font-size: 13px; }
.creature-window .mono { color: var(--accent-ink); }

.meter { height: 6px; background: var(--line-soft); border-radius: 4px; overflow: hidden; min-width: 54px; }
.meter-fill { height: 100%; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); border-radius: 4px; }

.oracle-line { font-family: var(--font-display); font-size: 22px; line-height: 1.35; color: var(--ink); }

/* ----------------------------------------------------------- speculative */

.twin { padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.twin:last-child { border-bottom: none; }
.twin-head { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-bottom: 3px; }
.twin .meter { margin-top: 8px; }

.legend-line { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.swatch { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; }
.swatch-teal { background: var(--accent); }
.swatch-ghost { background: repeating-linear-gradient(90deg, var(--bad) 0 5px, transparent 5px 9px); }

.music-bar { height: 5px; background: var(--line-soft); border-radius: 3px; overflow: hidden; margin: 12px 0 8px; }
.music-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--hub-speculative), var(--accent)); transition: width .25s linear; }
.music-now { text-align: center; font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); margin: 0 0 12px; min-height: 19px; }
.score-row { border-bottom: 1px solid var(--line-soft); }

/* ------------------------------------------------------------- practical */

.route { padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.route:last-child { border-bottom: none; }
.route-head { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; margin-bottom: 8px; }
.windows { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.window {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--ok-soft);
  color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.window-dark { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.window-tag { font-size: 10px; opacity: .75; text-transform: uppercase; letter-spacing: .06em; }

.timeline-wrap { margin-top: 4px; }
.timeline { position: relative; height: 10px; background: var(--line-soft); border-radius: 5px; overflow: hidden; }
.timeline-block { position: absolute; top: 0; bottom: 0; background: var(--ok); border-radius: 3px; }
.timeline-block.dark { background: var(--muted); opacity: .55; }
.timeline-axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 4px; }

/* ------------------------------------------------------------- narrative */

.myth-text { font-family: var(--font-display); font-size: 22px; line-height: 1.45; color: var(--ink); margin-bottom: 14px; }
.mood-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; margin-bottom: 12px; }
.mood {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 13px 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.mood:hover { border-color: var(--hub-narrative); }
.mood-on { background: var(--moon-soft); border-color: var(--moon); color: var(--moon-ink); }
.mood-emoji { font-size: 24px; line-height: 1; }
.insight { padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.insight:last-child { border-bottom: none; }
.insight p { margin: 3px 0 0; color: var(--ink-2); font-size: 14px; }

/* -------------------------------------------------------------------- ar */

.ar-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 62vh;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.ar-stage::after { content: "Camera off"; color: var(--muted); font-size: 13px; }
.ar-stage.ar-live::after, .ar-stage.ar-fallback::after { content: none; }
.ar-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ar-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ============================================================ Go Window */

.activity-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 -16px;
  padding: 2px 16px 6px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.activity-row::-webkit-scrollbar { display: none; }
.activity {
  flex: none;
  scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px;
  padding: 0 16px 0 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.activity:hover { border-color: var(--go); }
.activity-emoji { font-size: 19px; line-height: 1; }
.activity.on { background: var(--go); border-color: var(--go); color: var(--go-ink); font-weight: 600; }

.plan-hero {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--go) 40%, var(--line));
  background:
    repeating-radial-gradient(circle at 105% 115%, transparent 0 26px, color-mix(in srgb, var(--go) 7%, transparent) 26px 27px),
    radial-gradient(140% 120% at 100% 0%, var(--go-soft), transparent 55%),
    var(--surface);
}
.plan-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.plan-label { margin: 0 0 4px; }
.plan-day { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 24px; line-height: 1.1; color: var(--ink-2); }
.plan-time { margin: 2px 0 0; font-family: var(--font-display); font-size: clamp(38px, 11vw, 52px); line-height: 1; letter-spacing: -.01em; }
.plan-length { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }
.why { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line-soft); display: grid; gap: 9px; }
.why li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.why-icon { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; margin-top: 1px; }
.why-good .why-icon { background: var(--go-soft); color: var(--go); }
.why-meh .why-icon { background: var(--moon-soft); color: var(--moon-ink); }
.why-bad .why-icon { background: var(--bad-soft); color: var(--bad); }
.why-icon svg { width: 13px; height: 13px; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.plan-none { margin: 0; color: var(--ink-2); font-size: 15px; }

.week { display: flex; flex-direction: column; gap: 4px; }
.day-row {
  display: grid;
  grid-template-columns: 74px 1fr 36px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 6px;
  background: none;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.day-row:hover { background: var(--surface-2); }
.day-row.on { background: var(--surface-2); border-color: var(--line); }
.day-name { display: flex; flex-direction: column; line-height: 1.15; }
.day-name strong { font-size: 14px; font-weight: 600; }
.day-name span { font-size: 11.5px; color: var(--muted); }
.day-best {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; text-align: right;
  color: var(--muted);
}
.day-best.good { color: var(--go); }
.day-best.mid { color: var(--moon-ink); }
.heat { display: block; width: 100%; height: 26px; border-radius: 7px; }
.heat-mini { height: 18px; }
.heat-axis {
  display: grid;
  grid-template-columns: 74px 1fr 36px;
  gap: 10px;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
}
.heat-axis div { display: flex; justify-content: space-between; }
.heat-legend { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.heat-key { width: 74px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--surface-3), color-mix(in srgb, var(--go) 45%, var(--surface-3)), var(--go)); }

.win-list { display: flex; flex-direction: column; }
.win-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.win-row:last-child { border-bottom: none; }
.win-when { font-weight: 600; font-size: 15px; }
.win-when .muted { font-weight: 400; }
.win-why { font-size: 13px; color: var(--muted); margin: 2px 0 0; }
.win-score {
  min-width: 46px;
  padding: 5px 0;
  border-radius: 10px;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  background: var(--surface-2);
  color: var(--muted);
}
.win-score.good { background: var(--go-soft); color: var(--go); }
.win-score.mid { background: var(--moon-soft); color: var(--moon-ink); }

.plan-rules summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-weight: 600;
}
.plan-rules summary::-webkit-details-marker { display: none; }
.plan-rules summary::after { content: "+"; font-family: var(--font-mono); color: var(--muted); font-size: 18px; }
.plan-rules[open] summary::after { content: "–"; }
.plan-rules ul { margin: 12px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 14px; }
.plan-rules li { margin: 5px 0; }

/* ================================================================ nearby */

.radar-card { padding: 14px; }
.radar-wrap { position: relative; width: 100%; max-width: 420px; margin: 0 auto; aspect-ratio: 1; }
.radar { display: block; width: 100%; height: 100%; touch-action: manipulation; }
.radar-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.radar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.radar-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.radar-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.radar-status p { margin: 0; font-size: 14px; color: var(--ink-2); }

.station-list { display: flex; flex-direction: column; }
.station-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 8px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s;
}
.station-row:last-child { border-bottom: none; }
.station-row:hover, .station-row.hl { background: var(--surface-2); }
.station-row.current { background: var(--accent-soft); }
.station-bearing {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--accent-ink);
}
.station-bearing svg { width: 15px; height: 15px; transform: rotate(var(--deg, 0deg)); transition: transform .4s; }
.station-main { min-width: 0; display: flex; flex-direction: column; }
.station-main strong { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.station-main span { font-size: 12px; color: var(--muted); }
.station-side { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.station-dist { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.station-live { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.station-live.up { color: var(--accent-ink); }
.station-live.down { color: var(--moon-ink); }

/* ---------------------------------------------------------------- onboard */

.onboard-wrap { position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; }
.onboard-water { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .9; }
.onboard {
  position: relative;
  z-index: 1;
  max-width: 540px;
  min-height: 100vh;
  min-height: 100dvh;
  padding-block: calc(56px + env(safe-area-inset-top, 0px)) calc(40px + env(safe-area-inset-bottom, 0px));
  justify-content: flex-start;
}
.onboard-mark { border-radius: 22px; align-self: flex-start; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7); }
.onboard-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(46px, 13vw, 64px); line-height: .98; margin-top: 10px; color: #F4FBFC; }
.onboard-sub { color: rgba(244, 251, 252, .82); font-size: 16.5px; margin: 4px 0 8px; max-width: 34ch; }
.onboard .muted { color: rgba(244, 251, 252, .66); }
.onboard-wrap {
  /* always over the night-water scene, so always the dark palette */
  --ink: #EAF5F7; --ink-2: #B4CAD3; --muted: #93ABB6;
  --line: rgba(255, 255, 255, .14); --line-soft: rgba(255, 255, 255, .08);
  --surface-2: rgba(255, 255, 255, .06); --bg-2: rgba(2, 10, 16, .6);
  color-scheme: dark;
  background: #050F16;
}
.onboard-card {
  padding: 16px;
  border-radius: var(--radius);
  background: rgba(5, 15, 22, .62);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .12);
}
.onboard-note { font-size: 13px; color: rgba(244, 251, 252, .66); margin-top: 4px; }
.onboard-note a { color: #8DEFDF; }

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

.app-footer {
  margin-top: 6px;
  padding: 18px 2px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--muted);
}
.app-footer p { margin: 0 0 6px; }

/* ---------------------------------------------------------------- motion */

@keyframes ping {
  0% { transform: scale(.6); opacity: .9; }
  80%, 100% { transform: scale(1.9); opacity: 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: .85; }
  50% { transform: scale(1.06); opacity: 1; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.main > * { animation: rise .45s cubic-bezier(.2, .8, .2, 1) both; }
.main > *:nth-child(2) { animation-delay: .04s; }
.main > *:nth-child(3) { animation-delay: .08s; }
.main > *:nth-child(4) { animation-delay: .12s; }
.main > *:nth-child(n+5) { animation-delay: .16s; }
.no-anim .main > * { animation: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .breath-orb { transition: none; }
}

@media (max-width: 420px) {
  .gauge-pair { grid-template-columns: 1fr; }
  .turn { grid-template-columns: 50px minmax(74px, auto) 1fr; }
  .turn-rel { display: none; }
  .card { padding: 16px; }
}