:root {
  --navy-950: #061a27;
  --navy-900: #092536;
  --navy-800: #123548;
  --navy-700: #245166;
  --ink: #122733;
  --muted: #667b86;
  --line: #dce5e8;
  --line-strong: #cbd8dc;
  --paper: #ffffff;
  --canvas: #f4f7f6;
  --aqua: #2bb9ad;
  --aqua-dark: #137b74;
  --aqua-pale: #e5f7f4;
  --blue-pale: #e7f2f7;
  --amber: #e5a12b;
  --amber-dark: #956213;
  --amber-pale: #fff5de;
  --coral: #e87155;
  --coral-pale: #fff0eb;
  --red: #c64f45;
  --red-pale: #fff0ee;
  --shadow: 0 18px 50px rgba(7, 31, 46, 0.08);
  --shadow-soft: 0 8px 24px rgba(7, 31, 46, 0.06);
  --radius: 18px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--canvas);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { font: inherit; }
button { color: inherit; }

button:focus-visible, input:focus-visible, textarea:focus-visible, [role="tab"]:focus-visible {
  outline: 3px solid rgba(43, 185, 173, 0.3);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--paper);
  color: var(--navy-900);
  transform: translateY(-140%);
}
.skip-link:focus { transform: translateY(0); }

.topbar {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(24px, calc((100vw - 1440px) / 2));
  background: var(--navy-950);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.brand, .topbar-actions, .privacy-chip, .trip-facts, .eyebrow-row, .metric-heading,
.response-person, .deposit-callout, .check-row { display: flex; align-items: center; }

.brand { gap: 10px; color: inherit; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; text-decoration: none; }
.brand-logo { display:block; width:180px; height:60px; object-fit:contain; border-radius:6px; }
@media(max-width:580px) { .brand-logo { width:126px; height:42px; } }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--aqua); }
.brand-mark svg { width: 19px; fill: none; stroke: var(--navy-950); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.prototype-label { margin-left: 6px; padding: 4px 7px; border: 1px solid rgba(255,255,255,0.17); border-radius: 5px; color: #9ab0ba; font-size: 9px; letter-spacing: .13em; }
.topbar-actions { position: relative; gap: 12px; }
.privacy-chip { gap: 7px; color: #bdd0d7; font-size: 13px; }
.privacy-chip svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.topbar-link { padding: 7px 9px; color: #c8d9de; font-size: 13px; font-weight: 750; text-decoration: none; }
.topbar-link:hover { color: #fff; }
.sign-in-link { display: inline-flex; min-height: 38px; align-items: center; padding: 0 14px; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; background: #fff; color: var(--navy-950); font-size: 13px; font-weight: 850; text-decoration: none; }
.sign-in-link:hover { background: #e9fbf8; }
.account-menu-wrap { position: relative; }
.account-menu-toggle { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; }
.avatar { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: #21485a; color: #dffaf6; font-size: 12px; font-weight: 800; }
.account-name { max-width: 125px; overflow: hidden; font-size: 13px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.account-menu { position: absolute; top: calc(100% + 12px); right: 0; z-index: 50; width: 230px; padding: 14px; border: 1px solid #d4e0e3; border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 20px 55px rgba(4,24,37,.2); }
.account-menu strong, .account-menu > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu strong { color: var(--navy-950); font-size: 14px; }
.account-menu > span { margin: 2px 0 11px; color: var(--muted); font-size: 12px; }
.account-menu a { display: block; padding: 9px 8px; border-radius: 7px; color: var(--navy-800); font-size: 13px; font-weight: 750; text-decoration: none; }
.account-menu a:hover { background: var(--aqua-pale); color: var(--aqua-dark); }

.page-shell { width: min(1400px, calc(100% - 48px)); margin: 28px auto 64px; }

.trips-dashboard { width: min(1160px, 100%); margin: 0 auto; }
.dashboard-heading { display: flex; justify-content: space-between; gap: 28px; align-items: flex-end; padding: 28px 30px; border-radius: 18px; background: linear-gradient(135deg, var(--navy-950), #123b50); color: #fff; box-shadow: var(--shadow); }
.dashboard-heading .section-kicker { color: #67d8cd; }
.dashboard-heading h1 { margin: 7px 0 5px; font-size: clamp(28px, 4vw, 43px); line-height: 1.08; letter-spacing: -.045em; }
.dashboard-heading p { margin: 0; color: #bdd0d7; font-size: 15px; }
.dashboard-create { width: auto; flex: 0 0 auto; margin: 0; padding: 13px 18px; background: var(--aqua); color: var(--navy-950); }
.dashboard-create:hover { background: #49d2c5; }
.dashboard-signed-out { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; margin-top: 16px; padding: 25px 27px; border: 1px solid var(--line); border-radius: 15px; background: var(--paper); box-shadow: var(--shadow-soft); }
.dashboard-lock { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--aqua-pale); color: var(--aqua-dark); font-size: 21px; font-weight: 900; }
.dashboard-signed-out h2 { margin: 0; color: var(--navy-950); font-size: 20px; }
.dashboard-signed-out p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.dashboard-sign-in { width: auto; margin: 0; padding: 12px 17px; text-decoration: none; }
.dashboard-loading, .dashboard-empty { margin-top: 16px; padding: 30px; border: 1px solid var(--line); border-radius: 15px; background: var(--paper); color: var(--muted); text-align: center; }
.dashboard-error { display: flex; gap: 8px; margin-top: 16px; padding: 16px 18px; border: 1px solid #efd1cd; border-radius: 13px; background: #fff8f6; color: #695c59; font-size: 14px; }
.dashboard-error[hidden] { display: none; }
.dashboard-error strong { color: var(--red); }
.dashboard-empty strong { display: block; color: var(--navy-950); font-size: 19px; }
.dashboard-empty p { margin: 5px 0 17px; font-size: 14px; }
.dashboard-empty .secondary-button { margin: 0 auto; }
.trip-card-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; margin-top: 16px; }
.trip-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--paper); box-shadow: var(--shadow-soft); }
.trip-card-image { position: relative; height: 168px; overflow: hidden; background: #dce8e9; }
.trip-card-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .25s ease; }
.trip-card:hover .trip-card-image img { transform: scale(1.025); }
.trip-role { position: absolute; top: 12px; left: 12px; padding: 5px 8px; border-radius: 7px; background: rgba(6,26,39,.88); color: #fff; font-size: 11px; font-weight: 850; }
.trip-card-body { padding: 18px; }
.trip-card-title-row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.trip-card h2 { margin: 0; color: var(--navy-950); font-size: 20px; line-height: 1.2; letter-spacing: -.025em; }
.trip-card-status { flex: 0 0 auto; padding: 4px 7px; border-radius: 100px; background: var(--amber-pale); color: var(--amber-dark); font-size: 11px; font-weight: 800; }
.trip-card-status.locked { background: var(--aqua-pale); color: var(--aqua-dark); }
.trip-card-destination { margin: 5px 0 13px; color: var(--muted); font-size: 14px; }
.trip-card-meta { display: flex; justify-content: space-between; gap: 12px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.trip-card-open { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; color: var(--aqua-dark); font-size: 14px; font-weight: 850; text-decoration: none; }
.trip-card-open span { font-size: 18px; }

.trip-hero {
  min-height: 188px;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}
.trip-image-wrap { position: relative; min-height: 188px; }
.trip-image { width: 100%; height: 100%; display: block; object-fit: cover; }
.trip-image-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(6,26,39,.18)); pointer-events: none; }
.image-tag { position: absolute; left: 16px; bottom: 15px; z-index: 1; padding: 6px 9px; border-radius: 6px; background: rgba(6,26,39,.84); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .13em; backdrop-filter: blur(7px); }
.trip-hero-copy { align-self: center; padding: 26px 34px; }
.eyebrow-row { gap: 10px; }
.eyebrow, .section-kicker { color: var(--aqua-dark); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 100px; font-size: 11px; font-weight: 700; }
.status-pill span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-review { background: var(--amber-pale); color: var(--amber-dark); }
.status-ready { background: var(--aqua-pale); color: var(--aqua-dark); }
.trip-hero h1 { margin: 10px 0 3px; color: var(--navy-950); font-size: clamp(27px, 2.3vw, 38px); line-height: 1.08; letter-spacing: -.04em; }
.trip-title-row { display: flex; gap: 12px; align-items: center; }
.hero-edit-button { margin-top: 9px; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--paper); color: var(--navy-700); font-size: 12px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.hero-edit-button:hover { border-color: #9fc7c3; background: var(--aqua-pale); color: var(--aqua-dark); }
.trip-meta { margin: 0; color: var(--muted); }
.trip-meta span { padding: 0 6px; color: #aac0c8; }
.trip-facts { gap: 9px; margin-top: 17px; }
.trip-facts span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--navy-700); font-size: 12px; font-weight: 700; }
.hero-actions { align-self: center; max-width: 225px; display: flex; flex-direction: column; gap: 8px; padding: 24px 28px 24px 10px; text-align: right; }
.hero-actions p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.35; }
.secondary-button, .primary-button { border: 0; border-radius: 10px; font-weight: 800; cursor: pointer; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--navy-800); font-size: 12px; }
.secondary-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.secondary-button:hover { background: #f7faf9; }
.primary-button:hover, .secondary-button:hover { transform: translateY(-1px); }

.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 15px 0; }
.metric-card { min-height: 136px; padding: 19px 20px 17px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.metric-heading { justify-content: space-between; color: var(--muted); font-size: 12px; font-weight: 700; }
.metric-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; font-size: 13px; font-weight: 900; }
.metric-icon.mint { background: var(--aqua-pale); color: var(--aqua-dark); }
.metric-icon.blue { background: var(--blue-pale); color: var(--navy-700); }
.metric-icon.amber { background: var(--amber-pale); color: var(--amber-dark); }
.metric-icon.coral { background: var(--coral-pale); color: var(--coral); }
.metric-card > strong { display: block; margin-top: 6px; color: var(--navy-950); font-size: 25px; letter-spacing: -.035em; }
.metric-card strong small { color: #71868f; font-size: 13px; font-weight: 700; letter-spacing: 0; }
.metric-card > p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.progress-track { height: 4px; margin: 9px 0 3px; overflow: hidden; border-radius: 999px; background: #e8eeee; }
.progress-track span { display: block; width: 97%; height: 100%; border-radius: inherit; background: var(--aqua); transition: width .45s ease; }

.workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) 348px; gap: 15px; align-items: start; }
.workspace-card, .response-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-soft); }
.workspace-card { min-width: 0; overflow: hidden; }
.tab-list { display: flex; gap: 22px; min-height: 60px; align-items: stretch; padding: 0 28px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tab-list::-webkit-scrollbar { display: none; }
.tab-button { position: relative; flex: none; border: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; }
.tab-button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: transparent; }
.tab-button.active { color: var(--navy-950); }
.tab-button.active::after { background: var(--aqua); }
.tab-panel { min-height: 490px; padding: 28px; animation: panelIn .24s ease; }
.tab-panel[hidden] { display: none; }
@keyframes panelIn { from { opacity: .5; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.section-heading h2 { margin: 5px 0 0; color: var(--navy-950); font-size: 21px; line-height: 1.25; letter-spacing: -.025em; }
.cost-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.signal-badge, .total-chip, .lock-label, .beta-label { flex: none; padding: 6px 9px; border-radius: 7px; font-size: 10px; font-weight: 800; letter-spacing: .03em; }
.signal-amber { background: var(--amber-pale); color: var(--amber-dark); }
.signal-green { background: var(--aqua-pale); color: var(--aqua-dark); }
.total-chip { background: var(--navy-950); color: #fff; }
.lock-label { background: var(--blue-pale); color: var(--navy-700); }
.beta-label { background: #eef0fa; color: #555c98; letter-spacing: .09em; }
.panel-intro { max-width: 670px; margin: 10px 0 24px; color: var(--muted); font-size: 13px; }

.readiness-strip { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; margin: 22px 0 26px; padding: 21px 22px; border: 1px solid #efdcae; border-radius: 13px; background: linear-gradient(115deg, #fffaf0, #fffefb); }
.readiness-copy p { max-width: 650px; margin: 0 0 12px; color: #4f5e64; font-size: 13px; }
.text-button { padding: 0; border: 0; background: transparent; color: var(--aqua-dark); font-size: 12px; font-weight: 800; cursor: pointer; }
.ring-wrap { text-align: center; }
.coverage-ring { --progress: 97%; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--amber) var(--progress), #f0e7d7 0); position: relative; }
.coverage-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fffaf0; }
.coverage-ring span { position: relative; color: var(--navy-900); font-size: 13px; font-weight: 900; }
.ring-wrap small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.household-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 10px; }
.household-heading h3 { margin: 0; font-size: 13px; }
.household-heading > div > span { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.compact-button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--paper); color: var(--navy-800); font-size: 10px; font-weight: 800; cursor: pointer; }
.compact-button > span { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; background: var(--aqua-pale); color: var(--aqua-dark); font-size: 13px; line-height: 1; }
.compact-button:hover { border-color: #9fc7c3; background: #f7fbfa; }
.household-list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.household-row { display: grid; grid-template-columns: 40px minmax(150px, 1.2fr) minmax(95px, .8fr) minmax(120px, auto) minmax(120px, auto); gap: 12px; align-items: center; min-height: 76px; padding: 12px 15px; }
.household-row + .household-row { border-top: 1px solid var(--line); }
.household-row.active-household { background: #fbfefd; box-shadow: inset 3px 0 0 var(--aqua); }
.initials { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; font-size: 11px; font-weight: 900; }
.initials.navy { background: var(--navy-900); color: #e7faf8; }
.initials.aqua { background: var(--aqua-pale); color: var(--aqua-dark); }
.household-name, .household-share { display: flex; flex-direction: column; }
.household-name strong, .household-share strong { font-size: 12px; }
.household-name span, .household-share span { color: var(--muted); font-size: 10px; }
.response-tag, .deposit-tag { justify-self: start; white-space: nowrap; padding: 5px 8px; border-radius: 6px; font-size: 10px; font-weight: 800; }
.household-edit { border: 0; cursor: pointer; }
.household-edit:hover { filter: brightness(.97); box-shadow: 0 0 0 1px rgba(7,31,46,.08); }
.response-green { background: var(--aqua-pale); color: var(--aqua-dark); }
.response-amber { background: var(--amber-pale); color: var(--amber-dark); }
.response-neutral { background: #eef2f3; color: #5d7079; }
.response-red { background: var(--red-pale); color: var(--red); }
.deposit-tag { display: inline-flex; align-items: center; gap: 5px; padding-left: 0; background: transparent; }
.deposit-tag i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.deposit-tag.ready { color: var(--aqua-dark); }
.deposit-tag.waiting { color: #86979e; }
.decision-note { display: flex; gap: 12px; margin-top: 18px; padding: 14px 15px; border-radius: 11px; background: #f2f7f7; }
.note-icon { flex: 0 0 23px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-pale); color: var(--navy-700); font-size: 12px; font-weight: 900; }
.decision-note strong { font-size: 11px; }
.decision-note p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }

.cost-table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cost-row { display: grid; grid-template-columns: minmax(220px, 1.6fr) minmax(100px, .7fr) minmax(80px, .5fr) minmax(90px, .55fr); gap: 12px; align-items: center; min-height: 62px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; }
.cost-row:first-child { border-top: 0; }
.cost-row > span { display: flex; flex-direction: column; }
.cost-row > span:nth-child(n+3) { align-items: flex-end; }
.cost-row small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.cost-row em { align-self: flex-start; padding: 4px 7px; border-radius: 5px; background: #f0f5f5; color: #547079; font-size: 9px; font-style: normal; font-weight: 800; }
.cost-header { min-height: 38px; background: #f7f9f9; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cost-total { background: #f7fbfa; }
.cost-total strong { color: var(--navy-950); font-size: 13px; }
.deposit-callout { gap: 38px; margin-top: 17px; padding: 16px 18px; border-radius: 11px; background: var(--navy-950); color: #fff; }
.deposit-callout div { min-width: 130px; display: flex; flex-direction: column; }
.deposit-callout span { color: #84aaa9; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.deposit-callout strong { margin-top: 3px; font-size: 13px; }
.deposit-callout p { margin: 0 0 0 auto; max-width: 265px; color: #abc1c8; font-size: 10px; }

.response-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.response-detail-card { padding: 18px; border: 1px solid var(--line); border-radius: 13px; }
.response-detail-card.highlight { border-color: #e7d4a5; background: #fffdfa; }
.response-person { gap: 10px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.response-person > div:last-child { display: flex; flex-direction: column; }
.response-person strong { font-size: 12px; }
.response-person span { color: var(--muted); font-size: 10px; }
.response-detail-card dl { margin: 8px 0 0; }
.response-detail-card dl > div { display: flex; justify-content: space-between; gap: 15px; padding: 9px 0; }
.response-detail-card dt { color: var(--muted); font-size: 10px; }
.response-detail-card dd { margin: 0; font-size: 10px; font-weight: 800; text-align: right; }
.response-detail-card dd.muted { max-width: 165px; color: #7a8b92; font-weight: 500; }
.dot { width: 6px; height: 6px; display: inline-block; margin-right: 5px; border-radius: 50%; }
.dot.green { background: var(--aqua); }
.dot.amber { background: var(--amber); }
.dot.gray { background: #91a1a7; }
.dot.red { background: var(--red); }
.privacy-explainer { display: flex; gap: 13px; margin-top: 16px; padding: 15px 17px; border-radius: 11px; background: var(--blue-pale); }
.privacy-explainer svg { flex: 0 0 22px; width: 22px; fill: none; stroke: var(--navy-700); stroke-width: 1.7; }
.privacy-explainer strong { font-size: 11px; }
.privacy-explainer p { margin: 2px 0 0; color: var(--navy-700); font-size: 10px; }

.scenario-layout { display: grid; grid-template-columns: 1fr 240px; gap: 18px; }
.scenario-controls { padding: 17px; border: 1px solid var(--line); border-radius: 13px; }
.scenario-controls h3 { margin: 0 0 11px; font-size: 12px; }
.scenario-person { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; min-height: 66px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.scenario-person + .scenario-person { margin-top: 9px; }
.scenario-person.locked { cursor: default; background: #f7f9f9; }
.scenario-person input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-check { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 6px; color: transparent; font-size: 12px; font-weight: 900; }
.toggle-check.checked, .scenario-person input:checked + .toggle-check { border-color: var(--aqua); background: var(--aqua); color: var(--navy-950); }
.scenario-person > span:nth-last-child(2) { display: flex; flex-direction: column; }
.scenario-person strong { font-size: 11px; }
.scenario-person small { color: var(--muted); font-size: 9px; }
.scenario-person > span:last-child { font-size: 11px; font-weight: 800; }
.scenario-result { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 221px; padding: 20px; border-radius: 13px; text-align: center; transition: background .25s ease, color .25s ease; }
.scenario-result.viable { background: var(--aqua-pale); }
.scenario-result.not-viable { background: var(--red-pale); }
.scenario-result > span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.scenario-result > strong { margin-top: 8px; color: var(--navy-950); font-size: 34px; line-height: 1; letter-spacing: -.04em; }
.scenario-result > p { margin: 4px 0 16px; color: var(--muted); font-size: 10px; }
.scenario-verdict { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 100px; background: rgba(255,255,255,.72); color: var(--aqua-dark); font-size: 9px; font-weight: 800; }
.not-viable .scenario-verdict { color: var(--red); }
.scenario-verdict i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.scenario-result > small { max-width: 180px; margin-top: 9px; color: var(--muted); font-size: 9px; }
.scenario-warning { display: flex; gap: 10px; align-items: center; margin-top: 15px; padding: 13px 15px; border: 1px solid #efd1cd; border-radius: 10px; background: #fff8f6; }
.scenario-warning > span { width: 23px; height: 23px; flex: 0 0 23px; display: grid; place-items: center; border-radius: 50%; background: var(--red-pale); color: var(--red); font-size: 12px; font-weight: 900; }
.scenario-warning p { margin: 0; color: #695c59; font-size: 10px; }

.response-panel { position: sticky; top: 16px; overflow: hidden; }
.response-panel-head { padding: 25px 24px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(145deg, #f7fbfa, #fff); }
.response-panel-head h2 { margin: 6px 0 4px; color: var(--navy-950); font-size: 19px; line-height: 1.25; letter-spacing: -.025em; }
.response-panel-head p { margin: 0; color: var(--muted); font-size: 11px; }
.response-empty { padding: 32px 24px; text-align: center; }
.response-empty .empty-household-icon { width: 42px; height: 42px; display: grid; place-items: center; margin: 0 auto 11px; border-radius: 13px; background: var(--aqua-pale); color: var(--aqua-dark); font-size: 24px; line-height: 1; }
.response-empty > strong { display: block; color: var(--navy-950); font-size: 14px; }
.response-empty > p { margin: 5px 0 16px; color: var(--muted); font-size: 11px; }
#commitment-form { padding: 21px 24px 22px; }
.choice-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; border: 0; }
.choice-group legend, .form-field > label { margin-bottom: 8px; color: var(--navy-800); font-size: 11px; font-weight: 800; }
.choice-group legend { grid-column: 1 / -1; }
.choice-button { min-height: 65px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); text-align: left; cursor: pointer; transition: border .18s ease, background .18s ease; }
.choice-button:hover { border-color: #a8c8c8; }
.choice-button.selected { border-color: var(--aqua); background: #f2fbfa; box-shadow: inset 0 0 0 1px var(--aqua); }
.choice-button span { display: flex; align-items: center; gap: 6px; }
.choice-button strong { font-size: 10px; }
.choice-button small { display: block; margin: 4px 0 0 14px; color: var(--muted); font-size: 8px; line-height: 1.25; }
.choice-dot { width: 8px; height: 8px; border: 1.5px solid #99adb5; border-radius: 50%; }
.selected .choice-dot { border: 2px solid var(--paper); background: var(--aqua); box-shadow: 0 0 0 1.5px var(--aqua); }
.form-field { display: flex; flex-direction: column; margin-top: 17px; }
.form-field > label { display: flex; justify-content: space-between; margin-bottom: 6px; }
.form-field > label span { color: var(--muted); font-size: 9px; font-weight: 500; }
.form-field > small, .money-input + small { margin-top: 5px; color: var(--muted); font-size: 9px; }
.money-input { position: relative; }
.money-input span { position: absolute; left: 12px; top: 50%; color: var(--navy-700); font-size: 12px; font-weight: 800; transform: translateY(-50%); }
.money-input input, textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 9px; background: #fcfdfd; color: var(--ink); }
.money-input input { height: 42px; padding: 0 12px 0 27px; font-weight: 800; }
textarea { min-height: 70px; padding: 10px 11px; resize: vertical; font-size: 11px; }
textarea::placeholder { color: #a4b2b7; }
.check-row { position: relative; gap: 10px; margin-top: 17px; cursor: pointer; }
.check-row input { position: absolute; opacity: 0; }
.custom-checkbox { width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 5px; color: transparent; font-size: 11px; font-weight: 900; }
.check-row input:checked + .custom-checkbox { border-color: var(--aqua); background: var(--aqua); color: var(--navy-950); }
.check-row > span:last-child { display: flex; flex-direction: column; }
.check-row strong { font-size: 10px; }
.check-row small { color: var(--muted); font-size: 9px; }
.primary-button { width: 100%; min-height: 45px; margin-top: 18px; background: var(--navy-950); color: #fff; font-size: 11px; box-shadow: 0 8px 18px rgba(6,26,39,.14); }
.primary-button:hover { background: var(--navy-800); }
.hero-primary { min-height: 42px; margin: 0; font-size: 12px; }
.hero-primary > span { margin-right: 5px; color: var(--aqua); font-size: 16px; }
.device-note { margin: 8px 0 0; color: #91a1a7; font-size: 8px; text-align: center; }

.toast { position: fixed; right: 22px; bottom: 22px; z-index: 50; display: flex; gap: 10px; align-items: center; min-width: 280px; padding: 13px 15px; border-radius: 12px; background: var(--navy-950); color: #fff; box-shadow: 0 18px 42px rgba(6,26,39,.25); opacity: 0; pointer-events: none; transform: translateY(18px); transition: opacity .25s ease, transform .25s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--aqua); color: var(--navy-950); font-size: 12px; font-weight: 900; }
.toast div { display: flex; flex-direction: column; }
.toast strong { font-size: 11px; }
.toast small { color: #aac0c8; font-size: 9px; }

.household-dialog {
  width: min(620px, calc(100% - 28px));
  max-height: min(760px, calc(100vh - 40px));
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 90px rgba(6,26,39,.28);
}
.household-dialog::backdrop { background: rgba(6,26,39,.58); backdrop-filter: blur(3px); }
.dialog-head { display: flex; justify-content: space-between; gap: 20px; padding: 24px 26px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(145deg, #f4faf9, #fff); }
.dialog-head h2 { margin: 5px 0 2px; color: var(--navy-950); font-size: 22px; letter-spacing: -.025em; }
.dialog-head p { margin: 0; color: var(--muted); font-size: 12px; }
.dialog-close { width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--navy-700); font-size: 22px; line-height: 1; cursor: pointer; }
.manage-household-list { padding: 18px 26px 4px; }
.manage-household-row { display: grid; grid-template-columns: 38px 1fr auto; gap: 11px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.manage-household-row:last-child { border-bottom: 0; }
.manage-household-copy { min-width: 0; display: flex; flex-direction: column; }
.manage-household-copy strong { overflow: hidden; color: var(--navy-950); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.manage-household-copy span { color: var(--muted); font-size: 11px; }
.manage-household-actions { display: flex; align-items: center; gap: 7px; }
.manage-action { padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--navy-700); font-size: 10px; font-weight: 800; cursor: pointer; }
.manage-action:hover { background: #f5f8f8; }
.manage-action.remove { border-color: #f0d2ce; color: var(--red); }
.organizer-label { padding: 5px 8px; border-radius: 6px; background: var(--blue-pale); color: var(--navy-700); font-size: 9px; font-weight: 800; }
.add-household-form { margin-top: 10px; padding: 20px 26px 26px; border-top: 1px solid var(--line); background: #f8faf9; }
.add-household-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.add-household-heading h3 { margin: 0; color: var(--navy-950); font-size: 14px; }
.add-household-heading span { color: var(--muted); font-size: 10px; }
.add-household-fields { display: grid; grid-template-columns: minmax(0, 1fr) 112px 82px 120px; gap: 9px; align-items: end; }
.add-household-fields label { display: flex; flex-direction: column; gap: 5px; color: var(--navy-700); font-size: 10px; font-weight: 800; }
.add-household-fields input, .add-household-fields select { width: 100%; height: 42px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--paper); color: var(--ink); font-size: 12px; }
.add-household-button { min-height: 42px; margin: 0; }

.trip-builder-dialog {
  width: min(780px, calc(100% - 28px));
  max-height: min(820px, calc(100vh - 34px));
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 20px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 100px rgba(6,26,39,.32);
}
.trip-builder-dialog::backdrop { background: rgba(6,26,39,.66); backdrop-filter: blur(4px); }
.builder-head { display: flex; justify-content: space-between; gap: 24px; padding: 25px 30px 20px; }
.builder-head h2 { margin: 5px 0 2px; color: var(--navy-950); font-size: 25px; letter-spacing: -.035em; }
.builder-head p { margin: 0; color: var(--muted); font-size: 13px; }
.builder-progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; padding: 0 30px 22px; border-bottom: 1px solid var(--line); }
.builder-progress span { height: 4px; border-radius: 999px; background: #e4eaeb; transition: background .2s ease; }
.builder-progress span.active { background: var(--aqua); }
.builder-body { min-height: 430px; padding: 28px 30px 30px; }
.builder-step { animation: panelIn .22s ease; }
.builder-step[hidden] { display: none; }
.builder-section-title { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 22px; }
.builder-number { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 9px; background: var(--aqua-pale); color: var(--aqua-dark); font-size: 13px; font-weight: 900; }
.builder-section-title h3 { margin: 0; color: var(--navy-950); font-size: 18px; letter-spacing: -.02em; }
.builder-section-title p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.builder-grid { display: grid; gap: 15px; }
.builder-grid.two-column { grid-template-columns: 1fr 1fr; }
.builder-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.builder-field.full { grid-column: 1 / -1; }
.builder-field > span { color: var(--navy-700); font-size: 13px; font-weight: 800; }
.builder-field input, .builder-field select, .builder-row input, .builder-row select {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fcfdfd;
  color: var(--ink);
  font-size: 14px;
}
.builder-field input:focus, .builder-field select:focus, .builder-row input:focus, .builder-row select:focus { border-color: var(--aqua); }
.builder-list { display: flex; flex-direction: column; gap: 10px; }
.builder-row { display: grid; grid-template-columns: minmax(0, 1.5fr) 118px 82px 36px; gap: 10px; align-items: end; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfc; }
.builder-row.cost-row-editor { grid-template-columns: minmax(0, 1.4fr) 130px minmax(160px, .9fr) 36px; }
.builder-row label { display: flex; flex-direction: column; gap: 5px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 800; }
.builder-row .row-role { align-self: center; padding: 6px 8px; border-radius: 7px; background: var(--blue-pale); color: var(--navy-700); font-size: 10px; font-weight: 900; text-align: center; }
.builder-remove { width: 36px; height: 44px; display: grid; place-items: center; border: 1px solid #efd5d1; border-radius: 9px; background: #fffafa; color: var(--red); font-size: 18px; cursor: pointer; }
.builder-remove:hover { background: var(--red-pale); }
.builder-add-button { width: 100%; min-height: 44px; margin-top: 11px; border: 1px dashed #aac7c7; border-radius: 10px; background: #f8fcfb; color: var(--aqua-dark); font-size: 13px; font-weight: 800; cursor: pointer; }
.builder-add-button span { margin-right: 4px; font-size: 16px; }
.builder-add-button:hover { border-style: solid; background: var(--aqua-pale); }
.split-rule-guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 13px; }
.split-rule-guide span { padding: 10px; border-radius: 9px; background: #f2f6f6; color: var(--muted); font-size: 10px; line-height: 1.35; }
.split-rule-guide strong { display: block; margin-bottom: 2px; color: var(--navy-700); font-size: 11px; }
.builder-money { position: relative; }
.builder-money i { position: absolute; left: 13px; top: 50%; color: var(--navy-700); font-size: 14px; font-style: normal; font-weight: 800; transform: translateY(-50%); }
.builder-money input { padding-left: 28px; }
.timing-preview { display: flex; gap: 11px; align-items: center; margin-top: 18px; padding: 14px 15px; border-radius: 11px; background: var(--blue-pale); }
.timing-preview > span { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); color: var(--navy-700); font-size: 12px; font-weight: 900; }
.timing-preview p { margin: 0; color: var(--navy-700); font-size: 13px; }
.builder-review { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; }
.review-hero { display: flex; justify-content: space-between; gap: 20px; padding: 18px; background: linear-gradient(130deg, var(--navy-950), var(--navy-800)); color: #fff; }
.review-hero h4 { margin: 0 0 3px; font-size: 18px; }
.review-hero p { margin: 0; color: #b5cbd2; font-size: 12px; }
.review-total { align-self: center; text-align: right; }
.review-total span { display: block; color: #8eb2b7; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.review-total strong { font-size: 22px; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.review-grid > div { min-height: 78px; padding: 14px 16px; border-right: 1px solid var(--line); }
.review-grid > div:last-child { border-right: 0; }
.review-grid span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.review-grid strong { display: block; margin-top: 4px; color: var(--navy-950); font-size: 13px; }
.review-costs { padding: 13px 16px; border-top: 1px solid var(--line); }
.review-costs div { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; color: var(--muted); font-size: 12px; }
.review-costs strong { color: var(--navy-800); }
.review-warning { display: flex; gap: 10px; align-items: center; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--amber-pale); color: var(--amber-dark); }
.review-warning > span { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; border-radius: 50%; background: #fff; font-size: 11px; font-weight: 900; }
.review-warning p { margin: 0; font-size: 12px; }
.builder-footer { display: flex; align-items: center; gap: 10px; padding: 17px 30px; border-top: 1px solid var(--line); background: #f8faf9; }
.builder-footer .secondary-button { min-width: 90px; min-height: 44px; }
.builder-footer > span { margin-right: auto; color: var(--muted); font-size: 11px; }
.builder-next { width: auto; min-width: 165px; min-height: 44px; margin: 0; padding: 0 18px; }

.cost-plan-dialog {
  width: min(760px, calc(100% - 28px));
  max-height: min(820px, calc(100vh - 36px));
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 90px rgba(6,26,39,.3);
}
.cost-plan-dialog::backdrop { background: rgba(6,26,39,.62); backdrop-filter: blur(3px); }
.cost-editor-body { min-height: 330px; padding: 22px 26px 26px; }
.cost-editor-footer { display: flex; align-items: center; gap: 10px; padding: 16px 26px; border-top: 1px solid var(--line); background: #f8faf9; }
.cost-editor-footer p { max-width: 310px; margin: 0 auto 0 0; color: var(--muted); font-size: 11px; }
.cost-editor-footer .secondary-button { min-width: 84px; min-height: 42px; }
.cost-save-button { width: auto; min-width: 130px; min-height: 42px; margin: 0; padding: 0 16px; }

.remote-error { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; padding: 13px 16px; border: 1px solid #efd1cd; border-radius: 11px; background: #fff8f6; color: #695c59; font-size: 12px; }
.remote-error[hidden] { display: none; }
.remote-error strong { color: var(--red); }
.remote-error a { margin-left: auto; color: var(--navy-900); font-weight: 800; }
.remote-link-error .trip-hero, .remote-link-error .metrics-grid, .remote-link-error .workspace-grid { display: none; }

.participant-identity { min-width: 210px; padding: 15px 17px; border: 1px solid #b8dfda; border-radius: 12px; background: linear-gradient(145deg, var(--aqua-pale), #f7fdfc); text-align: left; }
.participant-identity[hidden] { display: none; }
.participant-identity span, .participant-identity strong, .participant-identity small { display: block; }
.participant-identity span { color: var(--aqua-dark); font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.participant-identity strong { margin-top: 3px; color: var(--navy-950); font-size: 14px; }
.participant-identity small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.participant-mode .organizer-only { display: none !important; }
.participant-mode .hero-actions { max-width: 260px; }
.participant-mode .readiness-strip { margin-bottom: 0; }
.participant-mode .decision-note { margin-top: 20px; }
.participant-mode #response-save-note { color: var(--aqua-dark); font-weight: 700; }

.invite-dialog {
  width: min(720px, calc(100% - 28px));
  max-height: min(820px, calc(100vh - 36px));
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 20px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 100px rgba(6,26,39,.32);
}
.invite-dialog::backdrop { background: rgba(6,26,39,.66); backdrop-filter: blur(4px); }
.date-poll-banner { display: flex; align-items: center; gap: 18px; padding: 18px; margin-bottom: 24px; border-left: 4px solid var(--aqua-dark); border-radius: 10px; background: var(--aqua-pale); }
.date-poll-banner[hidden], .date-vote-form[hidden], #date-editor-poll[hidden], #date-editor-fixed[hidden], #builder-poll-fields[hidden], #builder-fixed-start[hidden], #builder-fixed-end[hidden] { display: none; }
.date-poll-banner strong { color: var(--navy-950); font-size: 16px; }
.date-poll-banner p, .date-vote-form > p, .date-editor-note, .date-suggestion p { margin: 6px 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.date-poll-banner .compact-button { margin-left: auto; flex-shrink: 0; }
.date-panel-tools { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.date-panel-tools .primary-button { width: auto; padding: 10px 18px; margin: 0; }
.date-table-scroll { max-width: 100%; overflow-x: auto; margin: 18px 0 24px; border: 1px solid var(--line); border-radius: 12px; }
.date-results-table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: left; }
.date-results-table caption { text-align: left; padding: 14px; font-weight: 700; color: var(--navy-950); }
.date-results-table th, .date-results-table td { min-width: 150px; padding: 14px; border-top: 1px solid var(--line); vertical-align: top; }
.date-results-table th { color: var(--navy-900); font-weight: 700; background: #f5f9fa; }
.date-results-table thead th:first-child { min-width: 130px; }
.date-results-table small { display: block; margin: 6px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.date-results-table .date-best { color: var(--aqua-dark); font-weight: 700; }
.date-answer { font-size: 14px; }
.date-answer.available { color: var(--aqua-dark); font-weight: 700; }
.date-answer.maybe { color: var(--amber-dark); }
.date-answer.unavailable { color: var(--red); }
.date-answer.unanswered { color: var(--muted); }
.date-vote-form { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.date-vote-form h3 { color: var(--navy-950); font-size: 18px; margin: 0 0 8px; }
.date-vote-option { min-width: 0; margin: 20px 0; padding: 16px; border: 1px solid var(--line-strong); border-radius: 12px; }
.date-vote-option legend { padding: 0 6px; color: var(--navy-950); font-size: 15px; font-weight: 700; }
.date-vote-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.date-vote-choices label { display: flex; align-items: center; gap: 7px; cursor: pointer; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.date-vote-choices label:has(input:checked) { border-color: var(--aqua-dark); background: var(--aqua-pale); color: var(--aqua-dark); }
.date-vote-choices input { accent-color: var(--aqua-dark); }
.date-suggestion summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--navy-900); }
.date-suggestion { margin: 20px 0; }
.date-range-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.date-range-fields label { min-width: 0; display: flex; flex-direction: column; gap: 7px; color: var(--navy-900); font-size: 14px; }
.date-range-fields input, #builder-date-mode, #date-editor-mode { width: 100%; min-width: 0; min-height: 44px; padding: 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: white; color: var(--navy-950); font: inherit; font-size: 16px; }
.date-option-editor { padding: 16px 0; border-bottom: 1px solid var(--line); }
.date-option-editor strong { font-size: 14px; color: var(--navy-950); }
#builder-poll-fields { grid-column: 1 / -1; }
#builder-poll-fields > p { font-size: 14px; line-height: 1.5; }
#builder-add-date, #date-editor-add { margin-top: 14px; }
.date-suggestion-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.date-suggestion-row span { display: block; color: var(--muted); margin-top: 5px; }
#date-vote-status { min-height: 22px; }
@media (max-width: 650px) {
  .date-poll-banner { align-items: stretch; flex-direction: column; }
  .date-poll-banner .compact-button { margin-left: 0; }
  .date-vote-choices { display: grid; grid-template-columns: 1fr 1fr; }
  .date-range-fields { grid-template-columns: 1fr; }
  .date-suggestion-row { align-items: flex-start; flex-direction: column; }
  .date-panel-tools .primary-button { width: 100%; }
}
.invite-body { padding: 22px 26px 24px; }
.invite-state { display: flex; gap: 12px; align-items: center; padding: 15px 16px; border-radius: 12px; background: var(--blue-pale); }
.invite-state > span { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 9px; background: var(--paper); color: var(--navy-700); font-size: 15px; font-weight: 900; }
.invite-state > div { display: flex; flex-direction: column; }
.invite-state strong { color: var(--navy-900); font-size: 12px; }
.invite-state p { margin: 2px 0 0; color: var(--navy-700); font-size: 10px; }
.invite-state.live { background: var(--aqua-pale); }
.invite-state.live > span { color: var(--aqua-dark); }
.invite-state.dirty { background: var(--amber-pale); }
.invite-state.dirty > span { color: var(--amber-dark); }
.invite-link-list { display: flex; flex-direction: column; gap: 10px; margin-top: 17px; }
.invite-empty { padding: 24px 18px; border: 1px dashed var(--line-strong); border-radius: 12px; background: #fbfcfc; text-align: center; }
.invite-empty strong { display: block; color: var(--navy-950); font-size: 13px; }
.invite-empty span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.invite-link-row { display: grid; grid-template-columns: minmax(140px, .8fr) minmax(200px, 1.2fr) auto; gap: 10px; align-items: end; padding: 15px; border: 1px solid var(--line); border-radius: 12px; }
.invite-party { min-width: 0; display: flex; flex-direction: column; }
.invite-party strong { overflow: hidden; color: var(--navy-950); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.invite-party span { color: var(--muted); font-size: 13px; }
.invite-email-area { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.invite-email-area label, .invite-email-area small { color: var(--muted); font-size: 12px; }
.invite-email { width: 100%; height: 42px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: white; color: var(--navy-950); font: inherit; font-size: 14px; }
.invite-email-actions { display: flex; gap: 7px; }
.invite-link-actions { grid-column: 1 / -1; display: flex; gap: 8px; min-width: 0; }
.invite-url { flex: 1; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #f7f9f9; color: #60737b; font-size: 12px; }
.invite-copy, .invite-send, .invite-remind { min-height: 42px; padding: 0 12px; border: 1px solid #a9ceca; border-radius: 8px; background: var(--aqua-pale); color: var(--aqua-dark); font-size: 13px; font-weight: 700; cursor: pointer; }
.invite-send { white-space: nowrap; background: var(--aqua-dark); border-color: var(--aqua-dark); color: white; }
.invite-send:hover { filter: brightness(.94); }
.invite-copy:hover { background: #d8f1ed; }
.invite-copy:disabled, .invite-send:disabled, .invite-remind:disabled { border-color: var(--line); background: #f3f5f5; color: #93a2a8; cursor: not-allowed; }
.organizer-link { display: flex; justify-content: space-between; gap: 15px; align-items: center; margin-top: 16px; padding: 14px 15px; border-radius: 11px; background: #f2f7f7; }
.organizer-link[hidden] { display: none; }
.organizer-link > div { display: flex; flex-direction: column; }
.organizer-link strong { color: var(--navy-900); font-size: 11px; }
.organizer-link span { color: var(--muted); font-size: 9px; }
.invite-privacy-note { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0; color: var(--muted); font-size: 9px; }
.invite-privacy-note > span { width: 18px; height: 18px; flex: 0 0 18px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-pale); color: var(--navy-700); font-size: 9px; font-weight: 900; }
.invite-footer { display: flex; gap: 10px; align-items: center; padding: 16px 26px; border-top: 1px solid var(--line); background: #f8faf9; }
.invite-footer > span { margin-right: auto; color: var(--muted); font-size: 10px; }
.invite-footer .secondary-button { min-height: 42px; }
.invite-primary { width: auto; min-width: 170px; min-height: 42px; margin: 0; padding: 0 16px; }
.primary-button:disabled, .secondary-button:disabled { opacity: .58; cursor: wait; transform: none; }

.plan-lifecycle { margin: 20px 0 22px; padding: 18px 19px; border: 1px solid #cfe0e1; border-radius: 14px; background: linear-gradient(135deg, #f8fcfb, #f2f7f8); }
.plan-lifecycle-head, .plan-lifecycle-foot, .activity-heading { display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.plan-lifecycle-head h3, .activity-heading h3 { margin: 3px 0 0; color: var(--navy-950); font-size: 16px; letter-spacing: -.02em; }
.plan-lifecycle-badges, .plan-lifecycle-actions { display: flex; gap: 8px; align-items: center; }
.plan-action-button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 13px; border: 1px solid #a9c2c7; border-radius: 9px; background: #fff; color: var(--navy-800); font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; box-shadow: 0 3px 10px rgba(6,26,39,.05); cursor: pointer; }
.plan-action-button:hover { border-color: var(--aqua); background: var(--aqua-pale); color: var(--aqua-dark); }
.plan-action-button:disabled { opacity: .58; cursor: wait; }
.plan-version-chip, .plan-status-badge { padding: 5px 8px; border-radius: 7px; font-size: 9px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.plan-version-chip { background: var(--navy-950); color: #fff; }
.plan-status-badge { border: 1px solid transparent; }
.plan-status-badge.draft { background: #eef2f3; color: var(--muted); }
.plan-status-badge.collecting { background: var(--blue-pale); color: var(--navy-700); }
.plan-status-badge.ready { background: var(--aqua-pale); color: var(--aqua-dark); }
.plan-status-badge.locked { background: var(--navy-950); color: #dffaf6; }
.plan-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 17px 0; }
.plan-step { position: relative; display: flex; gap: 9px; align-items: center; min-width: 0; color: #91a0a6; }
.plan-step:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 15px; left: 35px; right: 8px; height: 2px; background: #d8e1e3; }
.plan-step i { position: relative; z-index: 1; width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border: 2px solid #d8e1e3; border-radius: 50%; background: #f7faf9; font-size: 10px; font-style: normal; font-weight: 900; }
.plan-step span { position: relative; z-index: 1; min-width: 0; padding-right: 8px; background: #f5f9f9; }
.plan-step strong, .plan-step small { display: block; }
.plan-step strong { font-size: 10px; }
.plan-step small { margin-top: 1px; font-size: 8px; white-space: nowrap; }
.plan-step.complete, .plan-step.active { color: var(--aqua-dark); }
.plan-step.complete::after { background: var(--aqua); }
.plan-step.complete i { border-color: var(--aqua); background: var(--aqua); color: var(--navy-950); }
.plan-step.active i { border-color: var(--aqua); background: #fff; box-shadow: 0 0 0 4px rgba(43,185,173,.12); }
.plan-step[data-plan-step="locked"].active { color: var(--navy-950); }
.plan-step[data-plan-step="locked"].active i { border-color: var(--navy-950); background: var(--navy-950); color: #fff; box-shadow: 0 0 0 4px rgba(6,26,39,.1); }
.plan-lifecycle-foot { padding-top: 14px; border-top: 1px solid #dce7e8; }
.plan-lifecycle-foot > p { max-width: 480px; margin: 0; color: var(--muted); font-size: 10px; }
.lifecycle-primary { width: auto; min-width: 125px; min-height: 36px; margin: 0; padding: 0 13px; }
.lifecycle-primary:disabled { cursor: not-allowed; }

.activity-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.activity-heading > span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.activity-list { display: flex; flex-direction: column; margin-top: 11px; }
.activity-item { position: relative; display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: start; padding: 10px 0; }
.activity-item + .activity-item { border-top: 1px solid #edf1f2; }
.activity-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--blue-pale); color: var(--navy-700); font-size: 11px; font-weight: 900; }
.activity-item.locked .activity-icon { background: var(--navy-950); color: #fff; }
.activity-item.updated .activity-icon { background: var(--amber-pale); color: var(--amber-dark); }
.activity-copy strong, .activity-copy span { display: block; }
.activity-copy strong { color: var(--navy-900); font-size: 11px; }
.activity-copy span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.activity-item time { color: #82949b; font-size: 9px; white-space: nowrap; }
.activity-empty { padding: 16px; border: 1px dashed var(--line-strong); border-radius: 10px; color: var(--muted); font-size: 10px; text-align: center; }

.reconfirmation-notice { display: flex; gap: 10px; align-items: flex-start; margin: 16px 20px 0; padding: 13px 14px; border: 1px solid #efdcae; border-radius: 11px; background: var(--amber-pale); }
.reconfirmation-notice[hidden] { display: none; }
.reconfirmation-notice > span { width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--amber-dark); font-weight: 900; }
.reconfirmation-notice strong { display: block; color: var(--amber-dark); font-size: 11px; }
.reconfirmation-notice p { margin: 2px 0 0; color: #806735; font-size: 9px; }
.reconfirmation-notice.locked { border-color: #c7d6da; background: #eef4f4; }
.reconfirmation-notice.locked > span { color: var(--navy-800); }
.reconfirmation-notice.locked strong { color: var(--navy-900); }
.reconfirmation-notice.locked p { color: var(--muted); }
.plan-locked #edit-cost-plan, .plan-locked #manage-households, .plan-locked [data-open-households], .plan-locked #edit-trip-details { opacity: .45; }
.plan-locked #commitment-form { opacity: .62; }

.trip-details-dialog { width: min(760px, calc(100% - 28px)); max-height: min(860px, calc(100vh - 36px)); margin: auto; padding: 0; overflow: auto; border: 0; border-radius: 20px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 100px rgba(6,26,39,.32); }
.trip-details-dialog::backdrop { background: rgba(6,26,39,.66); backdrop-filter: blur(4px); }
.trip-details-body { padding: 24px 26px 26px; }
.trip-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.cover-editor { display: grid; grid-template-columns: 230px 1fr; gap: 18px; align-items: center; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.cover-preview-wrap { height: 138px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #e7eff0; }
.cover-preview-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; }
.cover-editor-copy h3 { margin: 0; color: var(--navy-950); font-size: 16px; }
.cover-editor-copy p { margin: 4px 0 12px; color: var(--muted); font-size: 13px; }
.cover-upload-button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; padding: 0 13px; border-radius: 9px; background: var(--navy-950); color: #fff; font-size: 12px; font-weight: 800; cursor: pointer; }
.cover-upload-button:hover { background: var(--navy-800); }
.cover-reset { margin-left: 10px; }
.cover-editor-copy small { display: block; margin-top: 9px; color: var(--muted); font-size: 12px; }
.trip-details-footer { display: flex; gap: 10px; align-items: center; padding: 16px 26px; border-top: 1px solid var(--line); background: #f8faf9; }
.trip-details-footer > p { margin: 0 auto 0 0; color: var(--muted); font-size: 12px; }
.trip-details-footer .secondary-button { min-width: 90px; min-height: 42px; }
.trip-details-save { width: auto; min-width: 130px; min-height: 42px; margin: 0; padding: 0 16px; }

.pact-dialog { width: min(720px, calc(100% - 28px)); max-height: min(860px, calc(100vh - 36px)); margin: auto; padding: 0; overflow: auto; border: 0; border-radius: 20px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 100px rgba(6,26,39,.34); }
.pact-dialog::backdrop { background: rgba(6,26,39,.7); backdrop-filter: blur(4px); }
.pact-dialog-head { background: linear-gradient(135deg, var(--navy-950), var(--navy-800)); color: #fff; }
.pact-dialog-head h2 { color: #fff; }
.pact-dialog-head p { color: #b8cdd4; }
.pact-dialog-head .section-kicker { color: #76d7cd; }
.pact-dialog-head .dialog-close { color: #fff; }
.pact-content { padding: 24px 26px 28px; }
.pact-seal { display: flex; gap: 14px; align-items: center; padding: 16px; border: 1px solid #bce0dc; border-radius: 13px; background: var(--aqua-pale); }
.pact-seal > span { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 50%; background: var(--aqua); color: var(--navy-950); font-size: 18px; font-weight: 900; }
.pact-seal strong, .pact-seal small { display: block; }
.pact-seal strong { color: var(--navy-950); font-size: 13px; }
.pact-seal small { margin-top: 2px; color: var(--aqua-dark); font-size: 10px; }
.pact-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.pact-summary > div { padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfc; }
.pact-summary span, .pact-summary strong { display: block; }
.pact-summary span { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.pact-summary strong { margin-top: 3px; color: var(--navy-900); font-size: 12px; }
.pact-section { margin-top: 20px; }
.pact-section h3 { margin: 0 0 9px; color: var(--navy-950); font-size: 13px; }
.pact-cost-row, .pact-party-row { display: grid; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid #e9eeee; font-size: 10px; }
.pact-cost-row { grid-template-columns: 1fr auto; }
.pact-party-row { grid-template-columns: 1fr auto auto; }
.pact-cost-row span, .pact-party-row span { color: var(--muted); }
.pact-cost-row strong, .pact-party-row strong { color: var(--navy-900); }
.pact-confirmed { padding: 4px 7px; border-radius: 100px; background: var(--aqua-pale); color: var(--aqua-dark) !important; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.pact-footer { display: flex; gap: 14px; align-items: center; padding: 16px 26px; border-top: 1px solid var(--line); background: #f8faf9; }
.pact-footer p { margin: 0 auto 0 0; color: var(--muted); font-size: 9px; }
.pact-done { width: auto; min-width: 90px; min-height: 40px; margin: 0; padding: 0 15px; }

@media (max-width: 1100px) {
  .trip-hero { grid-template-columns: 260px 1fr; }
  .hero-actions { grid-column: 2; max-width: none; flex-direction: row; align-items: center; gap: 10px; padding: 0 28px 22px 34px; text-align: left; }
  .hero-actions .primary-button, .hero-actions .secondary-button { width: auto; }
  .hero-actions p { margin: 0; }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .workspace-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .household-row { grid-template-columns: 40px 1fr 90px; }
  .household-row .response-tag, .household-row .deposit-tag { grid-column: span 1; margin-left: 52px; }
  .household-row .deposit-tag { margin-left: 0; }
}

@media (max-width: 820px) {
  .topbar { padding: 0 20px; }
  .prototype-label, .privacy-chip { display: none; }
  .account-name { display: none; }
  .dashboard-heading { align-items: flex-start; flex-direction: column; }
  .dashboard-signed-out { grid-template-columns: auto 1fr; }
  .dashboard-sign-in { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
  .page-shell { width: min(100% - 28px, 680px); margin-top: 18px; }
  .trip-hero { grid-template-columns: 1fr; }
  .trip-image-wrap { min-height: 200px; }
  .trip-image-wrap::after { background: linear-gradient(0deg, rgba(6,26,39,.18), transparent 60%); }
  .trip-hero-copy { padding: 23px 22px 15px; }
  .hero-actions { grid-column: 1; padding: 0 22px 22px; }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .workspace-grid { grid-template-columns: 1fr; }
  .response-panel { position: static; order: -1; }
  .choice-group { grid-template-columns: repeat(4, 1fr); }
  .choice-button small { display: none; }
  .tab-panel { min-height: 0; }
}

@media (max-width: 580px) {
  .topbar { height: 62px; }
  .brand { font-size: 17px; }
  .brand-mark { width: 28px; height: 28px; }
  .topbar-link { display: none; }
  .sign-in-link { min-height: 35px; padding: 0 11px; }
  .account-menu { position: fixed; top: 70px; right: 10px; left: 10px; width: auto; }
  .page-shell { width: min(100% - 20px, 500px); margin-bottom: 35px; }
  .dashboard-heading { padding: 23px 20px; }
  .dashboard-heading h1 { font-size: 30px; }
  .dashboard-create { width: 100%; }
  .dashboard-signed-out { grid-template-columns: 1fr; padding: 22px 20px; }
  .dashboard-lock { display: none; }
  .trip-card-list { grid-template-columns: 1fr; }
  .trip-image-wrap { min-height: 160px; }
  .trip-hero-copy { padding: 20px 17px 13px; }
  .trip-meta { font-size: 13px; }
  .trip-facts { flex-wrap: wrap; }
  .hero-actions { display: grid; grid-template-columns: 1fr; padding: 0 17px 20px; }
  .hero-actions .primary-button, .hero-actions .secondary-button { width: 100%; }
  .hero-actions p { margin-top: 7px; }
  .metrics-grid { grid-template-columns: 1fr; gap: 9px; }
  .metric-card { min-height: 105px; }
  .tab-list { padding: 0 18px; gap: 20px; }
  .tab-panel { padding: 22px 17px; }
  .section-heading { display: block; }
  .section-heading > span { display: inline-block; margin-top: 10px; }
  .readiness-strip { grid-template-columns: 1fr; }
  .ring-wrap { display: none; }
  .household-heading > div > span { display: none; }
  .household-row { grid-template-columns: 38px 1fr auto; gap: 8px; }
  .household-row .household-share { display: none; }
  .household-row .response-tag { grid-column: 2; margin-left: 0; }
  .household-row .deposit-tag { grid-column: 3; }
  .cost-table { overflow-x: auto; }
  .cost-row { min-width: 620px; }
  .deposit-callout { align-items: flex-start; flex-wrap: wrap; gap: 16px; }
  .deposit-callout p { margin-left: 0; }
  .response-detail-grid { grid-template-columns: 1fr; }
  .scenario-layout { grid-template-columns: 1fr; }
  .choice-group { grid-template-columns: 1fr 1fr; }
  .choice-button small { display: block; }
  .toast { left: 10px; right: 10px; bottom: 10px; min-width: 0; }
  .dialog-head, .manage-household-list, .add-household-form { padding-left: 18px; padding-right: 18px; }
  .add-household-heading { align-items: flex-start; flex-direction: column; }
  .add-household-fields { grid-template-columns: 1fr 1fr; }
  .add-household-button { grid-column: 1 / -1; }
  .manage-household-row { grid-template-columns: 34px 1fr; }
  .manage-household-actions { grid-column: 2; }
  .builder-head, .builder-body, .builder-footer { padding-left: 18px; padding-right: 18px; }
  .builder-progress { padding-left: 18px; padding-right: 18px; }
  .builder-body { min-height: 440px; }
  .builder-grid.two-column { grid-template-columns: 1fr; }
  .builder-field.full { grid-column: 1; }
  .builder-row { grid-template-columns: minmax(0, 1fr) 88px 36px; }
  .builder-row:not(.cost-row-editor) label:first-child { grid-column: 1 / -1; }
  .builder-row.cost-row-editor { grid-template-columns: minmax(0, 1fr) 74px 36px; }
  .builder-row.cost-row-editor label:first-child { grid-column: 1 / -1; }
  .builder-row.cost-row-editor label:nth-child(3) { grid-column: 1 / 3; }
  .builder-row.cost-row-editor .builder-remove { grid-column: 3; }
  .split-rule-guide { grid-template-columns: 1fr; }
  .split-rule-guide span { display: none; }
  .split-rule-guide span:first-child { display: block; }
  .review-grid { grid-template-columns: 1fr; }
  .review-grid > div { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .review-grid > div:last-child { border-bottom: 0; }
  .review-hero { align-items: flex-start; flex-direction: column; }
  .review-total { text-align: left; }
  .builder-footer { flex-wrap: wrap; }
  .builder-footer > span { width: 100%; order: -1; }
  .builder-next { flex: 1; min-width: 0; }
  .cost-heading-actions { justify-content: flex-start; margin-top: 10px; }
  .cost-editor-body, .cost-editor-footer { padding-left: 18px; padding-right: 18px; }
  .cost-editor-footer { flex-wrap: wrap; }
  .cost-editor-footer p { width: 100%; max-width: none; }
  .cost-save-button { flex: 1; }
  .participant-identity { width: 100%; }
  .invite-body, .invite-footer { padding-left: 18px; padding-right: 18px; }
  .invite-link-row { grid-template-columns: 1fr; }
  .invite-send { flex: 1; }
  .organizer-link { align-items: flex-start; flex-direction: column; }
  .invite-footer { align-items: stretch; flex-direction: column; }
  .invite-footer > span { margin: 0; }
  .invite-footer .secondary-button, .invite-primary { width: 100%; }
  .plan-lifecycle-head, .plan-lifecycle-foot { align-items: flex-start; flex-direction: column; }
  .plan-steps { grid-template-columns: 1fr 1fr; gap: 13px 8px; }
  .plan-step:not(:last-child)::after { display: none; }
  .plan-lifecycle-actions { width: 100%; flex-wrap: wrap; }
  .plan-action-button { flex: 1; }
  .lifecycle-primary { flex: 1; }
  .activity-item { grid-template-columns: 28px 1fr; }
  .activity-item time { grid-column: 2; }
  .pact-content, .pact-footer { padding-left: 18px; padding-right: 18px; }
  .pact-summary { grid-template-columns: 1fr; }
  .pact-party-row { grid-template-columns: 1fr auto; }
  .pact-party-row .pact-confirmed { grid-column: 1 / -1; justify-self: start; }
  .pact-footer { align-items: stretch; flex-direction: column; }
  .pact-done { width: 100%; }
  .trip-title-row { align-items: flex-start; }
  .hero-edit-button { margin-top: 7px; }
  .trip-details-body, .trip-details-footer { padding-left: 18px; padding-right: 18px; }
  .trip-details-grid { grid-template-columns: 1fr; }
  .cover-editor { grid-template-columns: 1fr; }
  .cover-preview-wrap { height: 180px; }
  .trip-details-footer { align-items: stretch; flex-wrap: wrap; }
  .trip-details-footer > p { width: 100%; }
  .trip-details-save { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
[hidden] { display: none !important; }
.public-nav { display:flex; gap:24px; align-items:center; }
.public-nav a { color:white; text-decoration:none; font-size:16px; }
.public-page h2 { font-size:clamp(26px,3vw,36px); line-height:1.2; }
.public-page h3 { font-size:22px; line-height:1.3; }
.public-page p, .public-page li { font-size:16px; line-height:1.7; }
.public-page a:not(.primary-button):not(.secondary-button) { color:var(--aqua-dark); text-underline-offset:4px; }
.public-section { padding:44px 0; border-top:1px solid var(--line); scroll-margin-top:24px; }
.public-section > h2 { margin:14px 0 28px; }
.public-section .welcome-steps { border:0; padding:0; }
.product-example { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.example-board { border:1px solid var(--line); border-radius:16px; background:white; padding:28px; }
.example-board h3 { margin:12px 0 24px; }
.example-board dl { margin:0; }
.example-board dl > div { padding:12px 0; border-top:1px solid var(--line); }
.example-board dt { font-size:14px; color:var(--muted); }
.example-board dd { margin:5px 0 0; font-size:16px; font-weight:600; }
.example-board > p { font-size:14px; color:var(--muted); }
.public-faq { max-width:860px; margin:auto; }
.public-faq details { border-bottom:1px solid var(--line); padding:18px 0; }
.public-faq summary { cursor:pointer; font-size:18px; font-weight:600; line-height:1.5; }
.public-faq p { color:var(--muted); margin-bottom:0; }
.guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.guide-grid article { border:1px solid var(--line); border-radius:16px; padding:24px; background:white; }
.guide-grid h3 { margin:0 0 16px; }
.guide-grid p { color:var(--muted); }
.guide-intro { max-width:820px; padding:44px 0; }
.guide-intro h1, .guide-article h1 { font-size:clamp(32px,4.5vw,52px); line-height:1.12; letter-spacing:-.025em; }
.guide-article { max-width:780px; margin:32px auto 64px; }
.guide-article h2 { margin:38px 0 16px; font-size:28px; }
.guide-article p, .guide-article li { font-size:18px; }
.guide-article li { margin:8px 0; }
.guide-article .guide-byline { color:var(--muted); font-size:14px; margin:20px 0 32px; }
.guide-callout { background:#e5f7f4; padding:24px; border-radius:12px; margin:28px 0; }
.guide-callout h2 { margin-top:0; }
.guide-article table { width:100%; border-collapse:collapse; margin:24px 0; font-size:16px; }
.guide-article th, .guide-article td { text-align:left; padding:12px; border:1px solid var(--line); overflow-wrap:anywhere; }
.guide-article caption { text-align:left; font-weight:600; margin-bottom:12px; }
.public-cta { margin:32px 0; padding:32px; background:#e5f7f4; border-radius:16px; }
.public-cta .primary-button { display:inline-flex; width:auto; text-decoration:none; padding:14px 22px; margin-top:12px; }
.public-footer { max-width:1240px; margin:40px auto 0; padding:32px 28px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:16px 28px; }
.public-footer a { color:var(--aqua-dark); font-size:16px; }
.public-footer p { width:100%; font-size:14px; color:var(--muted); }
@media(max-width:760px) { .product-example, .guide-grid { grid-template-columns:1fr; } .public-nav { gap:14px; } .public-nav a { font-size:14px; } .public-section { padding:28px 0; } .guide-article th, .guide-article td { padding:8px; font-size:14px; } .topbar-actions { flex-wrap:wrap; justify-content:flex-end; } }
.login-shell { max-width:540px; margin:48px auto; padding:0 20px; }
.login-card { background:white; border:1px solid var(--line); border-radius:20px; padding:32px; }
.login-card h1 { font-size:32px; margin:16px 0; line-height:1.2; }
.login-card p { line-height:1.6; }
.login-card form { display:grid; gap:14px; margin-top:24px; }
.login-card label { font-size:16px; font-weight:600; }
.login-card input { width:100%; font:inherit; font-size:18px; padding:14px; border:1px solid var(--line-strong); border-radius:8px; }
.login-card .primary-button, .login-card .secondary-button { width:100%; justify-content:center; text-align:center; text-decoration:none; min-height:48px; }
.login-card .login-note { font-size:14px; color:var(--muted); }
.login-alternative { display:grid; gap:16px; text-align:center; margin:24px 0; }
.login-back { display:block; text-align:center; margin-top:24px; color:var(--aqua-dark); }
#login-status { font-size:16px; overflow-wrap:anywhere; }
#login-code { letter-spacing:5px; font-size:24px; }
@media(max-width:580px) { .login-shell { margin:24px auto; } .login-card { padding:24px 20px; } }
.welcome-hero { display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; padding:36px 0 52px; }
.welcome-copy h1 { font-size:clamp(42px,6vw,76px); line-height:1.06; letter-spacing:-.04em; margin:20px 0; }
.welcome-copy > p { font-size:20px; line-height:1.65; max-width:520px; }
.welcome-actions { display:flex; gap:12px; flex-wrap:wrap; margin:28px 0 12px; }
.welcome-actions a { width:auto; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; padding:14px 24px; }
.welcome-copy .welcome-auth-note { font-size:14px; color:var(--muted); }
.welcome-photo { position:relative; min-width:0; height:460px; border-radius:24px; overflow:hidden; background:#071f2e; }
.welcome-photo img { width:100%; height:100%; object-fit:cover; }
.welcome-photo::after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(7,31,46,.85)); }
.welcome-photo span { position:absolute; left:28px; bottom:28px; z-index:1; color:white; font-size:26px; line-height:1.3; font-weight:600; }
.welcome-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; padding:32px 0; border-top:1px solid var(--line); }
.welcome-steps article > span { color:var(--aqua-dark); font-size:14px; font-weight:700; }
.welcome-steps h2 { font-size:22px; margin:12px 0; }
.welcome-steps p, .welcome-invite p { font-size:16px; line-height:1.6; color:var(--muted); }
.welcome-invite { border-top:1px solid var(--line); padding:28px 0; }
@media(max-width:760px) { .welcome-hero { grid-template-columns:1fr; gap:24px; padding-top:16px; } .welcome-photo { height:280px; } .welcome-steps { grid-template-columns:1fr; gap:20px; } .welcome-copy > p { font-size:18px; } }
.travel-row, .travel-card { border:1px solid var(--line); padding:18px; border-radius:12px; margin:16px 0; }
.travel-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.travel-row label { display:flex; flex-direction:column; gap:6px; font-size:14px; }
.travel-row input, .travel-row select { width:100%; padding:11px; border:1px solid var(--line-strong); border-radius:8px; font:inherit; }
.travel-actions { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; }
.travel-actions a { text-decoration:none; }
.travel-card p { overflow-wrap:anywhere; }
.flight-editor { grid-column:1/-1; min-width:0; border:1px solid var(--line); border-radius:10px; padding:16px; }
.flight-editor legend { font-weight:600; padding:0 6px; }
.flight-editor summary, .driving-details summary, .more-flight-search summary { cursor:pointer; font-size:14px; padding:8px 0; }
.flight-editor summary { font-weight:600; }
.travel-row > .travel-actions, .driving-details, .arrival-add { grid-column:1/-1; }
.arrival-add { justify-self:start; }
.more-flight-search { width:100%; }
.travel-row input[type="checkbox"] { width:auto; align-self:start; }
.flight-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:14px 0; }
.flight-help { display:block; font-size:14px; line-height:1.5; width:100%; }
.saved-flight { border-left:3px solid var(--line-strong); padding:12px 16px; margin:14px 0; background:var(--surface); border-radius:8px; }
@media(max-width:580px) { .flight-grid { grid-template-columns:minmax(0,1fr); } }
#travel-status { color:var(--muted); font-size:14px; }
@media(max-width:580px) { .travel-row { grid-template-columns:1fr; } .travel-row input, .travel-row select { font-size:16px; } }
.party-email-field { grid-column:1 / -1; }
.party-manager-footer { padding:0 28px 24px; display:flex; gap:12px; flex-wrap:wrap; }
.party-manager-footer p { width:100%; font-size:14px; margin:0; color:var(--muted); }
.party-manager-footer .primary-button, .party-manager-footer .secondary-button { width:auto; margin:0; min-height:44px; }
.personal-next-step { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 24px; margin:20px 0; border:1px solid var(--line); border-left:4px solid var(--aqua-dark); border-radius:12px; background:white; }
.personal-next-step h2 { margin:5px 0; font-size:20px; }
.personal-next-step p { margin:0; color:var(--muted); font-size:16px; }
.personal-next-step button { flex-shrink:0; min-height:44px; }
.email-delivery { font-size:14px; color:var(--muted); }
.email-delivery.delivered { color:var(--aqua-dark); }
.email-delivery.failed, .email-delivery.bounced, .email-delivery.complained, .email-delivery.suppressed { color:var(--red); }
@media(max-width:580px) { .personal-next-step { align-items:stretch; flex-direction:column; padding:18px; } }
.primary-button.dashboard-create { width: auto; margin: 0; align-self: flex-start; }
.account-chevron { width: 16px; height: 16px; flex: 0 0 16px; }
.builder-email { grid-column: 1 / -1; }
.range-field { grid-column: 1 / -1; }
.range-trigger { width: 100%; padding: 12px; border: 1px solid #bdcbd3; border-radius: 8px; background: white; color: #133044; text-align: left; cursor: pointer; }
.range-dialog { width: min(420px, calc(100vw - 32px)); padding: 24px; border: 0; border-radius: 16px; color: #133044; }
.range-dialog::backdrop { background: #102b4699; }
.range-nav, .range-actions { display: flex; gap: 10px; justify-content: space-between; align-items: center; margin: 16px 0; }
.range-nav select { min-width: 0; padding: 8px; }
.range-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.range-calendar > span { text-align: center; font-size: 12px; padding: 8px 0; }
.range-day { min-height: 40px; border: 0; border-radius: 6px; background: #f3f6f8; color: #133044; cursor: pointer; }
.range-day.in-range { background: #dcf5eb; }
.range-day.selected { background: #126957; color: white; }
.range-day:focus-visible { outline: 3px solid #167bc0; outline-offset: 1px; }
.builder-cover-preview { width: 100%; max-height: 170px; object-fit: cover; border-radius: 10px; }
.range-day { min-height: 44px; }
@media (max-width: 580px) {
  input, select, textarea { font-size: 16px; }
  .builder-footer .compact-button, .range-actions .compact-button { min-height: 44px; }
  .range-dialog { padding: 18px; }
  .account-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
  #builder-save-note { overflow-wrap: anywhere; }
}

/* Pilot tools follow TripPact's navy and turquoise palette. */
.pilot-form {display:grid;gap:16px;margin-top:24px}.pilot-form label{display:grid;gap:7px;font-size:14px;font-weight:600}.pilot-form input,.pilot-form select,.pilot-form textarea{width:100%;padding:11px;border:1px solid #ccd8df;border-radius:9px;font:inherit;background:#fff;color:#071f2e;box-sizing:border-box}.pilot-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.pilot-checkbox{display:flex!important;align-items:center;gap:8px;font-size:14px;font-weight:500;margin:10px 0}.pilot-checkbox input{width:18px!important;height:18px;flex:none;accent-color:#087e75}.pilot-callout{padding:20px;margin:16px 0;border:1px solid #a1ddd7;border-radius:14px;background:#effbf9}.pilot-callout h3{margin:0 0 8px}.pilot-callout p{line-height:1.6}.pilot-footer{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;padding:24px}.pilot-footer small{color:#516574}.pilot-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}.pilot-metrics>div{display:grid;gap:8px;padding:20px;background:#edf8f7;border-radius:12px}.pilot-metrics strong{font-size:28px}.pilot-metrics span{font-size:14px}.agenda-card{display:flex;justify-content:space-between;gap:16px;padding:20px 0;border-bottom:1px solid #dce5ea}.agenda-card h3{margin:7px 0}.agenda-card small{color:#526879;font-size:14px}.agenda-notes{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}.agenda-card .travel-actions{align-self:flex-start;flex-wrap:wrap}.trip-celebration{background:#071f2e;color:#fff;padding:28px;border-radius:16px;margin-bottom:22px;border-top:5px solid #4bd4c5}.trip-celebration>span{font-size:32px;color:#4bd4c5}.trip-celebration h2{margin:8px 0}.trip-celebration p{line-height:1.6;color:#d4e9e9}.trip-celebration button{background:#4bd4c5;color:#071f2e}.availability-calendar{margin:22px 0;border:1px solid #d4dfe5;padding:16px;border-radius:14px}.availability-calendar p{font-size:14px;line-height:1.5;color:#536673}.availability-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}.availability-grid>strong{font-size:14px;text-align:center;padding:8px 0}.availability-day{min-height:65px;padding:5px;background:#f4f7f9;border-radius:5px;display:flex;flex-direction:column;gap:3px;font-size:14px}.availability-day small{font-size:12px;padding:3px;border-radius:3px;white-space:nowrap}.option-color-0{background:#c6f0e9;color:#074c43}.option-color-1{background:#d8e8ff;color:#193d73}.option-color-2{background:#f7e5b5;color:#5e440b}.calendar-legend p{margin:8px 0}.cost-row-editor .pilot-checkbox{grid-column:1/-1;grid-row:2}.cost-row-editor .builder-remove{grid-column:4;grid-row:1}.deadline-card #decision-date{font-size:clamp(22px,2.4vw,30px)}
@media(max-width:640px){.pilot-fields{grid-template-columns:1fr}.agenda-card{flex-direction:column}.availability-calendar{padding:8px}.availability-day{padding:3px;min-height:54px}.availability-day small{font-size:12px;padding:2px 0;white-space:normal}.pilot-footer small{flex-basis:100%;text-align:center}.trip-celebration{padding:20px}.cost-row-editor .builder-remove{grid-column:auto;grid-row:auto}}