/* ═══════════════════════════════════════════════════════════════════════════════════════════
   GALA: the house look from 5 November 2026 (the default)

   Jermaine: "a mix between the mercury keystone design and the airbnb style". Each source owns a
   bounded job, so neither is averaged away:
     Mercury (Keystone Ledger, Refero site 857)  the FRAME and the calm: a flush grey rail on the left,
                                                 a plain white bar with the search, hairline cards,
                                                 sentence case, quiet tables, its own dark layering
     Airbnb (Keystone Gallery, Refero flows 6451, 6453, style pasted 5 November 2026)
                                                 the INK and the TILES: near-black buttons, Plus Jakarta
                                                 Sans titles at 30/700, 16px rounded tiles, the search
                                                 capsule, a dot and the word for status, one gradient
                                                 action, the photograph as a rounded picture
     All Stars                                    the gold, in Airbnb's coral role only: the one action
                                                 (Add Lead), the "you are here" mark in the rail and
                                                 the counts. By night the gold is the action colour.
   Fonts: Plus Jakarta Sans for titles (the open stand-in for Airbnb Cereal, a licensed face) and Inter
   for everything else (the open stand-in for Mercury's Arcadia, also licensed).
   ⛔ Admin only. Tokens in looks/tokens.css; the components in looks/flat.css.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* the rail: Mercury's grey column, a gold mark beside the open screen */
html[data-look="gala"] .rl { position: relative; }
html[data-look="gala"] .rl.on::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--lk-acc); }
html[data-look="gala"] .rl.on { background: var(--lk-card); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px var(--lk-line); }
html[data-look="gala"]:not([data-theme="light"]) .rl.on { background: var(--lk-card-2); box-shadow: none; }
html[data-look="gala"] #rail .logo .sys { font-family: var(--font-d); font-weight: 600; color: var(--lk-ink-2); }

/* the bar: Airbnb's search capsule, floating; the one gradient action is All Stars gold */
html[data-look="gala"] #topbar .search { border-color: var(--lk-line-2); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .05); }
html[data-look="gala"]:not([data-theme="light"]) #topbar .search { box-shadow: none; }
html[data-look="gala"] #topbar .btn-volt { background: linear-gradient(90deg, var(--lk-hero-a), var(--lk-hero-b)); color: var(--lk-hero-ink); font-weight: 700; }
html[data-look="gala"] #topbar .btn-volt:hover:not(:disabled) { filter: brightness(1.03); background: linear-gradient(90deg, var(--lk-hero-a), var(--lk-hero-b)); }

/* the page header: Airbnb's confident title; on the dashboard, the event photograph as a rounded picture */
html[data-look="gala"] .band .kick { font-family: var(--font-b); font-weight: 600; color: var(--lk-mute); }
html[data-look="gala"] .band:has(.dash-hello) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); column-gap: 32px; align-items: center; min-height: 196px; }
html[data-look="gala"] .band:has(.dash-hello) > * { grid-column: 1; }
html[data-look="gala"] .band:has(.dash-hello)::after { content: ''; grid-column: 2; grid-row: 1 / span 5; align-self: stretch; min-height: 188px; border-radius: var(--lk-r-card);
  background: var(--lk-photo, none) center / cover no-repeat var(--lk-card-2); box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }
html[data-look="gala"] .band:has(.dash-hello) .dash-hello { display: block; }

/* tiles: the money tile carries the gold mark */
html[data-look="gala"] .kpi .ic.money { background: var(--lk-acc-soft); }
html[data-look="gala"] .kpi .ic.money svg { stroke: var(--lk-acc-text); }
html[data-look="gala"] .qa svg { stroke: var(--lk-ink); }
html[data-look="gala"] .qa:hover svg { stroke: var(--lk-acc-text); }

/* sign in: the white card on Airbnb's quiet wall */
html[data-look="gala"][data-theme="light"] #login { background: var(--lk-card-2); }
html[data-look="gala"] #login .btn { padding: 14px 20px; font-size: 15px; }

@media (max-width: 900px) {
  html[data-look="gala"] .band:has(.dash-hello) { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  html[data-look="gala"] .band:has(.dash-hello)::after { grid-column: 1; grid-row: auto; order: -1; min-height: 150px; margin-bottom: 16px; aspect-ratio: 16 / 7; }
}
@media (max-width: 560px) {
  html[data-look="gala"] .band:has(.dash-hello)::after { min-height: 128px; aspect-ratio: 16 / 9; }
}