/* First run. A full-screen walk from a neutral start into the time of day you came for. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/site/fonts/BricolageGrotesque-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/site/fonts/BricolageGrotesque-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

.onboard {
  --ob-bg: #0b0d14;
  --ob-ink: #eef0f5;
  --ob-muted: #a3a9b8;
  --ob-pen: #a9b4ff;
  --ob-line: rgba(238, 240, 245, 0.16);
  --ob-raised: rgba(238, 240, 245, 0.06);
  --ob-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: fixed; inset: 0;
  width: 100%; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--ob-bg); color: var(--ob-ink);
  overflow: hidden auto; overscroll-behavior: contain;
  transition: background-color 0.9s var(--ob-ease), color 0.9s var(--ob-ease), opacity 0.5s var(--ob-ease);
}
.onboard:not([open]) { display: none; }
.onboard[open] { display: grid; grid-template-rows: auto auto 1fr; justify-items: center; animation: ob-in 0.5s var(--ob-ease); }
.onboard::backdrop { background: #0b0d14; }
.onboard.leaving { opacity: 0; pointer-events: none; }
@keyframes ob-in { from { opacity: 0; } }

.onboard[data-day="morning"] { --ob-bg: #e8ece6; --ob-ink: #141a1c; --ob-muted: #4a5458; --ob-pen: #1f4fd8; --ob-line: rgba(20, 26, 28, 0.18); --ob-raised: rgba(20, 26, 28, 0.04); color-scheme: light; }
.onboard[data-day="afternoon"] { --ob-bg: #dde7e1; --ob-ink: #141a1c; --ob-muted: #465350; --ob-pen: #0a6e5c; --ob-line: rgba(20, 26, 28, 0.18); --ob-raised: rgba(20, 26, 28, 0.04); color-scheme: light; }
.onboard[data-day="dusk"] { --ob-bg: #262b33; --ob-ink: #eef0f3; --ob-muted: #b7bdc7; --ob-pen: #f0a24b; --ob-line: rgba(238, 240, 243, 0.18); --ob-raised: rgba(238, 240, 243, 0.06); }

.ob-bar {
  display: flex; align-items: center; justify-content: space-between;
  width: min(640px, 100%); min-height: 44px;
  padding: max(12px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
}
.ob-icon {
  display: grid; place-items: center; width: 44px; height: 44px; margin: 0 -10px;
  border: 0; border-radius: 10px; background: transparent; color: var(--ob-ink);
  transition: background-color 0.15s var(--ob-ease);
}
.ob-icon svg { width: 22px; height: 22px; }
.ob-back svg { transform: rotate(90deg); }
@media (hover: hover) { .ob-icon:hover { background: var(--ob-raised); } }
.ob-icon:focus-visible, .onboard button:focus-visible, .onboard input:focus-visible { outline: 2px solid var(--ob-pen); outline-offset: 2px; }

.ob-trace { display: block; width: 100%; height: clamp(72px, 16dvh, 136px); }

.ob-body {
  width: min(640px, 100%);
  padding: 8px max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}
.ob-view { display: flex; flex-direction: column; min-height: 100%; animation: ob-rise 0.42s var(--ob-ease); }
.ob-body[data-direction="back"] .ob-view { animation-name: ob-drop; }
@keyframes ob-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes ob-drop { from { opacity: 0; transform: translateY(-12px); } }

.ob-count { margin: 0 0 8px; font: 500 14px/20px ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; color: var(--ob-muted); }
.ob-title {
  margin: 0; outline: none;
  font-family: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700; font-size: clamp(32px, 8.4vw, 48px); line-height: 1.06; letter-spacing: -0.025em;
  text-wrap: balance;
}
.ob-lead { margin: 12px 0 0; font-size: 17px; line-height: 1.45; color: var(--ob-muted); max-width: 34em; }
.ob-note { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--ob-muted); }

/* Answers sit low on the screen, where a thumb can reach them. */
.ob-options { display: grid; gap: 8px; margin-top: auto; padding-top: 24px; }
.ob-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 60px; padding: 12px 16px; text-align: left;
  border: 1px solid var(--ob-line); border-radius: 16px;
  background: var(--ob-raised); color: var(--ob-ink);
  font-size: 17px; font-weight: 600;
  animation: ob-rise 0.42s var(--ob-ease) backwards;
  transition: background-color 0.15s var(--ob-ease), border-color 0.15s var(--ob-ease), transform 0.15s var(--ob-ease);
}
.ob-option[data-index="1"], .ob-why > [data-index="1"], .ob-days > [data-index="1"] { animation-delay: 50ms; }
.ob-option[data-index="2"], .ob-why > [data-index="2"], .ob-days > [data-index="2"] { animation-delay: 100ms; }
.ob-option[data-index="3"], .ob-why > [data-index="3"], .ob-days > [data-index="3"] { animation-delay: 150ms; }
.ob-option[data-index="4"], .ob-why > [data-index="4"], .ob-days > [data-index="4"] { animation-delay: 200ms; }
.ob-option[data-index="5"], .ob-why > [data-index="5"], .ob-days > [data-index="5"] { animation-delay: 250ms; }
@media (hover: hover) { .ob-option:hover { border-color: var(--ob-muted); } }
.ob-option:active { transform: scale(0.98); }
.ob-option small { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--ob-muted); }
.ob-option[aria-pressed="true"] { border-color: var(--ob-pen); background: color-mix(in srgb, var(--ob-pen) 12%, transparent); }
.ob-option::after {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ob-line);
  transition: background-color 0.15s var(--ob-ease), border-color 0.15s var(--ob-ease);
}
.ob-option[aria-pressed="true"]::after { border: 6px solid var(--ob-pen); }

