/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ENCORE: the booking system's default look from 6 November 2026

   Jermaine: "i like the left menu but … completely change this up and make it look better, use the
   brick feed admin and app for inspiration, also use airbnb and look on /refero for inspiration".
   Each source owns a bounded job (REDESIGN-NOTES.md has the reference lock):
     Airbnb's host side (Refero: listing editor a545345c, calendar 1fcc2d32, messages 9bc9e2f9)
                       the compositions, the white canvas, near-black ink, 8px buttons, pressed pills
                       that fill dark, the search capsule, white status pills on photographs
     Brickfeed admin   the page bones it took from the TNS partner portal: Today's pills over a row of
                       cards, the quiet list, the request page with its card and step track
     Brickfeed app     the phone: a big greeting, cards with a photograph, the tab bar with a Menu
     All Stars         the gold as a FILL only (the ticket's date stub, counts, today, Add lead) and the
                       signature: every event is a ticket with a perforated edge (screens.css)
   Fonts: Bricolage Grotesque for display (a grotesque with a poster's confidence, free), Inter for the
   rest (the open stand-in for Airbnb Cereal and Mercury's Arcadia, both licensed).
   ⛔ Tokens in looks/tokens.css; the compositions in screens.css; the shared components in looks/flat.css.
   ⛔ shell.css loads LAST: a rule here that must beat one there carries [data-shell] (allstars-looks memory).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the frame: the left rail kept, white, with an ink pill for the open screen ── */
html[data-look="encore"] #rail { width: 252px; padding: 20px 14px 14px; background: var(--lk-rail); border-right: 1px solid var(--lk-line); }
html[data-look="encore"] #rail .logo { padding: 4px 10px 12px; }
html[data-look="encore"] #rail .logo img { height: 34px; }
html[data-look="encore"] #rail .logo .sys { font-family: var(--font-d); font-size: 13px; font-weight: 700; color: var(--lk-ink); letter-spacing: -0.01em; }
html[data-look="encore"] #rail .group { padding: 14px 12px 4px; font-size: 12.5px; font-weight: 600; color: var(--lk-mute); }
html[data-look="encore"] .rl { min-height: 38px; padding: 8px 12px; margin: 1px 0; border-radius: 10px; font-size: 14.5px; font-weight: 500; color: var(--lk-ink-2); }
@media (pointer: coarse) { html[data-look="encore"] .rl { min-height: 44px; } }
/* the menu is longer than a laptop screen: a soft fade at its foot says there is more below (it sits on padding at the very end) */
html[data-look="encore"] #rail nav { padding-bottom: 26px; }
html[data-look="encore"] #rail nav::after { content: ''; position: sticky; bottom: 0; display: block; height: 30px; margin-top: -4px; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--lk-rail) 0%, transparent), var(--lk-rail) 85%); }
html[data-look="encore"] .rl svg { stroke: var(--lk-ink-2); }
@media (hover: hover) { html[data-look="encore"] .rl:hover { background: var(--lk-card-2); color: var(--lk-ink); } }
html[data-look="encore"] .rl.on { background: var(--lk-sel); color: var(--lk-sel-ink); font-weight: 600; box-shadow: none; }
html[data-look="encore"] .rl.on svg { stroke: var(--lk-sel-ink); }
html[data-look="encore"] .rl .count { background: var(--lk-acc-fill); color: var(--lk-acc-ink); font-weight: 700; }
html[data-look="encore"] .rl.on .count { box-shadow: 0 0 0 2px var(--lk-sel); }
html[data-look="encore"] #rail .foot { border-top-color: var(--lk-line); padding-top: 14px; }
html[data-look="encore"] #main { margin-left: 252px; }

/* ── the bar: Airbnb's floating search capsule; the one gold action ── */
html[data-look="encore"] #topbar, html[data-look="encore"] #topbar.glass { min-height: 72px; padding: 14px 40px; border-bottom: 1px solid var(--lk-line); }
html[data-look="encore"] #topbar .search { max-width: 520px; height: 48px; padding: 0 8px 0 20px; 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="encore"]:not([data-theme="light"]) #topbar .search { box-shadow: none; }
html[data-look="encore"] #topbar .search input { font-size: 14.5px; font-weight: 500; }
html[data-look="encore"] #topbar .search kbd { border-radius: 999px; padding: 4px 9px; }
html[data-look="encore"] #topbar .btn-volt { background: linear-gradient(90deg, var(--lk-hero-a), var(--lk-hero-b)); color: var(--lk-hero-ink); font-weight: 700; border-radius: 8px; padding: 12px 20px; }
html[data-look="encore"] #topbar .btn-volt:hover:not(:disabled) { filter: brightness(1.03); background: linear-gradient(90deg, var(--lk-hero-a), var(--lk-hero-b)); }
html[data-look="encore"] .sync { font-size: 13.5px; }
html[data-look="encore"] #view { max-width: 1400px; padding: 30px 40px 0; }

/* ── type: the display face on titles and big numbers, Inter for everything else ── */
html[data-look="encore"] .pg-title, html[data-look="encore"] .cal-h h1 { font-weight: 700; }
html[data-look="encore"] .sec-h h2 { font-size: 22px; font-weight: 700; }
html[data-look="encore"] .panel-h h3, html[data-look="encore"] .modal h2 { font-family: var(--font-b); font-weight: 650; }
html[data-look="encore"] .modal h2 { font-family: var(--font-d); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; }
html[data-look="encore"] .btn { border-radius: 8px; }
html[data-look="encore"] .btn-sm { padding: 9px 16px; }
html[data-look="encore"] .tk-date, html[data-look="encore"] .cal-d.today .n { box-shadow: inset 0 0 0 1px rgba(26, 20, 7, .08); }

/* ── the cards: Airbnb's hover, a soft shadow that rises ── */
html[data-look="encore"] .side-card { box-shadow: 0 6px 20px rgba(0, 0, 0, .1); }
html[data-look="encore"]:not([data-theme="light"]) .side-card { box-shadow: 0 0 0 1px var(--lk-line-2); }
html[data-look="encore"] .cd-h h2, html[data-look="encore"] .cd-h h3 { font-size: 18px; }

/* ── sign in: the white card on Airbnb's grey wall ── */
html[data-look="encore"][data-theme="light"] #login { background: var(--lk-card-2); }
html[data-look="encore"] #login .card { border-radius: 24px; padding: 40px 36px; }
html[data-look="encore"] #login .btn { padding: 14px 20px; font-size: 15px; border-radius: 8px; }

/* ── a phone: the Brickfeed app's tab bar and Menu sheet (looks.js draws them from the rail) ── */
@media (max-width: 1099px) {
  html[data-look="encore"][data-shell="rail"] #menu-btn { display: none; }
  html[data-look="encore"][data-shell="rail"] .lk-brand { display: inline-flex; align-items: center; flex: none; min-height: 44px; text-decoration: none; margin-right: 4px; }
  html[data-look="encore"][data-shell="rail"] .lk-tabbar { display: flex; }
  html[data-look="encore"][data-shell="rail"] .lk-tb.on { color: var(--lk-ink); }
  html[data-look="encore"] #main { margin-left: 0; }
  html[data-look="encore"] #topbar, html[data-look="encore"] #topbar.glass { min-height: 62px; padding: 10px 16px; }
  html[data-look="encore"] #topbar .search { height: 44px; padding: 0 10px 0 14px; flex: 1 1 auto; max-width: none; }
  html[data-look="encore"] #topbar .spacer { display: none; }   /* the search takes the bar's free width */
  html[data-look="encore"] #view { padding: 20px 16px 0; }
  /* everything that floats at the foot sits above the tab bar */
  html[data-look="encore"] #main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  html[data-look="encore"] #toasts, html[data-look="encore"] .bulkbar { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  html[data-look="encore"] #topbar .search kbd { display: none; }
  /* a phone's bar is the logo and the search (Airbnb's pill): Appearance lives in the tab bar's Menu sheet (one control per
     action, house rule 11) and the sync dot carries no words at this width ([data-shell] beats shell.css) */
  html[data-look="encore"][data-shell="rail"] #look-btn, html[data-look="encore"][data-shell="rail"] #sync { display: none; }
  html[data-look="encore"] .lk-brand img { height: 24px; }
}