/* ===== scoped from 00-root.css ===== */
/* Practice Library: root reset + tokens, confined to #se-library-root.
   The design's prototype relied on an unscoped head reset (*, html/body, h1-h4, p, a,
   button, img) which will not exist on a WordPress page, and whose absence is exactly how
   a theme's button/heading/list styles bleed in. Re-declared here inside the root, and the
   :root token block is defined on the root so theme variables of the same name cannot
   clobber ours (and ours cannot clobber the theme's). */
#se-library-root{
  --ink:#33312e;--ink-soft:#615c53;--ink-faint:#948d80;--paper:#fff;--cream:#faf8f4;
  --cream-deep:#f0eee9;--border:#e3e0d8;--border-soft:#eeece6;--orange:#c46a26;
  --orange-dark:#a2551d;--orange-tint:#fbeee0;--leaf:oklch(0.52 0.09 152);
  --leaf-tint:oklch(0.95 0.03 152);--maxw:1140px;
  /* neutralise inherited theme typography/box values */
  box-sizing:border-box; margin:0; padding:0;
  font-family:'Mulish',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px; font-weight:400; line-height:1.62; color:var(--ink);
  letter-spacing:normal; text-align:left; text-transform:none; font-style:normal;
  background:#fefefe; -webkit-font-smoothing:antialiased;
}
#se-library-root *, #se-library-root *::before, #se-library-root *::after{box-sizing:border-box;}
#se-library-root h1, #se-library-root h2, #se-library-root h3, #se-library-root h4, #se-library-root h5, #se-library-root h6{
  margin:0; padding:0; font-weight:800; letter-spacing:-.015em; line-height:1.15;
  font-family:inherit; color:inherit; text-transform:none;
}
#se-library-root p{margin:0; padding:0; line-height:1.62; font-family:inherit; color:inherit;}
#se-library-root a{color:var(--orange-dark); text-decoration:none; box-shadow:none;}
#se-library-root a:hover{color:var(--orange); text-decoration:none;}
#se-library-root button, #se-library-root input, #se-library-root select, #se-library-root textarea{
  font-family:inherit; font-size:inherit; line-height:normal; letter-spacing:normal;
  color:inherit; text-transform:none; margin:0;
}
/* white-space is the one the theme's button reset was quietly winning: it sets nowrap, which no
   amount of overflow-wrap can override, so every button holding a full sentence (Related, previous
   and next session, the crossref card) pushed its text straight out through the side of its box
   instead of wrapping. It must be re-declared here with the rest of the reset. */
#se-library-root button{background:none; border:none; padding:0; cursor:pointer; border-radius:0;
  box-shadow:none; text-align:inherit; width:auto; white-space:normal;}
#se-library-root ul, #se-library-root ol{margin:0; padding:0; list-style:none;}
#se-library-root li{margin:0; padding:0; list-style:none;}
#se-library-root img, #se-library-root svg{max-width:100%; display:block; height:auto; border:none;}
#se-library-root figure, #se-library-root blockquote{margin:0; padding:0;}
#se-library-root hr{margin:0; border:none;}
#se-library-root table{border-collapse:collapse; width:auto;}
#se-library-root :focus-visible{outline:3px solid #7fa8ff; outline-offset:2px;}
/* the prototype's own page wrapper, kept as an inner wrapper since the theme supplies nav/footer */
#se-library-root .page{max-width:var(--maxw); margin:0 auto; padding:34px 0 90px;}
@media (max-width:860px){#se-library-root .page{padding:24px 0 70px;}}
/* Server-rendered library content: real HTML for crawlers, for no-JS visitors and for the CSS
   optimiser. React replaces it on mount, so it is only visible before/without JavaScript. */
#se-library-root .se-lib-ssr{max-width:var(--maxw);margin:0 auto;padding:34px 0 60px;}
#se-library-root .se-lib-ssr h1{font-size:34px;margin-bottom:12px;}
#se-library-root .se-lib-ssr h2{font-size:22px;margin:28px 0 10px;}
#se-library-root .se-lib-ssr p{margin-bottom:10px;color:var(--ink-soft);}
#se-library-root .se-lib-ssr ul{display:grid;gap:14px;}
#se-library-root .se-lib-ssr li{border-bottom:1px solid var(--border-soft);padding-bottom:12px;}
#se-library-root .se-lib-ssr li a{font-weight:800;font-size:17px;}
#se-library-root .se-lib-ssr li span{color:var(--ink-faint);font-size:13.5px;margin-left:8px;}

/* Real images inside the design's Thumb placeholder. The placeholder's diagonal hatch stays as
   the background, so a slow or missing image still looks deliberate rather than broken. The play
   button and duration pill sit above the image, which is why they need their own stacking. */
#se-library-root .lb-thumb.has-img{ background: var(--cream-deep); }
/* The hover animation, OVER the still rather than instead of it: the still stays visible underneath, so a
   slow load shows a picture rather than a hole, and the fade hides the moment the webp starts moving. */
/* The hover preview is now a DIV showing one cell of a sprite sheet, stepped in JS, as well as the old
   <img> for anything without a sheet. Both need the same box, so the rule covers either element:
   background-repeat off, because a 6x6 sheet tiled would show three other frames at the edges. */
#se-library-root div.lb-thumb-prev{ background-repeat: no-repeat; }
#se-library-root .lb-thumb-prev{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border: 0;
  opacity: 0; transition: opacity .22s ease; z-index: 1;
}
#se-library-root .lb-thumb-prev.on{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  /* Somebody who has asked for less movement should not get a card that starts moving at them. */
  #se-library-root .lb-thumb-prev{ display: none; }
}
#se-library-root .lb-thumb-img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; border: 0;
  /* THE THEME ROUNDS EVERY IMAGE ON THE SITE. Elementor's global kit carries
     `.elementor-kit-8929 img { border-radius: 20px }`, which is fine for the rest of samadhi.org.uk and
     wrong inside a card: it rounded the BOTTOM of every thumbnail, where the card body continues below
     it, and rounded the top by its own 20px rather than following the card's. David: "the images are
     rounded on the bottom as well but shouldn't be... it's taking that from the theme, but it's not
     fitting our cards here."
     Every .lb-thumb clips its contents already, so shaping belongs to the container and the image should
     have none of its own. The reset above clears `border` and never cleared `border-radius`, which is
     how a theme rule got in past a scoped stylesheet. */
  border-radius: 0;
}
/* Any image inside a clipping thumb, not only the one the Thumb component renders. */
#se-library-root .lb-thumb img{ border-radius: 0; }
#se-library-root .lb-thumb .play, #se-library-root .lb-thumb .dur, #se-library-root .lb-thumb .bar{ position: relative; z-index: 2; }
#se-library-root .lb-thumb .dur, #se-library-root .lb-thumb .bar{ position: absolute; }
#se-library-root .lb-teacher-photo.has-img .lb-thumb-img{ object-position: center top; }

/* Read more. The full text is always in the markup; only the height is clamped, so a crawler and
   a reader with JavaScript off both get everything. */
#se-library-root .lb-readmore{ position: relative; }
#se-library-root .lb-readmore p{ margin: 0 0 0.9em; font-size: 16px; line-height: 1.62; color: var(--ink-soft, #55504a); }
#se-library-root .lb-readmore p:last-of-type{ margin-bottom: 0; }
#se-library-root .lb-readmore.clamped{
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
#se-library-root .lb-readmore-btn{
  appearance: none; background: none; border: 0; padding: 4px 0; margin-top: 6px;
  font: inherit; font-weight: 800; font-size: 14.5px; color: var(--orange, #b4532a);
  cursor: pointer; letter-spacing: -0.005em;
}
#se-library-root .lb-readmore-btn:hover{ text-decoration: underline; }
/* When clamped, the toggle has to sit outside the clamped box to stay visible. */
#se-library-root .lb-readmore-wrap{ margin-bottom: 20px; }
#se-library-root .lb-itembody, #se-library-root .lb-coursebody{ margin-bottom: 20px; }

/* Real playback surface. The design's stage was a decorative placeholder, so it has no rules for a
   16:9 iframe or an audio element. */
#se-library-root .lb-stage-live{ padding: 0; display: block; overflow: hidden; }
#se-library-root .lb-vimeo{
  display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; background: #000;
}
#se-library-root .lb-stage-live.audio{
  display: flex; align-items: center; padding: 1.4rem 1.2rem; background: var(--ink, #2A2724);
}

/* ── Captions, drawn by us ───────────────────────────────────────────────────────────────────
   David, comparing ours with the host's own player: "Bit more padding to them, nice font choice.
   Doesn't necessarily need to be solid black but the rest is nice."

   None of that is reachable with a native track. `::cue` accepts colour, font and background and
   NOT padding or border-radius, so a browser-painted cue is always text jammed against the edge of
   its box. The player therefore sets the track to `hidden` and renders the active cue itself, which
   is what makes everything below possible.

   One box per line, hugging its own text, so a two-line cue looks deliberate rather than like a
   paragraph with a rectangle behind it. */
#se-library-root .lb-caps{
  position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%);
  width: min(92%, 46em); display: flex; flex-direction: column; align-items: center; gap: .3em;
  pointer-events: none; z-index: 6; text-align: center;
}
#se-library-root .lb-caps span{
  display: inline-block;
  /* the padding he asked for, in em so it tracks the type size at every breakpoint and fullscreen */
  padding: .28em .62em;
  border-radius: .28em;
  /* not solid black: enough to stay legible over a bright frame, soft enough to sit on the picture */
  background: rgba(16, 15, 14, .78);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  color: #fff;
  font-family: var(--sans, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
  font-size: clamp(15px, 2.05vw, 23px);
  font-weight: 600; line-height: 1.34; letter-spacing: .003em;
  text-wrap: balance;
  /* a hairline of shadow so a white word on a white robe still reads if the blur is unsupported */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
/* Fullscreen is a cinema, not a card: the same rules, one size up. */
#se-library-root .lb-player:fullscreen .lb-caps span{ font-size: clamp(20px, 2.5vw, 34px); }
#se-library-root .lb-player:fullscreen .lb-caps{ bottom: 7%; }
@media (max-width: 620px){
  #se-library-root .lb-caps{ width: 94%; bottom: 6%; }
  #se-library-root .lb-caps span{ font-size: 15px; padding: .26em .55em; }
}

/* The chosen still, drawn over our own <video> until playback starts. The element underneath is free to
   seek to a resume position and fill its buffer - which is what makes the press instant - without the
   member watching the picture change to frame 22:58. Below the veil, so the play button and the spinner
   still sit on top of it. */
#se-library-root .lb-vposter{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; border: 0; pointer-events: none;
  /* NO z-index on purpose. `.lb-veil` carries the play button and has none either, so both stack by DOM
     order and the veil - which comes after this - paints on top. Giving this a z-index put the still
     over the play button, which is a picture nobody can press. */
}

/* A section heading inside a course's session list, for a course that was taught in parts. Quiet on
   purpose: it is a divider telling you where the second part begins, not a title competing with the
   sessions under it. First one has no top margin, or the list opens with a gap. */
#se-library-root .lb-sess-head{
  font-size: 12.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-mute, #9a917f);
  margin: 22px 0 8px; padding-bottom: 7px;
  border-bottom: 1px solid var(--border-soft, #efe9df);
}
#se-library-root .lb-list > .lb-sess-head:first-child{ margin-top: 0; }

/* The bundle offer on a module page. An offer, so it is allowed to be warm, but it sits above a list of
   sibling modules and must not shout over them: the accent is the tint and the button, not the whole box. */