/* Several answers: a box to tick, and nothing moves on until Continue. */
.ob-option[data-multi]::after { content: none; }
.ob-tick {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px;
  border: 1.5px solid var(--ob-line); color: var(--ob-bg);
  transition: background-color 0.15s var(--ob-ease), border-color 0.15s var(--ob-ease);
}
.ob-tick svg { width: 18px; height: 18px; opacity: 0; transform: scale(0.6); transition: opacity 0.15s var(--ob-ease), transform 0.15s var(--ob-ease); }
.ob-option[aria-pressed="true"] .ob-tick { background: var(--ob-pen); border-color: var(--ob-pen); }
.ob-option[aria-pressed="true"] .ob-tick svg { opacity: 1; transform: none; }
.ob-view > .ob-next { position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); margin-top: 16px; }

.ob-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ob-tab {
  min-height: 44px; padding: 8px 16px; border-radius: 22px;
  border: 1px solid var(--ob-line); background: transparent; color: var(--ob-ink);
  font-size: 15px; font-weight: 600;
  transition: background-color 0.15s var(--ob-ease), color 0.15s var(--ob-ease);
}
.ob-tab[aria-pressed="true"] { background: var(--ob-ink); color: var(--ob-bg); border-color: var(--ob-ink); }

.ob-actions { display: grid; gap: 8px; margin-top: 32px; }
.ob-primary, .ob-secondary {
  width: 100%; min-height: 52px; padding: 12px 20px; border-radius: 12px;
  font-size: 17px; font-weight: 600;
  transition: opacity 0.15s var(--ob-ease), transform 0.15s var(--ob-ease), background-color 0.15s var(--ob-ease);
}
.ob-primary { border: 0; background: var(--ob-ink); color: var(--ob-bg); }
.ob-secondary { border: 1px solid var(--ob-line); background: transparent; color: var(--ob-ink); }
@media (hover: hover) { .ob-primary:hover { opacity: 0.88; } .ob-secondary:hover { background: var(--ob-raised); } }
.ob-primary:active, .ob-secondary:active { transform: scale(0.98); }
.ob-primary:disabled { opacity: 0.6; }
.ob-view > .ob-primary { margin-top: 24px; flex: none; }
.ob-link {
  align-self: center; min-height: 44px; margin-top: 8px; padding: 8px 12px; border: 0; background: transparent;
  color: var(--ob-muted); font-size: 15px; text-decoration: underline; text-underline-offset: 3px;
}

