/* Self-hosted fonts (SIL Open Font License 1.1): Fraunces and Inter, variable. Served from this origin so a visit never contacts a font CDN. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/fraunces-latin-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/fraunces-latin-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --bg: #12141c;
  --surface: #1b1f2b;
  --surface-raised: #222738;
  --line: #2a2f3d;
  --text: #f2f0ea;
  --muted: #9096a8;
  --accent: #e3a44c;
  --accent-dim: #6b5636;
  --good: #74c69d;
  --love: #ea5a72;
  --danger: #d97878;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  overflow-x: clip; /* nothing may widen the page: a stray wide element makes phones zoom out and shift everything off-centre */
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.5;
}

#app {
  max-width: 600px;
  margin: 0 auto;
  padding: 48px 20px calc(140px + env(safe-area-inset-bottom, 0px)); /* room to scroll past the tab bar and the feedback button */
  min-height: 100vh;
}

h1, h2, h3, .display {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}

a { color: inherit; }

button {
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--text);
  padding: 11px 18px;
}
button:hover { border-color: var(--accent-dim); }
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1408;
  font-weight: 600;
}
button.primary:hover { filter: brightness(1.06); }
button.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  padding: 6px 8px;
}
button.ghost:hover { color: var(--text); border-color: var(--line); }
button.small { padding: 6px 10px; font-size: 13px; }
button.danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}
button.danger:hover { background: var(--danger); color: var(--surface); }
button.danger:disabled { opacity: 0.4; cursor: not-allowed; background: transparent; color: var(--danger); }

input, textarea, select {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 13px;
  color: var(--text);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--accent-dim);
  outline-offset: 1px;
}
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239096a8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
}
select option { background: var(--surface-raised); color: var(--text); }
label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin: 18px 0 6px;
}
label:first-of-type { margin-top: 0; }

/* ---- Top bar (persistent brand mark, every screen) ---- */

.top-bar { margin-bottom: 32px; }
.top-bar-row .brand-mark { flex: 0 1 auto; }
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* The wordmark as on the landing page: heavy Inter, in the text colour — just smaller. */
  font: 800 17px Inter, system-ui, sans-serif;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}

/* ---- Dashboard tab bar: Home / Plans / Notes / Journey / Premium ----
   Fixed to the bottom, native-app style — active vs. inactive is fill
   color only (icon + label both switch to --accent), no border/frame of
   any kind. #app's own bottom padding (below) keeps the last bit of any
   page's content from ever sitting under this bar while scrolling. */
.dash-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  background: var(--surface);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
.dash-tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  color: var(--muted);
  text-decoration: none;
  font-size: 11px;
}
.dash-tab span { line-height: 1; }
.dash-tab:hover { color: var(--text); }
.dash-tab.active { color: var(--accent); }

/* ---- Notes tab ---- */
/* "Take a note…": one filled bar (a tap opens the editor), Draw and Photo at its end, as in Keep. */
.note-new { margin-top: 20px; display: flex; align-items: center; gap: 2px; min-height: 52px; padding: 0 6px 0 18px; background: var(--surface); border-radius: 14px; cursor: text; }
.note-new-label { flex: 1; color: var(--muted); font-size: 15px; }
.note-new-tool { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.note-new-tool svg { width: 22px; height: 22px; flex: none; }
.note-canvas {
  display: block;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 400 / 560;
  border-radius: 6px;
  border: 1px solid var(--line);
  touch-action: none;
  cursor: crosshair;
}

.drawing-pad { margin-top: 10px; }
.drawing-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  margin-bottom: 8px;
}
.swatch-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}
.swatch-btn.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg); }
.swatch-custom {
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  overflow: hidden;
  background: none;
  cursor: pointer;
}
.drawing-toolbar button.active { color: var(--accent); border-color: var(--accent); }

/* Fullscreen is just this same node repositioned over everything, on the
   same canvas element — nothing is recreated, so a drawing in progress is
   never lost switching in or out of it. */
.drawing-pad-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 999;
  margin-top: 0;
  padding: 16px;
  background: rgba(6, 7, 12, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.drawing-pad-fullscreen canvas {
  order: 1;
  width: auto;
  height: 78vh;
  max-width: 94vw;
}
.drawing-pad-fullscreen .drawing-toolbar {
  order: 2;
  margin-top: 14px;
  margin-bottom: 0;
  justify-content: center;
}
/* Notes, as in Google Keep: two columns of cards in their own heights (laid out in app.js). */
.notes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 24px;
}
.notes-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.note-card {
  position: relative;
  background: var(--surface);
  border: none;
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
  overflow: hidden;
}
.note-card-locked { cursor: default; }
/* A pinned note: a tint of its own and a small pin, no frame. */
.note-card-pinned { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.note-pin-mark { position: absolute; top: 8px; right: 8px; color: var(--accent); display: inline-flex; }
.note-card .note-text { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 12; -webkit-box-orient: vertical; overflow: hidden; }
.note-card .note-meta { margin-top: 8px; font-size: 11.5px; }
.note-card .note-photo, .note-card .note-drawing { margin: -12px -12px 10px; width: calc(100% + 24px); border-radius: 0; }
.note-locked-msg { font-size: 13px; color: var(--muted); line-height: 1.5; }
.note-drawing { display: block; width: 100%; border-radius: 6px; margin-bottom: 8px; }
.note-photo { display: block; width: 100%; border-radius: 6px; margin-bottom: 8px; }
.partner-photo-slot { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; }
.partner-photo-preview { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.note-text { white-space: pre-wrap; font-size: 14px; }
.note-card-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.note-delete { color: var(--muted); }
.note-pin { color: var(--muted); }
.note-pin-active { color: var(--accent); border-color: var(--accent-dim); }
.brand-mark svg { flex: none; }
/* The mark (logoMark): amber, a deeper amber on the pass's paper. */
.logo-mark { color: var(--accent); }
.sim-pass .logo-mark { color: #c9862a; }

.logo-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.logo-lockup svg { flex: none; }
.logo-lockup span {
  font: 800 30px Inter, system-ui, sans-serif;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* ---- Landing ---- */

.landing { padding-top: 8vh; text-align: left; }
/* The finished result, faint behind the landing page: three passes taking turns, from the top of
   the page down to just under Start, where they fade out. */
html { overflow-x: clip; }
.landing-hero { position: relative; }
.landing-hero > *:not(.landing-backdrop) { position: relative; z-index: 1; }
.landing-start + * { margin-top: 0; }
.landing > .landing-actions { margin-top: 10px; }
.landing-backdrop { position: absolute; z-index: 0; top: -8vh; bottom: -56px; left: calc(50% - 50vw); width: 100vw; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); }
.landing-backdrop-pass { position: absolute; left: 50%; top: 9vh; width: min(340px, 82vw); opacity: 0; transform: translate(-22%, 0) rotate(-7deg); animation: landing-pass 18s ease-in-out infinite; animation-delay: calc(var(--i) * 6s - 1s); }
.landing-backdrop-pass .sim-pass { filter: none; }
@keyframes landing-pass {
  0% { opacity: 0; transform: translate(-22%, 14px) rotate(-7deg); }
  8%, 28% { opacity: .1; transform: translate(-22%, 0) rotate(-7deg); }
  36%, 100% { opacity: 0; transform: translate(-22%, -10px) rotate(-7deg); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-backdrop-pass { animation: none; }
  .landing-backdrop-pass:first-child { opacity: .08; }
}
@media (min-width: 720px) { .landing-backdrop-pass { left: 62%; top: 7vh; transform: translate(0, 0) rotate(-7deg); } @keyframes landing-pass { 0% { opacity: 0; } 8%, 28% { opacity: .12; } 36%, 100% { opacity: 0; } } }
.landing .display {
  font-size: 40px;
  line-height: 1.15;
  max-width: 12ch;
}
.landing p {
  color: var(--muted);
  font-size: 17px;
  max-width: 40ch;
  margin: 18px 0 32px;
}
.landing-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.landing-actions-bottom {
  margin-top: 44px;
  align-items: stretch;
}
.landing-actions-bottom .primary { width: 100%; }
.join-form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 2px;
}
.join-form input { max-width: 320px; }
.error-box:empty { display: none; padding: 0; border: none; margin: 0; }

.landing-problem {
  margin-top: 40px;
}
/* After Continue: straight under Back, no landing-page gap above it. */
.get-page .landing-story { padding-top: 0; }
.get-page .landing-problem { margin-top: 12px; }
.landing-problem-lede {
  font: 500 19px "Fraunces", Georgia, serif;
  margin: 0;
  max-width: none;
  color: var(--text);
}
.landing-stat-tiles {
  display: flex;
  gap: 14px;
  margin-top: 18px;
}
.landing-stat-tile {
  flex: 1;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--surface);
}
.landing-stat-value {
  font: 500 26px "Fraunces", Georgia, serif;
  color: var(--accent);
}
.landing-stat-label {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.35;
}
.landing-problem p {
  margin: 16px 0 0;
  font-size: 15px;
  max-width: none;
  color: var(--text);
}
.landing-problem p strong { color: var(--accent); }
.landing-problem-source {
  font-size: 12px !important;
  color: var(--muted) !important;
  margin-top: 12px !important;
}

.landing-showcases {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 40px;
}
/* Each one is the app on a phone, recorded: the screen alone, its own size, with what it shows under it. */
.landing-showcase { display: flex; flex-direction: column; align-items: center; text-align: center; }
.landing-showcase img {
  width: min(100%, 300px);
  height: auto;
  aspect-ratio: 360 / 780;
  border-radius: 28px;
  display: block;
  background: var(--surface);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.landing-showcase-caption { margin-top: 16px; max-width: 34ch; }
.landing-showcase-title { font: 500 19px/1.3 "Fraunces", Georgia, serif; color: var(--text); }
.landing-showcase-line { margin-top: 4px; font-size: 14px; color: var(--muted); }

.landing-section-title {
  font: 500 15px "Fraunces", Georgia, serif;
  color: var(--muted);
  margin: 44px 0 0;
  font-weight: 600;
}
.landing-steps + .landing-section-title,
.landing-showcases + .landing-section-title { margin-top: 44px; }
.landing-section-title + .landing-steps { margin-top: 16px; }
.landing-section-title + .landing-features { margin-top: 16px; padding-top: 20px; }

.landing-steps {
  display: flex;
  gap: 10px;
  margin-top: 44px;
}
.landing-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.landing-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.landing-step-label { font-size: 13px; color: var(--muted); line-height: 1.3; }

.landing-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.landing-feature {
  display: flex;
  align-items: center;
  gap: 14px;
}
.landing-feature-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
}
.landing-feature-label { font-size: 15px; font-weight: 600; color: var(--text); }

.landing-footer { margin-top: 48px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 28px 0 8px; font-size: 13px; }
.legal-links a { color: var(--muted); text-decoration: none; }
.legal-links a:hover { color: var(--text); }

/* ---- Legal pages ---- */

.legal-page { max-width: 68ch; padding-bottom: 40px; }
.legal-page .display { font-size: 30px; margin-top: 10px; }
.legal-doc { margin-top: 24px; }
.legal-doc h2 { font-size: 18px; margin: 28px 0 8px; }
.legal-doc h3 { font-size: 15px; margin: 18px 0 6px; color: var(--muted); }
.legal-doc p { color: var(--fg); line-height: 1.6; margin: 0 0 12px; }
.legal-doc ul { margin: 0 0 12px; padding-left: 20px; }
.legal-doc li { color: var(--fg); line-height: 1.6; margin-bottom: 6px; }

/* ---- My Plans grid ---- */

.landing-header { margin-bottom: 28px; }
.landing-header .display { font-size: 30px; }
.landing-header p { color: var(--muted); font-size: 15px; margin-top: 8px; }

.plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 480px) {
  .plan-grid { grid-template-columns: 1fr; }
}

/* A plan's overview card shows exactly what's needed to tell plans apart
   at a glance — nothing a person has to stop and read (see planCompareCard).
   Fill-only, no outer frame, matching the rest of the Plan feature. */
.plan-card {
  display: block;
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  padding: 18px;
  text-decoration: none;
  color: var(--text);
  transition: background-color 150ms ease;
}
.plan-card:hover, .plan-card:active { background: var(--surface-raised); }
.plan-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-card-name {
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.plan-card-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.plan-card-goal {
  font-family: "Fraunces", Georgia, serif;
  font-size: 18px;
  line-height: 1.25;
  margin: 0 0 14px;
}
.plan-card-top + .plan-card-goal { margin-top: 10px; }
.plan-card-stats { display: flex; gap: 24px; margin-bottom: 14px; }
.plan-card-stat { display: flex; flex-direction: column; gap: 2px; }
.plan-card-stat-value { font-size: 20px; font-weight: 600; line-height: 1.1; }
.plan-card-stat-value.balance-good { color: var(--good); }
.plan-card-stat-value.balance-bad { color: var(--danger); }
.plan-card-stat-unit { font-size: 12px; color: var(--muted); }
.plan-card-status { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.plan-card-status.good { color: var(--good); }
.plan-card-status.warn { color: var(--accent); }
.plan-card-status.bad { color: var(--danger); }
.plan-card-setup-hint { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--accent); }
.plan-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-card-chevron { display: flex; color: var(--muted); opacity: 0.6; }

.plan-card-add,
.plan-card-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--surface);
  color: var(--muted);
  min-height: 120px;
  text-align: center;
}
.plan-card-add-icon { font-size: 28px; line-height: 1; color: var(--accent); }
.plan-card-locked { cursor: default; }
a.plan-card-locked { cursor: pointer; }

/* ---- Compare-your-plans columns ---- */

.plan-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 20px;
  align-items: start;
}

.plan-column {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.plan-column.plan-card-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-style: dashed;
  color: var(--muted);
  min-height: 160px;
  text-align: center;
  cursor: pointer;
}
.plan-column.plan-card-add label,
.plan-column.plan-card-add input {
  text-align: left;
  width: 100%;
}
.plan-column.plan-card-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-style: dashed;
  color: var(--muted);
  min-height: 160px;
  text-align: center;
  cursor: default;
}

.countdown-small .num { font-size: 34px; }
.countdown-small .label { font-size: 13px; }

.shared-badge { margin-right: 6px; }