#se-library-root .lb-bundle{
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 13px 16px;
  background: var(--orange-tint, #faead9);
  border: 1px solid color-mix(in srgb, var(--orange, #c46a26) 22%, transparent);
  border-radius: 12px;
  font-size: 14px; line-height: 1.45;
}
#se-library-root .lb-bundle b{ font-weight: 800; color: var(--ink, #312e2a); }
#se-library-root .lb-bundle span{ color: var(--ink-soft, #635c51); }
@media (max-width: 560px){ #se-library-root .lb-bundle{ flex-direction: column; align-items: flex-start; } }

/* ===== scoped from 10-scoped.css ===== */

/* ===== scoped from library.css ===== */
/* Samadhi Practice Library — screen styles. Inherits the events / booking /
   supporters / donations language verbatim: Mulish, orange #c46a26, cream
   surfaces, 22px radii, pill buttons. Prefix .lb-. */

#se-library-root .lb{--orange:#c46a26;--orange-dark:#a2551d;--orange-tint:#fbeee0;--cream:#faf8f4;--cream-deep:#f0eee9;--border:#e3e0d8;--border-soft:#eeece6;--ink:#33312e;--ink-soft:#615c53;--ink-faint:#948d80;--paper:#fff;--leaf:oklch(0.52 0.09 152);--leaf-tint:oklch(0.95 0.03 152);--shadow:0 1px 2px rgba(51,49,46,.04),0 8px 24px -12px rgba(51,49,46,.14);color:var(--ink);}
#se-library-root .lb *{box-sizing:border-box;}

/* ── generic bits ── */
#se-library-root .lb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:999px;padding:13px 22px;font-weight:800;font-size:15px;cursor:pointer;min-height:48px;font-family:inherit;transition:transform .1s,background .12s,border-color .12s,color .12s;text-decoration:none;white-space:nowrap;}
#se-library-root .lb-btn.accent{background:var(--orange);color:#fff;box-shadow:0 8px 20px -6px rgba(196,106,38,.5);}
#se-library-root .lb-btn.accent:hover{background:var(--orange-dark);transform:translateY(-1px);}
#se-library-root .lb-btn.dark{background:var(--ink);color:#fff;}
#se-library-root .lb-btn.dark:hover{background:#221f1c;}
#se-library-root .lb-btn.ghost{background:var(--paper);color:var(--ink);border:1.5px solid var(--border);}
#se-library-root .lb-btn.ghost:hover{border-color:var(--ink-faint);}
#se-library-root .lb-btn.sm{min-height:40px;padding:9px 16px;font-size:13.5px;}
#se-library-root .lb-btn.block{width:100%;}
#se-library-root .lb-btn:disabled{opacity:.5;cursor:not-allowed;}
#se-library-root .lb-link{background:none;border:none;padding:0;font-family:inherit;font-weight:800;font-size:14px;color:var(--orange-dark);cursor:pointer;text-align:left;}
#se-library-root .lb-link:hover{color:var(--orange);text-decoration:underline;}

#se-library-root .lb-eyebrow{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--orange-dark);}
#se-library-root .lb-h1{font-size:36px;font-weight:900;letter-spacing:-.02em;line-height:1.08;margin:0;}
#se-library-root .lb-h2{font-size:22px;font-weight:900;letter-spacing:-.018em;margin:0;}
#se-library-root .lb-h3{font-size:16px;font-weight:900;letter-spacing:-.01em;margin:0;}
#se-library-root .lb-lede{font-size:17px;line-height:1.6;color:var(--ink-soft);font-weight:500;}
#se-library-root .lb-muted{color:var(--ink-soft);font-size:14.5px;line-height:1.6;}
#se-library-root .lb-sep{height:1px;background:var(--border);border:0;margin:32px 0;}

#se-library-root .lb-tag{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;background:var(--cream-deep);color:var(--ink-soft);border:1px solid var(--border-soft);white-space:nowrap;}
#se-library-root .lb-tag.tech{background:var(--orange-tint);color:var(--orange-dark);border-color:#f2ddc4;}
#se-library-root .lb-tag.subj{background:var(--leaf-tint);color:var(--leaf);border-color:oklch(0.9 0.04 152);}
#se-library-root .lb-tag.inc{background:var(--leaf-tint);color:var(--leaf);border-color:oklch(0.9 0.04 152);font-size:10px;padding:3px 8px;gap:4px;}
#se-library-root .lb-tag.new{background:var(--ink);color:#fff;border-color:var(--ink);letter-spacing:.06em;text-transform:uppercase;font-size:10.5px;}
#se-library-root .lb-tag.lock{background:#fff;color:var(--ink-soft);}
#se-library-root .lb-tags{display:flex;flex-wrap:wrap;gap:7px;}

/* ── media placeholder (same idiom as the event/lesson pages) ── */
#se-library-root .lb-thumb{position:relative;background:repeating-linear-gradient(135deg,var(--cream-deep) 0 12px,var(--cream) 12px 24px);border-bottom:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center;overflow:hidden;}
#se-library-root .lb-thumb .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;color:var(--ink-faint);font-weight:700;letter-spacing:.02em;text-align:center;padding:0 10px;}
#se-library-root .lb-thumb .play{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.94);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;padding-left:3px;box-shadow:0 6px 18px -8px rgba(51,49,46,.5);}
#se-library-root .lb-thumb .dur{position:absolute;right:8px;bottom:8px;background:rgba(51,49,46,.86);color:#fff;font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;}
#se-library-root .lb-thumb .bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(51,49,46,.12);}
#se-library-root .lb-thumb .bar i{display:block;height:100%;background:var(--orange);}

/* ── item card ── */
/* .lb-card is an <a> so that cards can be right-clicked, middle-clicked and copied. Anchors bring
   their own colour and underline, and the scoped reset only covers <button>, so both are cleared
   here rather than per card. */
#se-library-root a.lb-card{color:inherit;text-decoration:none;}
/* A session row is an <a> now (it was a <button>, so it could not be opened in a new tab and
   had no url to copy). Same treatment the cards and the prev/next links already get, or the root
   anchor rule tints every session title orange. */
#se-library-root a.lb-sess{color:inherit;text-decoration:none;}
#se-library-root .lb-card{display:flex;flex-direction:column;background:var(--paper);border:1.5px solid var(--border);border-radius:20px;overflow:hidden;text-align:left;cursor:pointer;font-family:inherit;padding:0;transition:transform .12s,box-shadow .12s,border-color .12s;}
#se-library-root .lb-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--ink-faint);}
#se-library-root .lb-card .lb-thumb{aspect-ratio:16/10;}
#se-library-root .lb-card .body{padding:14px 15px 15px;display:flex;flex-direction:column;gap:7px;flex:1;}
#se-library-root .lb-card .kind{display:flex;align-items:center;gap:7px;flex-wrap:wrap;row-gap:5px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);}
#se-library-root .lb-card .t{font-size:15.5px;font-weight:800;line-height:1.3;letter-spacing:-.01em;color:var(--ink);}
#se-library-root .lb-card .who{font-size:13px;color:var(--ink-soft);font-weight:600;margin-top:auto;display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;}
#se-library-root .lb-card .who .nw{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
#se-library-root .lb-card .who .nw+.nw::before, #se-library-root .lb-card .who span:not(.nw)+.nw::before{content:'';width:3px;height:3px;border-radius:50%;background:var(--ink-faint);display:inline-block;}
#se-library-root .lb-card.row{flex-direction:row;align-items:stretch;}
#se-library-root .lb-card.row .lb-thumb{width:150px;flex:none;aspect-ratio:auto;border-bottom:none;border-right:1px solid var(--border-soft);}
#se-library-root .lb-card.row .body{padding:14px 16px;}
#se-library-root .lb-card .fav{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.94);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;}
#se-library-root .lb-card .fav.on{color:var(--orange);}

#se-library-root .lb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;}
#se-library-root .lb-grid.two{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
#se-library-root .lb-mob .lb-grid{grid-template-columns:1fr 1fr;gap:12px;}
#se-library-root .lb-mob .lb-grid.two{grid-template-columns:1fr;}

/* ── rails ── */
#se-library-root .lb-rail{margin-bottom:38px;}
#se-library-root .lb-rail-head{display:flex;align-items:baseline;gap:14px;margin-bottom:14px;flex-wrap:wrap;}
#se-library-root .lb-mob .lb-seg{flex-wrap:wrap;}
#se-library-root .lb-mob .lb-rail-head .lb-seg{margin-left:0;}
#se-library-root .lb-rail-head .lb-h2{font-size:20px;}
#se-library-root .lb-rail-head .sub{font-size:13.5px;color:var(--ink-faint);font-weight:600;}
#se-library-root .lb-rail-head .more{margin-left:auto;}
#se-library-root .lb-scroller{display:flex;gap:16px;overflow-x:auto;padding:4px 24px 14px 0;margin:0 -24px 0 0;scroll-snap-type:x mandatory;scrollbar-width:thin;}
#se-library-root .lb-mob .lb-scroller{padding-right:16px;margin-right:-16px;}
#se-library-root .lb-scroller>*{scroll-snap-align:start;flex:0 0 246px;}
#se-library-root .lb-mob .lb-scroller>*{flex:0 0 200px;}

/* ── search + filters ── */
#se-library-root .lb-search{display:flex;gap:10px;align-items:center;background:var(--paper);border:1.5px solid var(--border);border-radius:999px;padding:5px 6px 5px 18px;transition:border-color .12s;}
#se-library-root .lb-search:focus-within{border-color:var(--orange);}
#se-library-root .lb-search input{flex:1;border:none;background:none;font-family:inherit;font-size:16px;font-weight:600;color:var(--ink);padding:12px 0;min-width:0;}
#se-library-root .lb-search input:focus{outline:none;}
#se-library-root .lb-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;align-items:center;}
#se-library-root .lb-chip{border:1.5px solid var(--border);background:var(--paper);border-radius:999px;padding:8px 14px;font-family:inherit;font-size:13px;font-weight:800;color:var(--ink-soft);cursor:pointer;display:inline-flex;align-items:center;gap:7px;}
#se-library-root .lb-chip:hover{border-color:var(--ink-faint);}
#se-library-root .lb-chip.on{background:var(--ink);border-color:var(--ink);color:#fff;}
#se-library-root .lb-chip.on.warm{background:var(--orange);border-color:var(--orange);}
#se-library-root .lb-facet{margin-bottom:16px;}
#se-library-root .lb-facet .lbl{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px;}
#se-library-root .lb-sortbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:22px 0 18px;}
#se-library-root .lb-sortbar .count{font-size:14px;font-weight:800;color:var(--ink-soft);margin-right:auto;}
#se-library-root .lb-sortgroup{display:flex;align-items:center;gap:10px;min-width:0;}
#se-library-root .lb-seg{display:inline-flex;background:var(--cream-deep);border-radius:999px;padding:4px;gap:2px;}
#se-library-root .lb-seg button{border:none;background:none;font-family:inherit;font-size:12.5px;font-weight:800;color:var(--ink-soft);padding:7px 13px;border-radius:999px;cursor:pointer;white-space:nowrap;}
#se-library-root .lb-seg button.on{background:var(--paper);color:var(--ink);box-shadow:0 2px 6px rgba(51,49,46,.12);}
/* ITEM 8 (2026-08-23): the browse sortbar's pills as a single scrolling row on mobile, rather
   than .lb-mob .lb-seg's normal flex-wrap turning 4-5 pills into a two-row blob inside the pill's
   own rounded background. Scoped to .lb-sortbar so screen-courses.jsx's own (always short) .lb-seg
   and the home rail-head's are untouched - this is the browse sort control only. */
#se-library-root .lb-mob .lb-sortbar{flex-direction:column;align-items:stretch;gap:8px;}
#se-library-root .lb-mob .lb-sortbar .count{margin-right:0;}
#se-library-root .lb-mob .lb-sortgroup{width:100%;}
#se-library-root .lb-mob .lb-sortbar .lb-seg{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex:1;min-width:0;}
#se-library-root .lb-mob .lb-sortbar .lb-seg::-webkit-scrollbar{display:none;}
#se-library-root .lb-mob .lb-sortbar .lb-seg button{flex:0 0 auto;}

/* ── browse-by tiles ── */
/* ZONE 1 - the doors, and the quick bar under them. Intent, not taxonomy: the whole page was rails
   of catalogue and there was no way to say "I have twenty minutes" without opening the Filters panel.
   Same tile grammar as .lb-tile deliberately, one step warmer, because these are the first thing on
   the page and everything below them is quieter. */
#se-library-root .lb-doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:18px 0 0;}
#se-library-root .lb-door{background:var(--cream);border:1.5px solid var(--border);border-radius:16px;padding:16px 16px 14px;text-align:left;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;gap:5px;transition:border-color .12s,background .12s,transform .12s;}
#se-library-root .lb-door:hover{border-color:var(--orange);background:var(--orange-tint);transform:translateY(-2px);}
#se-library-root .lb-door:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
#se-library-root .lb-door .ic{color:var(--orange);display:flex;margin-bottom:2px;}
#se-library-root .lb-door .t{font-weight:800;font-size:15px;color:var(--ink);line-height:1.25;}
#se-library-root .lb-door .n{font-size:12.5px;color:var(--ink-faint);font-weight:700;}
#se-library-root .lb-quick{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:16px 0 0;}
#se-library-root .lb-quick .lbl{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);}
#se-library-root .lb-quick .sep{width:1px;align-self:stretch;background:var(--border);margin:2px 5px;}
#se-library-root .lb-quick .lb-chip{padding:6px 12px;font-size:12.5px;}
#se-library-root .lb-mob .lb-quick .sep{display:none;}
#se-library-root .lb-mob .lb-doors{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;}
/* On a phone the doors fall into two columns, so an odd count leaves the last one beside a hole.
   The last door takes the full row instead. */
#se-library-root .lb-mob .lb-doors>:last-child:nth-child(odd){grid-column:1/-1;}
/* And the quick bar wrapped mid-group, so "FORMAT" landed halfway along a line between a duration
   chip and a format chip and read as though it labelled the wrong one. The separator is hidden on a
   phone, so the second label starts its own row instead. Selected off .sep rather than by position,
   because counting nth-of-type across mixed spans is the kind of selector that breaks on the next
   edit to the markup. */
#se-library-root .lb-mob .lb-quick .sep+.lbl{flex-basis:100%;margin-top:2px;}
#se-library-root .lb-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px;}
#se-library-root .lb-tile{background:var(--paper);border:1.5px solid var(--border);border-radius:16px;padding:15px 16px;text-align:left;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;gap:3px;transition:border-color .12s,transform .12s;}
#se-library-root .lb-tile:hover{border-color:var(--orange);transform:translateY(-2px);}
#se-library-root .lb-tile .t{font-weight:800;font-size:14.5px;color:var(--ink);}
#se-library-root .lb-tile .n{font-size:12.5px;color:var(--ink-faint);font-weight:700;}

/* ── avatars ── */
#se-library-root .lb-av{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;flex:none;letter-spacing:-.02em;}
#se-library-root .lb-av.ring{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--orange);}

/* ── player ── */
#se-library-root .lb-player{background:var(--ink);border-radius:22px;overflow:hidden;box-shadow:0 24px 60px -30px rgba(51,49,46,.6);}
#se-library-root .lb-stage{position:relative;aspect-ratio:16/9;background:repeating-linear-gradient(135deg,#3b3936 0 14px,#333130 14px 28px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;}
#se-library-root .lb-stage.audio{aspect-ratio:16/6;background:repeating-linear-gradient(135deg,#3b3936 0 14px,#333130 14px 28px);}
#se-library-root .lb-stage .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:#9a938a;font-weight:700;text-align:center;padding:0 16px;}
/* No padding-left. It was 5px to compensate for the play triangle sitting right of centre inside its
   own 24x24 box (the path spans x=6 to 20), which centred the triangle and then pushed the PAUSE
   glyph visibly off to one side - David: "middle play icon is slightly off to the side and doesn't
   display in the middle of the orange circle at times". The nudge belongs to the triangle alone, so
   it is on `.is-play`, and it is 2px rather than 5: a triangle's optical centre sits left of its
   bounding box's centre, so it wants less than the geometry suggests. */
#se-library-root .lb-bigplay{width:76px;height:76px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;box-shadow:0 14px 34px -12px rgba(196,106,38,.9);}
#se-library-root .lb-bigplay.is-play svg{transform:translateX(2px);}
#se-library-root .lb-bigplay.loading{cursor:default;background:var(--orange-dark);}
#se-library-root .lb-bigplay[disabled]{opacity:1;}
/* The wait, drawn where the triangle was: the press is acknowledged at once, and there is exactly one
   spinner - ours - because the veil is still covering the platform's own. */
#se-library-root .lb-bigspin{
  width:30px;height:30px;border-radius:50%;border:3px solid rgba(255,255,255,.35);
  border-top-color:#fff;animation:lb-spin .8s linear infinite;}
#se-library-root .lb-smallspin{
  width:15px;height:15px;border-radius:50%;border:2px solid rgba(233,227,216,.35);
  border-top-color:#e9e3d8;animation:lb-spin .8s linear infinite;}
@media (prefers-reduced-motion:reduce){
  #se-library-root .lb-bigspin, #se-library-root .lb-smallspin{animation-duration:2.4s;}
}
#se-library-root .lb-bigplay:hover{background:var(--orange-dark);}
#se-library-root .lb-wave{display:flex;align-items:flex-end;gap:3px;height:44px;}
#se-library-root .lb-wave i{width:4px;background:#55504a;border-radius:2px;}
#se-library-root .lb-wave i.on{background:var(--orange);}
/* Over a photograph the dark bar colour disappears into it, so on an artwork stage the unplayed bars
   are white at half strength with a shadow behind them instead. */
#se-library-root .lb-astage.has-art .lb-wave i{
  background:rgba(255,255,255,.52);box-shadow:0 1px 6px rgba(0,0,0,.45);}
#se-library-root .lb-astage.has-art .lb-wave i.on{background:var(--orange);}
#se-library-root .lb-controls{display:flex;align-items:center;gap:14px;padding:13px 16px;background:#2b2926;color:#e9e3d8;flex-wrap:wrap;}
#se-library-root .lb-controls .time{font-size:12.5px;font-weight:800;color:#b6ada0;font-variant-numeric:tabular-nums;}
#se-library-root .lb-scrub{flex:1;height:6px;border-radius:3px;background:#4a4640;position:relative;cursor:pointer;min-width:120px;}
/* Three layers now, back to front: what has loaded, what has played, and the handle. The buffer layer
   is the one an iframe could never give us, and its absence is most of what "no indication" meant. */
#se-library-root .lb-scrub u{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:rgba(255,255,255,.26);text-decoration:none;}
#se-library-root .lb-scrub i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--orange);}
#se-library-root .lb-scrub b{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 2px 6px rgba(0,0,0,.5);}
#se-library-root .lb-fmt{display:inline-flex;background:#413d38;border-radius:999px;padding:3px;gap:2px;}
#se-library-root .lb-fmt button{border:none;background:none;color:#c9c1b5;font-family:inherit;font-size:12px;font-weight:800;padding:7px 13px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
#se-library-root .lb-fmt button.on{background:#faf8f4;color:#33312e;}
#se-library-root .lb-resumebar{background:var(--orange-tint);color:var(--orange-dark);font-size:13px;font-weight:800;padding:10px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
#se-library-root .lb-resumebar button{margin-left:auto;}
#se-library-root .lb-donebar{background:var(--leaf-tint);color:var(--leaf);font-size:13px;font-weight:800;padding:10px 16px;display:flex;align-items:center;gap:9px;}

/* ── item page furniture ── */
#se-library-root .lb-panel{background:var(--paper);border:1.5px solid var(--border);border-radius:20px;padding:20px 22px;}
#se-library-root .lb-panel.cream{background:var(--cream);border-color:var(--border-soft);}
#se-library-root .lb-panel+.lb-panel{margin-top:16px;}
#se-library-root .lb-collapse summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;font-weight:900;font-size:15px;}
#se-library-root .lb-collapse summary::-webkit-details-marker{display:none;}
#se-library-root .lb-collapse summary .chev{margin-left:auto;transition:transform .16s;}
#se-library-root .lb-collapse[open] summary .chev{transform:rotate(180deg);}
#se-library-root .lb-collapse .inner{margin-top:14px;font-size:14.5px;line-height:1.75;color:var(--ink-soft);max-height:230px;overflow:auto;padding-right:6px;}
#se-library-root .lb-res{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--border);border-radius:14px;background:var(--paper);font-weight:800;font-size:14px;cursor:pointer;font-family:inherit;width:100%;text-align:left;}
/* A flex row whose children have no min-width cannot shrink below their content, so a long teaching
   title pushed straight out through the side of the Related panel. Let the children shrink and let
   the words wrap. `.stack` is the two-line variant (title above teacher and duration): stretch, not
   flex-start, or each line sizes to its own text and overflows again. */
/* Spotify's embed is a fixed-height player, not a 16:9 stage, so the aspect-ratio rules that suit a
   video would leave it in a tall black box. */
#se-library-root .lb-stage.audio.lb-spotify{aspect-ratio:auto;height:auto;min-height:0;background:none;padding:0;border:0;display:block;}
#se-library-root .lb-spotify iframe{display:block;width:100%;border:0;border-radius:12px;}
#se-library-root .lb-res{min-width:0;}
#se-library-root .lb-res > *{min-width:0;max-width:100%;overflow-wrap:anywhere;}
#se-library-root .lb-res.stack{flex-direction:column;align-items:stretch;gap:3px;}
#se-library-root .lb-res:hover{border-color:var(--orange);}
#se-library-root .lb-list{display:flex;flex-direction:column;gap:10px;}
#se-library-root .lb-crossref{display:flex;gap:14px;align-items:center;background:var(--cream);border:1.5px dashed var(--border);border-radius:18px;padding:14px 16px;cursor:pointer;font-family:inherit;text-align:left;width:100%;}
#se-library-root .lb-crossref:hover{border-color:var(--orange);border-style:solid;}
#se-library-root .lb-crossref .lb-thumb{width:76px;height:52px;border-radius:10px;border:1px solid var(--border-soft);flex:none;}
#se-library-root .lb-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
#se-library-root .lb-mob .lb-prevnext{grid-template-columns:1fr;}
#se-library-root .lb-pn{border:1.5px solid var(--border);border-radius:18px;padding:14px 18px;background:var(--paper);cursor:pointer;font-family:inherit;text-align:left;display:flex;flex-direction:column;gap:3px;}
#se-library-root .lb-pn:hover{border-color:var(--orange);}
#se-library-root .lb-pn span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);}
#se-library-root .lb-pn b{font-size:14.5px;font-weight:800;line-height:1.35;}
#se-library-root .lb-pn.next{text-align:right;align-items:flex-end;}
#se-library-root .lb-pn:disabled{opacity:.45;cursor:default;}

/* ── gates ── */
#se-library-root .lb-gate{background:linear-gradient(135deg,var(--orange-tint) 0%,#fffdf9 74%);border:1.5px solid #f0dcc2;border-radius:22px;padding:24px 26px;display:flex;gap:18px;align-items:flex-start;}
#se-library-root .lb-gate .ic{width:46px;height:46px;border-radius:50%;background:var(--paper);border:1px solid #f0dcc2;display:flex;align-items:center;justify-content:center;flex:none;color:var(--orange-dark);}
#se-library-root .lb-gate h3{font-size:17px;font-weight:900;margin:0 0 6px;}
#se-library-root .lb-gate p{font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin:0 0 14px;max-width:56ch;}
#se-library-root .lb-gate .acts{display:flex;gap:10px;flex-wrap:wrap;}
#se-library-root .lb-mob .lb-gate{flex-direction:column;}

/* ── discussion ── */
#se-library-root .lb-post{border-top:1px solid var(--border-soft);padding:20px 0;}
#se-library-root .lb-post:first-of-type{border-top:none;}
#se-library-root .lb-post-head{display:flex;gap:12px;align-items:center;margin-bottom:10px;}
#se-library-root .lb-post-head .nm{font-weight:900;font-size:14.5px;}
#se-library-root .lb-post-head .mt{font-size:12.5px;color:var(--ink-faint);font-weight:700;}
#se-library-root .lb-post-body{font-size:15px;line-height:1.65;color:var(--ink);}
#se-library-root .lb-post-img{margin-top:12px;height:170px;border-radius:14px;background:repeating-linear-gradient(135deg,var(--cream-deep) 0 12px,var(--cream) 12px 24px);border:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center;}
#se-library-root .lb-post-img .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--ink-faint);font-weight:700;}
#se-library-root .lb-attached{margin-top:12px;display:flex;gap:12px;align-items:center;border:1.5px solid var(--border);border-radius:14px;padding:10px 12px;background:var(--cream);cursor:pointer;font-family:inherit;text-align:left;width:100%;}
#se-library-root .lb-attached:hover{border-color:var(--orange);}
#se-library-root .lb-attached .lb-thumb{width:62px;height:42px;border-radius:9px;flex:none;border:1px solid var(--border-soft);}
#se-library-root .lb-attached .t{font-weight:800;font-size:13.5px;line-height:1.3;}
#se-library-root .lb-attached .s{font-size:12px;color:var(--ink-faint);font-weight:700;margin-top:2px;}
#se-library-root .lb-react{display:flex;gap:8px;margin-top:12px;align-items:center;flex-wrap:wrap;}
#se-library-root .lb-react button{border:1.5px solid var(--border);background:var(--paper);border-radius:999px;padding:6px 12px;font-family:inherit;font-size:12.5px;font-weight:800;color:var(--ink-soft);cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
#se-library-root .lb-react button:hover{border-color:var(--ink-faint);}
#se-library-root .lb-react button.on{border-color:var(--orange);background:var(--orange-tint);color:var(--orange-dark);}
#se-library-root .lb-replies{margin:14px 0 0 30px;padding-left:16px;border-left:2px solid var(--border-soft);display:flex;flex-direction:column;gap:14px;}
#se-library-root .lb-reply .lb-post-head{margin-bottom:6px;}
#se-library-root .lb-reply .lb-post-body{font-size:14px;color:var(--ink-soft);}
#se-library-root .lb-badge-t{background:var(--orange-tint);color:var(--orange-dark);border-radius:999px;padding:2px 8px;font-size:10.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;}
#se-library-root .lb-badge-n{background:var(--leaf-tint);color:var(--leaf);border-radius:999px;padding:2px 8px;font-size:10.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;}
#se-library-root .lb-seed{background:var(--cream);border:1.5px solid var(--border-soft);border-radius:18px;padding:18px 20px;display:flex;gap:14px;align-items:flex-start;}
#se-library-root .lb-seed .q{font-size:15.5px;line-height:1.6;font-weight:600;color:var(--ink);font-style:italic;}
#se-library-root .lb-composer{border:1.5px solid var(--border);border-radius:18px;background:var(--paper);padding:14px;}
#se-library-root .lb-composer textarea{width:100%;border:none;resize:vertical;min-height:78px;font-family:inherit;font-size:16px;line-height:1.6;color:var(--ink);background:none;}
#se-library-root .lb-composer textarea:focus{outline:none;}
#se-library-root .lb-composer-foot{display:flex;gap:10px;align-items:center;margin-top:10px;padding-top:12px;border-top:1px solid var(--border-soft);flex-wrap:wrap;}
#se-library-root .lb-composer-foot .sp{margin-left:auto;}
#se-library-root .lb-iconbtn{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--border);background:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-soft);}
#se-library-root .lb-iconbtn:hover{border-color:var(--orange);color:var(--orange-dark);}
#se-library-root .lb-iconbtn.on{border-color:var(--orange);background:var(--orange-tint);color:var(--orange-dark);}

/* ── course page ── */
#se-library-root .lb-hero{display:grid;grid-template-columns:1.25fr 1fr;gap:34px;align-items:start;}
#se-library-root .lb-mob .lb-hero{grid-template-columns:1fr;gap:22px;}
#se-library-root .lb-hero-media{aspect-ratio:4/3;border-radius:22px;border:1.5px solid var(--border);}
#se-library-root .lb-hero-mediawrap{position:relative;}
#se-library-root .lb-enrolled{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border:1px solid var(--border);border-radius:999px;padding:5px 13px 5px 7px;box-shadow:0 8px 22px -10px rgba(51,49,46,.5);font-size:12.5px;font-weight:800;color:var(--ink);}
#se-library-root .lb-enrolled .avs{display:flex;}
#se-library-root .lb-enrolled .avs .lb-av+.lb-av{margin-left:-9px;}
#se-library-root .lb-facts{display:flex;gap:20px;flex-wrap:wrap;margin:18px 0;}
#se-library-root .lb-fact .k{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);}
#se-library-root .lb-fact .v{font-size:17px;font-weight:900;letter-spacing:-.01em;margin-top:2px;}
#se-library-root .lb-covers{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;}
#se-library-root .lb-mob .lb-covers{grid-template-columns:1fr;}
#se-library-root .lb-covers li{list-style:none;display:flex;gap:10px;font-size:14.5px;line-height:1.55;color:var(--ink-soft);}
#se-library-root .lb-covers li svg{flex:none;margin-top:3px;color:var(--leaf);}
#se-library-root .lb-sess{display:flex;gap:14px;align-items:center;padding:15px 16px;border:1.5px solid var(--border);border-radius:18px;background:var(--paper);cursor:pointer;font-family:inherit;text-align:left;width:100%;}
#se-library-root .lb-sess:hover{border-color:var(--orange);}
#se-library-root .lb-sess .n{width:34px;height:34px;border-radius:50%;background:var(--cream-deep);color:var(--ink-soft);font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center;flex:none;}
#se-library-root .lb-sess.done .n{background:var(--leaf);color:#fff;}
#se-library-root .lb-sess.current{border-color:var(--orange);background:linear-gradient(135deg,var(--orange-tint) 0%,#fffdf9 70%);}
#se-library-root .lb-sess .t{font-weight:800;font-size:15px;line-height:1.3;}
#se-library-root .lb-sess .s{font-size:12.5px;color:var(--ink-faint);font-weight:700;margin-top:3px;}
#se-library-root .lb-sticky{position:sticky;top:88px;}

/* ── teacher page ── */
#se-library-root .lb-teacher-head{display:flex;gap:26px;align-items:flex-start;}
#se-library-root .lb-mob .lb-teacher-head{flex-direction:column;gap:16px;}
#se-library-root .lb-teacher-photo{width:172px;height:172px;border-radius:22px;flex:none;border:1.5px solid var(--border);}

/* ── home / dashboard ── */
#se-library-root .lb-home{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:34px;align-items:start;}
#se-library-root .lb-mob .lb-home{grid-template-columns:1fr;gap:26px;}
#se-library-root .lb-resume{display:grid;grid-template-columns:250px 1fr;gap:0;background:var(--paper);border:1.5px solid var(--border);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);}
#se-library-root .lb-mob .lb-resume{grid-template-columns:1fr;}
#se-library-root .lb-resume .lb-thumb{aspect-ratio:16/10;border-right:1px solid var(--border-soft);border-bottom:none;}
#se-library-root .lb-mob .lb-resume .lb-thumb{border-right:none;border-bottom:1px solid var(--border-soft);}
#se-library-root .lb-resume .body{padding:20px 22px;display:flex;flex-direction:column;gap:9px;justify-content:center;}
/* THE CONTINUE THUMBNAIL FILLS ITS COLUMN. David, on desktop: "feels like on desktop it's also not the
   full height anymore but it was?" - it was not me, the .lb-resume rules are byte-identical to the
   stylesheet from before the mobile audit, so this has always been so. It is still wrong: at 1280px the
   thumbnail measured 250x156 inside a 182px card, leaving a 24px band of empty card under the picture.
   Why aspect-ratio wins over the grid's stretch: a grid item is stretched only while its size is
   otherwise indefinite, and `aspect-ratio:16/10` against a definite 250px column makes the height
   definite at 156px, so there is nothing left for stretch to do.
   `min-height` rather than `height:100%` on purpose, so ONE rule is right in both layouts: on desktop
   the row is as tall as the text beside it and this stretches the picture to meet it; stacked on a
   phone the row height is auto, a percentage against auto resolves to nothing, and the aspect ratio
   still decides - which is the 16/10 the phone should have. Verified at 1280px and at 390px. */
#se-library-root .lb-resume .lb-thumb{min-height:100%;width:100%;}
/* `width:100%` IS LOAD-BEARING and was missing from the first attempt at this. With only min-height, the
   aspect ratio kept the 16/10 by growing the WIDTH instead: the thumbnail went to 286px inside a 250px
   column, overflowed it by 36px and covered the first line of the eyebrow text beside it - a worse bug
   than the gap it fixed. Measured before spotting it: thumbRight 308 against bodyLeft 272.
   With the width pinned to the column, both axes are constrained: width stays 250px, min-height wins
   over the ratio-derived 156px, and the picture crops rather than pushing anything sideways. */
#se-library-root .lb-week{display:flex;gap:8px;justify-content:space-between;}
#se-library-root .lb-week .d{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;}
#se-library-root .lb-week .dot{width:100%;aspect-ratio:1;max-width:38px;border-radius:12px;background:var(--cream-deep);border:1.5px solid var(--border-soft);}
#se-library-root .lb-week .d.on .dot{background:var(--orange);border-color:var(--orange);box-shadow:0 6px 14px -8px rgba(196,106,38,.8);}
#se-library-root .lb-week .lbl{font-size:11.5px;font-weight:800;color:var(--ink-faint);}
#se-library-root .lb-bar{margin-bottom:12px;}
#se-library-root .lb-bar .top{display:flex;justify-content:space-between;font-size:13.5px;font-weight:800;margin-bottom:5px;}
#se-library-root .lb-bar .top span{color:var(--ink-faint);font-weight:700;}
#se-library-root .lb-bar .track{height:9px;border-radius:5px;background:var(--cream-deep);overflow:hidden;}
#se-library-root .lb-bar .track i{display:block;height:100%;border-radius:5px;background:var(--orange);}
#se-library-root .lb-mile{display:flex;gap:10px;flex-wrap:wrap;}
#se-library-root .lb-mile .m{flex:1;min-width:64px;border:1.5px solid var(--border);border-radius:16px;padding:12px 8px;text-align:center;background:var(--paper);}
#se-library-root .lb-mile .m.earned{border-color:var(--orange);background:var(--orange-tint);}
#se-library-root .lb-mile .m .n{font-size:19px;font-weight:900;letter-spacing:-.02em;color:var(--ink-faint);}
#se-library-root .lb-mile .m.earned .n{color:var(--orange-dark);}
#se-library-root .lb-mile .m .l{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin-top:2px;}
#se-library-root .lb-supbadge{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#f2ede1;border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:800;}
#se-library-root .lb-next{display:flex;gap:12px;align-items:center;padding:14px 16px;border:1.5px solid var(--border);border-radius:16px;background:var(--paper);cursor:pointer;font-family:inherit;text-align:left;width:100%;}
#se-library-root .lb-next:hover{border-color:var(--orange);}
#se-library-root .lb-next .ic{width:38px;height:38px;border-radius:50%;background:var(--orange-tint);color:var(--orange-dark);display:flex;align-items:center;justify-content:center;flex:none;}
#se-library-root .lb-empty{text-align:center;padding:30px 22px;background:var(--cream);border:1.5px dashed var(--border);border-radius:18px;color:var(--ink-soft);font-size:14.5px;line-height:1.6;}
#se-library-root .lb-empty b{display:block;color:var(--ink);font-size:15.5px;margin-bottom:6px;}
#se-library-root .lb-feedcard{background:var(--paper);border:1.5px solid var(--border);border-radius:20px;padding:20px 22px;margin-bottom:14px;}
#se-library-root .lb-feedcard.sys{background:var(--cream);border-color:var(--border-soft);}
#se-library-root .lb-feedmeta{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px;}
#se-library-root .lb-feedmeta .pip{background:var(--orange-tint);color:var(--orange-dark);border-radius:999px;padding:3px 9px;letter-spacing:.05em;}

/* ── library sub-nav (navigation within the library area) ── */
#se-library-root .lb-subnav{background:var(--cream);border-bottom:1px solid var(--border);position:sticky;top:59px;z-index:90;}
#se-library-root .lb-subnav .in{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:18px;min-height:52px;}
#se-library-root .lb-subnav-brand{display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:14px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;}
#se-library-root .lb-subnav-brand svg{color:var(--orange-dark);}
#se-library-root .lb-subnav-tabs{display:flex;gap:4px;align-items:center;overflow-x:auto;scrollbar-width:none;}
#se-library-root .lb-subnav-tabs::-webkit-scrollbar{display:none;}
#se-library-root .lb-subnav-tabs button{border:none;background:none;font-family:inherit;font-size:14px;font-weight:800;color:var(--ink-soft);padding:8px 13px;border-radius:999px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;}
#se-library-root .lb-subnav-tabs button:hover{color:var(--ink);background:var(--cream-deep);}
#se-library-root .lb-subnav-tabs button.on{color:var(--orange-dark);background:var(--orange-tint);}
#se-library-root .lb-subnav-search{margin-left:auto;display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--border);background:var(--paper);border-radius:999px;padding:8px 15px;font-family:inherit;font-size:13.5px;font-weight:800;color:var(--ink-soft);cursor:pointer;white-space:nowrap;}
#se-library-root .lb-subnav-search:hover{border-color:var(--orange);color:var(--orange-dark);}
#se-library-root .lb-subnav-cta{margin-left:auto;display:inline-flex;align-items:center;background:var(--orange);color:#fff;border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:800;white-space:nowrap;}
#se-library-root .lb-subnav-cta:hover{background:var(--orange-dark);color:#fff;}
#se-library-root .lb-subnav-cta.account{margin-left:auto;background:var(--paper);color:var(--ink);border:1.5px solid var(--border);gap:7px;}
#se-library-root .lb-subnav-cta.account:hover{background:var(--cream);color:var(--ink);border-color:var(--ink-faint);}
#se-library-root .lb-subnav-right{margin-left:auto;display:flex;align-items:center;gap:10px;}
#se-library-root .lb-subnav-right .lb-subnav-cta.account{margin-left:0;}
#se-library-root .lb-notif-wrap{position:relative;display:flex;}
#se-library-root .lb-notif-btn{position:relative;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--border);background:var(--paper);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;cursor:pointer;}
#se-library-root .lb-notif-btn:hover{border-color:var(--ink-faint);color:var(--ink);}
#se-library-root .lb-notif-dot{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--orange);color:#fff;font-size:10.5px;font-weight:900;display:flex;align-items:center;justify-content:center;border:2px solid var(--cream);}
#se-library-root .lb-notif-scrim{position:fixed;inset:0;z-index:120;border:none;background:transparent;cursor:default;}
#se-library-root .lb-notif-panel{position:absolute;top:calc(100% + 10px);right:0;width:340px;max-width:86vw;background:var(--paper);border:1.5px solid var(--border);border-radius:18px;box-shadow:0 20px 44px -20px rgba(51,49,46,.5);z-index:121;overflow:hidden;}
#se-library-root .lb-notif-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 12px;border-bottom:1px solid var(--border-soft);font-size:14.5px;}
#se-library-root .lb-notif-top button{border:none;background:none;font-family:inherit;font-size:12.5px;font-weight:800;color:var(--orange-dark);cursor:pointer;}
#se-library-root .lb-notif-list{max-height:min(70vh,420px);overflow-y:auto;}
#se-library-root .lb-notif-item{width:100%;display:flex;gap:12px;align-items:flex-start;text-align:left;padding:13px 16px;border:none;border-bottom:1px solid var(--border-soft);background:none;font-family:inherit;cursor:pointer;position:relative;}
#se-library-root .lb-notif-item:last-child{border-bottom:none;}
#se-library-root .lb-notif-item:hover{background:var(--cream);}
#se-library-root .lb-notif-item.unread{background:var(--orange-tint);}
#se-library-root .lb-notif-item.unread:hover{background:#f8e6d2;}
#se-library-root .lb-notif-item .ic{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--cream-deep);color:var(--ink-soft);}
#se-library-root .lb-notif-item .ic.like{background:var(--orange-tint);color:var(--orange-dark);}
#se-library-root .lb-notif-item .ic.announce{background:var(--ink);color:#f2ede1;}
#se-library-root .lb-notif-item .bd{display:flex;flex-direction:column;gap:3px;flex:1;}
#se-library-root .lb-notif-item .tx{font-size:13.5px;line-height:1.45;font-weight:600;color:var(--ink);}
#se-library-root .lb-notif-item .ag{font-size:11.5px;font-weight:700;color:var(--ink-faint);}
#se-library-root .lb-notif-item .udot{width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none;margin-top:6px;}
#se-library-root .lb-announce{background:var(--cream);border:1.5px solid var(--border-soft);border-radius:16px;padding:16px 18px;margin:-4px;}
#se-library-root .lb-announce-head{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--orange-dark);margin-bottom:9px;}
#se-library-root .lb-announce-head svg{color:var(--orange-dark);}
#se-library-root .lb-announce-head .dot{color:var(--ink-faint);}
#se-library-root .lb-announce h3{font-size:17px;font-weight:900;letter-spacing:-.015em;line-height:1.3;color:var(--ink);}
#se-library-root .lb-announce p{font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin-top:6px;}
#se-library-root .lb-announce-link{margin-top:12px;display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--border);background:var(--paper);border-radius:999px;padding:8px 15px;font-family:inherit;font-size:13px;font-weight:800;color:var(--ink);cursor:pointer;}
#se-library-root .lb-announce-link:hover{border-color:var(--orange);color:var(--orange-dark);}
#se-library-root .lb-notif-dot.tab{top:2px;right:calc(50% - 22px);border-color:var(--paper);}
#se-library-root .lb-notif-sheet{position:fixed;left:0;right:0;bottom:0;margin:0 auto;max-width:430px;z-index:151;background:var(--paper);border-top-left-radius:20px;border-top-right-radius:20px;box-shadow:0 -14px 40px -18px rgba(51,49,46,.5);max-height:72vh;overflow:hidden;display:flex;flex-direction:column;padding-bottom:76px;}
#se-library-root .lb-notif-sheet .lb-notif-top{padding:16px 18px 13px;font-size:15.5px;}
#se-library-root .lb-notif-sheet .lb-notif-list{max-height:none;overflow-y:auto;}
#se-library-root .lb-tab-link{flex:1;border:none;background:none;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;color:var(--ink-faint);cursor:pointer;border-radius:12px;min-width:0;text-decoration:none;line-height:normal;letter-spacing:normal;}
#se-library-root .lb-tab-link span{font-size:10.5px;font-weight:800;letter-spacing:.01em;}
#se-library-root .lb-tab-link:hover{color:var(--ink-soft);}
#se-library-root .frame.mobile .lb-subnav-brand{display:none;}
#se-library-root .frame.mobile .lb-subnav{display:none;}
#se-library-root .frame.mobile .lb-subnav .in{gap:10px;padding:0 14px;}
#se-library-root .frame.mobile .lb-subnav-search span, #se-library-root .frame.mobile .lb-subnav-cta{font-size:12.5px;padding:7px 12px;}

/* ── mobile bottom tab bar ── */
#se-library-root .lb-tabbar{position:fixed;left:0;right:0;bottom:0;margin:0 auto;max-width:430px;z-index:150;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-top:1px solid var(--border);border-radius:0 0 34px 34px;display:flex;align-items:stretch;padding:8px 6px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px -16px rgba(51,49,46,.4);}
#se-library-root .lb-tabbar button{flex:1;border:none;background:none;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;color:var(--ink-faint);cursor:pointer;border-radius:12px;min-width:0;}
#se-library-root .lb-tabbar button span{font-size:10.5px;font-weight:800;letter-spacing:.01em;}
#se-library-root .lb-tabbar button:hover{color:var(--ink-soft);}
#se-library-root .lb-tabbar button.on{color:var(--orange-dark);}
#se-library-root .lb-tabbar button:disabled{opacity:.32;cursor:default;}
#se-library-root .lb-tabbar-sep{width:1px;align-self:center;height:30px;background:var(--border);margin:0 2px;}
#se-library-root .frame.mobile .site-foot{padding-bottom:0;}
#se-library-root .frame.mobile .page{padding-bottom:104px;}

/* ── programme page ── */
#se-library-root .lb-prog-pill{display:inline-flex;align-items:center;gap:6px;background:var(--orange-tint);color:var(--orange-dark);border:1px solid #f2ddc4;border-radius:999px;padding:5px 12px;font-family:inherit;font-size:12px;font-weight:800;cursor:pointer;}
#se-library-root .lb-prog-pill:hover{background:#f8e4cf;}
#se-library-root .lb-mob .lb-prog-layout{grid-template-columns:1fr !important;gap:26px !important;}
#se-library-root .lb-module{display:flex;gap:14px;align-items:center;padding:15px 16px;border:1.5px solid var(--border);border-radius:18px;background:var(--paper);cursor:pointer;font-family:inherit;text-align:left;width:100%;}
#se-library-root .lb-module:not(:disabled):hover{border-color:var(--orange);}
#se-library-root .lb-module .n{width:34px;height:34px;border-radius:50%;background:var(--cream-deep);color:var(--ink-soft);font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center;flex:none;}
#se-library-root .lb-module.done .n{background:var(--leaf);color:#fff;}
#se-library-root .lb-module .t{font-weight:800;font-size:15px;line-height:1.3;}
#se-library-root .lb-module .s{font-size:12.5px;color:var(--ink-faint);font-weight:700;margin-top:3px;}
#se-library-root .lb-module.soon{background:var(--cream);border-style:dashed;cursor:default;}
#se-library-root .lb-module.soon .t{color:var(--ink-soft);}
#se-library-root .lb-module-tag{flex:none;border-radius:999px;padding:5px 11px;font-size:11px;font-weight:800;letter-spacing:.03em;background:var(--cream-deep);color:var(--ink-faint);border:1px solid var(--border-soft);white-space:nowrap;}
#se-library-root .lb-module-tag.ok{background:var(--leaf-tint);color:var(--leaf);border-color:oklch(0.9 0.04 152);}
#se-library-root .lb-enrolpill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:800;letter-spacing:.02em;background:var(--cream-deep);color:var(--ink-faint);border:1px solid var(--border-soft);white-space:nowrap;}
#se-library-root .lb-enrolpill.on{background:var(--leaf-tint);color:var(--leaf);border-color:oklch(0.9 0.04 152);}
#se-library-root .lb-prog .upnext{font-size:14px;font-weight:800;color:var(--ink);margin-bottom:8px;}
#se-library-root .lb-prog .meta{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;font-weight:800;color:var(--ink-soft);margin-bottom:6px;}
#se-library-root .lb-prog .meta .pc{color:var(--orange-dark);}
#se-library-root .lb-prog .bar{height:8px;border-radius:999px;background:var(--cream-deep);overflow:hidden;}
#se-library-root .lb-prog .bar i{display:block;height:100%;border-radius:999px;background:var(--orange);transition:width .4s cubic-bezier(.4,0,.2,1);}
#se-library-root .lb-coursecard-media{position:relative;}
#se-library-root .lb-coursecard-media .lb-thumb{border-radius:0;}
#se-library-root .lb-enrolpill.overlay{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);box-shadow:0 6px 16px -8px rgba(51,49,46,.5);}
#se-library-root .lb-enrolpill.overlay.on{background:var(--leaf-tint);}
#se-library-root .lb-tag.lock.overlay-l{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);}
#se-library-root .lb-lockover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(51,49,46,.06),rgba(51,49,46,.28));}
#se-library-root .lb-lockover .pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-radius:999px;padding:8px 15px;font-size:12.5px;font-weight:800;color:var(--ink);box-shadow:0 8px 20px -10px rgba(51,49,46,.6);}
#se-library-root .lb-lockover .pill svg{color:var(--orange-dark);}

/* ── reviews grid (full width under sessions) ── */
#se-library-root .lb-reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
#se-library-root .lb-mob .lb-reviews-grid{grid-template-columns:1fr;gap:16px;}

/* ── logged-out prompt on item / course / programme ── */
#se-library-root .lb-guestnote{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:var(--cream);border:1.5px solid var(--border-soft);border-radius:16px;padding:14px 18px;margin:-4px 0 24px;color:var(--ink-soft);}
#se-library-root .lb-guestnote>svg{color:var(--orange-dark);flex:none;}
#se-library-root .lb-guestnote p{flex:1;min-width:220px;font-size:14px;font-weight:600;line-height:1.5;margin:0;}
#se-library-root .lb-guestnote .acts{display:flex;gap:8px;flex-wrap:wrap;}

/* ── supporter badge show/hide control ── */
#se-library-root .lb-supbadge-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
#se-library-root .lb-badge-toggle{display:inline-flex;align-items:center;gap:6px;border:none;background:none;font-family:inherit;font-size:11.5px;font-weight:800;color:var(--ink-faint);cursor:pointer;padding:0;}
#se-library-root .lb-badge-toggle:hover{color:var(--orange-dark);}
#se-library-root .lb-badge-n.as-btn{display:inline-flex;align-items:center;gap:4px;border:none;font-family:inherit;cursor:pointer;}
#se-library-root .lb-badge-n.as-btn svg{opacity:.7;}
#se-library-root .lb-badge-n.as-btn:hover svg{opacity:1;}
#se-library-root .lb-badge-n.as-btn.off{background:var(--cream-deep);color:var(--ink-faint);}

/* ── mark-complete button ── */
#se-library-root .lb-btn.done{background:var(--leaf);color:#fff;}
#se-library-root .lb-btn.done:hover{background:oklch(0.46 0.09 152);}

/* ── Buddha's Path hero banner (library) ── */
#se-library-root .lb-bp-hero{width:100%;text-align:left;font-family:inherit;cursor:pointer;border:none;display:flex;align-items:center;gap:24px;background:linear-gradient(115deg,#33312e 0%,#403a34 58%,#4a3d2d 100%);color:#f4efe6;border-radius:24px;padding:30px 34px;margin-bottom:26px;overflow:hidden;position:relative;box-shadow:0 20px 50px -24px rgba(51,49,46,.5);transition:transform .12s,box-shadow .12s;}
#se-library-root .lb-bp-hero:hover{transform:translateY(-2px);box-shadow:0 26px 60px -24px rgba(51,49,46,.6);}
#se-library-root .lb-bp-body{flex:1;min-width:0;position:relative;z-index:1;}
#se-library-root .lb-bp-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--orange);}
#se-library-root .lb-bp-title{font-size:34px;font-weight:900;letter-spacing:-.02em;margin:10px 0;color:#fff;}
#se-library-root .lb-bp-desc{font-size:15.5px;line-height:1.6;color:#d8d0c3;max-width:62ch;margin:0 0 18px;}
#se-library-root .lb-bp-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
#se-library-root .lb-bp-cta{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#fff;border-radius:999px;padding:11px 20px;font-size:14.5px;font-weight:800;}
#se-library-root .lb-bp-hero:hover .lb-bp-cta{background:var(--orange-dark);}
#se-library-root .lb-bp-meta{font-size:13px;font-weight:700;color:#a99f8f;}
#se-library-root .lb-bp-art{flex:none;color:rgba(196,106,38,.4);position:relative;z-index:1;}
#se-library-root .lb-mob .lb-bp-art{display:none;}
#se-library-root .lb-mob .lb-bp-hero{padding:24px 22px;}
#se-library-root .lb-mob .lb-bp-title{font-size:26px;}

/* ── global search modal ── */
#se-library-root .lb-searchmodal{position:fixed;inset:0;z-index:300;background:rgba(30,27,24,.55);backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:flex-start;padding:0 16px;overflow-y:auto;}
#se-library-root .lb-searchpanel{width:100%;max-width:600px;margin:9vh 0 40px;background:var(--paper);border-radius:22px;box-shadow:0 40px 90px -20px rgba(0,0,0,.5);overflow:hidden;font-family:'Mulish',sans-serif;}
#se-library-root .lb-searchbar{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);}
#se-library-root .lb-searchbar input{flex:1;border:none;background:none;font-family:inherit;font-size:18px;font-weight:600;color:var(--ink);min-width:0;}
#se-library-root .lb-searchbar input:focus{outline:none;}
#se-library-root .lb-searchresults{max-height:60vh;overflow-y:auto;padding:8px;}
#se-library-root .lb-search-hint{padding:26px 20px;color:var(--ink-faint);font-size:14.5px;font-weight:600;line-height:1.6;text-align:center;}
#se-library-root .lb-search-count{padding:8px 10px 6px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);}
#se-library-root .lb-searchrow{display:flex;align-items:center;gap:13px;width:100%;text-align:left;font-family:inherit;background:none;border:none;padding:11px 12px;border-radius:14px;cursor:pointer;}
/* The scope note on a filtered page: where you are searching, and the way out. */
#se-library-root .lb-scopenote{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--orange-tint,var(--cream));border:1.5px solid color-mix(in srgb,var(--orange) 24%,transparent);
  border-radius:12px;padding:11px 14px;margin:18px 0 14px;font-size:14px;font-weight:700;color:var(--ink-soft);}
#se-library-root .lb-scopenote b{color:var(--ink);font-weight:800;}
#se-library-root .lb-mob .lb-scopenote{align-items:flex-start;flex-direction:column;gap:10px;}
/* ── search results page ── */
#se-library-root .lb-resultlist{display:flex;flex-direction:column;gap:2px;}
#se-library-root .lb-resultlist .lb-searchrow{border-radius:12px;padding:13px 12px;}
#se-library-root .lb-resultlist .lb-searchrow .t{white-space:normal;}
#se-library-root .lb-resultlist .lb-searchrow+.lb-searchrow{border-top:1px solid var(--border);}
/* The way out of the panel. A row, because it sits in a list of rows, but clearly not a result. */
#se-library-root .lb-search-all{margin-top:6px;border-top:1px solid var(--border);border-radius:0 0 14px 14px;}
#se-library-root .lb-search-all .ic{background:var(--orange-tint,var(--cream-deep));color:var(--orange);}
#se-library-root .lb-search-all .t{color:var(--orange);}
#se-library-root .lb-search-dym{padding:9px 12px 10px;font-size:13.5px;font-weight:700;color:var(--ink-soft);border-bottom:1px solid var(--border);margin-bottom:4px;}
#se-library-root .lb-search-dym b{color:var(--ink);font-weight:800;}
#se-library-root .lb-searchrow:hover{background:var(--cream);}
/* The keyboard's selected row. Deliberately stronger than :hover - hover is where the mouse
   happens to be resting, this is where Enter will go, and the two must not look alike. */
#se-library-root .lb-searchrow.on{background:var(--cream-deep);box-shadow:inset 2.5px 0 0 var(--orange);}
#se-library-root .lb-searchrow.on .ic{background:var(--orange);color:#fff;}
#se-library-root .lb-searchrow .ic{width:34px;height:34px;border-radius:10px;background:var(--cream-deep);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;flex:none;}
#se-library-root .lb-searchrow .t{display:block;font-weight:800;font-size:15px;color:var(--ink);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#se-library-root .lb-searchrow .s{display:block;font-size:12.5px;color:var(--ink-faint);font-weight:700;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Results are grouped now that search covers four kinds of thing, and a transcript or description hit
   carries an excerpt so the reader can see WHY it matched. The row is no longer a single line, so
   align to the top rather than the centre. */
/* A failed sign-in has to be visible without being alarming: the field values are still there and the
   visitor is one correction away. */
#se-library-root .lb-auth-err{background:var(--blocked-wash,#f7e6df);border:1px solid #e7c3b6;color:#8f3b28;
  border-radius:12px;padding:10px 13px;font-size:13.5px;font-weight:700;line-height:1.45;margin:0 0 14px;}
