/* The top bar on look-system pages (html.lx) and on the look previews (/ap/preview/…): linked by tools/ap/lesson-pages.mjs
   as its own plain stylesheet (tools/ap/lesson-looks.mjs lookBarLink), outside the lesson pages' bundle, so the live pages
   of the previous look stay byte for byte as they are. Look lab fix, 2026-10-26 (found by the feedback agent):
   1. Scrolled, the frosted bar must hide what passes under it even where the browser draws no backdrop blur: WebKit drew
      the day bar as 80 % white with no blur, and the study links and unit headings read straight through it (the dark
      bar, 70 % black, likewise; the live pages of the previous look still have it, see resources/notes/looklab.md).
   2. Over a full-bleed picture the bar takes the ink of the picture's top strip (data-bar, data-barp on a phone; measured
      at build where the logo sits), not the ink measured under the words: a day splash with bright smoke at the foot and
      a night sky at the top used to put the logo and "Sign in" in near-black on the night sky. Dark theme over a 3D
      world: white on the AP US History top shade. Paper: near-black. Framed, carousel and the phone topic page keep the
      theme's ink (their bar sits on the page ground). The pill under "Sign in" carries its own contrast in both inks. */

/* ------------------------------------------------------------------ 1. the frosted bar, opaque enough without blur */
html.lx-day .pc-top::before, .ls-day .pc-top::before, .lt-day .pc-top::before { background: rgba(251,251,253,.94) !important }
html.lx-dark .pc-top::before, .ls-dark .pc-top::before, .lt-dark .pc-top::before { background: rgba(14,14,16,.9) !important }

/* ------------------------------------------------------------------ 2. ink over a full-bleed picture (laptops) */
@media (min-width: 700px) {
  /* over a full topic picture the bar is clear until the page scrolls (reading.css frosts a day topic page's bar from the
     top, which put the picture's white ink on a white bar) */
  html.lx.lx-tp-full .lesson-topic .pc-top:not(.is-solid)::before { opacity: 0 !important }
  /* white */
  html.lx-dark.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"]) .pc-top:not(.is-solid) .pc-brand,
  html.lx-day.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"][data-bar="light"]) .pc-top:not(.is-solid) .pc-brand,
  html.lx-dark.lx-tp-full .lesson-topic:has(.lxh[data-kind="world"]) .pc-top:not(.is-solid) .pc-brand,
  html.lx-day.lx-tp-full .lesson-topic:has(.lxh[data-kind="world"][data-bar="light"]) .pc-top:not(.is-solid) .pc-brand { color: #fff !important }
  html.lx-dark.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"]) .pc-top:not(.is-solid) .pc-brand img,
  html.lx-day.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"][data-bar="light"]) .pc-top:not(.is-solid) .pc-brand img,
  html.lx-dark.lx-tp-full .lesson-topic:has(.lxh[data-kind="world"]) .pc-top:not(.is-solid) .pc-brand img,
  html.lx-day.lx-tp-full .lesson-topic:has(.lxh[data-kind="world"][data-bar="light"]) .pc-top:not(.is-solid) .pc-brand img { filter: none !important }
  html.lx-dark.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"]) .pc-top:not(.is-solid) .pc-div,
  html.lx-day.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"][data-bar="light"]) .pc-top:not(.is-solid) .pc-div,
  html.lx-dark.lx-tp-full .lesson-topic:has(.lxh[data-kind="world"]) .pc-top:not(.is-solid) .pc-div,
  html.lx-day.lx-tp-full .lesson-topic:has(.lxh[data-kind="world"][data-bar="light"]) .pc-top:not(.is-solid) .pc-div { background: rgba(255,255,255,.45) !important }
  html.lx-dark.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"]) .pc-top:not(.is-solid) .ap-signin,
  html.lx-day.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"][data-bar="light"]) .pc-top:not(.is-solid) .ap-signin,
  html.lx-dark.lx-tp-full .lesson-topic:has(.lxh[data-kind="world"]) .pc-top:not(.is-solid) .ap-signin,
  html.lx-day.lx-tp-full .lesson-topic:has(.lxh[data-kind="world"][data-bar="light"]) .pc-top:not(.is-solid) .ap-signin {
    color: #fff !important; background: rgba(0,0,0,.4) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.26) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important; backdrop-filter: blur(20px) saturate(160%) !important }
  /* the AP US History top shade under white ink in the dark theme */
  html.lx-dark.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"]) .pc-top:not(.is-solid)::after,
  html.lx-dark.lx-tp-full .lesson-topic:has(.lxh[data-kind="world"]) .pc-top:not(.is-solid)::after { display: block !important; opacity: 1 }
  /* near-black */
  html.lx.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="board"]) .pc-top:not(.is-solid) .pc-brand,
  html.lx-day.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"][data-bar="dark"]) .pc-top:not(.is-solid) .pc-brand,
  html.lx.lx-tp-full .lesson-topic:has(.lxh[data-kind="board"]) .pc-top:not(.is-solid) .pc-brand,
  html.lx-day.lx-tp-full .lesson-topic:has(.lxh[data-kind="world"][data-bar="dark"]) .pc-top:not(.is-solid) .pc-brand { color: #1d1d1f !important }
  html.lx.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="board"]) .pc-top:not(.is-solid) .pc-brand img,
  html.lx-day.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"][data-bar="dark"]) .pc-top:not(.is-solid) .pc-brand img,
  html.lx.lx-tp-full .lesson-topic:has(.lxh[data-kind="board"]) .pc-top:not(.is-solid) .pc-brand img,
  html.lx-day.lx-tp-full .lesson-topic:has(.lxh[data-kind="world"][data-bar="dark"]) .pc-top:not(.is-solid) .pc-brand img { filter: brightness(0) !important }
  html.lx.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="board"]) .pc-top:not(.is-solid) .pc-div,
  html.lx-day.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"][data-bar="dark"]) .pc-top:not(.is-solid) .pc-div,
  html.lx.lx-tp-full .lesson-topic:has(.lxh[data-kind="board"]) .pc-top:not(.is-solid) .pc-div,
  html.lx-day.lx-tp-full .lesson-topic:has(.lxh[data-kind="world"][data-bar="dark"]) .pc-top:not(.is-solid) .pc-div { background: rgba(0,0,0,.22) !important }
  html.lx.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="board"]) .pc-top:not(.is-solid) .ap-signin,
  html.lx-day.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"][data-bar="dark"]) .pc-top:not(.is-solid) .ap-signin,
  html.lx.lx-tp-full .lesson-topic:has(.lxh[data-kind="board"]) .pc-top:not(.is-solid) .ap-signin,
  html.lx-day.lx-tp-full .lesson-topic:has(.lxh[data-kind="world"][data-bar="dark"]) .pc-top:not(.is-solid) .ap-signin {
    color: #1d1d1f !important; background: rgba(255,255,255,.72) !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important; backdrop-filter: blur(20px) saturate(160%) !important }
  /* a light veil at the top of a bright day picture, under near-black ink (nothing dark behind white type in day), and
     over a whiteboard in both themes: it fills the picture now, and its handwritten title sits under the logo */
  html.lx-day.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"][data-bar="dark"]) .pc-top:not(.is-solid)::after,
  html.lx-day.lx-tp-full .lesson-topic:has(.lxh[data-kind="world"][data-bar="dark"]) .pc-top:not(.is-solid)::after,
  html.lx.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="board"]) .pc-top:not(.is-solid)::after,
  html.lx.lx-tp-full .lesson-topic:has(.lxh[data-kind="board"]) .pc-top:not(.is-solid)::after {
    display: block !important; opacity: 1; height: 130px; background: linear-gradient(180deg, rgba(251,251,253,.72) 0, rgba(251,251,253,.42) 64px, rgba(251,251,253,0) 130px) }
}

