/* ============================================================
   Let's Gravel — Organizer Web Portal · v2 "INK SHELL"
   Implements design_handoff_organizer_portal (Organizer Portal
   v2.dc.html + UPDATE-v2-ink-shell.md). Chrome = dark #171030
   sidebar + photo hero + light #F6F5F9 sheet; content components
   keep the light-system tokens. Modals (1e/3b) and the PDF (3a)
   are unchanged from v1 — they float over the dark canvas.
   ============================================================ */
:root {
  --p: #8833FF; --p-hover: #7A22F0; --tint: #F3EBFF;
  --title: #212735; --body: #565656; --muted: #7A7E84;
  --border: #E0E1E3; --divider: #F0F0F2; --chipbg: #F2F2F7; --inputbg: #F6F6F7;
  --green: #17AE25; --green-bg: #E8F7E9; --red: #EC0924; --red-text: #B00B20; --red-bg: #FDEDEF;
  --amber-text: #6B4E0E; --amber-bg: #FFF6E5; --amber-border: #F2D9A0;
  /* v2 ink-shell tokens (UPDATE-v2-ink-shell.md §7) */
  --ink: #171030;
  --surface: #F6F5F9;
  --surface-track: #EDEBF2;
  --accent-light: #A56BFA;
  --payout-grad: linear-gradient(135deg, #8833FF 0%, #501C9A 100%);
  --card-shadow: 0 2px 12px rgba(23,16,48,0.05);
  --sheet-shadow: 0 -8px 40px rgba(23,16,48,0.35);
  --purple-glow: 0 4px 18px rgba(136,51,255,0.45);
  --modal-shadow: 0 12px 40px rgba(20,10,40,0.25);
  --display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --text: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
.op-body { background: var(--ink); font-family: var(--text); color: var(--body); -webkit-font-smoothing: antialiased; }
input::placeholder { color: #B0B3B8; }
a { color: var(--p); }

/* ============ SHELL: sidebar + canvas (v2 §1) ============ */
.op-shell { display: flex; min-height: 100vh; }
.op-side {
  width: 240px; flex-shrink: 0; display: flex; flex-direction: column;
  padding: 26px 20px 20px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.op-side-id { display: flex; align-items: center; gap: 11px; }
.op-side-name { font-size: 14.5px; font-weight: 700; color: #fff; }
.op-side-role { font-size: 11.5px; color: rgba(255,255,255,0.6); margin-top: 1px; }
.op-side-label {
  font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,0.55); /* contrast bump (round 2) */
  text-transform: uppercase; letter-spacing: 1.2px; margin-top: 32px;
}
.op-side-trip {
  display: flex; align-items: center; gap: 11px; border-radius: 12px;
  padding: 10px 12px; margin-top: 4px; text-decoration: none;
}
.op-side-trip:first-of-type { margin-top: 12px; }
.op-side-trip:hover { background: rgba(255,255,255,0.06); }
.op-side-trip.active { background: rgba(136,51,255,0.28); border: 1px solid rgba(165,107,250,0.35); padding: 9px 11px; }
.op-side-trip img { width: 38px; height: 38px; object-fit: cover; border-radius: 9px; display: block; opacity: 0.75; flex-shrink: 0; background: var(--tint); }
.op-side-trip.active img { opacity: 1; }
.op-side-trip.past img { opacity: 0.65; } /* dimmed for hierarchy, but in color (Ouj ruling) */
.op-side-trip.past.active img { opacity: 1; }
.op-side-trip-txt { min-width: 0; }
.op-side-trip-name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-side-trip.active .op-side-trip-name { color: #fff; }
.op-side-trip.past .op-side-trip-name { color: rgba(255,255,255,0.7); }
.op-side-trip.past.active .op-side-trip-name { color: #fff; }
.op-side-trip-cap { font-size: 11px; color: rgba(255,255,255,0.65); margin-top: 1px; }
.op-side-trip.active .op-side-trip-cap { color: var(--accent-light); }
.op-side-spacer { flex: 1; min-height: 24px; }
.op-side-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.op-side-gravel { height: 16px; opacity: 0.4; display: block; } /* the only Gravel branding when signed in */
.op-side-signout { background: none; border: none; font: 600 11.5px var(--text); color: rgba(255,255,255,0.65); cursor: pointer; padding: 4px 0; }
.op-side-signout:hover { color: rgba(255,255,255,0.8); }
.op-canvas { flex: 1; min-width: 0; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.op-drawer-scrim { position: fixed; inset: 0; background: rgba(10,5,25,0.55); z-index: 65; }
.op-drawer-scrim[hidden] { display: none !important; }

/* Home nav item — the main page (Ouj 2026-07-11) */
.op-side-home {
  display: flex; align-items: center; gap: 8px; border-radius: 10px; padding: 9px 10px;
  margin-top: 22px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.85); text-decoration: none;
  flex-shrink: 0; /* 2026-07-27: same sidebar flex-squeeze as the create button */
}
.op-side-home:hover { background: rgba(255,255,255,0.06); color: #fff; }
.op-side-home.active { background: rgba(136,51,255,0.28); border: 1px solid rgba(165,107,250,0.35); color: #fff; padding: 8px 9px; }
.op-side-home-ic { font-size: 14px; }
/* home hero: no photo — a quiet purple-tinted ink gradient */
.op-hero-home { background: linear-gradient(180deg, rgba(136,51,255,0.14) 0%, rgba(23,16,48,0) 80%); }
.op-hero-home .op-hero-inner { padding-bottom: 6px; }
/* recent payouts list */
.op-payout-item { padding: 10px 0; border-bottom: 1px solid var(--divider); }
.op-payout-item:last-of-type { border-bottom: none; }
.op-payout-item-top { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.op-payout-item-top > b { font-size: 15px; color: var(--title); }
.op-payout-item .op-payout-line { font-size: 12.5px; padding: 4px 0; border-bottom: none; }

/* portfolio money line (round 2, Dani: the sidebar finally adds) */
.op-side-portfolio .op-side-label { margin-top: 24px; display: flex; align-items: center; gap: 6px; }
/* screenshot-safe mode (round 3, Kaya): eye toggle blurs the money so any
   screen can be posted uncropped. Preference persists per browser. */
.op-mask-btn { background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.55); padding: 0; display: inline-flex; align-items: center; }
.op-mask-btn:hover { color: #fff; }
.op-mask-btn svg { width: 14px; height: 14px; }
.op-maskable { transition: filter 0.15s ease; }
.op-masked .op-maskable { filter: blur(7px); }
.op-side-portfolio-line { font-size: 13.5px; font-weight: 700; color: #fff; margin-top: 8px; }
.op-side-portfolio-late { font-size: 12px; font-weight: 600; color: #FF8A97; margin-top: 2px; }
.op-side-portfolio-ok { font-size: 12px; font-weight: 600; color: #5FDF6C; margin-top: 2px; }

/* ============ HERO header (v2 §2) ============ */
.op-hero { flex-shrink: 0; }
.op-hero-photo, .op-hero-scrim { position: absolute; top: 0; left: 0; right: 0; height: 210px; }
.op-hero-photo { width: 100%; object-fit: cover; display: block; background: var(--ink); }
.op-hero-scrim { background: linear-gradient(180deg, rgba(23,16,48,0.35) 0%, rgba(23,16,48,0.6) 50%, #171030 100%); }
.op-hero-lg .op-hero-photo, .op-hero-lg .op-hero-scrim { height: 300px; }
.op-hero-lg .op-hero-scrim { background: linear-gradient(180deg, rgba(23,16,48,0.25) 0%, rgba(23,16,48,0.55) 55%, #171030 100%); }
/* Past trips keep their photos in COLOR (Ouj ruling, round 3 — a finished
   trip is the organizer's proof-of-work, not a memorial). The darker scrim
   stays: it's what guarantees AA text contrast, not the grayscale. */
.op-hero-past .op-hero-scrim { background: linear-gradient(180deg, rgba(23,16,48,0.45) 0%, rgba(23,16,48,0.65) 50%, #171030 100%); }
.op-hero-inner { position: relative; padding: 26px 34px 0; }
.op-hero-lg .op-hero-inner { padding-top: 30px; }
.op-hero-mobiletop { display: none; }
.op-hero-toprow { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.op-hero-meta { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.75); letter-spacing: 0.6px; text-transform: uppercase; }
.op-hero-namerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.op-hero-name { font: 700 27px var(--display); color: #fff; margin: 5px 0 0; text-shadow: 0 1px 12px rgba(23,16,48,0.4); }
.op-hero-lg .op-hero-name { font-size: 34px; margin-top: 6px; }
.op-hero-subrow { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.op-chip-live { background: rgba(23,174,37,0.9); color: #fff; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 4px 12px; }
.op-chip-onink { background: rgba(255,255,255,0.18); color: #fff; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 4px 12px; margin-top: 5px; }
.op-hero-cluster { display: flex; }
.op-cluster-a {
  width: 26px; height: 26px; border-radius: 50%; background: var(--tint); border: 2px solid var(--ink);
  color: var(--p); font: 700 9.5px var(--text); display: inline-flex; align-items: center; justify-content: center;
}
.op-cluster-a + .op-cluster-a { margin-left: -7px; }
.op-cluster-more { background: var(--p); color: #fff; }
.op-hero-actions { display: flex; gap: 10px; align-items: center; }
.op-btn-glass {
  background: rgba(255,255,255,0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2); color: #fff; border-radius: 10px; height: 40px;
  display: inline-flex; align-items: center; padding: 0 16px; font: 600 13.5px var(--text);
  cursor: pointer; text-decoration: none;
}
.op-btn-glass:hover { background: rgba(255,255,255,0.2); color: #fff; }
.op-btn-glow { box-shadow: var(--purple-glow); }
.op-hero-actions .op-btn { height: 40px; font-size: 13.5px; }
/* tabs live on the dark (v2 §2) */
.op-tabs { display: flex; gap: 24px; margin-top: 20px; overflow-x: auto; }
.op-hero-lg .op-tabs { margin-top: 26px; }
.op-tab { font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.7); text-decoration: none; padding-bottom: 11px; border-bottom: 2px solid transparent; white-space: nowrap; }
.op-tab:hover { color: #fff; }
.op-tab.active { font-weight: 700; color: #fff; border-bottom-color: var(--accent-light); }

/* hosted-by chip: the hero always carries the organizer's brand (round 2, Kaya) */
.op-hero-host { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; padding: 4px 12px 4px 5px; margin-top: 5px; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-avatar-20 { width: 20px; height: 20px; font-size: 8px; }

/* ============ CONTENT SHEET (v2 §3) ============ */
.op-sheet {
  position: relative; background: var(--surface); border-radius: 20px 20px 0 0;
  margin: 16px 22px 0; padding: 24px; box-shadow: var(--sheet-shadow); flex: 1;
}
.op-hero-lg + .op-sheet { margin-top: 18px; }
.op-sheet-center { display: flex; justify-content: center; align-items: flex-start; padding-top: 56px; }
.op-caption { font-size: 13px; color: #6B6F76; line-height: 1.5; } /* legibility bump kept (persona review) */
.op-link { font-size: 13px; font-weight: 600; color: var(--p); text-decoration: none; }
.op-link:hover { text-decoration: underline; }
.op-purple { color: var(--p) !important; }
.op-red { color: var(--red-text) !important; }
.op-title-text { color: var(--title); }
.op-green-text { color: var(--green) !important; font-weight: 600; }

/* ---------- buttons & inputs (light system, unchanged) ---------- */
.op-btn {
  background: var(--p); color: #fff; border: none; border-radius: 10px;
  height: 44px; padding: 0 20px; font: 600 14px var(--text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  transition: background 0.15s ease;
}
.op-btn:hover { background: var(--p-hover); }
.op-btn-outline {
  background: #fff; color: var(--title); border: 1px solid var(--border); border-radius: 10px;
  height: 44px; padding: 0 18px; font: 600 13.5px var(--text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.op-btn-outline:hover { border-color: var(--p); color: var(--p); }
.op-btn-danger { background: var(--red); color: #fff; border: none; border-radius: 10px; height: 44px; padding: 0 20px; font: 600 14px var(--text); cursor: pointer; }
.op-btn-danger:hover { background: #C90720; }
.op-btn-danger:disabled { opacity: 0.45; cursor: not-allowed; }
.op-btn-sm { height: 36px; padding: 0 14px; font-size: 12.5px; border-radius: 9px; }
.op-btn-block { width: 100%; }
.op-btn-outline.sent { border-color: var(--green); color: var(--green); background: var(--green-bg); }
.op-input {
  border: 1px solid #D1D1D1; border-radius: 9px; height: 44px; padding: 0 14px;
  font: 400 14px var(--text); color: var(--title); width: 100%; outline-color: var(--p); background: #fff;
}
select.op-input { appearance: auto; }

/* ---------- auth / not-found / zero-trips on the ink (v2 §5) ---------- */
.op-auth-wrap {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; position: relative; overflow: hidden;
}
.op-auth-wrap::before {
  content: ''; position: absolute; inset: 0;
  background: url('/images/invite/gravel_placeholder.png') center/cover no-repeat; opacity: 0.22;
}
.op-auth-wrap::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,16,48,0.5) 0%, #171030 85%);
}
.op-auth-wrap > * { position: relative; z-index: 1; }
.op-auth-card { background: #fff; border-radius: 18px; box-shadow: 0 12px 48px rgba(10,5,25,0.5); padding: 36px 32px; width: 100%; max-width: 400px; text-align: center; }
.op-auth-logo { height: 40px; }
.op-auth-title { font: 700 23px var(--display); color: var(--title); margin: 16px 0 6px; }
.op-auth-sub { font-size: 13.5px; color: var(--body); line-height: 1.55; margin: 0 0 18px; }
.op-auth-fine { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 12px; }
.op-auth-div { height: 1px; background: var(--divider); margin: 18px 0; }
.op-auth-getapp { font-size: 13px; color: var(--body); margin: 0; }
.op-auth-getapp a { font-weight: 600; text-decoration: none; }
.op-auth-foot { font-size: 12.5px; color: rgba(255,255,255,0.5); margin-top: 18px; }
.op-auth-foot a { color: var(--accent-light); }
.op-foot-gravel { height: 16px; opacity: 0.4; display: block; }
.op-nf-actions { display: flex; gap: 10px; justify-content: center; }
.op-avatar-center { margin: 0 auto; display: flex; }
/* glass "check your inbox" card (v2 §5) */
.op-glass-card {
  width: 100%; max-width: 360px; background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15); border-radius: 18px; padding: 32px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.op-glass-check { width: 60px; height: 60px; border-radius: 50%; background: rgba(23,174,37,0.2); color: #5FDF6C; font-size: 26px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.op-glass-title { font: 700 20px var(--display); color: #fff; margin: 16px 0 0; }
.op-glass-sub { font-size: 13.5px; color: rgba(255,255,255,0.7); line-height: 1.55; margin: 8px 0 0; }
.op-glass-sub b { color: #fff; }
.op-glass-fine { font-size: 13px; color: rgba(255,255,255,0.85); line-height: 1.5; margin: 10px 0 0; } /* the recovery hint must be the READABLE line (round 2, Frank) */
.op-glass-resend { background: none; border: none; font: 600 13px var(--text); color: var(--accent-light); cursor: pointer; margin-top: 16px; }
.op-glass-resend:hover { color: #fff; }

/* ---------- banners / chips / avatars (light system, unchanged) ---------- */
.op-banner { border-radius: 10px; padding: 12px 14px; font-size: 13px; margin-bottom: 14px; }
.op-banner-warn { background: var(--amber-bg); border: 1px solid var(--amber-border); color: var(--amber-text); }
.op-banner-flag { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--body); padding: 13px 16px !important; border-radius: 12px !important; }
.op-flag-emoji { font-size: 15px; }
.op-chip { border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; white-space: nowrap; display: inline-block; }
.op-chip-active { background: var(--green-bg); color: var(--green); }
.op-chip-past { background: var(--chipbg); color: var(--body); }
.op-chip-paid-in-full, .op-chip-succeeded { background: var(--green-bg); color: var(--green); }
.op-chip-on-track, .op-chip-pending { background: var(--tint); color: var(--p); }
.op-chip-overdue { background: var(--red-bg); color: var(--red-text); }
/* blame-neutral: a stuck refund needs a look, it isn't a system-fault banner (Ouj) */
.op-chip-refund-needs-attention { background: var(--amber-bg); color: var(--amber-text); }
.op-chip-refunding, .op-chip-refunded { background: var(--amber-bg); color: var(--amber-text); }
.op-avatar {
  width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--tint); color: var(--p); font: 700 11px var(--text);
  display: inline-flex; align-items: center; justify-content: center;
}
.op-avatar img { width: 100%; height: 100%; object-fit: cover; }
.op-avatar-32 { width: 32px; height: 32px; }
.op-avatar-40 { width: 40px; height: 40px; font-size: 13px; }
.op-avatar-42 { width: 42px; height: 42px; font-size: 14px; }
.op-avatar-red { background: var(--red-bg); color: var(--red-text); }

/* ---------- cards on the sheet (v2 §3: borders → soft shadow, 16px radius) ---------- */
.op-card { background: #fff; border-radius: 16px; padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--card-shadow); }
.op-card-tint { background: var(--tint); }
.op-card-gray { background: var(--inputbg); box-shadow: none; }
/* section titles become uppercase micro-labels (v2 §3) */
.op-card-head { font: 700 11px var(--text); color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.op-card-toprow { display: flex; justify-content: space-between; align-items: center; }
.op-card-toprow .op-card-head { margin-bottom: 0; }
/* modals stay v1 (light surface, Display-size titles inside) */
.op-modal .op-card { border-radius: 12px; box-shadow: none; }
.op-modal .op-card-head { font: 700 14px var(--display); color: var(--title); text-transform: none; letter-spacing: 0; }
.op-progress { height: 6px; border-radius: 3px; background: var(--chipbg); overflow: hidden; margin: 8px 0 6px; }
.op-card-tint .op-progress { background: rgba(136,51,255,0.15); }
.op-progress-fill { height: 6px; border-radius: 3px; background: var(--p); }
.op-progress-fill.done { background: var(--green); }
.op-progress-fill.red { background: var(--red); }
.op-progress-fill.amber { background: #E8A013; }

/* ---------- stats ---------- */
.op-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 16px; }
.op-stats-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.op-stats .op-card, .op-stats .op-payout-grad { margin-bottom: 0; }
.op-stat-value { font: 700 28px var(--display); color: var(--title); margin-top: 2px; }
.op-stat-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.op-stat-sub-money { font-size: 13px; color: #565656; } /* money-bearing subs read at older-eye sizes (round 2) */
.op-stat-onink { color: #fff; }
.op-sub-onink { color: rgba(255,255,255,0.75) !important; }
.op-past-links { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 4px; }

/* ---------- hero money card + segmented money bar (v2 §4) ---------- */
.op-money-toprow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.op-money-toprow .op-card-head { margin-bottom: 0; }
.op-money-row { display: flex; align-items: baseline; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.op-money-big { font: 700 44px var(--display); color: var(--title); letter-spacing: -1px; }
.op-money-of { font-size: 14px; color: var(--muted); }
.op-moneybar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin-top: 14px; gap: 2px; }
.op-moneybar-seg { height: 10px; }
.op-moneybar-rest { flex: 1; background: var(--surface-track); }
.op-money-legend { display: flex; gap: 20px; margin-top: 12px; flex-wrap: wrap; }
.op-money-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--body); }
.op-money-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* ---------- gradient payout card (v2 §4) — display only, no payout actions ---------- */
.op-payout-grad {
  background: var(--payout-grad); border-radius: 16px; padding: 20px 22px;
  box-shadow: 0 8px 28px rgba(136,51,255,0.35); color: #fff; margin-bottom: 16px;
}
.op-head-onink { color: rgba(255,255,255,0.7) !important; }
.op-payout-big { font: 700 32px var(--display); color: #fff; margin-top: 6px; letter-spacing: -0.5px; }
.op-payout-cap { font-size: 12px; color: rgba(255,255,255,0.75); margin-top: 4px; }
.op-payout-div { height: 1px; background: rgba(255,255,255,0.2); margin: 14px 0; }
.op-payout-line-onink { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: rgba(255,255,255,0.75); padding: 3px 0; }
.op-payout-line-onink b { color: #fff; }
/* button row on gradient/ink cards — proper pills, not bare links (Ouj) */
.op-payout-actions { display: flex; gap: 8px; margin-top: 14px; }
.op-btn-onink {
  flex: 1; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28); border-radius: 9px;
  font: 600 12.5px var(--text); color: #fff; text-decoration: none;
  transition: background 0.15s ease;
}
.op-btn-onink:hover { background: rgba(255,255,255,0.28); color: #fff; }

/* ---------- overview columns ---------- */
.op-cols { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
@media (min-width: 1024px) { .op-cols { grid-template-columns: 1.5fr 1fr; } }
.op-flex1 { min-width: 0; }
.op-col-side { min-width: 0; }
.op-attn-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--divider); }
.op-attn-row:last-of-type { border-bottom: none; }
.op-attn-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.op-attn-who b { font-size: 14px; color: var(--title); }
.op-allclear { font-size: 14px; font-weight: 600; color: var(--green); padding: 8px 0; }
.op-invite-row { display: flex; gap: 8px; margin-bottom: 12px; }
.op-invite-input { background: #fff; font-size: 12.5px; color: var(--body); }
.op-payout-line { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 13.5px; border-bottom: 1px solid var(--divider); }
.op-payout-line:last-of-type { border-bottom: none; }
.op-payout-line b { color: var(--title); }
.op-card-tint .op-payout-line { border-color: rgba(136,51,255,0.12); }

/* server-rendered reminded state (design 1c "Reminded ✓") */
.op-reminded { font-size: 12.5px; font-weight: 600; color: var(--green); white-space: nowrap; }
/* removed travelers: present, labeled, visually stepped back (round 2) */
.op-roster-row.is-removed { opacity: 0.75; }
.op-chip-no-refund-due { background: var(--chipbg); color: var(--body); }
/* visually-hidden but FOCUSABLE checkbox driving a toggle pill (round 2, Dani) */
.op-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.op-vh:focus-visible + .op-toggle { outline: 2px solid var(--p); outline-offset: 2px; }
.op-fieldset { border: none; margin: 0; padding: 0; min-width: 0; }
.op-fieldset:disabled .op-toggle-row { cursor: default; opacity: 0.6; }
/* glass-card secondary action (login: use a different email) */
.op-glass-other { display: inline-block; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.75); margin-top: 10px; text-decoration: none; }
.op-glass-other:hover { color: #fff; }

/* toggle */
.op-toggle-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; }
.op-toggle { width: 40px; height: 24px; border-radius: 999px; background: #D1D1D6; position: relative; transition: background 0.15s ease; flex-shrink: 0; }
.op-toggle.on { background: var(--p); }
.op-toggle-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left 0.15s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.op-toggle.on .op-toggle-knob { left: 18px; }
.op-toggle-label { font-size: 13.5px; font-weight: 600; color: var(--title); }

/* ---------- 2a empty state (content sits directly on the sheet) ---------- */
.op-empty { padding: 0 24px; text-align: center; max-width: 560px; }
.op-empty-avatars { display: flex; justify-content: center; margin-bottom: 4px; }
.op-empty-avatars .op-avatar-40 { border: 2px solid #fff; }
.op-avatar-dashed { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-track); border: 2px dashed #C9C5D4; margin-left: -10px; }
.op-empty-title { font: 700 22px var(--display); color: var(--title); margin: 16px 0 8px; }
.op-empty-sub { font-size: 14px; color: var(--body); line-height: 1.55; max-width: 460px; margin: 0 auto 20px; }
.op-empty-invite { max-width: 460px; margin: 0 auto 14px; }
.op-empty-links { display: flex; justify-content: center; gap: 22px; font-size: 13px; }
.op-empty-links a { font-weight: 600; text-decoration: none; }

/* ---------- 1d roster ---------- */
.op-roster-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.op-filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.op-fchip { border: none; background: var(--chipbg); border-radius: 999px; padding: 7px 14px; font: 600 12.5px var(--text); color: var(--body); cursor: pointer; }
.op-fchip:hover { background: #E9E9EE; }
.op-fchip.active { background: var(--p); color: #fff; }
.op-roster-actions { display: flex; align-items: center; gap: 12px; }
.op-search { max-width: 220px; height: 36px; font-size: 13px; border-radius: 9px; }
@media (max-width: 1023px) { .op-search { max-width: 100%; } }
.op-roster-actions .op-btn-outline { border-color: var(--border); }
.op-roster { overflow: visible; }
.op-roster-row { display: flex; align-items: center; gap: 14px; padding: 13px 12px; border-top: 1px solid var(--divider); position: relative; border-radius: 8px; }
.op-roster-row.is-overdue { background: rgba(253,237,239,0.35); }
.op-roster-who { min-width: 210px; display: flex; flex-direction: column; gap: 1px; }
.op-roster-who b { font-size: 14px; color: var(--title); }
.op-roster-progress { flex: 1; min-width: 160px; }
.op-rowmenu-wrap { position: relative; }
.op-rowmenu-btn { border: none; background: none; font: 700 16px var(--text); color: var(--muted); cursor: pointer; padding: 6px 10px; border-radius: 8px; letter-spacing: 1px; }
.op-rowmenu-btn:hover { background: var(--inputbg); color: var(--title); }
.op-rowmenu { position: absolute; right: 0; top: 34px; background: #fff; border-radius: 12px; box-shadow: var(--modal-shadow); min-width: 250px; padding: 6px; z-index: 30; }
.op-rowmenu button { display: block; width: 100%; text-align: left; border: none; background: none; padding: 10px 12px; border-radius: 8px; font: 500 13.5px var(--text); color: var(--title); cursor: pointer; }
.op-rowmenu button:hover { background: var(--inputbg); }
.op-rowmenu .op-danger { color: var(--red-text); }
.op-rowmenu-note { display: block; font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.op-rowmenu-divider { height: 1px; background: var(--divider); margin: 6px 4px; }

/* ---------- modals (1e / 3b) — UNCHANGED from v1 (v2 spec: pixel-identical) ---------- */
.op-modal-backdrop { position: fixed; inset: 0; background: rgba(20,10,40,0.45); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
/* The hidden attribute must always win — author display:flex would
   otherwise override the browser's [hidden]{display:none} and leave
   every modal permanently on screen (the bug Ouj caught twice). */
.op-modal-backdrop[hidden] { display: none !important; }
.op-toast[hidden] { display: none !important; }
.op-rowmenu[hidden] { display: none !important; }
.op-modal { background: #fff; border-radius: 16px; box-shadow: var(--modal-shadow); width: 100%; max-width: 500px; padding: 26px 26px 22px; position: relative; max-height: 92vh; overflow-y: auto; }
.op-modal-history { max-width: 520px; }
.op-modal-title { font: 700 19px var(--display); color: var(--title); margin: 0 0 4px; }
.op-modal-x { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%; background: var(--chipbg); border: none; color: var(--body); cursor: pointer; }
.op-rm-traveler { display: flex; justify-content: space-between; gap: 10px; background: var(--inputbg); border-radius: 9px; padding: 12px 14px; margin: 12px 0; font-size: 13.5px; color: var(--title); flex-wrap: wrap; }
.op-rm-options { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.op-rm-option { display: flex; gap: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px; cursor: pointer; align-items: flex-start; }
.op-rm-option:has(input:checked) { border: 2px solid var(--p); padding: 12px 13px; }
.op-rm-option input { accent-color: var(--p); margin-top: 3px; }
.op-rm-option-body { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--title); }
.op-rm-amount { font: 700 17px var(--display); color: var(--title); }
.op-rm-math { background: var(--inputbg); border-radius: 10px; padding: 6px 14px; margin: 12px 0 2px; }
.op-rm-ack { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; font-size: 12.5px; color: var(--body); line-height: 1.5; cursor: pointer; }
.op-rm-ack input { accent-color: var(--p); margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; }
.op-rm-ack a { font-weight: 600; }
.op-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.op-modal-error { background: var(--red-bg); color: var(--red-text); border-radius: 9px; padding: 10px 12px; font-size: 13px; margin-top: 10px; }
.op-hist-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.op-hist-name { font: 700 18px var(--display); color: var(--title); }
.op-hist-summary { margin-bottom: 14px; }
.op-hist-list { max-height: 300px; overflow-y: auto; }
.op-hist-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--divider); font-size: 13px; }
.op-hist-row:last-child { border-bottom: none; }

/* ---------- payments table ---------- */
.op-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 12px; }
.op-table th { text-align: left; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--border); padding: 9px 8px; }
.op-table td { border-bottom: 1px solid var(--divider); padding: 12px 8px; color: #343434; vertical-align: middle; }
.op-table .num { text-align: right; }

/* ---------- settings ---------- */
.op-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 12.5px; font-weight: 600; color: var(--body); }
.op-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.op-settings-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.op-settings-actions { display: flex; gap: 10px; }

/* skeleton pulse for the hydrating payout column (round 4) */
@keyframes opPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.op-skeleton-pulse { animation: opPulse 1.2s ease-in-out infinite; }

/* ---------- toast ---------- */
@keyframes toastIn { from { transform: translate(-50%, 14px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.op-toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: #212735; color: #fff; border-radius: 10px; padding: 12px 20px;
  font: 600 13.5px var(--text); z-index: 60; animation: toastIn 0.25s ease;
  box-shadow: var(--modal-shadow);
}

/* ============ responsive (1h): sidebar becomes the ≡ drawer ============ */
@media (max-width: 1023px) {
  .op-side {
    position: fixed; left: 0; top: 0; bottom: 0; height: 100vh; z-index: 70;
    background: var(--ink); transform: translateX(-100%); transition: transform 0.22s ease;
    box-shadow: 8px 0 40px rgba(10,5,25,0.5);
  }
  .op-side.open { transform: translateX(0); }
  .op-hero-mobiletop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
  .op-hero-host { display: none; } /* mobile top bar already shows the organizer — no double identity (round 3, Kaya) */
  .op-hero-org { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: #fff; }
  .op-hero-burger {
    width: 44px; height: 44px; border-radius: 11px; border: none; cursor: pointer; /* 44px touch minimum (round 2) */
    background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); color: #fff; font-size: 15px;
  }
  .op-hero-inner { padding: 14px 16px 0; }
  .op-hero-photo, .op-hero-scrim, .op-hero-lg .op-hero-photo, .op-hero-lg .op-hero-scrim { height: 200px; }
  .op-hero-name, .op-hero-lg .op-hero-name { font-size: 21px; }
  .op-hero-actions { width: 100%; }
  .op-tabs, .op-hero-lg .op-tabs { gap: 18px; margin-top: 14px; }
  .op-sheet { margin: 12px 10px 0; padding: 16px; border-radius: 18px 18px 0 0; }
  .op-money-big { font-size: 30px; letter-spacing: -0.5px; }
  /* Payments table collapses to cards (design 1h promise; persona review) */
  table.op-cardable, table.op-cardable tbody, table.op-cardable tr, table.op-cardable td { display: block; width: 100%; white-space: normal; }
  table.op-cardable thead { display: none; }
  table.op-cardable tr { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; padding: 10px 14px; background: #fff; }
  table.op-cardable td { border: none; padding: 4px 0; }
  table.op-cardable td.num { text-align: left; }
  table.op-cardable td[data-label]::before { content: attr(data-label) ': '; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; margin-right: 6px; }
  .op-stats { grid-template-columns: 1fr; }
  .op-roster-row { flex-wrap: wrap; }
  .op-attn-row { flex-wrap: wrap; } /* Home/Overview overdue rows: avatar + text + 2 buttons must wrap, not crush (round 4) */
  .op-roster-who { min-width: 0; flex: 1; }
  .op-roster-progress { flex-basis: 100%; order: 5; }
  .op-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ── Dispute-evidence pack (Phase 2/3, 2026-07-16) ── */
.op-page-head { margin: 4px 0 14px; }
.op-h1 { font-size: 22px; font-weight: 800; color: #212735; margin: 0; }
.op-muted { color: #7A7E84; font-size: 13px; }
.op-disp-msg { font-size: 14px; }
.op-table th { font-weight: 700; }

/* ============ ADD-A-PACKAGE COMPOSER (badge 4a, 2026-07-20) ============
   design_handoff_add_package_composer — modal over settings. Money copy
   deviates from the mock on purpose: no traveler-side fee exists in this
   codebase (checkout = exact installment sum, "Processing included"). */
@keyframes opcFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes opcModalIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes opcToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes opcLivePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes opcRowFlash { 0% { background: var(--tint); } 100% { background: transparent; } }
.opc-row-flash { animation: opcRowFlash 2s ease 1; }

.opc-backdrop {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(13,8,30,0.62); backdrop-filter: blur(3px); animation: opcFadeIn 0.2s ease;
  padding: 16px;
}
.opc-backdrop[hidden] { display: none; }
.opc-card {
  width: 780px; max-width: 100%; max-height: 94vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 18px; box-shadow: 0 24px 80px rgba(10,5,25,0.5);
  animation: opcModalIn 0.25s cubic-bezier(0.32,0.72,0,1); font-family: var(--text);
}
.opc-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 24px 0; }
.opc-title { font-family: var(--display); font-weight: 700; font-size: 19px; color: #212735; }
.opc-sub { font-size: 12.5px; color: #7A7E84; margin-top: 3px; }
.opc-reach {
  margin-top: 9px; font-size: 12px; color: #565656; background: #F3EBFF; border-radius: 999px;
  padding: 5px 12px; width: fit-content; line-height: 1.4;
}
.opc-reach i { color: var(--p); font-weight: 700; font-style: normal; }
.opc-reach b { color: #212735; }
.opc-x {
  width: 32px; height: 32px; border-radius: 50%; background: #F6F6F7; color: #565656;
  border: none; font-size: 14px; cursor: pointer; flex-shrink: 0;
}
.opc-x:hover { background: #ECECEE; }
.opc-body { display: flex; gap: 20px; padding: 18px 24px 4px; overflow-y: auto; flex: 1; min-height: 0; }
.opc-form { flex: 1; min-width: 0; }

.opc-quick { background: #FBF9FF; border: 1px solid #EADFFB; border-radius: 13px; padding: 14px; margin-bottom: 16px; }
.opc-quick-head { font-size: 13px; font-weight: 700; color: #212735; }
.opc-quick-sub { font-size: 12px; color: #7A7E84; margin: 3px 0 8px; }
.opc-quick-ta {
  width: 100%; border: 1px solid #E0D6F5; border-radius: 9px; padding: 9px 12px; font-size: 13px;
  background: #fff; font-family: var(--text); resize: none; outline-color: var(--p);
}
.opc-quick-row { display: flex; justify-content: flex-end; margin-top: 8px; }
.opc-fill {
  background: var(--p); color: #fff; border: none; border-radius: 8px; height: 34px; padding: 0 14px;
  font: 600 12.5px var(--text); cursor: pointer;
}
.opc-fill:hover { background: var(--p-hover); }
.opc-quick-or { font-size: 11.5px; color: #7A7E84; margin: 10px 0 6px; }

.opc-parsed {
  background: #EAF8EC; border: 1px solid #CDEBD2; color: #256A2E; border-radius: 9px;
  font-size: 12.5px; padding: 8px 12px; margin-bottom: 12px;
}
.opc-mini { background: none; border: none; color: #256A2E; font-weight: 700; cursor: pointer; font-size: 12px; margin-left: 8px; }

.opc-label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: #565656; }
.opc-input {
  height: 44px; border: 1px solid #D1D1D1; border-radius: 9px; padding: 0 13px; font-size: 14px;
  font-family: var(--text); outline-color: var(--p); width: 100%;
}
.opc-price-wrap { position: relative; display: block; }
.opc-price-dollar { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #7A7E84; pointer-events: none; }
.opc-price { padding: 0 13px 0 26px; font-variant-numeric: tabular-nums; }

.opc-hint { font-size: 12px; color: #7A7E84; margin-top: 6px; }
.opc-err { font-size: 12px; color: #B00B20; font-weight: 600; margin-top: 6px; }
.opc-warn { font-size: 12px; color: #C48A0A; font-weight: 600; margin-top: 6px; }
.opc-chiplabel { font-size: 11.5px; color: #7A7E84; margin-right: 7px; }
.opc-chip {
  border: 1px solid #E4D9F7; background: #FBF9FF; color: var(--p); border-radius: 999px;
  padding: 3px 11px; font: 600 11.5px var(--text); cursor: pointer; margin: 4px 6px 0 0; display: inline-block;
}
.opc-chip:hover { background: #F3EBFF; }
.opc-chip-gray { border-color: #E0E1E3; background: #FAFAFB; color: #565656; }

.opc-bar {
  height: 8px; border-radius: 999px; background: #E9E6F0; overflow: hidden; display: flex; margin-top: 10px;
}
.opc-bar span { display: block; height: 100%; transition: width 0.35s cubic-bezier(0.32,0.72,0,1); }
.opc-bar span:nth-child(1) { background: #8833FF; }
.opc-bar span:nth-child(2) { background: #A56BFA; }
.opc-bar span:nth-child(3) { background: #DCC8FF; }
.opc-legend { font-size: 11.5px; color: #7A7E84; margin-top: 6px; }
.opc-legend b { color: #212735; font-variant-numeric: tabular-nums; }
.opc-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin: 0 4px 0 0; }
.opc-dot-c { background: #8833FF; } .opc-dot-d { background: #A56BFA; } .opc-dot-b { background: #DCC8FF; }
.opc-insight { border-top: 1px dashed #E4E5EA; margin-top: 10px; padding-top: 9px; font-size: 12.5px; color: #565656; line-height: 1.55; }
.opc-insight .opc-keep { color: var(--p); }
.opc-roundrow { margin-top: 4px; }
.opc-roundrow > span { font-size: 11.5px; color: #7A7E84; margin-right: 7px; }

.opc-divider { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.opc-divider span { font-size: 11px; font-weight: 700; color: #7A7E84; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.opc-divider i { flex: 1; height: 1px; background: #F0F0F2; }
.opc-divider em { font-size: 11px; color: #9BA0A6; font-style: normal; }

.opc-desc-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: #565656; }
.opc-desc-row .opc-count { margin-left: auto; font-weight: 600; font-size: 11.5px; color: #9BA0A6; }
.opc-count-green { color: #17AE25 !important; }
.opc-count-amber { color: #C48A0A !important; }
.opc-count-red { color: #B00B20 !important; }
.opc-suggest {
  border: 1px solid #E4D9F7; background: #FBF9FF; color: var(--p); border-radius: 999px;
  padding: 2px 10px; font: 600 11px var(--text); cursor: pointer;
}
.opc-desc {
  width: 100%; border: 1px solid #D1D1D1; border-radius: 9px; padding: 9px 13px; font-size: 13.5px;
  line-height: 1.45; resize: none; overflow: hidden; font-family: var(--text); outline-color: var(--p); margin-top: 6px;
}
.opc-helper { font-size: 11.5px; color: #9BA0A6; margin-top: 4px; }

.opc-lists { display: flex; gap: 12px; margin-top: 10px; }
.opc-lists > div { flex: 1; min-width: 0; }
.opc-label2 { font-size: 12px; font-weight: 600; color: #565656; margin-bottom: 6px; }
.opc-token {
  display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 7px; cursor: pointer;
  font-size: 13px;
}
.opc-token:hover { background: #FDEDEF; }
.opc-token span { flex: 1; overflow-wrap: anywhere; }
.opc-token b { color: #B0B3B8; font-weight: 400; font-size: 12px; }
.opc-ok { color: #17AE25; font-style: normal; } .opc-no { color: #7A7E84; font-style: normal; }
.opc-iteminput {
  width: 100%; height: 38px; border: 1px solid #D1D1D1; border-radius: 9px; padding: 0 12px;
  font-size: 13px; font-family: var(--text); outline-color: var(--p);
}

.opc-preview { width: 270px; flex-shrink: 0; background: #F6F5F9; border-radius: 14px; padding: 16px; align-self: flex-start; }
.opc-prev-head { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; color: #7A7E84; letter-spacing: 1px; }
.opc-live { width: 7px; height: 7px; border-radius: 50%; background: #17AE25; animation: opcLivePulse 1.8s ease infinite; }
.opc-prev-cap { font-size: 10.5px; color: #9BA0A6; margin-top: 10px; line-height: 1.4; }
.opc-prev-empty {
  border: 1.5px dashed #D9CBF5; border-radius: 13px; padding: 18px 14px; margin-top: 12px;
  font-size: 12px; color: #9BA0A6; text-align: center;
}
.opc-prev-empty > span { display: block; height: 9px; border-radius: 5px; background: #ECE8F4; margin: 0 0 8px; }
.opc-prev-empty > div { margin-top: 10px; }
.opc-prev-invite {
  background: #fff; border: 1.5px solid var(--p); border-radius: 13px; padding: 13px;
  box-shadow: 0 6px 20px rgba(136,51,255,0.12); margin-top: 12px;
}
.opc-prev-toprow { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.opc-prev-name { font-size: 13.5px; font-weight: 700; color: #212735; overflow-wrap: anywhere; }
.opc-prev-price { font-family: var(--display); font-size: 16px; font-weight: 700; color: #212735; font-variant-numeric: tabular-nums; white-space: nowrap; }
.opc-ghost { color: #B0B3B8; font-style: normal; font-weight: 400; }
.opc-prev-desc {
  font-size: 12px; color: #565656; line-height: 1.45; margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.opc-prev-items { margin-top: 7px; }
.opc-prev-items > div { font-size: 12px; color: #565656; display: flex; gap: 6px; line-height: 1.5; }
.opc-prev-items em { flex-shrink: 0; }
.opc-prev-sep { height: 1px; background: #F0F0F2; margin: 10px 0 8px; }
.opc-prev-plan > div { display: flex; justify-content: space-between; font-size: 12px; color: #565656; line-height: 1.7; gap: 8px; }
.opc-prev-plan b { color: #212735; font-variant-numeric: tabular-nums; white-space: nowrap; }
.opc-prev-fee { font-size: 10.5px; color: #9BA0A6; margin-top: 7px; }
.opc-prev-cta {
  margin-top: 9px; background: var(--p); color: #fff; border-radius: 9px; text-align: center;
  padding: 9px 6px; font-size: 12.5px; font-weight: 600;
}
.opc-hl { background: #F3EBFF; border-radius: 5px; }

.opc-foot { display: flex; align-items: center; gap: 10px; padding: 16px 24px 20px; }
.opc-draft { font-size: 12px; color: #565656; }
.opc-draft::first-letter { color: #17AE25; }
.opc-discard { background: none; border: none; color: #B00B20; font: 600 12px var(--text); cursor: pointer; }
.opc-msg { font-size: 12.5px; color: #B00B20; text-align: right; flex: 1; }
.opc-btn-close {
  border: 1px solid #E0E1E3; background: #fff; border-radius: 10px; height: 44px; padding: 0 18px;
  font: 600 14px var(--text); color: #212735; cursor: pointer;
}
.opc-btn-add {
  background: var(--p); color: #fff; border: none; border-radius: 10px; height: 44px; padding: 0 22px;
  font: 600 14px var(--text); cursor: pointer; box-shadow: 0 4px 18px rgba(136,51,255,0.35);
}
.opc-btn-add:hover:not(:disabled) { background: var(--p-hover); }
.opc-btn-add:active:not(:disabled) { transform: scale(0.97); }
.opc-btn-dim { opacity: 0.45; cursor: default; box-shadow: none; }

.opc-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 70;
  background: #212735; color: #fff; border-radius: 999px; padding: 11px 20px; font: 600 13px var(--text);
  box-shadow: 0 12px 40px rgba(20,10,40,0.45); animation: opcToastIn 0.25s ease;
}
.opc-toast[hidden] { display: none; }

@media (max-width: 880px) {
  .opc-body { flex-direction: column; }
  .opc-preview { width: 100%; }
  .opc-lists { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .opc-backdrop, .opc-card, .opc-toast, .opc-bar span, .opc-live, .opc-row-flash { animation-duration: 0.01s !important; transition-duration: 0.01s !important; }
}
.opc-divider[hidden], .opc-reach[hidden], .opc-parsed[hidden], .opc-quick[hidden], .opc-suggest[hidden], .opc-draft[hidden] { display: none !important; }

/* ===== COMPOSER COMPACT PASS (2026-07-20, Ouj feedback) =====
   Goal: the full form fits a 768px-tall laptop screen with no body
   scroll. Same design, ~25% tighter vertical rhythm. */
.opc-card { max-height: 96vh; }
.opc-head { padding: 14px 20px 0; }
.opc-title { font-size: 17.5px; }
.opc-sub { margin-top: 2px; font-size: 12px; }
.opc-reach { margin-top: 6px; padding: 4px 10px; font-size: 11.5px; }
.opc-x { width: 30px; height: 30px; }
.opc-body { padding: 10px 20px 2px; gap: 16px; }
.opc-quick { padding: 11px; margin-bottom: 10px; border-radius: 11px; }
.opc-quick-sub { margin: 2px 0 6px; }
.opc-quick-row { margin-top: 6px; }
.opc-fill { height: 30px; }
.opc-quick-or { margin: 7px 0 4px; }
.opc-parsed { padding: 6px 10px; margin-bottom: 8px; }
.opc-label { gap: 4px; }
.opc-input { height: 40px; }
.opc-price-dollar { left: 12px; }
.opc-hint, .opc-err, .opc-warn { margin-top: 4px; }
.opc-bar { margin-top: 8px; height: 7px; }
.opc-legend { margin-top: 4px; font-size: 11px; }
.opc-insight { margin-top: 7px; padding-top: 6px; font-size: 12px; line-height: 1.45; }
.opc-divider { margin-top: 8px; }
.opc-desc-row { margin-top: 7px; }
.opc-desc { padding: 7px 11px; margin-top: 4px; font-size: 13px; }
.opc-helper { margin-top: 3px; font-size: 11px; }
.opc-lists { margin-top: 8px; }
.opc-label2 { margin-bottom: 4px; }
.opc-iteminput { height: 34px; }
.opc-token { padding: 3px 7px; }
.opc-preview { padding: 13px; }
.opc-prev-invite { padding: 11px; margin-top: 10px; }
.opc-prev-cap { margin-top: 8px; }
.opc-foot { padding: 10px 20px 13px; }
.opc-btn-close, .opc-btn-add { height: 40px; }
/* keep the composer's price-label inline margin tight */
.opc-form > .opc-label[style*="margin-top"] { margin-top: 9px !important; }
/* same unbroken-string protection inside the composer's live preview */
.opc-prev-desc, .opc-prev-items > div { overflow-wrap: anywhere; }

/* ===== COMPOSER A11Y + PERSONA PASS (2026-07-20) =====
   From the 5-persona test: contrast ratios measured under 4.5:1 bumped;
   touch targets brought to >=24px; token removal is now an explicit X
   button (tapping an item's text no longer deletes it). */
.opc-sub, .opc-legend, .opc-chiplabel, .opc-quick-sub, .opc-hint, .opc-quick-or { color: #64686E; }
.opc-helper, .opc-count, .opc-prev-cap, .opc-prev-fee, .opc-ghost { color: #6B7075; }
.opc-input::placeholder, .opc-iteminput::placeholder, .opc-desc::placeholder, .opc-quick-ta::placeholder { color: #767B80; }
.opc-chip { padding: 5px 12px; }
.opc-suggest { padding: 4px 12px; }
.opc-token { padding: 4px 4px 4px 8px; cursor: default; }
.opc-token:hover { background: transparent; }
.opc-token-x {
  background: none; border: none; color: #B0B3B8; cursor: pointer;
  font-size: 12px; padding: 5px 8px; border-radius: 6px; line-height: 1;
}
.opc-token-x:hover, .opc-token-x:focus { color: #B00B20; background: #FDEDEF; }
.opc-discard { padding: 5px 6px; }

/* ===================================================================
   Organizer portal — ZERO-TRIP EMPTY STATE
   (design_handoff_portal_empty_state). Rendered inside the dashboard
   shell; tokens per README §2/§5. SF Pro via --display/--text (no font
   files shipped). ================================================== */

/* Sidebar: dashed slot where trip rows will appear (§1). */
.op-side-slot {
  margin-top: 12px; border: 1.5px dashed rgba(255,255,255,0.18);
  border-radius: 12px; padding: 18px 12px; text-align: center;
  font-size: 12px; color: rgba(255,255,255,0.45);
}

/* Canvas main region: 620px centered column on the dark canvas. */
.op-zero {
  flex: 1; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
}
.op-zero-glow {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
}
.op-zero-glow-tr {
  width: 560px; height: 560px; top: -180px; right: -160px;
  background: radial-gradient(circle, rgba(136,51,255,0.22) 0%, rgba(136,51,255,0) 70%);
}
.op-zero-glow-bl {
  width: 520px; height: 520px; bottom: -170px; left: -150px;
  background: radial-gradient(circle, rgba(165,107,250,0.14) 0%, rgba(165,107,250,0) 70%);
}
.op-zero-col {
  position: relative; z-index: 1; width: 100%; max-width: 620px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

/* Example trip card — fixed illustrative copy, whole card at 75%. */
.op-zero-example {
  position: relative; width: 400px; max-width: 100%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 16px 16px 15px; opacity: 0.75; text-align: left;
}
.op-zero-badge {
  position: absolute; top: -10px; right: -8px;
  background: #A56BFA; color: #171030; font: 700 10.5px var(--text);
  letter-spacing: 0.5px; padding: 3px 8px; border-radius: 999px;
}
.op-zero-ex-top { display: flex; align-items: center; gap: 11px; }
.op-zero-ex-photo {
  width: 52px; height: 52px; border-radius: 12px; object-fit: cover;
  flex-shrink: 0; background: var(--tint);
}
.op-zero-ex-txt { min-width: 0; flex: 1; }
.op-zero-ex-name {
  font-size: 14.5px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.op-zero-ex-meta { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 2px; }
.op-zero-ex-pill {
  flex-shrink: 0; background: rgba(23,174,37,0.85); color: #fff;
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
}
.op-zero-ex-bar {
  height: 8px; background: rgba(255,255,255,0.1); border-radius: 999px;
  margin-top: 13px; overflow: hidden;
}
.op-zero-ex-bar span { display: block; height: 100%; background: #8833FF; border-radius: 999px; }
.op-zero-ex-collected { font-size: 11.5px; color: rgba(255,255,255,0.6); margin-top: 8px; }

/* Headline, subline, CTA, reassurance. */
.op-zero-head {
  font: 700 30px var(--display); color: #fff; margin: 30px 0 0; line-height: 1.15;
}
.op-zero-sub {
  font-size: 14.5px; color: rgba(255,255,255,0.6); max-width: 460px;
  margin: 12px 0 0; line-height: 1.5;
}
.op-zero-cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 26px; margin-top: 22px;
  background: #8833FF; color: #fff; text-decoration: none;
  font: 600 15px var(--text); border-radius: 10px;
  box-shadow: 0 4px 18px rgba(136,51,255,0.45); transition: background 0.15s ease;
}
.op-zero-cta:hover { background: #7A22F0; color: #fff; }
.op-zero-reassure { font-size: 12.5px; color: rgba(255,255,255,0.45); margin: 12px 0 0; }

/* Three step cards — equal thirds. */
.op-zero-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  width: 100%; margin-top: 30px;
}
.op-zero-step {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 13px; padding: 15px 14px; text-align: left;
}
.op-zero-step-label {
  font-size: 11px; font-weight: 700; color: #A56BFA; letter-spacing: 1px;
}
.op-zero-step-body { font-size: 12.5px; color: rgba(255,255,255,0.7); margin-top: 7px; line-height: 1.45; }

@media (max-width: 720px) {
  .op-zero-steps { grid-template-columns: 1fr; }
  .op-zero-head { font-size: 24px; }
}

/* ---------- waitlist panel (design_handoff_waitlist_notify_me D1–D3) ---------- */
.op-wl-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--divider); }
.op-wl-row:last-of-type { border-bottom: none; }
.op-wl-row.resting { opacity: 0.55; }
.op-wl-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.op-wl-name { font-size: 13.5px; font-weight: 600; color: var(--title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-wl-chip-waiting { background: var(--tint); color: #6f22d6; }
.op-wl-chip-notified { background: var(--chipbg); color: var(--body); }
.op-wl-chip-resting { background: var(--surface); color: var(--muted); }
.op-wl-chip-claimed { background: var(--green-bg); color: var(--green); }