/* ---- Form card ---- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.form-actions { margin-top: 26px; display: flex; gap: 10px; }

/* ---- confirmDialog() — the in-UI stand-in for the browser's own
   confirm(). No border on the card itself: the dim backdrop is what
   separates it from the page, same "fill, not frame" rule as everywhere
   else. ---- */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(6, 7, 12, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.confirm-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface-raised);
  border-radius: var(--radius);
  padding: 22px;
}
.confirm-card h3 { font-size: 18px; }
.confirm-card .hint { margin-top: 8px; }
.confirm-actions { margin-top: 22px; display: flex; justify-content: flex-end; gap: 10px; }
/* The wizard's own step content sits directly on the page background, with
   no enclosing card frame — every grouping inside it (option rows, cost
   rows) already carries its own fill, so an outer box here would just be a
   second, redundant frame around them. */
.wizard-page .card { border: none; background: transparent; padding: 0; }
/* The plan detail screen's own cost/timeline breakdown — no enclosing
   card at all. The page itself is already the frame; a box around a box
   around stat tiles that already carry their own fill was a redundant
   third layer, so this sits flush on the page like the wizard's cards do. */
.plan-numbers-block,
.plan-numbers-setup {
  border: none;
  background: transparent;
  padding: 0;
  margin-top: 28px;
}
.plan-numbers-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.plan-numbers-head h3 { font-family: "Fraunces", Georgia, serif; font-size: 18px; font-weight: 500; margin: 0; }
.wizard-page .form-actions .primary { flex: 1; }
.wizard-back-btn {
  flex: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  padding: 11px 20px;
}
.wizard-back-btn:hover { border-color: var(--accent-dim); }
.hint { font-size: 13px; color: var(--muted); margin-top: 6px; }
.field-warning { font-size: 13px; color: var(--danger); margin-top: 6px; min-height: 0; }
.field-warning:empty { margin-top: 0; }

/* ---- Share box ---- */

.share-box {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 24px;
}
.share-row { display: flex; gap: 8px; }
.share-row input { font-size: 13px; color: var(--muted); }
.share-box .hint { color: var(--muted); }
.share-warn { display: flex; align-items: center; gap: 6px; margin: 10px 2px 0; }
.share-password { display: flex; align-items: center; gap: 8px; width: 100%; margin: 10px 0 0; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--surface-raised); color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.share-password span { flex: 1; }
.share-password svg:first-child { color: var(--accent); }
.share-line { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.share-line-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--text); }
.share-box > .ghost { margin-top: 8px; }
.share-delete { margin-top: 10px; }
button.danger-text, button.danger-text:hover { color: var(--danger); }

/* ---- Premium pricing page (see #/d/:token/premium) ---- */
.pricing-page { margin: 8px 0 20px; }
.pricing-hero { text-align: center; padding: 8px 0 28px; }
.pricing-hero h1 { margin-bottom: 8px; }
.pricing-hero-active {
  padding: 28px 20px;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  background: rgba(227, 164, 76, 0.06);
  margin-bottom: 24px;
}
.pricing-hero-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 10px;
}
.pricing-hero-actions { display: flex; justify-content: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.pricing-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pricing-card-best { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.pricing-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.pricing-consent input[type="checkbox"] { width: auto; margin-top: 3px; flex-shrink: 0; }
.pricing-best-badge {
  position: absolute;
  top: -12px;
  left: 20px;
  background: var(--accent);
  color: #1a1408;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 12px;
}
.pricing-plan-name { font-family: "Fraunces", Georgia, serif; font-size: 20px; }
.pricing-price { font-size: 40px; font-weight: 600; line-height: 1; }
.pricing-price-period { font-size: 15px; font-weight: 400; color: var(--muted); }
.pricing-feature-list { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pricing-feature-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.pricing-check { color: var(--good); font-weight: 700; }
/* "Planned, not live yet" items (see PREMIUM_PLANNED_FEATURES) — muted and
   set apart from the checkmarked list above, so it doesn't read as
   something a purchase already unlocks. */
.pricing-feature-list-planned { margin-top: 2px; opacity: 0.7; }
.pricing-feature-list-planned li { font-size: 13px; }
.pricing-planned-marker { filter: grayscale(1); }
.pricing-cta { width: 100%; margin-top: 6px; padding: 13px 18px; font-size: 15px; }

/* "Have a code?" — a quiet, collapsed-by-default affordance for a one-time
   comp redemption (see /admin/premium-codes). Deliberately understated so
   it never competes with the two real pricing cards above it. */
.redeem-code-toggle { margin-top: 20px; text-align: center; width: 100%; }
.redeem-code-box {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
}
.redeem-code-box input[type="text"] { width: auto; flex: 1 1 200px; text-transform: uppercase; }
.redeem-code-box .hint { width: 100%; text-align: center; margin-top: 4px; }

.checkout-notice {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  font-size: 14px;
}
.checkout-notice-success { border-color: var(--good); color: var(--good); }
.checkout-notice-error { border-color: var(--danger); color: var(--danger); }

/* Fixed to the bottom of the viewport, above everything else — appended
   straight to <body> by startVersionCheck() in app.js, so it's independent
   of whatever page/route happens to be mounted underneath it. */
.version-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--surface-raised);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  font-size: 14px;
}
.version-banner button { flex-shrink: 0; padding: 8px 16px; font-size: 14px; }

.email-section { margin-top: 14px; }
.email-section .hint { color: var(--muted); margin-bottom: 8px; }
/* Home, once paid: email and password, so the dashboard isn't lost with this device. */
.safe-card { background: var(--surface); border-radius: 16px; padding: 16px 16px 14px; margin: 4px 0 22px; }
.safe-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.safe-head h3 { margin: 0; font-size: 17px; }
.safe-close { border: 0; background: none; color: var(--muted); padding: 4px; cursor: pointer; display: inline-flex; }
.safe-card > .hint { margin: 6px 0 0; }
.safe-card .email-section { margin-top: 12px; }
.safe-row.done { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--good); font-size: 14px; }

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

.plan-header { margin-bottom: 28px; }
.plan-header .eyebrow { color: var(--muted); font-size: 14px; }
.plan-header h1 { font-size: 26px; line-height: 1.2; margin: 4px 0 8px; }
.plan-description { color: var(--muted); font-size: 14px; margin: 0 0 18px; white-space: pre-wrap; }
.plan-column .plan-header { margin-bottom: 14px; }
.plan-column .plan-header h3 { font-size: 19px; margin: 4px 0 10px; }
.countdown { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.countdown .live-cd.hero { justify-content: flex-start; margin: 0; }
.countdown .num { font-size: 56px; font-weight: 600; }
.countdown .label { color: var(--muted); font-size: 15px; }

.couple-edit-details {
  margin-bottom: 28px;
}
.couple-edit-details summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  list-style: none;
}
.couple-edit-details summary::-webkit-details-marker { display: none; }
.couple-edit-details summary:hover { color: var(--text); }

/* Plan title row: name/goal on the left, a single icon-only pencil button
   on the right that reveals plan-meta-edit-form in place — no separate
   text-labeled "Edit plan" section elsewhere on the page. */
.plan-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
/* Accent-colored by default, like the "+" on the Add-a-plan card and the
   Fastest/Cheapest badge icons — this app's own established convention is
   that an accent-tinted icon IS the signifier for "this is actionable,"
   while muted/status icons stay informational-only. A gray pencil here
   would read as decorative, not as a button. */
.icon-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.icon-btn:hover, .icon-btn.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
/* :hover never fires on a touch tap — the press itself needs its own
   feedback, the same quick "button depress" native apps give on touch. */
.icon-btn:active { background: color-mix(in srgb, var(--accent) 24%, transparent); transform: scale(0.92); }

.plan-meta-edit-form {
  margin: 14px 0 24px;
  padding-top: 2px;
}
.plan-meta-edit-form label { display: block; margin: 14px 0 6px; font-size: 13px; color: var(--muted); }
.plan-meta-edit-form label:first-child { margin-top: 0; }

/* Utility back-navigation — not a call to action, so it stays in the
   quiet muted tone (same mental model as the rest of the app's secondary
   nav text), a chevron substituting for the old "←" character. */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  text-decoration: none;
  max-width: 100%;
  min-width: 0;
}
.back-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back-link:hover { color: var(--text); }

/* The one thing to do on an empty plan's detail page — accent-colored,
   no underline, chevron doing the "this leads onward" signaling, matching
   plan-card-setup-hint's treatment on the overview card. */
.setup-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  text-decoration: none;
}
.setup-cta:hover { color: var(--accent); }

/* A whole screen with nothing in it yet (e.g. the Plans tab after
   deleting the last plan) — just the one sentence and the one CTA, no
   illustration or card frame needed for this to read clearly. */
.empty-state { margin-top: 48px; text-align: center; }
.empty-state p { color: var(--muted); margin-bottom: 10px; }
.empty-state .setup-cta { justify-content: center; font-size: 16px; }

.progress-track {
  height: 8px;
  border-radius: 4px;
  background: var(--surface-raised);
  overflow: hidden;
  margin-top: 16px;
}
.progress-fill { height: 100%; background: var(--accent); border-radius: 4px; }

.viewers {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}

/* ---- Timeline ---- */

.timeline { position: relative; margin-top: 32px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}
.milestone { position: relative; padding-left: 32px; margin-bottom: 22px; }
.milestone::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent-dim);
}
.milestone.complete::before { background: var(--good); border-color: var(--good); }

.milestone-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
}
.milestone-head-left { display: flex; align-items: baseline; gap: 8px; }
.milestone-head h3 { font-size: 17px; }
.step-checkbox { position: relative; top: 1px; width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.milestone-meta { font-size: 13px; color: var(--muted); white-space: nowrap; }

.tasks { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.task {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}
.task input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent);
}
.task-title { flex: 1; font-size: 14.5px; }
.task-title.done { color: var(--muted); text-decoration: line-through; }
.task-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }

.anniversary-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.anniversary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}
.anniversary-name { font-size: 14.5px; font-weight: 600; }
.anniversary-date { font-size: 12px; color: var(--muted); margin-top: 2px; }
.anniversary-actions { display: flex; gap: 6px; flex: none; }
/* The day's name and date are one tap target that opens it to change. */
.anniversary-open { flex: 1; min-width: 0; padding: 0; background: transparent; border: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.anniversary-open:hover { filter: none; }

/* Meet ups: one compact row each — what's left (or a photo) on the left,
   name and dates beside it. Tapping a row opens everything else in a sheet. */
.meet-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.meet-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 10px 14px 10px 12px;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: none;
  border-radius: 14px;
}
.meet-item.past { grid-template-columns: 52px minmax(0, 1fr) auto; }
.meet-item:hover { filter: none; background: var(--surface-raised); }
.meet-text { min-width: 0; }
.meet-label { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meet-dates { font-size: 12.5px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meet-chev { display: inline-flex; color: var(--muted); }
.meet-thumb { width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background: var(--surface-raised); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); }
.meet-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meet-item:hover .meet-thumb-empty { background: var(--surface); }
.meet-thumb-mon { font-size: 11px; line-height: 1.1; }
.meet-thumb-day { font: 500 20px/1.1 "Fraunces", Georgia, serif; color: var(--text); }
.meet-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.meet-sheet-head .icon-btn { flex: none; }
.meet-sheet h3 { margin: 4px 0 2px; font: 500 22px "Fraunces", Georgia, serif; }
.meet-sheet-meta { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.meet-sheet-delete { display: block; margin: 20px auto 4px; padding: 8px 14px; background: transparent; border: none; color: var(--danger); font-size: 14px; }
.meet-add-inline .date-field { flex: 1 1 130px; max-width: 150px; }

.meet-photos { margin-top: 8px; }
.meet-photos.busy { opacity: 0.6; pointer-events: none; }
/* Always three equal columns, so one or two photos are the same width as
   three; each tile is a square that crops (never stretches) its photo. */
.meet-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.meet-photo-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}
.meet-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meet-photo-locked {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.meet-photo-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  line-height: 22px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
/* An empty slot: one big tap target with a "+" in the middle. Fill only,
   no outline; it dims on press so a tap always feels acknowledged. */
.meet-photo-slot {
  aspect-ratio: 1;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: var(--surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .meet-photo-slot:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface-raised)); }
}
.meet-photo-slot:active { background: color-mix(in srgb, var(--accent) 24%, var(--surface-raised)); transform: scale(0.96); }
.meet-photo-plus { position: relative; width: 22px; height: 22px; }
.meet-photo-plus::before, .meet-photo-plus::after {
  content: "";
  position: absolute;
  background: var(--muted);
  border-radius: 1px;
}
.meet-photo-plus::before { left: 10px; top: 2px; width: 2px; height: 18px; }
.meet-photo-plus::after { left: 2px; top: 10px; width: 18px; height: 2px; }
.meet-wizard input[type="text"] { margin-top: 14px; }

.premium-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 999px;
  padding: 2px 9px;
}

