/* Meditate in the native frame (plan 4, task 1: only what the frame switch
   itself needs; plan 4, task 2: the cleanups of spec §6, worked page by
   page against design/site-b/pages/meditate*.html). The pages underneath
   still carry library.css's own layout; this file only overrides what the
   frame's own resets/typography clash with, or what the samples ask to
   look different. It loads after tokens.css and library.css (see
   Site\Frame::MEDITATE css list), so a same-specificity selector here wins
   over library.css without editing library.css itself - which still has
   to serve the old, unframed Meditate to every visitor without the preview
   cookie. /assets/b/site.css (always loaded by the frame) is what defines
   the unprefixed --plum/--gold/etc. custom properties used below; they are
   the same values as tokens.css's --jr-color-* ones, just named the way
   design/site-b/assets/site.css names them. */

/* ===== library content resets the bare <section> padding public/assets/b/site.css
   sets site-wide (`section { padding: 96px 0; }`, meant for the marketing
   page's own sections) - library.css never touches it, it only sets margin
   on the classed sections (.jr-hero-row, .jr-subs, .jr-section, ...), so
   the two paddings stacked and left a ~192px gap between /meditate/live/'s
   intro (.jr-hero-row) and its pricing boxes (.jr-subs). The samples do the
   same reset for their own main column (design/site-b/pages/*.html's
   `.md-main section { padding: 0; }`); this is that rule for .jr-lib.
   :where() keeps this at specificity 0,0,1 (a bare element selector) rather
   than 0,1,1, so a classed rule like .jr-signin-card/.jr-you's own padding
   (library.css) still wins on source order alone, the way it did before
   this reset existed - it only needs to beat the unclassed `section` rule
   above it. ===== */
:where(.jr-lib) section { padding: 0; }

/* ===== one sticky section bar: Ask + tabs + Sign in, together ===== */
.jr-bar {
  position: sticky;
  top: 84px; /* the site header's own height (public/assets/b/site.css .top .wrap) */
  z-index: 30;
  display: block;
  margin: 0 0 var(--jr-space-6);
  padding: var(--jr-space-3) 0;
  background: rgba(253, 251, 253, .95);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(50, 32, 56, .06);
  overflow: visible;
}
/* jr-lib's content column (1180px) is narrower than the sample's own
   1344px, where its tab row fits beside the search box on one line -
   here it never quite does, so the bar always uses the sample's own
   "narrow" layout: search + Sign in on one row, the tabs (scrollable,
   never wrapped) on the row under it. That also satisfies "on phones the
   tabs scroll sideways and search sits above them" without a separate
   breakpoint. */
