/* Glasswall customer pages, Courtside direction (visual layer only).
   Used by account.html, control.html, watch.html. Requires tokens.css and
   glasswall.css first. The page scripts are unchanged and still emit their
   original class names, so this file restyles those classes rather than
   changing the scripts. Palette, type and radii all come from tokens.css. */

.gw-page { max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--gw-bg); font-size: var(--gw-text-lg); }
.gw-page--wide { max-width: 640px; }
.gw-page .gw-cust-hero { padding-bottom: 0; }
.gw-page .gw-cust-hero .topbar-identity { padding-bottom: var(--gw-space-4); }
.gw-page .gw-cust-hero .topbar-identity:empty { padding: 0; }
.gw-page .gw-cust-header { height: 56px; gap: var(--gw-space-3); }
.gw-page .gw-cust-header img { height: 24px; width: auto; filter: brightness(0) invert(1); display: block; }
.gw-page .gw-cust-header a { text-decoration: none; }
.gw-hero-brand { display: flex; align-items: center; gap: 12px; }
.gw-hero-brand__product { font-size: var(--gw-text-lg); font-weight: var(--gw-weight-medium); color: var(--gw-on-base); }
.gw-hero-brand__divider { width: 1px; height: 18px; background: var(--gw-base-line); }
.gw-hero-sub { display: flex; align-items: center; justify-content: space-between; gap: var(--gw-space-3); flex-wrap: wrap; font-size: var(--gw-text-sm); }
.gw-hero-sub a { color: var(--gw-on-base-soft); }
.gw .gw-hero-sub a:hover { color: var(--gw-on-base); }

/* signed-in identity row (filled by the account script) */
.topbar-identity { display: flex; align-items: center; gap: var(--gw-space-3); flex-wrap: wrap; font-size: var(--gw-text-sm); color: var(--gw-on-base-soft); }
.topbar-identity:empty { display: none; }
.topbar-identity .topbar-name { color: var(--gw-on-base-soft); font-size: var(--gw-text-sm); }
.gw .topbar-identity a.topbar-name { color: var(--gw-on-base); text-decoration: underline; text-underline-offset: 3px; }
.asn-plus-badge { display: inline-block; padding: 2px 8px; border-radius: var(--gw-radius-pill); background: var(--gw-accent); color: var(--gw-on-accent); font-size: var(--gw-text-xs); font-weight: var(--gw-weight-strong); margin-left: 0; vertical-align: middle; }
.greeting .asn-plus-badge { margin-left: var(--gw-space-2); }

.wrap { padding: var(--gw-space-5) var(--gw-space-5) var(--gw-space-8); }
#root { display: flex; flex-direction: column; gap: var(--gw-space-4); }

/* generic cards */
.state-card, .panel, .score-card, .book-section, .court-card, .booking-card {
  background: var(--gw-surface); border: 1px solid var(--gw-border); border-radius: var(--gw-radius-lg); color: var(--gw-ink);
}
.state-card { padding: var(--gw-space-6) var(--gw-space-5); text-align: left; }
.state-card h1 { margin: 0 0 var(--gw-space-2); font-size: var(--gw-text-3xl); font-weight: var(--gw-weight-strong); line-height: 1.25; letter-spacing: 0; color: var(--gw-ink); }
.state-card p { margin: 0; color: var(--gw-ink-muted); font-size: var(--gw-text-md); line-height: 1.5; }
.state-card p[style], .panel p[style], .score-card p[style] { margin-top: var(--gw-space-3) !important; font-size: var(--gw-text-md) !important; color: var(--gw-ink-muted) !important; line-height: 1.5 !important; }
.state-card .btn-signin { margin-top: var(--gw-space-4); }
.panel { padding: var(--gw-space-5); }
.panel > p { margin: 0 0 var(--gw-space-3); }
.panel-label, .score-label { margin: 0 0 var(--gw-space-3); font-size: var(--gw-text-xl); font-weight: var(--gw-weight-strong); color: var(--gw-ink); text-transform: none; letter-spacing: 0; }
.score-card { padding: var(--gw-space-5); }