.message-card-panel:empty { margin: 0; }
.message-card-form {
  margin-top: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.message-card-form-header { display: flex; align-items: center; gap: 8px; }
.message-card-form textarea { resize: vertical; }
.message-card-datetime { display: flex; gap: 8px; flex-wrap: wrap; }
.message-card-datetime > * { flex: 1 1 140px; }

.add-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
/* The global `input { width: 100% }` rule fights flex sizing here — every
   input tried to claim the full row width as its flex-basis, overflowing
   narrow containers like a plan-column. Give each field its own basis and
   let the row wrap instead of clipping on narrow columns. */
.add-inline input {
  font-size: 14px;
  width: auto;
  min-width: 0;
}
.add-inline input[type="text"] { flex: 1 1 110px; }
.add-inline .date-field { flex: 1 1 130px; max-width: 160px; }
.add-inline button { flex: 0 0 auto; }

/* ---- Calendar date picker (replaces native <input type="date">) ---- */
.date-field { position: relative; display: inline-block; width: 100%; }
.date-field-trigger {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 13px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.date-field-trigger.placeholder { color: var(--muted); }
.date-field-trigger:focus-visible { outline: 2px solid var(--accent-dim); outline-offset: 1px; }
.date-popup {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  width: 260px;
  max-width: calc(100vw - 24px);
  scroll-margin-bottom: 110px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.date-popup-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.date-popup-title { font-size: 13.5px; font-weight: 600; }
.date-nav {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 16px;
  padding: 2px 8px;
  cursor: pointer;
  width: auto;
}
.date-nav:hover { color: var(--text); }
.date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.date-weekday { font-size: 11px; color: var(--muted); text-align: center; padding: 4px 0; }
.date-day {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  padding: 6px 0;
  cursor: pointer;
}
.date-day:hover { background: var(--line); }
.date-day.muted { color: var(--muted); opacity: 0.5; }
.date-day.disabled { opacity: 0.25; cursor: default; }
.date-day.disabled:hover { background: none; }
.date-day.today { outline: 1px solid var(--accent-dim); outline-offset: -1px; }
.date-day.selected { background: var(--accent); color: var(--bg); font-weight: 600; }
.date-popup-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.date-footer-btn {
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
  width: auto;
  padding: 4px 6px;
}

.locked-plan {
  margin-top: 40px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  color: var(--muted);
  font-size: 14px;
}

/* ---- City picker (dropdown-only combobox) ---- */
.city-select { position: relative; }
.city-select input {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 13px;
  color: var(--text);
}
.city-popup {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.city-option { padding: 8px 10px; border-radius: 6px; font-size: 14px; cursor: pointer; }
.city-option:hover { background: var(--line); }

/* ---- Couple header: names, distance, flight teaser, clocks ---- */
.couple-header { margin-bottom: 32px; }
.couple-names {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 24px;
}
.couple-heart { color: var(--danger); font-size: 18px; }
/* Home's own "photo ♥️ photo / name  name" header (see
   coupleNamesWithPhotos/HOME_COUPLE_CLASSES) — only shown once either
   partner has set a photo (from the same "Edit names & cities" form);
   .couple-names above is still what renders when neither has. Sized
   smaller than Journey's printable version (journey-doc-photo etc.),
   since this sits inline at the top of an ordinary screen, not a page. */
.couple-photo-header { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 4px; width: 100%; }
.couple-photos { display: flex; align-items: flex-start; justify-content: center; gap: 28px; width: 100%; }
.couple-photos .couple-heart { font-size: 36px; margin-top: 20px; flex-shrink: 0; }
/* Each photo and its own name share one column (see coupleNamesWithPhotos'
   `person`-keyed structure), which keeps a name centered under its own
   photo's axis even when "Alex" and "Jordan" render at different widths —
   a shared row-level gap can't guarantee that once the two names differ. */
.couple-person { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.couple-person span { font-family: "Fraunces", Georgia, serif; font-size: 28px; }
.couple-photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.couple-photo-placeholder { background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.couple-photo-btn { border: 0; padding: 0; background: none; border-radius: 50%; cursor: pointer; display: block; }
.couple-photo-btn:active .couple-photo { opacity: 0.8; }
.couple-names-under-photos { justify-content: center; gap: 56px; width: 100%; font-size: 28px; }
.couple-distance { color: var(--muted); font-size: 14px; }
.couple-top-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 6px;
}
.couple-top-row .share-link-toggle { margin-top: 0; white-space: nowrap; }
.couple-add-prompt { color: var(--muted); font-size: 14px; }
.couple-add-prompt a { color: var(--accent); }

.flight-teaser {
  position: relative;
  display: block;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
a.flight-teaser-locked { cursor: pointer; }
.flight-teaser-value { font-size: 15px; filter: blur(5px); user-select: none; }
.flight-teaser-unlocked .flight-teaser-value { filter: none; user-select: text; }
.flight-teaser-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  background: rgba(27, 31, 43, 0.35);
}

.flight-teaser-pending { cursor: default; }
.flight-teaser-unlocked[href] { cursor: pointer; }
.flight-teaser-unlocked[href]:hover { border-color: var(--accent); }
.flight-teaser-route { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }
.flight-teaser-dates { margin-top: 6px; font-size: 13px; color: var(--muted); }
.flight-teaser-airline { margin-top: 2px; font-size: 13px; color: var(--muted); }
.flight-teaser-cta { margin-top: 10px; font-size: 13px; color: var(--accent); font-weight: 500; }

.city-clocks { display: flex; gap: 14px; margin-top: 14px; }
.city-clock {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--surface);
}
.city-clock-time { font: 500 22px "Fraunces", Georgia, serif; }
.city-clock-label { color: var(--muted); font-size: 12.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Highlights row: countdown, next milestone, next visit, progress ---- */
.stat-tiles { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.stat-tile {
  flex: 1;
  min-width: 150px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--surface);
}
.stat-tile-label { color: var(--muted); font-size: 12.5px; }
.stat-tile-value { font: 500 22px "Fraunces", Georgia, serif; margin-top: 2px; }
.stat-tile-caption { color: var(--muted); font-size: 12.5px; margin-top: 2px; line-height: 1.35; }
.stat-tile .progress-track { margin-top: 8px; }
.stat-tile-locked {
  border-style: dashed;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.stat-tile-locked .stat-tile-label { color: var(--muted); font-size: 14px; }
.stat-tile-locked:hover { border-color: var(--accent-dim); }
.countdown-tile { cursor: pointer; }
.stat-tile-remove {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 20px;
  height: 20px;
  line-height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  border-radius: 50%;
}
.stat-tile-remove:hover { color: var(--text); background: var(--surface-raised); }
.stat-tile-reorder-row { display: flex; gap: 4px; margin-top: 8px; }
.stat-tile-reorder {
  width: 24px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.stat-tile-reorder:hover:not(:disabled) { color: var(--text); border-color: var(--accent-dim); }
.stat-tile-reorder:disabled { opacity: 0.35; cursor: default; }

/* ---- Plan detail screen: the 3 feature cards (Savings/Simulator/Tasks) ---- */
.feature-card-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.feature-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  color: var(--text);
}
.feature-card:hover { background: var(--surface-raised); }
.feature-card-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--accent);
}
.feature-card.good .feature-card-icon { color: var(--good); }
.feature-card-body { flex: 1 1 auto; min-width: 0; }
.feature-card-title { font-size: 13px; color: var(--muted); }
.feature-card-value { font: 500 17px "Fraunces", Georgia, serif; margin-top: 2px; }
.feature-card-chevron { flex: 0 0 auto; color: var(--muted); opacity: 0.6; }

/* ---- Plan detail screen: delete action ---- */
.plan-delete-row { margin-top: 28px; text-align: center; }
.plan-delete-link {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  font-size: 13px;
  padding: 6px 8px;
}
.plan-delete-link:hover { color: var(--danger); border-color: transparent; }
.plan-delete-link:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- Tasks screen: remaining-count summary ---- */
.task-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 14px 0 22px;
}
.task-summary-stat { min-width: 64px; }
.task-summary-count { font: 500 26px "Fraunces", Georgia, serif; }
.task-summary-label { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* ---- Task rows: tap-to-cycle assignee chip ---- */
.assignee-chip {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.assignee-chip:hover { border-color: var(--accent-dim); }
.assignee-chip.partner1 { background: color-mix(in srgb, var(--accent) 22%, var(--surface-raised)); color: var(--accent); border-color: transparent; }
.assignee-chip.partner2 { background: color-mix(in srgb, var(--love) 22%, var(--surface-raised)); color: var(--love); border-color: transparent; }
.assignee-chip.both { background: color-mix(in srgb, var(--good) 22%, var(--surface-raised)); color: var(--good); border-color: transparent; }

/* ---- Savings screen: update row ---- */
.savings-update-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.savings-update-row > label { flex: 0 0 100%; margin: 0 0 6px; }
.savings-update-inputs { flex: 1 1 auto; display: flex; gap: 8px; min-width: 0; }
.savings-update-inputs input { flex: 1 1 60%; min-width: 0; }
.savings-update-inputs select { flex: 1 1 40%; min-width: 0; }

.couple-edit-details { margin-top: 14px; }

.error-box {
  background: #2a1c1c;
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 14px;
}

.top-nav {
  display: flex;
  justify-content: space-between;
  margin-bottom: 26px;
  font-size: 14px;
  color: var(--muted);
}

/* ---- Sharing controls in the plan edit screen ---- */

.share-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
}
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.checkbox-row input[type="checkbox"] {
  width: auto;
  accent-color: var(--accent);
}
.add-milestone-block { border-top: 1px solid var(--line); padding-top: 18px; }

/* ---------- Journey (Premium): printable timeline ---------- */

.journey-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.journey-header-title { display: flex; align-items: center; gap: 10px; }
.journey-header-title h1 { margin: 0; }

.journey-doc {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px 24px;
  margin-top: 20px;
}
.journey-doc-names { font-family: "Fraunces", serif; font-size: 30px; line-height: 1.2; text-align: center; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 14px; }
.journey-doc-title { text-align: center; margin: 6px 0 4px; }
.journey-doc-sub { text-align: center; color: var(--muted); margin-top: 0; }
/* The two of them, as the headline of the sheet: each photo takes its
   column (up to ~190px), the name large directly beneath it, and a big
   heart between. Without photos it is just the two names, large. */
.journey-doc-couple { --jn-name: clamp(24px, 7vw, 34px); display: flex; flex-direction: column; align-items: center; margin-bottom: 8px; }
.journey-doc-photos { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; max-width: 540px; }
.journey-doc-person { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.journey-doc-person > span { font: 500 var(--jn-name)/1.15 "Fraunces", Georgia, serif; text-align: center; overflow-wrap: anywhere; }
.journey-doc-photo { width: min(100%, 230px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; display: block; }
.journey-doc-photo-placeholder { background: var(--surface-raised); }
/* the heart sits level with the middle of the photos: lifted by the height of a name line */
.journey-doc-heart { display: inline-flex; color: var(--love); margin-bottom: calc(var(--jn-name) * 1.15 + 12px); }
.journey-doc-heart svg { width: var(--jn-heart, 44px); height: var(--jn-heart, 44px); }

.journey-timeline { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.journey-entry { display: flex; gap: 16px; }
.journey-entry-date { flex: 0 0 110px; font-size: 12px; color: var(--muted); padding-top: 2px; }
.journey-entry-body { flex: 1; border-left: 2px solid var(--line); padding-left: 14px; }
.journey-entry-title { font-size: 14.5px; font-weight: 600; }
.journey-entry-meta { font-weight: 400; color: var(--muted); }
.journey-photos { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.journey-photo { width: 140px; height: 140px; object-fit: cover; border-radius: 8px; border: 3px solid var(--surface-raised); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.journey-photo-locked { display: flex; align-items: center; justify-content: center; background: var(--bg); font-size: 32px; }

.journey-signatures { margin-top: 44px; border-top: 1px solid var(--line); padding-top: 24px; }
.journey-signature-row { display: flex; gap: 32px; margin-top: 28px; }
.journey-signature { flex: 1; }
.journey-signature-date { max-width: 200px; margin: 20px auto 0; }
.journey-signature-line { border-bottom: 1px solid var(--muted); height: 32px; }
.journey-signature-label { text-align: center; font-size: 12px; color: var(--muted); margin-top: 6px; }

/* Notes' drawings (see journeyDoodles in app.js): background-free images
   laid over the sheet's side edges, behind the text, free to overlap it —
   the timeline's own layout doesn't make room for them. No border, no box.
   The sheet clips them so a tilted one never spills past its edge. */
.journey-doc { overflow: hidden; }
.journey-doc > *:not(.journey-doodle) { position: relative; z-index: 1; }
.journey-doodle {
  position: absolute;
  z-index: 0;
  width: 84px;
  aspect-ratio: 5 / 7;
  object-fit: contain;
  pointer-events: none;
}
.journey-doodle-left { left: 4px; }
.journey-doodle-right { right: 4px; }
@media print {
  .journey-doodle { width: 150px; }
  .journey-doodle-left { left: 20px; }
  .journey-doodle-right { right: 20px; }
}

/* Printing renders only the Journey document itself: app chrome (tabs,
   header, buttons, hints) is hidden via .no-print. Deliberately keeps the
   same dark theme as the screen here (no color overrides) rather than
   flipping to black-on-white paper — this is meant to be saved or shared
   as a PDF that looks like the rest of the app, not a letter run off on
   an inkjet. print-color-adjust (plus the older -webkit- form, for
   Safari) is what actually makes that stick: without it, most browsers
   quietly drop background colors when printing/exporting unless the
   person happens to have "background graphics" checked in their print
   dialog, which defeats the point of matching the theme. */
/* No page margin: the sheet itself is the whole page, so the theme colour
   runs edge to edge instead of leaving a white border around it. */
@page { margin: 0; }
@media print {
  body * { visibility: hidden; }
  .journey-doc, .journey-doc * { visibility: visible; }
  .no-print { display: none !important; }
  html, body, .journey-doc {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  html, body { background: var(--bg); margin: 0; }
  .journey-doc {
    position: absolute;
    inset: 0;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 48px 56px;
  }
  .journey-doc-couple { --jn-name: 36px; --jn-heart: 56px; }
}

/* Feedback widget: a floating toggle in the bottom-right corner, present
   on every page (see mount() in app.js). Fixed positioning + a high
   z-index so it always floats above page content, including the fixed
   date-picker popups and other overlays this app already uses. */
/* Staging/dev environment badge (see environmentBadge() in app.js) — a
   small, easy-to-ignore-when-you-mean-to but hard-to-miss-by-accident
   corner tag, so a non-production deploy never gets mistaken for the
   real thing. pointer-events: none keeps it from ever intercepting a
   click meant for whatever's underneath it. */
.env-badge {
  position: fixed;
  left: 12px;
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  z-index: 500;
  background: var(--accent);
  color: #1a1608;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0.9;
}

.feedback-widget { position: fixed; right: 20px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 500; }
.feedback-toggle {
  width: 48px;
  height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--accent, #e3a44c);
  color: #12141c;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.feedback-panel {
  position: absolute;
  right: 0;
  bottom: 60px;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  flex-direction: column;
  gap: 8px;
}
.feedback-panel-head { display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
.feedback-close { border: none; background: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0 4px; }
.feedback-textarea, .feedback-email {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
  resize: vertical;
}
.feedback-status { min-height: 16px; }

@media (max-width: 480px) {
  .feedback-panel { width: calc(100vw - 40px); }
}

/* ---- Handoff screen (right after dashboard + first plan are created,
   before heading into the Plan wizard — see mountHandoff/viewHandoff) ---- */
.handoff-page { text-align: center; padding: 10vh 0 28px; }
.handoff-icon { font-size: 40px; margin-bottom: 18px; }
.handoff-page .hint { max-width: 320px; margin: 10px auto 32px; line-height: 1.6; }
.handoff-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.handoff-actions .primary { width: 100%; max-width: 280px; padding: 14px; font-size: 15.5px; }

/* ---- Plan wizard (5-step guided setup — see viewPlanWizard) ---- */
.wizard-progress { display: flex; gap: 6px; margin: 14px 0 18px; }
.wizard-top { display: flex; align-items: center; gap: 12px; }
.wizard-top .wizard-progress { flex: 1; }
.wizard-dot { width: 22px; height: 4px; border-radius: 2px; background: var(--surface-raised); transition: background-color 200ms ease; }
.wizard-dot.active { background: var(--accent); }
.wizard-dot.done { background: var(--accent-dim); }

/* .wizard-chip-grid holds full-width .option-row buttons (destination /
   reason steps) — individual rows, no enclosing frame of any kind. Each
   row is told apart from the page only by its own fill color, same as
   every other grouping in this redesign (no stroked borders anywhere). */
.wizard-chip-grid { display: flex; flex-direction: column; gap: 8px; }
.wizard-chip {
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  border-radius: 999px;
  border: none;
  background: var(--surface-raised);
  color: var(--text);
  padding: 9px 16px;
}
.wizard-chip.selected { background: var(--accent); color: #1a1408; font-weight: 600; }
.wizard-chip.small { padding: 6px 12px; font-size: 13px; }

/* Selectable list row (destination / reason steps) — an interactive,
   full-width take on the landing page's icon+label+note pattern
   (.landing-feature-icon above). No border, no checkbox accessory — purely
   a fill-color change on selection (surface -> accent), matched to the
   reference mockup's own minimal treatment. */
button.option-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--surface);
  transition: background-color 150ms ease;
}
button.option-row:hover { background: var(--surface-raised); }
button.option-row.selected { background: var(--accent); }
.option-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: background-color 150ms ease, color 150ms ease;
}
button.option-row.selected .option-icon { background: rgba(26, 20, 8, 0.16); color: #1a1408; }
.option-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.option-title { font-size: 15px; font-weight: 600; color: var(--text); }
.option-subtitle { font-size: 13px; color: var(--muted); line-height: 1.4; }
button.option-row.selected .option-title { color: #1a1408; }
button.option-row.selected .option-subtitle { color: rgba(26, 20, 8, 0.65); }

/* Shared "pick one of a few" control for every in-context toggle — Yes/No,
   Monthly/Yearly, and the two saving-pace modes below (here and on the
   Compare page's own simulator) — one visual grammar for this interaction
   instead of three separate button treatments. Scoped under the existing
   wrapper classes (.wizard-yesno, .wizard-cost-interval, .wizard-sim-toggle),
   which also carry this "segmented" class. */
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface);
}
.segmented button {
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 7px 14px;
  font-size: 13.5px;
  font-weight: 400;
  transition: background-color 150ms ease, color 150ms ease;
}
.segmented button:hover { color: var(--text); border-color: transparent; }
.segmented button.primary,
.segmented button.selected {
  background: var(--accent);
  color: #1a1408;
  font-weight: 600;
}

.wizard-new-city { margin-top: 14px; }

/* A footnote-weight caveat, not a warning — collapsed to one line by
   default (same <details>/<summary> disclosure as "More details" on the
   Compare page), so the long legal-nuance paragraph only takes up room
   once someone actually wants it. */
.wizard-disclaimer { margin-top: 16px; font-size: 13px; color: var(--muted); }
.wizard-disclaimer summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}
.wizard-disclaimer summary::-webkit-details-marker { display: none; }
.wizard-disclaimer summary:hover { color: var(--text); }
.wizard-disclaimer-icon {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wizard-disclaimer-text { flex: 1; }
.wizard-disclaimer-body { margin: 8px 0 0 32px; line-height: 1.6; }
.wizard-disclaimer strong { color: var(--text); font-weight: 600; }

/* Shared open/closed indicator for every tap-to-expand disclosure in the
   Plan feature (this disclaimer, and the two on the Compare page below) —
   one consistent affordance instead of each disclosure hinting at its own
   expandability (or not) in its own words. */
.disclosure-chevron { flex: none; display: flex; color: var(--muted); transition: transform 150ms ease; }
details[open] > summary .disclosure-chevron { transform: rotate(90deg); }
.wizard-subquestion { margin-top: 16px; }
.wizard-subquestion label { margin: 0 0 8px; }
.wizard-yesno { }

.wizard-cost-section-title { margin: 20px 0 8px; font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.wizard-cost-section-title:first-child { margin-top: 0; }
.wizard-cost-list { display: flex; flex-direction: column; gap: 8px; }
.wizard-cost-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--surface);
}
.wizard-cost-row-main { display: flex; align-items: center; gap: 8px; }
.wizard-cost-row input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--accent); }
.wizard-cost-label { flex: 1; min-width: 0; font-size: 13.5px; }
.wizard-cost-amount { width: 112px; flex-shrink: 0; }
.wizard-cost-currency { width: 74px; flex-shrink: 0; }
.wizard-cost-interval { flex-shrink: 0; }

.wizard-balance { margin-top: 10px; font: 500 28px "Fraunces", Georgia, serif; }
.wizard-balance.good { color: var(--good); }
.wizard-balance.bad { color: var(--danger); }

.wizard-sim-toggle { margin-top: 18px; }
.wizard-sim-result-wrap { min-height: 20px; margin-top: 10px; }
.wizard-sim-result { font-size: 14px; color: var(--accent); font-weight: 600; }

/* ---- "The numbers": a plan's own cost/timeline breakdown (plan detail
   screen — see planNumbersDetail). No outer frame here either — same
   principle as the wizard steps above: the tiles, progress bar and
   feasibility banner each carry their own fill. ---- */
.balance-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 999px;
  padding: 2px 10px;
}
.stat-tile-value.balance-good { color: var(--good); }
.stat-tile-value.balance-bad { color: var(--danger); }

/* Fill-only, like every other grouping in the Plan feature — a status tint
   on the background does the job a colored left-border used to, without
   being the one bordered element left in an otherwise frame-free screen. */
.balance-feasibility {
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.balance-feasibility-icon { flex: none; line-height: 1.5; display: flex; align-items: center; }
.balance-feasibility.good { background: color-mix(in srgb, var(--good) 14%, var(--surface)); }
.balance-feasibility.good .balance-feasibility-icon { color: var(--good); }
.balance-feasibility.warn { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.balance-feasibility.warn .balance-feasibility-icon { color: var(--accent); }
.balance-feasibility.bad { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); }
.balance-feasibility.bad .balance-feasibility-icon { color: var(--danger); }

.plan-numbers-block details { margin-top: 14px; }
.plan-numbers-block summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.plan-numbers-block summary::-webkit-details-marker { display: none; }
.plan-numbers-block summary:hover { color: var(--text); }
.balance-sim-details > div { margin-top: 10px; }

.balance-card-details { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.balance-detail-row { color: var(--text); }
.balance-detail-row strong { color: var(--muted); font-weight: 500; }
.balance-add-attr { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.balance-add-attr input { flex: 1; min-width: 120px; }

/* ---- Economy ---- */
.econ-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 4px; }
.econ-head h1 { margin: 0; }
.econ-head .econ-currency { width: auto; flex-shrink: 0; }

/* The answer comes first: one big signed number, one line under it. */
.econ-hero { margin: 8px 0 18px; display: flex; flex-direction: column; gap: 4px; }
.econ-hero-num { font: 500 40px/1.1 "Fraunces", Georgia, serif; }
.econ-hero-num.good, .econ-hero-line.good { color: var(--good); }
.econ-hero-num.bad, .econ-hero-line.bad { color: var(--danger); }
.econ-hero-unit { font: 400 16px "Inter", system-ui, sans-serif; color: var(--muted); }
.econ-hero-sub { color: var(--muted); font-size: 13px; }
.econ-hero-line { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; margin-top: 10px; }
.econ-chart { width: 100%; height: 96px; margin-top: 14px; display: block; }
.econ-chart-area { fill: var(--plan-color, var(--accent)); opacity: 0.14; }
.econ-chart-line { stroke: var(--plan-color, var(--accent)); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.econ-chart-line.est, .econ-chart-ghost.est { stroke-dasharray: 5 4; stroke-linecap: butt; }
.econ-chart-zero, .econ-chart-move { stroke: var(--muted); stroke-width: 1; opacity: 0.5; vector-effect: non-scaling-stroke; }
.econ-chart-move { stroke-dasharray: 3 3; }
.econ-dot.good { fill: var(--good); }
.econ-dot.bad { fill: var(--danger); }
.econ-saved { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 8px 12px; border: none; border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; cursor: pointer; }
.econ-saved:active { background: var(--surface-raised); }

.econ-seg { display: flex; margin: 4px 0 14px; }
/* A two-way choice: the chosen side is the lighter fill. */
.econ-seg .wizard-chip { flex: 1; justify-content: center; }

.econ-section { margin-top: 18px; }
.econ-section-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.econ-section-sum { font-weight: 500; }
.econ-lines { display: flex; flex-direction: column; gap: 2px; border-radius: var(--radius); overflow: hidden; }
.econ-line { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border: none; border-radius: 0; background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.econ-line:active { background: var(--surface-raised); }
.econ-chip { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-raised); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; color: var(--muted); }
.econ-line-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.econ-line-label { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.econ-line-cap { font-size: 12px; color: var(--muted); }
.econ-line-amount { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.econ-add-line .econ-line-label { color: var(--muted); }

/* Edit sheet */
.sheet-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(0, 0, 0, 0.5); display: flex; align-items: flex-end; justify-content: center; animation: sheet-fade 0.15s ease; }
.sheet { width: 100%; max-width: 600px; max-height: 88vh; overflow-y: auto; background: var(--surface-raised); border-radius: 20px 20px 0 0; padding: 8px 20px calc(20px + env(safe-area-inset-bottom, 0px)); animation: sheet-up 0.2s ease; }
.sheet-grabber { touch-action: none; width: 36px; height: 4px; border-radius: 2px; background: var(--muted); opacity: 0.4; margin: 4px auto 14px; }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-overlay { animation: none; } }
.econ-sheet { display: flex; flex-direction: column; gap: 12px; }
.econ-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.econ-cat { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: none; border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; cursor: pointer; }
.econ-cat.selected { background: var(--accent); color: #1a1608; }
.econ-sheet-money { display: flex; gap: 8px; }
.econ-sheet-amount { flex: 1; min-width: 0; font-size: 22px; }
.econ-sheet-cur { width: 88px; flex-shrink: 0; }
/* A bank statement brought in: a quiet icon + label under the amount; once read, beside it,
   how much that is a month and the day of its last row. */
.statement-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 32px; }
/* Payday: the same quiet pill, the day picked in place. */
.payday-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 0 4px 0 12px; height: 32px; border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; cursor: pointer; }
.econ-sheet .payday-chip { background: var(--bg); }
.payday-select { appearance: none; -webkit-appearance: none; border: none; background: transparent; color: var(--accent); font: inherit; font-weight: 600; padding: 0 8px 0 0; min-width: 0; width: auto; height: auto; cursor: pointer; }
.payday-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.statement-btn { height: 32px; }
.statement-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: none; border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; cursor: pointer; }
.econ-sheet .statement-btn { background: var(--bg); }
.statement-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.statement-out { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--good); font-size: 13px; }
.statement-out .statement-pace { color: var(--text); font-weight: 600; }
.statement-out .statement-pace.bad { color: var(--danger); }
.statement-out .statement-day { color: var(--muted); }
.statement-out.bad { color: var(--danger); }
.setup-person .statement-row { margin-top: 8px; }
.econ-start label { display: block; margin-bottom: 4px; }
.econ-sheet-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; }
.econ-sheet-actions .primary { margin-left: auto; min-width: 120px; }
.danger-text { color: var(--danger); }

/* A section title with its actions on the right (Special days). */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head-actions { display: flex; gap: 6px; }

/* Date picker: tap the month/year to jump by year */
button.date-popup-title { border: none; background: transparent; color: var(--text); padding: 6px 10px; border-radius: 999px; cursor: pointer; font-family: inherit; }
button.date-popup-title:hover { background: var(--surface-raised); }
.date-popup-title.static { padding: 6px 10px; }
.date-year-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px 0 8px; }
.date-year { border: none; background: transparent; color: var(--text); padding: 12px 0; border-radius: 10px; font: inherit; font-size: 14px; cursor: pointer; }
.date-year:hover { background: var(--surface-raised); }
.date-year.today { color: var(--accent); }
.date-year.selected { background: var(--accent); color: #1a1608; }

/* Meet ups: Remove only while editing */

/* Economy by month */
.econ-stepper { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 12px; }
.econ-step-btn { width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--surface); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.econ-step-btn:disabled { opacity: 0.3; cursor: default; }
.econ-step-btn:not(:disabled):active { background: var(--surface-raised); }
.econ-step-label { font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.econ-move-pill { font-size: 14px; background: var(--surface); border-radius: 999px; padding: 2px 8px; }

.econ-people { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.econ-person { background: var(--surface); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.econ-person.wide { grid-column: 1 / -1; }
.econ-person-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.econ-person-name { font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.econ-avatar { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #1a1608; flex-shrink: 0; }
.econ-avatar.partner1, .econ-avatar.both { background: var(--accent); }
.econ-avatar.partner2 { background: var(--love); }
.econ-person-net { font: 500 24px/1.15 "Fraunces", Georgia, serif; font-variant-numeric: tabular-nums; }
.econ-person-net.good { color: var(--good); }
.econ-person-net.bad { color: var(--danger); }
.econ-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--good) 38%, var(--surface-raised)); overflow: hidden; }
.econ-bar-fill { height: 100%; background: var(--muted); border-radius: 4px; }
.econ-bar-fill.bad { background: var(--danger); }
.econ-person-flow { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.econ-person-flow .out { color: var(--danger); }
.econ-person-flow .in { color: var(--good); }
.econ-person-flow .in.est { opacity: 0.75; }

.econ-chart-wrap { margin-top: 14px; touch-action: pan-y; }
/* The other plans' lines: thinner than this plan's own, each in its own colour. */
.econ-chart-ghost { stroke-width: 1.5; opacity: 0.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.econ-chart-ghost-dot { opacity: 0.9; }
/* One chip per line under the chart: its colour, the destination, its balance in the month shown. */
.econ-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.econ-legend-item { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 6px 11px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; line-height: 16px; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.econ-legend-item.me { background: var(--surface-raised); color: var(--text); }
button.econ-legend-item { border: none; font: inherit; font-size: 12px; line-height: 16px; cursor: pointer; }
button.econ-legend-item:active { background: var(--surface-raised); }
.econ-legend-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.econ-legend-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.econ-legend-amt { flex: none; color: var(--text); font-variant-numeric: tabular-nums; }
.econ-chart { cursor: ew-resize; touch-action: pan-y; }
.econ-chart-cursor { stroke: var(--text); stroke-width: 1; opacity: 0.55; vector-effect: non-scaling-stroke; }
.econ-chart-dot { fill: var(--text); }
.econ-cover { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.econ-cover .econ-hero-line { margin-top: 0; }
.econ-cover .econ-saved { margin-top: 0; align-self: auto; }
.econ-person-net.zero { color: var(--muted); }
.econ-avatar.both { background: var(--surface-raised); font-size: 13px; }

/* Economy: total, tappable cards, detail */
.econ-total { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 16px; }
.econ-total-net { font: 500 44px/1.1 "Fraunces", Georgia, serif; font-variant-numeric: tabular-nums; }
.econ-total-net.good { color: var(--good); }
.econ-total-net.bad { color: var(--danger); }
.econ-total-net.zero { color: var(--muted); }

/* The balance at the end of the month: neutral (it is a balance, not a gain), red below zero. */
.econ-balance { display: inline-flex; align-items: center; align-self: flex-start; color: var(--text); font: 500 44px/1.1 "Fraunces", Georgia, serif; font-variant-numeric: tabular-nums; }
.econ-balance.bad { color: var(--danger); }
.econ-line.static { cursor: default; }
.econ-line.static:active { background: var(--surface); }
.econ-line.static.est .econ-line-amount { opacity: 0.75; }

/* The month's statement */
button.econ-person { border: none; text-align: left; font: inherit; color: var(--text); cursor: pointer; width: 100%; -webkit-tap-highlight-color: transparent; }
button.econ-person:active { background: var(--surface-raised); }
.econ-person-chev { margin-left: auto; color: var(--muted); display: inline-flex; }
.econ-person-head .econ-person-name { flex: 1; }
.econ-detail-head { display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; }
.econ-detail-head h2 { margin: 0; font-size: 22px; }
.econ-detail-month { color: var(--muted); font-size: 13px; margin: 0 0 6px 4px; }
.econ-line-cap.good { color: var(--good); }
.econ-line-cap.bad { color: var(--danger); }
.econ-line-cap svg { vertical-align: -2px; margin-right: 4px; }
.econ-custom { display: flex; align-items: center; gap: 8px; }
.econ-custom-n { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; font-size: 16px; }
.stepper { display: inline-flex; align-items: center; gap: 4px; padding: 2px; border-radius: 10px; background: var(--surface); }
.stepper-btn { width: 36px; height: 36px; border: none; border-radius: 8px; background: transparent; color: var(--text); font-size: 20px; cursor: pointer; }
.stepper-btn:active { background: var(--bg); }
.econ-custom-unit { flex: 1; }

/* Person icons */
.avatar { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #1a1608; flex-shrink: 0; object-fit: cover; }
.avatar.partner1 { background: var(--accent); }
.avatar.partner2 { background: var(--love); }
.plan-moves { margin: 14px 0 6px; }
.plan-move-cap { display: inline-flex; align-items: center; gap: 4px; }
a.econ-line { text-decoration: none; }

/* Who are you */
.top-bar-row { display: flex; align-items: center; justify-content: space-between; }
.me-btn { border: none; background: transparent; padding: 0; cursor: pointer; display: inline-flex; border-radius: 50%; }
.me-btn:active { opacity: 0.7; }
.me-btn.unknown { width: 30px; height: 30px; align-items: center; justify-content: center; background: var(--surface-raised); color: var(--muted); }
.identity-picker h3 { margin: 4px 0 18px; text-align: center; font-size: 17px; }
.identity-choices { display: flex; gap: 12px; }
.identity-choice { flex: 1; border: none; background: var(--surface); color: var(--text); border-radius: 16px; padding: 20px 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; font: inherit; font-size: 15px; cursor: pointer; }
.identity-choice:active { background: var(--bg); }
.identity-settings { width: 100%; margin-top: 12px; border: none; background: var(--surface); color: var(--text); border-radius: 14px; padding: 13px 16px; display: flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 15px; cursor: pointer; }
.identity-settings:active { background: var(--bg); }
.identity-logout { width: 100%; margin-top: 8px; border: none; background: none; color: var(--danger); border-radius: 14px; padding: 13px 16px; display: flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 15px; cursor: pointer; }
.identity-logout:active { background: var(--surface); }
/* Settings: one row per choice — what it is on the left, the choice on the right. */
.settings-sheet h3 { margin: 4px 0 12px; text-align: center; font-size: 17px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.settings-label { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; min-width: 0; }
.settings-label svg { color: var(--muted); flex: none; }
.settings-row .econ-seg { margin: 0; flex: none; width: 184px; }
.settings-row .econ-seg .wizard-chip { white-space: nowrap; padding-left: 8px; padding-right: 8px; }
.settings-row .econ-currency { width: 184px; flex: none; }
.settings-value { flex: none; display: inline-flex; align-items: center; gap: 4px; border: none; background: none; color: var(--muted); font: inherit; font-size: 15px; padding: 8px 0 8px 12px; cursor: pointer; }
.settings-value:active { opacity: 0.6; }

/* Password: the sheet that sets it, and the screen that asks for it. Fill only, no frames. */
.pw-sheet { display: flex; flex-direction: column; gap: 14px; padding-bottom: 4px; }
.pw-form { display: flex; flex-direction: column; gap: 10px; }
.pw-form input { width: 100%; }
.pw-form button { margin-top: 4px; }
.pw-note { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.pw-note svg { flex: none; margin-top: 1px; color: var(--accent); }
.pw-items { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; gap: 1px; background: var(--surface-raised); }
.pw-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; border: none; border-radius: 0; background: var(--surface); color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.pw-item:active { background: var(--bg); }
.pw-item svg { color: var(--muted); flex: none; }
.pw-item.danger-text, .pw-item.danger-text svg { color: var(--danger); }
.pw-gate-error { min-height: 1.2em; margin: 0; font-size: 13px; color: var(--danger); text-align: center; }
.pw-gate { position: fixed; inset: 0; z-index: 1200; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: env(safe-area-inset-top, 0px) 16px env(safe-area-inset-bottom, 0px); }
.pw-gate-brand { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); left: 16px; }
.pw-gate-card { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pw-gate-card h2 { margin: 0 0 6px; font-size: 22px; }
.pw-gate-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--surface); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.pw-gate-form { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.pw-gate-input { width: 100%; text-align: center; font-size: 17px; }
.pw-gate-btn { width: 100%; }
body.pw-locked { overflow: hidden; }
.shake { animation: pw-shake 0.4s ease; }
@keyframes pw-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } }
/* A row that goes somewhere (App lock on a free dashboard, Change PIN): the whole row is the button. */
.settings-link { width: 100%; border: none; background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.settings-link:active { opacity: 0.6; }
.settings-chevron { color: var(--muted); display: inline-flex; }

/* App lock: the phone's own passcode screen — the mark, four dots, a round pad. While locked,
   nothing else on the page is shown (sheets, banners and the drawing layer included). */
html.app-locked body > *:not(.app-lock):not(.pin-screen):not(.app-lock-dialog) { visibility: hidden !important; }
html.app-locked body { overflow: hidden; }
.app-lock, .pin-setup { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: var(--bg); color: var(--text); padding: calc(24px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.app-lock { z-index: 2147483000; }
.pin-setup { z-index: 2147482000; }
.app-lock-dialog { z-index: 2147483500; }
.pin-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--muted); }
.pin-entry { display: flex; flex-direction: column; align-items: center; }
.pin-title { font-size: 18px; font-weight: 500; }
.pin-dots { display: flex; gap: 20px; margin: 18px 0 10px; }
.pin-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--surface-raised); transition: background 0.1s; }
.pin-dot.on { background: var(--text); }
.pin-dots.shake { animation: pin-shake 0.36s ease; }
@keyframes pin-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .pin-dots.shake { animation: none; } }
.pin-note { min-height: 20px; margin-bottom: 18px; font-size: 14px; color: var(--danger); font-variant-numeric: tabular-nums; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 16px 24px; justify-items: center; align-items: center; }
.pin-key { width: 76px; height: 76px; border-radius: 50%; border: none; background: var(--surface); color: var(--text); font: inherit; font-size: 30px; font-weight: 400; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.12s; }
.pin-key:active { background: var(--surface-raised); }
.pin-key:disabled { opacity: 0.35; cursor: default; }
.pin-del { background: none; color: var(--text); }
.pin-del:active { background: none; opacity: 0.6; }
.pin-text { border: none; background: none; color: var(--text); font: inherit; font-size: 14px; padding: 8px 0; cursor: pointer; white-space: nowrap; }
.pin-text:active { opacity: 0.6; }
@media (max-height: 640px) { .pin-key { width: 64px; height: 64px; font-size: 26px; } .pin-pad { grid-template-columns: repeat(3, 64px); gap: 12px 22px; } .app-lock, .pin-setup { gap: 16px; } }

/* Save goals */
.econ-line.empty .econ-line-label, .econ-line.empty .econ-line-amount { color: var(--muted); }
.goal-line .econ-line-text { gap: 6px; }
.goal-bar { height: 5px; border-radius: 3px; background: var(--surface-raised); overflow: hidden; }
.goal-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; }
.goal-amount { font-size: 13px; color: var(--muted); }
.goal-status { display: inline-flex; margin-left: 6px; vertical-align: -2px; }
.goal-status.good { color: var(--good); }
.goal-status.bad { color: var(--danger); }
.goal-big { display: flex; flex-wrap: wrap; align-items: baseline; margin: 10px 0 12px; }
.goal-big-saved, .goal-big-target { font: 500 38px/1.1 "Fraunces", Georgia, serif; font-variant-numeric: tabular-nums; border: none; background: transparent; padding: 0; color: var(--text); cursor: pointer; }
.goal-big-target { color: var(--muted); cursor: default; }
button.goal-big-target { cursor: pointer; }
a.goal-big-saved { text-decoration: none; }
.goal-big-saved:active, button.goal-big-target:active { opacity: 0.6; }
.goal-big-label { flex-basis: 100%; color: var(--muted); font-size: 13px; margin-top: 4px; }
.goal-eta { display: flex; align-items: center; gap: 6px; margin: 12px 4px 4px; font-size: 14px; color: var(--muted); min-height: 20px; }
.goal-eta.good { color: var(--good); }
.goal-eta.bad { color: var(--danger); }
.goal-pledges { display: flex; flex-direction: column; gap: 2px; border-radius: var(--radius); overflow: hidden; }
.goal-pledge { display: flex; align-items: center; gap: 10px; background: var(--surface); padding: 10px 14px; }
.goal-pledge-name { font-size: 14.5px; }
.goal-pledge-hint { flex: 1; font-size: 12px; color: var(--muted); text-align: right; }
.goal-pledge-input { width: 92px; flex-shrink: 0; text-align: right; }
.goal-pledge .econ-seg { margin: 0; flex-shrink: 0; }
.goal-pledge .econ-seg .wizard-chip { padding-left: 12px; padding-right: 12px; min-width: 38px; }
.seg-who { display: inline-flex; align-items: center; gap: 6px; }

/* Home: Economy card */
.home-econ { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; padding: 16px; border-radius: 16px; background: var(--surface); color: var(--text); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.home-econ:active { background: var(--surface-raised); }
.home-econ-head { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; }
.home-econ-title { color: var(--text); font-weight: 500; }
.home-econ-chev { margin-left: auto; display: inline-flex; }
.home-econ-net { font: 500 30px/1.1 "Fraunces", Georgia, serif; font-variant-numeric: tabular-nums; }
.home-econ-net.good { color: var(--good); }
.home-econ-net.bad { color: var(--danger); }
.home-econ-net.zero { color: var(--muted); }
.home-econ-goal { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.home-econ-goal .goal-bar { flex: 1; }
.home-econ-goal-amt { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.goal-big-target { margin-left: 6px; }

/* Dream home */
.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.home-card { display: flex; flex-direction: column; text-align: left; padding: 0; border: 0; border-radius: 16px; background: var(--surface); overflow: hidden; color: var(--text); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.home-card:active { background: var(--surface-raised); }
.home-img { aspect-ratio: 4 / 3; background: var(--surface-raised); display: flex; align-items: center; justify-content: center; color: var(--muted); overflow: hidden; }
.home-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-img.big { aspect-ratio: 16 / 10; width: 100%; border-radius: 14px; }
.home-img.chip { aspect-ratio: 4 / 3; border-radius: 10px; }
.home-img.chip svg { width: 20px; height: 20px; }
.home-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-card-name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-card-rent { font: 500 18px/1.2 "Fraunces", Georgia, serif; font-variant-numeric: tabular-nums; }
.home-card-rent.empty { color: var(--muted); }
.home-card-per { font: 400 12px/1 var(--font, system-ui, sans-serif); color: var(--muted); }
.home-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; margin-top: 16px; padding: 44px 16px; border: 0; border-radius: 16px; background: var(--surface); color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; }
.home-count { font-size: 13px; color: var(--muted); }
.home-try { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; font-size: 14px; }
.home-try span { flex: 1; }
.home-sheet-photo { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.home-sheet-cam { position: absolute; right: 10px; bottom: 10px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; display: flex; align-items: center; justify-content: center; }
.home-per { align-self: center; color: var(--muted); font-size: 13px; }
.home-open { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; color: var(--muted); font-size: 13.5px; text-decoration: none; }
.home-url { width: 100%; }
.home-rent-input { font-size: 20px; }
/* Economy: pick a home to try */
.econ-section-link { color: var(--muted); display: inline-flex; }
.home-pick { display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; }
.home-pick::-webkit-scrollbar { display: none; }
.home-chip { flex: 0 0 auto; width: 88px; display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 0; border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.home-chip.selected { background: var(--accent); color: #1a1408; }
.home-chip-rent { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 0 2px 2px; }
.home-line-chip { width: 44px; height: 34px; padding: 0; overflow: hidden; border-radius: 8px; }
.home-line-chip .home-img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }


/* ---- Drawing mode ----
   One full-screen canvas over the page, always showing the strokes; it only
   catches the finger while drawing mode is on. Fill, not borders. */
.draw-canvas { position: fixed; inset: 0; z-index: 15; pointer-events: none; touch-action: none; }
body.drawing-mode .draw-canvas { cursor: crosshair; }
body.drawing-mode .dash-tabs,
body.drawing-mode .feedback-widget, body.popup-open .feedback-widget { display: none; }
.top-bar-end { display: inline-flex; align-items: center; gap: 6px; }
.pen-btn { border: none; background: transparent; color: var(--muted); padding: 4px; border-radius: 50%; display: inline-flex; cursor: pointer; }
.pen-btn:hover { color: var(--text); }
.pen-btn.active { color: var(--bg); background: var(--accent); }
.top-icon-btn { border: none; background: transparent; color: var(--muted); padding: 4px; border-radius: 50%; display: inline-flex; cursor: pointer; }
.top-icon-btn:hover { color: var(--text); }
.draw-toolbar {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: var(--surface-raised);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  max-width: calc(100vw - 24px);
}
.draw-toolbar[hidden] { display: none; }
.draw-tool { border: none; background: transparent; color: var(--text); width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.draw-tool:active { background: var(--surface); }
.draw-tool:disabled { opacity: 0.3; cursor: default; }
.draw-tool.on { background: var(--accent); color: var(--bg); }
.draw-sep { width: 8px; }
.draw-sw { width: 26px; height: 26px; border-radius: 50%; border: none; padding: 0; margin: 0 3px; cursor: pointer; background: var(--text); box-shadow: 0 0 0 0 var(--surface-raised); }
.draw-sw.sw-accent { background: var(--accent); }
.draw-sw.sw-love { background: var(--love); }
.draw-sw.sw-blue { background: #6fa8ff; }
.draw-sw.selected { box-shadow: 0 0 0 3px var(--surface-raised), 0 0 0 5px var(--text); }
.draw-done { border: none; background: var(--accent); color: var(--bg); font: inherit; font-weight: 600; font-size: 14px; border-radius: 999px; padding: 0 16px; height: 40px; margin-left: 6px; cursor: pointer; }
.draw-banners {
  position: fixed;
  left: 50%;
  top: calc(10px + env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  z-index: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 24px);
  pointer-events: none;
}
.draw-banner, .draw-together {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 12px;
  background: var(--surface-raised);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  max-width: 100%;
  font-size: 14px;
}
.draw-banner[hidden], .draw-together[hidden] { display: none; }
.draw-together-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draw-together-leave { border: none; background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: 13px; border-radius: 999px; padding: 0 14px; height: 30px; cursor: pointer; }
.draw-together-leave:active { background: var(--bg); }
.draw-mates { position: absolute; right: 14px; bottom: calc(100% + 8px); display: flex; align-items: center; gap: 4px; padding: 4px; background: var(--surface-raised); border-radius: 999px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
.draw-mates[hidden] { display: none; }
.draw-banner-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draw-banner-join { border: none; background: var(--accent); color: var(--bg); font: inherit; font-weight: 600; font-size: 13px; border-radius: 999px; padding: 0 14px; height: 30px; cursor: pointer; }
@media print { .draw-canvas, .draw-toolbar, .draw-banners, .pen-slot { display: none !important; } }


/* ---- Fill, not borders ----
   One place that takes the frame off everything that used to have one:
   what separates a tile, a field or a button from the page is its fill.
   (Layout is unchanged — the border is only made invisible.) */
button, input, textarea, select, .card, .note-card, .stat-tile, .city-clock, .plan-column, .flight-teaser, .task, .anniversary-row,
.meet-item, .message-card-form, .date-field-trigger, .date-popup, .city-select input, .city-popup, .locked-plan, .plan-card-locked,
.assignee-chip, .pricing-card, .pricing-consent, .checkout-notice, .feedback-toggle, .feedback-panel, .feedback-textarea,
.feedback-email, .wizard-back-btn, .stat-tile-reorder, button.danger {
  border-color: transparent;
}
button:hover, button.ghost:hover, .note-card:hover, .stat-tile-locked:hover, .wizard-back-btn:hover { border-color: transparent; }
button:hover { filter: brightness(1.12); }
button.ghost:hover, button.primary:hover { filter: none; }
input, textarea, select, .date-field-trigger, .city-select input, .feedback-textarea, .feedback-email { background-color: var(--surface-raised); }
.card input, .card textarea, .card select, .card .date-field-trigger { background-color: var(--surface-raised); }
.wizard-back-btn { background: var(--surface); }

/* The feedback button: a small quiet circle, out of the way of the page's own
   buttons — and gone altogether while stepping through the wizard. */
.feedback-toggle { width: 40px; height: 40px; background: var(--surface-raised); color: var(--muted); box-shadow: none; }
.feedback-toggle:hover { color: var(--text); }
.wizard-page ~ .feedback-widget { display: none; }
.home-econ-goal-icon { display: inline-flex; color: var(--muted); }

/* The "Premium" sheet for drawing: a mark, a name, one button. */
.sheet .locked-plan.lock-sheet { margin: 0; padding: 8px 0 12px; border: none; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text); }
.lock-sheet-icon { display: inline-flex; color: var(--accent); }
.lock-sheet h3 { margin: 0 0 10px; font: 500 22px "Fraunces", Georgia, serif; }
.lock-sheet-btn { display: block; width: 100%; text-align: center; text-decoration: none; background: var(--accent); color: #1a1408; font-weight: 600; border-radius: 10px; padding: 13px 18px; }

/* Small icon-plus-word buttons (Draw, Photo) and the heart in the Together tile. */
button.icon-label { display: inline-flex; align-items: center; gap: 6px; }
.stat-tile-label.with-icon { display: flex; align-items: center; gap: 6px; }
.tile-heart { display: inline-flex; color: var(--love); }

/* Economy: the "All months | Oct 2026" tab at the top of an item's sheet, the
   month-only mark on a line, and the icon-only goal picker. */
.econ-sheet-scope .econ-seg { margin: 0; }
.econ-sheet-cur-static { display: inline-flex; align-items: center; padding: 0 14px; border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 14px; }
.econ-line-cap-month { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); }
.econ-line-cap-month svg { margin: 0; vertical-align: 0; }
.econ-icon-cats .econ-cat { width: 44px; height: 44px; padding: 0; justify-content: center; }
.econ-chip svg, .econ-avatar svg { display: block; }
.icon-label-inline { display: inline-flex; align-items: center; gap: 6px; }
.icon-label-inline svg { flex-shrink: 0; }

/* Original line icons stand where emoji and text glyphs used to be. */
.hint svg, .locked-plan svg, .checkout-notice svg, .pricing-hero-badge svg, .flight-teaser-lock svg, .journey-entry-title svg, .message-card-form svg { vertical-align: -3px; }
.stat-tile-caption.with-icon { display: flex; align-items: center; gap: 5px; }
.landing-feature-icon { color: var(--accent); }
.message-card-mark { display: flex; justify-content: center; margin-bottom: 14px; color: var(--accent); }
.plan-lock-mark { display: inline-flex; color: var(--muted); }
.pricing-check { display: inline-flex; }
.pricing-planned-marker { display: inline-flex; filter: none; color: var(--muted); }
.meet-photo-remove, .stat-tile-remove, .stat-tile-reorder, .feedback-close { display: inline-flex; align-items: center; justify-content: center; }
.econ-person-flow span { display: inline-flex; align-items: center; gap: 3px; }
.meet-photo-locked, .journey-photo-locked { color: var(--muted); }
.couple-heart { display: inline-flex; align-items: center; justify-content: center; }
.couple-names .couple-heart svg { width: 0.9em; height: 0.9em; }
.journey-doc-names .journey-doc-heart { margin: 0; }
.journey-doc-names .journey-doc-heart svg { width: 0.8em; height: 0.8em; }
.note-pin svg { flex-shrink: 0; }

/* Number fields in the Economy sheet: no spin buttons. */
.econ-sheet-amount::-webkit-outer-spin-button, .econ-sheet-amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.econ-sheet-amount { -moz-appearance: textfield; appearance: textfield; }

/* ---- Live countdowns: whole days big, the time left in the day ticking under them ---- */
.live-cd { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.live-cd-main { display: flex; align-items: baseline; gap: 6px; }
.live-cd-num { font: 500 34px/1.05 "Fraunces", Georgia, serif; font-variant-numeric: tabular-nums; }
.live-cd-unit { color: var(--muted); font-size: 13px; }
.live-cd-time { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.live-cd[data-state="soon"] .live-cd-num { font-size: 28px; }
.live-cd[data-state="reached"] .live-cd-num { font-size: 28px; }
.stat-tile-hero { flex: 1 1 100%; padding: 16px 18px; }
.live-cd.hero { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; margin: 4px 0; }
.live-cd.hero .live-cd-num { font-size: 56px; letter-spacing: -0.01em; }
.live-cd.hero .live-cd-unit { font-size: 16px; }
.live-cd.hero .live-cd-time { font-size: 22px; }
.live-cd.hero[data-state="soon"] .live-cd-num, .live-cd.hero[data-state="reached"] .live-cd-num { font-size: 44px; }
.live-cd.meet { gap: 1px; margin: 0; }
.live-cd.meet .live-cd-num { font-size: 40px; line-height: 1; }
.live-cd.meet .live-cd-unit { font-size: 12px; }
.live-cd.meet .live-cd-time { font-size: 12px; }
.live-cd.meet[data-state="soon"] .live-cd-num { font-size: 20px; }
.live-cd.meet[data-state="reached"] .live-cd-num { font-size: 22px; color: var(--accent); }

/* Plans: the heading and the one display-currency dropdown share a row. */
.plans-head { margin: 8px 0 28px; }
.plans-head h1 { font-size: 30px; }
.plan-grid.busy { opacity: 0.5; pointer-events: none; transition: opacity 0.15s; }

/* ---- Crop screen: the picture and two buttons ---- */
.crop-overlay { position: fixed; inset: 0; z-index: 1100; display: flex; flex-direction: column; background: #000; color: #fff; touch-action: none; user-select: none; -webkit-user-select: none; }
.crop-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; }
.crop-btn { justify-self: start; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border: none; border-radius: 22px; background: transparent; color: #fff; font-size: 16px; }
.crop-btn:hover { filter: none; background: rgba(255, 255, 255, 0.12); }
.crop-done { justify-self: end; background: var(--accent); color: #1a1408; font-weight: 600; padding: 0 20px; }
.crop-done:hover { background: var(--accent); filter: brightness(1.08); }
.crop-step { font-size: 14px; color: rgba(255, 255, 255, 0.7); font-variant-numeric: tabular-nums; }
.crop-stage { position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: grab; margin-bottom: env(safe-area-inset-bottom, 0px); }
.crop-stage:active { cursor: grabbing; }
.crop-img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; will-change: transform; }
/* The frame: what's outside it is dimmed. A fixed one sits in the middle; a free one follows its handles. */
.crop-frame { position: absolute; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.62); outline: 1.5px solid rgba(255, 255, 255, 0.9); outline-offset: -1px; pointer-events: none; }
.crop-frame:not(.free) { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.crop-frame.round { border-radius: 50%; }
.crop-frame.free { pointer-events: auto; cursor: move; }
.crop-corner { position: absolute; width: 44px; height: 44px; }
.crop-corner::before { content: ""; position: absolute; width: 20px; height: 20px; border: 0 solid #fff; }
.crop-corner.tl { left: -22px; top: -22px; } .crop-corner.tl::before { left: 22px; top: 22px; border-width: 3px 0 0 3px; }
.crop-corner.tr { right: -22px; top: -22px; } .crop-corner.tr::before { right: 22px; top: 22px; border-width: 3px 3px 0 0; }
.crop-corner.bl { left: -22px; bottom: -22px; } .crop-corner.bl::before { left: 22px; bottom: 22px; border-width: 0 0 3px 3px; }
.crop-corner.br { right: -22px; bottom: -22px; } .crop-corner.br::before { right: 22px; bottom: 22px; border-width: 0 3px 3px 0; }
.crop-corner.tl, .crop-corner.br { cursor: nwse-resize; } .crop-corner.tr, .crop-corner.bl { cursor: nesw-resize; }
.crop-edge { position: absolute; }
.crop-edge.t, .crop-edge.b { left: 22px; right: 22px; height: 28px; cursor: ns-resize; }
.crop-edge.l, .crop-edge.r { top: 22px; bottom: 22px; width: 28px; cursor: ew-resize; }
.crop-edge.t { top: -14px; } .crop-edge.b { bottom: -14px; } .crop-edge.l { left: -14px; } .crop-edge.r { right: -14px; }

/* ---- A Premium feature seen from a free dashboard, a notice about a locked device ---- */
.locked-plan.lock-sheet.lock-page { margin: 24px 0; padding: 36px 20px; background: var(--surface); border-radius: 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--text); }
.lock-page h3 { margin: 0; }
.lock-page .lock-sheet-btn { width: auto; padding: 12px 28px; }
.key-banner { display: flex; align-items: center; gap: 8px; background: var(--surface-raised); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 14px; color: var(--accent); font-size: 14px; }
.key-banner svg { flex: none; }

/* Money tab */
.money-add { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 14px; }
button.primary:disabled { opacity: 0.4; cursor: default; filter: none; }
.econ-line-amount.in { color: var(--good); }
.quick-kind { display: flex; gap: 6px; justify-content: center; margin: 4px 0 6px; }
.quick-kind-btn { display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 999px; padding: 6px 14px; background: var(--surface); color: var(--muted); font: 500 13.5px "Inter", sans-serif; cursor: pointer; }
.quick-kind-btn.on { background: var(--accent); color: #1a1408; }
.quick-amount { text-align: center; font: 500 52px/1.1 "Fraunces", Georgia, serif; font-variant-numeric: tabular-nums; margin: 6px 0 16px; }
.quick-amount.empty { color: var(--muted); }
.quick-cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 4px; margin-bottom: 14px; }
.quick-cat { border: none; background: transparent; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 6px; font: 500 12px "Inter", sans-serif; cursor: pointer; padding: 0; }
.quick-cat-dot { width: 46px; height: 46px; border-radius: 50%; background: var(--surface); display: inline-flex; align-items: center; justify-content: center; }
.quick-cat.on { color: var(--text); }
.quick-cat.on .quick-cat-dot { background: var(--accent); color: #1a1408; }
.quick-meta { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.quick-who { display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 999px; padding: 5px 12px 5px 6px; background: var(--surface); color: var(--muted); font: 500 13.5px "Inter", sans-serif; cursor: pointer; }
.quick-who.on { background: var(--accent); color: #1a1408; }
.quick-pad { margin-bottom: 12px; }
.quick-expr { min-height: 18px; text-align: center; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.quick-key { border: none; background: transparent; color: var(--text); font: 500 24px "Inter", sans-serif; padding: 12px 0; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.quick-key:active { background: var(--surface); }
.quick-meta .date-field { width: auto; }
.quick-meta .date-field-trigger { width: auto; border-radius: 999px; padding: 7px 14px; font-size: 13.5px; font-weight: 500; text-align: center; background-color: var(--surface); color: var(--muted); }
.quick-sheet .econ-sheet-actions { display: flex; gap: 10px; }
.quick-sheet .econ-sheet-actions .primary { flex: 1; }
.quick-who.on { background: color-mix(in srgb, var(--text) 18%, var(--surface-raised)); color: var(--text); }

/* ---- Money tab: first visit (Now, then what comes in and goes out) ---- */
.setup { display: flex; flex-direction: column; gap: 22px; padding-top: 12px; }
.setup h1 { margin: 0; }
.setup[hidden] { display: none; }
.setup-person { display: flex; flex-direction: column; gap: 8px; }
.setup-who { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.setup-dots { display: flex; justify-content: center; gap: 8px; }
.setup-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--surface-raised); }
.setup-dots span.on { background: var(--accent); }
.setup-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.setup-actions .primary { min-width: 120px; }
.econ-person-net.now.bad { color: var(--danger); }

/* Goals: money set aside by each of you */
.mark-ask { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; margin: 2px 0 6px; }
.mark-field { display: flex; flex-direction: column; gap: 6px; }
.mark-field > span { font-size: 13px; color: var(--muted); }
.mark-person { gap: 12px; }
.goal-big-saved.static { cursor: default; }
.econ-cat.mark-icon { padding: 8px 10px; }

/* Money's top: when the move can be afforded, the one thing to do, the two of you */
.plan-tabs { margin: 4px 0 14px; }
.money-ready { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 16px; }
.money-ready-label { font-size: 13.5px; color: var(--muted); }
.money-ready-month { font: 500 44px/1.1 "Fraunces", Georgia, serif; }
.money-ready-month.bad { color: var(--danger); }
.money-ready-diff { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.money-ready-diff.good { color: var(--good); }
.money-ready-diff.bad { color: var(--danger); }
.money-ready-was { font-size: 13px; color: var(--muted); }
.money-ready-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.money-ready-bar:active { background: var(--surface-raised); }
.money-ready-bar .goal-bar { flex: 1; }
.money-ready-amt { font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
a.money-main { text-decoration: none; }
.money-main { margin: 0 0 12px; }
.money-update-again { display: block; margin: 0 0 8px auto; }
.money-people { display: flex; gap: 10px; margin-bottom: 8px; }
.money-who { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; margin: -6px; padding: 6px; border: none; border-radius: 12px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.money-who:hover, .money-who:active { background: var(--surface); }
.money-who:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.money-who-text { display: flex; flex-direction: column; min-width: 0; }
.money-who-amt { font-size: 15px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.money-who-amt.bad { color: var(--danger); }
.money-who-when { font-size: 12px; color: var(--muted); }
.econ-chart-wrap.static .econ-chart { pointer-events: none; cursor: default; }
/* Scrubbing the line: the month under the finger, floating above it. */
.econ-chart-scrub { position: relative; padding-top: 30px; margin-top: -16px; }
.econ-chart-scrub .econ-chart { cursor: crosshair; touch-action: pan-y; }
.econ-chart-tip { position: absolute; top: 0; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.month-row { padding: 0; }
.month-row-main { flex: 1; display: flex; align-items: center; gap: 12px; padding: 11px 6px 11px 14px; border: none; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.month-row-add { flex: none; width: 48px; align-self: stretch; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--accent); cursor: pointer; }
.month-row-add:active, .month-row-main:active { background: var(--surface-raised); }
.econ-line-amount.good { color: var(--good); }
.econ-line-amount.bad { color: var(--danger); }
.money-ready-pace { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.money-ready-wait { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 13.5px; color: var(--muted); }

/* The app's own number pad: up from the bottom like a keyboard, over everything. */
.num-pad { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--surface-raised); box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.04); }
.num-pad[hidden] { display: none; }
.num-pad-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-width: 520px; margin: 0 auto; }
.num-key { height: 48px; border: none; border-radius: 12px; background: transparent; color: var(--text); font: 500 22px "Inter", sans-serif; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.num-key:active { background: var(--surface); }
.num-key.op { color: var(--accent); }
.num-key.ok { background: var(--surface); color: var(--accent); }
.num-pad-sum { max-width: 520px; margin: 0 auto 4px; padding: 4px 12px; text-align: right; color: var(--accent); font-size: 15px; font-variant-numeric: tabular-nums; }
body.pad-open .sheet { margin-bottom: var(--pad-h, 0px); max-height: calc(88vh - var(--pad-h, 0px)); }
body.pad-open { padding-bottom: var(--pad-h, 0px); }
input[data-pad] { caret-color: var(--accent); }

/* Money: ‹ the plan › under the title — the one switch between plans. */
.plan-switch { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 16px; padding: 4px; border-radius: 14px; background: var(--surface); }
.plan-switch-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Money's month: ‹ October 2026 › on the left, + on the right. */
.econ-stepper:has(.month-row-add) { justify-content: flex-start; gap: 2px; margin-top: 24px; }
.econ-stepper .month-row-add { margin-left: auto; width: 40px; height: 40px; padding: 0; align-self: center; border-radius: 50%; background: var(--surface); }
.month-row-add svg { flex-shrink: 0; }
div:has(> .econ-stepper .month-row-add) + div .econ-balance { font-size: 30px; }
.econ-chip.person { background: transparent; }
/* The plan's page of money: After the move, under Move-in and Dream home. */
.after-head { margin-top: 28px; }
.after-head h2 { margin: 0; font-size: 20px; }
/* A card on Money: its head opens the month's money; what that one has now, under it, is the way
   to change it — with a dot when it is due again. */
.econ-person-head { border: none; background: transparent; color: inherit; font: inherit; padding: 0; cursor: pointer; text-align: left; width: 100%; }
.due-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.econ-detail-head .month-row-add { margin-left: auto; width: 40px; height: 40px; padding: 0; align-self: center; border-radius: 50%; background: var(--surface); }
/* Savings: from now (or a day) → until a day, the move at the latest. */
.savings-period { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.savings-from { display: inline-flex; align-items: center; gap: 8px; }
.savings-now { font-weight: 600; }
.savings-arrow { color: var(--muted); }
.econ-person-flow .put { color: var(--accent); }
/* More than the move takes: the bar full and green, the balance green. */
.goal-bar.over .goal-bar-fill { background: var(--good); }
.goal-big.over .goal-big-saved { color: var(--good); }
/* Dream home on the plan: slots side by side, swiped through; the picked one in the accent; the
   last an empty slot, dashed, with + — what to do with it needs no words. */
.home-slots { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.home-slot { position: relative; flex: 0 0 132px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 0; border-radius: 16px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; text-decoration: none; }
.home-slot .home-img.slot { aspect-ratio: 4 / 3; border-radius: 11px; }
.home-slot .home-img.slot svg { width: 26px; height: 26px; }
.home-slot.selected { background: var(--accent); color: #1a1408; }
.home-slot-rent { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 0 2px 2px; }
.home-slot-check { position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #1a1408; display: flex; align-items: center; justify-content: center; }
.home-slot.add { align-items: center; justify-content: center; min-height: 128px; background: transparent; border: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); }
.home-slot.add:active { background: var(--surface); }
.home-slot { gap: 2px; }
.home-slot .home-img.slot { margin-bottom: 6px; }
.home-slot-name { font-size: 12.5px; padding: 0 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: 0.8; }

/* Every press shows, as in a native app: no browser tint (the blue flash on Android),
   no outline left behind by a tap, no text selected by a long press — and the
   thing pressed dims while the finger is on it. Things that light up their own
   fill on press keep only that. */
html { -webkit-tap-highlight-color: transparent; }
:where(button, a, [role="button"], summary, label:has(> input[type="file"])) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
:where(button, a, [role="button"], summary):focus:not(:focus-visible) { outline: none; }
:where(button:not(:disabled), a[href], [role="button"], summary, label:has(> input[type="file"])) { transition: opacity 0.18s ease, background-color 0.18s ease, transform 0.12s ease; }
:where(button:not(:disabled), a[href], [role="button"], summary, label:has(> input[type="file"])):active { opacity: 0.55; transition: none; }
:where(button.primary:not(:disabled)):active { opacity: 1; filter: brightness(0.86); transform: scale(0.98); }
.plan-card:active, .icon-btn:active, .meet-photo-slot:active, .econ-saved:active, .econ-line:active, .econ-step-btn:active,
button.econ-legend-item:active, button.econ-person:active, .scope-btn:active, .stepper-btn:active, .identity-choice:active, .home-econ:active,
.home-card:active, .draw-tool:active, .draw-together-leave:active, .quick-key:active, .money-ready-bar:active, .money-who:active,
.month-row-add:active, .month-row-main:active, .num-key:active, .econ-person-now:active, .home-slot.add:active,
button.option-row:not(.selected):active, .home-slot:not(.selected):active, .home-chip:not(.selected):active { opacity: 1; }
button.option-row:active:not(.selected), .home-slot:not(.selected):not(.add):active, .home-chip:not(.selected):active { background: var(--surface-raised); }

/* Economy's top: two pages side by side, swiped (snapping, as a phone's own pager), dots under. */
.econ-top-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.econ-top-track::-webkit-scrollbar { display: none; }
.econ-top-page { flex: 0 0 100%; scroll-snap-align: start; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.econ-top-label { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.econ-balance.saved { color: var(--accent); }
.econ-balance-of { color: var(--muted); font-size: 0.55em; margin-left: 4px; }
.econ-top-left { margin-top: 2px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.econ-top-left.bad { color: var(--danger); }
.econ-top-dots { display: flex; gap: 2px; margin: -2px 0 0 -8px; }
.econ-top-dot { width: 22px; height: 18px; padding: 0; border: none; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.econ-top-dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background 0.2s ease, width 0.2s ease; }
.econ-top-dot.on::after { width: 14px; border-radius: 3px; background: var(--text); }
.econ-bar { display: flex; }
.econ-bar-fill.put { background: var(--accent); border-radius: 0 4px 4px 0; }
.econ-bar-fill + .econ-bar-fill.put { margin-left: 0; }
/* The cost and what is put by meet flush: the first one's right end is square when the other follows. */
.econ-bar-fill:has(+ .econ-bar-fill.put) { border-radius: 4px 0 0 4px; }
/* A person's card: one button, the whole of it. */
button.econ-person { gap: 8px; }
.econ-person > .econ-person-net { display: block; }
.econ-stepper.detail { margin: 2px 0 8px; }
.csv-section { margin-top: 4px; }
.statement-out .statement-cur { padding: 1px 7px; border-radius: 999px; background: var(--surface); color: var(--text); font-size: 12px; }
.econ-line-cap svg { vertical-align: -2px; }
/* How far a change to a repeating row reaches: an action sheet of three. */
.scope-sheet { display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; }
.scope-title { font-size: 13px; color: var(--muted); text-align: center; margin-bottom: 4px; }
.scope-btn { width: 100%; padding: 15px 16px; border: none; border-radius: 14px; background: var(--bg); color: var(--text); font: 500 16px "Inter", sans-serif; cursor: pointer; }
.scope-btn:active { background: var(--surface); opacity: 1; }

/* What a person has now, on their page: the figure is the way to change it. */
.econ-now-edit { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 0; border: none; background: transparent; color: var(--text); cursor: pointer; }
.econ-now-edit svg { color: var(--muted); }

/* Figures that can run long: they stay within their box (and are written short when they would not fit — fitAmounts). */
.econ-balance, .econ-person-net, .econ-person-flow, .econ-total-net, .home-econ-net, .home-econ-goal-amt, .plan-card-stat-value, .goal-big-nums, .econ-line-amount, .home-slot-rent, .money-ready-pace { min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; }
.date-day.empty { visibility: hidden; pointer-events: none; }

/* ---- The move: asked, said, passed over ---- */
.move-big { display: inline-flex; align-items: center; gap: 8px; font: 500 34px/1.15 "Fraunces", Georgia, serif; color: var(--text); }
.move-state.moved .move-big { color: var(--good); }
button.countdown.move-state { background: none; border: none; padding: 0; text-align: left; color: inherit; cursor: pointer; }
.move-state.not-taken { gap: 10px; }
.move-ask { display: flex; gap: 10px; margin-top: 12px; width: 100%; }
.move-ask > button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; }
.move-ask .move-no { background: var(--surface-raised); color: var(--text); border: none; border-radius: 12px; font: 600 15px "Inter", sans-serif; }
.move-early, .move-instead { margin-top: 6px; padding: 4px 0; background: none; border: none; color: var(--muted); font: 500 14px "Inter", sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.move-tile-big { font: 500 30px/1.15 "Fraunces", Georgia, serif; margin: 6px 0 2px; }
.move-tile.ask .move-ask { margin-top: 14px; }
.plan-card.not-taken { opacity: 0.5; }
.plan-card-status.quiet { color: var(--muted); font-weight: 500; }
.plan-card-status.ask { color: var(--accent); }
.move-plan-btn { display: flex; align-items: center; gap: 10px; text-align: left; }
.move-sheet .econ-start { margin: 14px 0 6px; }
.goal-big.paid .goal-big-saved { color: var(--text); }

/* ---- Weather on the city clocks ---- */
.city-clock.has-wx { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.city-clock-main { min-width: 0; }
.city-clock-wx { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; color: inherit; }
.city-clock-wx:empty { display: none; }
.city-clock-temp { font: 600 13px "Inter", sans-serif; color: var(--text); font-variant-numeric: tabular-nums; }
.wx-credit { margin-top: 6px; font-size: 11px; color: var(--muted); text-align: right; }
.wx { overflow: visible; color: var(--muted); }
.wx-sun-core { fill: #f2b84b; }
.wx-ray { stroke: #f2b84b; }
.wx-moon-core { fill: #e8dcb5; }
.wx-cloud-body { fill: #c9cfdb; }
.wx.wx-thunder .wx-cloud-body, .wx.wx-rain .wx-cloud-body { fill: #9aa3b5; }
.wx-drop { stroke: #6aa9e9; }
.wx-flake { fill: #eef3fb; }
.wx-bolt { fill: #f2b84b; }
.wx-fog { stroke: #9aa3b5; }
.wx-rays { transform-box: fill-box; transform-origin: center; animation: wx-spin 14s linear infinite; }
.wx-moon { transform-box: fill-box; transform-origin: center; animation: wx-glow 4s ease-in-out infinite; }
.wx-cloud { animation: wx-drift 6s ease-in-out infinite; }
.wx-drop { animation: wx-fall 1.1s linear infinite; }
.wx-flake { animation: wx-snow 2.6s linear infinite; }
.wx-d1 { animation-delay: -0.4s; }
.wx-d2 { animation-delay: -0.8s; }
.wx-flake.wx-d1 { animation-delay: -0.9s; }
.wx-flake.wx-d2 { animation-delay: -1.7s; }
.wx-bolt { animation: wx-flash 3.2s ease-in-out infinite; }
.wx-fog { animation: wx-slide 4s ease-in-out infinite; }
@keyframes wx-spin { to { transform: rotate(360deg); } }
@keyframes wx-glow { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes wx-drift { 0%, 100% { transform: translateX(-1.5px); } 50% { transform: translateX(1.5px); } }
@keyframes wx-fall { 0% { transform: translateY(-4px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }
@keyframes wx-snow { 0% { transform: translate(0, -4px); opacity: 0; } 20% { opacity: 1; } 50% { transform: translate(1.5px, 2px); } 100% { transform: translate(-1px, 8px); opacity: 0; } }
@keyframes wx-flash { 0%, 70%, 100% { opacity: 0.25; } 74%, 80% { opacity: 1; } 77% { opacity: 0.4; } }
@keyframes wx-slide { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) {
  .wx * { animation: none !important; }
}
.couple-distance.zero { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; }
.zero-heart { color: #e5626f; display: inline-flex; }

/* ---- The certificate (Journey, once moved) ---- */
.journey-doc.cert { text-align: center; padding: 32px 22px 36px; }
.cert-kicker { font: 500 14px "Inter", sans-serif; color: var(--muted); letter-spacing: 0.04em; margin-bottom: 18px; }
.cert-line { font: 400 clamp(18px, 4.6vw, 22px)/1.4 "Fraunces", Georgia, serif; margin: 10px auto 0; max-width: 30ch; }
.cert-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 28px 0 8px; }
.cert-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.cert-stat-num { font: 500 clamp(19px, 5.4vw, 28px)/1.1 "Fraunces", Georgia, serif; white-space: nowrap; }
.cert-stat-label { font-size: 12.5px; color: var(--muted); }
.cert-since { margin-top: 4px; padding: 2px 0; background: none; border: none; color: var(--accent); font: 500 12px "Inter", sans-serif; cursor: pointer; }
.cert-collage { position: relative; margin: 26px auto 6px; max-width: 520px; }
.cert-collage.rows-1 { height: 170px; }
.cert-collage.rows-2 { height: 300px; }
.cert-collage.rows-3 { height: 460px; }
.cert-photo { position: absolute; width: 27%; padding: 6px 6px 18px; background: #f4f1ea; border-radius: 3px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
.cert-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 1px; }
.cert-signatures { text-align: left; }
.cert-sig { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.cert-sig-area { height: 76px; display: flex; align-items: flex-end; justify-content: center; }
.cert-sig-ink { width: 100%; height: 76px; color: var(--text); }
.cert-sig .journey-signature-line { height: 0; }
.cert-sign-btn { align-self: center; margin-top: 8px; padding: 6px 14px; border: none; border-radius: 999px; background: var(--surface-raised); color: var(--text); font: 600 13px "Inter", sans-serif; cursor: pointer; }
.cert-date { text-align: center; font: 400 16px "Fraunces", Georgia, serif; height: 26px; }
.cert-date + .journey-signature-line { height: 0; }
.cert-sign-sheet .cert-pad { display: block; width: 100%; aspect-ratio: 10 / 3; background: var(--bg); border-radius: 12px; touch-action: none; margin: 12px 0 4px; }
@media print { .cert-photo { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); } }
/* Beside what one has now: the month's end, quietly. */
.econ-month-end { margin-left: 8px; font: 500 0.42em "Inter", sans-serif; color: var(--muted); opacity: 0.8; white-space: nowrap; vertical-align: middle; }
.econ-month-end.bad { color: color-mix(in srgb, var(--danger) 70%, var(--muted)); }
.econ-now-edit .econ-month-end { font-size: 15px; margin-left: 10px; }
/* On a card, the month's end sits beside what one has now, or under it when there is no room —
   never making the figure itself shorter. */
.econ-person-net.now { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; white-space: normal; }
.econ-person-net.now .econ-month-end { margin-left: 0; font-size: 12px; }
.econ-now { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 8px; }
.econ-now-label { font: 500 13px "Inter", sans-serif; color: var(--muted); }
.econ-now-end { font: 500 15px "Inter", sans-serif; color: var(--muted); opacity: 0.85; font-variant-numeric: tabular-nums; }
.econ-top-now { font: 500 13px "Inter", sans-serif; color: var(--muted); }
.econ-top-end { font: 500 15px "Inter", sans-serif; color: var(--muted); opacity: 0.85; font-variant-numeric: tabular-nums; }
.econ-top-end.bad { color: color-mix(in srgb, var(--danger) 70%, var(--muted)); }
.econ-now-end.bad { color: color-mix(in srgb, var(--danger) 70%, var(--muted)); }
/* A person's page: Bank CSV at the top right, what it brought in under the month. */
.econ-detail-head-end { margin-left: auto; display: flex; align-items: center; }
.csv-head { margin: 0; padding: 0; background: none; }
.csv-head .statement-btn { height: 38px; padding: 0 14px; }
.econ-detail > .statement-out, .statement-out:not([hidden]) { margin: 4px 0 10px; }

/* ---- A note opened: the whole screen, as in Google Keep ---- */
.note-full { position: fixed; inset: 0; z-index: 900; background: var(--bg); display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
body.note-full-open { overflow: hidden; }
.note-full-top { display: flex; align-items: center; gap: 4px; padding: 10px 10px 6px; }
.note-full-gap { flex: 1; }
.note-full-icon { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; }
.note-full-icon.on { color: var(--accent); }
.note-full-body { flex: 1; overflow-y: auto; padding: 4px 20px 24px; max-width: 720px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.note-full-text { width: 100%; min-height: 40vh; border: none; outline: none; background: transparent; color: var(--text); font: 400 17px/1.55 Inter, system-ui, sans-serif; resize: none; padding: 0; }
.note-full-text:focus { box-shadow: none; }
.note-full-photo { position: relative; margin: 0 -20px 16px; }
.note-full-photo img { display: block; width: 100%; max-height: 60vh; object-fit: contain; background: var(--surface); }
.note-full-remove { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #12141c; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.note-full-drawing { display: block; width: 100%; border-radius: 12px; margin-bottom: 16px; background: var(--surface); cursor: pointer; }
.note-full-bottom { display: flex; align-items: center; gap: 4px; padding: 8px 12px 12px; border-top: none; background: var(--surface); }
.note-full-tool { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border: none; border-radius: 12px; background: transparent; color: var(--text); font: 500 14px Inter, sans-serif; cursor: pointer; }
.note-full-edited { margin-left: auto; font-size: 12px; color: var(--muted); padding-right: 6px; }
.note-full .note-full-text, .note-full .note-full-text:focus { border: none; outline: none; border-radius: 0; padding: 0; background: transparent; }
.note-full-icon svg { width: 24px; height: 24px; flex: none; }
.note-full-tool svg { width: 22px; height: 22px; flex: none; }
.note-full-remove svg { width: 18px; height: 18px; flex: none; }

/* ---- Notifications: the bell and its sheet ---- */
.bell-btn { color: var(--muted); padding: 4px; border: none; background: transparent; border-radius: 50%; display: inline-flex; cursor: pointer; }
.bell-btn.on { color: var(--accent); }
.bell-btn svg { width: 22px; height: 22px; }
.push-sheet { display: flex; flex-direction: column; gap: 14px; padding-bottom: 4px; }
.push-head { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--accent); }
.push-head h3 { margin: 0; font-size: 17px; color: var(--text); }
.push-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.push-list li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; background: var(--surface); font-size: 14px; }
.push-list li svg { color: var(--muted); flex: none; }
.push-note, .push-on { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--muted); justify-content: center; text-align: center; }
.push-on { color: var(--good, #74c69d); }
.push-note svg, .push-on svg { flex: none; }
.push-btn { width: 100%; }
/* Nothing over the page lets a swipe through to it. */
.num-pad { touch-action: none; overscroll-behavior: contain; }
.sheet, .sheet-overlay { overscroll-behavior: contain; }

/* ---- The trial: days left (last week), or read-only once over ---- */
.trial-slot:empty { display: none; }
.trial-strip { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--text); text-decoration: none; font-size: 13.5px; }
.trial-strip.over { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); }
.trial-strip > span:first-of-type { flex: 1; }
.trial-strip-go { color: var(--accent); font-weight: 600; }
.trial-sheet-note { text-align: center; color: var(--muted); margin: -4px 0 8px; }
.pricing-hero-badge.over { color: var(--danger); }

/* ---- The free planner (#/try) and a shared result (#/r/…) ---- */
.sim-page { display: flex; flex-direction: column; gap: 12px; }
.sim-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.sim-head h1 { margin: 0; }
.sim-cur { width: auto; flex: none; }
.sim-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--surface); border-radius: 16px; }
.sim-card h3 { margin: 0; font-size: 15px; }
.sim-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: center; gap: 10px; font-size: 14.5px; }
.sim-row .econ-sheet-amount { text-align: right; font-size: 17px; padding: 10px 12px; }
.sim-go { margin-top: 4px; }
.sim-result { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin-top: 8px; }

/* The result as a boarding pass: a paper ticket on the dark page, torn at the stub. */
.sim-pass { --paper: #f2f0ea; --ink: #12141c; --ink-muted: #6c7080; color: var(--ink); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); }
.pass-main, .pass-stub { background: var(--paper); }
.pass-main { padding: 20px 20px 18px; border-radius: 20px 20px 0 0; display: flex; flex-direction: column; gap: 16px; }
.pass-top { display: flex; align-items: center; justify-content: space-between; }
.pass-brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
.pass-kind, .pass-k { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.pass-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pass-names { display: flex; align-items: center; gap: 8px; font: 600 22px/1.2 "Fraunces", Georgia, serif; }
.pass-heart { display: inline-flex; color: #c9862a; }

.pass-route { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 10px; }
.pass-end { display: flex; flex-direction: column; min-width: 0; }
.pass-end.to { text-align: right; }
.pass-code { font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: -.01em; }
.pass-city { margin-top: 4px; font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pass-path { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-bottom: 22px; }
.pass-path::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background-image: radial-gradient(circle, #b9b4a6 1px, transparent 1.5px); background-size: 7px 2px; }
.pass-plane { position: relative; display: inline-flex; padding: 0 6px; background: var(--paper); color: #c9862a; }
.pass-plane svg { transform: rotate(90deg); }
.pass-km { font-size: 11.5px; color: var(--ink-muted); white-space: nowrap; }
.pass-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
.pass-grid .pass-departs { grid-column: 1 / -1; }
.pass-v { font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.pass-v.bad { color: #c0392b; }
.sim-pass .pass-when { font: 600 clamp(40px, 15vw, 60px)/1 "Fraunces", Georgia, serif; letter-spacing: -.01em; white-space: nowrap; color: #b8761f; }
/* The three figures: values on one line and level with each other, however their labels wrap. */
.pass-grid .pass-field:not(.pass-departs) { justify-content: space-between; }
.pass-grid .pass-v { white-space: nowrap; }
.sim-pass .pass-when.bad { color: #c0392b; }
.pass-tear { height: 22px; background: radial-gradient(circle at 0 50%, transparent 11px, var(--paper) 11.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 11px, var(--paper) 11.5px) right / 51% 100% no-repeat; position: relative; }
.pass-tear::after { content: ""; position: absolute; left: 18px; right: 18px; top: 10px; height: 2px; background-image: radial-gradient(circle, #cfcab9 1.2px, transparent 1.7px); background-size: 9px 2px; }
.pass-stub { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px 18px; border-radius: 0 0 20px 20px; }
.pass-barcode { width: 55%; height: 40px; color: var(--ink); }
.pass-stub-text { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; color: var(--ink-muted); }
.pass-flight { font-weight: 800; font-size: 15px; color: var(--ink); letter-spacing: .04em; }
.sim-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.sim-actions-row > * { width: 100%; }
/* Under the pass: Send to them, in gold, then Save image. */
.sim-send-row { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 18px; }
button.sim-send { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px; border: none; border-radius: 14px; background: var(--accent); color: #1a1408; font-size: 17px; font-weight: 700; }
button.sim-send:hover { filter: brightness(1.06); }
button.sim-send:disabled { opacity: .6; }
.sim-unlock { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.sim-unlock p { margin: 0; text-align: center; font-size: 15px; color: var(--text); }
.sim-unlock .primary { width: 100%; }
.get-trial { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 8px 0 28px; }
.get-trial:empty { display: none; }
.get-trial-btn { width: 100%; padding: 16px; font-size: 17px; }
.get-trial-note { text-align: center; margin: 0; }
.get-top { margin: 8px 0 40px; }
.sim-save { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.sim-result-label { font-size: 13px; color: var(--muted); }
.sim-result-month { font: 600 44px/1.1 "Fraunces", Georgia, serif; }
.sim-result-month.bad { color: var(--danger); }
.sim-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 8px; }
.sim-figures > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--surface-raised); border-radius: 12px; }
.sim-k { font-size: 12px; color: var(--muted); }
.sim-v { font-weight: 600; font-variant-numeric: tabular-nums; }
.sim-actions { display: flex; flex-direction: column; gap: 8px; }
.sim-actions > * { width: 100%; }
.sim-share { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.sim-cta { display: block; text-align: center; text-decoration: none; padding: 14px; border-radius: 12px; }
.sim-trial { text-align: center; margin: 0; }
.sim-link input { width: 100%; }
.sim-page button.back-link { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
.sim-cur-static { color: var(--muted); font-size: 14px; }
.sim-page .wizard-top { margin-bottom: 4px; }
.sim-v.bad { color: var(--danger); }
.sim-page .form-actions .primary { flex: 1; }
.get-page button.back-link { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }

/* The plan page's "Have a promo code?": small, under the plans. */
.promo { display: flex; flex-direction: column; align-items: center; margin-top: 14px; }
.promo-toggle { background: none; border: 0; padding: 6px 10px; color: var(--muted); font-size: 13px; cursor: pointer; }
.promo-toggle[hidden], .promo-box[hidden] { display: none; }
.promo-box { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 360px; }
.promo-row { display: flex; gap: 8px; }
.promo-input { flex: 1; min-width: 0; text-transform: uppercase; }
.promo-status { text-align: center; }
/* The plans, after the GIFs: room above them, as between sections. */
.get-page .landing-story > .pricing-grid { margin-top: 48px; }