/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   THE PANEL / MAP STYLESHEET — ONE FILE, TWO DOORS (RUN GUEST-MAP-2 ITEM 1, fold A1).

   Every rule below was LIFTED VERBATIM out of web/index.html's inline <style> (RUN PANEL-A through
   RUN PANEL-C, lines 675..1001 of the pre-GUEST-MAP-2 file) and is byte-for-byte unchanged. The
   <link> that replaced it sits at EXACTLY that position in the document, so the cascade order — and
   therefore every computed style in the parent panel — is identical to the shipped app.

   WHY IT MOVED OUT: the public guest map (/mapa) now renders through the SAME renderer as the
   logged-in child's map (web/hlv-mapview.js). One renderer with two stylesheets would drift on the
   first colour change, so there is one stylesheet too. A future map restyle lands here once and
   appears on both doors, forever — which is the whole point of the run.

   THE PANEL SHELL IS THE GUEST SHELL: `.hlv-panel` is the fixed full-screen host and
   `body.hlv-panel-active` owns the viewport. The guest page therefore uses the same two hooks and
   inherits the app's geometry, safe-area handling and overscroll law without restating any of it.

   DO NOT prefix, reorder or "tidy" these rules. They are load-bearing on José's phone.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

  /* ═══════════════ RUN PANEL-A — the parent/student panel (rebuilt from the design pack's tokens) ═══════════════
     Scoped entirely under .hlv-panel so it never leaks into the staff shell. Colours/radii/type are the
     pack's; the desktop rule (José's option C) keeps the 412px phone frame centred on a branded backdrop. */
  .hlv-panel { position: fixed; inset: 0; z-index: 40; display: flex; justify-content: center; align-items: center;
    background: radial-gradient(1100px 560px at 50% -8%, #eaf3fb, #d7e3f0 72%);
    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #26313a; -webkit-tap-highlight-color: transparent; }
  .hlv-panel[hidden] { display: none; }
  .hlv-panel *, .hlv-panel *::before, .hlv-panel *::after { box-sizing: border-box; }
  .hlv-panel button { font-family: inherit; cursor: pointer; }
  .hlv-fam { font-family: "Baloo 2", "Nunito", cursive; }
  /* the phone frame: EDGE-TO-EDGE full width on phones (no side gutters, even on 430px devices — fix
     round item A); a centred rounded 412px column on desktop (option C, ≥700px — untouched). */
  /* RUN MOBILE-FINAL ITEM 1 (report 1.5) — REAL height + edges on the INSTALLED (standalone) app.
     The single height authority is the position:fixed;inset:0 host (.hlv-panel), the most reliable
     full-screen box in standalone. The frame simply FILLS it: height:100% + min-height:0. The old
     100vh / webkit fill-available / 100dvh chain targeted Safari's TAB URL-bar model, which the
     installed PWA never enters, and the webkit fill-available unit (a known-buggy iOS value, report
     hypothesis B) is deleted outright. Horizontal safe-area padding keeps box edges off the corners
     (0 in portrait, so no visual change at 390/412/430). overscroll-behavior stops the whole-panel
     rubber-band so it reads as an app. All scoped to .hlv-frame; desktop Option-C (>=700px) overrides
     the height below and sees 0 insets. */
  /* PHONE ROUND 2 ITEM 2 (report 1.5.5 belt) — the frame FILLS the fixed host (height:100%), but when
     the visualViewport JS belt is active it rides --app-h (the real visible height, set on
     resize/orientationchange) so the nav always tracks the physical bottom edge in standalone. */
  .hlv-frame { width: 100%; max-width: none; height: var(--app-h, 100%); min-height: 0;
    position: relative; overflow: hidden; display: flex; flex-direction: column; background: #eef3f8;
    padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); overscroll-behavior: none;
    touch-action: manipulation; } /* phone-fix #1 — kill double-tap zoom on the panel */
  @media (min-width: 700px) { .hlv-frame { max-width: 412px; height: min(884px, 100dvh); border-radius: 26px; box-shadow: 0 30px 70px rgba(40,60,90,.24); } }
  /* RUN MOBILE-RECIPES FIX 1 (MOBILE-FINAL-RECIPES.md Part 1) — own the viewport: a FIXED document shell +
     overscroll:none. The single highest-value fix: it kills the whole-app bounce AND the bar-rides-up in one
     structural change. Fixing the panel-active body removes it from flow, so html has nothing to scroll — no
     global html rule is needed (and none is added: the lock must not leak onto the office).
     ★ SCOPE (Codex fold): EVERY rule here is gated under body.hlv-panel-active. The office/admin shell is never
     panel-active, so it keeps scrolling normally (regression-guarded, both on device and in a desktop check).
     SUPERSESSION: the prior phone-scoped body-white rule is folded into this base rule (background:#fff below);
     the inner scrollers move contain -> none (see the .hlv-scroll group). */
  body.hlv-panel-active { position: fixed; inset: 0; margin: 0; overflow: hidden; overscroll-behavior: none; background: #fff; }
  /* The panel is the single height authority; it rides the visualViewport belt so it follows a keyboard-shifted
     visual viewport (top=--vv-top) and the real visible height (--app-h). Desktop Option-C (frame max-width 412 +
     capped height, below) still renders the centred card — this only pins the full-screen host under it. */
  body.hlv-panel-active .hlv-panel { top: var(--vv-top, 0px); left: 0; width: 100%; height: var(--app-h, 100dvh); overflow: hidden; overscroll-behavior: none; }
  body.hlv-panel-active .hlv-frame { min-height: 0; overflow: hidden; }
  /* THE change vs the shipped round (RULED): the inner scrollers move from overscroll:contain -> none, so there
     is zero rubber-band anywhere (José's stated complaint is the bounce itself; MDN — contain stops chaining but
     keeps the local elastic, none also suppresses it). min-height:0 is mandatory for a scrollable flex child;
     -webkit-overflow-scrolling keeps native momentum. Relaxing a single pane back to `contain` is a one-line
     reversible switch if a subtle in-pane elastic is ever wanted. */
  body.hlv-panel-active .hlv-scroll, body.hlv-panel-active .hlv-ov-list, body.hlv-panel-active .hlv-sheet { min-height: 0; overflow-y: auto; overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; }
  /* PHONE ROUND 2 ITEM 3 — kill iOS double-tap smart-zoom on EVERY panel surface (the shipped rule
     only covered .hlv-frame). manipulation keeps pan/scroll + pinch working; pinch is already dead via
     the viewport lock, so the net effect is: double-tap does nothing + buttons never misalign. Scoped
     to body.hlv-panel-active so the office is untouched. touch-action does not inherit — hence the list. */
  body.hlv-panel-active, body.hlv-panel-active .hlv-view, body.hlv-panel-active .hlv-scroll, body.hlv-panel-active .hlv-map-scroll, body.hlv-panel-active .hlv-map-inner, body.hlv-panel-active .hlv-ov, body.hlv-panel-active .hlv-ov-list, body.hlv-panel-active .hlv-sheet, body.hlv-panel-active .hlv-nav, body.hlv-panel-active button { touch-action: manipulation; }
  .hlv-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .hlv-scroll { flex: 1; overflow-y: auto; padding: 16px 16px 24px; scrollbar-width: none; } /* FIX 1: overscroll now none, set on the panel-active group above (was contain here) */
  .hlv-scroll::-webkit-scrollbar { display: none; }
  /* header (brand gradient) */
  .hlv-head { background: linear-gradient(135deg, #38b6ff, #1f93d6); color: #fff; padding: calc(14px + env(safe-area-inset-top)) 16px 20px; flex: none; box-shadow: 0 4px 16px rgba(31,147,214,.24); }
  .hlv-head-row { display: flex; align-items: center; gap: 10px; }
  .hlv-chip { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.18); border: 0; border-radius: 999px; padding: 5px 15px 5px 5px; font-weight: 800; font-size: 15px; color: #fff; }
  .hlv-chip .av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: #fff; flex: none; }
  .hlv-chip .av img { width: 100%; height: 135%; object-fit: cover; object-position: top; }
  .hlv-brandtag { margin-left: auto; font-size: 11px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; opacity: .82; }
  .hlv-greet { margin-top: 15px; font-weight: 800; font-size: 25px; line-height: 1.05; }
  .hlv-greet-sub { font-size: 13.5px; font-weight: 700; opacity: .95; margin-top: 3px; }
  /* RUN INVITE-ON-SIGNUP item 2 — the pre-payment waiting card (Start, above everything) */
  .hlv-wait { background: #fff; border: 1px solid #cfe8fb; border-radius: 20px; padding: 16px; margin-bottom: 16px; box-shadow: 0 10px 24px rgba(56,182,255,.13); }
  .hlv-wait-h { font-family: "Baloo 2","Nunito",cursive; font-size: 20px; font-weight: 800; color: #0e6ca0; }
  .hlv-wait-sub { font-size: 12.5px; font-weight: 700; color: #5a7f96; margin-top: 4px; }
  .hlv-wait-box { background: #f6fbff; border: 1px solid #e2f1fb; border-radius: 14px; padding: 11px 13px; margin-top: 12px; }
  .hlv-wait-row { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; }
  .hlv-wait-row .k { font-size: 11.5px; font-weight: 800; color: #8a95a0; text-transform: uppercase; letter-spacing: .04em; flex: none; min-width: 92px; }
  .hlv-wait-row .v { font-size: 14px; font-weight: 800; color: #12212c; min-width: 0; }
  .hlv-wait-note { display: flex; gap: 9px; align-items: flex-start; background: #fff9ec; border: 1px solid #f0dca8; border-radius: 14px; padding: 11px 13px; margin-top: 12px; font-size: 13px; font-weight: 700; color: #8a6d1f; }
  .hlv-wait-paid { display: flex; gap: 9px; align-items: flex-start; background: #f4faf6; border: 1px solid #cfe8d6; border-radius: 14px; padding: 11px 13px; margin-top: 12px; font-size: 13px; font-weight: 700; color: #2b7a4b; }
  .hlv-wait-map { display: inline-block; margin-top: 11px; font-size: 13px; font-weight: 800; color: #1f93d6; text-decoration: none; }
  /* gentle collections banner */
  .hlv-banner { display: flex; align-items: center; gap: 12px; background: #f2f9ff; border: 1px solid #cfe8fb; border-radius: 18px; padding: 13px 15px; margin-bottom: 16px; }
  .hlv-banner .ic { font-size: 22px; flex: none; }
  .hlv-banner .tt { font-weight: 900; font-size: 14px; color: #0e6ca0; }
  .hlv-banner .amt { color: #c0392b; font-weight: 900; white-space: nowrap; }
  .hlv-banner .sub { font-size: 12px; color: #5a7f96; font-weight: 700; margin-top: 1px; }
  .hlv-banner button { background: #38b6ff; color: #06243b; border: 0; border-radius: 13px; padding: 11px 17px; font-size: 14px; font-weight: 900; box-shadow: 0 4px 0 #1f93d6; flex: none; }
  /* next-lesson hero */
  .hlv-hero-wrap { background: #fff; border-radius: 24px; padding: 6px; box-shadow: 0 12px 28px rgba(56,182,255,.15); margin-bottom: 16px; }
  .hlv-hero { background: linear-gradient(135deg, #eafaff, #eef4ff); border-radius: 20px; padding: 16px; position: relative; overflow: hidden; min-height: 148px; }
  .hlv-tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; font-size: 11px; padding: 5px 12px; border-radius: 999px; }
  .hlv-tag.soon { background: #2bb673; color: #fff; }
  .hlv-tag.fut { background: #e3f4ff; color: #0e79b8; }
  .hlv-when { font-size: 12.5px; color: #6b7580; font-weight: 800; margin-top: 11px; }
  .hlv-hero-title { font-family: "Baloo 2","Nunito",cursive; font-size: 21px; font-weight: 800; }
  .hlv-teacher { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
  .hlv-teacher .tav { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #fff, #d3ebff); display: grid; place-items: center; font-size: 20px; font-weight: 800; color: #1f93d6; flex: none; box-shadow: 0 3px 8px rgba(0,0,0,.14); border: 2px solid #fff; overflow: hidden; }
  .hlv-teacher .tav img { width: 100%; height: 100%; object-fit: cover; }
  .hlv-teacher b { font-size: 13.5px; } .hlv-teacher small { display: block; color: #6b7580; font-weight: 700; }
  .hlv-herochar { position: absolute; right: 4px; bottom: 0; width: 126px; height: 126px; object-fit: contain; object-position: bottom right; filter: drop-shadow(0 6px 10px rgba(0,0,0,.2)); pointer-events: none; }
  .hlv-join { display: block; width: calc(100% - 16px); margin: 12px 8px 8px; border: 0; font-weight: 900; font-size: 16px; border-radius: 16px; padding: 15px; background: #2bb673; color: #fff; box-shadow: 0 5px 0 #1f8f63; text-align: center; text-decoration: none; }
  .hlv-join-wait { font-size: 12px; color: #8a95a0; font-weight: 700; text-align: center; margin: 12px 8px 8px; }
  .col-lrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line, #eef1f4); font-size: 13px; }
  /* absence entry ("nie dasz rady?") */
  .hlv-cant { display: flex; align-items: center; gap: 12px; background: #fff7ec; border: 1.5px dashed #ffd79a; border-radius: 20px; padding: 13px 14px; margin-bottom: 16px; flex-wrap: wrap; }
  .hlv-cant .ic { font-size: 26px; } .hlv-cant .mid { flex: 1; min-width: 110px; } .hlv-cant b { font-size: 14px; } .hlv-cant small { color: #9a6a17; font-weight: 700; }
  .hlv-ghost { background: #fff; color: #9a6a17; border: 1.5px solid #ffce85; border-radius: 12px; padding: 11px 15px; font-size: 12.5px; font-weight: 900; min-height: 44px; } /* #7 target */
  /* schedule */
  .hlv-sched-h { font-family: "Baloo 2","Nunito",cursive; font-weight: 800; font-size: 17px; margin: 6px 2px 12px; }
  .hlv-srow { background: #fff; border-radius: 18px; padding: 12px; box-shadow: 0 5px 14px rgba(40,60,90,.06); border: 1px solid #eef2f6; margin-bottom: 10px; }
  .hlv-srow .row { display: flex; gap: 12px; align-items: center; }
  .hlv-daybox { width: 52px; flex: none; text-align: center; background: #eaf6ff; border-radius: 13px; padding: 7px 0; }
  .hlv-daybox .d { font-size: 20px; font-weight: 900; line-height: 1; color: #1f93d6; } .hlv-daybox .m { font-size: 10px; font-weight: 800; color: #8a95a0; text-transform: uppercase; }
  .hlv-srow .mid { flex: 1; min-width: 0; } .hlv-srow .ti { font-weight: 900; font-size: 14.5px; } .hlv-srow .me { font-size: 12px; color: #6b7580; font-weight: 700; margin-top: 2px; }
  .hlv-pill { font-size: 11px; font-weight: 900; padding: 4px 10px; border-radius: 999px; flex: none; background: #e3f4ff; color: #0e79b8; }
  .hlv-pill.grey { background: #eef1f4; color: #8a95a0; }
  .hlv-past-toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: #fff; border: 1px solid #eef2f6; border-radius: 16px; padding: 13px 15px; font-weight: 900; font-size: 14px; color: #5a6a76; box-shadow: 0 4px 12px rgba(40,60,90,.05); margin-top: 2px; }
  .hlv-past-row { display: flex; align-items: center; gap: 12px; background: #fbfcfd; border: 1px solid #eef2f6; border-radius: 14px; padding: 11px 13px; margin-bottom: 9px; }
  .hlv-past-row .d { width: 46px; flex: none; text-align: center; } .hlv-past-row .d .n { font-size: 17px; font-weight: 900; line-height: 1; color: #8a95a0; } .hlv-past-row .d .mm { font-size: 9.5px; font-weight: 800; color: #a4adb6; text-transform: uppercase; }
  .hlv-past-row .day { font-weight: 800; font-size: 13px; color: #5a6a76; } .hlv-past-row .st { font-size: 11.5px; color: #8a95a0; font-weight: 700; }
  .hlv-empty { background: #fff; border: 1.5px dashed #cdd7e0; border-radius: 18px; padding: 22px 16px; text-align: center; color: #6b7580; font-weight: 700; font-size: 13px; }
  /* RUN APP-FEEL #5c — first-mount loading spinner (parent panel only). */
  .hlv-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #d8e6f2; border-top-color: #38b6ff; animation: hlvspin .8s linear infinite; }
  @keyframes hlvspin { to { transform: rotate(360deg); } }
  /* RUN APP-FEEL #6 — in-panel materials overlay: our OWN top bar ([Wróć] + title) + a full iframe,
     no browser chrome, so materials on OUR domains never feel like leaving the app. Sits ABOVE the
     lesson sheet (z 30) inside the frame; closing removes it → exact position-memory restored. */
  .hlv-ov { position: absolute; inset: 0; z-index: 45; background: #fff; display: flex; flex-direction: column; }
  .hlv-ov-bar { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; background: linear-gradient(135deg,#38b6ff,#1f93d6); color: #fff; flex: none; }
  .hlv-ov-bar .t { font-weight: 900; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hlv-ov-back { background: rgba(255,255,255,.22); border: 0; color: #fff; font-weight: 900; border-radius: 11px; padding: 10px 15px; font-size: 15px; min-height: 44px; cursor: pointer; flex: none; }
  .hlv-ov iframe { flex: 1; width: 100%; border: 0; background: #fff; }
  .hlv-ov-list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
  .hlv-ov-item { text-align: left; background: #fff; border: 1px solid #e6ecf3; border-radius: 14px; padding: 14px 16px; font: inherit; font-weight: 800; font-size: 15px; color: #26313a; box-shadow: 0 4px 12px rgba(40,60,90,.05); min-height: 44px; cursor: pointer; }
  /* placeholder tabs (Mapa / Ja / Dla rodziców tonight) */
  .hlv-ph { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 24px; gap: 8px; }
  .hlv-ph .ic { font-size: 54px; } .hlv-ph h2 { font-family: "Baloo 2","Nunito",cursive; font-weight: 800; font-size: 22px; margin: 4px 0 0; } .hlv-ph p { font-size: 13.5px; color: #6b7580; font-weight: 700; max-width: 280px; line-height: 1.5; margin: 0; }
  /* bottom nav — RUN 7 ITEM 1, PARENT-NAV FIDELITY (2026-07-24). ★ THE VISUAL LAW IS THE DESIGN MOCKUP:
     design-review/12-Parent panel design pack/…/Panel rodzica i ucznia.dc.html:411-415 (byte-identical in
     packs 13/14/15) — container `padding: 8px 4px calc(9px + env(safe-area-inset-bottom))`, button
     `padding: 2px 0`, icon 21px/margin-bottom 2px, label 10px/line-height 1.15. The mockup renders in a
     412×884 frame where env(safe-area-inset-bottom) is 0, so its OWN painted geometry is `8px 4px 9px`
     and its visible label block ends 10.50px above the physical bottom.
     RUN BAND-RIDER read the inset as untouchable and trimmed the mockup's discretionary padding instead
     (8/9 → 2/2). That left the visible block 39.50px above the physical bottom — 29.00px below the mockup
     — as an EMPTY white strip. The strip WAS the defect, so this run restores the mockup's padding and
     drops the inset term: the bar is the frame's last row, so its white background still reaches the
     physical bottom (probe: navBottom = innerHeight, gapToPhysicalBottom 0) while the VISIBLE block sits
     where the mockup put it. Measured, 412×884: navHeight 62.00, button rects 831.00→875.00, icon top
     835.36, label box 859.50→873.50, visible-content-to-physical-bottom 10.50 — every visible coordinate
     byte-identical to the mockup, and invariant to the inset (same numbers at 0 and at 34).
     ★ The ≥44px touch target GROWS UPWARD: the mockup's content is 41.65px, so min-height: 44px genuinely
     binds, and `justify-content: flex-end` puts the 2.35px it adds ABOVE the icon. Never blank space below
     a label. Visual-only: same DOM, same handlers, same four buttons (FIX 2 stable-nav-DOM untouched).
     Scope: .hlv-nav exists only inside the parent panel. */
  .hlv-nav { background: #fff; border-top: 1px solid #eef2f6; display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 4px 9px; flex: none; box-shadow: 0 -2px 12px rgba(0,0,0,.06); z-index: 9; }
  .hlv-nav button { border: 0; background: none; text-align: center; font-size: 10px; font-weight: 800; line-height: 1.15; padding: 2px 0; min-height: 44px; display: flex; flex-direction: column; justify-content: flex-end; color: #8a95a0; } /* #7 target ≥44px — the floor binds (content 41.65px) and flex-end spends it UPWARD */
  .hlv-nav button.active { color: #1f93d6; }
  .hlv-nav .ico { font-size: 21px; display: block; margin-bottom: 2px; position: relative; }
  .hlv-nav .dot { position: absolute; top: -2px; right: calc(50% - 15px); width: 9px; height: 9px; border-radius: 50%; background: #d84040; border: 2px solid #fff; }
  .hlv-nav .joinhint { position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); background: #2bb673; color: #fff; font-size: 8.5px; font-weight: 900; padding: 2px 7px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 7px rgba(43,182,115,.55); animation: hlvtabpulse 1.7s ease-in-out infinite; }
  @keyframes hlvtabpulse { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.12); } }
  /* sheets (bottom-sheet modals) */
  .hlv-sheet-bg { position: absolute; inset: 0; background: rgba(12,18,24,.52); z-index: 30; display: flex; align-items: flex-end; animation: hlvrise .18s ease; }
  @keyframes hlvrise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
  .hlv-sheet { position: relative; background: #fbfcfd; width: 100%; border-radius: 24px 24px 0 0; padding: 14px 16px calc(22px + env(safe-area-inset-bottom)); max-height: 90%; overflow-y: auto; }
  /* #7 (#3) — a visible ≥44px close on every bottom-sheet (the grip alone was decorative). */
  .hlv-sheet-x { position: absolute; top: 8px; right: 10px; width: 44px; height: 44px; border: 0; background: none; font-size: 26px; line-height: 1; color: #9aa6b0; cursor: pointer; z-index: 2; }
  .hlv-grip { width: 42px; height: 4px; background: #c4cdd5; border-radius: 9px; margin: 0 auto 16px; }
  .hlv-sheet h3 { font-family: "Baloo 2","Nunito",cursive; font-size: 20px; font-weight: 800; margin: 0 0 4px; }
  .hlv-sheet .lead { font-size: 12.5px; color: #6b7580; font-weight: 700; margin: 0 0 14px; }
  .hlv-pickrow { display: flex; align-items: center; gap: 10px; width: 100%; border: 1.5px solid #e6ecf3; background: #fff; border-radius: 14px; padding: 13px 14px; margin-bottom: 10px; color: #26313a; text-align: left; }
  .hlv-pickrow .l { flex: 1; } .hlv-pickrow b { font-size: 14px; } .hlv-pickrow small { display: block; color: #6b7580; font-weight: 700; margin-top: 2px; } .hlv-pickrow .chev { font-size: 20px; color: #1f93d6; }
  .hlv-prof { display: flex; align-items: center; gap: 12px; width: 100%; border: 2px solid #eef2f6; background: #fff; border-radius: 16px; padding: 11px 14px; margin-bottom: 10px; color: #1f93d6; }
  .hlv-prof.on { border-color: #38b6ff; background: #f2f9ff; }
  .hlv-prof .av { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: #eaf2fb; flex: none; } .hlv-prof .av img { width: 100%; height: 135%; object-fit: cover; object-position: top; }
  .hlv-prof .nm { flex: 1; text-align: left; font-weight: 900; font-size: 16px; color: #26313a; }
  .hlv-cur { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 12.5px; margin-bottom: 12px; }
  .hlv-cur .k { font-weight: 800; color: #8a95a0; } .hlv-cur .v { font-weight: 800; color: #26313a; }
  .hlv-okbox { background: #eefbf3; border: 1px solid #c8efd6; border-radius: 13px; padding: 12px 14px; font-size: 12.5px; font-weight: 800; color: #1c7a43; line-height: 1.5; margin-bottom: 12px; }
  .hlv-hint { font-size: 12.5px; color: #6b7580; font-weight: 700; line-height: 1.5; margin-bottom: 14px; }
  .hlv-redbox { background: #fdf1f1; border: 1.5px solid #f3c2c2; border-radius: 14px; padding: 14px 15px; font-size: 13px; font-weight: 700; color: #b3261e; line-height: 1.6; margin-bottom: 16px; }
  .hlv-day { background: #fff; border: 1.5px solid #e6ecf3; border-radius: 14px; padding: 11px 13px; margin-bottom: 10px; }
  .hlv-day .dh { font-family: "Baloo 2","Nunito",cursive; font-weight: 800; font-size: 13.5px; margin-bottom: 9px; }
  .hlv-day .slots { display: flex; flex-wrap: wrap; gap: 8px; }
  .hlv-day .none { font-size: 12px; color: #a4adb6; font-weight: 700; }
  .hlv-slot { font-weight: 800; font-size: 13.5px; border-radius: 12px; padding: 11px 16px; background: #fff; color: #1f93d6; border: 1.5px solid #cfe0ef; }
  .hlv-slot.on { background: #38b6ff; color: #fff; border-color: #38b6ff; box-shadow: 0 3px 0 #1f93d6; }
  /* buttons — the ruled pairs are SAME size + shape (item 20/26) */
  .hlv-pair { display: flex; gap: 10px; margin-top: 16px; }
  .hlv-btn { border: 0; font-weight: 900; border-radius: 14px; padding: 13px; font-size: 14px; flex: 1; }
  .hlv-btn.cancel { background: #eef1f4; color: #6b7580; }
  .hlv-btn.primary { background: #38b6ff; color: #06243b; }
  .hlv-btn.primary:disabled { background: #cfe0ec; color: #93a8b8; cursor: not-allowed; box-shadow: none; }
  .hlv-btn-full { display: block; width: 100%; border: 0; font-weight: 900; border-radius: 14px; padding: 14px; font-size: 15px; background: #38b6ff; color: #06243b; box-shadow: 0 5px 0 #1f93d6; margin-top: 12px; }
  .hlv-btn-ghost-full { display: block; width: 100%; border: 0; background: none; color: #8a95a0; border-radius: 14px; padding: 12px; font-size: 14px; font-weight: 900; margin-top: 6px; }
  .hlv-done { text-align: center; padding: 20px 8px 6px; }
  .hlv-done .ic { font-size: 46px; } .hlv-done h3 { margin-top: 8px; } .hlv-done p { font-size: 12.5px; color: #6b7580; font-weight: 700; margin: 6px 0 0; line-height: 1.5; }
  .hlv-toast { position: absolute; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: #26313a; color: #fff; font-weight: 800; font-size: 13px; padding: 11px 18px; border-radius: 999px; z-index: 50; box-shadow: 0 8px 22px rgba(0,0,0,.28); max-width: 90%; text-align: center; }

  /* ═══════════ RUN PANEL-B — Mapa (design 10's landscape, rebuilt with pack-15 tokens) + Ja ═══════════
     The map's own COLORS stay as design 10 draws them (item 4): the jungle scene tint/trail + the green/
     amber/blue/grey node states. The header chrome stays the panel's brand blue (one language across tabs,
     brand on top). No chapter chips + no per-unit scenes (real curriculum has no `unit` → skip-and-log);
     one continuous journey. NO bottom menu (the panel's .hlv-nav rules), NO join anywhere on the map. */
  .hlv-map { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .hlv-map-head { background: linear-gradient(135deg, #38b6ff, #1f93d6); color: #fff; padding: calc(12px + env(safe-area-inset-top)) 14px 13px; flex: none; box-shadow: 0 3px 14px rgba(31,147,214,.22); position: relative; z-index: 3; }
  .hlv-map-head .row1 { display: flex; align-items: center; gap: 10px; }
  .hlv-staremapy { margin-left: auto; background: rgba(255,255,255,.2); color: #fff; border: 0; border-radius: 999px; padding: 6px 12px; font-size: 11.5px; font-weight: 800; display: flex; align-items: center; gap: 5px; }
  .hlv-map-course { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 800; font-size: 15px; }
  .hlv-prog { margin-top: 10px; cursor: pointer; }
  .hlv-prog .bar { height: 12px; border-radius: 999px; background: rgba(255,255,255,.26); overflow: hidden; }
  .hlv-prog .bar i { display: block; height: 100%; background: #ffc83d; }
  .hlv-prog .lab { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; margin-top: 6px; white-space: nowrap; }
  .hlv-prog .fin { margin-left: auto; background: rgba(0,0,0,.18); border-radius: 999px; padding: 2px 9px; font-size: 10px; font-weight: 800; }
  /* the scrolling landscape */
  .hlv-map-scroll { flex: 1; overflow-x: auto; overflow-y: hidden; position: relative; -webkit-overflow-scrolling: touch; scrollbar-width: none; background: linear-gradient(180deg, #eaf7e0, #dcefce); }
  .hlv-map-scroll::-webkit-scrollbar { display: none; }
  .hlv-map-inner { position: relative; height: 100%; min-width: 100%; }
  .hlv-map-trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .hlv-decor { position: absolute; pointer-events: none; font-size: 26px; opacity: .7; }
  .hlv-node { position: absolute; transform: translate(-50%, -50%); text-align: center; cursor: pointer; width: 96px; z-index: 2; }
  .hlv-node .tu { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); background: #38b6ff; color: #fff; font-size: 10px; font-weight: 900; padding: 3px 10px; border-radius: 999px; white-space: nowrap; box-shadow: 0 4px 10px rgba(56,182,255,.55); z-index: 4; }
  .hlv-bub { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; font-family: "Baloo 2","Nunito",cursive; font-size: 21px; font-weight: 800; color: #fff; border: 4px solid #fff; position: relative; }
  .hlv-bub.done { background: linear-gradient(160deg, #39c08a, #1f8f63); box-shadow: 0 6px 0 #1f8f63, 0 8px 14px rgba(0,0,0,.16); }
  .hlv-bub.uzn { background: #f0a12a; border-color: #fff8ec; color: #5c3a06; box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); }
  .hlv-bub.cur { width: 78px; height: 78px; font-size: 26px; background: linear-gradient(160deg, #7fd3ff, #38b6ff); color: #083b57; animation: hlvpulse 1.7s ease-in-out infinite; }
  .hlv-bub.lock { background: #cdd6de; border-color: #eef2f6; color: #93a0ad; box-shadow: 0 6px 0 #b7c2cb; }
  @keyframes hlvpulse { 0%,100% { box-shadow: 0 6px 0 #1f93d6, 0 0 0 8px rgba(56,182,255,.32); } 50% { box-shadow: 0 6px 0 #1f93d6, 0 0 0 16px rgba(56,182,255,0); } }
  .hlv-bub .star { position: absolute; top: -11px; right: -9px; font-size: 18px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
  .hlv-node .nlbl { font-family: "Baloo 2","Nunito",cursive; font-size: 11.5px; font-weight: 700; margin-top: 8px; line-height: 1.15; color: #26313a; }
  .hlv-node .nsub { font-size: 9.5px; font-weight: 800; margin-top: 2px; letter-spacing: .3px; text-transform: uppercase; color: #c47b12; }
  .hlv-node.lockn .nlbl { color: #7d8893; }
  /* the child's avatar companion — ALL FOUR the same visual box (item 28: Flora was too big → fix in CSS).
     RUN AUDIO-STUDIO rider (José 2026-07-20): 64px read too small next to the ~110px map nodes → bumped to
     112px (~1.75×) so the child reads as the hero of the map; the span's left offset widens to match so it
     stays clear of the path/nodes at phone width. */
  .hlv-companion { position: absolute; z-index: 3; width: 112px; height: 112px; pointer-events: none; transform: translate(-50%, -50%); filter: drop-shadow(0 6px 8px rgba(0,0,0,.26)); animation: hlvfloat 3s ease-in-out infinite; }
  .hlv-companion img, .hlv-charbox img, .hlv-mat-hero .hchar img, .hlv-ja-av img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
  @keyframes hlvfloat { 0%,100% { transform: translate(-50%,-50%) translateY(0); } 50% { transform: translate(-50%,-50%) translateY(-6px); } }
  .hlv-charbox { width: 64px; height: 64px; display: inline-block; } /* normalised avatar box (Ja / sheets) */
  .hlv-fin { position: absolute; top: 50%; transform: translate(-50%,-50%); text-align: center; width: 150px; }
  .hlv-fin .cup { width: 92px; height: 92px; margin: 0 auto; border-radius: 26px; display: grid; place-items: center; background: linear-gradient(160deg,#f7f4ee,#e9e3d6); border: 4px dashed #c3ccd4; font-size: 42px; box-shadow: 0 10px 26px rgba(0,0,0,.16); position: relative; }
  .hlv-fin .cup .lk { position: absolute; right: -6px; bottom: -6px; width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 15px; box-shadow: 0 4px 10px rgba(0,0,0,.2); }
  .hlv-fin .flbl { font-family: "Baloo 2","Nunito",cursive; font-weight: 800; font-size: 15px; margin-top: 10px; color: #26313a; }
  /* the floating Półka + "Tu jesteś" buttons */
  .hlv-shelf-btn { position: absolute; right: 14px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 6; background: #fff; color: #26313a; border: 0; border-radius: 16px; padding: 11px 15px; font-weight: 900; font-size: 13px; box-shadow: 0 7px 18px rgba(0,0,0,.24); display: flex; align-items: center; gap: 7px; }
  .hlv-here-btn { position: absolute; left: 14px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 6; background: #38b6ff; color: #fff; border: 0; border-radius: 16px; padding: 11px 15px; font-weight: 900; font-size: 13px; box-shadow: 0 7px 18px rgba(56,182,255,.5); display: flex; align-items: center; gap: 6px; }
  /* the lesson sheet + material tiles (fixed order · palette icon · NO numbers — items 8/21) */
  .hlv-mat-head { font-family: "Baloo 2","Nunito",cursive; font-weight: 800; font-size: 15px; margin: 16px 0 11px; display: flex; align-items: center; gap: 7px; }
  .hlv-mat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  /* ★ RUN MAP-SURFACE ruling 3 — `text-decoration: none` because a tile holding a single non-video
     item is now an <a> rather than a <button> (the guest doors' direct open). Every other declaration
     here already applies to both elements, so the two render identically; without this one the anchor
     would underline its caption and the grid would visibly disagree with itself. */
  .hlv-mat { border: 0; border-radius: 20px; padding: 14px; min-height: 108px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; box-shadow: 0 8px 18px rgba(0,0,0,.12); text-align: left; text-decoration: none; }
  .hlv-mat .emo { font-size: 27px; } .hlv-mat .mlbl { font-family: "Baloo 2","Nunito",cursive; font-weight: 800; font-size: 15px; margin-top: 4px; }
  .hlv-mat.pres { background: linear-gradient(160deg,#ffd664,#ffc233); color: #5a3a06; }
  .hlv-mat.game { background: linear-gradient(160deg,#63c1f2,#38a9e6); color: #08243a; }
  .hlv-mat.vid  { background: linear-gradient(160deg,#d79cf0,#c77fe0); color: #3a1652; }
  .hlv-mat.print { background: linear-gradient(160deg,#ffa25c,#f97a1f); color: #3a1e08; }
  .hlv-mat.empty { background: #eef1f4; color: #aeb8c1; box-shadow: none; border: 2px dashed #d3dbe3; cursor: default; }
  .hlv-mat-hero { background: linear-gradient(135deg,#eafaf2,#eef4ff); border-radius: 20px; padding: 16px; position: relative; overflow: hidden; min-height: 96px; }
  .hlv-mat-hero .code { display: inline-block; background: #fff; border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 900; color: #1f93d6; }
  .hlv-mat-hero .tit { font-family: "Baloo 2","Nunito",cursive; font-size: 21px; font-weight: 800; margin-top: 9px; color: #26313a; }
  .hlv-mat-hero .met { font-size: 12.5px; color: #6b7580; font-weight: 700; margin-top: 2px; }
  .hlv-mat-hero .hchar { position: absolute; right: -4px; bottom: -8px; width: 80px; height: 80px; }
  .hlv-lockbox { background: #eef1f4; border: 2px solid #dbe2e8; border-radius: 16px; padding: 15px; font-size: 13px; line-height: 1.6; font-weight: 700; color: #6b7580; margin-top: 14px; }
  .hlv-uznbox { background: #fff4dd; border: 2px solid #f4cf86; border-radius: 16px; padding: 15px; font-size: 13px; line-height: 1.6; font-weight: 700; color: #7a4a08; margin-top: 14px; }
  /* the Półka shelf sheet */
  .hlv-shelf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 8px; }
  .hlv-shelf-tile { aspect-ratio: 1; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10px; font-weight: 800; }
  .hlv-shelf-tile.done { background: linear-gradient(160deg,#39c08a,#1f8f63); color: #fff; box-shadow: 0 4px 0 #1f8f63; }
  .hlv-shelf-tile.owed { background: #eef1f4; border: 2px dashed #c4cdd5; color: #aeb8c1; }
  .hlv-shelf-tile .em { font-size: 22px; }
  .hlv-sec-t { font-family: "Baloo 2","Nunito",cursive; font-size: 18px; font-weight: 800; }
  .hlv-sec-note { font-size: 12px; color: #6b7580; font-weight: 700; margin: 3px 0 6px; }
  .hlv-sec-div { height: 1px; background: #e7ebef; margin: 20px 0 15px; }
  .hlv-special-empty { background: linear-gradient(180deg,#f4faff,#eaf4ff); border: 1.5px dashed #b9dcf5; border-radius: 18px; padding: 20px 16px; text-align: center; }
  .hlv-special-empty img { width: 90px; height: 90px; object-fit: contain; }
  .hlv-special-empty p { font-size: 12.5px; color: #6b7580; font-weight: 700; margin: 6px 0 0; line-height: 1.5; }
  .hlv-special-row { display: flex; gap: 10px; flex-wrap: wrap; }
  .hlv-special { flex: 1; min-width: 135px; background: linear-gradient(160deg,#fff4dd,#ffe9c2); border: 2px solid #f4cf86; border-radius: 15px; padding: 12px 13px; text-align: left; }
  .hlv-special .em { font-size: 22px; } .hlv-special .stit { font-family: "Baloo 2","Nunito",cursive; font-weight: 800; font-size: 13px; color: #7a4a08; margin-top: 4px; }
  /* trophy sheet (light — real ścieżka/półka counts, no CEFR fiction) */
  .hlv-troph { text-align: center; }
  .hlv-troph .cup { width: 104px; height: 104px; margin: 4px auto 0; border-radius: 26px; display: grid; place-items: center; background: linear-gradient(160deg,#f7f4ee,#e9e3d6); border: 4px dashed #c3ccd4; font-size: 46px; position: relative; box-shadow: 0 10px 26px rgba(0,0,0,.14); }
  .hlv-troph .cup .lk { position: absolute; right: -6px; bottom: -6px; width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 15px; box-shadow: 0 4px 10px rgba(0,0,0,.2); }
  .hlv-troph-stats { display: flex; gap: 10px; margin: 16px 0 4px; }
  .hlv-troph-stat { flex: 1; background: #fff; border: 1.5px solid #e7ebef; border-radius: 16px; padding: 13px; text-align: center; }
  .hlv-troph-stat .n { font-family: "Baloo 2","Nunito",cursive; font-size: 20px; font-weight: 800; } .hlv-troph-stat .n small { font-size: 12px; color: #9aa5ad; }
  .hlv-troph-stat .k { font-size: 10.5px; font-weight: 800; color: #6b7580; margin-top: 3px; letter-spacing: .3px; }
  /* Ja tab */
  .hlv-ja-hero { text-align: center; padding: 8px 0 4px; }
  .hlv-ja-av { width: 132px; height: 132px; margin: 0 auto; }
  .hlv-ja-av img { width: 100%; height: 100%; object-fit: contain; }
  .hlv-ja-name { font-family: "Baloo 2","Nunito",cursive; font-size: 24px; font-weight: 800; margin-top: 6px; }
  .hlv-avgrid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
  .hlv-avtile { border: 2px solid #e6ecf3; border-radius: 14px; background: #fff; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 96px; }
  .hlv-avtile.on { border-color: #38b6ff; background: #f2f9ff; }
  .hlv-avtile .box { width: 72px; height: 72px; } .hlv-avtile .box img { width: 100%; height: 100%; object-fit: contain; }
  .hlv-avtile .box.ini { border-radius: 50%; background: #eaf6ff; color: #1f93d6; display: grid; place-items: center; font-weight: 800; font-size: 24px; }
  .hlv-avtile span { font-size: 12px; font-weight: 800; }
  /* ── RUN PANEL-C — Dla rodziców ── */
  .hlv-rtitle { font-family: "Baloo 2","Nunito",cursive; font-size: 16px; font-weight: 800; margin: 2px 2px 10px; }
  .hlv-rrow { display: flex; align-items: center; gap: 8px; width: 100%; background: #fff; border: 1px solid #eef2f6; border-radius: 16px; padding: 13px 15px; font-family: inherit; font-weight: 900; font-size: 13.5px; color: #5a6a76; text-align: left; box-shadow: 0 4px 12px rgba(40,60,90,.05); margin-bottom: 10px; }
  .hlv-rrow .chev { margin-left: auto; font-size: 17px; color: #8a95a0; }
  .hlv-back { display: flex; align-items: center; gap: 6px; background: none; border: 0; font-family: inherit; font-weight: 900; font-size: 14px; color: #1f93d6; padding: 2px 2px 14px; }
  .hlv-subt { font-family: "Baloo 2","Nunito",cursive; font-weight: 800; font-size: 19px; margin: 0 2px 14px; }
  .hlv-rcard { background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 6px 18px rgba(40,60,90,.08); margin-bottom: 14px; }
  .hlv-saldo { background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 6px 18px rgba(40,60,90,.08); margin-bottom: 12px; }
  .hlv-saldo .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .hlv-saldo .lbl { font-size: 12px; font-weight: 800; color: #8a95a0; }
  .hlv-spill { font-size: 13px; font-weight: 900; padding: 5px 13px; border-radius: 999px; }
  .hlv-spill.owes { background: #fdecec; color: #c0392b; } .hlv-spill.ok { background: #e4f7ee; color: #1c7a43; }
  .hlv-spill.proc { background: #eef4f9; color: #4a6072; } /* #7 webhook-race "przetwarzana" */
  .hlv-payu { font-size: 11.5px; color: #8a95a0; font-weight: 700; margin-top: 10px; }
  .hlv-arrears { background: #fdf1f1; border: 1px solid #f3c2c2; border-radius: 14px; padding: 11px 14px; font-size: 13px; font-weight: 800; color: #b3261e; margin-bottom: 10px; }
  .hlv-ledhead, .hlv-ledrow { display: grid; grid-template-columns: 52px 60px 1fr auto; gap: 8px; }
  .hlv-ledhead { padding: 11px 0 9px; border-bottom: 1.5px solid #eef2f6; font-size: 9.5px; font-weight: 900; letter-spacing: .05em; color: #9aa5ad; text-transform: uppercase; }
  .hlv-ledhead span:last-child, .hlv-ledrow .amt { text-align: right; }
  .hlv-ledrow { padding: 10px 0; border-bottom: 1px solid #f4f6f8; align-items: start; }
  .hlv-ledrow .d { font-size: 10.5px; font-weight: 700; color: #6b7580; line-height: 1.3; }
  .hlv-ledrow .t { font-size: 10.5px; font-weight: 800; color: #5a6a76; line-height: 1.3; }
  .hlv-ledrow .o { font-size: 11px; font-weight: 600; color: #4a5761; line-height: 1.4; }
  .hlv-ledrow .amt { font-size: 11px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .hlv-ledrow .amt.neg { color: #c0392b; } .hlv-ledrow .amt.pos { color: #1f8f63; }
  .hlv-fut { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid #f0f3f6; }
  .hlv-fut .m { font-weight: 800; font-size: 13.5px; color: #5a6a76; } .hlv-fut .a { font-weight: 900; font-size: 14px; color: #8a95a0; font-variant-numeric: tabular-nums; }
  .hlv-lab { display: block; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #8a95a0; margin: 2px 0 5px; }
  .hlv-inp { width: 100%; border: 1.5px solid #e6ecf3; border-radius: 12px; padding: 11px 13px; font-family: inherit; font-weight: 700; font-size: 14px; color: #26313a; background: #fbfcfd; margin-bottom: 12px; }
  .hlv-ctx { background: #f4f7fa; border-radius: 12px; padding: 11px 13px; font-size: 12.5px; font-weight: 700; color: #6b7580; line-height: 1.6; margin-bottom: 4px; }
  .hlv-consent { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid #f0f3f6; background: none; font-family: inherit; text-align: left; }
  .hlv-consent .tt { font-weight: 800; font-size: 13.5px; color: #26313a; } .hlv-consent .dt { font-size: 11.5px; color: #8a95a0; font-weight: 700; margin-top: 1px; }
  .hlv-consent .op { margin-left: auto; font-size: 12px; font-weight: 900; color: #38b6ff; white-space: nowrap; }
  .hlv-langbtn { flex: 1; border: 0; font-family: inherit; border-radius: 12px; padding: 12px; font-size: 14px; font-weight: 900; }
  .hlv-langbtn.on { background: #38b6ff; color: #fff; box-shadow: 0 4px 0 #1f93d6; } .hlv-langbtn.off { background: #eef1f4; color: #6b7580; }
  .hlv-logout { display: block; width: 100%; border: 1px solid #f3c2c2; background: #fff; color: #b3261e; border-radius: 14px; padding: 13px; font-family: inherit; font-weight: 900; font-size: 14px; margin-top: 8px; }
  .hlv-paid { display: flex; align-items: center; gap: 10px; background: #eefbf3; border: 1px solid #c8efd6; border-radius: 14px; padding: 13px 14px; margin-bottom: 12px; }
  .hlv-paid .tt { font-weight: 900; font-size: 14px; color: #1c7a43; } .hlv-paid .sb { font-size: 12px; color: #3f8a5f; font-weight: 700; margin-top: 1px; }
  .hlv-kidbtn { border: 0; font-family: inherit; font-weight: 800; font-size: 12.5px; border-radius: 999px; padding: 8px 15px; background: #eef1f4; color: #5a6a76; margin: 0 8px 8px 0; }
  .hlv-kidbtn.on { background: #38b6ff; color: #fff; box-shadow: 0 3px 9px rgba(56,182,255,.4); }
  .hlv-histrow { background: #fff; border-radius: 16px; padding: 13px 15px; box-shadow: 0 4px 12px rgba(40,60,90,.06); margin-bottom: 10px; }
  .hlv-histrow .ht { font-weight: 900; font-size: 14px; } .hlv-histrow .hm { font-size: 12px; color: #6b7580; font-weight: 700; margin-top: 2px; }

  /* ═══════════ RUN DESKTOP-BANNER (RUN 6) — THE DESKTOP BREAKPOINT (1280px+) ═══════════
     Shipped from design-review exhibit `Discount banner merged into guest boards/desktop-proposal.css`
     (itself the approved v2 of folder 16), with the mockup's per-board scoping prefix dropped and the
     whole block wrapped in ONE media query, exactly as that file's own "HOW TO SHIP THIS" instructs.

     ★ BREAKPOINT = 1280px (owner's ruling). 700-1279px is NOT touched: it keeps today's Option-C card
     (the centred 412px phone frame on the branded backdrop) byte-for-byte, and the phone branch (<700px)
     is not reachable from any selector here. The only shipped rule this block supersedes is the
     Option-C `@media (min-width:700px) .hlv-frame`, and only from 1280px up.

     ONE renderer change goes with it and lives in web/hlv-mapview.js: X0 110, PAD_END 200 and the
     width-aware GAP clamp. Below 1280 the phone's 118/66/150 are untouched, which is why the phone map
     — panel AND guest — is byte-identical to today.

     ★ SCOPE B: the guest doors run this same stylesheet, so every rule below reaches them too. Their
     OWN chrome (CTA bar, 2-tab nav, Półka clearance, the coupon) is in guestmap.ts's inline <style>. */
  @media (min-width: 1280px) {
    /* ── 1. THE FRAME — the phone card becomes the window ── */
    .hlv-frame { max-width: none; height: 100%; border-radius: 0; box-shadow: none; }

    /* ── 2. THE MAP HEADER — two rows instead of three. Same children, same wording; the width buys a
       single identity row and puts the progress bar beside the course name, so the header costs 126px
       instead of ~150px and the landscape gets the difference. DOM unchanged: grid placement only. ── */
    /* ★★ CORRECTION 2 - the base spends `calc(12px + env(safe-area-inset-top))` here, so this override
       carries the SAME term: an iPad Pro 12.9" landscape is 1366pt and therefore ABOVE this breakpoint, and
       without it the brand header would sit under the status bar. `height` grows with the inset too, because
       box-sizing is border-box app-wide - a fixed 126px would simply overflow once the padding grew. The
       exhibit's own 126px is what remains at inset 0. `.hlv-sheet-bg`'s top MUST match this expression or
       the docked sheet slides under the header; DB-6h asserts the two agree. */
    .hlv-map-head { display: grid; grid-template-columns: 1fr auto; column-gap: 40px; align-items: end; height: calc(126px + env(safe-area-inset-top)); padding: calc(18px + env(safe-area-inset-top)) 40px 18px; }
    .hlv-map-head .row1 { grid-column: 1 / -1; }
    .hlv-map-course { font-size: 17px; margin-top: 14px; }
    .hlv-prog { width: 560px; margin-top: 14px; }

    /* ── 3. THE LANDSCAPE — the whole journey at once. The scene is capped at 560px tall and centred so
       the serpentine keeps its phone proportions instead of stretching two nodes across empty jungle. ── */
    .hlv-map-scroll { display: flex; align-items: center; }
    .hlv-map-inner { flex: none; min-width: 0; height: min(560px, 100%); margin: 0 auto; }

    /* ── 4. THE FLOATING SHELF BUTTON — clears the taller nav, sits in the gutter ── */
    /* ★ CORRECTION 2 - the base is `calc(86px + env(safe-area-inset-bottom))`; the exhibit's 90px replaces
       the 86, never the allowance. */
    .hlv-shelf-btn { right: 40px; bottom: calc(90px + env(safe-area-inset-bottom)); }

    /* ── 5. THE BOTTOM NAV — same bar, tabs kept thumb-sized and centred. `grid-auto-flow: column` instead
       of `repeat(4, …)`: identical for the panel's four tabs, and it also centres the GUEST map's TWO tabs,
       which the shipped `repeat(4, 1fr)` leaves stranded in the left half (Scope B). ── */
    .hlv-nav { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 168px; justify-content: center; padding: 10px 4px 12px; }

    /* ── 6. THE LESSON SHEET — bottom sheet becomes a docked side panel, from under the header to above
       the nav. No scrim (nothing is being blocked), and the map beside it stays fully interactive.

       ★★ SCOPED TO THE LESSON SHEET, and this is a DEVIATION FROM THE EXHIBIT'S RAW SELECTORS, taken to
       honour the exhibit's own written rule: "Every other sheet (profile, absence, payment, avatar,
       trophy, Półka) keeps the phone treatment" (README point 6; those boards were never drawn). The
       mockup's unscoped `.hlv-sheet-bg` would have docked all seven. `.hlv-mat-hero` is the hook because
       hlv-mapview.js's lessonSheetHtml emits it on EVERY branch (covered, uznana, locked, preview-tiles)
       and no other sheet emits it at all — so the scope is structural, not a class somebody must
       remember to add, and no door's markup changed by one byte to get it. ── */
    .hlv-frame:has(.hlv-mat-hero) .hlv-sheet-bg { top: calc(126px + env(safe-area-inset-top)); bottom: 67px; background: transparent; align-items: stretch; justify-content: flex-end; pointer-events: none; }
    .hlv-frame:has(.hlv-mat-hero) .hlv-sheet { width: 460px; height: 100%; max-height: none; border-radius: 24px 0 0 24px; padding: 22px 26px 26px; box-shadow: -18px 0 44px rgba(20, 40, 70, .16); pointer-events: auto; }
    .hlv-frame:has(.hlv-mat-hero) .hlv-sheet .hlv-grip { display: none; }
    .hlv-frame:has(.hlv-mat-hero) .hlv-sheet-x { top: 12px; right: 14px; }
    /* ★★ AND THE MAP'S VIEWPORT BECOMES THE PANE, which is what makes "no square, trophy or label may
       sit beneath the sheet" true for EVERY road length rather than only for the ones that happen to fit.
       The exhibit's boards get there with a hand-set `margin: 0 auto 0 0` on a scene that exactly filled
       the pane (width 820 in an 820 pane at 1280; 979 in a 980 pane at 1440) — but once the GAP clamp
       hits its 118px FLOOR (a real 11-square course at 1280 wants 47px), the scene is WIDER than the
       pane and scrolls, and a full-width scroll container would paint those squares under the sheet.
       Narrowing the container instead does three things at once: it clips the content to the pane, it
       makes the SCROLL RANGE the pane's (so the tail — and the trophy — can actually be scrolled to),
       and it lets the shipped `margin: 0 auto` keep centring the serpentine inside whatever is left.
       The jungle gradient moves up to `.hlv-map` for the docked state so the green still runs the full
       width behind the sheet, exactly as every board draws it. */
    .hlv-frame:has(.hlv-mat-hero) .hlv-map { background: linear-gradient(180deg, #eaf7e0, #dcefce); }
    .hlv-frame:has(.hlv-mat-hero) .hlv-map-scroll { width: calc(100% - 500px); }
    /* The floating Półka belongs to the map, so with the sheet DOCKED it steps left of it (460 + the same
       40px gutter) instead of hiding underneath.
       ★★ CORRECTION 3 - keyed on `.hlv-mat-hero`, the same hook every other dock rule uses. The exhibit's
       the exhibit's generic sheet-presence hook fired for profile / payment / avatar / trophy / Polka too,
       sliding the button 500px sideways behind sheets that never dock and never take that width. */
    .hlv-frame:has(.hlv-mat-hero) .hlv-shelf-btn { right: 500px; }

    /* ── 6b. EVERY OTHER SHEET (profile · absence · payment · avatar · trophy · Półka · past detail) ──
       ★★ CORRECTION 5, and deliberately the SMALLEST possible rule. They keep the phone treatment the
       exhibit's README asks for - the same bottom sheet, the same scrim, the same radius, the same
       `calc(22px + env(safe-area-inset-bottom))` padding, the same open/close behaviour - because the
       exhibit drew no board for them and this run has no mandate to redesign them. What was wrong is only
       that a 412px-wide bottom sheet became a full-window one at 1280+, which reads as a broken modal. So
       exactly two declarations: cap it at the phone frame width and centre it. `:not(:has(.hlv-mat-hero))`
       is the exact complement of the dock scope, so the two can never both apply and the lesson sheet's
       460px dock is untouched. */
    .hlv-frame:not(:has(.hlv-mat-hero)) .hlv-sheet-bg { justify-content: center; }
    .hlv-frame:not(:has(.hlv-mat-hero)) .hlv-sheet { max-width: 412px; }

    /* ── 7. START · JA · DLA RODZICÓW — a reading column, not a stretched phone. The width buys AIR, not
       line length: 760px, and the brand header centres its content on the same axis. Only the map — which
       IS a landscape — takes the full width. Cards, spacing, radii and type are untouched. ── */
    /* ★ CORRECTION 2 - base `calc(14px + env(safe-area-inset-top))`; the exhibit's 22px replaces the 14. */
    .hlv-head { padding: calc(22px + env(safe-area-inset-top)) 40px 26px; display: flex; flex-direction: column; align-items: center; }
    .hlv-head > * { width: 100%; max-width: 760px; }
    .hlv-scroll { padding: 28px 40px 48px; display: flex; flex-direction: column; align-items: center; }
    .hlv-scroll > * { width: 100%; max-width: 760px; }
    /* the saldo row's [Zapłać] is `flex: 1` for the phone's cramped row; with 760px it would stretch into
       a banner, so it goes back to its intrinsic width */
    .hlv-saldo .hlv-btn { flex: none; }
  }