/* ============================================================
   l9.pubhead.css  -  the one public header (2026-10-14, Terence): back or exit top left (the brand mark on the home page
   only), the studio pill top centre, whatever the surface needs top right. Plus the studio chooser sheet and the deal
   popup the pill opens, moved here from L9_Website.Master so the ring and the offer page draw the very same thing.
   Tokens from l9.tokens.css, no fallbacks.
   ============================================================ */

/* the frame: three columns, the pill always dead centre whatever sits left and right */
.l9-topbar-inner.l9-pubhead-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.l9-pubhead-left { display: flex; align-items: center; justify-self: start; min-width: 0; }
.l9-pubhead-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; justify-self: end; min-width: 0; }
/* back: a round chevron button, the size of the brand mark it replaces */
.l9-back { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: var(--l9-text); text-decoration: none; }
.l9-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.l9-back:hover, .l9-back:focus-visible { border-color: var(--l9-accent); color: var(--l9-accent); outline: 0; }
/* over a canvas (the ring): no bar, no blur, just the three controls floating at the top */
.l9-pubhead.is-glass { position: fixed; left: 0; right: 0; top: 0; z-index: 60; background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; padding-top: env(safe-area-inset-top); }
.l9-pubhead.is-glass .l9-pubhead-inner > * { pointer-events: auto; }
.l9-pubhead.is-glass .l9-back { background: rgba(10,10,14,.6); }

/* the studio pill: the one place to see and change the studio */
.l9-studio-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0; justify-self: center; padding: 7px 12px 7px 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--l9-accent) 45%, transparent); background: rgba(10,10,14,.6); font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: .14em; color: var(--l9-text); text-transform: uppercase; text-decoration: none; white-space: nowrap; max-width: min(60vw, 340px); overflow: hidden; }
.l9-studio-pill b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.l9-studio-pill span { flex: none; font-size: 10px; letter-spacing: .1em; color: var(--l9-text-muted); text-transform: lowercase; padding-left: 6px; border-left: 1px solid var(--l9-border); }
.l9-studio-pill i { flex: none; width: 6px; height: 6px; border-right: 1.5px solid var(--l9-accent); border-bottom: 1.5px solid var(--l9-accent); transform: rotate(45deg) translateY(-2px); }