/* ------------------------------------------------------------------ 2. ink over a full-bleed splash (phones) */
@media (max-width: 699px) {
  html.lx-dark.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"]) .pc-top:not(.is-solid) .pc-brand,
  html.lx-day.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"][data-barp="light"]) .pc-top:not(.is-solid) .pc-brand { color: #fff !important }
  html.lx-dark.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"]) .pc-top:not(.is-solid) .pc-brand img,
  html.lx-day.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"][data-barp="light"]) .pc-top:not(.is-solid) .pc-brand img { filter: none !important }
  html.lx-dark.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"]) .pc-top:not(.is-solid) .pc-div,
  html.lx-day.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"][data-barp="light"]) .pc-top:not(.is-solid) .pc-div { background: rgba(255,255,255,.45) !important }
  html.lx-dark.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"]) .pc-top:not(.is-solid) .ap-signin,
  html.lx-day.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"][data-barp="light"]) .pc-top:not(.is-solid) .ap-signin {
    color: #fff !important; background: rgba(0,0,0,.4) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.26) !important }
  html.lx-dark.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"]) .pc-top:not(.is-solid)::after { display: block !important; opacity: 1 }
  html.lx.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="board"]) .pc-top:not(.is-solid) .pc-brand,
  html.lx-day.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"][data-barp="dark"]) .pc-top:not(.is-solid) .pc-brand { color: #1d1d1f !important }
  html.lx.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="board"]) .pc-top:not(.is-solid) .pc-brand img,
  html.lx-day.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"][data-barp="dark"]) .pc-top:not(.is-solid) .pc-brand img { filter: brightness(0) !important }
  html.lx.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="board"]) .pc-top:not(.is-solid) .pc-div,
  html.lx-day.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"][data-barp="dark"]) .pc-top:not(.is-solid) .pc-div { background: rgba(0,0,0,.22) !important }
  html.lx.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="board"]) .pc-top:not(.is-solid) .ap-signin,
  html.lx-day.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"][data-barp="dark"]) .pc-top:not(.is-solid) .ap-signin {
    color: #1d1d1f !important; background: rgba(255,255,255,.72) !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1) !important }
  html.lx-day.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="world"][data-barp="dark"]) .pc-top:not(.is-solid)::after,
  html.lx.lx-sp-full .lesson-course:has(.lx-slide.is-on[data-kind="board"]) .pc-top:not(.is-solid)::after {
    display: block !important; opacity: 1; height: 110px; background: linear-gradient(180deg, rgba(251,251,253,.72) 0, rgba(251,251,253,.4) 54px, rgba(251,251,253,0) 110px) }
}