#se-library-root .lb-authpanel button:disabled, #se-library-root .lb-authpanel input:disabled{opacity:.6;cursor:default;}
#se-library-root .lb-search-group{padding:14px 12px 4px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-deep,#a2551d);}
#se-library-root .lb-search-group:first-child{padding-top:6px;}
#se-library-root .lb-searchrow{align-items:flex-start;}
#se-library-root .lb-searchrow .ic{margin-top:1px;}
#se-library-root .lb-search-ex{display:block;font-size:12.5px;color:var(--ink-soft);font-weight:500;line-height:1.5;margin-top:5px;
  /* two lines, then clip: an excerpt is a hint, not the content */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
#se-library-root .lb-search-ex mark{background:var(--orange-tint,#faead9);color:inherit;font-weight:800;border-radius:3px;padding:0 1px;}

/* ── mobile filters sheet (item 9, 2026-08-23) ── */
/* Same overlay mechanics as .lb-searchmodal/.lb-authmodal above (fixed backdrop, blur, the
   MobileFilterSheet component locks the real scroll container itself) rather than a new pattern,
   anchored to the bottom of the screen because that is the recommended shape for a set of choices
   reached by a thumb, and it reads as "opened from the Filters button" rather than a dialog
   dropped from nowhere. Only ever mounted when `mobile` is true - `.lb-panel` is what desktop
   still renders, completely untouched. */
#se-library-root .lb-filtersheet-wrap{position:fixed;inset:0;z-index:305;display:flex;align-items:flex-end;justify-content:center;}
#se-library-root .lb-filtersheet-backdrop{position:absolute;inset:0;background:rgba(30,27,24,.55);backdrop-filter:blur(3px);}
#se-library-root .lb-filtersheet{position:relative;width:100%;max-width:600px;max-height:86vh;background:var(--paper);
  border-radius:22px 22px 0 0;box-shadow:0 -20px 60px -20px rgba(0,0,0,.5);display:flex;flex-direction:column;
  overflow:hidden;font-family:'Mulish',sans-serif;}
#se-library-root .lb-filtersheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--border);flex:none;}
#se-library-root .lb-filtersheet-body{overflow-y:auto;padding:2px 18px 18px;flex:1;}
#se-library-root .lb-filtersheet-foot{padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--border);flex:none;background:var(--paper);}
/* One collapsible section per facet, closed by default (MobileFilterSheet's own state) with a
   count badge so a reader can see what is already chosen in a section without opening it. */
#se-library-root .lb-fsection{border-bottom:1px solid var(--border-soft);}
#se-library-root .lb-fsection:last-child{border-bottom:none;}
#se-library-root .lb-fsection-head{display:flex;align-items:center;justify-content:space-between;width:100%;
  border:none;background:none;font-family:inherit;padding:14px 2px;cursor:pointer;text-align:left;}
#se-library-root .lb-fsection-title{font-size:14.5px;font-weight:800;color:var(--ink);display:inline-flex;align-items:center;gap:8px;}
#se-library-root .lb-fbadge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 6px;border-radius:999px;background:var(--orange);color:#fff;font-size:11.5px;font-weight:800;}
/* ── active filter chips above the results, mobile only (item 9) ── */
/* The sheet above is closed most of the time, so this is the reader's only visible record of what
   is chosen once they have applied something and moved on - the "(3)" on the Filters button says
   how many, this says which. */
#se-library-root .lb-activechips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px;}
#se-library-root .lb-achip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 12px;border-radius:999px;
  background:var(--cream-deep);border:1px solid var(--border-soft);font-family:inherit;font-size:12.5px;
  font-weight:700;color:var(--ink-soft);cursor:pointer;}
#se-library-root .lb-achip svg{color:var(--ink-faint);}
#se-library-root .lb-search-ex.muted{color:var(--ink-faint);font-style:italic;font-weight:600;}

/* ── auth modal (sign up / sign in) ── */
#se-library-root .lb-authmodal{position:fixed;inset:0;z-index:320;background:rgba(30,27,24,.55);backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:flex-start;padding:0 16px;overflow-y:auto;}
#se-library-root .lb-authpanel{position:relative;width:100%;max-width:440px;margin:8vh 0 40px;background:var(--paper);border-radius:22px;box-shadow:0 40px 90px -20px rgba(0,0,0,.5);padding:40px 30px 26px;font-family:'Mulish',sans-serif;}
/* 44px, not the base .lb-iconbtn's 38px: this is a modal's PRIMARY close action, same
   tap-target lesson as .sup-modal-close (commit 8935ba2, 2026-08-22 - a 36px box with no
   explicit padding squeezed its icon to a near-invisible sliver on mobile). */
#se-library-root .lb-auth-x{position:absolute;top:8px;right:8px;width:44px;height:44px;padding:0;}
#se-library-root .lb-auth-brand{display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:13px;color:var(--orange-dark);margin-bottom:14px;padding-right:46px;}
@media(max-width:480px){#se-library-root .lb-authpanel{padding:38px 22px 22px;margin-top:6vh;}}
#se-library-root .lb-field{display:block;margin-bottom:12px;}
#se-library-root .lb-field span{display:block;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px;}
#se-library-root .lb-field input{width:100%;border:1.5px solid var(--border);border-radius:12px;padding:12px 14px;font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);background:var(--paper);}
#se-library-root .lb-field input:focus{outline:none;border-color:var(--orange);}
#se-library-root .lb-auth-forgot{display:inline-block;font-size:13px;font-weight:700;margin:-2px 0 4px;}
#se-library-root .lb-auth-alt{margin-top:16px;padding-top:16px;border-top:1px solid var(--border-soft);font-size:14px;color:var(--ink-soft);font-weight:600;text-align:center;}
#se-library-root .lb-auth-alt button{border:none;background:none;font-family:inherit;font-size:14px;font-weight:800;color:var(--orange-dark);cursor:pointer;padding:0;}
#se-library-root .lb-auth-alt button:hover{text-decoration:underline;}
#se-library-root .lb-buypanel{max-width:520px;}
#se-library-root .lb-buy-price{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--cream);border:1px solid var(--border-soft);border-radius:16px;padding:16px 18px;margin-bottom:16px;}
#se-library-root .lb-buy-price .amt{font-size:34px;font-weight:900;line-height:1;color:var(--ink);}
#se-library-root .lb-buy-price .per{font-size:13px;font-weight:700;color:var(--ink-faint);margin-top:5px;}
#se-library-root .lb-buy-gets{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:11px;}
#se-library-root .lb-buy-gets li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft);line-height:1.4;}
#se-library-root .lb-buy-gets li svg{color:var(--leaf);flex-shrink:0;margin-top:2px;}
#se-library-root .lb-buy-gets li b{color:var(--ink);}
#se-library-root .lb-buy-covers{background:var(--paper);border:1px solid var(--border-soft);border-radius:14px;padding:14px 16px;margin-bottom:18px;}
#se-library-root .lb-buy-covers .h{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px;}
#se-library-root .lb-buy-covers ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px;}
#se-library-root .lb-buy-covers li{font-size:14px;color:var(--ink-soft);line-height:1.4;}
#se-library-root .lb-buy-alt{margin-top:14px;font-size:13px;color:var(--ink-faint);font-weight:600;text-align:center;}
#se-library-root .lb-buy-alt b{color:var(--orange-dark);}
#se-library-root .lb-buy-summary{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--cream);border:1px solid var(--border-soft);border-radius:12px;padding:13px 16px;margin-bottom:16px;font-size:15px;font-weight:700;color:var(--ink);}
#se-library-root .lb-buy-summary b{font-size:18px;}
#se-library-root .lb-buy-express{display:flex;gap:10px;margin-bottom:14px;}
#se-library-root .lb-buy-express button{flex:1;border:none;border-radius:11px;background:var(--ink);color:#fff;font-family:inherit;font-weight:800;font-size:14.5px;padding:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;}
#se-library-root .lb-buy-express button:hover{opacity:.9;}
#se-library-root .lb-buy-divider{text-align:center;font-size:12.5px;font-weight:700;color:var(--ink-faint);margin:0 0 14px;position:relative;}
#se-library-root .lb-buy-divider::before, #se-library-root .lb-buy-divider::after{content:"";position:absolute;top:50%;width:38%;height:1px;background:var(--border-soft);}
#se-library-root .lb-buy-divider::before{left:0;}#se-library-root .lb-buy-divider::after{right:0;}
#se-library-root .lb-buy-secure{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-faint);font-weight:600;margin:2px 0 14px;}
#se-library-root .lb-buy-done{text-align:center;padding:8px 0 4px;}
#se-library-root .lb-buy-done .tick{width:64px;height:64px;border-radius:999px;background:var(--leaf-tint);color:var(--leaf);display:flex;align-items:center;justify-content:center;margin:6px auto 16px;}

/* ── "on this course" feed marker ── */
#se-library-root .lb-oncourse{display:inline-flex;align-items:center;gap:8px;background:var(--leaf-tint);color:var(--leaf);border:1px solid oklch(0.9 0.04 152);border-radius:999px;padding:5px 12px 5px 10px;font-size:12.5px;font-weight:800;margin-bottom:14px;max-width:100%;}
#se-library-root .lb-oncourse .crs{color:var(--ink-soft);font-weight:700;border-left:1px solid oklch(0.86 0.04 152);padding-left:8px;margin-left:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ── player extra controls (volume, speed, captions, fullscreen) ── */
#se-library-root .lb-xtra{display:inline-flex;align-items:center;gap:3px;}
#se-library-root .lb-ctl{border:none;background:none;color:#c9c1b5;font-family:inherit;font-weight:800;font-size:12.5px;cursor:pointer;border-radius:8px;height:32px;min-width:32px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;}
#se-library-root .lb-ctl:hover{background:#413d38;color:#f2ede1;}
#se-library-root .lb-ctl.on{background:var(--orange);color:#fff;}
#se-library-root .lb-ctl.txt{font-variant-numeric:tabular-nums;letter-spacing:.02em;}
#se-library-root .lb-caption{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);max-width:78%;background:rgba(20,18,16,.82);color:#fff;font-size:14px;font-weight:600;line-height:1.4;padding:7px 14px;border-radius:8px;text-align:center;}

/* ── discussion: reply actions + nested replies ── */
#se-library-root .lb-replyacts{display:flex;gap:10px;margin-top:8px;}
#se-library-root .lb-replyacts button{border:none;background:none;font-family:inherit;font-size:12px;font-weight:800;color:var(--ink-faint);cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:0;}
#se-library-root .lb-replyacts button:hover{color:var(--orange-dark);}
#se-library-root .lb-replies.nested{margin:12px 0 0 22px;padding-left:14px;gap:12px;}

/* start-a-conversation: push right on desktop, full width on mobile */
#se-library-root .lb-startconv{margin-left:auto;}
#se-library-root .lb-mob .lb-startconv{margin-left:0;flex:1 0 100%;}

/* feed tabs: full width on mobile */
#se-library-root .lb-mob .lb-home .lb-rail-head .lb-seg{margin-left:0;width:100%;}
#se-library-root .lb-mob .lb-home .lb-seg button{flex:1;text-align:center;}

/* ── Trustindex-style reviews (course page) ── */
#se-library-root .lb-reviews-top{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--border-soft);margin-bottom:14px;}
#se-library-root .lb-reviews-score{font-size:30px;font-weight:900;letter-spacing:-.02em;line-height:1;color:var(--ink);}
#se-library-root .lb-reviews-stars{display:inline-flex;gap:2px;margin-top:4px;}
#se-library-root .lb-reviews-list{display:flex;flex-direction:column;gap:14px;}
#se-library-root .lb-review{border-left:2px solid var(--orange-tint);padding-left:12px;}
/* ===== scoped from donate.css ===== */
/* Samadhi Donations — module styles. Self-contained: every colour resolves from
   vars scoped to .don, so each module drops into the live page's palette. Inherits
   the events / booking / supporters language verbatim (Mulish, orange #c46a26,
   22px radii, pill buttons, cream cards). Container-query responsive: .don is a
   query container, so modules reflow to their own width, not the page viewport. */
#se-library-root .don{
  --orange:#c46a26; --orange-dark:#a2551d; --orange-tint:#fbeee0;
  --cream:#faf8f4; --cream-deep:#f0eee9; --border:#e3e0d8; --border-soft:#eeece6;
  --ink:#33312e; --ink-soft:#615c53; --ink-faint:#948d80; --paper:#ffffff;
  --ok:oklch(0.55 0.12 150); --ok-tint:oklch(0.95 0.03 150);
  --full:oklch(0.5 0.1 25); --full-tint:oklch(0.95 0.03 25);
  --leaf:oklch(0.56 0.09 150); --leaf-deep:oklch(0.46 0.09 152);
  --radius:22px;
  --shadow-card:0 1px 2px rgba(51,49,46,.04),0 8px 24px -12px rgba(51,49,46,.12);
  color:var(--ink);font-family:'Mulish',-apple-system,BlinkMacSystemFont,sans-serif;text-align:left;container-type:inline-size;
}
#se-library-root .don *{box-sizing:border-box;}
#se-library-root .don-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:999px;padding:14px 22px;font-weight:800;font-size:15px;cursor:pointer;min-height:50px;transition:transform .1s,box-shadow .12s,background .12s,border-color .12s;font-family:inherit;text-decoration:none;}
#se-library-root .don-btn.block{width:100%;}
#se-library-root .don-btn.accent{background:var(--orange);color:#fff;box-shadow:0 8px 20px -6px rgba(196,106,38,.5);}
#se-library-root .don-btn.accent:hover{background:var(--orange-dark);transform:translateY(-1px);}
#se-library-root .don-btn.dark{background:var(--ink);color:#fff;}
#se-library-root .don-btn.dark:hover{background:#221f1c;transform:translateY(-1px);}
#se-library-root .don-btn.ghost{background:var(--paper);color:var(--ink);border:1.5px solid var(--border);}
#se-library-root .don-btn.ghost:hover{border-color:var(--ink-faint);}
#se-library-root .don-btn.text{background:none;color:var(--orange-dark);min-height:0;padding:6px 2px;text-decoration:underline;font-weight:700;font-size:14px;}
#se-library-root .don-btn.sm{min-height:42px;padding:10px 18px;font-size:14px;}
#se-library-root .don-btn:disabled{opacity:.5;cursor:not-allowed;}
#se-library-root .don-lotus{display:inline-block;vertical-align:middle;border-radius:50%;object-fit:contain;flex:none;}

