/* ═══════════════════════════════════════════════════════════════════════════════════════════
   SPOTLIGHT: event night, cloned from Luma's events app (5 November 2026)

   Luma (Refero site 400) is a platform people host events on, so its host screens are the closest
   thing on the reference library to an events business's back office. Its OWN dark screens, sampled
   from the pixels (Events home 086033fd, profile events 42db01bf):
     page #131619 with a coloured glow at the top · cards #1b1f22 · words #ffffff and #999da0
     the warm yellow on every time and date (All Stars gold #f5c542 is within a shade of it)
     small 6px badges tinted in their own colour · a white pill as the main action · "Manage Event"
     grey buttons · tabs across the top with an icon beside each word, no side menu
   Its own light (b4c3d2ad): page #f4f5f7, white cards, the gold deepened to #7d5a00 to read on white.
   PHOTO-LED: every page header carries its event photograph as Luma carries an event's cover; the
   whole page is lit from the top by a blurred copy of an event photo.
   Font: the system face (San Francisco on Apple devices, Segoe UI on Windows): Luma's own stack.
   ⛔ Admin only. Tokens in looks/tokens.css; the components in looks/flat.css; the frame in shell.css.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* the light from the top: a blurred event photograph, fading into the page */
html[data-look="spotlight"] #ambient { display: block; background: var(--lk-page); overflow: hidden; }
html[data-look="spotlight"] #ambient::before { content: ''; position: absolute; left: -10%; right: -10%; top: -18vh; height: 70vh;
  background: url('../assets/brand/event-2.jpg') center / cover no-repeat; filter: blur(90px) saturate(1.5); opacity: .34; }
html[data-look="spotlight"] #ambient::after { content: ''; position: absolute; inset: 0; animation: none; opacity: 1;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--lk-page) 55%, transparent) 28vh, var(--lk-page) 62vh); }
html[data-look="spotlight"][data-theme="light"] #ambient::before { opacity: .22; filter: blur(100px) saturate(1.2); }

/* the frame: no rail, a quiet bar with the tabs in the middle (icon and word, as Luma's) */
html[data-look="spotlight"] #rail { display: none; }
html[data-look="spotlight"] #main { margin-left: 0; }
html[data-look="spotlight"] #topbar, html[data-look="spotlight"] #topbar.glass { height: 60px; min-height: 60px; padding: 0 28px; margin-bottom: 26px;
  background: transparent; border-bottom: 1px solid transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-look="spotlight"].lk-scrolled #topbar { background: var(--lk-bar); border-bottom-color: var(--lk-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
html[data-look="spotlight"] #topbar .spacer { display: none; }
html[data-look="spotlight"] .lk-ti { display: inline-flex; }
html[data-look="spotlight"] .lk-tab { font-size: 14px; color: var(--lk-mute); padding: 9px 12px; gap: 7px; }
html[data-look="spotlight"] .lk-tab.on { color: var(--lk-ink); }
html[data-look="spotlight"] .lk-tab.on::after { background: var(--lk-acc); }
html[data-look="spotlight"] #topbar .search { order: 2; flex: 0 1 220px; height: 38px; border-radius: 8px; background: var(--lk-card); border-color: var(--lk-line-2); }
html[data-look="spotlight"] .sync { order: 3; }
html[data-look="spotlight"] #look-btn { order: 4; }
html[data-look="spotlight"] #topbar .btn-volt { order: 5; height: 38px; border-radius: 8px; background: var(--lk-act); color: var(--lk-act-ink); }
html[data-look="spotlight"] .lk-menu-btn { border-radius: 999px; }
html[data-look="spotlight"] #view { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

/* the page header is an event: the gold line, a big white title and the event's photograph on the right */
html[data-look="spotlight"] .band { display: grid; grid-template-columns: minmax(0, 1fr) 236px; column-gap: 28px; align-items: start; padding: 4px 0 6px; margin-bottom: 26px; }
html[data-look="spotlight"] .band > * { grid-column: 1; }
html[data-look="spotlight"] .band::after { content: ''; grid-column: 2; grid-row: 1 / span 5; width: 236px; aspect-ratio: 16 / 11; border-radius: 12px;
  background: var(--lk-photo, none) center / cover no-repeat var(--lk-card-2); box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .06); }
