/* ==========================================================================
   Customer portal (/my) — Phase F.2 layout on the one design system.
   Loaded after the page's older inline styles and before spl-ui.css; every
   rule is scoped under .pc (the <main>). Visibility still comes from the
   page's .active classes, which customer.js toggles.
   ========================================================================== */

body { background: var(--spl-ground); }

.pc { width: 100%; max-width: 760px; margin: 0 auto; padding: var(--spl-s-5) var(--spl-gutter) var(--spl-s-9); display: grid; gap: var(--spl-s-4); }
.pc > * { min-width: 0; }

.pc .pc-head { display: grid; gap: 6px; padding: 0 2px; margin: 0; background: none; border: 0; box-shadow: none; }
.pc .pc-head .spl-overline { color: var(--spl-accent); }
.pc .pc-title { margin: 0; font-size: var(--spl-t-h1); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; color: var(--spl-ink-1); text-align: left; }
.pc .pc-sub { margin: 0; font-size: var(--spl-t-body); line-height: 1.5; color: var(--spl-ink-3); max-width: 56ch; }

.pc .pc-card { margin: 0; padding: var(--spl-s-5); border-radius: var(--spl-r-xl); border: 1px solid var(--spl-border); background: var(--spl-surface); box-shadow: var(--spl-e-1); }
@media (max-width: 479px) { .pc { padding-inline: 10px; } .pc .pc-card { padding: var(--spl-s-4); border-radius: var(--spl-r-lg); } }
@media (min-width: 768px) { .pc { padding-top: var(--spl-s-8); } .pc .pc-card { padding: var(--spl-s-6); } }

/* Sign-in steps */
.pc .pc-step-title { margin: 0 0 6px; font-size: var(--spl-t-h2); font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; color: var(--spl-ink-1); }
.pc .pc-step-sub { margin: 0 0 var(--spl-s-5); font-size: var(--spl-t-body); line-height: 1.5; color: var(--spl-ink-3); }
.pc .pc-fields { display: grid; gap: var(--spl-s-4); }
.pc .pc-fields .label { font-size: var(--spl-t-label); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--spl-ink-1); margin: 0; }
.pc .pc-fields .hint { margin: 2px 0 0; font-size: var(--spl-t-helper); color: var(--spl-ink-3); font-weight: 400; }
.pc .pc-fields .btn-row { display: flex; flex-wrap: wrap; gap: var(--spl-s-2); margin: 0; }
.pc .pc-otp { font-size: 1.375rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; text-align: center; }
.pc .pc-otp-actions .spl-btn--block { flex-basis: 100%; }
.pc .pc-otp-actions .spl-btn:not(.spl-btn--block) { flex: 1; }
.pc .status-message:empty { display: none; }
.pc .status-message { margin-top: var(--spl-s-4); border-radius: var(--spl-r); font-size: var(--spl-t-helper); line-height: 1.5; }

/* Loading: the shape of what is coming, not a spinner */
.pc .pc-loader { gap: var(--spl-s-3); padding: 0; min-height: 0; text-align: left; }
.pc .pc-loader.active { display: grid; }
.pc .pc-loader__line { height: 44px; width: 100%; border-radius: var(--spl-r-lg); }
.pc .pc-loader__card { height: 168px; border-radius: var(--spl-r-lg); }

/* Upcoming / Past */
.pc .pc-tabs { margin: 0 0 var(--spl-s-4); max-width: 360px; border: 0; box-shadow: none; }
.pc .pc-tabs .tab-btn { min-height: 44px; border: 0; box-shadow: none; }
.pc .pc-tabs .tab-btn.active { background: var(--spl-surface); color: var(--spl-ink-1); box-shadow: var(--spl-e-2); }
.pc .pc-tabs .tab-btn:not(.active) { background: transparent; color: var(--spl-ink-3); }

.pc .pc-empty { padding: var(--spl-s-7) var(--spl-s-4); border-radius: var(--spl-r-lg); background: var(--spl-ground); border: 1px dashed var(--spl-border-strong); text-align: center; }
.pc .pc-empty .empty-title { margin: 0 0 4px; font-size: var(--spl-t-h3); font-weight: 600; color: var(--spl-ink-1); }
.pc .pc-empty .empty-sub { margin: 0; font-size: var(--spl-t-helper); color: var(--spl-ink-3); }