/* ── full module shell ── */
#se-library-root .don-module{background:var(--paper);border:1.5px solid var(--border);border-radius:24px;overflow:hidden;box-shadow:0 1px 2px rgba(51,49,46,.04),0 24px 60px -28px rgba(51,49,46,.35);scroll-margin-top:90px;}
#se-library-root .don-head{padding:22px 26px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,var(--orange-tint) 0%,#fffdf9 72%);}
#se-library-root .don-head .eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-dark);margin-bottom:8px;}
#se-library-root .don-head .t{font-size:21px;font-weight:900;letter-spacing:-.015em;line-height:1.15;}
#se-library-root .don-head .intro{font-size:14px;color:var(--ink-soft);line-height:1.55;margin-top:7px;max-width:52ch;}
#se-library-root .don-body{padding:26px;}
@container (max-width:560px){#se-library-root .don-body{padding:20px;}#se-library-root .don-head{padding:20px;}}

#se-library-root .don-h1{font-size:22px;font-weight:900;letter-spacing:-.015em;margin:0 0 6px;line-height:1.15;}
#se-library-root .don-lead{color:var(--ink-soft);font-size:15px;line-height:1.55;margin-bottom:18px;}

/* ── amount step ── */
#se-library-root .don-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@container (max-width:440px){#se-library-root .don-presets{grid-template-columns:repeat(2,1fr);gap:10px;}}
#se-library-root .don-preset{position:relative;border:2px solid var(--border);background:var(--paper);border-radius:16px;padding:20px 12px;font-size:26px;font-weight:900;letter-spacing:-.02em;color:var(--ink);cursor:pointer;font-family:inherit;transition:border-color .12s,transform .1s,box-shadow .12s,background .12s;}
#se-library-root .don-preset:hover{border-color:var(--orange);transform:translateY(-2px);}
#se-library-root .don-preset.on{border-color:var(--orange);background:linear-gradient(180deg,var(--orange-tint) 0%,var(--paper) 70%);box-shadow:0 10px 26px -12px rgba(196,106,38,.5);}
#se-library-root .don-preset.on::after{content:'';position:absolute;top:9px;right:9px;width:18px;height:18px;border-radius:50%;background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;}

#se-library-root .don-custom{margin-top:14px;}
#se-library-root .don-custom .lbl{font-size:12.5px;font-weight:800;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;}
#se-library-root .don-custom-field{display:flex;align-items:center;gap:6px;border:2px solid var(--border);border-radius:16px;padding:12px 18px;background:#fff;transition:border-color .12s;}
#se-library-root .don-custom-field.on{border-color:var(--orange);}
#se-library-root .don-custom-field:focus-within{border-color:var(--orange);}
#se-library-root .don-custom-field span{font-weight:900;font-size:28px;color:var(--ink);line-height:1;}
#se-library-root .don-custom-field input{border:none;font-size:28px;font-weight:900;width:100%;background:transparent;color:var(--ink);font-family:inherit;letter-spacing:-.02em;-moz-appearance:textfield;}
#se-library-root .don-custom-field input::-webkit-outer-spin-button, #se-library-root .don-custom-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
#se-library-root .don-custom-field input:focus{outline:none;}
#se-library-root .don-minnote{font-size:12px;color:var(--ink-faint);margin-top:7px;}

/* ── one-off / monthly toggle (gentle, secondary) ── */
#se-library-root .don-interval{margin-top:20px;background:var(--cream);border:1px solid var(--border-soft);border-radius:16px;padding:6px;display:flex;gap:4px;position:relative;}
#se-library-root .don-interval button{flex:1;border:none;background:transparent;padding:12px 10px;border-radius:12px;font-weight:800;font-size:14.5px;cursor:pointer;color:var(--ink-soft);font-family:inherit;position:relative;z-index:1;transition:color .18s;display:flex;align-items:center;justify-content:center;gap:7px;}
#se-library-root .don-interval button.on{color:var(--ink);}
#se-library-root .don-interval .thumb{position:absolute;top:6px;bottom:6px;border-radius:12px;background:var(--paper);box-shadow:0 2px 8px rgba(51,49,46,.14);transition:left .22s cubic-bezier(.4,0,.2,1),width .22s cubic-bezier(.4,0,.2,1);z-index:0;}
#se-library-root .don-monthly-note{font-size:13px;color:var(--ink-soft);line-height:1.5;margin-top:12px;background:var(--cream);border-radius:12px;padding:12px 14px;border:1px solid var(--border-soft);}

#se-library-root .don-reassure{text-align:center;font-size:13.5px;font-style:italic;color:var(--ink-soft);margin-top:20px;line-height:1.55;padding:0 6px;}

/* ── stepper (same shape as booking & supporters) ── */
#se-library-root .don-stepper{display:flex;align-items:flex-start;margin-bottom:26px;}
#se-library-root .don-step{flex:1;text-align:center;position:relative;}
#se-library-root .don-step .dot{width:30px;height:30px;border-radius:50%;background:var(--border);color:var(--ink-soft);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13.5px;position:relative;z-index:2;}
#se-library-root .don-step.done .dot, #se-library-root .don-step.active .dot{background:var(--orange);color:#fff;box-shadow:0 3px 10px rgba(196,106,38,.35);}
#se-library-root .don-step .lbl{display:block;margin-top:8px;font-size:12px;font-weight:700;color:var(--ink-faint);}
#se-library-root .don-step.active .lbl{color:var(--orange-dark);}
#se-library-root .don-step.done .lbl{color:var(--ink-soft);}
#se-library-root .don-step::before{content:'';position:absolute;top:15px;left:-50%;width:100%;height:3px;background:var(--border);z-index:1;border-radius:3px;}
#se-library-root .don-step:first-child::before{display:none;}
#se-library-root .don-step.done::before{background:var(--orange);}

/* ── gift summary ── */
#se-library-root .don-summary{background:var(--cream-deep);border:1px solid var(--border-soft);border-radius:18px;padding:18px 20px;}
#se-library-root .don-summary .row{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:5px 0;}
#se-library-root .don-summary .row .k{font-weight:700;color:var(--ink-soft);font-size:14.5px;}
#se-library-root .don-summary .amt{font-size:26px;font-weight:900;color:var(--ink);letter-spacing:-.02em;}
#se-library-root .don-summary .amt small{font-size:14px;font-weight:700;color:var(--ink-soft);}
#se-library-root .don-summary .ga{border-top:1px solid var(--border);margin-top:8px;padding-top:12px;font-size:13.5px;color:var(--ink-soft);line-height:1.5;}
#se-library-root .don-summary .ga b{color:var(--orange-dark);}

/* ── fields ── */
#se-library-root .don-field{margin-bottom:16px;}
#se-library-root .don-field label{display:block;font-weight:700;font-size:13.5px;margin-bottom:6px;}
#se-library-root .don-field .req{color:var(--orange-dark);}
#se-library-root .don-field input, #se-library-root .don-field textarea{width:100%;border:1.5px solid var(--border);border-radius:14px;padding:13px 15px;font-size:15.5px;font-family:inherit;color:var(--ink);background:var(--paper);transition:border-color .12s;}
#se-library-root .don-field textarea{resize:vertical;min-height:74px;line-height:1.5;}
#se-library-root .don-field input:focus, #se-library-root .don-field textarea:focus{border-color:var(--orange);outline:none;}
#se-library-root .don-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
@container (max-width:560px){#se-library-root .don-grid2{grid-template-columns:1fr;}}

#se-library-root .don-alert{background:var(--cream);border:1.5px solid var(--border);border-radius:16px;padding:14px 18px;font-size:14px;line-height:1.5;color:var(--ink-soft);margin-bottom:18px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;}
#se-library-root .don-alert b{color:var(--ink);}

#se-library-root .don-block{background:var(--cream-deep);border-radius:18px;padding:20px 22px;margin:16px 0;}
#se-library-root .don-block h3{font-size:15px;margin:0 0 8px;font-weight:900;display:flex;align-items:center;gap:8px;}
#se-library-root .don-block p{font-size:14px;color:var(--ink-soft);line-height:1.6;margin:0;}
#se-library-root .don-check{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--border);border-radius:16px;padding:15px 18px;margin-top:14px;cursor:pointer;background:var(--paper);transition:border-color .12s,background .12s;}
#se-library-root .don-check.on{border-color:var(--orange);background:var(--orange-tint);}
#se-library-root .don-check input{margin-top:2px;width:19px;height:19px;accent-color:var(--orange);flex:none;}
#se-library-root .don-check .t{font-size:13px;line-height:1.55;color:var(--ink-soft);}
#se-library-root .don-check .t b{color:var(--ink);font-size:14px;}

/* wall opt-in reveal */
#se-library-root .don-wallmsg{margin-top:14px;animation:donReveal .24s ease;}
@keyframes donReveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ── payment (Stripe mock) ── */
#se-library-root .don-pay-express{display:flex;gap:10px;margin-bottom:14px;}
#se-library-root .don-pay-express button{flex:1;border:none;border-radius:12px;padding:14px;font-weight:800;font-size:15px;background:#000;color:#fff;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:7px;}
#se-library-root .don-pay-divider{display:flex;align-items:center;gap:12px;color:var(--ink-faint);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:14px 0;}
#se-library-root .don-pay-divider::before, #se-library-root .don-pay-divider::after{content:'';flex:1;height:1px;background:var(--border);}
#se-library-root .don-card-panel{border:1.5px solid var(--border);border-radius:16px;padding:18px;background:var(--cream);}
#se-library-root .don-card-panel .stripe-note{font-size:11px;color:var(--ink-faint);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center;padding:6px 0 12px;}
#se-library-root .don-card-panel .crow{display:flex;gap:10px;margin-bottom:10px;}
#se-library-root .don-card-panel .crow:last-child{margin-bottom:0;}
#se-library-root .don-card-panel input{flex:1;border:1.5px solid var(--border);border-radius:12px;padding:12px 13px;font-size:15px;background:#fff;font-family:inherit;color:var(--ink);}
#se-library-root .don-card-panel input:focus{outline:none;border-color:var(--orange);}
#se-library-root .don-skel{height:52px;border-radius:12px;background:linear-gradient(100deg,var(--cream-deep) 30%,#fff 50%,var(--cream-deep) 70%);background-size:200% 100%;animation:donShimmer 1.3s infinite;margin-bottom:10px;}
@keyframes donShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
#se-library-root .don-pay-error{background:var(--full-tint);border:1.5px solid var(--full);border-radius:16px;padding:16px 18px;margin-bottom:16px;display:flex;gap:12px;align-items:flex-start;}
#se-library-root .don-pay-error .ico{flex:none;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--full);display:flex;align-items:center;justify-content:center;}
#se-library-root .don-pay-error .nt{font-weight:800;color:var(--full);font-size:14.5px;margin-bottom:2px;}
#se-library-root .don-pay-error .bd{font-size:13.5px;color:var(--full);line-height:1.5;opacity:.9;}
#se-library-root .don-privacy{font-size:12.5px;color:var(--ink-faint);line-height:1.55;margin:16px 0;display:flex;gap:8px;align-items:flex-start;}
#se-library-root .don-privacy svg{flex:none;color:var(--ink-faint);margin-top:1px;}

#se-library-root .don-actions{display:flex;justify-content:space-between;align-items:center;margin-top:24px;gap:12px;}

/* ── thanks ── */
#se-library-root .don-thanks{text-align:center;padding:6px 0;}
#se-library-root .don-thanks-icon{width:78px;height:78px;border-radius:50%;background:var(--ok-tint);color:var(--leaf-deep);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
#se-library-root .don-thanks-icon.lotus{background:none;width:auto;height:auto;}
#se-library-root .don-thanks h2{font-size:25px;font-weight:900;letter-spacing:-.02em;line-height:1.15;margin-bottom:12px;}
#se-library-root .don-thanks .who{font-size:17px;color:var(--orange-dark);font-weight:800;margin-bottom:14px;}
#se-library-root .don-thanks-body{font-size:15.5px;color:var(--ink-soft);line-height:1.62;margin-bottom:18px;max-width:44ch;margin-left:auto;margin-right:auto;}
#se-library-root .don-thanks-notes{list-style:none;padding:0;margin:0 auto 22px;display:grid;gap:11px;max-width:40ch;text-align:left;}
#se-library-root .don-thanks-notes li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft);line-height:1.5;}
#se-library-root .don-thanks-notes li::before{content:'';flex:none;width:22px;height:22px;border-radius:50%;background:var(--ok-tint);margin-top:1px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23347a4e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-size:13px;background-repeat:no-repeat;background-position:center;}
#se-library-root .don-thanks-close{font-size:14px;font-style:italic;color:var(--ink-soft);margin:2px 0 20px;}
#se-library-root .don-thanks-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

/* ── CampaignProgress ── */
#se-library-root .don-prog{background:var(--paper);border:1.5px solid var(--border);border-radius:24px;padding:30px 32px;box-shadow:var(--shadow-card);position:relative;overflow:hidden;}
@container (max-width:560px){#se-library-root .don-prog{padding:24px 22px;}}
#se-library-root .don-prog .eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--leaf-deep);margin-bottom:10px;}
#se-library-root .don-prog h2{font-size:26px;font-weight:900;letter-spacing:-.02em;line-height:1.14;margin-bottom:8px;}
@container (max-width:560px){#se-library-root .don-prog h2{font-size:22px;}}
#se-library-root .don-prog .invite{font-size:15px;color:var(--ink-soft);line-height:1.55;max-width:54ch;margin-bottom:22px;}
#se-library-root .don-prog-figures{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
#se-library-root .don-prog-raised{font-size:44px;font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;}
@container (max-width:560px){#se-library-root .don-prog-raised{font-size:34px;}}
#se-library-root .don-prog-goal{font-size:15.5px;color:var(--ink-soft);font-weight:700;}
#se-library-root .don-prog-goal b{color:var(--ink);}
#se-library-root .don-prog-bar{height:16px;border-radius:999px;background:var(--cream-deep);overflow:hidden;position:relative;border:1px solid var(--border-soft);}
#se-library-root .don-prog-fill{position:absolute;inset:0 auto 0 0;border-radius:999px;background:linear-gradient(90deg,var(--leaf) 0%,oklch(0.62 0.11 140) 100%);transition:width 1.1s cubic-bezier(.3,.7,.2,1);width:0;}
#se-library-root .don-prog-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);background-size:200% 100%;animation:donShimmer 2.6s infinite;}
#se-library-root .don-prog-meta{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:13px;font-weight:700;color:var(--ink-soft);}
#se-library-root .don-prog-meta .pct{color:var(--leaf-deep);font-weight:900;}
#se-library-root .don-prog-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--ink-faint);margin-top:2px;}
#se-library-root .don-prog-live .pulse{width:8px;height:8px;border-radius:50%;background:var(--leaf);animation:donPulse 2s infinite;}
@keyframes donPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 oklch(0.56 0.09 150 / .5)}50%{opacity:.75;box-shadow:0 0 0 6px oklch(0.56 0.09 150 / 0)}}
#se-library-root .don-prog-motto{font-size:13px;font-weight:800;font-style:italic;color:var(--leaf-deep);margin-top:18px;letter-spacing:.01em;}
#se-library-root .don-prog-actions{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;}

/* ── DonorWall (masonry of soft notes) ── */
#se-library-root .don-wall-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
#se-library-root .don-wall-head .eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-dark);margin-bottom:8px;}
#se-library-root .don-wall-head h2{font-size:24px;font-weight:900;letter-spacing:-.02em;line-height:1.15;}
#se-library-root .don-wall-head .sub{font-size:14px;color:var(--ink-soft);margin-top:6px;line-height:1.5;}
#se-library-root .don-wall-count{font-size:13px;font-weight:800;color:var(--ink-soft);background:var(--cream-deep);border:1px solid var(--border-soft);border-radius:999px;padding:8px 15px;white-space:nowrap;}
#se-library-root .don-wall-count b{color:var(--orange-dark);}
#se-library-root .don-wall{columns:3;column-gap:16px;}
@container (max-width:760px){#se-library-root .don-wall{columns:2;column-gap:12px;}}
@container (max-width:440px){#se-library-root .don-wall{columns:1;}}
#se-library-root .don-note{break-inside:avoid;margin-bottom:16px;border:1.5px solid var(--border);border-radius:18px;padding:18px 20px;background:var(--paper);box-shadow:0 1px 2px rgba(51,49,46,.03);}
@container (max-width:760px){#se-library-root .don-note{margin-bottom:12px;}}
#se-library-root .don-note.plain{background:var(--cream);border-color:var(--border-soft);}
#se-library-root .don-note.has-msg{background:linear-gradient(170deg,#fffdf9 0%,var(--paper) 60%);}
#se-library-root .don-note .msg{font-size:14.5px;line-height:1.6;color:var(--ink);margin-bottom:14px;position:relative;}
#se-library-root .don-note .msg .q{color:var(--orange);opacity:.5;margin-right:2px;font-weight:900;}
#se-library-root .don-note-foot{display:flex;align-items:center;gap:11px;}
#se-library-root .don-note-avatar{flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;color:#fff;letter-spacing:-.01em;}
#se-library-root .don-note-avatar.anon{background:var(--cream-deep);color:var(--ink-faint);border:1.5px solid var(--border);}
#se-library-root .don-note-who{min-width:0;}
#se-library-root .don-note-name{font-size:14.5px;font-weight:800;color:var(--ink);line-height:1.2;}
#se-library-root .don-note-name.anon{color:var(--ink-soft);font-weight:700;font-style:italic;}
#se-library-root .don-note-meta{font-size:12px;color:var(--ink-faint);font-weight:600;margin-top:2px;display:flex;align-items:center;gap:7px;}
#se-library-root .don-note-amt{color:var(--orange-dark);font-weight:800;}
#se-library-root .don-note-amt::before{content:'';display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--ink-faint);margin-right:7px;vertical-align:middle;}
#se-library-root .don-wall-more{text-align:center;margin-top:8px;}
#se-library-root .don-wall-more .rest{font-size:13px;color:var(--ink-faint);margin-top:12px;}
#se-library-root .don-wall-empty{text-align:center;padding:36px 20px;color:var(--ink-soft);}
#se-library-root .don-wall-empty .lotus{color:var(--orange);opacity:.5;margin-bottom:12px;}
#se-library-root .don-wall-empty .t{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:5px;}
#se-library-root .don-wall-empty .b{font-size:14px;line-height:1.55;max-width:36ch;margin:0 auto;}

/* ── LessonNudge (compact, dismissible) ── */
#se-library-root .don-nudge{background:linear-gradient(135deg,var(--orange-tint) 0%,#fffdf9 76%);border:1.5px solid var(--border);border-radius:20px;padding:18px 20px;box-shadow:var(--shadow-card);position:relative;}
#se-library-root .don-nudge-row{display:flex;align-items:center;gap:16px;}
@container (max-width:440px){#se-library-root .don-nudge-row{flex-direction:column;align-items:stretch;gap:12px;text-align:center;}}
#se-library-root .don-nudge-ic{flex:none;width:46px;height:46px;border-radius:14px;background:#fff;color:var(--orange);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px -6px rgba(196,106,38,.4);}
#se-library-root .don-nudge-ic.lotus, #se-library-root .don-coursecard-ic.lotus{background:none;box-shadow:none;}
@container (max-width:440px){#se-library-root .don-nudge-ic{margin:0 auto;}}
#se-library-root .don-nudge-txt{flex:1;min-width:0;}
#se-library-root .don-nudge-txt .t{font-size:15.5px;font-weight:900;letter-spacing:-.01em;line-height:1.25;}
#se-library-root .don-nudge-txt .s{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin-top:3px;}
#se-library-root .don-nudge .don-btn{flex:none;white-space:nowrap;}
#se-library-root .don-nudge-dismiss{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;border:none;background:transparent;color:var(--ink-faint);cursor:pointer;display:flex;align-items:center;justify-content:center;}
#se-library-root .don-nudge-dismiss:hover{background:rgba(51,49,46,.06);color:var(--ink);}
#se-library-root .don-nudge-expand{margin-top:16px;animation:donReveal .26s ease;}
#se-library-root .don-nudge-dismissed{font-size:13px;color:var(--ink-faint);display:flex;align-items:center;gap:9px;justify-content:center;padding:14px;background:var(--cream);border:1px dashed var(--border);border-radius:14px;}
#se-library-root .don-nudge-dismissed button{background:none;border:none;color:var(--orange-dark);font-weight:800;font-family:inherit;font-size:13px;cursor:pointer;text-decoration:underline;padding:0;}

/* ── CourseCard (inline, fuller) ── */
#se-library-root .don-coursecard{background:var(--paper);border:1.5px solid var(--border);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-card);}
#se-library-root .don-coursecard-top{padding:22px 24px;background:linear-gradient(135deg,var(--orange-tint) 0%,#fffdf9 74%);border-bottom:1px solid var(--border);display:flex;gap:16px;align-items:flex-start;}
#se-library-root .don-coursecard-ic{flex:none;width:50px;height:50px;border-radius:15px;background:#fff;color:var(--orange);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px -6px rgba(196,106,38,.4);}
#se-library-root .don-coursecard-top .t{font-size:18px;font-weight:900;letter-spacing:-.015em;line-height:1.2;}
#se-library-root .don-coursecard-top .s{font-size:14px;color:var(--ink-soft);line-height:1.55;margin-top:6px;}
#se-library-root .don-coursecard-body{padding:22px 24px;}
@container (max-width:440px){#se-library-root .don-coursecard-top, #se-library-root .don-coursecard-body{padding:18px;}}
#se-library-root .don-coursecard-quick{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
#se-library-root .don-quickamt{flex:1;min-width:70px;border:2px solid var(--border);background:var(--paper);border-radius:14px;padding:14px 8px;font-size:19px;font-weight:900;color:var(--ink);cursor:pointer;font-family:inherit;transition:border-color .12s,transform .1s;}
#se-library-root .don-quickamt:hover{border-color:var(--orange);transform:translateY(-1px);}
#se-library-root .don-quickamt.on{border-color:var(--orange);background:var(--orange-tint);}
#se-library-root .don-coursecard-expand{margin-top:6px;animation:donReveal .26s ease;}

/* ── modal (shared) ── */
#se-library-root .don-modal-scrim{position:fixed;inset:0;z-index:500;background:rgba(35,31,28,.55);display:flex;align-items:flex-start;justify-content:center;padding:32px 20px;overflow:auto;}
#se-library-root .don-modal{background:transparent;max-width:560px;width:100%;position:relative;margin:auto;}
#se-library-root .don-modal-close{position:absolute;top:-6px;right:-6px;width:40px;height:40px;border-radius:50%;border:none;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);z-index:6;box-shadow:0 6px 18px -6px rgba(0,0,0,.4);}
#se-library-root .don-modal-close:hover{color:var(--ink);}

/* ── Community: the comment and reply composers ─────────────────────────────
   New surface, not in the original handoff: the design showed comments read-only,
   so replying needed controls of its own. Kept in the register of .lb-composer
   rather than invented: same border, radius, cream field and accent button. */
#se-library-root .lb-cbox{ display: flex; gap: 10px; margin-top: 12px; }
#se-library-root .lb-cbox-in{ flex: 1; min-width: 0; }
#se-library-root .lb-cbox textarea{
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 58px;
  border: 1.5px solid var(--border); border-radius: 13px; padding: 10px 12px;
  background: var(--cream); font-family: inherit; font-size: 14.5px; line-height: 1.5;
  color: var(--ink); font-weight: 600;
}
#se-library-root .lb-cbox textarea:focus{ outline: none; border-color: var(--accent); }
#se-library-root .lb-cbox textarea:disabled{ opacity: .6; }
#se-library-root .lb-cbox-foot{ display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
#se-library-root .lb-cbox-err{ font-size: 12.5px; font-weight: 700; color: #b4432b; margin-top: 6px; }

/* A quiet aside for a state the member should understand but not be alarmed by:
   a post waiting on moderation, or the community being unreachable. */
#se-library-root .lb-cnote{
  margin-top: 10px; padding: 9px 12px; border-radius: 11px;
  background: var(--cream); border: 1.5px solid var(--border);
  font-size: 13px; font-weight: 700; color: var(--ink-soft); line-height: 1.45;
}

/* ── Community photos ───────────────────────────────────────────────────────
   The handoff drew a grey box captioned member photo. These are the real thing,
   which is also what makes a photo posted from the app visible on the web. */
/* "Try again" on the note that says the conversation is not reachable.
   IT MATCHES THE NOTE IT SITS IN, AND THE COMMENT HERE USED TO GIVE THE WRONG REASON FOR NOT DOING
   SO: "a real control, so it is 16px at every width: below that iOS zooms on tap and the page
   scrolls sideways". iOS Safari's zoom-on-focus fires on a FORM CONTROL - an input, a select or a
   textarea - because focusing one opens a keyboard. A <button> opens nothing, so the floor never
   applied here. M197's own 27 offenders were all fields; M240b established the distinction after
   the same over-broad wording pushed a "Show all N" button to 16px among 12px chips and the client
   saw it on his phone; M247 found this one.

   At 16px and weight 800 inside a 13px, weight 700 note, the button offering the way out was
   shouting louder than the sentence explaining the problem, which is backwards. It is now the
   note's own size and weight, and is told apart by SHAPE instead: the pill, the border, the paper
   fill against the note's cream, and the orange on hover. Its `--ink` against the note's
   `--ink-soft` is the one remaining lift, and colour is neither bigger nor heavier.

   THE TAP TARGET COMES FROM `min-height` IN THE `(pointer:coarse)` BLOCK, not from the type - which
   is the whole reason the type was free to come down. `inline-flex` rather than `inline-block` so
   that min-height centres the label instead of stranding it at the top of a 44px box. */
#se-library-root .lb-cnote-retry{
  display: inline-flex; align-items: center; margin-left: 8px; padding: 6px 12px;
  border-radius: 999px; border: 1.5px solid var(--border); background: var(--paper);
  cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink);
}
#se-library-root .lb-cnote-retry:hover{ border-color: var(--orange); color: var(--orange-dark); }

#se-library-root .lb-attimgs{ display: flex; gap: 8px; flex-wrap: wrap; width: 100%; margin-top: 10px; }
#se-library-root .lb-attimg{ position: relative; width: 76px; height: 76px; flex: none; }
#se-library-root .lb-attimg img{
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 11px; border: 1.5px solid var(--border); display: block;
}
#se-library-root .lb-attimg-x{
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
  border-radius: 50%; border: 1.5px solid var(--border); background: var(--paper);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--ink-soft); padding: 0;
}
#se-library-root .lb-attimg-x:hover{ background: var(--cream); color: var(--ink); }

#se-library-root .lb-postimgs{ margin-top: 12px; display: grid; gap: 6px; grid-template-columns: 1fr; }
#se-library-root .lb-postimgs.multi{ grid-template-columns: 1fr 1fr; }
#se-library-root .lb-postimg{ display: block; border-radius: 13px; overflow: hidden; border: 1.5px solid var(--border); }
#se-library-root .lb-postimg img{ display: block; width: 100%; height: auto; }
/* With several photos, crop to a consistent tile so the card keeps its shape. */
#se-library-root .lb-postimgs.multi .lb-postimg img{ height: 190px; object-fit: cover; }
@media (max-width: 560px){ #se-library-root .lb-postimgs.multi .lb-postimg img{ height: 130px; } }

/* ── The post menu: report, block, follow, delete ───────────────────────────
   None of this was in the handoff, which showed no moderation affordances at all.
   Sits in the reactions row, pushed to the right of it. */
#se-library-root .lb-pmenu{ position: relative; margin-left: auto; display: flex; align-items: center; gap: 8px; }
#se-library-root .lb-pmenu-btn{
  border: 0; background: none; cursor: pointer; padding: 4px 6px; border-radius: 8px;
  color: var(--ink-faint); display: flex; align-items: center;
}
#se-library-root .lb-pmenu-btn:hover{ background: var(--cream); color: var(--ink); }
#se-library-root .lb-pmenu-scrim{ position: fixed; inset: 0; z-index: 199; border: 0; background: transparent; cursor: default; }
#se-library-root .lb-pmenu-pop{
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 200; width: 268px;
  max-width: calc(100vw - 24px);
  background: var(--paper); border: 1.5px solid var(--border); border-radius: 14px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .14); padding: 6px; text-align: left;
}
#se-library-root .lb-pmenu-pop > button{
  display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--ink);
  padding: 9px 10px; border-radius: 10px;
}
#se-library-root .lb-pmenu-pop > button:hover{ background: var(--cream); }
#se-library-root .lb-pmenu-pop > button.danger{ color: #b4432b; }
#se-library-root .lb-pmenu-pop > button:disabled{ opacity: .5; cursor: default; }
#se-library-root .lb-pmenu-note{
  font-size: 12.5px; font-weight: 700; color: var(--ink-faint); line-height: 1.45;
  padding: 8px 10px 4px; border-top: 1.5px solid var(--border); margin-top: 4px;
}
#se-library-root .lb-pmenu-ask{ padding: 10px; }
#se-library-root .lb-pmenu-ask b{ display: block; font-size: 14.5px; margin-bottom: 4px; }
#se-library-root .lb-pmenu-ask p{ font-size: 13px; font-weight: 600; color: var(--ink-soft); line-height: 1.45; margin: 0 0 9px; }
#se-library-root .lb-pmenu-ask textarea{
  width: 100%; box-sizing: border-box; resize: vertical;
  border: 1.5px solid var(--border); border-radius: 11px; padding: 8px 10px;
  background: var(--cream); font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
}
#se-library-root .lb-pmenu-ask textarea:focus{ outline: none; border-color: var(--accent); }
#se-library-root .lb-pmenu-acts{ display: flex; justify-content: flex-end; gap: 8px; margin-top: 9px; }
#se-library-root .lb-pmenu-msg{ font-size: 12.5px; font-weight: 700; color: var(--ink-faint); }