html[data-look="spotlight"][data-theme="light"] .band::after { box-shadow: 0 8px 24px rgba(19, 22, 25, .14); }
html[data-look="spotlight"] .band .kick { color: var(--lk-acc-text); font-size: 14px; font-weight: 500; margin-bottom: 6px; }
html[data-look="spotlight"] .band .actions { position: static; grid-column: 1; margin-top: 16px; }
html[data-look="spotlight"] .band .bstat { border-radius: 8px; background: var(--lk-card); }

/* cards, buttons and badges */
html[data-look="spotlight"] .btn-glass { background: var(--lk-card-2); border-color: transparent; color: var(--lk-ink-2); }
html[data-look="spotlight"] .btn-glass:hover:not(:disabled) { background: var(--lk-line-2); color: var(--lk-ink); border-color: transparent; }
html[data-look="spotlight"]:not([data-theme="light"]) .chip { border: 0; border-radius: 6px; padding: 3px 8px; color: var(--dot); background: color-mix(in srgb, var(--dot) 16%, var(--lk-card)); }
html[data-look="spotlight"]:not([data-theme="light"]) .chip::before { display: none; }
html[data-look="spotlight"]:not([data-theme="light"]) .c-pending, html[data-look="spotlight"]:not([data-theme="light"]) .c-awaiting { --dot: var(--lk-warn); }
html[data-look="spotlight"] .panel-h .more { color: var(--lk-acc-text); }
html[data-look="spotlight"] .kpi .ic { background: var(--lk-acc-soft); }
html[data-look="spotlight"] .kpi .ic svg, html[data-look="spotlight"] .kpi .ic.money svg { stroke: var(--lk-acc-text); }
html[data-look="spotlight"] .row { border-radius: 10px; }
html[data-look="spotlight"] .tab.on { border-bottom-color: var(--lk-acc); }
html[data-look="spotlight"] .lk-tb.on .lk-tbi::after { background: var(--lk-acc); }
html[data-look="spotlight"] #login { background: var(--lk-page) url('../assets/brand/event-2.jpg') center / cover no-repeat; }
html[data-look="spotlight"] #login::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--lk-page) 78%, transparent); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }
html[data-look="spotlight"] #login .card { position: relative; }

@media (max-width: 1099px) {
  html[data-look="spotlight"] #topbar, html[data-look="spotlight"] #topbar.glass { padding: 0 16px; gap: 10px; margin-bottom: 16px; }
  html[data-look="spotlight"] #topbar .search { flex: 1 1 auto; }
  html[data-look="spotlight"] #menu-btn { display: none; }
  html[data-look="spotlight"] #view { padding: 0 16px; }
  html[data-look="spotlight"] #main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  html[data-look="spotlight"] #toasts { bottom: calc(84px + env(safe-area-inset-bottom)); }
  html[data-look="spotlight"] .lk-tabbar { display: flex; }
  /* the tab bar's Menu is now the menu (with its own dot), so the bar's Menu pill goes: one control per action.
     [data-shell] lifts this above shell.css, which loads last and sets the same weight */
  html[data-look="spotlight"][data-shell="top"] .lk-menu-btn { display: none; }
  html[data-look="spotlight"] .bulkbar { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width: 760px) {
  /* on a phone the cover goes on top, full width, as Luma's own event card does */
  html[data-look="spotlight"] .band { grid-template-columns: minmax(0, 1fr); }
  html[data-look="spotlight"] .band::after { grid-column: 1; grid-row: 1; width: 100%; aspect-ratio: 16 / 8; margin-bottom: 16px; }
  html[data-look="spotlight"] .band > * { grid-row: auto; }
}
@media (max-width: 560px) {
  html[data-look="spotlight"] #topbar .search { flex: 0 0 40px; width: 40px; padding: 0; justify-content: center; margin-left: auto; }
  html[data-look="spotlight"] #topbar .search input, html[data-look="spotlight"] #topbar .search kbd { display: none; }
  html[data-look="spotlight"] #topbar .btn-volt, html[data-look="spotlight"] .sync { display: none; }
}