/* Night: the whole app in the language of the home page and /join — a deep
   green-black sky, warm gold for what you press, mint for what is safe, and
   glass panels that let the scene behind show through. Loaded after
   style.css on every page but the admin console, and written as overrides so
   style.css keeps working on its own. The 3D scene behind each page is
   public/js/ambient-scene.js; without it the sky below is the background. */
:root {
  --night-bg:#040b08;
  --night-ink:#eef3e9;
  --night-muted:#a9b8a8;
  --night-gold:#f2c77a;
  --night-gold-deep:#d9a45b;
  --night-mint:#8fe0c4;
  --night-glass:#ffffff0d;
  --night-glass-strong:#0b1712e6;
  --night-line:#ffffff1f;
  --color-bg:var(--night-bg);
  --color-surface:var(--night-glass);
  --color-text:var(--night-ink);
  --color-muted:var(--night-muted);
  --color-border:var(--night-line);
  --color-primary:var(--night-gold);
  --color-primary-dark:var(--night-gold-deep);
  --color-accent:var(--night-gold);
  --color-success:var(--night-mint);
  --color-danger:#ff9b8f;
  --shadow:0 18px 50px #0008;
  color-scheme:dark;
}
/* The sky is the page's own background (html), so the scene canvas, one
   layer above it, is never covered by body's paint. */