/* The plan: each reason comes in after the last. */
.ob-why { display: grid; gap: 8px; margin-top: 24px; }
.ob-why .why {
  padding: 12px 16px; border-radius: 16px; background: var(--ob-raised); border: 1px solid var(--ob-line);
  animation: ob-rise 0.42s var(--ob-ease) backwards;
}
.ob-why .why b { color: var(--ob-ink); }
.ob-why .why b span { color: var(--ob-pen); }
.ob-why .why p, .ob-why .why small { color: var(--ob-muted); }

/* The sell: what they said, what it became, where it goes and all they get. */
.ob-fit { padding: 16px; }
.ob-why .ob-fit p { margin: 0; }
.ob-why .ob-fit .ob-said { font: 500 14px/20px ui-monospace, "SF Mono", Menlo, monospace; color: var(--ob-pen); }
.ob-why .ob-fit .ob-gain { margin-top: 4px; font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--ob-ink); }

.ob-days { list-style: none; margin: 24px 0 0; padding: 0; }
.ob-day {
  position: relative; padding: 0 0 24px 24px;
  border-left: 2px solid var(--ob-pen);
  animation: ob-rise 0.42s var(--ob-ease) backwards;
}
.ob-day:last-child { padding-bottom: 0; border-left-color: transparent; }
.ob-day::before {
  content: ""; position: absolute; top: 4px; left: -7px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--ob-pen); box-shadow: 0 0 0 4px var(--ob-bg);
}
.ob-day .ob-count { margin: 0; color: var(--ob-pen); }
.ob-day-title {
  margin: 2px 0 0;
  font-family: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance;
}
.ob-day-text { margin: 6px 0 0; font-size: 16px; line-height: 1.45; color: var(--ob-muted); }

.ob-all { list-style: none; margin: 24px 0 0; padding: 0; }
.ob-all li {
  display: grid; grid-template-columns: 56px 1fr; align-items: baseline; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--ob-line);
  font-size: 16px; line-height: 1.4;
}
.ob-all-n {
  font-family: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  color: var(--ob-pen);
}
.ob-promise {
  margin: 16px 0 0; padding: 16px; border-radius: 16px;
  background: color-mix(in srgb, var(--ob-pen) 12%, transparent);
  font-size: 16px; font-weight: 600; line-height: 1.4;
}

.ob-form { display: grid; gap: 16px; margin-top: 24px; }
.ob-field { display: grid; gap: 8px; font-size: 15px; font-weight: 500; }
.ob-field small { font-size: 14px; font-weight: 400; color: var(--ob-muted); }
.ob-field input {
  width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 12px;
  border: 1px solid var(--ob-muted); background: var(--ob-raised); color: var(--ob-ink);
  font: inherit; font-size: 17px; font-weight: 400;
}
.ob-password { position: relative; display: block; }
.ob-password input { padding-right: 72px; }
.ob-reveal {
  position: absolute; top: 4px; right: 4px; min-width: 60px; height: 44px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ob-muted); font-size: 15px;
}
.ob-error { margin: 0; font-size: 15px; line-height: 1.4; color: var(--ob-ink); font-weight: 600; }
.ob-error:empty { display: none; }
.ob-form .ob-primary { margin-top: 8px; }
.ob-code {
  display: block; margin-top: 24px; padding: 16px 12px; border-radius: 16px; text-align: center;
  border: 1px solid var(--ob-line); background: var(--ob-raised);
  font: 600 18px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  overflow-wrap: anywhere; -webkit-user-select: all; user-select: all;
}

@media (min-width: 720px) {
  .ob-trace { height: clamp(96px, 22dvh, 200px); }
  .ob-body { padding-top: 16px; }
  .ob-title { font-size: 56px; }
  .ob-options { margin-top: 0; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .ob-trace { height: 48px; }
  .ob-title { font-size: 28px; }
  .ob-options { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .onboard, .ob-view, .ob-option, .ob-why .why, .ob-day { animation: none !important; transition: none !important; }
}

.ob-tools { display: flex; align-items: center; gap: 8px; }