/* THIS BLOCK HAS TO COME AFTER THE BASE RULES ABOVE, and it was written above them first, which
   is how a fix can be present in the file and absent from the page. `scope-css.py` prefixes every
   selector with `#se-library-root`, so the phone rule and the base rule end up at IDENTICAL
   specificity and the later one simply wins. Written above, the phone rows kept the base 14px:
   the previous attempt's "larger rows are the other half of the same fix" never applied either,
   and nothing said so. Measured in a real browser at 375px before and after. */
/* WHERE THIS MENU OPENS IS DECIDED IN JAVASCRIPT, and the two attempts that were decided here
   are why. `useAnchoredMenu` in community-ui.jsx measures the button and the bottom tab bar and
   sets position, left and top itself; this block only says what the menu LOOKS like on a phone.

   Attempt one: `right: 0` with a fixed 268px width. The menu grows leftwards from the button and
   on a narrow display it reached past the left edge, so the client photographed one reading
   "elete this post" with the option to delete partly unreachable.

   Attempt two, which replaced it: `position: fixed; left: 12px; right: 12px; bottom: 12px`. That
   cannot be off screen at any width, and it lost both of the other things a menu has to be. It
   opened at the foot of the display, a long way from the button that was pressed and sitting over
   a different post, and `.lb-tabbar` is `z-index: 150` so the navigation bar was drawn across it.
   The client photographed that too.

   Neither can be fixed by choosing a better width, because the answer depends on where the button
   is and how tall the bar is on that device. So the numbers are measured. The z-index above the
   bar is belt and braces: the placement already keeps the menu clear of it. */
@media (max-width: 560px){
  #se-library-root .lb-pmenu-pop{
    width: min(268px, calc(100vw - 24px)); max-width: none;
    border-radius: 16px; padding: 8px;
    overflow-y: auto; overscroll-behavior: contain;
    box-shadow: 0 14px 44px rgba(0, 0, 0, .22);
  }
  #se-library-root .lb-pmenu.sm .lb-pmenu-pop{ width: min(268px, calc(100vw - 24px)); }
  /* THE FLOOR APPLIES TO THE TEXTAREA AND NOT TO THE ROWS, and this block used to say otherwise:
     "16px is the floor for anything a thumb presses or types into at phone width". Only the typing
     half of that is true. iOS Safari zooms on focus of a FORM CONTROL because focusing one opens a
     keyboard, so the report box below genuinely needs 16px and keeps it. The rows are <button>s,
     they open no keyboard, and they were raised 14 -> 16 for a reason that did not apply to them.

     The cost was visible in this very menu: at 16px the plain rows out-sized its own Cancel,
     Delete and Send report buttons, which are `.lb-btn.sm` at 13.5px - so the row that merely
     opens a choice read louder than the button that carries it out. Back at the base 14px, and the
     menu reads as one thing again (M247).

     THE PADDING STAYS at 13px 12px. That is the touch target, and it is the half of the old rule
     that was always right: a comfortable target comes from padding and min-height, never from type
     size, which is exactly what leaves the type free to match its neighbours. */
  #se-library-root .lb-pmenu-pop > button{ padding: 13px 12px; }
  #se-library-root .lb-pmenu-ask textarea{ font-size: 16px; }
  #se-library-root .lb-pmenu-scrim{ background: rgba(0, 0, 0, .3); }
}
/* "Session 3 of 8 - The Buddha's Path Module 5" on a card. One line, clipped rather than wrapped, so a
   grid of cards keeps its rhythm however long a course title is. */
#se-library-root .lb-fromcourse{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--ink-faint);min-width:0;}
#se-library-root .lb-fromcourse span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ── Community text and the menu scrim: corrections ─────────────────────────
   The post body computed white-space: normal, so every line break written into a
   post or an announcement collapsed into one run-on paragraph. */
#se-library-root .lb-post-body{ white-space: pre-wrap; overflow-wrap: break-word; }
#se-library-root .lb-post-link{ color: var(--accent); font-weight: 800; text-decoration: underline; overflow-wrap: anywhere; }
#se-library-root .lb-post-link:hover{ text-decoration: none; }

/* The scrim was an empty <button> with inset:0. A button shrinks to its content, so it
   measured 0x0 and never caught the click that should dismiss the menu. A div stretches.
   z-index 199, under the menu at 200 and over the bottom tab bar at 150, so a tap anywhere
   including on the bar closes the menu rather than doing two things at once. THIS DECLARATION
   IS THE LATER OF THE TWO IN THIS FILE AND THEREFORE THE ONE THAT WINS; the other is kept in
   step so that reading either one tells the truth. */
#se-library-root .lb-pmenu-scrim{ position: fixed; inset: 0; z-index: 199; background: transparent; cursor: default; }

/* While the community is connecting there is a real wait: the Firebase SDK, a credential and
   the first snapshot. Saying so beats an empty space that reads as broken. */
#se-library-root .lb-feedwait{ display: flex; align-items: center; gap: 10px; padding: 18px 4px; color: var(--ink-faint); font-size: 14px; font-weight: 700; }
#se-library-root .lb-feedwait i{
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: lb-spin .8s linear infinite;
}
@keyframes lb-spin{ to { transform: rotate(360deg); } }
/* lb-pn is an <a> now: anchors bring their own colour and underline, and the ended state is a <span>. */
#se-library-root a.lb-pn{color:inherit;text-decoration:none;}
#se-library-root .lb-pn span{display:inline-flex;align-items:center;gap:5px;}
#se-library-root .lb-pn.is-end{opacity:.55;}

/* ── Avatars with real photos ───────────────────────────────────────────────
   The design was initials-only. Members have real profile pictures and the app shows
   them, so the initials now sit UNDER the photo and show through if it fails to load. */
#se-library-root .lb-av{ position: relative; overflow: hidden; }
#se-library-root .lb-av-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── OG-style link preview ──────────────────────────────────────────────────
   An announcement is usually a shared link. It was rendering linkImageUrl as a
   full-bleed photo, which turned a Zoom link into a screen-height blue logo. This is
   the card shape the app, WhatsApp and Facebook all use: capped landscape crop,
   then title and description. */
#se-library-root .lb-linkcard{
  display: block; margin-top: 12px; border: 1.5px solid var(--border); border-radius: 14px;
  overflow: hidden; text-decoration: none; color: inherit; background: var(--paper);
}
#se-library-root a.lb-linkcard:hover{ border-color: var(--accent); }
#se-library-root .lb-lc-img{ background: var(--cream); }
/* Capped and cropped: the point is a preview, not the picture itself. */
#se-library-root .lb-lc-img img{
  display: block; width: 100%; height: auto;
  aspect-ratio: 1.91 / 1;          /* the Open Graph ratio, as WhatsApp and Facebook crop it */
  max-height: 300px; object-fit: cover;
}
@media (max-width: 560px){ #se-library-root .lb-lc-img img{ max-height: 210px; } }
#se-library-root .lb-lc-txt{ padding: 11px 13px; }
#se-library-root .lb-lc-host{ font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
#se-library-root .lb-lc-title{ font-size: 14.5px; font-weight: 800; line-height: 1.35; margin-top: 3px; color: var(--ink); }
#se-library-root .lb-lc-desc{
  font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--ink-soft); margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* A single member photo also needs a ceiling: an uncropped portrait from a phone is
   otherwise taller than the screen. */
#se-library-root .lb-postimgs:not(.multi) .lb-postimg img{ max-height: 460px; object-fit: cover; }
/* A transcript reads as a document, so it gets a document's rhythm: a measure that does not run the full
   width, paragraph spacing, and the headings David wrote ("Meditation", "Teachings") standing out quietly
   rather than shouting. */
#se-library-root .lb-transcript{max-width:68ch;}
#se-library-root .lb-transcript p{margin:0 0 .85em;line-height:1.62;}
#se-library-root .lb-transcript p:last-child{margin-bottom:0;}
#se-library-root .lb-transcript-h{margin:1.5em 0 .5em;font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);}
#se-library-root .lb-transcript-h:first-child{margin-top:0;}
#se-library-root .lb-transcript-t{font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:700;color:var(--ink-faint);margin:1.1em 0 .5em;}

/* ── Comment and reply menus ────────────────────────────────────────────────
   Same menu as a post's, at the smaller scale a reply needs, and pinned to the right
   of the head row rather than pushed there by margin auto. */
#se-library-root .lb-pmenu.sm{ margin-left: 0; flex: none; }
#se-library-root .lb-pmenu.sm .lb-pmenu-pop{ width: 240px; }

/* ── Blocked members ────────────────────────────────────────────────────────
   Blocking used to be a one-way door: a blocked author's posts are hidden, so the
   menu offering unblock could never be reached. This is the way back, and it is
   absent entirely for anyone who has never blocked a soul. */
#se-library-root .lb-blocked{ margin: 6px 0 16px; }
#se-library-root .lb-blocked-open{
  border: 0; background: none; cursor: pointer; padding: 6px 2px;
  font-family: inherit; font-size: 13px; font-weight: 800; color: var(--ink-faint);
  text-decoration: underline;
}
#se-library-root .lb-blocked-open:hover{ color: var(--ink); }
#se-library-root .lb-blocked-list{
  margin-top: 8px; border: 1.5px solid var(--border); border-radius: 14px;
  padding: 8px; background: var(--paper);
}
#se-library-root .lb-blocked-row{ display: flex; align-items: center; gap: 10px; padding: 7px 6px; }
#se-library-root .lb-blocked-row .nm{ flex: 1; font-size: 14px; font-weight: 700; color: var(--ink); }

/* ── One post on its own ────────────────────────────────────────────────────
   Where a notification lands. Before this there was nowhere to send anyone, so
   clicking a notification opened the feed and hoped the post was near the top. */
#se-library-root .lb-thread-scrim{
  position: fixed; inset: 0; z-index: 60; background: rgba(30, 26, 22, .42);
  backdrop-filter: blur(2px);
}
#se-library-root .lb-thread{
  position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(620px, calc(100vw - 32px)); max-height: min(84vh, 760px);
  display: flex; flex-direction: column;
  background: var(--paper); border: 1.5px solid var(--border); border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28); overflow: hidden;
}
#se-library-root .lb-thread-top{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-bottom: 1.5px solid var(--border); flex: none;
}
#se-library-root .lb-thread-top b{ font-size: 15px; }
#se-library-root .lb-thread-body{ overflow-y: auto; padding: 14px 16px 18px; }
@media (max-width: 560px){
  #se-library-root .lb-thread{
    left: 0; top: auto; bottom: 0; transform: none;
    width: 100%; max-height: 88vh; border-radius: 18px 18px 0 0;
  }
}

/* ── Groups ─────────────────────────────────────────────────────────────────
   Group posts are not a separate silo: a member of the group sees them in their own
   feed. The label is what keeps that honest, so it reads as an attribution rather than
   a decoration. */
#se-library-root .lb-grouplabel{
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 800; padding: 2px 8px 2px 5px; border-radius: 999px;
  background: var(--cream); border: 1.5px solid var(--border); color: var(--ink-soft);
  max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#se-library-root .lb-grouplabel img{ width: 14px; height: 14px; border-radius: 50%; object-fit: cover; flex: none; }

#se-library-root .lb-groups{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
#se-library-root .lb-group{
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--paper); border: 1.5px solid var(--border); border-radius: 14px;
}
#se-library-root .lb-group-img{ width: 42px; height: 42px; border-radius: 12px; object-fit: cover; flex: none; }
#se-library-root .lb-group-img.ph{
  display: flex; align-items: center; justify-content: center;
  background: var(--cream); color: var(--ink-faint);
}
#se-library-root .lb-group-txt{ min-width: 0; }
#se-library-root .lb-group-txt .nm{ font-size: 14.5px; font-weight: 800; color: var(--ink); }
#se-library-root .lb-group-txt .ds{
  font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-top: 1px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#se-library-root .lb-group-txt .mc{ font-size: 12px; font-weight: 700; color: var(--ink-faint); margin-top: 3px; }

/* ── Where a post is going ──────────────────────────────────────────────────
   Absent entirely for a member in no groups, so the composer is unchanged for most
   people rather than carrying a control with one option in it. */
/* WHO WILL SEE THIS. Both options were always rendered here; the fault was that an unselected
   one could not be SEEN. A white pill with a 1.5px light border, next to a solid accent pill, on
   a pale composer, reads as one control and some background. The client posted to a group
   believing he was posting to everyone. So the options now sit in a recessed, bordered group that
   plainly contains more than one thing, and the choice is written underneath in words. */
#se-library-root .lb-postto{
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1.5px solid var(--border);
}
#se-library-root .lb-postto-seg{
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 999px; padding: 3px;
}
#se-library-root .lb-postto-says{
  flex-basis: 100%; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-top: 2px;
}
#se-library-root .lb-postto-lbl{
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-faint); margin-right: 2px; flex-basis: 100%;
}
#se-library-root .lb-postto-opt{
  border: 1.5px solid transparent; background: var(--paper); cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 800; color: var(--ink-soft);
  padding: 6px 13px; border-radius: 999px; max-width: 180px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#se-library-root .lb-postto-opt:hover{ border-color: var(--accent); color: var(--ink); }
#se-library-root .lb-postto-opt.on{ background: var(--accent); border-color: var(--accent); color: #fff; }
/* A photograph being uploaded, shown where the photograph will be. */
#se-library-root .lb-attbusy{ display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: var(--ink-soft); }
/* THE COMPOSER'S OWN RING, under a name nothing else uses. It was `lb-spin`, which is declared
   four times in the built stylesheet, and the VIDEO PLAYER'S copy is the last of the four: this
   ring was inheriting the player's 44px, its absolute positioning and a border colour meant to
   show against a dark video, on a white composer. Same specificity, later wins, no warning. */
#se-library-root .lb-attspin{
  width: 20px; height: 20px; border-radius: 50%; display: block;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: lb-spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce){ #se-library-root .lb-attspin{ animation-duration: 2.4s; } }
#se-library-root .lb-spin{
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: lb-spin 0.8s linear infinite;
}
@keyframes lb-spin{ to { transform: rotate(360deg); } }
#se-library-root .lb-attimg.pending{
  display: flex; align-items: center; justify-content: center;
  background: var(--cream); border: 1.5px dashed var(--border);
}
@media (prefers-reduced-motion: reduce){ #se-library-root .lb-spin{ animation-duration: 2.4s; } }

/* The last card in the courses rail: same footprint as a course card so the row keeps its rhythm, but
   plainly a way out rather than something to watch. */
#se-library-root a.lb-card.seeall{min-width:230px;align-items:center;justify-content:center;gap:8px;padding:26px 18px;text-align:center;border-style:dashed;}
#se-library-root .lb-card.seeall .ic{color:var(--orange-dark);}
#se-library-root .lb-card.seeall .t{font-weight:800;}
#se-library-root .lb-card.seeall .n{font-size:13px;color:var(--ink-faint);font-weight:600;}

/* ── the library's own player chrome ──────────────────────────────────────────────────────────────
   One control bar over two engines: a Vimeo iframe with controls=0, and a hidden <audio> element.
   Everything Vimeo's black bar and Chrome's grey pill used to draw is drawn here instead, in the
   library's palette. See the Player comment in screen-item.jsx for why, and for what had to be
   given back by hand once the native controls were taken away. */
#se-library-root .lb-player-live{position:relative;}
#se-library-root .lb-player-live:focus{outline:none;}
#se-library-root .lb-player-live:focus-visible{outline:3px solid #7fa8ff;outline-offset:3px;}

/* video stage. Vimeo's own poster frame is a real still of the teacher, so it is left to show
   through and our play sits over it on a scrim rather than over a drawn placeholder. */
#se-library-root .lb-vstage{position:relative;background:#000;cursor:pointer;}
#se-library-root .lb-veil{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;background:linear-gradient(rgba(28,26,24,.34),rgba(28,26,24,.58));}
#se-library-root .lb-vclick{position:absolute;inset:0;width:100%;height:100%;background:none;border:none;cursor:pointer;}
#se-library-root .lb-spin{
  position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  border:3px solid rgba(255,255,255,.26);border-top-color:var(--orange);
  animation:lb-spin .8s linear infinite;pointer-events:none;}
@keyframes lb-spin{to{transform:rotate(360deg);}}


/* the waveform. Derived from the item id rather than from decoded peaks (see screen-item.jsx); the
   bars up to the playhead fill, and while it is playing they breathe. */
#se-library-root .lb-wave{display:flex;align-items:center;gap:3px;height:56px;max-width:520px;width:100%;justify-content:center;}
#se-library-root .lb-wave i{width:4px;min-height:4px;flex:none;background:#5b554e;border-radius:2px;transition:background .2s;}
#se-library-root .lb-wave i.on{background:var(--orange);}
#se-library-root .lb-wave.live i{animation:lb-breathe 1.7s ease-in-out infinite;}
@keyframes lb-breathe{0%,100%{transform:scaleY(1);}50%{transform:scaleY(.68);}}
@media (prefers-reduced-motion:reduce){
  #se-library-root .lb-wave.live i{animation:none;}
  #se-library-root .lb-spin{animation-duration:2.4s;}
}

/* the transport bar */
/* The slim row: what is left of our bar when the platform draws its own. No play, no scrub, no time -
   only the things their bar knows nothing about. */
#se-library-root .lb-transport.lb-slim{padding:9px 14px;}
#se-library-root .lb-transport{
  gap:10px;padding:12px 14px;background:#211f1d;border-top:1px solid rgba(255,255,255,.07);}
#se-library-root .lb-tbtn{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;
  border-radius:10px;border:none;background:none;color:#d9d2c6;cursor:pointer;
  transition:background .14s,color .14s;}
#se-library-root .lb-tbtn:hover{background:rgba(255,255,255,.1);color:#fff;}
#se-library-root .lb-tbtn.play{
  width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,255,255,.34);}
#se-library-root .lb-tbtn.play.is-play svg{transform:translateX(1px);}
#se-library-root .lb-tbtn.play:hover{background:var(--orange);border-color:var(--orange);color:#fff;}
#se-library-root .lb-tbtn.txt{
  width:auto;min-width:34px;padding:0 9px;font-family:inherit;font-size:12.5px;font-weight:800;
  letter-spacing:.01em;font-variant-numeric:tabular-nums;}
#se-library-root .lb-tbtn.on{background:#faf8f4;color:#33312e;}
#se-library-root .lb-tbtn.on:hover{background:#fff;color:#33312e;}

/* Volume, speed, CC, fullscreen and the Watch/Listen toggle as one group, so a phone wraps them
   together and to the right rather than orphaning the last two under the scrub. */
#se-library-root .lb-tright{display:flex;align-items:center;gap:8px;margin-left:auto;}

/* the scrub bar is also a role="slider", so it needs a visible focus ring and a thumb that grows */
#se-library-root .lb-scrub{touch-action:none;}
/* A seek takes a second or two and used to show nothing at all, on any engine: with controls=0 the
   platform draws no spinner of its own. The filled part pulses while the engine catches up, which is
   the only indication an audio teaching can have (it has no picture to put a spinner on). */
#se-library-root .lb-scrub.seeking i{animation:lb-seekpulse 1s ease-in-out infinite;}
@keyframes lb-seekpulse{0%,100%{opacity:1;}50%{opacity:.45;}}
@media (prefers-reduced-motion:reduce){
  #se-library-root .lb-scrub.seeking i{animation:none;opacity:.7;}
}
#se-library-root .lb-scrub b{transition:transform .12s;}
#se-library-root .lb-scrub:hover b, #se-library-root .lb-scrub:focus-visible b{transform:translate(-50%,-50%) scale(1.28);}
#se-library-root .lb-scrub:focus-visible{outline:2px solid #7fa8ff;outline-offset:5px;}

/* The frame you would land on, floating above the bar while you drag. This is the last thing an iframe
   made impossible: the frames belong to the player, and now the player is ours. */
#se-library-root .lb-strip{
  position:absolute;bottom:22px;transform:translateX(-50%);pointer-events:none;z-index:7;
  display:flex;flex-direction:column;align-items:center;gap:4px;}
/* The sheets are cached and pre-fetched now (see ensureSheet in screen-item.jsx) and the last good
   frame is held while a new one arrives, so this colour is rarely seen at all. It is a warm grey
   rather than #111 for the moment it is: a black rectangle under the cursor reads as a fault. */
#se-library-root .lb-strip-img{
  border-radius:8px;border:2px solid rgba(255,255,255,.9);background-repeat:no-repeat;
  background-color:#2a2724;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.8);}
/* `var(--mono, ui-monospace)` looked safe and was not: --mono is defined nowhere in either sheet, and
   where the fallback is not honoured the whole declaration is dropped and the label inherits a SERIF -
   David saw "a weird times new roman thing" hanging under the scrub bar. Named stack, ending in the
   generic, and the same weight and figures as the clock at the other end of the bar. */
#se-library-root .lb-strip span{
  font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  font-size:11.5px;font-weight:700;color:#fff;
  background:rgba(17,16,15,.92);border-radius:5px;padding:3px 7px;font-variant-numeric:tabular-nums;
  letter-spacing:.01em;}
@media (max-width:620px){
  /* No hover on a touch screen, and a 300px frame over a 375px bar would cover the thing being aimed at. */
  #se-library-root .lb-strip{display:none;}
}

/* volume. The slider is closed until the icon is hovered or focused, because the bar has to survive
   a phone-width layout and this is the control that can afford to be second. */
#se-library-root .lb-vol{display:flex;align-items:center;}
#se-library-root .lb-volrange{
  width:0;opacity:0;height:4px;padding:0;margin:0;accent-color:var(--orange);
  transition:width .18s ease,opacity .18s ease,margin .18s ease;}
#se-library-root .lb-vol.open .lb-volrange, #se-library-root .lb-vol:focus-within .lb-volrange{
  width:76px;opacity:1;margin-left:7px;}

/* the speed menu */
#se-library-root .lb-menu{position:relative;}
#se-library-root .lb-pop{
  position:absolute;right:0;bottom:calc(100% + 12px);z-index:6;min-width:88px;padding:6px;
  display:flex;flex-direction:column;gap:2px;background:#faf8f4;border-radius:14px;
  box-shadow:0 20px 44px -16px rgba(0,0,0,.65);}
#se-library-root .lb-pop button{
  font-family:inherit;font-size:13px;font-weight:800;padding:7px 12px;border-radius:9px;
  color:#33312e;text-align:left;font-variant-numeric:tabular-nums;}
#se-library-root .lb-pop button:hover{background:var(--cream-deep);}
#se-library-root .lb-pop button.on{background:var(--orange);color:#fff;}

/* fullscreen is our shell rather than the iframe, so the bar, the resume prompt and the
   Watch/Listen toggle are all still there inside it */
#se-library-root .lb-player:fullscreen{
  border-radius:0;box-shadow:none;width:100vw;height:100vh;display:flex;flex-direction:column;
  background:#000;}
#se-library-root .lb-player:fullscreen .lb-vstage{flex:1;min-height:0;aspect-ratio:auto;}
#se-library-root .lb-player:fullscreen .lb-vimeo{width:100%;height:100%;aspect-ratio:auto;}
#se-library-root .lb-player:fullscreen .lb-transport{background:rgba(18,17,16,.94);}

@media (max-width:620px){
  #se-library-root .lb-transport{gap:8px;padding:10px 10px 11px;}
  #se-library-root .lb-tbtn{width:32px;height:32px;}
  #se-library-root .lb-transport .time{font-size:11.5px;}
  #se-library-root .lb-transport .lb-fmt button{padding:6px 10px;}
}

/* ── the audio stage ──────────────────────────────────────────────────────────────────────────────
   The teaching's own artwork IS the stage. `.lb-stage-live.audio` in the root sheet is the older
   flex-row surface; these rules are two classes deep as well and come later, which is what lets them
   win without touching that rule.

   The diagonal hatch is the library's placeholder pattern, the same one a card with no image gets, so
   it belongs here only when there is no artwork - one teaching in ninety-six. With a picture there,
   the scrim is what keeps a white waveform and an orange play readable over any photograph. */
#se-library-root .lb-stage-live.lb-astage{
  position:relative;display:block;padding:0;overflow:hidden;aspect-ratio:16/6;min-height:230px;
  background:repeating-linear-gradient(135deg,#3b3936 0 14px,#333130 14px 28px);}
#se-library-root .lb-astage-art{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
#se-library-root .lb-astage.has-art::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 46%,rgba(24,22,20,.62) 0%,rgba(24,22,20,.42) 45%,rgba(24,22,20,.58) 100%);}
#se-library-root .lb-astage-in{
  position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;padding:22px 18px;}
