/* ═══════════════════════════════════════════════════════════════════════════════════════════
   GALLERY: Airbnb's host tools, cloned (5 November 2026)

   Keystone's Gallery look brought over (Refero flows 6451 and 6453, hosting messages 9bc9e2f9, the
   Airbnb style Jermaine pasted for Coventry Stays): a soft grey wall, white rounded tiles with no edge
   and no shadow, near-black as the action colour, one coral mark, sentence case and the main
   screens as tabs across the top (the frame is drawn by looks.js from the rail).
     Canvas #f7f7f7 · tiles #ffffff · ink #222222 · grey #6a6a6a · hairlines #ebebeb
     Coral #ff385c for marks only; #e00b41 where coral carries white words; the one action is the
     Reserve gradient #e61e4d → #d70466 (white on it 4.5 to 5.1:1)
     Field edges #858585, not Airbnb's #b0b0b0: that is 2.17:1 on white and a field edge needs 3:1
   Font: Plus Jakarta Sans throughout, the open stand-in for Airbnb Cereal (a licensed face).
   ⛔ Admin only. Tokens in looks/tokens.css; the components in looks/flat.css; the frame in shell.css.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* the frame: no rail, a white bar with the brand, the tabs, the search, the coral action and the menu */
html[data-look="gallery"] #rail { display: none; }
html[data-look="gallery"] #main { margin-left: 0; }
html[data-look="gallery"] #topbar, html[data-look="gallery"] #topbar.glass { height: 80px; padding: 0 40px; margin-bottom: 28px; background: var(--lk-bar); }
html[data-look="gallery"] #topbar .spacer { display: none; }
html[data-look="gallery"] #topbar .search { order: 2; flex: 0 1 240px; max-width: 240px; height: 44px; border-color: var(--lk-line-2);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .02), 0 2px 6px rgba(0, 0, 0, .04), 0 4px 8px rgba(0, 0, 0, .1); }
html[data-look="gallery"] #topbar .search svg { color: var(--lk-ink); }
html[data-look="gallery"] .sync { order: 3; }
html[data-look="gallery"] #look-btn { order: 4; }
html[data-look="gallery"] #topbar .btn-volt { order: 5; height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 600;
  background: linear-gradient(90deg, var(--lk-hero-a) 0%, var(--lk-acc-fill) 50%, var(--lk-hero-b) 100%); color: var(--lk-hero-ink); }
html[data-look="gallery"] #topbar .btn-volt:hover:not(:disabled) { filter: brightness(.96); background: linear-gradient(90deg, var(--lk-hero-a) 0%, var(--lk-acc-fill) 50%, var(--lk-hero-b) 100%); }
html[data-look="gallery"] .lk-menu-btn { border-color: var(--lk-line-2); }
html[data-look="gallery"] #view { max-width: 1440px; margin: 0 auto; padding: 0 40px; }

/* the page header: a big confident title, no photograph */
html[data-look="gallery"] .band .kick { font-size: 14px; }
html[data-look="gallery"] .band .bstat { border-radius: 999px; padding: 8px 16px; }

/* tiles read by value on the grey wall: no edge, no shadow, a lift on hover */
html[data-look="gallery"] .glass.lift:hover { box-shadow: var(--lk-shadow-lift); }
html[data-look="gallery"] .tbl tbody tr:hover { background: var(--lk-card-2); }
html[data-look="gallery"] .tbl .ref, html[data-look="gallery"] .tbl td.refcell .refno { text-decoration: underline; text-underline-offset: 3px; }
html[data-look="gallery"] .panel-h .more { color: var(--lk-ink); text-decoration: underline; }
html[data-look="gallery"] .btn-glass { border-color: var(--lk-ink); }
html[data-look="gallery"] .btn-ghost { text-decoration: underline; }
html[data-look="gallery"] .fld input, html[data-look="gallery"] .fld select, html[data-look="gallery"] .fld textarea { padding: 12px 14px; font-size: 15px; }
html[data-look="gallery"] .kpi .ic { background: var(--lk-card-2); }
html[data-look="gallery"] .rl .count, html[data-look="gallery"] .lk-badge, html[data-look="gallery"] .lk-mc { background: var(--lk-acc-fill); color: var(--lk-acc-ink); }
html[data-look="gallery"] #login .btn { background: linear-gradient(90deg, var(--lk-hero-a) 0%, var(--lk-acc-fill) 50%, var(--lk-hero-b) 100%); color: var(--lk-hero-ink); padding: 14px 20px; font-size: 16px; }

@media (max-width: 1099px) {
  html[data-look="gallery"] #topbar, html[data-look="gallery"] #topbar.glass { height: 64px; padding: 0 16px; margin-bottom: 18px; gap: 10px; }
  html[data-look="gallery"] #topbar .search { flex: 1 1 auto; max-width: none; height: 42px; }
  html[data-look="gallery"] #view { padding: 0 20px; }
  html[data-look="gallery"] #menu-btn { display: none; }
  html[data-look="gallery"] #main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  html[data-look="gallery"] #toasts { bottom: calc(84px + env(safe-area-inset-bottom)); }
  html[data-look="gallery"] .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="gallery"][data-shell="top"] .lk-menu-btn { display: none; }
  html[data-look="gallery"] .bulkbar { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  /* the search is a round button on a phone (the whole capsule opens the search, so nothing is lost) */
  html[data-look="gallery"] #topbar .search { flex: 0 0 42px; width: 42px; max-width: 42px; padding: 0; justify-content: center; margin-left: auto; }
  html[data-look="gallery"] #topbar .search input, html[data-look="gallery"] #topbar .search kbd { display: none; }
  html[data-look="gallery"] #topbar .btn-volt { display: none; }
  html[data-look="gallery"] #view { padding: 0 14px; }
  html[data-look="gallery"] .sync { display: none; }
}