/* Booking cards (rendered by customer.js) */
.pc .pc-bookings { display: grid; gap: var(--spl-s-3); margin: 0; }
.pc .booking-card { margin: 0; padding: var(--spl-s-5) var(--spl-s-4) var(--spl-s-4); border-radius: var(--spl-r-lg); border: 1px solid var(--spl-border); background: var(--spl-surface); box-shadow: none; transform: none; }
@media (min-width: 480px) { .pc .booking-card { padding: var(--spl-s-5); } }
.pc .booking-card:hover { box-shadow: var(--spl-e-2); transform: none; }
.pc .booking-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spl-s-3); margin: 0 0 var(--spl-s-3); }
.pc .biz-chip { display: block; margin: 0 0 4px; padding: 0; background: none; border: 0; font-size: var(--spl-t-helper); font-weight: 600; color: var(--spl-ink-3); letter-spacing: 0; text-transform: none; box-shadow: none; }
.pc .booking-title { margin: 0; font-size: var(--spl-t-h3); font-weight: 650; line-height: 1.3; letter-spacing: -0.012em; color: var(--spl-ink-1); }
.pc .booking-sub { margin: 4px 0 0; font-size: var(--spl-t-body); font-weight: 500; color: var(--spl-ink-2); font-variant-numeric: tabular-nums; }
.pc .status-pill { flex: none; min-height: 26px; padding: 3px 10px; border-radius: var(--spl-r-pill); font-size: var(--spl-t-caption); font-weight: 600; letter-spacing: 0; text-transform: none; box-shadow: none; }
.pc .pc-paid { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spl-s-3); margin: 0; padding: var(--spl-s-3) 0; border-top: 1px solid var(--spl-border); font-size: var(--spl-t-helper); color: var(--spl-ink-3); max-width: none; }
.pc .pc-paid strong { font-size: var(--spl-t-label); font-weight: 600; color: var(--spl-ink-1); font-variant-numeric: tabular-nums; }
.pc .pc-balance { margin: 0 0 var(--spl-s-3); padding: 10px var(--spl-s-3); border-radius: var(--spl-r); background: var(--spl-warn-wash); color: var(--spl-warn); font-size: var(--spl-t-helper); font-weight: 600; line-height: 1.45; max-width: none; }
.pc .booking-card > .hint { margin: 0 0 var(--spl-s-3); padding: 10px var(--spl-s-3); border-radius: var(--spl-r); background: var(--spl-warn-wash); color: var(--spl-warn); font-size: var(--spl-t-helper); font-weight: 500; line-height: 1.45; max-width: none; }
.pc .actions-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spl-s-2); margin: var(--spl-s-2) 0 0; }
@media (min-width: 640px) { .pc .actions-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.pc .actions-row .btn {
  min-height: 44px; width: 100%; margin: 0; padding: 0 var(--spl-s-3); border-radius: var(--spl-r);
  font: 600 var(--spl-t-helper)/1.2 var(--spl-font); display: inline-flex; align-items: center; justify-content: center; text-align: center;
  background: var(--spl-surface); color: var(--spl-ink-1); border: 1px solid var(--spl-border-strong); box-shadow: none;
}
.pc .actions-row .btn:hover { background: var(--spl-ground); }
.pc .actions-row .btn.primary { grid-column: 1 / -1; min-height: var(--spl-control); background: var(--spl-accent); color: #fff; border-color: var(--spl-accent-strong); font-size: var(--spl-t-button); }
.pc .actions-row .btn[data-action="cancel"] { color: var(--spl-danger); border-color: #e7b8b1; }
.pc .actions-row .btn:focus-visible { outline: none; box-shadow: var(--spl-focus); }
.pc .actions-note { grid-column: 1 / -1; margin: 4px 0 0; font-size: var(--spl-t-helper); line-height: 1.45; color: var(--spl-ink-3); }

/* Help, after the bookings */
.pc .pc-help { margin-top: var(--spl-s-5); padding: var(--spl-s-4); border-radius: var(--spl-r-lg); background: var(--spl-ground); border: 1px solid var(--spl-border); }
.pc .pc-help__title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: var(--spl-t-label); font-weight: 600; color: var(--spl-ink-1); }
.pc .pc-help__title .spl-icon { color: var(--spl-accent); }
.pc .pc-help__sub { margin: 0 0 var(--spl-s-3); font-size: var(--spl-t-helper); line-height: 1.45; color: var(--spl-ink-3); }
.pc .pc-help__row { display: flex; gap: var(--spl-s-2); }
.pc .pc-help__row .spl-input { flex: 1; min-width: 0; margin: 0; }
.pc .pc-help__row .spl-btn { flex: none; }
.pc .pc-help__answer { display: block; white-space: pre-wrap; margin-top: var(--spl-s-3); background: var(--spl-surface); }
.pc .pc-help__copy { margin-top: var(--spl-s-2); }