html {
  background:
    radial-gradient(70vmax 50vmax at 50% -10%, #1c3f3055, transparent 70%),
    radial-gradient(60vmax 45vmax at 100% 110%, #f2c77a12, transparent 60%),
    var(--night-bg);
  background-attachment:fixed;
}
body { background:transparent; color:var(--night-ink); }
::selection { background:#f2c77a55; }
a { color:var(--night-gold); }
:focus-visible { outline-color:var(--night-mint); }

/* The scene sits behind everything, and fades in once it draws. */
.ambient-canvas { position:fixed; inset:0; width:100vw; height:100vh; height:100lvh; z-index:-1; pointer-events:none; opacity:0; transition:opacity 1.4s ease; }
.ambient-canvas.is-live { opacity:.62; }
/* Pages that are a single moment (sign in) show their scene at full strength. */
body.night-stage .ambient-canvas.is-live { opacity:1; }

/* Type: large, tight, quiet — Apple's product pages. */
h1, h2, h3 { color:var(--night-ink); letter-spacing:-.015em; }
main h1 { font-size:clamp(2rem, 8vw, 3.2rem); line-height:1.12; font-weight:800; }
.subtitle, .field-help, small, .muted { color:var(--night-muted); }
/* The little spaced label above a heading repeated the heading; the heading
   says it alone, the way Apple's pages do. */
main .eyebrow { display:none; }

/* Header and bottom bar: glass over the sky. */
.site-header { background:#040b08b8; border-bottom:1px solid #ffffff12; backdrop-filter:saturate(1.4) blur(18px); -webkit-backdrop-filter:saturate(1.4) blur(18px); }
.site-header .brand, .site-header .main-nav a, .account-menu > summary { color:var(--night-ink); }
.site-header .brand small { display:none; }
.site-header .brand-mark { background:#ffffff14; color:var(--night-gold); }
.site-header .main-nav a[aria-current] { background:#ffffff1a; color:#fff; }
.account-dropdown { background:var(--night-glass-strong); border:1px solid var(--night-line); box-shadow:var(--shadow); backdrop-filter:blur(20px); }
.account-dropdown a, .account-dropdown .link-button { color:var(--night-ink); }
.account-dropdown a:hover { background:#ffffff12; }
.avatar { background:#ffffff1a; color:var(--night-gold); }
.mobile-nav { background:#040b08d9; border-top:1px solid #ffffff14; backdrop-filter:saturate(1.4) blur(18px); -webkit-backdrop-filter:saturate(1.4) blur(18px); }
.mobile-nav a { color:var(--night-muted); }
.mobile-nav [aria-current] { background:#ffffff1a; color:#fff; }
.site-footer { background:transparent; border-top:1px solid #ffffff12; color:var(--night-muted); }
.site-footer a, .site-footer strong { color:var(--night-ink); }

/* Panels: frosted glass with a hairline, not white cards. */
.card, .empty-state, .blog-card, .settings-facts, .account-quick, .profile-summary, .profile-editor-section,
.profile-work-option, .work-status, .balance-tile, .wallet-empty, .guide-section, .guide-steps li,
.notification-settings, .search-panel, .availability-form, .profile-photo-tile, .referral-hero,
.tip-options, .booking-steps, .chat-header, .section-card, details.card {
  background:var(--night-glass);
  border:1px solid var(--night-line);
  box-shadow:none;
  color:var(--night-ink);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.card:hover { box-shadow:none; }
hr { border-color:var(--night-line); }

/* Buttons: gold for the one thing to do, glass for the rest. */
button, .btn, input[type=submit] {
  background:linear-gradient(180deg, #ffe2a8, var(--night-gold-deep));
  color:#1c1405;
  border:0;
  box-shadow:0 8px 28px #f2c77a33, inset 0 1px 0 #fff8;
}
button:hover, .btn:hover { filter:brightness(1.05); text-decoration:none; }
.btn-secondary, button.btn-secondary, .btn-ghost, .link-button {
  background:#ffffff0f;
  color:var(--night-ink);
  border:1px solid var(--night-line);
  box-shadow:none;
}
.btn-secondary:hover { background:#ffffff1a; }
.link-button { background:none; border:0; color:var(--night-gold); }
.btn-danger, button.btn-danger { background:#ff9b8f22; color:#ffb4aa; border:1px solid #ff9b8f55; box-shadow:none; }
.btn-line { background:#06c755; color:#fff; box-shadow:0 8px 28px #06c75533; }
.btn-google { background:#fff; color:#1f1f1f; border:0; box-shadow:0 8px 28px #0006; }

/* Fields: dark glass, gold focus. */
input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password],
input[type=datetime-local], input[type=date], input[type=time], input[type=search], input[type=url], select, textarea {
  background:#ffffff0a;
  color:var(--night-ink);
  border:1px solid var(--night-line);
}
input:focus, select:focus, textarea:focus { border-color:var(--night-gold); box-shadow:0 0 0 3px #f2c77a2e; outline:none; }
input::placeholder, textarea::placeholder { color:#a9b8a880; }
select option { background:#0b1712; color:var(--night-ink); }
input::file-selector-button { background:#ffffff14; color:var(--night-ink); border:1px solid var(--night-line); }
label, legend { color:var(--night-ink); }

/* Messages. */
.flash { background:#ffffff0d; border:1px solid var(--night-line); color:var(--night-ink); }
.flash-notice, .flash-success { background:#8fe0c414; border-color:#8fe0c455; color:#d8fff0; }
.flash-error { background:#ff9b8f14; border-color:#ff9b8f55; color:#ffd6d0; }

/* Tables. */
table { color:var(--night-ink); }
th { background:#ffffff0a; color:var(--night-muted); }
td, th { border-color:var(--night-line); }
tr:hover td { background:#ffffff06; }

/* Chips, badges, tabs. */
.chip, .tag, .badge, .status-pill, .tier-tabs a, .tabs a, .pill {
  background:#ffffff0f;
  color:var(--night-ink);
  border-color:var(--night-line);
}
.tier-tabs a[aria-current], .tabs a[aria-current], .tabs .is-active { background:linear-gradient(180deg, #ffe2a8, var(--night-gold-deep)); color:#1c1405; border-color:transparent; }
details > summary { color:var(--night-ink); }
code { background:#ffffff12; color:var(--night-gold); }

/* The money figure is the page, the way a price is on apple.com. */
.balance-tile .amount { color:var(--night-gold); }
.balance-tile:first-child { background:linear-gradient(160deg, #f2c77a26, #ffffff08 60%); border-color:#f2c77a44; }

@media (prefers-reduced-motion: reduce) { .ambient-canvas { display:none; } }

/* Panels that style.css paints light on their own. */
details.faq-item, .blog-cta, .guide-faq-list, .guide-safety, .guide-footer-action, .pp-more-panel, .pp-stats, .pp-book,
.slot-date-control, .meetup-picker, .withdraw-breakdown, .onboarding-note, .pay-later-note, .booking-next, .meetup-summary,
.wallet-ledger-list, .account-menu-list, .table-scroll, .photo-upload, .photo-menu-panel, .profile-editor-note, .profile-editor-tips,
.work-readiness, .availability-saved-row, .referral-stats, .referral-ratio, .referral-copy-row, .voucher-status, .search-lede,
.hero-compact, .hero, .guide-hero, .edit-layout aside, .chat-compose, .settings-facts, .rate-heading, .profile-rate-field, .profile-privacy {
  background:var(--night-glass);
  border-color:var(--night-line);
  color:var(--night-ink);
  box-shadow:none;
}
.pp-hero, .pp-slide.photo-wrap, .profile-editor-avatar.photo-wrap { background:#0b1712; }
.blog-tag, .notification-icon, .account-icon, .account-avatar, .settings-avatar, .profile-section-icon, .guide-section-icon, .wallet-ledger-icon {
  background:#ffffff12;
  color:var(--night-gold);
  border-color:var(--night-line);
}
.guide a:not(.btn), .guide-page a:not(.btn) { background:transparent; }
.onboarding-note { border-left-color:var(--night-gold); }
.photo-menu-panel { background:var(--night-glass-strong); backdrop-filter:blur(20px); }
.pp-book { background:#040b08e6; backdrop-filter:saturate(1.4) blur(18px); -webkit-backdrop-filter:saturate(1.4) blur(18px); border-top:1px solid var(--night-line); }
.skip-link { background:var(--night-gold); color:#1c1405; }
.guide-safety-options > div, .slot-date-control, .profile-section-nav a, .pp-more > summary, input[type=file] {
  background:var(--night-glass);
  border-color:var(--night-line);
  color:var(--night-ink);
}
.profile-section-nav a[aria-current] { background:linear-gradient(180deg, #ffe2a8, var(--night-gold-deep)); color:#1c1405; }
.profile-section-nav a[aria-current] small { color:#3b2a0c; }

/* Status pills and badges: tinted glass, readable on the sky. */
[class*="status-"], .badge, [class*="badge-"] { background:#f2c77a1f; color:var(--night-gold); border-color:#f2c77a44; }
.status-checked_in, .status-completed, .status-escrow_held, .badge-verified, .check-passed { background:#8fe0c41f; color:var(--night-mint); border-color:#8fe0c455; }
.status-cancelled, .status-disputed, .status-expired, .status-rejected { background:#ff9b8f1a; color:#ffb4aa; border-color:#ff9b8f44; }
.pp-hero .badge-verified { background:#040b08b3; backdrop-filter:blur(8px); }
.account-identity, .profile-work, .guide-hero { background:var(--night-glass); border-color:var(--night-line); }
.guide-safety > p, .guide-safety p, .guide-safety li { color:var(--night-muted); }
.work-readiness li > span { background:#f2c77a26; color:var(--night-gold); }
.voucher-danger-zone h2 { color:#ffb4aa; }
.talent-card .price, .price-chip, [class*="price"] strong { color:var(--night-gold); }

/* Sign in: one moment, told like a product page. Two lights meet behind a
   large gold line, and the two ways in sit under it, nothing else. */
.night-gold { background:linear-gradient(100deg, #fff3d6, var(--night-gold) 45%, var(--night-gold-deep)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.night-stage .auth-layout { display:flex; flex-direction:column; align-items:center; text-align:center; gap:28px; max-width:460px; margin:0 auto; padding:14vh 0 8vh; min-height:calc(100svh - 160px); }
.night-stage .auth-intro h1 { font-size:clamp(2.6rem, 12vw, 4.4rem); line-height:1.08; margin:0; text-shadow:0 6px 50px #000; }
.night-stage .auth-card { width:100%; background:#040b0880; border:1px solid #ffffff1a; border-radius:28px; padding:26px 22px; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.night-stage .auth-card h2 { font-size:1.15rem; margin:0 0 4px; }
.night-stage .auth-card .subtitle { margin:0 0 4px; }
.night-stage .auth-providers .btn { padding:16px; border-radius:999px; font-size:1.05rem; font-weight:800; }
.night-stage .site-footer { display:none; }

/* Chat: the window in night glass. */
#chat-widget .cw-launcher { background:linear-gradient(180deg, #ffe2a8, var(--night-gold-deep)); color:#1c1405; box-shadow:0 8px 30px #0009; }
#chat-widget .cw-launcher #cw-badge { background:#ff6b5a; color:#fff; }
#chat-widget .cw-panel { background:#07110ceb; border-color:var(--night-line); box-shadow:0 24px 80px #000c; color:var(--night-ink); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
#chat-widget :is(.cw-header, .cw-requests-heading, .cw-room-heading, .cw-booking, .cw-location, .cw-journey, .cw-request, .cw-call-panel, .cw-share-controls, .cw-voice-preview, .cw-feedback, .cw-empty, .cw-point) { background:#ffffff08; color:var(--night-ink); border-color:var(--night-line); }
#chat-widget .cw-room-button { background:transparent; color:var(--night-ink); border-color:var(--night-line); box-shadow:none; }
#chat-widget .cw-room-button:hover { background:#ffffff0d; }
#chat-widget .cw-room-button small, #chat-widget .cw-header small, #chat-widget .cw-bubble small { color:var(--night-muted); }
#chat-widget .cw-bubble { background:#ffffff12; color:var(--night-ink); border-color:transparent; }
#chat-widget .cw-bubble.mine { background:linear-gradient(180deg, #ffe2a8, var(--night-gold-deep)); color:#1c1405; }
#chat-widget .cw-bubble.mine small { color:#3b2a0c; }
#chat-widget :is(input, textarea, select) { background:#ffffff0d; color:var(--night-ink); border-color:var(--night-line); }
#chat-widget .cw-tools button, #chat-widget .cw-header button { background:#ffffff0f; color:var(--night-ink); border:1px solid var(--night-line); box-shadow:none; }
#chat-widget .cw-tools button[type=submit], #chat-widget button.cw-send { background:linear-gradient(180deg, #ffe2a8, var(--night-gold-deep)); color:#1c1405; border:0; }

/* Phones: the chat button lives in the header, beside you, the way the
   messages button does in Instagram — it stops floating over the page. The
   window opens down from it as a sheet. */
@media (max-width: 640px) {
  body #chat-widget { top:calc(12px + env(safe-area-inset-top)); bottom:auto; right:96px; }
  body #chat-widget .cw-launcher { width:40px; height:40px; background:#ffffff14; color:var(--night-ink); border:1px solid var(--night-line); box-shadow:none; }
  body #chat-widget .cw-panel { position:fixed; top:var(--cw-screen-top,0px); bottom:auto; left:0; right:0; width:100%; height:var(--cw-screen-height,100dvh); border-radius:0; }
  body #chat-widget .cw-header { padding-top:calc(12px + env(safe-area-inset-top)); }
  body #chat-widget .cw-details { max-height:54%; }
  body #chat-widget #cw-compose { padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
  body #chat-widget #cw-text { font-size:16px; }
  body #chat-widget #cw-attach, body #chat-widget #cw-record { min-width:38px; padding:9px 7px; }
  body #chat-widget .cw-date-separator { color:var(--night-muted); }
  body #chat-widget #cw-history { color:var(--night-gold); }
}

#chat-widget :is(.cw-requests-heading, .cw-room-heading, .cw-room-name, .cw-header > div) { background:transparent; }
#chat-widget .cw-booking-ref { background:#f2c77a1f; color:var(--night-gold); border-color:#f2c77a44; }
#chat-widget .cw-messages, #chat-widget .cw-inbox, #chat-widget .cw-room { background:transparent; }
#chat-widget form button:not([type=submit]), #chat-widget .cw-compose button:not([type=submit]) { background:#ffffff0f; color:var(--night-ink); border:1px solid var(--night-line); box-shadow:none; }
#chat-widget #cw-attach, #chat-widget #cw-record, #chat-widget #cw-connection { background:#ffffff0f; color:var(--night-ink); border:1px solid var(--night-line); box-shadow:none; }
#chat-widget .cw-room-button[data-attention='true'] { background:#f2c77a14; border-color:#f2c77a44; }
#chat-widget .cw-messages, #chat-widget .cw-compose, #chat-widget form { border-color:var(--night-line); }

/* Notifications: a quiet list of rows, one tap each, a gold dot on the unread. */
article.notification-item { padding:0; background:transparent; border:0; border-bottom:1px solid var(--night-line); border-radius:0; backdrop-filter:none; margin:0; }
.notification-row { display:flex; gap:14px; align-items:flex-start; padding:14px 4px; color:var(--night-ink); text-decoration:none; }
.notification-row:hover { background:#ffffff08; text-decoration:none; }
.notification-row .notification-icon { flex:0 0 40px; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; }
.notification-text { flex:1; min-width:0; display:grid; gap:2px; }
.notification-text strong { font-weight:600; }
.notification-unread .notification-text strong { font-weight:800; }
.notification-text .notification-body { color:var(--night-muted); font-size:.92rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.notification-text .notification-time { color:#a9b8a8aa; font-size:.8rem; }
.notification-dot { flex:0 0 9px; width:9px; height:9px; margin-top:16px; border-radius:50%; background:var(--night-gold); box-shadow:0 0 12px var(--night-gold); }
.booking-next-steps:not(:has(.btn-row > *)) { display:none; }

/* A talent's public page is a shop front: the book bar is the only thing at
   the bottom (Airbnb, Grab), so the app's tab bar steps aside here. */
body:has(.pp-book) .mobile-nav { display:none; }
@media (max-width: 640px) { body:has(.pp-book) .pp-book { bottom:0; padding-bottom:calc(12px + env(safe-area-inset-bottom)); } }
.notification-text { gap:1px; line-height:1.45; }
.notification-text > * { margin:0; }

/* Chosen / not chosen, everywhere the same: glass when not, gold with dark
   text when it is. (style.css chose with a green fill and white text, which
   on the night theme came out white on pale — the selected one vanished.) */
.slot-options button, .slot-times button, .weekday-pick, .tip-options label, .tip-options label:has(>input[type=radio]), .day-tab, .chip-choice, .choice-chip {
  background:#ffffff0d; color:var(--night-ink); border:1px solid var(--night-line); box-shadow:none;
}
.slot-options button[aria-pressed='true'], .slot-times button[aria-pressed='true'],
.weekday-pick:has(input:checked), .tip-options label:has(>input[type=radio]:checked), .day-tab-active,
.tier-tabs a.active, .tier-tabs [aria-current], .profile-section-nav a[aria-current="location"],
label:has(> input[type=radio]:checked).choice-chip, .chat-bubble.mine, .referral-how li::before {
  background:linear-gradient(180deg, #ffe2a8, var(--night-gold-deep)); color:#1c1405; border-color:transparent; box-shadow:0 6px 20px #f2c77a33;
}
:is(.slot-options button[aria-pressed='true'], .slot-times button[aria-pressed='true'], .weekday-pick:has(input:checked), .tip-options label:has(>input:checked), .day-tab-active, .profile-section-nav a[aria-current]) :is(small, span, strong) { color:#1c1405; }
.brand-mark, .account-avatar, .settings-avatar { background:#ffffff14; color:var(--night-gold); }
/* The tab you are on in the bottom bar and the header: a bright pill, gold icon. */
.mobile-nav [aria-current], .main-nav [aria-current] { background:#f2c77a24; color:var(--night-gold); }
.mobile-nav [aria-current] .icon, .main-nav [aria-current] .icon { color:var(--night-gold); }
.guide-page .guide-faq-list summary:hover { background:#ffffff0a; }
.guide-page .guide-faq-list details[open] summary { color:var(--night-gold); background:#f2c77a14; }
#slot-more-duration summary { background:#ffffff0d; color:var(--night-ink); border-color:var(--night-line); }
#chat-widget .cw-launcher #cw-badge, #cw-badge { background:#d63b2e; color:#fff; }

/* booking-slots.css is linked by the booking page after this file, so its
   choices are answered here with one more level of weight. */
html body :is(.slot-options, .slot-times) button { background:#ffffff0d; color:var(--night-ink); border:1px solid var(--night-line); box-shadow:none; }
html body :is(.slot-options, .slot-times) button[aria-pressed='true'] { background:linear-gradient(180deg, #ffe2a8, var(--night-gold-deep)); color:#1c1405; border-color:transparent; box-shadow:0 6px 20px #f2c77a33; }
html body #slot-more-duration { border-color:var(--night-line); }
html body #slot-more-duration summary { background:transparent; color:var(--night-gold); }
html body .slot-date-control { background:var(--night-glass); border-color:var(--night-line); color:var(--night-ink); }
html body .slot-date-control:focus-within { outline-color:var(--night-gold); }
html body .slot-times button:disabled { background:transparent; color:#a9b8a877; border-style:dashed; }
html body .slot-selection { background:#8fe0c414; color:var(--night-ink); }
html body .slot-date-display { color:var(--night-ink); }
html body .slot-date-display small { color:var(--night-muted); }
html body .booking-slots { border-top-color:var(--night-line); }

/* Tap states. On a phone a tapped row keeps its :hover, and style.css drew
   that as a pale fill — under the night's white text the item you had just
   chosen went blank. Every such state is a soft glass lift instead. */
html body :is(.account-menu-item, .account-quick, .guide-jump-links a, .main-nav > a, .photo-add, .profile-section-nav a, .mobile-nav a, .inbox-item, .blog-card, .talent-card, .tier-tabs a, .account-dropdown a):hover {
  background:#ffffff12; color:var(--night-ink); border-color:#f2c77a55; text-decoration:none;
}
html body :is(.photo-menu-panel, .pp-more-panel) :is(button, a):hover { background:#ffffff14; color:var(--night-ink); }
html body .btn-secondary:hover, html body .link-button:hover { background:#ffffff1a; color:var(--night-ink); }
html body .link-button:hover { background:transparent; color:var(--night-gold); }
html body .btn-danger:hover { background:#ff9b8f33; color:#ffd6d0; }
/* The chosen tab keeps its colour while it is being touched. */
html body :is(.mobile-nav, .main-nav) [aria-current]:hover { background:#f2c77a24; color:var(--night-gold); }
html body .profile-section-nav a[aria-current]:hover, html body .tier-tabs [aria-current]:hover { background:linear-gradient(180deg, #ffe2a8, var(--night-gold-deep)); color:#1c1405; }
@media (hover:none) { html body a:hover, html body button:hover { text-decoration:none; } }
.availability-preview { background:#ffffff0a; border-color:var(--night-line); color:var(--night-ink); }
/* A count riding on the chosen (gold) tab reads dark on gold. */
:is(.tier-tabs [aria-current], .tier-tabs a.active, .profile-section-nav a[aria-current]) .badge { background:#1c140526; color:#1c1405; border-color:#1c140533; }

/* Found walking the site as a new member and as a new talent. */
.profile-editor-note { background:#f2c77a12; border-color:#f2c77a3d; color:var(--night-ink); }
.profile-editor-note p { color:#d9e3d6; }
.profile-editor-note strong, .profile-editor-note a { color:var(--night-gold); }
html body .profile-form-shortcuts a { background:#ffffff0d; color:var(--night-ink); border:1px solid var(--night-line); }
html body .profile-form-shortcuts a:hover { background:#ffffff1a; color:var(--night-ink); border-color:#f2c77a55; }
.profile-save-bar { background:#07110cf0; border-color:var(--night-line); color:var(--night-ink); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.profile-save-bar p { color:var(--night-muted); }
.referral-how li { background:var(--night-glass); border-color:var(--night-line); color:var(--night-ink); }
.referral-how li strong { color:var(--night-ink); }
.referral-how span { color:var(--night-muted); }
.pay-now { background:#f2c77a14; border-color:#f2c77a55; color:var(--night-ink); }
.pay-now p, .pay-now strong { color:var(--night-ink); }
.pay-now a:not(.btn) { color:var(--night-gold); }

/* The Thai file button (app.js): the real input lies invisibly over it. */
.file-pick { position:relative; display:flex; align-items:center; gap:12px; padding:10px; border:1px dashed var(--night-line); border-radius:14px; background:#ffffff08; }
.file-pick-button { flex:none; padding:9px 16px; border-radius:999px; background:#ffffff14; border:1px solid var(--night-line); font-weight:700; color:var(--night-ink); }
.file-pick-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--night-muted); font-size:.9rem; }
.file-pick.has-file .file-pick-name { color:var(--night-mint); }
.file-pick > input[type=file] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; margin:0; padding:0; border:0; }
.file-pick:focus-within { outline:3px solid var(--night-mint); outline-offset:2px; }

/* A field written inside its label (services, 2FA) sits under the words, full width. */
label > input:not([type=checkbox]):not([type=radio]):not([type=file]) { display:block; width:100%; margin-top:6px; }
.guide-steps li::before { background:#f2c77a1f; color:var(--night-gold); border:1px solid #f2c77a44; }
.guide-book { color:var(--night-ink); background:#101d17; border-color:#a8855277; border-left-color:#b58b50; box-shadow:0 18px 45px #0006,inset 8px 0 13px #0003; }
.guide-book::before { background:#c7a46555; }
.guide-book-head,.guide-book-toolbar-bottom { border-color:#c7a46555; }
.guide-book-kicker,.guide-book-head-count,.guide-book .guide-contents > summary { color:var(--night-gold); }
.guide-book .guide-contents > summary span { color:var(--night-muted); }
.guide-book-paper > section,.guide-book .guide-safety,.guide-turn-sheet { color:var(--night-ink); background:#192a22; border:1px solid #c7a46550; border-radius:3px; box-shadow:inset 0 0 18px #0002; backdrop-filter:none; -webkit-backdrop-filter:none; }
.guide-book-paper > section.guide-leaf-left { border-radius:8px 2px 2px 8px; box-shadow:inset -14px 0 18px #0004; }
.guide-book-paper > section.guide-leaf-right { border-radius:2px 8px 8px 2px; box-shadow:inset 14px 0 18px #0004; }
.guide-book h2,.guide-book h3 { color:var(--night-ink); }
.guide-book .guide-safety p,.guide-book .guide-safety li { color:var(--night-muted); }
.guide-book .guide-steps li,.guide-book .guide-faq-list,.guide-book .guide-safety-options > div { background:#24382d; border-color:#c7a4653d; backdrop-filter:none; -webkit-backdrop-filter:none; }
.guide-book .guide-steps li::before { background:#c7a46523; color:var(--night-gold); border-color:#c7a46555; }
.guide-book .guide-faq-list summary:hover,.guide-book .guide-faq-list details[open] summary { background:#c7a4651a; color:var(--night-gold); }
.guide-book .guide-jump-links a { background:#ffffff0d; color:var(--night-gold); border-color:#c7a46555; }
.guide-book .guide-jump-links a[aria-current=page] { background:var(--night-gold); color:#241a0b; border-color:var(--night-gold); }
.guide-book .guide-book-actions button { background:#ffffff0d; color:var(--night-gold); border-color:#c7a46566; }
.guide-book .guide-book-actions button:hover:not(:disabled),.guide-book .guide-book-actions button:focus-visible { background:#c7a46530; }
.booking-steps li { border-top-color:var(--night-line); }
.booking-steps li.done { border-top-color:var(--night-gold); color:var(--night-gold); }
.booking-steps li[aria-current] { color:var(--night-ink); }

/* The radar's "when" and "what": a segmented bar, then activity chips. */
.when-tabs { display:flex; gap:4px; padding:4px; margin:14px auto 0; width:max-content; max-width:100%; overflow-x:auto; border-radius:999px; background:#040b0899; border:1px solid var(--night-line); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); scrollbar-width:none; }
.when-tabs a { display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; color:var(--night-muted); font-weight:700; font-size:.9rem; white-space:nowrap; text-decoration:none; }
.when-tabs a[aria-current] { background:linear-gradient(180deg, #ffe2a8, var(--night-gold-deep)); color:#1c1405; }
.when-count { min-width:20px; padding:0 6px; border-radius:999px; background:#8fe0c42e; color:var(--night-mint); font-size:.75rem; text-align:center; }
.when-tabs a[aria-current] .when-count { background:#1c140526; color:#1c1405; }
.activity-chips { display:flex; gap:8px; margin:10px 0 0; padding:2px 16px; overflow-x:auto; scrollbar-width:none; justify-content:safe center; }
.activity-chips a { flex:none; padding:7px 14px; border-radius:999px; background:#ffffff0f; border:1px solid var(--night-line); color:var(--night-ink); font-size:.88rem; font-weight:600; text-decoration:none; }
.activity-chips a[aria-current] { background:#f2c77a24; border-color:#f2c77a88; color:var(--night-gold); }
html body :is(.when-tabs, .activity-chips) a:hover { text-decoration:none; }
.results-filters { padding:4px 0 10px; }
.results-filters .when-tabs { margin:0 auto; }

/* The radar before a scan says what the home page's teaser said. */
.universe-kicker { margin:0; color:var(--night-ink); font-weight:800; font-size:clamp(2.2rem, 10vw, 4.4rem); line-height:1.08; letter-spacing:-.02em; text-shadow:0 6px 40px #000c; }
.universe-headline { margin:0 0 12px; font-weight:800; font-size:clamp(2.4rem, 11vw, 4.8rem); line-height:1.1; letter-spacing:-.02em; }
.universe-kicker + .universe-headline + .universe-caption { max-width:28em; margin:0 auto; font-weight:500; line-height:1.55; text-shadow:0 2px 20px #000; }
/* Gradient text clips to its own box: Thai marks above the line need room. */
.universe-headline, .night-gold { line-height:1.32; padding-top:.08em; }
.universe-headline .night-gold { display:inline-block; padding:.28em .04em .06em; margin-top:-.2em; }
.night-stage h1 .night-gold { display:inline-block; padding:.22em .04em .04em; margin-top:-.18em; }

/* The home page's radius picture under the radar (radius-scene.js). */
.discovery-universe .radius-backdrop { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:0; transition:opacity 1.2s ease; }
.discovery-universe .radius-backdrop.is-live { opacity:1; }
.discovery-universe .sonar-stage:has(.radius-backdrop.is-live) { background:#040b08; }

/* During the radar's opening (radius-scene.js) the words and controls wait,
   then rise in as the camera arrives — the teaser, then the real thing. */
.discovery-universe :is(.universe-intro, .universe-controls, .radar-canvas) { transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
html.radar-opening .discovery-universe :is(.universe-intro, .universe-controls, .radar-canvas) { opacity:0; transform:translateY(18px); pointer-events:none; }
@media (prefers-reduced-motion: reduce) { html.radar-opening .discovery-universe :is(.universe-intro, .universe-controls, .radar-canvas) { opacity:1; transform:none; pointer-events:auto; } }

/* Time and activity inside the one settings dialog. */
.search-settings-dialog { background:#07110cf2; color:var(--night-ink); border:1px solid var(--night-line); border-radius:24px; box-shadow:0 30px 90px #000c; max-height:calc(100dvh - 32px); overflow:auto; }
.search-settings-dialog::backdrop { background:#000a; backdrop-filter:blur(6px); }
.setting-choices { border:0; padding:0; margin:18px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.setting-choices legend { font-weight:700; margin-bottom:8px; padding:0; }
.setting-choices .choice-chip { position:relative; display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:999px; cursor:pointer; font-weight:600; }
.setting-choices .choice-chip input { position:absolute; opacity:0; pointer-events:none; }
.setting-choices .choice-chip:has(input:focus-visible) { outline:3px solid var(--night-mint); outline-offset:2px; }
.setting-choices .choice-chip .when-count[hidden] { display:none; }
.setting-choices .choice-chip:has(input:checked) .when-count { background:#1c140526; color:#1c1405; }

/* Activity tags on a profile and a card: mint glass, readable on the sky. */
html body .tag, html body .pp-tags .tag { background:#8fe0c41a; color:#c9f3e3; border:1px solid #8fe0c440; }
/* The profile's content ends above its fixed book bar, never under it. */
body:has(.pp-book) main { padding-bottom:calc(110px + env(safe-area-inset-bottom)); }
/* Reviews: glass cards, gold stars, the empty ones faint. */
.pp-review { background:var(--night-glass); border-color:var(--night-line); color:var(--night-ink); }
.pp-review .prose, .pp-review p { color:var(--night-ink); }
.pp-stars { color:var(--night-gold); }
.pp-stars span { color:#ffffff2e; }
.pp-reply, .pp-reply-form { background:#ffffff08; border-color:var(--night-line); color:var(--night-ink); }
#filter-label:empty { display:none; }

/* The brand icon (public/brand/icons/app-icon.svg) is its own dark tile. */
.brand-mark, .jn-mark { background:none !important; padding:0; overflow:hidden; border-radius:9px; }
.brand-mark img, .jn-mark img { display:block; width:100%; height:100%; }

/* People on the radar: now = bright and pulsing, later = quieter. */
.sonar-blip.is-now .blip-planet { box-shadow:0 0 0 3px #f2c77a, 0 0 26px 6px #f2c77aaa; }
.sonar-blip.is-now::after { content:""; position:absolute; inset:-10px; border-radius:50%; border:2px solid #f2c77a; animation:blip-pulse 2s ease-out infinite; pointer-events:none; }
.sonar-blip.is-later { opacity:.72; }
.sonar-blip.is-later .blip-planet { box-shadow:0 0 0 2px #8fe0c488; filter:saturate(.8); }
@keyframes blip-pulse { from { transform:scale(.8); opacity:.9; } to { transform:scale(1.7); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .sonar-blip.is-now::after { animation:none; opacity:.5; } }

/* The card a person opens into, on the sky. */
.sky-card { position:absolute; z-index:30; display:flex; gap:12px; width:min(300px, calc(100% - 24px)); padding:10px; border-radius:20px; background:#07110cf0; border:1px solid #f2c77a55; box-shadow:0 18px 50px #000c; color:var(--night-ink); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); animation:sky-card-in .22s cubic-bezier(.2,.8,.2,1); }
.sky-card-photo { flex:none; width:86px; height:104px; border-radius:14px; overflow:hidden; background:#0b1712; }
.sky-card-photo img { width:100%; height:100%; object-fit:cover; }
.sky-card-body { min-width:0; display:flex; flex-direction:column; gap:3px; }
.sky-card-body strong { font-size:1.05rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sky-card-when { font-size:.85rem; color:var(--night-muted); }
.sky-card-when.is-now { color:var(--night-mint); font-weight:700; }
.sky-card-price { font-size:.85rem; color:var(--night-gold); font-weight:700; }
.sky-card-go { margin-top:auto; padding:8px 12px; font-size:.9rem; text-align:center; border-radius:999px; }
@keyframes sky-card-in { from { opacity:0; transform:translateY(6px) scale(.97); } }
.discovery-universe .radar-canvas { touch-action:pan-y; }
.sky-card-body { text-align:left; }

/* Saved hidden zones: readable rows with a clear remove button. */
.hide-zones-title { margin:14px 0 6px; font-weight:700; color:var(--night-ink); }
html body .hide-zones li { background:#8fe0c414; border:1px solid #8fe0c440; color:var(--night-ink); }
html body .hide-zones li strong { color:var(--night-ink); }
html body .hide-zones li button { background:#ff9b8f1f; color:#ffb4aa; border:1px solid #ff9b8f55; box-shadow:none; padding:6px 14px; border-radius:999px; }

/* Task summaries keep money and the next booking action together. */
.profile-preferences { margin:0 0 24px; border:1px solid var(--night-line); border-radius:18px; background:var(--night-surface, #102018); }
.profile-preferences > summary { cursor:pointer; padding:20px; color:var(--night-ink); }
.profile-preferences > summary strong { font-size:1rem; }
.profile-preferences > summary span { display:block; color:var(--color-muted); font-size:.82rem; margin-top:6px; }
.profile-preferences > .card { margin:0 16px 16px; }
.wallet-money-card h2 { margin:0; font-size:1.05rem; }
.wallet-money-amount { font-size:clamp(2rem,5vw,2.65rem); font-weight:700; line-height:1.2; margin:12px 0 16px; color:var(--night-gold); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.wallet-zero-note { color:var(--color-muted); padding:12px 0; font-size:.9rem; }
.wallet-bonus-note { border-top:1px solid var(--night-line); margin-top:20px; padding-top:16px; }
.wallet-bonus-note p { margin:6px 0 0; font-size:.85rem; }
.wallet-escrow-summary { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:18px 20px; border:1px solid var(--night-line); border-radius:16px; margin:24px 0; }
.wallet-escrow-summary p { color:var(--color-muted); margin:6px 0 0; font-size:.85rem; }
.wallet-payment-help, .wallet-request-history { margin:20px 0; padding:16px 0; border-block:1px solid var(--night-line); }
.wallet-payment-help summary, .wallet-request-history summary { cursor:pointer; color:var(--night-gold); font-weight:600; }
.wallet-withdraw-panel > summary { display:list-item; width:fit-content; cursor:pointer; background:var(--night-gold); color:#201c12; padding:12px 22px; border-radius:12px; font-weight:700; }
.wallet-withdraw-panel[open] > summary { margin-bottom:18px; }
.wallet-actions-grid { margin-top:24px; align-items:start; }
.booking-action-summary { background:#f2c77a12; border:1px solid #f2c77a50; padding:14px 18px; border-radius:14px; }
.booking-needs-action { border-color:#f2c77a88; }
.booking-person { font-size:1.2rem; margin:18px 0 6px; overflow-wrap:anywhere; }
.booking-activity { color:var(--color-muted); margin:0 0 18px; overflow-wrap:anywhere; }
.booking-next strong { color:var(--night-ink); }
.booking-next p { font-size:.85rem; margin:6px 0 0; }
.booking-card-action { gap:14px; flex-wrap:wrap; margin-top:auto; padding-top:18px; }
.booking-list-grid .booking-card { display:flex; flex-direction:column; }
.booking-list-grid .booking-card[hidden] { display:none; }
@media(max-width:640px){ .profile-preferences > .card { margin-inline:8px; padding:16px; } .booking-card-action .btn { flex:1; text-align:center; } }

/* Unfinished top-ups on the wallet. */
.open-topups { border-color:#f2c77a55; background:#f2c77a0f; }
.open-topups h2 { margin:0 0 10px; font-size:1.05rem; }
.open-topup { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:14px; background:#ffffff0a; border:1px solid var(--night-line); color:var(--night-ink); text-decoration:none; }
.open-topup + .open-topup { margin-top:8px; }
.open-topup strong { display:block; font-size:1.15rem; color:var(--night-gold); }
.open-topup small { color:var(--night-muted); }
.open-topup-go { flex:none; font-weight:700; color:var(--night-gold); }
.topup-payee { margin:10px 0 0; color:var(--night-ink); } .topup-payee strong { color:var(--night-gold); }

/* Withdrawals: each request with its state, and a clear note below the minimum. */
.withdraw-requests { list-style:none; margin:12px 0 16px; padding:0; display:grid; gap:8px; }
.withdraw-request { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:14px; background:#ffffff0a; border:1px solid var(--night-line); }
.withdraw-request strong { font-size:1.1rem; color:var(--night-ink); }
.withdraw-request small { display:block; color:var(--night-muted); font-size:.82rem; }
.withdraw-request .withdraw-reason { color:#ffd6d0; }
.withdraw-status { flex:none; font-size:.85rem; font-weight:700; }
.withdraw-request.is-pending { border-color:#f2c77a55; } .withdraw-request.is-pending .withdraw-status { color:var(--night-gold); }
.withdraw-request.is-paid .withdraw-status { color:var(--night-mint); }
.withdraw-request.is-rejected .withdraw-status { color:#ffb4aa; }
.withdraw-locked { display:grid; gap:4px; padding:16px; border-radius:14px; background:#ffffff08; border:1px dashed var(--night-line); }
.withdraw-locked span { color:var(--night-muted); font-size:.9rem; }

/* After the trip: the rating, tip and review dialog, in the night look like
   the search settings dialog. It was white with the night's pale text on it. */
.post-trip-dialog { background:#07110cf2; color:var(--night-ink); border:1px solid var(--night-line); box-shadow:0 30px 90px #000c; }
.post-trip-dialog::backdrop { background:#000a; backdrop-filter:blur(6px); }
.post-trip-dialog .star-rating .stars label { color:#ffffff38; }
.post-trip-dialog .star-rating .stars input:checked + label, .post-trip-dialog .star-rating .stars label:has(~ input:checked) { color:var(--night-gold); }
.post-trip-dialog .tip-options { border-color:var(--night-line); }
.post-trip-dialog textarea, .post-trip-dialog input[type=number] { background:#ffffff0d; color:var(--night-ink); border-color:var(--night-line); }
.post-trip-dialog .btn-secondary, .post-trip-dialog #close-post-trip { background:#ffffff12; color:var(--night-ink); border:1px solid var(--night-line); }

.availability-agenda { background:#ffffff03; border-color:var(--night-line); }
.agenda-day { border-color:var(--night-line); }
button.agenda-open { background:#f2c77a0b; color:var(--night-ink); border-color:#f2c77a30; box-shadow:none; }
button.agenda-open:hover { background:#f2c77a19; }
.agenda-open strong,.agenda-edit { color:var(--night-gold); }
.agenda-busy { background:#ffffff06; color:var(--night-muted); border-color:var(--night-line); }
.availability-dialog { background:#0c1711; color:var(--night-ink); border-color:var(--night-line); box-shadow:0 30px 90px #000c; }
.availability-dialog::backdrop { background:#000a; backdrop-filter:blur(4px); }
.availability-dialog input,.availability-dialog select { color:var(--night-ink); background:#ffffff08; border-color:var(--night-line); color-scheme:dark; }
.availability-dialog input[type=date],.availability-dialog input[type=time] { min-height:48px; border-radius:12px; padding:10px 12px; font-size:16px; min-width:0; }
.availability-dialog .availability-preview { background:#ffffff05; color:var(--night-ink); border-color:var(--night-line); }

/* Monthly overview and one selected day's hours; owner-approved October 4. */
.availability-calendar { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin-top:24px; border:1px solid var(--night-line); border-radius:24px; overflow:hidden; background:linear-gradient(135deg,#173426aa,#07100dee 65%); }
.availability-month { padding:26px; }
.availability-month-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; }
.availability-month-heading h2 { margin:0; font-size:1.15rem; }
.availability-month-heading nav { display:flex; gap:6px; }
.availability-month-heading nav a,.calendar-nav-disabled { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--night-line); border-radius:12px; font-size:1.6rem; text-decoration:none; color:var(--night-ink); }
.calendar-nav-disabled { opacity:.3; }
.availability-month-heading nav a:hover { border-color:var(--night-gold); background:#ffffff08; }
.availability-weekdays,.availability-dates { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.availability-weekdays { margin-bottom:10px; text-align:center; color:var(--night-muted); font-size:.8rem; }
.calendar-date { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; min-height:54px; padding:5px 0; border:1px solid transparent; border-radius:13px; color:var(--night-ink); text-decoration:none; font-size:1rem; font-variant-numeric:tabular-nums; }
.calendar-date:hover { background:#ffffff0c; text-decoration:none; }
.calendar-date.calendar-today { border-color:#8a9d8580; }
.calendar-date.calendar-past { color:#a9b8a866; padding-bottom:16px; }
.calendar-date.calendar-past:hover { background:transparent; }
.calendar-date[aria-current=date] { background:linear-gradient(160deg,#ffe0a4,var(--night-gold)); color:#221907; border-color:transparent; box-shadow:0 6px 24px #f2c77a12; }
.calendar-marks { display:flex; gap:5px; justify-content:center; height:6px; }
.calendar-dot { display:inline-block; width:6px; height:6px; flex:none; background:var(--night-gold); border-radius:50%; }
.calendar-dot-busy { background:#a8c1f2; border-radius:1px; }
.calendar-date[aria-current=date] .calendar-dot { background:#49330d; }
.calendar-legend { display:flex; flex-wrap:wrap; gap:10px 16px; color:var(--night-muted); font-size:.75rem; margin-top:24px; }
.calendar-legend span { display:flex; align-items:center; gap:6px; }
.availability-day-detail { padding:26px; background:#0b1711dd; border-left:1px solid var(--night-line); min-width:0; }
.calendar-day-panel[hidden] { display:none!important; }
.calendar-day-panel h2 { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; font-size:1.1rem; margin:0 0 20px; }
.calendar-today-label { color:var(--night-gold); font-size:.8rem; }
.calendar-entries { display:grid; gap:12px; }
.calendar-entry,button.calendar-entry { display:block; width:100%; padding:16px 18px; text-align:left; border:1px solid var(--night-line); border-left:3px solid var(--night-gold); border-radius:15px; background:#17261c; color:var(--night-ink); box-shadow:none; white-space:normal; }
button.calendar-entry:hover { background:#203322; transform:none; border-color:#f2c77a66; }
.calendar-entry-label { display:flex; justify-content:space-between; gap:10px; margin-bottom:6px; color:var(--night-gold); font-size:.78rem; font-weight:500; }
.calendar-entry strong { display:block; font-size:1.35rem; line-height:1.4; font-weight:600; font-variant-numeric:tabular-nums; color:var(--night-ink); }
.calendar-entry small { display:block; margin-top:6px; font-size:.8rem; font-weight:400; color:var(--night-muted); }
.calendar-entry small.calendar-area-warning { color:#f2bf8e; }
.calendar-entry.calendar-entry-busy { border-left-color:#a8c1f2; background:#14202a; }
.calendar-entry-busy .calendar-entry-label { color:#b2c8f4; }
.calendar-add { margin-top:16px; }
.calendar-empty { padding:42px 8px; text-align:center; }
.calendar-empty strong { font-size:1rem; }
.calendar-empty p { color:var(--night-muted); font-size:.9rem; margin:8px 0 0; }
@media(max-width:720px) {
 .availability-calendar { grid-template-columns:minmax(0,1fr); border-radius:20px; }
 .availability-month { padding:20px 14px; }
 .availability-weekdays,.availability-dates { gap:0; }
 .calendar-date { min-height:46px; }
 .availability-day-detail { padding:20px 16px; border-left:0; border-top:1px solid var(--night-line); }
 .availability-month-heading { margin:0 4px 18px; }
 .calendar-entry,button.calendar-entry { padding:14px; }
 .calendar-legend { gap:10px 14px; margin-top:18px; }
}

/* Photo ordering shares the existing photo menu, including its mobile sheet. */
html body .photo-add { background:var(--night-glass-strong); color:var(--night-ink); border-color:#ffffff30; }
html body .photo-menu-panel .photo-menu-cancel { background:#ffffff14 !important; color:var(--night-ink); }