/* countdown: navy block drawn as a court outline */
.state-card:has(.countdown-time) { position: relative; background: var(--gw-base); border-color: var(--gw-base); color: var(--gw-on-base); padding: var(--gw-space-8) var(--gw-space-6); overflow: hidden; }
.state-card:has(.countdown-time)::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255, 255, 255, 0.22); pointer-events: none; }
.state-card:has(.countdown-time) > * { position: relative; z-index: 1; }
.state-card:has(.countdown-time) h1 { color: var(--gw-on-base); }
.state-card:has(.countdown-time) p, .state-card:has(.countdown-time) p[style] { color: var(--gw-on-base-soft) !important; }
.countdown-time { font-family: var(--gw-font-mono); font-size: 48px; line-height: 1; font-weight: var(--gw-weight-regular); letter-spacing: 0; color: var(--gw-on-base); margin: var(--gw-space-4) 0 var(--gw-space-2); }
.countdown-label { font-size: var(--gw-text-sm); text-transform: none; letter-spacing: 0; color: var(--gw-on-base-muted); }

/* court header + status badges */
.court-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gw-space-3); flex-wrap: wrap; margin: 0; }
.court-name { font-size: var(--gw-text-4xl); font-weight: var(--gw-weight-strong); line-height: 1.2; color: var(--gw-ink); }
.court-location { margin-top: 2px; font-size: var(--gw-text-md); color: var(--gw-ink-muted); }
.role-badge, .live-badge, .state-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--gw-radius-pill); font-size: var(--gw-text-xs); font-weight: var(--gw-weight-strong); text-transform: none; letter-spacing: 0; white-space: nowrap; background: var(--gw-accent); color: var(--gw-on-accent); }
.role-badge.is-live, .live-badge, .state-badge.live { background: var(--gw-live); color: #FFFFFF; }
.state-badge.upcoming { background: var(--gw-accent); color: var(--gw-on-accent); }
.role-badge .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #FFFFFF; animation: gw-pulse 1.4s ease-in-out infinite; }
.live-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #FFFFFF; animation: gw-pulse 1.4s ease-in-out infinite; }
@keyframes gw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .role-badge .live-dot, .live-badge::before, .spinner, .btn-stop.is-live { animation: none !important; } }

/* video / snapshot slot */
.video-wrap, .video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--gw-feed); border-radius: var(--gw-radius-lg); overflow: hidden; margin: 0; }
.video-wrap::before { content: ""; position: absolute; inset: 24px 32px; border: 1px solid var(--gw-court-line); }
.video-wrap::after { content: ""; position: absolute; top: 24px; bottom: 24px; left: 50%; width: 1px; background: var(--gw-court-line); }
.video-wrap:has(img[style*="display: block"])::before, .video-wrap:has(img[style*="display: block"])::after { display: none; }
.video-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.video-offline { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; font-family: var(--gw-font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--gw-on-base-muted); text-transform: uppercase; }
.snap-age { position: absolute; z-index: 2; bottom: 6px; right: 8px; font-family: var(--gw-font-mono); font-size: 11px; color: var(--gw-on-base-soft); }
.video-frame video { width: 100%; height: 100%; object-fit: contain; background: var(--gw-feed); }
.video-loading, .video-error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; padding: 20px; text-align: center; font-size: var(--gw-text-md); color: var(--gw-on-base-soft); }
.video-error { display: none; }
.spinner { width: 28px; height: 28px; border: 3px solid var(--gw-base-line); border-top-color: var(--gw-accent); border-radius: 50%; animation: gw-spin 0.8s linear infinite; }
@keyframes gw-spin { to { transform: rotate(360deg); } }

/* form controls */
.panel label, .book-form label { display: block; margin: var(--gw-space-4) 0 var(--gw-space-2); font-size: var(--gw-text-sm); font-weight: var(--gw-weight-medium); color: var(--gw-ink-muted); text-transform: none; letter-spacing: 0; }
.panel label:first-of-type, .book-form label:first-of-type { margin-top: 0; }
.panel input[type="text"], .panel input[type="password"], .book-form select, .book-form input[type="date"] {
  width: 100%; height: var(--gw-touch-h); padding: 0 12px; border-radius: var(--gw-radius-md);
  border: 1px solid var(--gw-control-border); background: var(--gw-surface); color: var(--gw-ink); font-size: var(--gw-text-md); font-family: inherit;
}
.panel input::placeholder { color: var(--gw-ink-faint); }

