/* css/customer-portal.css
   Minimal customer-only shell (customer-surface lane, 2026-09-21).
   Layout only -- every color is a CSS custom property with a hardcoded
   fallback, same convention as css/communications.css. */

.cp-shell {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  font-family: var(--font, inherit);
}

.cp-header h1 {
  font-size: 1.5rem;
  margin: 0 0 4px;
  color: var(--ink-1, #111);
}

.cp-subtitle {
  margin: 0 0 20px;
  color: var(--ink-2, #555);
  font-size: 0.95rem;
}

.cp-attention-badge {
  background: var(--amber-bg, #fff4e0);
  color: var(--amber, #8a5a00);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0 0 16px;
  font-size: 0.9rem;
  font-weight: 600;
}

.cp-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.cp-error {
  background: var(--neg, #fdecea);
  color: var(--ink-1, #7a1f1f);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 16px;
}

.cp-empty {
  color: var(--ink-2, #555);
  padding: 16px 0;
}

.cp-trip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cp-trip-card {
  border: 1px solid var(--border, #ddd);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--surface, #fff);
}

.cp-trip-route {
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--ink-1, #111);
}

.cp-trip-meta {
  margin: 0 0 10px;
  color: var(--ink-2, #555);
  font-size: 0.85rem;
}

.cp-trip-noaction {
  color: var(--ink-2, #777);
  font-size: 0.85rem;
  margin: 0;
}

/* ---- Invited-customer onboarding + home (owner reference 2026-10-15) ----
   docs/design/customer-onboarding-reference-20261015.png. Existing Balen
   tokens only (css/brandv2.tokens.css --k-*, with fallbacks); no new design
   system. Mobile-first; every control is at least 44px tall. */
.cp-onb.cp-shell {
  position: relative;
  max-width: 600px;
  min-height: 100vh;
  padding: 0 16px 32px;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--k-page, #F5F7F6);
  color: var(--k-text-primary, #142B2E);
  overflow-x: hidden;
}
.cp-onb::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 72%; height: 360px;
  background-image:
    linear-gradient(180deg, var(--k-page, #F5F7F6) 0%, rgba(245, 247, 246, 0.6) 14%, rgba(245, 247, 246, 0) 40%),
    linear-gradient(0deg, var(--k-page, #F5F7F6) 0%, rgba(245, 247, 246, 0) 38%),
    url(/assets/brand/billy/v1/hero-aircraft.jpg);
  background-size: cover, cover, cover;
  background-position: center, center, 50% 60%;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 25%, #000 62%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 25%, #000 62%);
  pointer-events: none;
  z-index: 0;
}
.cp-onb > * { position: relative; z-index: 1; }
.cp-onb svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cp-top { z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 0 0; }
.cp-brand { min-width: 0; }
.cp-lockup-text { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
.cp-tagline { margin: 8px 0 0; font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--k-text-secondary, #46605F); white-space: nowrap; }
.cp-account { position: relative; }
.cp-avatar {
  width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--k-surface, #fff); border: 1px solid var(--k-line, #E2EAE8); color: var(--k-text-primary, #142B2E);
  box-shadow: var(--k-shadow-1, 0 1px 2px rgba(6, 42, 44, 0.05)); cursor: pointer; padding: 0;
}
.cp-avatar svg { width: 30px; height: 30px; stroke-width: 1.6; }
.cp-avatar:focus-visible, .cp-menu-item:focus-visible, .cp-upload:focus-visible, .cp-cta:focus-visible, .cp-link:focus-visible { outline: 3px solid var(--k-accent, #1B6B6D); outline-offset: 2px; }
.cp-menu {
  position: absolute; right: 0; top: 56px; z-index: 5; min-width: 240px; padding: 6px;
  background: var(--k-surface, #fff); border: 1px solid var(--k-line, #E2EAE8); border-radius: 16px;
  box-shadow: var(--k-shadow-2, 0 8px 24px rgba(6, 42, 44, 0.07));
}
.cp-menu[hidden] { display: none; }
.cp-menu-item {
  display: block; width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 10px; background: none;
  text-align: left; font: inherit; font-size: 15px; color: var(--k-text-primary, #142B2E); cursor: pointer;
}
.cp-menu-item:hover { background: var(--k-surface-2, #EEF4F2); }
.cp-hero { padding: 40px 0 28px; max-width: 62%; min-height: 150px; }
.cp-hero h1, .cp-hero p { text-shadow: 0 0 12px var(--k-page, #F5F7F6), 0 0 2px var(--k-page, #F5F7F6); }
.cp-hero h1 { margin: 0 0 12px; font-size: 32px; line-height: 1.1; font-weight: 700; letter-spacing: -0.015em; color: var(--k-text-primary, #142B2E); }
.cp-hero p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--k-text-primary, #142B2E); }
.cp-message:empty { display: none; }
.cp-message { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--k-accent-tint, #E3F0EF); color: var(--accent-text, #135759); font-size: 14px; }
.cp-card {
  background: var(--k-surface, #fff); border-radius: 24px; padding: 20px;
  box-shadow: var(--k-shadow-card, 0 1px 2px rgba(6, 42, 44, 0.05), 0 8px 24px rgba(6, 42, 44, 0.07));
  margin: 0 0 14px;
}
.cp-steps[hidden], .cp-home[hidden], [data-ca-invite-card][hidden] { display: none; }
.cp-step-head { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 14px; }
.cp-step-num {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--k-surface-2, #EEF4F2); color: var(--k-text-primary, #142B2E); font-size: 20px; font-weight: 700;
}
.cp-step-done .cp-step-num { background: var(--k-accent, #1B6B6D); color: var(--k-accent-text, #fff); }
.cp-step-titles { min-width: 0; flex: 1; }
.cp-step-titles h2 { margin: 2px 0 2px; font-size: 21px; line-height: 1.2; font-weight: 700; color: var(--k-text-primary, #142B2E); }
.cp-step-state { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--k-text-tertiary, #5B7371); }
.cp-step-state[data-step-state="done"] { color: var(--k-pos, #157A5F); }
.cp-step-state[data-step-state="current"] { color: var(--accent-text, #135759); }
.cp-step-sub { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--k-text-secondary, #46605F); }
.cp-step-done .cp-step-head { margin-bottom: 6px; }
.cp-step-summary { margin: 0 0 0 58px; font-size: 15px; color: var(--k-text-secondary, #46605F); overflow-wrap: anywhere; }
.cp-step-note { margin: 10px 0 0; font-size: 14px; color: var(--k-text-secondary, #46605F); }
.cp-step-upcoming .cp-step-titles h2 { color: var(--k-text-secondary, #46605F); }
[data-ob-profile] { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.cp-field {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px;
  border: 1px solid var(--k-line, #E2EAE8); border-radius: 18px; background: var(--k-surface, #fff); cursor: text;
}
.cp-field:focus-within { border-color: var(--k-accent, #1B6B6D); box-shadow: 0 0 0 3px var(--accent-glow, rgba(27, 107, 109, 0.16)); }
.cp-field-icon { color: var(--k-text-primary, #142B2E); display: inline-flex; }
.cp-field-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cp-field-label { font-size: 14px; color: var(--k-text-primary, #142B2E); }
.cp-field input { border: 0; outline: 0; padding: 2px 0 0; margin: 0; background: transparent; font: inherit; font-size: 17px; color: var(--k-text-primary, #142B2E); min-height: 28px; width: 100%; box-shadow: none; }
.cp-field input::placeholder { color: var(--k-text-tertiary, #5B7371); opacity: 0.85; }
.cp-cta {
  display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: center; gap: 12px;
  border-radius: 18px; font-size: 17px; font-weight: 600; padding: 12px 18px; cursor: pointer;
}
.cp-cta.cp-primary { background: var(--brand-navy, #0B3A3C); color: #fff; border: 1px solid var(--brand-navy, #0B3A3C); }
.cp-cta.cp-primary:hover { background: var(--k-accent-press, #155A5C); }
.cp-cta.cp-outline { background: var(--k-surface, #fff); color: var(--k-text-primary, #142B2E); border: 1.5px solid var(--k-text-secondary, #46605F); }
.cp-cta.cp-outline > span { flex: 1; text-align: left; }
.cp-cta[disabled] { opacity: 0.55; cursor: not-allowed; }
.cp-upload {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 16px 18px; text-align: left;
  border: 1.5px dashed var(--k-line, #C9D6D3); border-radius: 18px; background: var(--k-surface-2, #F4F7F6);
  color: var(--k-text-primary, #142B2E); font: inherit; cursor: pointer;
}
.cp-upload-current { border-color: var(--k-accent, #1B6B6D); background: var(--k-accent-tint, #E3F0EF); }
.cp-upload-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cp-upload-text strong { font-size: 17px; font-weight: 600; }
.cp-upload-text span { font-size: 14px; color: var(--k-text-secondary, #46605F); }
.cp-upload-chevron { display: inline-flex; }
.cp-link { background: none; border: 0; padding: 0 2px; min-height: 44px; font: inherit; color: var(--accent-text, #135759); text-decoration: underline; cursor: pointer; }
.cp-invite-from { margin: 0 0 8px; font-size: 16px; }
.cp-invite-assets { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cp-invite-assets li { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.cp-invite-assets small { font-weight: 400; color: var(--k-text-secondary, #46605F); }
.cp-invite-access { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--k-text-secondary, #46605F); }
.cp-alert { border: 1px solid var(--k-warn, #8A5A0F); }
.cp-alert p { margin: 0 0 12px; }
.cp-secure { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 0 0; font-size: 13.5px; color: var(--k-text-secondary, #46605F); text-align: center; }
.cp-secure svg { width: 20px; height: 20px; }
.cp-section > h2, .cp-section h2 { font-size: 19px; margin: 0 0 4px; color: var(--k-text-primary, #142B2E); }
.cp-section > p { color: var(--k-text-secondary, #46605F); margin: 0 0 12px; font-size: 14.5px; }
.cp-section:empty { display: none; }
.cp-asset-name { font-weight: 600; color: var(--k-text-primary, #142B2E) !important; }
.cp-context { display: block; margin: 0 0 12px; font-size: 14px; }
.cp-context[hidden] { display: none; }
.cp-context select { display: block; width: 100%; margin-top: 4px; min-height: 44px; }
.cp-card-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.cp-billing, .cp-earlier { margin: 12px 0 0; }
.cp-billing > summary, .cp-earlier > summary { cursor: pointer; color: var(--accent-text, #135759); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.cp-earlier .cp-trip-card { margin-top: 8px; }
.cp-row-card { display: flex; align-items: center; gap: 14px; }
.cp-row-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--k-surface-2, #EEF4F2); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cp-row-text { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 14px; color: var(--k-text-secondary, #46605F); }
.cp-row-text strong { font-size: 16px; color: var(--k-text-primary, #142B2E); }
.cp-row-btn { min-height: 44px; }
.cp-home .cp-empty { margin: 0; padding: 4px 0; }
.cp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cp-id-pick { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 6px; }
.cp-id-pick-btn { position: relative; flex: 1 1 140px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.cp-id-chosen { margin: 6px 0 12px; font-size: 14px; color: var(--k-text-secondary, #46605F); overflow-wrap: anywhere; }
@media (max-width: 380px) {
  .cp-hero { max-width: 72%; padding-top: 28px; }
  .cp-hero h1 { font-size: 28px; }
  .cp-tagline { font-size: 9.5px; letter-spacing: 0.2em; }
  .cp-card { padding: 18px 16px; }
}
@media (min-width: 900px) {
  .cp-onb.cp-shell { max-width: 640px; padding-bottom: 48px; }
  .cp-onb::before { height: 440px; }
  .cp-card-grid { grid-template-columns: 1fr 1fr; }
}
.cp-card[hidden] { display: none; }
/* Review D4 (2026-10-15): exactly one dark primary on screen. Every other page
   action is a light outline; the modal's file pickers too. */
.cp-onb .btn.secondary, .cp-onb .btn.cp-row-btn {
  background: var(--k-surface, #fff); color: var(--k-text-primary, #142B2E);
  border: 1.5px solid var(--k-line, #C9D6D3); box-shadow: none; min-height: 44px;
}
.cp-onb .btn.secondary:hover, .cp-onb .btn.cp-row-btn:hover { background: var(--k-surface-2, #EEF4F2); }
.cp-id-pick-btn.btn {
  background: var(--k-surface, #fff); color: var(--k-text-primary, #142B2E);
  border: 1.5px solid var(--k-line, #C9D6D3); box-shadow: none;
}
.cp-id-pick-btn:focus-within { outline: 3px solid var(--k-accent, #1B6B6D); outline-offset: 2px; }
/* Phones: the photo sits to the right, below the brand row, behind a stronger
   fade, so the tagline and hero text never sit on the photo. */
@media (max-width: 480px) {
  .cp-onb::before {
    top: 112px; width: 52%; height: 300px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.25) 30%, #000 75%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.25) 30%, #000 75%);
  }
  .cp-hero { max-width: 58%; }
  .cp-hero h1 { font-size: 29px; }
}
@media (max-width: 380px) {
  .cp-hero { max-width: 60%; }
  .cp-hero h1 { font-size: 27px; }
}

/* Invitation lifecycle (2026-10-16). Same tokens as above; no new tokens.
   Signed-out landing: while the anonymous invitation lookup is pending the
   sign-in surface is held neutral (js/customer-access.js signedOutLanding,
   bounded hold), so no login flashes before the invitation. */
html.ca-landing-pending #app { visibility: hidden; }
.ca-landing-assets { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ca-landing-assets li {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px;
  background: var(--k-surface-2, #EEF4F2); color: var(--k-text-primary, #142B2E); font-weight: 600;
}
.ca-landing-assets svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; }
.ca-landing [data-ca-other-sign-in] { margin-top: 12px; min-height: 44px; }
/* Invitee waiting state (correction pending): informational, no action. */
.cp-waiting[hidden] { display: none; }
.cp-waiting h2 { margin: 0 0 6px; font-size: 19px; line-height: 1.2; font-weight: 700; color: var(--k-text-primary, #142B2E); }
.cp-waiting p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--k-text-secondary, #46605F); }
.cp-invite [data-ca-decline] { display: block; margin: 12px auto 0; min-height: 44px; }