/*
 * NaSha Mobile design system — tokens + base primitives.
 * Copied VERBATIM from the "NaSha Mobile" claude.ai/design project
 * (@nasha/design-system@0.1.0, _ds_bundle.css). Do not edit values here:
 * if production and this file disagree, re-sync from the design system.
 *
 * Only the class primitives this app uses are included (eyebrow, button,
 * card, section heading, bottom nav, select, status). React components are
 * not loaded — the timeline uses the same class contract without the
 * ~140 KB React runtime.
 */
@import "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..900,0..100,0..1;1,9..144,300..900,0..100,0..1&family=Karla:ital,wght@0,300..800;1,300..800&family=IBM+Plex+Mono:wght@400;500;600&display=swap";

:root {
  --ns-paper: #FBF6EC;
  --ns-stone: #F3EBDB;
  --ns-stone-deep: #E7DAC2;
  --ns-ink-strong: #19110A;
  --ns-ink: #2A1F17;
  --ns-ink-soft: #5A4938;
  --ns-brass: #A97C34;
  --ns-rose: #B96F6A;
  --ns-blush: #E3A9A4;
  --ns-peach: #EFBE93;
  --ns-sage: #78876A;
  --color-canvas: var(--ns-stone);
  --color-canvas-alt: var(--ns-paper);
  --color-surface: var(--ns-paper);
  --color-surface-alt: var(--ns-stone);
  --color-surface-sunk: var(--ns-stone-deep);
  --color-ink-strong: var(--ns-ink-strong);
  --color-ink: var(--ns-ink);
  --color-ink-soft: var(--ns-ink-soft);
  --color-ink-on-dark: var(--ns-stone);
  --color-ink-on-dark-muted: rgba(251, 246, 236, .7);
  --color-ink-on-dark-faint: rgba(251, 246, 236, .55);
  --color-brass: var(--ns-brass);
  --color-rose: var(--ns-rose);
  --color-blush: var(--ns-blush);
  --color-peach: var(--ns-peach);
  --color-sage: var(--ns-sage);
  --color-nav-bg: rgba(42, 31, 23, .9);
  --color-nav-border: rgba(251, 246, 236, .28);
  --color-footer-bg: var(--ns-ink);
  --color-border: var(--ns-stone-deep);
  --color-border-dashed: var(--ns-brass);
  --color-border-strong: var(--ns-ink);
  --color-status-confirmed: var(--ns-sage);
  --color-status-tentative: var(--ns-rose);
  --color-status-none: var(--ns-stone-deep);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Karla", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace;
  --display-variation: "SOFT" 32, "WONK" 1;
  --display-variation-soft: "SOFT" 40, "WONK" 1;
  --text-display-hero: clamp(2.65rem, 2.1rem + 6vw, 3.4rem);
  --text-display-xl: clamp(1.9rem, 1.5rem + 3.5vw, 2.6rem);
  --text-display-lg: clamp(1.55rem, 1.35rem + 1.8vw, 1.9rem);
  --text-display-md: 1.375rem;
  --text-romantic: clamp(1.2rem, 1.05rem + 1vw, 1.45rem);
  --text-body-lg: 1.0625rem;
  --text-body: 0.9375rem;
  --text-small: 0.8125rem;
  --text-eyebrow: 0.6875rem;
  --text-mono-sm: 0.625rem;
  --text-mono-xs: 0.5625rem;
  --leading-display: 1.02;
  --leading-heading: 1.15;
  --leading-body: 1.6;
  --leading-relaxed: 1.7;
  --tracking-eyebrow: 0.22em;
  --tracking-mono: 0.12em;
  --tracking-display: -0.02em;
  --tracking-display-tight: -0.03em;
  --space-1: 0.375rem;
  --space-2: 0.625rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --gutter-page: 1.25rem;
  --content-max: 26rem;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --radius-arch: 50% 50% 14px 14px / 26% 26% 14px 14px;
  --shadow-soft: 0 24px 60px -30px rgba(42, 31, 23, .5);
  --shadow-lift: 0 10px 30px rgba(42, 31, 23, .24);
  --shadow-stamp-sm: 4px 4px 0 var(--ns-brass);
  --shadow-stamp: 6px 6px 0 var(--ns-stone-deep);
  --shadow-stamp-hover: 9px 9px 0 var(--ns-blush);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .18s;
}

.nasha-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-brass);
  margin: 0 0 var(--space-2);
}
.nasha-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0.85em 1.5em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.nasha-btn:hover { transform: translateY(-2px); }
.nasha-btn:focus-visible { outline: 3px solid var(--color-rose); outline-offset: 2px; }
.nasha-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.nasha-btn--primary { background: var(--color-ink); color: var(--color-canvas-alt); }
.nasha-btn--primary:hover { box-shadow: var(--shadow-stamp-sm); }
.nasha-btn--secondary { background: transparent; color: var(--color-ink); border-color: var(--color-border-strong); }
.nasha-btn--quiet { background: transparent; color: var(--color-ink-soft); border-color: transparent; }
.nasha-btn--quiet:hover { background: color-mix(in srgb, var(--color-ink) 6%, transparent); }
.nasha-btn--sm { padding: 0.6em 1.1em; font-size: var(--text-mono-sm); }
.nasha-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.nasha-heading {
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation-soft);
  font-weight: 500;
  font-size: var(--text-display-lg);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink-strong);
  margin: 0 0 var(--space-2);
}
.nasha-supporting { color: var(--color-ink-soft); margin: 0; font-size: var(--text-body); }
.nasha-bottom-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-nav-bg);
  border: 1px solid var(--color-nav-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lift);
}
.nasha-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink-on-dark-faint);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.nasha-bottom-nav__item.is-active { background: rgba(251, 246, 236, .14); color: var(--color-peach); }
.nasha-bottom-nav__icon { display: flex; width: 18px; height: 18px; }
.nasha-select__control {
  appearance: none;
  min-height: 44px;
  padding: 0.6em 2.2em 0.6em 1.1em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A4938' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 0.9em center / 14px;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-mono);
  cursor: pointer;
}
.nasha-select__control:focus-visible { outline: 3px solid var(--color-rose); outline-offset: 2px; }
.nasha-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
.nasha-status-card--confirmed { background: var(--color-status-confirmed); color: var(--color-canvas-alt); }
.nasha-status-card--tentative { background: var(--color-status-tentative); color: var(--color-canvas-alt); }
.nasha-status-card--none { background: var(--color-status-none); color: var(--color-ink-soft); }