/* ============================================================
   Tripsmith — design tokens + visual elevation (Phase A)
   Loaded AFTER the inline <style> in the SaaS index.html so
   these rules win the cascade and elevate the PWA chrome to
   the editorial register's quality without touching structure.
   ============================================================ */

:root {
  /* Unified palette — pulled toward the editorial values */
  --paper:        #FBF7EF;
  --paper-2:      #F4EEDC;
  --paper-3:      #ECE3C8;
  --ink:          #0E0F12;
  --ink-soft:     #3A3B40;
  --muted:        #6A655B;
  --line:         #D9CFB8;
  --line-soft:    #E5DCC0;
  --hairline:     #1B1C20;
  --vermilion:    #B8332A;
  --vermilion-2:  #9A2820;
  --indigo:       #1F3A5F;
  --gold:         #8A6534;
  --shadow:       none;

  /* Typography stacks */
  --serif-display: "Fraunces", "EB Garamond", Georgia, serif;
  --serif-body:    "Spectral", "EB Garamond", Georgia, serif;
  --sans-meta:     "Inter Tight", "JetBrains Mono", system-ui, sans-serif;

  /* Geometry */
  --radius-button: 2px;
  --radius-card:   3px;
  --radius-input:  2px;
  --hairline-w:    0.5px;
}

/* ─── Buttons ─── elevate from monospace-caps to serif-italic */
.btn,
.btn-primary,
.so-btn {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 24, "wght" 500;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius-button);
  padding: 13px 22px 14px;
  min-height: 48px;
  box-shadow: none;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.btn:hover,
.btn-primary:hover,
.so-btn:hover {
  background: var(--vermilion);
  border-color: var(--vermilion);
  color: var(--paper);
  box-shadow: none;
  transform: none;
}

.btn:active,
.btn-primary:active,
.so-btn:active {
  background: var(--vermilion-2);
  border-color: var(--vermilion-2);
  transform: none;
  box-shadow: none;
}

.btn.alt {
  background: transparent;
  color: var(--ink);
  border: 0.5px solid var(--ink);
  border-radius: var(--radius-button);
}

.btn.alt:hover {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--ink);
}

.btn.danger {
  background: var(--vermilion);
  border-color: var(--vermilion);
  color: var(--paper);
}

.btn.danger:hover {
  background: var(--vermilion-2);
  border-color: var(--vermilion-2);
}

.btn.gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--paper);
}

/* Hero CTA-row primary stays large; secondary becomes a clean italic link */
.hero .cta-row .btn,
.hero .cta-row .btn-primary {
  min-height: 50px;
  font-size: 17px;
  padding: 14px 24px 16px;
}

.hero .cta-row .cta-secondary {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid var(--ink);
  border-radius: 0;
  padding: 4px 0 2px;
  letter-spacing: 0;
  text-transform: none;
  min-height: 0;
}

.hero .cta-row .cta-secondary:hover {
  color: var(--vermilion);
  border-bottom-color: var(--vermilion);
  background: transparent;
}

.hero .cta-row .btn .cta-side {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 8px;
  opacity: 0.85;
  font-weight: 400;
}

/* The brand-row's nav buttons get the same elevation */
.brand-row .btn {
  font-size: 14px;
  padding: 9px 16px;
  min-height: 38px;
}

@media (max-width: 480px) {
  .brand-row .btn { font-size: 13px; padding: 8px 12px; letter-spacing: 0; }
}

/* ─── Cards ─── flatten shadows, hairline borders, radius 3 */
.card,
.sample-day,
.t2-need-card,
.tier2-card {
  background: transparent;
  border: var(--hairline-w) solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: none;
}

/* Sample-day nested cards lose all borders — separated by dashed hairlines */
.sample-day .blk {
  background: transparent;
  border: 0;
  border-top: 0.5px dashed var(--line);
  border-radius: 0;
  padding: 14px 0 12px;
  box-shadow: none;
}

.sample-day .blk:first-of-type {
  border-top: 0;
}

/* Sample-day badge pills → typographic small caps inline */
.sample-day .badges {
  font-family: var(--sans-meta);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

.sample-day .badges span {
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  color: var(--muted);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  margin: 0;
}

.sample-day .badges span:not(:last-child)::after {
  content: " · ";
  color: var(--vermilion);
  margin: 0 4px;
}

/* ─── Modals ─── soften overlay, replace drop shadow with hairline */
.modal-backdrop,
.modal-overlay,
.auth-modal-backdrop,
[class*="modal-bg"] {
  background: rgba(14, 15, 18, 0.18) !important;
}

.modal-card,
.auth-modal-card,
[class*="modal-card"] {
  border-radius: var(--radius-card);
  border: 0.5px solid var(--line);
  box-shadow: 0 8px 30px rgba(14, 15, 18, 0.10);
}

/* ─── Eyebrow labels — one unified style ─── */
.hero-eyebrow,
.t2-need-eyebrow,
.day-meta,
.phases-eyebrow,
.signals-eyebrow,
.companion-eyebrow,
.portraits-eyebrow,
.notes-eyebrow,
.if-eyebrow {
  font-family: var(--sans-meta);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vermilion);
}

.hero-eyebrow .he-line {
  background: var(--vermilion);
}

/* ─── Brand mark ─── lower radius, lighter shadow */
.brand .logo-mark {
  border-radius: 3px;
  box-shadow: 0 0 0 0.5px rgba(14, 15, 18, 0.18);
}

/* ─── Form inputs — hairline borders, no chunky outline ─── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="password"],
input[type="search"],
select,
textarea {
  background: var(--paper);
  border: 0.5px solid var(--hairline);
  border-radius: var(--radius-input);
  font-family: var(--serif-body);
  font-size: 16px;
  color: var(--ink);
  padding: 11px 12px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.14s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  border-color: var(--vermilion);
  border-width: 0.5px;
  outline: none;
}

/* ─── Phases-block specific elevation ─── */
.phases-h, .signals-h, .notes-h, .companion-h, .portraits-h, .so-h {
  font-family: var(--serif-display);
}

/* ─── House-bridge tightening ─── */
.tm-house-row,
.tm-house-list li {
  color: var(--ink);
}

.tm-house-list .tm-route-dash,
.tm-house-row .tm-sep {
  color: var(--muted);
}

/* ─── Hero — slightly tighter, lower-key ─── */
.hero h1 {
  font-variation-settings: "opsz" 144, "wght" 350;
}

.hero h1 .ital {
  font-variation-settings: "opsz" 144, "wght" 280;
  color: var(--vermilion);
}

/* ─── Trip-list cards on the dashboard ─── */
.trip-tile, .trip-card, .tripsList .card {
  box-shadow: none;
  border: 0.5px solid var(--line);
  border-radius: var(--radius-card);
}

.trip-tile:hover, .trip-card:hover {
  border-color: var(--ink);
  background: transparent;
}

/* ─── Misc legacy radius cleanup ─── */
.tier2-card,
.t2-need-card,
.install-nudge,
.ios-install-sheet .iis-card {
  border-radius: var(--radius-card);
}

/* The view fade-in stays — it's a nice touch */