/* ON SUSPICION, NOT AS A PROVED FIX, and it needs the `controls` attribute on the element to work
   at all: Chrome's UA stylesheet has `audio:not([controls]) { display: none !important }`, which
   beats this rule. Without that attribute this block applies its width, height and opacity and the
   computed display stays `none` - which is what a change that looks applied and is not looks like.
   This was `display:none`, and iOS Safari has a history of
   refusing playback on a media element it does not consider laid out - which is the one remaining
   candidate cause for fault 1, the guided meditation that will not start on David's iPhone. That
   fault cannot be reproduced on any machine here (the automated Chrome has no media pipeline at
   all, and the Simulator needs an Xcode nobody here can install), so this is a change made because
   it is cheap and plausible, and it is NOT evidence that the fault is closed.
   Nothing is visible either way: one pixel, transparent, taking no clicks, and the library draws
   its own controls. In flow rather than positioned, so it cannot widen the document. */
#se-library-root .lb-audio-el{
  display:block;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;}
@media (max-width:620px){
  #se-library-root .lb-stage-live.lb-astage{aspect-ratio:16/10;min-height:210px;}
}

/* The YouTube API builds its own iframe inside the host div, so the sizing has to reach through it. */
#se-library-root .lb-ythost{background:#000;}
#se-library-root .lb-ythost iframe{display:block;width:100%;height:100%;border:0;}

/* headings and chapter rows inside a popover menu (the settings gear) */
#se-library-root .lb-pop.wide{min-width:150px;max-height:280px;overflow-y:auto;}
#se-library-root .lb-pop-h{
  font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);padding:6px 12px 3px;}
#se-library-root .lb-pop-h:not(:first-child){margin-top:4px;border-top:1px solid var(--border-soft);padding-top:8px;}
#se-library-root .lb-pop button .ch-t{
  display:inline-block;min-width:44px;color:var(--ink-faint);font-variant-numeric:tabular-nums;}

/* ── the WHOLE library column matches the site header's column ──
   David: the subnav "is supposed to stretch to the whole screen, and all the contents should align with
   the current header - i.e. start where the logo starts on the left and end where the calendar link is
   on the right", and then: "the content of the page - is not aligned - thats what I meant too".

   So this is not a subnav fix, it is a column fix. Three things were in play:

   1. #se-library-root sits inside an Elementor content container that is 1140px wide, so nothing in the
      library could ever reach the edges from inside it. The negative margins pull the root out to the
      viewport. `transform: translateX` is the other common way and must NOT be used: the subnav is
      position:sticky and a transform creates a containing block that silently kills the stickiness.
      Safe against a horizontal scrollbar because html and body are both overflow-x:hidden here.

   2. --maxw was 1140px and drives .page, .se-lib-ssr and the subnav's inner alike, so moving it to the
      header's own 1340px aligns the headings, the cards, the footer and the bar in one change rather
      than four. One source of truth: do not hardcode 1340 anywhere else.

   3. The subnav's inner had 24px of side padding while the header has none, so even at the same width it
      would have sat 24px inside the logo.

   1340px and zero padding are the header's numbers, read off the live page rather than guessed: its
   column is `min(100%, 1340px)`, centred, no side padding. Below 1340px the header runs flush to the
   screen edges, so the library now does too. That is what aligning with it means; if a gutter is wanted
   it has to be added to BOTH, not to one. */
#se-library-root{--maxw:1340px;--gutter:20px;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
#se-library-root .lb-subnav{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}

/* THE GUTTER, and why it is expressed this way rather than as a media query.
   Pulling the column out to the viewport left the content hard against the screen edge on a phone
   (David). The box is therefore --maxw PLUS two gutters wide, and carries the gutter as padding, with
   box-sizing:border-box already set globally on everything in the root. The effect:

     viewport >= 1380px   the box is 1380 centred, 20px padding, so the CONTENT is exactly 1340 and
                          still lines up with the site header's own 1340 column
     viewport <  1380px   the box is the full width and the 20px padding becomes a real gutter

   So the alignment David asked for survives on a desktop and the edges stop touching on a phone,
   without a breakpoint to keep in step with anything. Between 1340 and 1380 the content is a few pixels
   narrower than the header, which is not visible and is the price of having no breakpoint at all. */
#se-library-root .page, #se-library-root .se-lib-ssr, #se-library-root .lb-subnav .in{
  max-width:calc(var(--maxw) + var(--gutter) * 2);
  padding-left:var(--gutter);padding-right:var(--gutter);}

/* ── language toggle ──
   A course taught more than once, in more than one language, offers the others here. Deliberately
   quiet: it is wayfinding, not a call to action, and it sits directly above Buy and Become a
   Supporter, which are the two things on this screen that should be shouting. So a pair of small
   outlined pills in the existing ink/border palette rather than anything using --orange. */
#se-library-root .lb-langs{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 14px;}
#se-library-root .lb-lang{font:inherit;font-size:12.5px;font-weight:800;letter-spacing:.01em;padding:4px 12px;border-radius:999px;cursor:pointer;background:transparent;color:var(--ink-soft);border:1px solid var(--border);transition:color .12s,border-color .12s,background .12s;min-height:0;}
#se-library-root .lb-lang:hover{color:var(--ink);border-color:var(--ink-faint);}
#se-library-root .lb-lang.on{cursor:default;background:var(--cream-deep);color:var(--ink);border-color:transparent;}
#se-library-root .lb-lang:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}

/* ── the mobile audit's CSS fixes, 2026-08-04 ───────────────────────────────────────────────────────
   All of these are ADDITIVE and come last on purpose: every one overrides an earlier rule by order or
   by the `.lb-mob` class rather than editing it, so the whole block reverts by deleting it. The
   findings are written up in BACKLOG.md under "Practice Library: mobile audit"; the letters below are
   its numbering.

   M1. THE ONE THAT MATTERED. `.lb-mob .lb-home` said `grid-template-columns:1fr`, and `1fr` is
   `minmax(auto,1fr)`, so the track cannot shrink below its content's min-content width: a 350px
   container resolved to a 526px column. The desktop rule three hundred lines up says `minmax(0,1fr)`
   for exactly this reason. Because Elementor sets `html,body{overflow-x:hidden}` the 176px overhang
   was CLIPPED rather than scrollable, so `scrollWidth` read a reassuring 390 while 104 elements sat
   outside the viewport - including four of the feed's five filter buttons, which no thumb could reach.
   `min-width:0` on the children is the other half: a grid item's automatic minimum size is its
   content, so the track is only as free as its items are. */
#se-library-root .lb-mob .lb-home{grid-template-columns:minmax(0,1fr);}
#se-library-root .lb-mob .lb-home>div, #se-library-root .lb-mob .lb-home>aside{min-width:0;}
#se-library-root .lb-mob .lb-seg{min-width:0;}

/* M2. A SECOND overflow underneath M1, with its own cause, which is why fixing M1 alone leaves a feed
   that still cuts words off. `.lb-card .body` is `flex:1` with no `min-width:0`, so on a row card it
   cannot shrink under its content - and `.lb-fromcourse` ("Session 1 of 2 - How to Become...") is long.
   The ellipsis was already on `.lb-fromcourse span`; it never got the chance to apply because nothing
   above it would give up width. */
#se-library-root .lb-card .body{min-width:0;}

/* A8. A horizontal swipe that ran out of rail continued into the browser's own back gesture, so
   flicking through a rail could leave the library altogether. */
#se-library-root .lb-scroller{overscroll-behavior-x:contain;}

/* A9. The seek bar was 6px tall, which is not something a thumb can hit, and it is the control people
   reach for most. The bar KEEPS its 6px look: the element grows to 24px (WCAG 2.5.8's minimum) and the
   track is drawn by a pseudo-element inset inside it, so the visual is unchanged and only the hit area
   grows. The three layers move with it, and the handle stays on `top:50%`, which is 12px - exactly the
   centre of the 6px track at 9px + 3px. Deliberately NOT done by growing the element and letting the
   background fill it: that draws a fat grey slab across the player.
   Not done with a ±14px overflowing pseudo-element either, the other obvious trick, because the bar
   wraps at this width with an 8px row gap and the extension would have swallowed taps on Watch/Listen
   sitting on the row below. */
#se-library-root .lb-mob .lb-scrub{height:24px;background:transparent;}
#se-library-root .lb-mob .lb-scrub::before{content:'';position:absolute;left:0;right:0;top:9px;height:6px;border-radius:3px;background:#4a4640;}
#se-library-root .lb-mob .lb-scrub u, #se-library-root .lb-mob .lb-scrub i{top:9px;bottom:9px;}

/* A9 continued. Watch/Listen measured 27px, and the 620px media query was making that WORSE by
   trimming the padding further for narrow screens - the opposite of what a touch target wants. The
   `.lb-mob` prefix is what lets this win against that rule without editing it. */
#se-library-root .lb-mob .lb-transport .lb-fmt button{padding:11px 13px;}

/* A9 continued. The back chevron and the "See all"/"Show all N" links were 18px tall. `.sm` is left
   out on purpose: it is used for a "3 more" inside a row of tags, and giving that 44px would push the
   tag row out of line to fix something that is not a primary action. */
#se-library-root .lb-mob .lb-link:not(.sm){min-height:44px;display:inline-flex;align-items:center;}

/* A12. The tab bar is pinned to the bottom of the screen and had `border-radius:0 0 34px 34px`, so its
   bottom corners curved away from the screen edge and left two white slivers, clearest at 320px. It is
   a leftover from the design prototype, where this bar sat inside a rounded phone shell. */
#se-library-root .lb-tabbar{border-radius:0;}

/* M254. THE OTHER HALF OF THE SAME PROTOTYPE LEFTOVER, and the client photographed it on the podcast
   page: "bottom menu on the podcast is not full width". The bar carried max-width:430px with
   margin:0 auto, so on any phone wider than that it stopped short of both screen edges and the page
   showed down either side of it - an iPhone 16 Pro Max is 440pt, which is where he saw it. A12 above
   removed the rounded bottom corners of the same phone shell; the width cap is the rest of it.
   Safe because the bar renders only in the mobile branch (the {mobile && ...} guard in
   library-prod.jsx), so
   nothing uncaps a bar across a desktop window. The notifications sheet that opens over this bar
   carried the identical cap and is uncapped with it, or a 430px sheet would sit inset above a
   full-width bar and read as a mistake. */
#se-library-root .lb-tabbar{max-width:none;}
#se-library-root .lb-notif-sheet{max-width:none;}

/* M3. The notifications sheet sits at z-index 151, above the tab bar's 150, so it covers the Alerts
   tab that opened it and carried no visible way out. Tapping outside always dismissed it, which is the
   ordinary bottom-sheet convention, so this is an affordance rather than a rescue: a grab handle, which
   is what a phone user reads as "this pulls away". */
#se-library-root .lb-notif-sheet .lb-notif-top{position:relative;}
#se-library-root .lb-notif-sheet .lb-notif-top::before{content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:38px;height:4px;border-radius:2px;background:var(--border);}

/* M5. About 240px went on saying who you are before the member home said what to do, and the Continue
   card then took a further 422px because its thumbnail keeps 16/10 at full width - putting Resume at
   y=776 of an 844px viewport, which is visible with nothing to spare and below the fold on a shorter
   phone. Capping the thumbnail is the cheap half of that and does not touch the desktop card. */
/* M5's THUMBNAIL CAP IS WITHDRAWN, and it was wrong twice over.
   It read `.lb-mob .lb-resume .lb-thumb{aspect-ratio:auto;max-height:150px}`, meaning to shorten the
   Continue card so Resume sat further up the screen. What it actually did: `.lb-thumb` sizes itself by
   aspect-ratio because the image inside is `position:absolute;inset:0` and contributes no height, so
   `aspect-ratio:auto` left the box with NO intrinsic height at all. It collapsed to 45px - not even the
   150px cap - and showed 23% of the picture, a band across the middle of somebody's face. David: "still
   tiny image here on home".
   The trade was bad even if it had worked: it bought about 90px of scroll by ruining the one picture on
   the member's home screen, and Resume was already visible without it (measured at y=776 in an 844px
   viewport before any of this). So the aspect ratio from the root sheet stands, and M5 keeps only the
   part that was actually a problem - the greeting block's height, which is a copy and layout question
   rather than a CSS cap. */

/* A13. The tap highlight was Chrome's default `rgba(51,181,229,.4)`, so every tap on a cream and warm
   brown site flashed Android blue. It inherits, so the token block is the only place it needs saying. */
#se-library-root .lb{-webkit-tap-highlight-color:rgba(196,106,38,.18);}

/* A9 REGRESSION FIX, same day. Making Watch/Listen a real touch target (padding 11px 13px, above)
   pushed the secondary group off the side of the screen: David reported "the audio toggle disappeared
   out of screen" on his iPhone, and it measured `.lb-tright` at 418px wide, right edge 448px, inside a
   350px bar in a 390px viewport.
   `.lb-tright` exists so the secondary controls wrap as ONE group instead of orphaning themselves
   left-aligned on a second row - that is the comment above it in screen-item.jsx and it is still right.
   What it lacked is the ability to wrap WITHIN itself once its own contents outgrow the bar, which is
   what a bigger toggle did. So: wrap inside the group too, still right-aligned so it reads as one
   cluster, and never wider than the bar. */
#se-library-root .lb-mob .lb-tright{flex-wrap:wrap;justify-content:flex-end;max-width:100%;row-gap:8px;}


/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   RECOVERED 2026-08-04, and the recovery is the lesson.

   These eleven rules were LIVE in the generated `se-library-v83.css` and had never been written into
   this source file - somebody edited the built stylesheet directly, which BUILD.md tells you not to do
   precisely because of what happened next: I rebuilt from source, the build was clean, every check
   passed, and two finished features silently left the site. David noticed within the hour ("At some
   point these got broke - the teacher image over card feature").

   BUILD.md already says to diff a candidate JS bundle against the live one before deploying, and I did
   that, and it is how I proved I had not dropped another session's work. It says nothing about doing
   the same for CSS, so I did not, and the CSS is where the loss was. That rule now exists for both.
   Restored verbatim, comments and all, into the file they should always have been in.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── A LOCKED TEACHING SHOWS ITS OWN STILL ─────────────────────────────────────────────────────────
   The page for a teaching you cannot open used to be a striped grey rectangle reading "video / 1h 49m"
   and nothing else - no title, no description, no teacher. David: "should show the thumbnail and a
   lock, not the weird diaganol placeholder thing". The stripes are the design's empty state, drawn when
   there is no image; there is always an image. `.lb-locked` needs the positioning context because
   .lb-vposter is absolute, and `.lb-stage.over` is the darkening veil the lock sits in. */
#se-library-root .lb-player.lb-locked{ position: relative; }
#se-library-root .lb-stage.over{
  background: linear-gradient(180deg, rgba(28,26,24,.34) 0%, rgba(28,26,24,.58) 100%);
  position: relative;                      /* above .lb-vposter, which has no z-index, by DOM order */
}
#se-library-root .lb-stage.over .mono{ color: #ded7cd; text-shadow: 0 1px 3px rgba(0,0,0,.55); }
#se-library-root .lb-lockdisc{
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(28,26,24,.55); color: #f3ede4;
  border: 1.5px solid rgba(243,237,228,.35);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
#se-library-root .lb-stage:not(.over) .lb-lockdisc{ background: none; border: 0; color: #b6ada0; }

/* A resource that is named but not yours yet. Not `pointer-events:none`: the row should still be
   hoverable and readable by a screen reader, it simply must not go anywhere. */
#se-library-root .lb-res.is-locked{
  cursor: default; opacity: .62; background: var(--paper-2, var(--paper));
  border-style: dashed;
}
#se-library-root .lb-res.is-locked:hover{ border-color: var(--border); }
/* The teacher's face on a guided meditation card. Manu's point: the new meditation cards carry a
   commissioned landscape photograph instead of a video still, so the card stopped showing who is
   guiding it. `.lb-cardwho` keeps the face and the name together against .who's 12px column gap,
   and the avatar is given `flex:none` because a long name in a narrow rail card would otherwise
   squash the circle into an oval. */
#se-library-root .lb-card .who .lb-cardwho{
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
}
#se-library-root .lb-card .who .lb-cardwho > :first-child{ flex: none; }

/* The teacher's face ON the meditation card's photograph, bottom left. Right is the duration pill and
   the bottom four pixels are the progress bar, so this sits 8px in from both. The ring and the shadow
   are not decoration: these photographs are landscapes and a bare circle disappears into a pale sky. */
#se-library-root .lb-card .lb-cardface{
  position: absolute; left: 10px; bottom: 12px; z-index: 3;
  display: block; border-radius: 50%; line-height: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,.92), 0 4px 12px -3px rgba(51,49,46,.55);
}
#se-library-root .lb-card .lb-cardface > *{ display: block; }



/* ── two fixes from David on a phone, 2026-08-04 ────────────────────────────────────────────────────

   THE SUPPORTER TAG WAS CUT OFF ON A RAIL CARD, and my own audit could not see it. `.lb-tag` is
   `white-space:nowrap` for good reason - a pill that wraps mid-phrase looks broken - but "Included for
   Samadhi Supporters" is 256px of nowrap inside a 200px rail card on a phone, so 72px of it was clipped
   by the card. Measured, at 390px, exactly as David screenshotted it.
   Why the mobile audit missed it: every overflow probe I wrote excluded anything inside a `.lb-scroller`,
   because a rail's cards are SUPPOSED to sit outside the viewport. That is true of the cards and not of
   what is clipped INSIDE one, so a whole class of bug was invisible to the check. Worth remembering: an
   exclusion that makes a probe quiet also makes it blind.
   `.inc` is the only tag long enough to need this, so it is the only one allowed to wrap. */
#se-library-root .lb-tag.inc{white-space:normal;}

/* A search row that has a real picture is a picture, not an icon in a tinted box: no background to show
   around a cover-cropped still, and no orange fill behind it on the selected row either, which would
   otherwise show at the corners of a teacher's round avatar. */
#se-library-root .lb-searchrow .ic.pic{background:none;overflow:hidden;}
/* AND THE IMAGE GETS NO RADIUS OF ITS OWN. Same theme rule that rounded the bottom of every card
   thumbnail, documented at .lb-thumb-img in 00-root.css: Elementor's global kit carries
   .elementor-kit-8929 img { border-radius: 20px }, and 20px on a 34px box is very nearly a circle - so
   course stills came out round when only the teacher's avatar was meant to be. The .ic box already
   clips, so the shape belongs to the container, exactly as it does for a card thumbnail. */
#se-library-root .lb-searchrow .ic.pic img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;}
#se-library-root .lb-searchrow.on .ic.pic{background:none;color:inherit;}

/* THE TWO STICKY BLOCKS BELOW WERE APPENDED TO THE GENERATED se-library-v94.css AND NEVER PUT BACK
   HERE, so every source rebuild silently dropped them and put the 59px gap back. Found by M21, which
   could not touch this file at all without first proving a rebuild matched what was deployed: it did
   not, by exactly these 50 lines. Ported verbatim, in the position they held in the built file. Edit
   this file, never the generated one. */

/* ── THE STICKY SUB-NAV SAT 59px DOWN THE SCREEN ───────────────────────────────────────────────────
   David: "Error in practice library with the sticky menu on desktop, gap between it and the top of the
   page? exists when both logged in and not."

   `.lb-subnav { top: 59px }` is an offset for a sticky site header to sit above. There is no sticky site
   header on these pages and there never was: the library renders inside SE_Chrome, whose header is
   `position: relative` (se-chrome-v18.css line ~373) and scrolls away like any other content. The only
   fixed things on the page are the WhatsApp button and the login modal. So the 59px was reserving space
   for nothing, and a 59px strip of scrolling cards ran along the top of the screen above the bar.

   `.lb-sticky` - the sidebar panels on a teaching and a course - had the same fault from the same cause,
   at 88px, which is 59 plus a bit. With the sub-nav stranded at 59 and 52 tall it occupied 59 to 111, so
   88 put those panels UNDERNEATH it. Fixed together because it is one wrong assumption, not two bugs.

   THE ADMIN BAR IS THE ONE THING THAT DOES SIT ABOVE. WordPress makes it `position: fixed; top: 0` and
   pushes the document down with `html { margin-top: 32px }`, so a sticky element at `top: 0` would slide
   under it - which is a gap of a different kind and would have been my own next bug report. Hence the
   `body.admin-bar` overrides. Below 782px the admin bar becomes `position: absolute` and stops
   overlaying, so it needs no offset there, and the sub-nav is hidden on the mobile frame anyway. */
#se-library-root .lb-subnav{ top: 0; }
#se-library-root .lb-sticky{ top: 68px; }          /* the 52px bar, plus room to breathe */

body.admin-bar #se-library-root .lb-subnav{ top: 32px; }
body.admin-bar #se-library-root .lb-sticky{ top: 100px; }
@media screen and (max-width: 782px){
  body.admin-bar #se-library-root .lb-subnav{ top: 0; }
  body.admin-bar #se-library-root .lb-sticky{ top: 68px; }
}

/* ── AND NOW THERE IS A STICKY HEADER AFTER ALL ─────────────────────────────────────────────────────
   The rule above says the library's bar sits at the very top because nothing is pinned above it. That
   was true when it was written and is no longer: the site header now slides away on scroll down and
   returns on scroll up, so for as long as it is on screen it IS pinned above this bar.

   Rather than hardcode its height - which is the mistake the 59px was, measured once and then wrong
   forever - se-chrome-v3.js publishes what the header is actually occupying as `--se-head-h` on <html>,
   zero while it is slid away, and this adds it. The two files never need to agree on a number.

   The fallback of 0px is deliberate and is the no-JavaScript case: the variable is never set, the header
   is not sticky either, and the bar correctly sits at the top. */
#se-library-root .lb-subnav{ top: var(--se-head-h, 0px); }
#se-library-root .lb-sticky{ top: calc(var(--se-head-h, 0px) + 68px); }

body.admin-bar #se-library-root .lb-subnav{ top: calc(var(--se-head-h, 0px) + 32px); }
body.admin-bar #se-library-root .lb-sticky{ top: calc(var(--se-head-h, 0px) + 100px); }
@media screen and (max-width: 782px){
  body.admin-bar #se-library-root .lb-subnav{ top: var(--se-head-h, 0px); }
  body.admin-bar #se-library-root .lb-sticky{ top: calc(var(--se-head-h, 0px) + 68px); }
}

/* ── M23. THE 44px THUMB TARGET, on touch devices only (2026-08-10) ─────────────────────────────────
   The 2026-08-04 audit's A9 above did NOT pass these controls, which is worth stating because the
   mission brief says it did: A9 measured them, fixed the two worst to **24px** - WCAG 2.5.8's AA
   minimum - and left everything already over 24px alone. The seek bar went 6 -> 24 and Watch/Listen
   27 -> 44 on that pass. What was left is the gap between 24px (the standard we have to meet) and
   44px (WCAG 2.5.5 AAA, and Apple's and Google's own guidance, which is what a thumb actually needs).
   So this is a raise from a passing standard to a better one, not a regression being fixed.

   `(pointer:coarse)` rather than `.lb-mob`, deliberately. `.lb-mob` is set by JavaScript at 860px, so
   an iPad in landscape is 1080px wide, gets the desktop tree, and is still a touch device with no
   mouse - exactly the case the brief names. A pointer query asks the question that actually matters
   and leaves every desktop pixel untouched.

   Sizes are raised on the element itself. Overflowing pseudo-element expanders are the other obvious
   trick and are deliberately not used: `.lb-filters` has an 8px gap, `.lb-quick` 9px and `.lb-tags`
   7px, so a +-7px expander would overlap its neighbour and a tap near an edge would fire the wrong
   chip. That is the same reasoning A9 recorded for the seek bar, one row over. */
@media (pointer:coarse){

  /* The three the brief names by name: "Create a free account", "Sign in" and "Filters" are all
     `.lb-btn.sm`, at 40px. The base `.lb-btn` is already 48px. */
  #se-library-root .lb-btn.sm{min-height:44px;}

  /* "Try again" on the unreachable-conversation note. Its type came down from 16px to 13px to match
     the note it sits in (M247), so the target has to be stated here rather than left to fall out of
     the font size: 6px of padding on 13px text is about 28px. Same construction as `.lb-btn.sm`
     directly above, and it is why the type could move at all. */
  #se-library-root .lb-cnote-retry{min-height:44px;}

  /* The duration and format chips, 30-31px. The pill grows rather than gaining an invisible skirt,
     which also puts them in line with the "Filters" button standing beside them in the same row. */
  #se-library-root .lb-chip{min-height:44px;}
  #se-library-root .lb-quick .lb-chip{min-height:44px;}

  /* The player transport: play 38, mute 34 (32 under the 620px query), speed 34. Growing these makes
     the bar taller, not wider - the scrub between them is `flex:1` and keeps its width - so a narrow
     phone wraps exactly as it did. */
  #se-library-root .lb-tbtn{width:44px;height:44px;}
  #se-library-root .lb-tbtn.play{width:44px;height:44px;}
  #se-library-root .lb-tbtn.txt{width:auto;min-width:44px;}

  /* The seek bar. A9 took it to 24px with a `::before` drawing the 6px track inside a transparent
     box; this is the same construction at 44px, with the track re-centred (44-6)/2 = 19px. The
     handle stays on `top:50%`, which is 22px, and 19 + 3 is 22. */
  #se-library-root .lb-mob .lb-scrub, #se-library-root .lb-scrub{height:44px;background:transparent;}
  #se-library-root .lb-mob .lb-scrub::before, #se-library-root .lb-scrub::before{content:'';position:absolute;left:0;right:0;top:19px;height:6px;border-radius:3px;background:#4a4640;}
  #se-library-root .lb-mob .lb-scrub u, #se-library-root .lb-scrub u, #se-library-root .lb-mob .lb-scrub i, #se-library-root .lb-scrub i{top:19px;bottom:19px;}

  /* The dana nudge's dismiss cross was 28px, and it is the control a member reaches for when they do
     not want the thing - the one place a mis-tap is most annoying. Its background is transparent
     until hover, so only the hit area changes; `top`/`right` come in by the 8px it grew. */
  #se-library-root .don-nudge-dismiss{width:44px;height:44px;top:2px;right:2px;}

  /* "Offer dana" is `.don-btn.sm` at 42px - two pixels short, and it is the module's primary action. */
  #se-library-root .don-btn.sm{min-height:44px;}

  /* The teaching's tag row. `a.lb-tag`, NOT `.lb-tag`: the same class is a badge ("New", "Free",
     "Supporter or buy", "Done") on cards all over the library, and those are `span`s that nobody taps.
     Growing every one of them would fatten a card footer to fix a control that is not there. Only the
     four links under a teaching's title are targets, and only they grow. */
  #se-library-root a.lb-tag{min-height:44px;}
}