/* buttons */
.btn, .btn-signin, .btn-book-toggle, .btn-submit-booking, .btn-cancel-booking, .court-action a {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gw-space-2);
  min-height: var(--gw-touch-h); padding: 0 var(--gw-space-5); border-radius: var(--gw-radius-md);
  border: 1px solid var(--gw-control-border); background: var(--gw-surface); color: var(--gw-ink);
  font-family: inherit; font-size: var(--gw-text-md); font-weight: var(--gw-weight-medium);
  text-transform: none; letter-spacing: 0; text-decoration: none; cursor: pointer; margin: 0;
}
.gw .btn { margin: var(--gw-space-4) var(--gw-space-2) 0 0; }
.gw a.btn, .gw .court-action a { color: var(--gw-ink); }
.btn:hover, .btn-cancel-booking:hover, .court-action a:hover { border-color: var(--gw-ink-muted); background: var(--gw-surface); }
.btn-primary, .btn-start, .btn-book-toggle { background: var(--gw-base); border-color: var(--gw-base); color: var(--gw-on-base); }
.btn-primary:hover, .btn-start:hover, .btn-book-toggle:hover { background: var(--gw-base-raised); border-color: var(--gw-base-raised); }
.btn-stop { background: var(--gw-surface); border-color: var(--gw-danger-border); color: var(--gw-danger-text); }
.btn-stop:hover { background: var(--gw-surface); border-color: var(--gw-live); }
.btn-stop.is-live { border-color: var(--gw-live); box-shadow: 0 0 0 2px rgba(200, 53, 46, 0.25); animation: none; }
.btn-secondary { background: var(--gw-surface); color: var(--gw-ink); }
.btn[disabled], .btn-submit-booking:disabled { background: var(--gw-track); border-color: var(--gw-track); color: var(--gw-ink-faint); opacity: 1; cursor: not-allowed; }
/* one lime call to action per screen */
.btn-signin, .btn-submit-booking { background: var(--gw-accent); border-color: var(--gw-accent); color: var(--gw-on-accent); font-weight: var(--gw-weight-strong); }
.gw a.btn-signin { color: var(--gw-on-accent); }
.btn-signin:hover, .btn-submit-booking:hover { background: var(--gw-accent); border-color: var(--gw-ink-muted); }
.btn-submit-booking { width: 100%; height: 52px; margin-top: var(--gw-space-5); font-size: var(--gw-text-xl); border-radius: var(--gw-radius-lg); }
.btn-submit-booking.is-loading { padding-left: 38px; }
.btn-submit-booking.is-loading::before { left: 14px; border-color: rgba(24, 24, 42, 0.3); border-top-color: var(--gw-ink); }
.btn-cancel-booking { min-height: 36px; padding: 0 var(--gw-space-3); font-size: var(--gw-text-sm); color: var(--gw-danger-text); border-color: var(--gw-danger-border); background: transparent; }
/* "View Dashboard" link is emitted with inline orange styles; keep it a neutral secondary button */
.gw a.btn-cancel-booking { color: var(--gw-ink) !important; border-color: var(--gw-control-border) !important; background: var(--gw-surface); }

/* status rows */
.status-row { display: flex; justify-content: space-between; align-items: center; gap: var(--gw-space-3); padding: var(--gw-space-2) 0; font-size: var(--gw-text-md); border-bottom: 1px solid var(--gw-divider); }
.status-row:last-of-type { border-bottom: none; }
.status-row span:first-child { color: var(--gw-ink-muted); }
.status-row .val { color: var(--gw-ink); font-weight: var(--gw-weight-medium); font-family: var(--gw-font-mono); font-size: var(--gw-text-sm); }
.status-row .val.is-running { color: var(--gw-ok-text); }
.status-row .val.is-error { color: var(--gw-error-text); }
.status-row .val.is-restarting { color: var(--gw-warn-text); }
.form-note { margin: var(--gw-space-3) 0 0; font-size: var(--gw-text-sm); color: var(--gw-ink-muted); }
.form-error, .book-error { margin-top: var(--gw-space-2); min-height: 0; font-size: var(--gw-text-sm); color: var(--gw-error-text); }
.book-error { display: none; min-height: 0; }
.save-confirm, .book-success { margin-top: var(--gw-space-2); min-height: 0; height: 0; overflow: visible; font-size: var(--gw-text-sm); color: var(--gw-ok-text); opacity: 0; transition: opacity 0.2s ease; }
.save-confirm.show { opacity: 1; height: auto; }
.book-success { display: none; opacity: 1; height: auto; }