/* the studio chooser: a sheet from the bottom on a phone, a centred box from 768px */
.l9-sc-dim { position: fixed; inset: 0; z-index: 99993; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .28s ease; }
.l9-sc-dim.on { opacity: 1; }
.l9-sc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99994; margin: 0 auto; max-width: 520px; max-height: 88vh; display: flex; flex-direction: column; background: var(--l9-surface); border: 1px solid var(--l9-border); border-bottom: 0; border-radius: 20px 20px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px rgba(0,0,0,.45); transform: translateY(100%); transition: transform .32s ease; }
.l9-sc.on { transform: none; }
@media (prefers-reduced-motion: reduce) { .l9-sc, .l9-sc-dim { transition: none; } }
.l9-sc-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--l9-border); margin: 0 auto 10px; }
.l9-sc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.l9-sc-title { font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; color: var(--l9-text); }
.l9-sc-sub { display: block; font-size: .78rem; font-weight: 400; color: var(--l9-text-muted); margin-top: 2px; }
.l9-sc-x { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--l9-text); font-size: 20px; line-height: 32px; cursor: pointer; margin: -4px -4px 0 0; }
.l9-sc-x[hidden] { display: none; }
.l9-sc-loc { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 6px 0; border: 0; background: none; color: var(--l9-accent); font-weight: 600; font-size: .85rem; cursor: pointer; font-family: inherit; }
.l9-sc-loc svg { flex: none; }
.l9-sc-loc[disabled] { opacity: .6; cursor: default; }
.l9-sc-msg { margin: 4px 0 0; font-size: .8rem; font-weight: 400; color: var(--l9-text-muted); line-height: 1.4; }
.l9-sc-search { width: 100%; box-sizing: border-box; margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--l9-border); background: var(--l9-surface-2); color: var(--l9-text); font: inherit; font-size: 15px; }
.l9-sc-list { overflow: auto; flex: 0 1 auto; min-height: 0; margin-top: 6px; -webkit-overflow-scrolling: touch; }
.l9-sc-state { font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: .28em; color: var(--l9-text-muted); margin: 10px 2px 2px; }
.l9-sc-row { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; text-align: left; box-sizing: border-box; min-height: 54px; padding: 9px 12px; margin-top: 7px; border-radius: 12px; border: 1px solid var(--l9-border); background: var(--l9-surface-2); color: var(--l9-text); cursor: pointer; font: inherit; text-decoration: none; }
.l9-sc-row:hover, .l9-sc-row:focus-visible { border-color: color-mix(in srgb, var(--l9-accent) 55%, var(--l9-border)); outline: 0; }
.l9-sc-row.on { border-color: var(--l9-accent); }
.l9-sc-main { flex: 1 1 auto; min-width: 0; }
.l9-sc-name { display: block; font-family: 'Inter', sans-serif; font-size: .92rem; font-weight: 700; line-height: 1.16; letter-spacing: 0; text-transform: none; }
.l9-sc-where { display: block; font-size: .78rem; font-weight: 400; color: var(--l9-text-muted); margin-top: 2px; line-height: 1.3; }
.l9-sc-side { flex: none; display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--l9-accent); }
.l9-sc-chev { width: 7px; height: 7px; border-right: 1.5px solid var(--l9-text-muted); border-top: 1.5px solid var(--l9-text-muted); transform: rotate(45deg); }
.l9-sc-row.on .l9-sc-chev { display: none; }
.l9-sc-tick { width: 18px; height: 18px; border-radius: 50%; background: var(--l9-accent); color: #111111; display: inline-flex; align-items: center; justify-content: center; }
.l9-sc-tick::after { content: ''; width: 5px; height: 9px; border-right: 2px solid #111111; border-bottom: 2px solid #111111; transform: rotate(45deg) translate(-1px,-1px); }
.l9-sc-bring { border-color: var(--l9-accent); }
.l9-sc-plus { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--l9-accent); color: #111111; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; line-height: 1; }
@media (min-width: 768px) { .l9-sc { bottom: auto; top: 50%; transform: translateY(-50%) scale(.98); opacity: 0; border-radius: 20px; border-bottom: 1px solid var(--l9-border); max-height: 80vh; padding-bottom: 16px; transition: opacity .22s ease, transform .22s ease; } .l9-sc.on { transform: translateY(-50%) scale(1); opacity: 1; } .l9-sc-grip { display: none; } }

/* the deal popup: a promotion, so it has a close and a dimmed page behind it */
.l9-hm-ov { position: fixed; inset: 0; z-index: 99995; background: rgba(0,0,0,.66); display: flex; align-items: center; justify-content: center; padding: 20px; }
.l9-hm { position: relative; width: 100%; max-width: 420px; background: var(--l9-surface); border: 1px solid color-mix(in srgb, var(--l9-accent) 55%, transparent); border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.6); max-height: 92vh; overflow-y: auto; }
.l9-hm-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 22px; line-height: 34px; cursor: pointer; z-index: 2; }
.l9-hm-pic { position: relative; line-height: 0; }
.l9-hm-pic img { display: block; width: 100%; max-height: 240px; object-fit: cover; }
.l9-hm-kick { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 12px; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 1.1rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; line-height: 1.1; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0)); }
.l9-hm-poster { padding: 34px 20px 26px; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 2.1rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1; color: #111111; background: var(--l9-accent); }
.l9-hm-body { padding: 18px 20px 20px; }
.l9-hm-title { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 1.7rem; line-height: 1.05; margin: 0 0 4px; }
.l9-hm-sub { font-size: .95rem; color: var(--l9-text-muted); margin: 0 0 8px; }
.l9-hm-pricerow { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.l9-hm-price { font-size: 3rem; font-weight: 800; color: var(--l9-accent); line-height: 1; }
.l9-hm-price small { font-size: 1.05rem; color: var(--l9-text-muted); font-weight: 600; }
.l9-hm-was { font-size: 1.05rem; color: var(--l9-text-muted); }
.l9-hm-save { font-size: .9rem; color: var(--l9-text); margin-top: 6px; }
.l9-hm-cd { display: inline-block; margin-top: 12px; padding: 6px 12px; border-radius: 8px; background: color-mix(in srgb, var(--l9-accent) 16%, transparent); color: var(--l9-accent); font-weight: 800; font-size: .85rem; letter-spacing: .04em; }
.l9-hm-for { margin-top: 12px; text-align: center; font-size: .8rem; color: var(--l9-text-muted); }
.l9-hm-chg { background: none; border: 0; padding: 0; color: var(--l9-text-muted); text-decoration: underline; font-size: inherit; cursor: pointer; font-family: inherit; }
.l9-hm-cta { display: block; margin-top: 16px; padding: 13px; border-radius: 999px; background: var(--l9-accent); color: #111111; font-weight: 800; text-align: center; text-decoration: none; }
.l9-hm-all { display: block; margin-top: 10px; text-align: center; font-size: .85rem; color: var(--l9-text-muted); text-decoration: underline; background: none; border: 0; width: 100%; cursor: pointer; font-family: inherit; }