/* M34 item 6: the search screen's result rows are REAL anchors (screen-search.jsx says why: a
   middle click and "copy link address" have to work on a list of results). The panel's rows are
   buttons, so nothing here ever set a colour, and on a results page the theme's link colour
   (#a2551d) therefore inherited straight into every row. The excerpt line and its <mark>
   highlights, which set no colour of their own, came out orange on all 77 rows. Colour the anchor
   and everything under it follows; .t and .s already set their own and are unaffected. */
#se-library-root a.lb-searchrow{color:var(--ink);text-decoration:none;}

/* ── M184: text somebody typed may not decide how wide the page is ──────────────────────────────
   FAULT 2, and this is the half that genuinely scrolls. A bare web address pasted into a
   teaching's description is one unbreakable token. With `overflow-wrap: normal` nothing may break
   it, so it sets the BLOCK'S MIN-CONTENT to its own rendered width - measured at 363.2px on item
   121 inside a column with 335px to give - and because the item screen's grid track is `1fr`,
   which is `minmax(auto, 1fr)`, the track cannot go below that. The column grows, and takes the
   title, the tag row, the lede and the description out to 383.2px on a 375px screen: 30 elements
   past the right edge. The library's own pages carry NO clip - `html` and `body` both compute
   `overflow-x: visible` here - so unlike the event templates nothing hides it and the page really
   does slide sideways under a thumb.

   Found by M186 on item 121 and reproduced by M184 on the same teaching. It did not show up in
   M184's own sweep, or in M178's, because both sampled ONE teaching per template and the fault
   lives in the CONTENT: 17 of 259 published teachings with a description carry an unbroken run of
   40 characters or more, 13 carry 60 or more, and items 147 and 151 - the ones that got sampled -
   are fine. A per-template sweep cannot find a per-teaching fault.

   `anywhere` AND NOT `break-word`, and the difference is the entire fix. Both will break a long
   token rather than let it stick out, so both LOOK right in a screenshot. Only `anywhere` is taken
   into account when the browser computes the block's min-content size, which is the number the grid
   track is reading. `break-word` would have wrapped the text and left the column exactly as wide
   and the page exactly as broken - the shape of false fix this project keeps finding.

   Scoped to the three blocks that carry a member's or a teacher's own prose rather than to the
   whole root: `anywhere` will break a word mid-syllable when it has to, which is right for a pasted
   URL in a description and wrong for a UI label that should simply be short.

   NOT `overflow-x: hidden` anywhere, per the standing rule in MOBILE-FAULTS.md: this makes the page
   fit, it does not hide the fact that it does not. */
#se-library-root .lb-readmore, #se-library-root .lb-readmore p, #se-library-root .lb-lede, #se-library-root .lb-h1{overflow-wrap:anywhere;}

/* The structural half, and it is the same fault the mobile-audit note above records under M1: a
   grid item's automatic minimum size is its content, so a track is only ever as free as its items
   are. `.lb-home` got `min-width: 0` then; the ITEM screen's grid is built with an inline style in
   `screen-item.jsx` and has no class, so it was missed. Reached here by its position rather than by
   a class, deliberately narrow: the direct children of the grid that sits inside `.lb`. Without
   this the rule above fixes today's pasted address and the next wide thing - a table, an image with
   an intrinsic width, a long unbroken word in a heading - reopens it. */
#se-library-root .lb > div > div, #se-library-root .lb > div > aside{min-width:0;}

/* ── M240: the "Show all N" control on a teaching's tag row ─────────────────────────────────────
   David: "on the teachings on mobile the title should sit above the video and the tags should be
   like one or two and (see more) because the title of the video is below the fold."

   NO WIDTH QUERY HERE, DELIBERATELY. The component renders this only when its `mobile` prop is
   true, and that prop is a live matchMedia listener on `(max-width: 860px)` in library-prod.jsx.
   A second breakpoint written here could fall out of step with that one and produce a control
   styled for a phone on a desktop, or the reverse; there is one source of the breakpoint.

   IT IS THE QUIETEST THING IN THE ROW, AND THAT IS THE WHOLE POINT OF THIS RULE.
   It shipped at 16px/800 and David said so from his phone: "The 'show all 5' text is quite big
   compared - needs styling check." He was right and it was backwards - the control that HIDES the
   tags was drawing more attention than the tags. It now matches `.lb-tag` on every dimension that
   sets visual weight (12px, the same 5px/11px padding, the same pill and the same soft border) and
   is deliberately PLAINER on the two that remain: weight 700 against their 800, and no fill at all
   where each of them carries one. Plainer, not smaller, is how it stays findable.

   THE 16px FLOOR AND "MATCH THE CHIPS" CANNOT BOTH BE OBEYED, and this rule breaks the floor
   knowingly rather than by drift. Measured on the deployed page: every chip is 12px, so 16px is a
   third larger than anything beside it and no amount of weight or colour hides that. The floor
   comes from M197 and its subject is iOS Safari's zoom-on-focus, which fires when a FORM CONTROL
   under 16px takes focus - M197's own 27 were `.bk-field` inputs, selects and textareas at 15.5px
   and a card panel at 15px. A `<button>` presents no keyboard and no picker, so focusing it zooms
   nothing. The proof that costs nothing to check is already in this row: THE CHIPS THEMSELVES ARE
   12px LINKS AND HAVE ALWAYS BEEN, and no zoom has ever been reported from a teaching's tag row -
   all four reports were the booking flow's text fields. So this carries exactly the risk the chips
   beside it already carry, which is none.

   The floor still binds every real form control and `m240-check.cjs` asserts that separately, on
   `input`, `select` and `textarea`, so narrowing this rule did not quietly retire the check.

   44px of height is the touch target and it survives the type coming down: `min-height` does that
   work, not the font size. Padding matches the chips so the two cannot drift apart geometrically.

   `white-space` is deliberately left alone rather than set to `nowrap` like `.lb-tag`. A wrapping
   control can never set this flex row's min-content, so it can never be the thing that makes the
   page wider than the phone - the exact fault M184 chased through this file. `max-width:100%`
   is the second half of that. */
#se-library-root .lb-tagmore{
  display:inline-flex;align-items:center;gap:6px;
  border-radius:999px;padding:5px 11px;min-height:44px;max-width:100%;
  font:inherit;font-size:12px;font-weight:700;
  background:#fff;color:var(--ink-soft);border:1px solid var(--border-soft);
  cursor:pointer;text-align:left;-webkit-appearance:none;appearance:none;
}
#se-library-root .lb-tagmore:hover{background:var(--cream-deep);color:var(--ink);}
#se-library-root .lb-tagmore:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

/* ── M288 (D164): the one-time welcome walkthrough for members ──
   Same overlay mechanics as .lb-authmodal and the filters sheet (a fixed dark backdrop, the html
   element scroll-locked by the component itself, Escape closing it), centred on a desktop and
   anchored to the bottom on a phone, which is the shape the filters sheet already taught readers.
   Type is deliberately larger than the rest of the library - 17px body at 1.65, a 26px heading -
   because this panel exists for the members who find the new library hardest to read. Every
   control is at least 44px tall, the close control included: the site's sign-in modal shipped with
   a dead one for weeks (M283), so this one is a full 44px button with the icon inside it. z-index
   above the sign-in modal (320) so that if both are ever up, this one is what the reader sees,
   though library-prod.jsx waits for the sign-in box to close before showing it at all. */
#se-library-root .lb-tour{position:fixed;inset:0;z-index:330;background:rgba(30,27,24,.55);backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:center;padding:16px;}
#se-library-root .lb-tour-panel{position:relative;width:100%;max-width:560px;max-height:calc(100vh - 32px);overflow-y:auto;background:var(--paper);border-radius:22px;box-shadow:0 40px 90px -20px rgba(0,0,0,.5);padding:26px 30px 24px;font-family:'Mulish',sans-serif;display:flex;flex-direction:column;animation:lb-tour-in .22s ease;}
@keyframes lb-tour-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){#se-library-root .lb-tour-panel{animation:none;}}
#se-library-root .lb-tour-x{position:absolute;top:10px;right:10px;width:44px;height:44px;padding:0;}
#se-library-root .lb-tour-step{display:block;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:16px;padding-right:50px;}
/* THE PICTURE ABOVE EACH STEP (M288b). A framed mock-up drawn from the library's own components with
   fixed sample data, sitting where the single icon used to be. Inert: no pointer, no selection, and the
   markup underneath is divs and spans only. Roughly half the panel on desktop, most of it on a phone.
   Sized by its content (min-height only): a fixed height clipped the frame top and bottom on three of
   the five steps, measured in Chromium at 375px and 1280px on 2026-09-02.
   One reveal when the step changes, none under reduced motion. The overrides below scale the real
   components down to fit a 300px-wide frame without changing what they are. */
#se-library-root .lb-tour-pic{pointer-events:none;user-select:none;-webkit-user-select:none;background:var(--cream);border:1.5px solid var(--border-soft);border-radius:18px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:16px;min-height:200px;margin-bottom:18px;flex:none;}
#se-library-root .lb-tour-pic .frame{width:100%;max-width:420px;background:var(--paper);border:1.5px solid var(--border);border-radius:16px;box-shadow:0 18px 40px -24px rgba(51,49,46,.35);overflow:hidden;animation:lb-tour-pic-in .28s ease both;}
@keyframes lb-tour-pic-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){#se-library-root .lb-tour-pic .frame{animation:none;}}
#se-library-root .lb-tour-pic .frame.browse, #se-library-root .lb-tour-pic .frame.course, #se-library-root .lb-tour-pic .frame.saving{padding:12px;display:flex;flex-direction:column;gap:10px;}
#se-library-root .lb-tour-pic .frame.access{padding:12px;}
#se-library-root .lb-tour-pic .chips{display:flex;gap:6px;overflow:hidden;}
#se-library-root .lb-tour-pic .lb-chip{padding:6px 11px;font-size:12px;min-height:0;white-space:nowrap;flex:none;cursor:default;}
#se-library-root .lb-tour-pic .cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
#se-library-root .lb-tour-pic .lb-card{border-radius:14px;transition:none;cursor:default;}
#se-library-root .lb-tour-pic .lb-card.rowish{flex-direction:row;}
#se-library-root .lb-tour-pic .lb-card.rowish .lb-thumb{border-bottom:none;border-right:1px solid var(--border-soft);flex:none;}
#se-library-root .lb-tour-pic .lb-card .body{padding:9px 10px 10px;gap:4px;}
#se-library-root .lb-tour-pic .lb-card .kind{font-size:10px;}
#se-library-root .lb-tour-pic .lb-card .t{font-size:13px;}
#se-library-root .lb-tour-pic .lb-card .who{font-size:11.5px;}
#se-library-root .lb-tour-pic .lb-card .fav{width:28px;height:28px;top:6px;right:6px;}
#se-library-root .lb-tour-pic .lb-thumb .play{width:30px;height:30px;padding-left:2px;}
#se-library-root .lb-tour-pic .lb-thumb .dur{font-size:10px;padding:2px 6px;right:6px;bottom:6px;}
#se-library-root .lb-tour-pic .lb-tag{font-size:10.5px;padding:3px 8px;}
#se-library-root .lb-tour-pic .lb-searchbar{padding:11px 12px;}
#se-library-root .lb-tour-pic .lb-searchbar .q{flex:1;min-width:0;font-size:17px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;}
#se-library-root .lb-tour-pic .lb-searchbar .caret{display:inline-block;width:2px;height:1em;background:var(--orange);vertical-align:-2px;margin-left:1px;}
#se-library-root .lb-tour-pic .lb-iconbtn{width:30px;height:30px;cursor:default;}
#se-library-root .lb-tour-pic .lb-searchresults{max-height:none;overflow:visible;padding:4px 6px 8px;}
#se-library-root .lb-tour-pic .lb-searchrow{padding:8px 10px;gap:10px;cursor:default;}
#se-library-root .lb-tour-pic .lb-searchrow .ic{width:30px;height:30px;}
#se-library-root .lb-tour-pic .lb-searchrow .t{font-size:13.5px;white-space:normal;}
#se-library-root .lb-tour-pic .lb-searchrow .s{font-size:11.5px;}
#se-library-root .lb-tour-pic .course .head{display:flex;gap:10px;align-items:center;}
#se-library-root .lb-tour-pic .course .head .lb-thumb{border-radius:8px;border:1px solid var(--border-soft);}
#se-library-root .lb-tour-pic .course .head .kind{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);}
#se-library-root .lb-tour-pic .course .head .t{font-size:14px;font-weight:800;line-height:1.25;margin:2px 0 5px;}
#se-library-root .lb-tour-pic .lb-sess{padding:9px 12px;gap:10px;border-radius:14px;cursor:default;}
#se-library-root .lb-tour-pic .lb-sess .n{width:28px;height:28px;font-size:12px;}
#se-library-root .lb-tour-pic .lb-sess .t{font-size:13.5px;}
#se-library-root .lb-tour-pic .lb-sess .s{font-size:11.5px;margin-top:2px;}
#se-library-root .lb-tour-pic .lb-btn{min-height:34px;padding:7px 13px;font-size:12.5px;box-shadow:none;cursor:default;gap:6px;align-self:flex-end;}
#se-library-root .lb-tour-pic .teacher{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1.5px solid var(--border);border-radius:14px;background:var(--paper);}
#se-library-root .lb-tour-pic .teacher .t{font-size:14px;font-weight:800;line-height:1.2;}
#se-library-root .lb-tour-pic .teacher .lb-btn{margin-left:auto;align-self:center;}
/* M288c. The chip row runs off the frame's right edge on purpose (on the real page it scrolls), so it fades
   out there instead of cutting a chip mid-word ("Cours" in M288b's 375px screenshot). */
#se-library-root .lb-tour-pic .chips{-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent);mask-image:linear-gradient(90deg,#000 78%,transparent);}
/* M288c. The access picture stacks its two cards as rows on a phone (tour.jsx passes row={mobile}), so the
   "Supporter or buy" badge has room to show whole; side by side at 375px each card was 137px wide and the
   badge was cut to "SUPPORTER OR B". */
#se-library-root .lb-tour-pic .cards.stack{grid-template-columns:1fr;}
/* M288c. Finding your way: the phone's bottom bar. The real .lb-tabbar is position:fixed at the foot of the
   viewport; inside the picture it sits still under a faint stand-in for a screen. Tabs are spans (inert). */
#se-library-root .lb-tour-pic .frame.tabbar{display:flex;flex-direction:column;}
#se-library-root .lb-tour-pic .frame.tabbar .screen{display:flex;flex-direction:column;gap:9px;padding:16px 14px 18px;background:var(--cream);}
#se-library-root .lb-tour-pic .frame.tabbar .screen i{display:block;height:9px;border-radius:5px;background:var(--border-soft);}
/* margin:0 and width:100%: the real bar carries margin:0 auto, and inside the frame's column flexbox auto margins
   shrink-wrap and centre it, so space-between had no room and the six labels packed edge to edge (v120 shots). */
#se-library-root .lb-tour-pic .lb-tabbar{position:static;max-width:none;margin:0;width:100%;border-radius:0;box-shadow:none;backdrop-filter:none;background:#fff;padding:8px 10px 10px;justify-content:space-between;}
/* Sized to the label, not six equal columns: in a 309px frame a sixth is 43px and "Community" is wider than
   that at any legible size, so the labels collided (v119 screenshots). */
#se-library-root .lb-tour-pic .lb-tabbar .tab{flex:0 1 auto;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;color:var(--ink-faint);min-width:0;}
#se-library-root .lb-tour-pic .lb-tabbar .tab span{font-size:9.5px;font-weight:800;letter-spacing:0;white-space:nowrap;}
#se-library-root .lb-tour-pic .lb-tabbar .tab.on{color:var(--orange-dark);}
/* M288c. Community: the conversation's own classes (conv.css), scaled to the frame. */
#se-library-root .lb-tour-pic .frame.community{padding:12px;}
#se-library-root .lb-tour-pic .frame.community .cv-post{padding:12px 12px 10px;border-radius:14px;}
#se-library-root .lb-tour-pic .frame.community .cv-post+.cv-post{margin-top:10px;}
#se-library-root .lb-tour-pic .frame.community .cv-name{font-size:13.5px;}
#se-library-root .lb-tour-pic .frame.community .cv-meta{font-size:11px;margin-top:0;}
#se-library-root .lb-tour-pic .frame.community .cv-body{font-size:13px;line-height:1.5;margin-top:8px;}
#se-library-root .lb-tour-pic .frame.community .cv-acts{margin-top:9px;}
#se-library-root .lb-tour-pic .frame.community .cv-react{min-height:30px;padding:0 9px;font-size:12px;cursor:default;}
#se-library-root .lb-tour-pic .frame.community .cv-post.compose{display:flex;align-items:center;gap:10px;}
#se-library-root .lb-tour-pic .frame.community .cv-post.compose .ph{flex:1;min-width:0;font-size:12.5px;color:var(--meta);line-height:1.4;}
#se-library-root .lb-tour-pic .frame.community .cv-post.compose .lb-btn{align-self:center;flex:none;}
#se-library-root .lb-tour-h{font-size:26px;font-weight:900;letter-spacing:-.018em;line-height:1.15;margin:0 0 12px;outline:none;overflow-wrap:anywhere;}
#se-library-root .lb-tour-h:focus-visible{outline:3px solid #7fa8ff;outline-offset:4px;border-radius:4px;}
#se-library-root .lb-tour-body p{font-size:17px;line-height:1.65;color:var(--ink-soft);margin:0 0 10px;}
#se-library-root .lb-tour-dots{display:flex;gap:8px;justify-content:center;margin:18px 0 16px;}
#se-library-root .lb-tour-dots i{width:9px;height:9px;border-radius:50%;background:var(--border);display:block;}
#se-library-root .lb-tour-dots i.on{background:var(--orange);}
#se-library-root .lb-tour-acts{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
#se-library-root .lb-tour-acts .left{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
#se-library-root .lb-tour-skip{min-height:44px;padding:8px 12px;font-size:15px;font-weight:800;color:var(--ink-soft);border-radius:999px;}
#se-library-root .lb-tour-skip:hover{color:var(--ink);background:var(--cream-deep);}
#se-library-root .lb-tour .lb-btn{font-size:16px;}
#se-library-root .lb-tour .lb-tour-pic .lb-btn{font-size:12.5px;min-height:34px;padding:7px 13px;}
@media (max-width:600px){
  #se-library-root .lb-tour{align-items:flex-end;padding:0;}
  #se-library-root .lb-tour-panel{max-width:none;max-height:92vh;border-radius:22px 22px 0 0;padding:22px 20px calc(18px + env(safe-area-inset-bottom,0px));}
  #se-library-root .lb-tour-h{font-size:23px;}
  #se-library-root .lb-tour-pic{padding:12px;margin-bottom:12px;}
  #se-library-root .lb-tour-body p{font-size:16px;line-height:1.55;margin:0 0 8px;}
  #se-library-root .lb-tour-dots{margin:12px 0 12px;}
  #se-library-root .lb-tour-h{margin:0 0 8px;}
  #se-library-root .lb-tour-pic .frame.community .cv-post{padding:10px 10px 8px;}
  #se-library-root .lb-tour-pic .frame.community .cv-post+.cv-post{margin-top:8px;}
  #se-library-root .lb-tour-pic .lb-sess{padding:7px 10px;}
  #se-library-root .lb-tour-pic .frame.browse, #se-library-root .lb-tour-pic .frame.course, #se-library-root .lb-tour-pic .frame.saving{gap:8px;}
  /* Back, Skip and Next fit on one row at 375px: measured 2026-09-02, the desktop padding wrapped
     Next onto a line of its own from step 2 onward. */
  #se-library-root .lb-tour .lb-btn{padding:13px 16px;}
  #se-library-root .lb-tour-skip{padding:8px 8px;}
  #se-library-root .lb-tour-acts{gap:8px;}
}
/* The permanent way back in: a quiet line at the foot of every library screen, members only. */
#se-library-root .lb-tour-foot{text-align:center;padding:28px 16px 0;}
#se-library-root .lb-tour-reopen{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 16px;border-radius:999px;font-size:14px;font-weight:800;color:var(--ink-soft);border:1.5px solid var(--border);background:var(--paper);}
#se-library-root .lb-tour-reopen:hover{color:var(--orange-dark);border-color:var(--orange);}

/* ===== scoped from conv.css ===== */
/* Community (M205 design port) — one plain stylesheet, everything scoped
   under .cv. Ported from the handoff's conv.css; the token block at .cv is
   KEPT deliberately (the handoff's staging-faults section 1: the library's
   token names differ, and an undefined accent token is exactly the fault
   this rebuild fixes). Built into the library stylesheet by scope-css.py,
   which prefixes every selector with #se-library-root.

   Three rules this sheet is built on, all of them from the brief:
   1. Every form control is 16px or larger. Search "16px floor".
   2. Hierarchy is carried by weight and colour, never by opacity. --meta is
      a darkened metadata ink (about 5:1 on white) replacing --ink-faint for
      anything a member has to read.
   3. Nothing can be wider than its container: min-width:0 on every flex
      child that holds text, overflow-wrap:anywhere on every text run.       */

#se-library-root .cv{--orange:#c46a26;--orange-dark:#a2551d;--orange-tint:#fbeee0;--cream:#faf8f4;--cream-deep:#f0eee9;--border:#e3e0d8;--border-soft:#eeece6;--ink:#33312e;--ink-soft:#615c53;--meta:#6b655c;--paper:#fff;--leaf:oklch(0.5 0.09 152);--leaf-tint:oklch(0.95 0.03 152);--red:oklch(0.5 0.14 25);--red-tint:oklch(0.96 0.03 25);--focus:#7fa8ff;--nav-h:0px;container-type:inline-size;
font-family:Mulish,system-ui,sans-serif;font-size:15px;line-height:1.62;color:var(--ink);text-align:left;letter-spacing:0;margin:0;padding:0;}
#se-library-root .cv *{box-sizing:border-box;}
#se-library-root .cv p, #se-library-root .cv h1, #se-library-root .cv h2, #se-library-root .cv h3, #se-library-root .cv h4, #se-library-root .cv ul, #se-library-root .cv li, #se-library-root .cv dl, #se-library-root .cv figure{margin:0;}
#se-library-root .cv ul, #se-library-root .cv li, #se-library-root .cv dl{padding:0;}
#se-library-root .cv ul{list-style:none;}
#se-library-root .cv button{font-family:inherit;color:inherit;margin:0;}
#se-library-root .cv a{color:var(--orange-dark);text-decoration:none;font-weight:700;overflow-wrap:anywhere;}
#se-library-root .cv a:hover{color:var(--orange);text-decoration:underline;}
#se-library-root .cv :focus-visible{outline:2.5px solid var(--focus);outline-offset:2px;border-radius:6px;}
#se-library-root .cv img{max-width:100%;display:block;}

/* ── shared bits ─────────────────────────────────────────────────────── */
#se-library-root .cv-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;border-radius:999px;padding:10px 18px;font-weight:800;font-size:14px;line-height:1.2;cursor:pointer;min-height:44px;white-space:nowrap;transition:background .12s,border-color .12s,color .12s;}
#se-library-root .cv-btn.accent{background:var(--orange);color:#fff;}
#se-library-root .cv-btn.accent:hover{background:var(--orange-dark);}
#se-library-root .cv-btn.ghost{background:var(--paper);color:var(--ink);border:1.5px solid var(--border);}
#se-library-root .cv-btn.ghost:hover{border-color:var(--meta);}
#se-library-root .cv-btn.quiet{background:none;color:var(--ink-soft);padding:10px 12px;}
#se-library-root .cv-btn.quiet:hover{color:var(--ink);background:var(--cream-deep);}
#se-library-root .cv-btn.danger{background:var(--red);color:#fff;}
#se-library-root .cv-btn:disabled{cursor:not-allowed;background:var(--cream-deep);color:var(--meta);border-color:var(--border);}
#se-library-root .cv-btn.accent:disabled{background:var(--cream-deep);color:var(--meta);}
#se-library-root .cv-btn .lbl{overflow:hidden;text-overflow:ellipsis;max-width:22ch;}
#se-library-root .cv-h{font-size:20px;font-weight:900;letter-spacing:-.018em;line-height:1.2;}
#se-library-root .cv-sub{font-size:14px;color:var(--ink-soft);}
#se-library-root .cv-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

/* Icon button: 44px target carrying small type, never bigger than its row */
#se-library-root .cv-ib{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:none;background:none;border-radius:12px;color:var(--ink-soft);cursor:pointer;flex:none;}
#se-library-root .cv-ib:hover{background:var(--cream-deep);color:var(--ink);}
#se-library-root .cv-ib.on{color:var(--orange-dark);}

/* ── avatar ──────────────────────────────────────────────────────────── */
#se-library-root .cv-av{border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;letter-spacing:.02em;flex:none;user-select:none;}
/* Supporter: a still hairline ring, not the app's animated glow. No motion,
   no colour meaning carried alone, and it reads at 375px. */
#se-library-root .cv-av.ring{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--orange);}
#se-library-root .cv-av.sq{border-radius:9px;}
#se-library-root .cv-av img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}

/* ── badges: one system, one scale, all of them 10.5px/900 ───────────── */
#se-library-root .cv-b{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 8px;font-size:10.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;border:1px solid transparent;}
#se-library-root .cv-b.teacher{background:var(--orange-tint);color:var(--orange-dark);border-color:#f2ddc4;}
#se-library-root .cv-b.samadhi{background:var(--ink);color:#fff;}
#se-library-root .cv-b.supporter{background:var(--cream-deep);color:var(--ink-soft);border-color:var(--border);}
#se-library-root .cv-b.new{background:var(--leaf-tint);color:var(--leaf);border-color:oklch(0.9 0.04 152);}
#se-library-root .cv-b.pending{background:var(--cream-deep);color:var(--ink-soft);border-color:var(--border);text-transform:none;letter-spacing:0;font-size:11.5px;}
#se-library-root .cv-b.hidden-post{background:var(--red-tint);color:var(--red);border-color:oklch(0.9 0.05 25);text-transform:none;letter-spacing:0;font-size:11.5px;}
#se-library-root .cv-b.as-btn{cursor:pointer;min-height:24px;}

/* ── the post, which is a surface like every other list in the library ── */
#se-library-root .cv-post{background:var(--paper);border:1px solid var(--border);border-radius:18px;padding:22px 18px 16px;position:relative;}
#se-library-root .cv-post+.cv-post, #se-library-root .cv-feed>*+*{margin-top:14px;}
#se-library-root .cv-post.flag{border-color:#e6dcc6;background:linear-gradient(180deg,#fffdf8,var(--paper) 90px);}
/* An announcement is the same object, marked by an orange edge rather than by
   sitting on the page's own colour. */
#se-library-root .cv-post.announce{background:var(--paper);border:1.5px solid var(--orange);}
#se-library-root .cv-post.own{border-color:#dcd7c9;}

/* head: name and badges on the first line, everything else on the second.
   Three things no longer compete for one line at 375px. */