/* score (watch) */
.score-empty { font-size: var(--gw-text-md); color: var(--gw-ink-muted); }
.score-row { display: flex; justify-content: space-between; align-items: center; padding: var(--gw-space-2) 0; font-size: var(--gw-text-lg); font-weight: var(--gw-weight-medium); }
.score-row span:last-child { font-family: var(--gw-font-mono); }
.score-row + .score-row { border-top: 1px solid var(--gw-divider); }

/* account */
.greeting h1 { margin: 0; font-size: var(--gw-text-4xl); font-weight: var(--gw-weight-strong); line-height: 1.2; color: var(--gw-ink); }
.court-card, .booking-card { padding: var(--gw-space-4) var(--gw-space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--gw-space-3); flex-wrap: wrap; margin: 0; }
.court-info .court-name, .booking-card .booking-court { font-size: var(--gw-text-xl); font-weight: var(--gw-weight-strong); color: var(--gw-ink); }
.court-info .court-location, .booking-card .booking-when { font-size: var(--gw-text-md); color: var(--gw-ink-muted); margin-top: 2px; }
.booking-card .booking-when { font-family: var(--gw-font-mono); font-size: var(--gw-text-sm); }
.overtime-tag { display: inline-block; margin-top: 6px; font-size: var(--gw-text-sm); color: var(--gw-ink-muted); }
.empty-note { padding: var(--gw-space-5) 0; text-align: center; font-size: var(--gw-text-md); color: var(--gw-ink-muted); }
.book-section { padding: var(--gw-space-5); }
.book-section.prominent { border-color: var(--gw-base); }
.book-section h2 { margin: 0 0 2px; font-size: var(--gw-text-3xl); font-weight: var(--gw-weight-strong); color: var(--gw-ink); }
.book-section .book-sub { margin-bottom: var(--gw-space-4); font-size: var(--gw-text-md); color: var(--gw-ink-muted); }
.book-form { display: none; margin-top: var(--gw-space-4); }
.book-form.open { display: block; }
#root > h2[style] { margin: var(--gw-space-3) 0 0 !important; font-family: var(--gw-font-sans) !important; font-size: var(--gw-text-xl) !important; font-weight: var(--gw-weight-strong) !important; color: var(--gw-ink) !important; }
.footer-note { margin: var(--gw-space-3) 0 0; text-align: center; font-size: var(--gw-text-xs); color: var(--gw-ink-muted); }

@media (max-width: 420px) {
  .countdown-time { font-size: 40px; }
  .court-name { font-size: 22px; }
}

/* inline spacing from the unchanged scripts would double the flex gap */
#root > [style*="margin-bottom:16px"], #root > [style*="margin-top:16px"] { margin-top: 0 !important; margin-bottom: 0 !important; }

/* ---------- Account page on desktop: fill the screen (phone layout unchanged) ---------- */
@media (min-width: 900px) {
  .gw-page:not(.gw-page--wide) { max-width: none; }
  .gw-page:not(.gw-page--wide) .gw-cust-header,
  .gw-page:not(.gw-page--wide) .topbar-identity,
  .gw-page:not(.gw-page--wide) .wrap { padding-left: max(24px, calc((100% - 1120px) / 2)); padding-right: max(24px, calc((100% - 1120px) / 2)); }
  .gw-page:not(.gw-page--wide) #root { display: grid; grid-template-columns: minmax(0, 3fr) minmax(360px, 2fr); column-gap: var(--gw-space-6); row-gap: var(--gw-space-4); align-items: start; }
  .gw-page:not(.gw-page--wide) #root > * { grid-column: 1; }
  .gw-page:not(.gw-page--wide) #root > .greeting,
  .gw-page:not(.gw-page--wide) #root > .footer-note,
  .gw-page:not(.gw-page--wide) #root > .state-card { grid-column: 1 / -1; }
  .gw-page:not(.gw-page--wide) #root > .book-section { grid-column: 2; grid-row: 2 / span 12; position: sticky; top: var(--gw-space-4); }
}