.jr-bar-in { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.jr-bar-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.jr-bar-row form.jr-guide { flex: 1 1 auto; min-width: 0; max-width: 100%; margin: 0; }
.jr-bar-row .jr-me { flex: none; }
.jr-bar-in .jr-seg-nav { flex: none; min-width: 0; max-width: 100%; display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0; }
.jr-bar-in .jr-seg-nav::-webkit-scrollbar { display: none; }
.jr-bar .jr-seg-nav { background: transparent; border: 0; box-shadow: none; padding: 0; }
/* #jr-guide-result sits directly under the bar (the form that fills it is
   inside), full width, so an answer never fights the sticky bar for
   height. Empty on every page but /meditate/find/ (which pre-fills it) and
   whenever library.js has not yet answered a question. */
#jr-guide-result:not(:empty) { margin: 0 0 var(--jr-space-8); }

/* ===== the "Meditate" intro sentence - home.php only now; the hero band
   above already carries the "Meditate" heading itself ===== */
.jr-intro { max-width: var(--jr-width-reading); margin: 0 0 var(--jr-space-10); text-align: left; font-size: var(--jr-size-lg); line-height: var(--jr-leading-normal); color: var(--jr-color-muted-strong); }

/* ===== removing the in-page breadcrumb and the repeated page title left
   welcome.php's/course.php's own heading downgraded from h1 to h2 (the
   hero band above is each page's one h1); restore the size their old h1
   had. lesson.php (single meditation and course-lesson pages), live.php
   ("Happy Healers Live Meditation") and checkout.php get the same
   treatment. jr-single's own title keeps the lavender colour Michael
   asked for (library.css's rule was written for the h1 it used to be)
   ===== */
.jr-welcome h2 { font-size: var(--jr-size-2xl); margin: var(--jr-space-2) 0 var(--jr-space-6); }
.jr-product-main h2 { font-size: var(--jr-size-2xl); margin-bottom: var(--jr-space-3); }
.jr-lav { color: #7a58a6; }
.jr-lesson-page h2 { font-size: var(--jr-size-2xl); margin-bottom: var(--jr-space-1); }
.jr-hero-row h2 { font-size: var(--jr-size-2xl); margin-bottom: var(--jr-space-3); }
.jr-checkout h2 { font-size: var(--jr-size-2xl); margin-bottom: var(--jr-space-3); }

/* ===== My Library: no second photo header under the archway hero - the
   "Yours · N items" line and stat cards sit on the page background
   instead of library.css's photo-overlay treatment (jr-stats div was
   styled translucent-on-a-dark-photo, invisible on plain white) ===== */
.jr-mine-top { margin: 0 0 var(--jr-space-6); }
.jr-mine-top .jr-stats { margin-top: var(--jr-space-3); }
.jr-mine-top .jr-stats div { background: var(--jr-color-white); border: none; box-shadow: var(--jr-shadow-card); text-align: center; -webkit-backdrop-filter: none; backdrop-filter: none; }
.jr-mine-top .jr-stats b { color: var(--jr-color-plum); }
.jr-mine-top .jr-stats span { color: var(--jr-color-muted); opacity: 1; }

/* ===== Sundays: the "One Sunday" box the same height as "Every Sunday"
   (spec §6 amendment) - grid's own default is already stretch, stated
   explicitly here so it survives any future change to .jr-subs ===== */
.jr-subs { align-items: stretch; }

/* ===== Sundays: the "Next live call" purple countdown box (Michael, Sept
   27) to the left of the pricing, and the pricing itself regrouped into one
   right-hand column - "One Sunday" on top, "Every Sunday" (monthly and
   quarterly) below it. .jr-subs is still the two-plan grid library.css
   already defines (one column under 768px, two side by side at and above
   it) - the countdown box is its first child and .jr-subs-col, a plain
   flex column stacking the two unchanged .jr-sub cards, is its second, so
   library.css's own responsive rule is exactly what gives "stack on
   mobile, side by side on desktop" here with no new breakpoint of its own.
   When there is no upcoming Sunday PHP renders no .jr-live-countdown at
   all (not just a hidden one), so .jr-subs-col is grid's only child and
   :only-child lets it take the full row rather than leaving a bare second
   column. The box's own look borrows public/assets/b/site.css's .window
   panel (same plum, same corner glow) rather than a new dark-card style,
   with the app's LiveCard (apps/chalice/src/components/LiveCard.tsx) for
   what goes inside it: a gold kicker, the call's name, its topic, when in
   Pacific, and a days/hrs/min countdown that swaps for "Live now" once it
   has started. The countdown text here is the no-JS/first-paint state
   (server-computed from Clock::now() in live.php); public/assets/library.js
   re-ticks it client-side every 30s from data-starts (UTC ISO), computed
   from the visitor's own clock so it is right in any timezone, and its
   interval re-queries the DOM each tick rather than caching the node, so
   it keeps working (or goes quietly inert) across library.js's own
   fetch-swap navigation between Meditate pages, which replaces #jr-main
   wholesale and would otherwise orphan a cached reference.

   Every inner rule below is written ".jr-live-countdown .jr-lc-*" rather
   than the bare class: library.css's own ".jr-lib h1,.jr-lib h2,.jr-lib
   h3{color:var(--jr-color-ink);...}" and ".jr-lib p{margin:...}" are
   (0,1,1) - a bare ".jr-lc-title{color:#fff}" is only (0,1,0) and lost to
   them regardless of load order, which first shipped as the call's name
   rendering in near-invisible dark ink on the plum. Two classes, (0,2,0),
   beats that reliably. */
.jr-live-countdown { position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--jr-color-plum-deep); color: #fff; border-radius: var(--jr-radius-card); padding: var(--jr-space-6); box-shadow: 0 14px 40px rgba(50, 32, 56, .24); }
.jr-live-countdown::before { content: ""; position: absolute; right: -90px; top: -110px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(237, 180, 95, .28), transparent 65%); pointer-events: none; }
.jr-live-countdown .jr-lc-kicker { position: relative; font-family: var(--jr-font-ui); font-weight: var(--jr-weight-bold); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--jr-color-gold); }
.jr-live-countdown .jr-lc-title { position: relative; margin: 6px 0 0; font-family: var(--jr-font-ui); font-weight: var(--jr-weight-bold); font-size: var(--jr-size-xl); color: #fff; }
.jr-live-countdown .jr-lc-topic { position: relative; margin: 4px 0 0; font-family: var(--jr-font-ui); font-weight: var(--jr-weight-bold); font-size: var(--jr-size-sm); color: #f3d59e; font-style: normal; }
.jr-live-countdown .jr-lc-when { position: relative; margin: 8px 0 0; font-size: var(--jr-size-sm); color: rgba(255, 255, 255, .8); }
.jr-live-countdown .jr-lc-live { position: relative; display: flex; align-items: center; gap: 8px; margin: var(--jr-space-4) 0 0; font-family: var(--jr-font-ui); font-weight: var(--jr-weight-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--jr-color-gold); font-size: var(--jr-size-sm); }
.jr-live-countdown .jr-lc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--jr-color-gold); }
.jr-live-countdown .jr-lc-count { position: relative; display: flex; gap: 10px; margin: var(--jr-space-4) 0 0; flex-wrap: wrap; }
.jr-live-countdown .jr-lc-box { min-width: 64px; padding: 8px 14px; border-radius: var(--jr-radius-md); background: rgba(255, 255, 255, .1); text-align: center; }
.jr-live-countdown .jr-lc-box b { display: block; font-family: var(--jr-font-ui); font-weight: 800; font-size: var(--jr-size-lg); color: #fff; }
.jr-live-countdown .jr-lc-box span { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.jr-live-countdown [hidden] { display: none; }
.jr-live-countdown .jr-lc-join { position: relative; align-self: flex-start; margin-top: var(--jr-space-5); }
.jr-subs-col { display: flex; flex-direction: column; gap: var(--jr-space-4); }
.jr-subs-col:only-child { grid-column: 1 / -1; }

/* ===== You: Delete account as a quiet link at the bottom, opening its
   confirmation panel in place, rather than a row inside the CHALICE card
   (Michael: closing an account is rare and final enough that it should
   not sit at the same visual weight as "Contact Jean"/"Sign out") ===== */
.jr-delete-disclosure { margin: var(--jr-space-8) 0 0; }
.jr-delete-disclosure summary { cursor: pointer; list-style: none; }
.jr-delete-disclosure summary::-webkit-details-marker { display: none; }
.jr-delete-disclosure[open] summary { margin-bottom: var(--jr-space-3); color: #a3232b; opacity: 1; }
.jr-delete-disclosure .jr-delete-form { flex-direction: column; align-items: flex-start; padding: var(--jr-space-5); background: var(--jr-color-white); border-radius: var(--jr-radius-card); box-shadow: var(--jr-shadow-card); }

/* ===== level/listing pages: one accent colour (plum) for every control,
   not teal for the All/Courses/Meditations filter ===== */
/* A level page with both a Courses and a Meditations pill (three pills:
   All/Courses/Meditations, each with a count) can be wider than a 390px
   viewport - library.css's .jr-seg-show is display: inline-flex with no
   wrap or scroll of its own, so the row pushed the page wider than the
   screen instead of scrolling in place. Scroll the pills sideways instead,
   same move as the bar's own .jr-seg-nav above. */
.jr-seg-show { max-width: 100%; overflow-x: auto; scrollbar-width: none; border-color: rgba(91, 20, 80, .18); box-shadow: 0 6px 18px rgba(91, 20, 80, .10); }
.jr-seg-show::-webkit-scrollbar { display: none; }
.jr-seg-show a.jr-seg-a { color: var(--jr-color-plum); }
.jr-seg-show a.jr-seg-a:hover { background: rgba(91, 20, 80, .07); }
.jr-seg-show a.jr-seg-a[aria-selected=true] { background: linear-gradient(135deg, #76206a, var(--jr-color-plum)); color: var(--jr-color-on-plum); box-shadow: 0 6px 16px rgba(91, 20, 80, .35); }
.jr-seg-show .jr-seg-n { background: rgba(91, 20, 80, .1); }
.jr-seg-show a.jr-seg-a[aria-selected=true] .jr-seg-n { background: rgba(255, 255, 255, .22); }

/* Quiet note that single meditations are still being sorted into levels -
   present but out of the way, not a bold announcement. */
.jr-quiet { opacity: .78; font-size: var(--jr-size-xs); }

/* ===== course page: lock · Audio · minutes on one line (the thumbnail +
   day-number badge already comes from library.css's counter on .jr-lessons
   / .jr-lesson a::before - kept as is, per spec §6's amendment) ===== */
.jr-lesson-meta { flex-direction: row; align-items: center; gap: 6px; }
.jr-lesson-meta span + span::before { content: "·"; margin-right: 6px; color: var(--jr-color-line); font-weight: var(--jr-weight-bold); }

@media (max-width: 640px) {
  /* The sticky header (84px) plus the sticky bar (133px) leave too little
     of a phone screen for the page under them; below 640px the bar scrolls
     away with the page instead of pinning under the header. */
  .jr-bar { position: static; top: auto; padding: var(--jr-space-2) 0; }
  .jr-intro { font-size: var(--jr-size-md); margin-bottom: var(--jr-space-6); }
  /* The now-one-line "lock · Audio · N min" needs more width than the
     narrow third grid column has at phone width; drop it under the title
     instead of squeezing it (same move the sample makes under 800px). */
  .jr-lesson a { grid-template-columns: 64px 1fr; }
  .jr-lesson-meta { grid-column: 2; justify-content: flex-start; margin-top: 2px; }
  .jr-live-countdown { padding: var(--jr-space-5); }
  .jr-lc-box { min-width: 0; flex: 1 1 0; padding: 8px 6px; }
}
@media (max-width: 480px) {
  /* Sign in stays a plain circle at phone width, same idea as the sample's
     own icon-only Sign in under 800px - there just is not room for both
     the icon and the word next to a full-width search field. */
  .jr-bar-in .jr-me span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .jr-bar-in .jr-me { padding: 6px; }
}

/* The countdown box is as tall as the two price boxes beside it: centre its
   contents and let the countdown read as the feature (Michael, Sept 27). */
.jr-live-countdown { justify-content: center; }
.jr-live-countdown .jr-lc-title { font-size: clamp(24px, 2.4vw, 30px); }
.jr-live-countdown .jr-lc-count { margin-top: var(--jr-space-5); gap: 12px; }
.jr-live-countdown .jr-lc-box { min-width: 82px; padding: 14px 16px; border-radius: 16px; }
.jr-live-countdown .jr-lc-box b { font-size: 34px; line-height: 1.05; }
.jr-live-countdown .jr-lc-box span { font-size: 11px; margin-top: 4px; }
.jr-live-countdown .jr-lc-live { font-size: 18px; margin-top: var(--jr-space-5); }
.jr-live-countdown .jr-lc-dot { width: 12px; height: 12px; box-shadow: 0 0 0 6px rgba(237, 180, 95, .22); }

/* Sundays prices (Michael, Sept 27): "Pick a date" sits beside the price as a
   link to the Upcoming list; the small words by each price and the quarterly
   note are bold and dark enough to read on the pale boxes. */
.jr-sub-single .jr-sub-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.jr-sub-single .jr-sub-line .jr-sub-price { margin: 0; }
.jr-pick { font-family: var(--jr-font-ui); font-weight: 700; font-size: 15px; color: var(--jr-color-plum); text-decoration: none; border-bottom: 1.5px solid currentColor; }
.jr-pick:hover { color: var(--jr-color-plum-deep); }
.jr-subs .jr-sub-price small { font-family: var(--jr-font-ui); font-weight: 700; font-size: 15px; color: var(--jr-color-plum-deep); opacity: 1; }
.jr-subs .jr-plan-save { font-weight: 700; color: var(--jr-color-plum); }
#upcoming { scroll-margin-top: 100px; }

/* Room inside the section bar so Sign in doesn't touch its right edge and
   the search box starts a little in from the left (Michael, Sept 27). */
.jr-bar { padding-left: 18px; padding-right: 18px; }
@media (max-width: 640px) { .jr-bar { padding-left: 12px; padding-right: 12px; } }
/* A touch of room between the header video and the bar (Michael, Sept 27). */
.jr-bar { margin-top: 18px; }
@media (max-width: 640px) { .jr-bar { margin-top: 14px; } }

/* Sign in / your name: the hover pill needs its own side padding (library.css's
   ".jr-bar a" strips it) and no gold underline (Michael, Sept 27). */
.jr-bar .jr-me { padding: 6px 14px 6px 8px; border-bottom: 0; }
.jr-bar .jr-me:hover { border-bottom: 0; }
@media (max-width: 640px) { .jr-bar .jr-me { padding: 6px; } }

/* ===== My Library, empty (Michael, Sept 27): a welcome instead of the plain
   empty state, once nothing is owned and nothing has been played - Jean's
   welcome card and the level cards already have their own look
   (.jr-welcome-card, .jr-level-card, both library.css); these two pieces are
   new. "Take CHALICE with you" reuses plain .jr-btn pairs, just laid out in
   a row. ===== */
.jr-cta-row { display: flex; flex-wrap: wrap; gap: var(--jr-space-3); margin: var(--jr-space-2) 0 0; }

/* The closing "Explore Meditate" panel: library.css's own .jr-live-card
   (plum gradient, white text) already gives the "big, inviting" plum panel;
   this only adds the solid gold pill button standing in for that card's
   plain "Next: ..." status line, since here the card's whole point is the
   one click it asks for. Always stacked (heading and lede, then the button
   underneath) rather than library.css's row-at-768px, so the button reads
   as a deliberate next step rather than a side note next to the text -
   meditate.css loads after library.css, so this plain class selector (same
   specificity as .jr-live-card's own, media-queried one) wins at every
   width. */
.jr-explore-cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--jr-space-5); }
.jr-explore-cta-go { display: inline-flex; align-items: center; gap: 6px; }
.jr-explore-cta .jr-explore-cta-go, .jr-explore-cta .jr-explore-cta-go:hover, .jr-explore-cta .jr-explore-cta-go:active { background: var(--jr-color-gold); color: var(--jr-color-plum-deep) !important; -webkit-text-fill-color: var(--jr-color-plum-deep) !important; border-color: var(--jr-color-gold); box-shadow: 0 8px 22px rgba(0, 0, 0, .22); }
.jr-explore-cta .jr-explore-cta-go:hover { background: #f5c988; }

/* "Get Jean's emails?" on My Library (email plan 5a): a white card with a
   plum edge above the rest of the page, its two buttons in a row. */
.jr-list-card { background: var(--jr-color-white); border-radius: var(--jr-radius-card); box-shadow: var(--jr-shadow-card); border-left: 5px solid var(--jr-color-plum); padding: var(--jr-space-6); margin: 0 0 var(--jr-space-8); }
.jr-list-card h2 { margin: 0 0 var(--jr-space-2); }
.jr-list-card p { margin: 0 0 var(--jr-space-3); color: var(--jr-color-ink-soft, inherit); }
.jr-lib .jr-you button.jr-quiet { display: inline-block; margin: var(--jr-space-3) 0 0; background: none; border: 0; padding: 0; color: var(--jr-color-plum); text-decoration: underline; cursor: pointer; font: inherit; }

/* ===== "Add to calendar" on the Sundays page (Live\Calendar): under the
   Join button in the plum countdown, and under each call the member may
   join. Two classes each, so library.css's ".jr-lib p" margin and
   ".jr-lib a" plum (both (0,1,1)) lose to them, as in the countdown above. */
.jr-live-countdown .jr-lc-cal { position: relative; margin: var(--jr-space-3) 0 0; font-family: var(--jr-font-ui); font-size: var(--jr-size-sm); color: rgba(255, 255, 255, .8); }
.jr-live-countdown .jr-lc-cal a { color: #fff; font-weight: var(--jr-weight-bold); }
.jr-lib .jr-cal { margin: var(--jr-space-2) 0 0; font-family: var(--jr-font-ui); font-size: var(--jr-size-sm); }