#se-library-root .cv-head{display:flex;gap:12px;align-items:flex-start;}
#se-library-root .cv-head .who{flex:1;min-width:0;}
#se-library-root .cv-name{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-weight:900;font-size:15px;line-height:1.3;}
#se-library-root .cv-name .nm{overflow-wrap:anywhere;}
#se-library-root .cv-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;font-weight:700;color:var(--meta);line-height:1.5;margin-top:2px;}
#se-library-root .cv-meta .sep{color:var(--border);}
#se-library-root .cv-meta .to{display:inline-flex;align-items:center;gap:5px;min-width:0;}
#se-library-root .cv-meta .to .nmg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:16ch;}
#se-library-root .cv-meta .ed{font-weight:700;}
/* The group attribution as a way in: same look as the plain label, plus the hand
   and an underline on hover. Kept inline-sized on purpose - it sits in a metadata
   line, and the group's own view is one press away, not a primary action. */
#se-library-root .cv-meta button.to.as-link{border:none;background:none;padding:2px 4px;margin:-2px -4px;font:inherit;font-weight:700;color:var(--meta);cursor:pointer;border-radius:8px;}
#se-library-root .cv-meta button.to.as-link:hover{color:var(--ink);background:var(--cream-deep);}
/* A card that opens its own page when its quiet surface is pressed. */
#se-library-root .cv-post.openable{cursor:pointer;}
#se-library-root .cv-post.openable:hover{border-color:#d5d0c4;}

#se-library-root .cv-body{font-size:15.5px;line-height:1.62;margin-top:13px;white-space:pre-wrap;overflow-wrap:anywhere;}
#se-library-root .cv-body.clamp{display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden;}
#se-library-root .cv-more{margin-top:6px;background:none;border:none;padding:6px 0;font-size:13.5px;font-weight:800;color:var(--orange-dark);cursor:pointer;min-height:44px;}

/* photographs: 1 fills, 2 split, 3 and 4 grid. A phone portrait is capped by
   aspect-ratio rather than letting a 3:4 run the card off the screen. */
#se-library-root .cv-photos{display:grid;gap:6px;margin-top:12px;}
#se-library-root .cv-photos.n1{grid-template-columns:1fr;}
#se-library-root .cv-photos.n2{grid-template-columns:1fr 1fr;}
#se-library-root .cv-photos.n3{grid-template-columns:1fr 1fr;}
#se-library-root .cv-photos.n3>:first-child{grid-column:1/-1;}
#se-library-root .cv-photos.n4{grid-template-columns:1fr 1fr;}
#se-library-root .cv-ph{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--border-soft);background:repeating-linear-gradient(135deg,var(--cream-deep) 0 12px,var(--cream) 12px 24px);display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;}
#se-library-root .cv-photos.n1 .cv-ph{aspect-ratio:auto;max-height:420px;min-height:200px;}
#se-library-root .cv-photos.n1 .cv-ph.portrait{aspect-ratio:3/4;max-height:460px;}
#se-library-root .cv-ph .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--meta);font-weight:700;text-align:center;padding:0 10px;}
#se-library-root .cv-ph.real{background:var(--cream-deep);border:none;}
#se-library-root .cv-ph.real img{width:100%;height:100%;object-fit:cover;display:block;}
/* A lone photo keeps its own proportions (a phone portrait is capped by max-height)
   and fills the frame edge to edge - no letterbox bars, no border ring, just a
   rounded photo. min-height:0 overrides the placeholder tile's 200px floor, which
   was showing as a thin cream strip above and below a short landscape photo. */
#se-library-root .cv-photos.n1 .cv-ph.real{aspect-ratio:auto;min-height:0;max-height:460px;}
#se-library-root .cv-photos.n1 .cv-ph.real img{width:100%;height:auto;max-height:460px;object-fit:cover;}

/* link preview */
#se-library-root .cv-link{margin-top:12px;border:1px solid var(--border);border-radius:14px;overflow:hidden;display:block;width:100%;text-align:left;background:var(--paper);cursor:pointer;}
#se-library-root .cv-link .im{height:140px;background:repeating-linear-gradient(135deg,var(--cream-deep) 0 12px,var(--cream) 12px 24px);border-bottom:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center;}
#se-library-root .cv-link .im .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--meta);font-weight:700;}
#se-library-root .cv-link .im.real{display:block;height:auto;max-height:200px;overflow:hidden;}
#se-library-root .cv-link .im.real img{width:100%;height:100%;max-height:200px;object-fit:cover;display:block;}
#se-library-root .cv-link .tx{padding:11px 13px;min-width:0;}
#se-library-root .cv-link .dm{font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--meta);}
#se-library-root .cv-link .ti{font-weight:900;font-size:14.5px;line-height:1.35;margin-top:3px;overflow-wrap:anywhere;}
#se-library-root .cv-link .de{font-size:13px;color:var(--ink-soft);line-height:1.5;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
#se-library-root .cv-link:hover{border-color:var(--orange);}

/* ── attached teaching, and the enrolment strip above it ───────────────
   One object, not a pill floating over a card. The label is fixed so it
   never wraps; the course name is variable, sits on its own line and wraps
   to two lines rather than being cut with an ellipsis, because the part
   that tells two modules apart is at the END of the name.                */
#se-library-root .cv-attach{padding:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--paper);width:100%;text-align:left;cursor:pointer;display:block;}
#se-library-root .cv .cv-attach{margin-top:18px;}
#se-library-root .cv .cv-head+.cv-attach{margin-top:20px;}
#se-library-root .cv-attach:hover{border-color:var(--orange);}
#se-library-root .cv-enrol{display:flex;align-items:flex-start;gap:8px;padding:8px 12px;background:var(--leaf-tint);border-bottom:1px solid oklch(0.9 0.04 152);color:var(--leaf);}
#se-library-root .cv-enrol .tk{flex:none;margin-top:2px;}
#se-library-root .cv-enrol .txt{min-width:0;}
#se-library-root .cv-enrol .lb{font-size:11.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;}
#se-library-root .cv-enrol .crs{font-size:13.5px;font-weight:800;line-height:1.35;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;}
#se-library-root .cv-att-in{display:flex;gap:11px;align-items:center;padding:10px 12px;min-width:0;}
#se-library-root .cv-att-in .th{width:64px;height:44px;border-radius:9px;flex:none;background:repeating-linear-gradient(135deg,var(--cream-deep) 0 10px,var(--cream) 10px 20px);border:1px solid var(--border-soft);overflow:hidden;}
#se-library-root .cv-att-in .th img{width:100%;height:100%;object-fit:cover;display:block;}
#se-library-root .cv-att-in .tx{flex:1;min-width:0;}
#se-library-root .cv-att-in .t{font-weight:800;font-size:14px;line-height:1.35;overflow-wrap:anywhere;}
#se-library-root .cv-att-in .s{font-size:12.5px;font-weight:700;color:var(--meta);margin-top:2px;}
#se-library-root .cv-att-in .ch{color:var(--meta);flex:none;}

/* library item in the feed: same card, teaching as the subject */
#se-library-root .cv-libhead{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-dark);}

/* ── the actions row. One alignment system from here to the bottom of the
   card: left-aligned, 44px tall, same gap, menu at the right end. ────── */
#se-library-root .cv-acts{display:flex;align-items:center;gap:6px;margin-top:14px;padding-top:0;flex-wrap:nowrap;}
/* One reaction control, as in the apps: tap to give the first reaction, hold
   for the rest. The set comes from window.CV_REACTIONS. */
#se-library-root .cv-rwrap{position:relative;flex:none;}
#se-library-root .cv-rpick{position:absolute;bottom:calc(100% + 8px);left:0;z-index:45;background:var(--paper);border:1px solid var(--border);border-radius:14px;padding:6px;box-shadow:0 1px 2px rgba(51,49,46,.06),0 22px 44px -18px rgba(51,49,46,.34);display:flex;flex-direction:column;gap:2px;min-width:186px;}
#se-library-root .cv-rpick button{display:flex;align-items:center;gap:10px;min-height:42px;padding:6px 10px;border:none;background:none;border-radius:10px;font-size:14px;font-weight:800;color:var(--ink);cursor:pointer;text-align:left;}
#se-library-root .cv-rpick button:hover{background:var(--cream-deep);}
#se-library-root .cv-rpick button.on{color:var(--orange-dark);background:var(--orange-tint);}
#se-library-root .cv-react{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 11px;border:1.5px solid var(--border);background:var(--paper);border-radius:999px;font-size:13px;font-weight:800;color:var(--ink-soft);cursor:pointer;}
#se-library-root .cv-react:hover{border-color:var(--meta);}
#se-library-root .cv-react.on{border-color:var(--orange);background:var(--orange-tint);color:var(--orange-dark);}
#se-library-root .cv-react .n{font-variant-numeric:tabular-nums;}
#se-library-root .cv-acts .sp{flex:1;}
#se-library-root .cv-acts .cnt{font-size:13px;font-weight:800;color:var(--meta);white-space:nowrap;}

/* ── thread: comments and replies. No left rule, no 30px indent.
   A comment is a cream row inside the post card; a reply is the same row
   inset by 20px, and under 400px the inset goes and the attribution line
   carries the nesting instead. ───────────────────────────────────────── */
#se-library-root .cv-thread{margin-top:16px;border-top:1px solid var(--border-soft);padding-top:14px;display:flex;flex-direction:column;gap:12px;}
#se-library-root .cv-cm{display:flex;gap:9px;min-width:0;}
#se-library-root .cv-cm .bub{flex:1;min-width:0;background:var(--cream);border:1px solid var(--border-soft);border-radius:14px;padding:9px 12px;}
#se-library-root .cv-cm .cv-name{font-size:13.5px;}
#se-library-root .cv-cm .cv-meta{font-size:12px;}
#se-library-root .cv-cm .tx{font-size:14.5px;line-height:1.58;margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere;}
#se-library-root .cv-cm .cv-acts{margin-top:2px;padding-top:0;}
#se-library-root .cv-cm .cv-react{min-height:38px;padding:0 9px;font-size:12.5px;border:none;background:none;color:var(--meta);}
#se-library-root .cv-cm .cv-react:hover{background:var(--cream-deep);}
#se-library-root .cv-cm .cv-react.on{background:none;color:var(--orange-dark);}
#se-library-root .cv-replies{margin:8px 0 0 20px;display:flex;flex-direction:column;gap:8px;}
#se-library-root .cv-replies .bub{background:var(--paper);border-color:var(--border);}
#se-library-root .cv-rp-to{font-size:12px;font-weight:800;color:var(--meta);}
#se-library-root .cv-thread-more{align-self:flex-start;background:none;border:none;padding:8px 0;min-height:44px;font-size:13.5px;font-weight:800;color:var(--orange-dark);cursor:pointer;}

/* ── composer. ONE composer, three sizes: post, comment, reply.
   Two zones separated by a hairline: what you are writing, then what
   happens to it. That is the whole grouping. ─────────────────────────── */
/* No overflow:hidden here: the audience chooser and the photo menu open INSIDE this
   card, and a hidden overflow clipped the chooser to the card's bounds (found in the
   M280 visual pass: three of five options were cut off at 375). The footer rounds its
   own bottom corners instead, which is all the clip was doing. */
#se-library-root .cv-cp{background:var(--paper);border:1.5px solid var(--border);border-radius:18px;}
#se-library-root .cv-cp.focused{border-color:var(--orange);}
#se-library-root .cv-cp.refused{border-color:var(--red);}
#se-library-root .cv-cp-write{display:flex;align-items:flex-start;gap:11px;padding:16px 16px 0;}
#se-library-root .cv-cp-write .col{flex:1;min-width:0;}
/* 16px floor: iOS Safari zooms the page when a field under 16px takes focus.
   Applies to inputs, selects and textareas. Do not lower these three. */
#se-library-root .cv-field{width:100%;border:none;background:none;resize:none;font-family:inherit;font-size:16px;line-height:1.6;color:var(--ink);padding:0;margin-top:-5px;min-height:82px;max-height:320px;overflow-y:auto;}
#se-library-root .cv-field::placeholder{color:var(--meta);}
#se-library-root .cv-field:focus{outline:none;}
#se-library-root .cv-cp-extras{padding:0 16px;}
#se-library-root .cv-cp-foot{margin-top:14px;border-top:1px solid var(--border-soft);background:var(--cream);padding:10px 16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-radius:0 0 16px 16px;}
#se-library-root .cv-cp-foot .sp{flex:1;min-width:8px;}
#se-library-root .cv-cp-note{font-size:13px;font-weight:700;color:var(--ink-soft);padding:12px 16px 0;line-height:1.55;}
#se-library-root .cv-cp-note b{font-weight:900;color:var(--ink);}

/* the audience control: one pill naming the destination, opening a chooser.
   The same object for two options and for four, so a member in several
   groups does not get a stack of radios. Absent for a member in no group. */
#se-library-root .cv-audp{margin-top:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
#se-library-root .cv-audp .lg{font-size:11.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:var(--meta);}
#se-library-root .cv-audbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:100%;min-width:0;padding:0 12px 0 8px;border-radius:999px;border:1.5px solid var(--border);background:var(--cream);font-size:14px;font-weight:800;color:var(--ink);cursor:pointer;}
#se-library-root .cv-audbtn .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:20ch;}
#se-library-root .cv-audbtn:hover{border-color:var(--meta);}
#se-library-root .cv-audmenu .mi.on{color:var(--orange-dark);background:var(--orange-tint);}
#se-library-root .cv-audmenu .mi .lb{flex:1;min-width:0;overflow-wrap:anywhere;}
#se-library-root .cv-audmenu .mi .ic{display:flex;}

/* photograph tiles in the composer, including the one that appears the
   instant a file is chosen */
#se-library-root .cv-upl{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:12px;}
#se-library-root .cv-tile{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:repeating-linear-gradient(135deg,var(--cream-deep) 0 10px,var(--cream) 10px 20px);display:flex;align-items:center;justify-content:center;}
#se-library-root .cv-tile .rm{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;background:rgba(51,49,46,.82);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;}
#se-library-root .cv-tile .st{position:absolute;left:0;right:0;bottom:0;background:rgba(51,49,46,.86);color:#fff;font-size:11px;font-weight:800;padding:4px 6px;text-align:center;}
#se-library-root .cv-tile.failed{border-color:var(--red);background:var(--red-tint);}
#se-library-root .cv-tile .retry{position:absolute;inset:auto 0 0;background:var(--red);color:#fff;border:none;font-size:11px;font-weight:900;padding:5px;cursor:pointer;min-height:32px;}
/* Own spinner class. Do not name this .spinner: the video player owns that
   name later in the library's stylesheet and wins. */
#se-library-root .cv-spin{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--border);border-top-color:var(--orange);animation:cv-turn .8s linear infinite;position:static;}
@keyframes cv-turn{to{transform:rotate(360deg)}}
#se-library-root .cv-uplbar{height:3px;background:var(--border-soft);border-radius:999px;overflow:hidden;position:absolute;left:8px;right:8px;bottom:8px;}
#se-library-root .cv-uplbar i{display:block;height:100%;background:var(--orange);transition:width .3s linear;}

/* one-tap reactions above the comment field */
#se-library-root .cv-quick{display:flex;gap:6px;flex-wrap:wrap;padding:0 0 8px;}
#se-library-root .cv-quick button{min-height:38px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:var(--paper);font-size:13px;font-weight:800;color:var(--ink-soft);cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
#se-library-root .cv-quick button:hover{border-color:var(--orange);color:var(--orange-dark);}

/* ── menus. A menu is scoped to the card it acts on: it opens from the
   trigger, inside the card's own width, so it cannot leave the screen and
   cannot land behind the bottom navigation bar at any width. ─────────── */
#se-library-root .cv-menu-wrap{position:relative;flex:none;}
#se-library-root .cv-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:40;width:max-content;min-width:210px;max-width:min(280px,calc(100vw - 40px));background:var(--paper);border:1px solid var(--border);border-radius:16px;box-shadow:0 1px 2px rgba(51,49,46,.06),0 24px 48px -18px rgba(51,49,46,.35);padding:6px;}
#se-library-root .cv-menu.up{top:auto;bottom:calc(100% + 6px);}
/* the audience chooser is LEFT-anchored: on this page the pill sits at the left
   of its row (after the "Who will see this" label), so a right-anchored menu grew
   leftwards past the edge of the screen - the same fault, mirrored, as the post
   menu's first attempt. Bounded so it cannot leave the screen at 375px. Must sit
   after .cv-menu: same specificity, later rule wins. */
#se-library-root .cv-menu.cv-audmenu{left:0;right:auto;min-width:0;width:max-content;max-width:min(258px,calc(100vw - 56px));}
#se-library-root .cv-menu .mi{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 11px;border:none;background:none;border-radius:11px;font-size:14.5px;font-weight:800;color:var(--ink);cursor:pointer;text-align:left;}
#se-library-root .cv-menu .mi:hover{background:var(--cream-deep);}
#se-library-root .cv-menu .mi.warn{color:var(--red);}
#se-library-root .cv-menu .mi .ic{color:var(--meta);flex:none;}
#se-library-root .cv-menu .mi.warn .ic{color:var(--red);}
#se-library-root .cv-menu hr{border:0;height:1px;background:var(--border-soft);margin:5px 4px;}
#se-library-root .cv-menu .nt{font-size:12.5px;font-weight:700;color:var(--ink-soft);line-height:1.5;padding:7px 11px 5px;}
#se-library-root .cv-menu .hd{font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--meta);padding:7px 11px 4px;}
#se-library-root .cv-menu-scrim{position:fixed;inset:0;z-index:30;}
#se-library-root .cv-menu textarea{width:100%;font-family:inherit;font-size:16px;line-height:1.5;border:1.5px solid var(--border);border-radius:12px;padding:9px 11px;resize:none;color:var(--ink);background:var(--cream);}

/* ── confirm strip, used in place of a second dialogue ───────────────── */
#se-library-root .cv-confirm{background:var(--red-tint);border:1px solid oklch(0.9 0.05 25);border-radius:14px;padding:11px 13px;margin-top:12px;}
#se-library-root .cv-confirm p{font-size:14px;color:var(--ink);font-weight:700;}
#se-library-root .cv-confirm .acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}

/* ── notices: refused, rate limited, held, hidden, offline ───────────── */
#se-library-root .cv-notice{display:flex;gap:10px;align-items:flex-start;border-radius:14px;padding:11px 13px;font-size:14px;line-height:1.55;font-weight:700;}
#se-library-root .cv-notice .ic{flex:none;margin-top:2px;}
#se-library-root .cv-notice.warn{background:var(--red-tint);color:var(--red);border:1px solid oklch(0.9 0.05 25);}
#se-library-root .cv-notice.calm{background:var(--cream-deep);color:var(--ink-soft);border:1px solid var(--border);}
#se-library-root .cv-notice.good{background:var(--leaf-tint);color:var(--leaf);border:1px solid oklch(0.9 0.04 152);}
/* M288d. "Send it again" inside the confirm-your-email note. The button is the note's own weight and is
   told apart by shape (the pill); the outcome sentence sits beside it and wraps under it on a phone. */
#se-library-root .cv-resend{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:10px;}
#se-library-root .cv-resend .cv-btn{font-size:13px;padding:8px 16px;}
#se-library-root .cv-resend-msg{font-size:13px;font-weight:600;color:var(--ink-soft);line-height:1.45;}
#se-library-root .cv-notice b{display:block;font-weight:900;color:inherit;}
#se-library-root .cv-cp .cv-notice{margin:12px 14px 0;}

/* ── the filter row. Five peer options on one line that scrolls, never
   wraps, with the selected one filled. 44px tall, 13px type. ────────── */
#se-library-root .cv-filters{position:relative;}
#se-library-root .cv-filters .track{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0 4px;}
#se-library-root .cv-filters .track::-webkit-scrollbar{display:none;}
#se-library-root .cv-filters .fade{position:absolute;top:0;bottom:4px;width:24px;pointer-events:none;}
#se-library-root .cv-filters .fade.r{right:0;background:linear-gradient(90deg,transparent,var(--paper));}
#se-library-root .cv-filters .fade.l{left:0;background:linear-gradient(270deg,transparent,var(--paper));}
#se-library-root .cv-chip{flex:none;min-height:44px;padding:0 15px;border-radius:999px;border:1.5px solid var(--border);background:var(--paper);font-size:13.5px;font-weight:800;color:var(--ink-soft);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;}
#se-library-root .cv-chip:hover{border-color:var(--meta);}
#se-library-root .cv-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff;}
#se-library-root .cv-chip .n{font-size:12px;font-weight:900;opacity:1;color:var(--meta);}
#se-library-root .cv-chip[aria-pressed="true"] .n{color:#cfc8bb;}

/* home screen opening: the cards carry their own gap, so the feed's
   post-to-post margin must not be added on top of it */
#se-library-root .cv-hlist{display:flex;flex-direction:column;gap:10px;}
#se-library-root .cv-hlist .cv-post+.cv-post{margin-top:0;}

/* ── page furniture ─────────────────────────────────────────────────── */
/* NO panel background on the page itself. Every other library screen sits on the
   library's own ground, and a cream slab with (or without) a radius read as out of
   style here (David, 2026-08-21). The opening on home and the discussion under a
   teaching keep their cream, because those are inline panels he likes as they are. */
#se-library-root .cv-page{padding:18px 0 24px;min-height:100%;}
#se-library-root .cv-pagehead{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;}
#se-library-root .cv-pagehead .tx{flex:1;min-width:0;}
#se-library-root .cv-pagehead h1{font-size:26px;font-weight:900;letter-spacing:-.02em;line-height:1.15;}
#se-library-root .cv-pagehead p{font-size:14px;color:var(--ink-soft);margin-top:4px;}
#se-library-root .cv-feed{margin-top:18px;}
#se-library-root .cv-sticky{position:sticky;top:0;z-index:20;background:var(--paper);padding-top:8px;padding-bottom:4px;}
/* No bleed: the page has no cream inset to reach, and the doubled negative margin
   was the sideways scroll. The track scrolls within the bar. */
#se-library-root .cv-filters{margin:0;padding:0;}
#se-library-root .cv-sticky .cv-filters{margin:0;padding:0;}
#se-library-root .cv-state{background:var(--paper);border:1px solid var(--border);border-radius:18px;padding:26px 20px;text-align:center;}
#se-library-root .cv-state .ic{width:46px;height:46px;border-radius:50%;background:var(--cream-deep);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;color:var(--ink-soft);}
#se-library-root .cv-state b{display:block;font-size:16.5px;font-weight:900;margin-bottom:6px;}
#se-library-root .cv-state p{font-size:14.5px;color:var(--ink-soft);line-height:1.6;max-width:44ch;margin:0 auto;}
#se-library-root .cv-state .acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px;}
#se-library-root .cv-end{text-align:center;font-size:13.5px;font-weight:700;color:var(--meta);padding:20px 10px 8px;}

/* connecting: real skeleton shapes, plus a sentence, because the wait is
   genuine and a bare grey block says nothing */
#se-library-root .cv-sk{background:var(--paper);border:1px solid var(--border);border-radius:18px;padding:16px;}
#se-library-root .cv-sk .ln{height:11px;border-radius:999px;background:var(--cream-deep);margin-top:9px;}
#se-library-root .cv-sk .ln.s{width:38%;}#se-library-root .cv-sk .ln.m{width:72%;}#se-library-root .cv-sk .ln.l{width:92%;}
#se-library-root .cv-sk .tp{display:flex;gap:11px;align-items:center;}
#se-library-root .cv-sk .tp .c{width:40px;height:40px;border-radius:50%;background:var(--cream-deep);flex:none;}
#se-library-root .cv-sk.pulse .ln, #se-library-root .cv-sk.pulse .c{animation:cv-fade 1.4s ease-in-out infinite;}
@keyframes cv-fade{50%{background:#e8e5de}}

/* ── groups view ─────────────────────────────────────────────────────── */
#se-library-root .cv-gbar{display:flex;align-items:center;gap:11px;background:var(--paper);border:1px solid var(--border);border-radius:16px;padding:10px 12px;min-width:0;}
#se-library-root .cv-gbar .tx{flex:1;min-width:0;}
#se-library-root .cv-gbar .nm{font-weight:900;font-size:15px;line-height:1.3;overflow-wrap:anywhere;}
#se-library-root .cv-gbar .ct{font-size:12.5px;font-weight:700;color:var(--meta);margin-top:1px;}
#se-library-root .cv-gpick{display:flex;flex-direction:column;gap:8px;}
#se-library-root .cv-gpick .op{display:flex;align-items:center;gap:11px;min-height:56px;padding:9px 12px;border:1.5px solid var(--border);background:var(--paper);border-radius:14px;cursor:pointer;text-align:left;min-width:0;width:100%;}
#se-library-root .cv-gpick .op[aria-pressed="true"]{border-color:var(--orange);background:var(--orange-tint);}

/* ── toast ───────────────────────────────────────────────────────────── */
#se-library-root .cv-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + 16px);z-index:60;background:var(--ink);color:#fff;border-radius:999px;padding:11px 18px;font-size:13.5px;font-weight:800;box-shadow:0 18px 40px -16px rgba(51,49,46,.6);display:flex;align-items:center;gap:9px;max-width:calc(100% - 32px);}
#se-library-root .cv-toast .u{background:none;border:none;color:#f0c79c;font-weight:900;font-size:13.5px;cursor:pointer;padding:4px;min-height:36px;}

/* ── moderation queue (staff) ────────────────────────────────────────── */
#se-library-root .cv-mod{background:var(--paper);border:1px solid var(--border);border-radius:18px;padding:14px;}
#se-library-root .cv-mod+.cv-mod{margin-top:10px;}
#se-library-root .cv-mod .rs{font-size:12.5px;font-weight:800;color:var(--red);margin-top:8px;}
#se-library-root .cv-modacts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;border-top:1px solid var(--border-soft);padding-top:10px;}

/* ── desktop ─────────────────────────────────────────────────────────── */
/* Container queries, not viewport queries: this component sits in a
   WordPress column whose width has nothing to do with the window's. */
@container (min-width:900px){
  #se-library-root .cv-page{padding:30px 0;}
  #se-library-root .cv-wrap{max-width:1140px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start;}
  #se-library-root .cv-pagehead h1{font-size:32px;}
  #se-library-root .cv-post{padding:26px 22px 18px;border-radius:20px;}
  #se-library-root .cv-body{font-size:16px;}
  #se-library-root .cv-sticky{margin:0;padding-left:0;padding-right:0;}
  #se-library-root .cv-filters{margin:0;padding:0;}
  #se-library-root .cv-aside{position:sticky;top:20px;display:flex;flex-direction:column;gap:14px;}
  #se-library-root .cv-aside .cv-post{padding:16px;}
}
@container (max-width:399px){
  #se-library-root .cv-replies{margin-left:0;padding-left:0;}
  #se-library-root .cv-post{padding:18px 14px 14px;border-radius:16px;}
}

/* ── reduced motion: every moving thing has a still version ──────────── */
@media(prefers-reduced-motion:reduce){
  #se-library-root .cv *, #se-library-root .cv *::before, #se-library-root .cv *::after{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;}
  #se-library-root .cv-spin{border-top-color:var(--orange);border-right-color:var(--orange);}
  #se-library-root .cv-sk.pulse .ln, #se-library-root .cv-sk.pulse .c{background:var(--cream-deep);}
}