/* Orion Studio — course authoring styles.
   Consumes the brand tokens from styles.css (:root --pink/--purple/--f-head/…).
   Two-column authoring: block editor (left) + live learner preview (right).
   Reflows to a single column on narrow widths (no horizontal overflow). */

/* Full-bleed authoring workspace: fills the viewport below the app header and scrolls
   its two panels internally, like a real course-building app. Reflows to a normal
   scrolling single column below 1024px (no horizontal overflow). */
.builderwrap { max-width: none; margin: 0; padding: 0; height: calc(100dvh - var(--builder-navh, 64px)); }
body.is-builder { overflow: hidden; }         /* the panels scroll, not the page */
#builderMount { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* ---------- toolbar (full-width top bar) ---------- */
.btoolbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; flex: none;
  background: rgba(255, 255, 255, .92); backdrop-filter: saturate(160%) blur(12px);
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: var(--shadow-xs);
  padding: 11px 24px; margin: 0; position: static; z-index: 30;
}
.btoolbar__l { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 320px; }
.bback { flex: none; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; color: var(--purple); font-size: 18px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: background .12s ease, border-color .12s ease; }
.bback:hover { background: var(--blossom-2); border-color: var(--blossom); }
.btoolbar__r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btitle {
  font-family: var(--f-head); font-weight: 800; font-size: 20px; color: var(--purple);
  border: 0; background: transparent; padding: 6px 8px; border-radius: var(--r-sm);
  min-width: 0; flex: 1 1 auto; letter-spacing: -.02em;
}
.btitle:hover { background: #faf1f8; }
.btitle:focus { outline: 2px solid var(--blossom); background: #fff; }
.bstatus { font-size: 12px; font-weight: 600; color: var(--purple); background: var(--blossom-2);
  border: 1px solid var(--blossom); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.bsave { font-size: 12px; font-weight: 600; white-space: nowrap; }
.bsave--ok { color: var(--teal); }
.bsave--busy { color: var(--muted); }
.bsave--warn { color: var(--ochre, #b8860b); }
.bsave--err { color: var(--pink); }

/* ---------- two panels (each scrolls internally) ---------- */
.bcols { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0; align-items: stretch; }
.beditor { min-height: 0; overflow: auto; padding: 22px 26px 64px; border-right: 1px solid var(--line); }
.beditor > .bpalette, .beditor > .blist { max-width: 920px; margin-left: auto; margin-right: auto; }

/* ---------- palette (sticky within the editor panel) ---------- */
/* One row per category (Text · Media · Interactive · Questions · Structure) stacked
   vertically, with the category name as a fixed-width label down the left. */
.bpalette {
  display: flex; flex-direction: column; align-items: stretch; gap: 7px;
  background: rgba(255, 255, 255, .96); backdrop-filter: saturate(160%) blur(8px);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-xs); padding: 12px 14px; margin: 0 auto 16px;
  position: sticky; top: 0; z-index: 6; max-height: 46vh; overflow-y: auto;
}
.bpalette__lbl { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; margin: 0 0 2px; }
.bpalette__row { display: grid; grid-template-columns: 84px 1fr; align-items: start; gap: 10px; }
.bpalette__row + .bpalette__row { border-top: 1px solid var(--line); padding-top: 7px; }
.bpalette__btns { display: flex; flex-wrap: wrap; gap: 7px; }
.bpal {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-body);
  font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer;
  background: var(--blossom-2); border: 1px solid var(--blossom); border-radius: 999px;
  padding: 7px 13px; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.bpal:hover { background: #fff; transform: translateY(-1px); box-shadow: var(--shadow-xs); }
.bpal__ic { font-size: 14px; }

/* ---------- block list ---------- */
.blist { display: flex; flex-direction: column; gap: 12px; }
.bempty { text-align: center; color: var(--muted); padding: 46px 24px; border: 1.5px dashed var(--blossom);
  border-radius: var(--r-md); background: #fff; display: flex; flex-direction: column; gap: 8px; }
.bempty b { color: var(--purple); font-family: var(--f-head); font-size: 17px; }

.bblock { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-xs); overflow: hidden; transition: box-shadow .15s ease, border-color .15s ease; }
.bblock.is-open { border-color: var(--blossom); box-shadow: var(--shadow-sm); }
.bblock.is-dragging { opacity: .55; box-shadow: var(--shadow-lg); outline: 2px dashed var(--purple); outline-offset: 2px; }
.bblock__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; }
.bblock__handle { cursor: grab; color: var(--muted); font-size: 16px; user-select: none; padding: 0 2px; }
.bblock__handle:active { cursor: grabbing; }
.bblock__ic { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px;
  background: var(--grad-purple); color: #fff; font-size: 14px; flex: none; }
.bblock__meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.bblock__meta b { font-size: 14px; color: var(--ink); }
.bblock__meta small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bblock__tools { display: flex; gap: 2px; flex: none; }
.biconbtn { border: 0; background: transparent; cursor: pointer; font-size: 14px; color: var(--muted);
  width: 28px; height: 28px; border-radius: 8px; transition: background .12s ease, color .12s ease; }
.biconbtn:hover { background: #EDEADF; color: var(--ink); }
.biconbtn--del:hover { background: #fde4ec; color: var(--pink); }

.bblock__edit { padding: 6px 16px 18px; border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #fffdfe, #fff); display: flex; flex-direction: column; gap: 12px; }

/* ---------- fields ---------- */
.bfield { display: flex; flex-direction: column; gap: 6px; }
.bfield > span { font-size: 12px; font-weight: 600; color: var(--purple); }
.bfield small { color: var(--muted); font-weight: 500; }
.brow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.brow .bfield { flex: 1 1 120px; }
.binput { font-family: var(--f-body); font-size: 14px; color: var(--ink); width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 11px; background: #fff; }
.binput:focus { outline: 2px solid var(--blossom); border-color: var(--blossom); }
.binput--sm { width: auto; }
.btext { resize: vertical; min-height: 44px; }
.bselect { font-family: var(--f-body); font-size: 14px; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 9px 11px; background: #fff; color: var(--ink); }
.bcheck { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); cursor: pointer; }

/* rich-text lines */
.brtlines { display: flex; flex-direction: column; gap: 8px; }
.brtline { display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px; align-items: start; }
.brtline__type { border: 1px solid var(--line); background: var(--blossom-2); border-radius: 8px;
  width: 32px; height: 38px; cursor: pointer; font-size: 15px; color: var(--purple); }
.brtline__fmt { gap: 4px; }
.bfmt { border: 1px solid var(--line); background: #fff; border-radius: 7px; width: 30px; height: 38px;
  cursor: pointer; color: var(--ink); font-size: 13px; }
.bfmt:hover { background: var(--blossom-2); }
.brtline__ce { min-height: 38px; line-height: 1.5; overflow-wrap: anywhere; }
.brtline__ce:empty::before { content: "Type here…"; color: var(--muted); }
.brtline__del { align-self: center; }

/* uploads */
.bupload { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bthumb { width: 92px; height: 62px; border-radius: var(--r-sm); object-fit: cover; border: 1px solid var(--line); }
.bthumb--empty { display: grid; place-items: center; font-size: 11px; color: var(--muted);
  background: var(--blossom-2); text-align: center; padding: 4px; width: auto; min-width: 92px; }
.bfilebtn { cursor: pointer; }

/* knowledge-check answers */
.bopt { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.bopt__ok { width: 18px; height: 18px; accent-color: var(--teal); }
.bpair { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.bpair__arrow { color: var(--muted); }

/* ---------- live preview panel (scrolls internally; frame = a centered canvas) ---------- */
.bpreview { min-height: 0; overflow: auto; padding: 18px 26px 64px;
  background: radial-gradient(900px 480px at 100% -10%, rgba(27,59,111,.06), transparent 60%), var(--bg); }
.bpreview__bar, .bpreview__frame, .bpreview__stage { max-width: 940px; margin-left: auto; margin-right: auto; }
.bpreview__bar { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px;
  position: sticky; top: 0; z-index: 6; padding: 8px 0; background: var(--bg); }
.bpreview__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 124, 128, .18); animation: bpulse 2s infinite; }
@keyframes bpulse { 50% { box-shadow: 0 0 0 6px rgba(0, 124, 128, 0); } }
.bpreview__frame {
  background:
    radial-gradient(700px 380px at 100% -10%, rgba(246, 202, 239, .4), transparent 60%),
    var(--white);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: 30px 32px 40px;
}
.bpreview__brand { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.bpreview__wm { font-family: var(--f-head); font-weight: 800; color: var(--pink); font-size: 17px; letter-spacing: -.02em; }
.bpreview__wm span { color: var(--purple); }
.bpreview__title { font-size: 28px; color: var(--purple); margin-bottom: 22px; line-height: 1.15; }
.bpreview__body { display: flex; flex-direction: column; gap: 22px; }
.bpv-empty { color: var(--muted); font-style: italic; }
.bpv-empty::before { content: ""; display: inline-block; width: 26px; height: 12px; margin-right: 8px;
  vertical-align: -1px; opacity: .75;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 20"><g fill="%23C9A24D"><circle cx="7" cy="14" r="3"/><circle cx="22" cy="10" r="3.6"/><circle cx="37" cy="6" r="3"/></g><line x1="7" y1="14" x2="22" y2="10" stroke="%23C9A24D" stroke-width="1" opacity=".5"/><line x1="22" y1="10" x2="37" y2="6" stroke="%23C9A24D" stroke-width="1" opacity=".5"/></svg>') center / contain no-repeat; }

/* Below 1024px: drop the fixed-height two-panel workspace and let the page scroll
   normally with the editor above the preview (still full-width, no horizontal overflow). */
@media (max-width: 1024px) {
  body.is-builder { overflow: auto; }
  .builderwrap { height: auto; }
  #builderMount { display: block; height: auto; }
  .btoolbar { position: sticky; top: 0; }
  .bcols { display: grid; grid-template-columns: minmax(0, 1fr); }
  .beditor, .bpreview { overflow: visible; min-height: 0; }
  .beditor { border-right: 0; border-bottom: 1px solid var(--line); }
  .bpalette, .bpreview__bar { position: static; }
  .bpalette { max-height: none; }
}
/* Narrow: stack the category label above its buttons instead of a side column. */
@media (max-width: 560px) {
  .bpalette__row { grid-template-columns: 1fr; gap: 4px; }
  .bpalette__grp { text-align: left; }
}

/* preview blocks (learner-faithful) */
.pv { max-width: 100%; }
.pv-rt__h { color: var(--purple); font-family: var(--f-head); margin-bottom: 8px; }
.pv-rt p { line-height: 1.6; margin: 0 0 10px; color: var(--ink); }
.pv-rt__ul { margin: 0 0 10px; padding-left: 20px; line-height: 1.6; }
.pv-img { margin: 0; }
.pv-img img { width: 100%; border-radius: var(--r-md); box-shadow: var(--shadow-sm); display: block; }
.pv-img--inline img { max-width: 320px; }
.pv-img--wide img { max-width: 100%; }
.pv-img figcaption, .pv-video figcaption, .pv-audio figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; text-align: center; }
.pv-audio { margin: 0; }
.pv-audio audio { width: 100%; height: 40px; }
/* visually-hidden live region for screen-reader announcements */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* keyboard focus indicator (WCAG 2.4.7) — scoped to the builder/player surfaces */
.bwrap button:focus-visible, .bwrap a:focus-visible, .bwrap input:focus-visible, .bwrap select:focus-visible,
.pv button:focus-visible, .pv a:focus-visible, .pv input:focus-visible, .pv select:focus-visible, .pv [tabindex]:focus-visible,
.bpreview button:focus-visible, .bplay button:focus-visible { outline: 2px solid var(--pink-l); outline-offset: 2px; }
/* flashcards render as <button> now — neutralise UA button chrome */
button.pv-fc__card { font: inherit; text-align: inherit; padding: 0; border: none; background: none; }
/* scenario — editor cards */
.bscn { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; margin-bottom: 10px; }
.bscn__hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.bscn__hdbtns { display: flex; gap: 8px; align-items: center; }
.bscn__choices { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.bscn__choice { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 6px; align-items: center; }
/* scenario — learner */
.pv-scn__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pv-scn__av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.pv-scn__av--ph { display: inline-flex; align-items: center; justify-content: center; background: var(--blossom); font-size: 20px; }
.pv-scn__who { display: flex; flex-direction: column; line-height: 1.2; }
.pv-scn__who small { color: var(--muted); font-size: 12px; }
.pv-scn__img { width: 100%; border-radius: var(--r-md); margin-bottom: 10px; box-shadow: var(--shadow-sm); }
.pv-scn__bubble { background: var(--blossom-2); border-radius: 4px 18px 18px 18px; padding: 12px 16px; margin-bottom: 12px; }
.pv-scn__bubble p { margin: 0 0 6px; } .pv-scn__bubble p:last-child { margin: 0; }
.pv-scn__choices { display: flex; flex-direction: column; gap: 8px; }
.pv-scn__choice { text-align: left; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); font: inherit; font-size: 14px; cursor: pointer; }
.pv-scn__choice:hover { border-color: var(--purple); }
.pv-scn__fb { border-left: 3px solid var(--ochre); background: #fdf6e4; padding: 10px 14px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-bottom: 10px; font-size: 14px; }
.pv-scn__fb p { margin: 0; }
.pv-scn__end { border-radius: var(--r-sm); padding: 14px 16px; margin-bottom: 10px; font-size: 14px; }
.pv-scn__end b { display: block; margin-bottom: 4px; font-family: var(--f-head); }
.pv-scn__end.is-good { border: 1px solid var(--teal); background: #eafaf8; }
.pv-scn__end.is-bad { border: 1px solid var(--pink); background: #fde4ec; }
.pv-scn__end p { margin: 0; }
[data-theme="dark"] .pv-scn__bubble { background: var(--field); }
[data-theme="dark"] .pv-scn__choice { background: var(--field); }
[data-theme="dark"] .pv-scn__fb { background: rgba(201,162,77,.16); }
[data-theme="dark"] .pv-scn__end.is-good { background: rgba(0,124,128,.24); }
[data-theme="dark"] .pv-scn__end.is-bad { background: rgba(27,59,111,.24); }
/* course outline (U1) */
.boutline { display: flex; flex-direction: column; gap: 6px; max-height: 460px; overflow: auto; }
.boutline__row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
.boutline__row:hover { border-color: var(--purple); }
.boutline__num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--blossom); color: var(--purple); }
.boutline__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.boutline__meta small { color: var(--muted); font-size: 12px; }
.boutline__sec { color: var(--ochre) !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 10px !important; }
.bhistlist { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow: auto; }
.bhistrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.bhistrow__v { font-weight: 800; font-family: var(--f-head); color: var(--purple); min-width: 34px; }
.bhistrow__meta { flex: 1; display: flex; flex-direction: column; font-size: 13px; }
.bhistrow__meta small { color: var(--muted); }
.bpub-warn { font-size: 13px; background: #fdf6e4; border: 1px solid var(--ochre); border-radius: var(--r-sm); padding: 10px 14px; margin: 0 0 14px; }
.bpub-warn ul { margin: 6px 0 0; padding-left: 18px; }
[data-theme="dark"] .bpub-warn { background: rgba(201,162,77,.16); }
.bhist { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--white); cursor: pointer; font-size: 15px; color: var(--ink); flex: 0 0 auto; }
.bhist:hover:not(:disabled) { border-color: var(--purple); }
.bhist:disabled { opacity: .35; cursor: default; }
[data-theme="dark"] .bhist { background: var(--field); }
.btbl__row { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.btbl__cell { flex: 1; min-width: 0; }
.pv-table__t { width: 100%; border-collapse: collapse; font-size: 14px; }
.pv-table__t caption { caption-side: bottom; font-size: 13px; color: var(--muted); padding-top: 8px; }
.pv-table__t th { text-align: left; font-weight: 700; background: var(--chip-bg); }
.pv-table__t th, .pv-table__t td { padding: 9px 12px; border: 1px solid var(--line); }
.pv-table__t tbody tr:nth-child(even) td { background: var(--blossom-2); }
/* results — per-question review (U5) */
.brev { margin-top: 18px; text-align: left; }
.brev summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--purple); }
.brev__list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.brev__row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.brev__row.is-ok { border-color: var(--teal); }
.brev__row.is-no { border-color: var(--pink); }
.brev__mark { font-weight: 800; }
.brev__row.is-ok .brev__mark { color: var(--teal); }
.brev__row.is-no .brev__mark { color: var(--pink); }
.brev__body { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.brev__body small { color: var(--muted); font-size: 12px; }
/* course variables + conditional visibility */
.bvar { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.bvar__use { font-size: 11px; font-weight: 700; color: var(--muted); min-width: 44px; text-align: center; }
.bstyle--cond { margin-top: 6px; }
.bbtn-set { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.pv-cond { font-size: 11px; font-weight: 700; color: var(--ochre); border: 1px dashed var(--ochre); border-radius: 999px; padding: 3px 10px; display: inline-block; margin: 4px 0 -8px; }
/* device-width preview + paste-block palette button */
.bpv--tablet .bpreview__frame, .bpv--tablet .bplay { max-width: 768px; margin-left: auto; margin-right: auto; }
.bpv--mobile .bpreview__frame, .bpv--mobile .bplay { max-width: 390px; margin-left: auto; margin-right: auto; }
.bmodes--dev { margin-right: 8px; }
.bpal--paste { border-color: var(--purple); }
.bpalette__grp { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); text-align: right; align-self: center; padding-top: 1px; }
.pv-it { display: flex; gap: 18px; align-items: flex-start; }
.pv-it--right { flex-direction: row-reverse; }
.pv-it__media { flex: 0 0 40%; }
.pv-it__media img { width: 100%; border-radius: var(--r-md); box-shadow: var(--shadow-sm); display: block; }
.pv-it__body { flex: 1; min-width: 0; }
.pv-it__h { margin: 0 0 8px; font-family: var(--f-head); }
.pv-it__body p { margin: 0 0 8px; }
@media (max-width: 640px) { .pv-it, .pv-it--right { flex-direction: column; } .pv-it__media { flex-basis: auto; width: 100%; } }
.pv-gal--g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pv-gal--g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.pv-gal__item { margin: 0; }
.pv-gal__item img { width: 100%; border-radius: var(--r-md); box-shadow: var(--shadow-sm); display: block; }
.pv-gal__item figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; text-align: center; }
.pv-gal__stage { margin-bottom: 10px; }
.pv-gal__nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.pv-gal__count { font-size: 13px; color: var(--muted); }
.pv-embed { margin: 0; }
.pv-embed figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; text-align: center; }
.pv-embed__box { position: relative; padding-top: 56.25%; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.pv-embed__box--4x3 { padding-top: 75%; }
.pv-embed__box--tall { padding-top: 125%; }
.pv-embed__box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pv-img__ph { background: var(--blossom-2); border: 1.5px dashed var(--blossom); border-radius: var(--r-md);
  padding: 34px; text-align: center; color: var(--muted); font-size: 13px; }
.pv-video { margin: 0; }
.pv-video__embed { position: relative; padding-top: 56.25%; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.pv-video__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pv-video video { width: 100%; border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.pv-res { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--shadow-xs); }
.pv-res__ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px;
  background: var(--grad-pink); color: #fff; font-size: 18px; flex: none; }
.pv-res__meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pv-res__meta small { color: var(--muted); font-size: 12px; }
.pv-res__btn { font-size: 13px; font-weight: 600; color: var(--muted); border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 999px; white-space: nowrap; }
.pv-res.is-ready .pv-res__btn { color: var(--teal); border-color: var(--teal); }
.pv-div { border-top: 2px solid var(--blossom); padding-top: 18px; }
.pv-div__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ochre); }
.pv-div__t { color: var(--purple); font-size: 22px; margin-top: 4px; }
.pv-div__s { color: var(--muted); margin-top: 4px; }
.pv-kc { background: linear-gradient(180deg, #FFFEFB, #fff); border: 1px solid var(--blossom);
  border-radius: var(--r-md); padding: 18px 18px 16px; box-shadow: var(--shadow-xs); }
.pv-kc__tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--teal); background: #d9f2f0; border-radius: 999px; padding: 3px 10px; margin-bottom: 10px; }
.pv-kc__q { font-weight: 600; color: var(--ink); margin: 0 0 12px; line-height: 1.45; }
.pv-kc__opts { display: flex; flex-direction: column; gap: 8px; }
.pv-kc__opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: #fff; font-size: 14px; }
.pv-kc__opt.is-correct { border-color: var(--teal); background: #eafaf8; }
.pv-kc__mark { color: var(--muted); }
.pv-kc__key { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--teal); }
.pv-kc__match { display: flex; flex-direction: column; gap: 8px; }
.pv-kc__pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.pv-kc__pair span { padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; font-size: 14px; }
.pv-kc__pair .is-correct { border-color: var(--teal); background: #eafaf8; }
.pv-kc__arrow { border: 0 !important; background: transparent !important; color: var(--muted); padding: 0 !important; }

/* ---------- drafts overlay + toast ---------- */
.boverlay { position: fixed; inset: 0; background: rgba(43, 20, 48, .5); backdrop-filter: blur(3px);
  display: grid; place-items: center; z-index: 200; padding: 20px; }
.bmodal { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 26px 28px;
  width: min(560px, 100%); position: relative; max-height: 82vh; overflow: auto; }
.bmodal h3 { color: var(--purple); margin-bottom: 4px; }
.bmodal__sub { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.boverlay__x { position: absolute; top: 14px; right: 16px; border: 0; background: transparent; font-size: 22px;
  color: var(--muted); cursor: pointer; }
.bdrafts { display: flex; flex-direction: column; gap: 10px; }
.bdraft { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-md); }
.bdraft__meta { display: flex; flex-direction: column; min-width: 0; }
.bdraft__meta small { color: var(--muted); font-size: 12px; }
.bdraft__act { display: flex; align-items: center; gap: 6px; flex: none; }

.bfield[hidden] { display: none; }   /* .bfield is display:flex, which overrides [hidden] */

/* ---------- in-app course player (staff delivery) ---------- */
.courseplayer { position: fixed; inset: 0; z-index: 300; overflow: auto; display: flex; flex-direction: column;
  background: radial-gradient(1100px 620px at 100% -8%, rgba(246,202,239,.5), transparent 60%), var(--bg); }
.courseplayer__bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 12px 22px; background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); }
.courseplayer__ttl { font-family: var(--f-head); font-weight: 800; color: var(--purple); letter-spacing: -.02em; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.courseplayer__stage { width: 100%; max-width: 1160px; margin: 22px auto; padding: 0 20px; }
.courseplayer .bpreview__frame { max-height: none; }   /* grow with the page, not an inner scroll */
.courseplayer .bplay--cover, .courseplayer .bplay--result { max-width: 860px; margin: 0 auto; }
@media (max-width: 560px) { .courseplayer__stage { padding: 0 12px; margin: 14px auto; } }

.btoast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0;
  background: var(--purple); color: #fff; padding: 13px 20px; border-radius: 999px; box-shadow: var(--shadow-lg);
  font-size: 14px; font-weight: 500; max-width: min(560px, 90vw); z-index: 250; transition: transform .3s ease, opacity .3s ease; }
.btoast.is-in { transform: translate(-50%, 0); opacity: 1; }
.btoast--warn { background: var(--pink); }
/* Version history modal rows */
.vhlist { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow: auto; margin-top: 8px; }
.vhrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.vhrow__v { font-weight: 800; color: var(--purple); min-width: 42px; }
.vhrow__meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.vhrow__meta small { color: var(--muted); }
.vhrow__cur { font-size: 11px; font-weight: 700; color: #fff; background: var(--teal); padding: 3px 9px; border-radius: 999px; }
.btoast--undo { display: flex; align-items: center; gap: 14px; }
.btoast__undo { background: rgba(255,255,255,.2); color: #fff; border: 0; border-radius: 999px;
  padding: 5px 14px; font-weight: 700; cursor: pointer; font-size: 13px; }
.btoast__undo:hover { background: rgba(255,255,255,.32); }

/* ---------- preview mode toggle + learner player ---------- */
.bmodes { margin-left: auto; display: inline-flex; gap: 2px; background: var(--blossom-2);
  border: 1px solid var(--blossom); border-radius: 999px; padding: 2px; }
.bmode { border: 0; background: transparent; cursor: pointer; font-family: var(--f-body); font-size: 12px;
  font-weight: 600; color: var(--muted); padding: 5px 14px; border-radius: 999px; letter-spacing: 0; text-transform: none; }
.bmode.is-active { background: var(--white); color: var(--purple); box-shadow: var(--shadow-xs); }

.bplay__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.bplay__count { font-size: 12px; font-weight: 600; color: var(--muted); }
.bplay__bar { height: 6px; border-radius: 999px; background: var(--blossom-2); overflow: hidden; margin-bottom: 20px; }
.bplay__bar span { display: block; height: 100%; background: var(--grad-fill); border-radius: 999px; transition: width .3s ease; }
.bplay__title { color: var(--purple); font-size: 24px; margin: 4px 0 4px; }
.bplay__sub { color: var(--muted); margin-bottom: 6px; }
.bplay__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px;
  padding-top: 18px; border-top: 1px solid var(--line); }

/* learner-interactive knowledge check */
.pv-kc--learn .pv-kc__opt { cursor: pointer; }
.pv-kc--learn .pv-kc__opt input { accent-color: var(--teal); width: 17px; height: 17px; }
.pv-kc__opt.is-wrong { border-color: var(--pink); background: #fde4ec; }
.pv-kc__pair.is-correct select { border-color: var(--teal); background: #eafaf8; }
.pv-kc__pair.is-wrong select { border-color: var(--pink); background: #fde4ec; }
.pv-ord__num { flex: 0 0 auto; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--chip-bg); font-size: 12px; font-weight: 700; }
.pv-ord__txt { flex: 1; min-width: 0; }
.pv-ord__btn { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); background: var(--white); cursor: pointer; font-size: 13px; color: var(--ink); }
.pv-ord__btn:hover:not(:disabled) { border-color: var(--purple); }
.pv-ord__btn:disabled { opacity: .35; cursor: default; }
[data-theme="dark"] .pv-ord__btn { background: var(--field); }
.pv-kc__fill { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.pv-kc__fill input { max-width: 340px; }
.pv-kc__fill.is-correct input { border-color: var(--teal); background: #eafaf8; }
.pv-kc__fill.is-wrong input { border-color: var(--pink); background: #fde4ec; }

/* drag-and-drop matching + sorting (chips, slots, buckets) */
.pv-dnd__pool { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border: 1.5px dashed var(--line); border-radius: var(--r-sm); margin-top: 12px; min-height: 46px; }
.pv-dnd__chip { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font: inherit; font-size: 14px; cursor: grab; }
.pv-dnd__chip:hover { border-color: var(--purple); }
.pv-dnd__chip.is-picked { border-color: var(--purple); box-shadow: 0 0 0 2px rgba(10,17,40,.18); }
.pv-dnd__chip.is-correct { border-color: var(--teal); background: #eafaf8; cursor: default; }
.pv-dnd__chip.is-wrong { border-color: var(--pink); background: #fde4ec; cursor: default; }
.pv-dnd__done { font-size: 13px; color: var(--muted); align-self: center; }
.pv-mt__slot { min-height: 38px; text-align: left; padding: 9px 12px; border: 1.5px dashed var(--line); border-radius: var(--r-sm); background: transparent; font: inherit; font-size: 14px; cursor: pointer; }
.pv-mt__slot.is-filled { border-style: solid; background: var(--white); }
.pv-mt__slot.is-over { border-color: var(--purple); }
.pv-mt__ph { color: var(--muted); font-size: 13px; }
.pv-mt__key { display: block; font-size: 11px; font-weight: 700; color: var(--teal); }
.pv-kc__pair.is-correct .pv-mt__slot { border-color: var(--teal); background: #eafaf8; }
.pv-kc__pair.is-wrong .pv-mt__slot { border-color: var(--pink); background: #fde4ec; }
.pv-srt__cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 12px; }
.pv-srt__cat { border: 1.5px dashed var(--line); border-radius: var(--r-sm); padding: 10px; cursor: pointer; }
.pv-srt__cat.is-over { border-color: var(--purple); }
.pv-srt__cat__hd { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.pv-srt__cat__bd { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; }
.pv-kc__foot { margin-top: 14px; }
.pv-kc__retry { margin-top: 10px; }
.pv-kc__fb { font-size: 14px; font-weight: 600; padding: 10px 14px; border-radius: var(--r-sm); }
.pv-kc__fb.is-ok { color: var(--teal); background: #d9f2f0; }
.pv-kc__fb.is-no { color: var(--pink); background: #fde4ec; }

/* results */
.bplay--result { text-align: center; position: relative; overflow: hidden; }
/* Confetti burst on a passing result (see confettiBurst in builder.js). */
.bconfetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bconfetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px;
  opacity: .9; animation: bconfetti-fall 2.6s linear forwards; }
@keyframes bconfetti-fall {
  0% { top: -12px; opacity: 1; }
  100% { top: 105%; opacity: .4; }
}
.bresult { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 0 8px; }
.bresult__ring { width: 132px; height: 132px; border-radius: 50%; display: grid; place-content: center; margin-bottom: 8px;
  color: #fff; box-shadow: var(--shadow); }
.bresult__ring b { font-family: var(--f-head); font-size: 34px; line-height: 1; }
.bresult__ring small { font-size: 12px; opacity: .85; text-transform: uppercase; letter-spacing: .08em; }
.bresult.is-pass .bresult__ring { background: var(--grad-purple); }
.bresult.is-fail .bresult__ring { background: linear-gradient(135deg, #2C5490, var(--pink)); }
.bresult h2 { color: var(--purple); }
.bresult p { color: var(--muted); font-size: 14px; }

@media (max-width: 560px) {
  .beditor { padding: 16px 16px 40px; }
  .bpreview { padding: 12px 16px 40px; }
  .btoolbar { padding: 10px 16px; }
  .brtline { grid-template-columns: auto 1fr; }
  .brtline__fmt { grid-column: 1 / -1; }
  .pv-kc__pair { grid-template-columns: 1fr; }
  .pv-kc__arrow { display: none; }
}

/* ============================================================================
   Rise shell — cover / start page, lesson sidebar, block styling & entrance anim.
   The learner player (.bplay) has three phases: cover, lesson (sidebar + content),
   result. Compact mode (builder preview) collapses the sidebar into a drawer.
   ========================================================================== */

/* author-preview cover strip */
.bpv-cover { margin-bottom: 22px; }
.bpv-cover.has-img { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line);
  position: relative; padding: 0; }
.bpv-cover__img { width: 100%; max-height: 200px; object-fit: cover; display: block; }
.bpv-cover.has-img .bpreview__title { position: absolute; left: 20px; right: 20px; bottom: 44px; color: #fff;
  text-shadow: 0 2px 10px rgba(10,17,40,.55); margin: 0; }
.bpv-cover.has-img .bpv-cover__desc { position: absolute; left: 20px; right: 20px; bottom: 16px; color: #fff;
  text-shadow: 0 2px 8px rgba(10,17,40,.6); margin: 0; font-size: 14px; }
.bpv-cover__desc { color: var(--muted); margin-top: 8px; line-height: 1.55; }

/* per-block styling modifiers */
.pv--tint { background: var(--blossom-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; }
.pv--center { text-align: center; }
.pv--center.pv-rt__ul, .pv--center .pv-rt__ul { list-style-position: inside; padding-left: 0; }
.pv--center figure, .pv--center img { margin-left: auto; margin-right: auto; }

/* section vs lesson rule in author preview */
.pv-div--section { border-top-width: 3px; border-top-color: var(--ochre); }
.pv-div--section .pv-div__eyebrow { color: var(--ochre); }

/* block-style editor row */
.bstyle { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 4px;
  padding-top: 12px; border-top: 1px dashed var(--line); }
.bstyle__lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 10px; }
.bfield--sm { flex: 0 0 auto; }
.bfield--sm > span { font-size: 11px; }

/* cover modal preview */
.bcover-pv { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; position: relative; background: var(--blossom-2); }
.bcover-pv img { width: 100%; max-height: 170px; object-fit: cover; display: block; }
.bcover-pv__ph { padding: 40px; text-align: center; color: var(--muted); font-size: 13px; }
.bcover-pv__cap { padding: 12px 16px; display: flex; flex-direction: column; gap: 3px; }
.bcover-pv__cap b { color: var(--purple); font-family: var(--f-head); font-size: 17px; }
.bcover-pv__cap span { color: var(--muted); font-size: 13px; }

/* ---- learner: cover phase ---- */
.bplay--cover { padding: 0 !important; overflow: hidden; }
.bplay__cover { position: relative; }
.bplay__coverimg { width: 100%; height: 260px; object-fit: cover; display: block; }
.bplay__cover.has-img .bplay__coverin { position: absolute; inset: auto 0 0 0; padding: 30px 34px 34px;
  background: linear-gradient(0deg, rgba(10,17,40,.82), rgba(10,17,40,.15) 70%, transparent);
  color: #fff; }
.bplay__coverin { padding: 40px 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.bplay__cover.has-img .bpreview__wm { color: #fff; }
.bplay__covertitle { font-family: var(--f-head); font-weight: 800; letter-spacing: -.02em; font-size: 34px;
  line-height: 1.1; color: var(--purple); margin: 4px 0; }
.bplay__cover.has-img .bplay__covertitle { color: #fff; }
.bplay__coverdesc { color: var(--muted); line-height: 1.6; max-width: 60ch; margin: 0; }
.bplay__cover.has-img .bplay__coverdesc { color: rgba(255,255,255,.9); }
.bplay__covermeta { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ochre); }
.bplay__covertitle + .bplay__coverdesc { margin-top: -2px; }
/* Art-first cover (meta.cover.showTitle off): the artwork already carries the title/
   branding, so NOTHING overlays it — natural aspect ratio, no gradient, and the brand,
   meta and Start button flow below the image instead. */
.bplay__cover.has-img.bplay__cover--art .bplay__coverimg { height: auto; max-height: 440px; border-radius: var(--r-md); }
.bplay__cover.has-img.bplay__cover--art .bplay__coverin { position: static; background: none; color: inherit; padding: 24px 4px 8px; }
.bplay__cover.has-img.bplay__cover--art .bpreview__wm { color: var(--pink); }
.bplay__cover.has-img.bplay__cover--art .bplay__coverdesc { color: var(--muted); }
.bpv-cover.has-img.bpv-cover--art { border: none; border-radius: 0; }
.bpv-cover.has-img.bpv-cover--art .bpv-cover__img { max-height: 320px; height: auto; border-radius: var(--r-md); border: 1px solid var(--line); }

/* Orion branded-cover generator (Cover modal) */
.bcover-gen { border: 1px dashed var(--line); border-radius: var(--r-md); padding: 14px 16px 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.bcover-gen > b { font-family: var(--f-head); font-size: 14px; }
.bcover-gen > small { color: var(--muted); line-height: 1.5; }
.bcover-gen__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bcover-gen__grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 0; }
.bcover-gen__grid .binput { width: 100%; }
.bcover-gen .pill { align-self: flex-start; }
@media (max-width: 560px) { .bcover-gen__grid { grid-template-columns: 1fr; } }

/* ---- learner: lesson phase (sidebar + content) ---- */
.bplay--lesson { display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: 22px; align-items: start; position: relative; }
.bside { position: sticky; top: 0; align-self: start; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 18px 16px; display: flex; flex-direction: column; gap: 12px;
  max-height: calc(100vh - 40px); overflow: auto; }
.bside__head { display: flex; align-items: center; }
.bside__ttl { font-family: var(--f-head); font-weight: 800; color: var(--purple); font-size: 16px; line-height: 1.25; letter-spacing: -.01em; }
.bside__prog { display: flex; flex-direction: column; gap: 5px; }
.bside__prog small { font-size: 11px; color: var(--muted); font-weight: 600; }
.bside__list { display: flex; flex-direction: column; gap: 2px; }
.bside__sec { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ochre);
  padding: 10px 8px 4px; }
.bside__item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  border: 0; background: transparent; border-radius: var(--r-sm); padding: 9px 10px; font-family: var(--f-body);
  font-size: 13.5px; color: var(--ink); transition: background .12s ease; }
.bside__item:hover { background: var(--blossom-2); }
.bside__item.is-current { background: var(--blossom-2); color: var(--purple); font-weight: 700; }
.bside__num { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; background: var(--blossom); color: var(--purple); }
.bside__item.is-current .bside__num { background: var(--grad-purple); color: #fff; }
.bside__item.is-done .bside__num { background: var(--teal); color: #fff; }
.bside__item.is-locked { opacity: .5; cursor: not-allowed; }
.bside__item.is-locked:hover { background: transparent; }
.bside__item.is-locked .bside__num { background: transparent; font-size: 11px; }
.bside__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bplay__main { min-width: 0; }
.bplay__mtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; min-height: 20px; }
.bplay__menu { display: none; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--white);
  color: var(--purple); border-radius: 999px; padding: 7px 14px; font-family: var(--f-body); font-weight: 600; font-size: 13px; cursor: pointer; }
.bplay__content { min-width: 0; }
.bside__scrim { display: none; }

/* entrance animation — blocks rise + fade in, gently staggered */
.bplay__anim > .pv { animation: bRiseIn .45s cubic-bezier(.2,.7,.2,1) both; }
.bplay__anim > .pv:nth-child(2) { animation-delay: .05s; }
.bplay__anim > .pv:nth-child(3) { animation-delay: .10s; }
.bplay__anim > .pv:nth-child(4) { animation-delay: .15s; }
.bplay__anim > .pv:nth-child(n+5) { animation-delay: .18s; }
@keyframes bRiseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bplay__anim > .pv { animation: none; } }

/* compact (builder preview) + narrow viewport → sidebar becomes a drawer */
.bplay--compact.bplay--lesson { grid-template-columns: minmax(0, 1fr); }
.bplay--compact .bplay__menu { display: inline-flex; }
.bplay--compact .bside,
.bplay--lesson .bside.is-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(280px, 82vw); z-index: 320;
  border-radius: 0; transform: translateX(-102%); transition: transform .25s ease; max-height: none; }
.bplay--compact .bside.is-open { transform: none; }
.bplay--compact .bside__scrim.is-open,
.bside__scrim.is-open { display: block; position: fixed; inset: 0; background: rgba(10,17,40,.4); z-index: 310; }

@media (max-width: 860px) {
  .bplay--lesson { grid-template-columns: minmax(0, 1fr); }
  .bplay__menu { display: inline-flex; }
  .bplay--lesson .bside { position: fixed; top: 0; left: 0; bottom: 0; width: min(280px, 82vw); z-index: 320;
    border-radius: 0; transform: translateX(-102%); transition: transform .25s ease; max-height: none; }
  .bplay--lesson .bside.is-open { transform: none; }
  .bplay__coverimg { height: 190px; }
  .bplay__coverin { padding: 26px 22px; }
  .bplay__covertitle { font-size: 26px; }
}

/* ============================================================================
   Rise block library — statement · list · quote · buttons · accordion · tabs ·
   flashcards · process · labeled graphic · sorting. Shared by the author preview
   and the learner player (interactive blocks are self-wired in preview()).
   ========================================================================== */

/* repeatable-rows editor */
.brep { display: flex; flex-direction: column; gap: 8px; }
.brep__row { position: relative; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 10px 34px 10px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.brep__row .binput { flex: 1 1 140px; }
.brep__row .brep__b { flex: 1 1 100%; }
.brep__t { flex: 1 1 100% !important; font-weight: 600; }
.brep__del { position: absolute; top: 6px; right: 6px; }
.brep__badge { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; background: var(--blossom); color: var(--purple); }
.brep__add { align-self: flex-start; }
.bbtn-ed { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; align-items: center; }
.bbtn-ed .binput { flex: 1 1 120px; }

/* statement / callout */
.pv-stmt p { margin: 0 0 8px; }
.pv-stmt p:last-child { margin-bottom: 0; }
.pv-stmt--emphasis { font-family: var(--f-head); font-weight: 800; color: var(--purple); font-size: 24px; line-height: 1.3; letter-spacing: -.01em; text-align: center; padding: 8px 0; }
.pv-stmt--note { background: var(--blossom-2); border-left: 4px solid var(--ochre); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 16px 20px; line-height: 1.6; }
.pv-stmt--quote { font-style: italic; color: var(--muted); font-size: 18px; line-height: 1.55; border-left: 3px solid var(--blossom); padding-left: 18px; }

/* list */
.pv-list { margin: 0; padding-left: 24px; line-height: 1.7; display: flex; flex-direction: column; gap: 6px; }
.pv-list--checklist { list-style: none; padding-left: 0; }
.pv-list--checklist li { display: flex; align-items: flex-start; gap: 10px; }
.pv-list__ck { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--teal); color: #fff; font-size: 12px; font-weight: 700; margin-top: 1px; }

/* quote */
.pv-quote { margin: 0; background: linear-gradient(180deg, var(--blossom-2), #fff); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 22px 24px; box-shadow: var(--shadow-xs); }
.pv-quote blockquote { margin: 0 0 12px; font-family: var(--f-head); font-weight: 700; font-size: 20px; color: var(--purple); line-height: 1.4; }
.pv-quote blockquote::before { content: "“"; color: var(--ochre); font-size: 30px; line-height: 0; vertical-align: -8px; margin-right: 2px; }
.pv-quote figcaption { display: flex; align-items: center; gap: 12px; }
.pv-quote__av { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.pv-quote figcaption b { color: var(--ink); display: block; font-size: 14px; }
.pv-quote figcaption small { color: var(--muted); font-size: 12px; }

/* buttons */
.pv-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.pv-btns--stack { flex-direction: column; align-items: flex-start; }
.pv-btn { display: inline-flex; align-items: center; font-family: var(--f-body); font-weight: 600; font-size: 14px;
  text-decoration: none; cursor: pointer; padding: 11px 22px; border-radius: 999px; background: var(--grad-pink);
  color: #fff; box-shadow: var(--shadow-sm); transition: transform .12s ease; }
.pv-btn:hover { transform: translateY(-1px); }
.pv-btn.is-off { background: var(--blossom); color: var(--muted); box-shadow: none; cursor: default; }

/* accordion */
.pv-acc { display: flex; flex-direction: column; gap: 8px; }
.pv-acc__item { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.pv-acc__hd { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 0; background: #fff; cursor: pointer; padding: 14px 18px; font-family: var(--f-head); font-weight: 700;
  color: var(--purple); font-size: 15px; text-align: left; }
.pv-acc__hd:hover { background: var(--blossom-2); }
.pv-acc__ic { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blossom); color: var(--purple); font-weight: 700; transition: transform .2s ease; }
.pv-acc__item.is-open .pv-acc__ic { transform: rotate(45deg); }
.pv-acc__bd { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.pv-acc__item.is-open .pv-acc__bd { grid-template-rows: 1fr; }
.pv-acc__in { overflow: hidden; }
.pv-acc__in p { margin: 0 18px 14px; line-height: 1.6; }
.pv-acc__in p:first-child { margin-top: 2px; }

/* tabs */
.pv-tabs { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.pv-tabs__bar { display: flex; flex-wrap: wrap; gap: 2px; background: var(--blossom-2); padding: 6px; }
.pv-tabs__tab { border: 0; background: transparent; cursor: pointer; font-family: var(--f-body); font-weight: 600;
  font-size: 13.5px; color: var(--muted); padding: 8px 16px; border-radius: 999px; }
.pv-tabs__tab.is-active { background: #fff; color: var(--purple); box-shadow: var(--shadow-xs); }
.pv-tabs__panel { padding: 18px 20px; line-height: 1.6; }
.pv-tabs__panel p { margin: 0 0 10px; }

/* flashcards */
.pv-fc { display: grid; gap: 14px; }
.pv-fc--c1 { grid-template-columns: minmax(0, 1fr); }
.pv-fc--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv-fc--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pv-fc__card { border: 0; background: transparent; cursor: pointer; padding: 0; perspective: 1000px; min-height: 132px; font-family: var(--f-body); }
.pv-fc__inner { position: relative; width: 100%; height: 100%; min-height: 132px; transform-style: preserve-3d; transition: transform .5s; }
.pv-fc__card.is-flipped .pv-fc__inner { transform: rotateY(180deg); }
.pv-fc__face { position: absolute; inset: 0; backface-visibility: hidden; display: grid; place-items: center; text-align: center;
  border-radius: var(--r-md); padding: 18px; box-shadow: var(--shadow-sm); }
.pv-fc__face--f { background: var(--grad-purple); color: #fff; font-family: var(--f-head); font-weight: 700; font-size: 17px; }
.pv-fc__face--b { background: #fff; border: 1px solid var(--line); color: var(--ink); transform: rotateY(180deg); line-height: 1.5; }

/* process / timeline */
.pv-proc--timeline { display: flex; flex-direction: column; gap: 0; }
.pv-proc__row { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 0 0 22px; position: relative; }
.pv-proc__row::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: -4px; width: 2px; background: var(--blossom); }
.pv-proc__row:last-child::before { display: none; }
.pv-proc__num { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-purple); color: #fff; font-family: var(--f-head); font-weight: 700; z-index: 1; }
.pv-proc__c h4 { color: var(--purple); font-family: var(--f-head); margin: 6px 0 6px; }
.pv-proc__c p { margin: 0 0 8px; line-height: 1.6; }
.pv-proc--stepper { border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; background: #fff; }
.pv-proc__dots { display: flex; gap: 6px; margin-bottom: 16px; }
.pv-proc__dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--blossom); }
.pv-proc__dots span.is-on { background: var(--ochre); width: 22px; border-radius: 999px; }
.pv-proc__step { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.pv-proc__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.pv-proc__count { font-size: 12px; font-weight: 600; color: var(--muted); }

/* labeled graphic */
.pv-lg__stage { position: relative; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); max-width: 900px; width: 100%; margin: 0 auto; }
.pv-lg__stage img { width: 100%; display: block; }
.pv-lg__dot { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid #fff; background: var(--grad-pink); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer;
  box-shadow: var(--shadow-sm); z-index: 1; }
.pv-lg__dot.is-open { z-index: 3; }
.pv-lg__pop { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%) scale(.96);
  width: max(180px, 60vw); max-width: 260px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow); padding: 12px 14px; text-align: left; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.pv-lg__dot.is-open .pv-lg__pop { opacity: 1; transform: translateX(-50%) scale(1); pointer-events: auto; }
.pv-lg__pop b { color: var(--purple); display: block; margin-bottom: 4px; }
.pv-lg__pop p { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: var(--ink); font-weight: 400; }
/* labeled-graphic marker placer (editor) */
.blg-place { position: relative; border-radius: var(--r-sm); overflow: hidden; cursor: crosshair; border: 1px solid var(--line); margin-bottom: 10px; }
.blg-place img { width: 100%; display: block; }
.blg-place__dot { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #fff; background: var(--grad-pink); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }

/* sorting */
.pv-sort__cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.pv-sort__cat { border: 1px dashed var(--line); border-radius: var(--r-md); padding: 12px; background: var(--blossom-2); }
.pv-sort__cat h5 { margin: 0 0 8px; color: var(--purple); font-family: var(--f-head); font-size: 13px; }
.pv-sort__chip { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 13px; margin-bottom: 6px; }
.pv-sort__chip.is-correct { border-color: var(--teal); }
.pv-sort--learn .pv-sort__rows { display: flex; flex-direction: column; gap: 8px; }
.pv-sort__row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.pv-sort__row.is-correct { border-color: var(--teal); background: #eaf5ee; }
.pv-sort__row.is-wrong { border-color: var(--pink); background: #eef2f8; }
.pv-sort__txt { font-size: 14px; }

@media (max-width: 560px) {
  .pv-fc--c2, .pv-fc--c3 { grid-template-columns: minmax(0, 1fr); }
  .pv-stmt--emphasis { font-size: 20px; }
}

/* ============================================================================
   Dark mode — mirrors the [data-theme="dark"] pass in styles.css. Brand accents
   (--pink/--purple/--teal/blossom vars) come through automatically; here we just
   swap the hard-coded white/light surfaces for deep plum. Correctness pastels on
   knowledge checks become tinted so they read on dark.
   ========================================================================== */
[data-theme="dark"] .btoolbar,
[data-theme="dark"] .courseplayer__bar { background: rgba(23,12,28,.82); }
[data-theme="dark"] .bpalette,
[data-theme="dark"] .bempty,
[data-theme="dark"] .bblock,
[data-theme="dark"] .bmodal,
[data-theme="dark"] .pv-res,
[data-theme="dark"] .pv-kc__opt,
[data-theme="dark"] .pv-kc__pair span { background: #0F1D3B; }
[data-theme="dark"] .bblock__edit { background: linear-gradient(180deg, #0F1D3B, #0E1C3A); }
[data-theme="dark"] .pv-kc { background: linear-gradient(180deg, #281a34, #0E1C3A); }
[data-theme="dark"] .binput,
[data-theme="dark"] .bselect,
[data-theme="dark"] .bfmt { background: var(--field); color: var(--ink); }
[data-theme="dark"] .bpreview__frame {
  background: radial-gradient(700px 380px at 100% -10%, rgba(27,59,111,.22), transparent 60%), var(--white);
}
[data-theme="dark"] .btitle:hover,
[data-theme="dark"] .bpal:hover,
[data-theme="dark"] .biconbtn:hover { background: #182A4C; }
[data-theme="dark"] .btitle:focus { background: var(--field); }
[data-theme="dark"] .bthumb--empty,
[data-theme="dark"] .pv-img__ph { background: #182A4C; }
/* knowledge-check correct/incorrect states — deep tints instead of pale pastels */
[data-theme="dark"] .pv-kc__opt.is-correct,
[data-theme="dark"] .pv-kc__pair .is-correct,
[data-theme="dark"] .pv-kc__pair.is-correct select,
[data-theme="dark"] .pv-kc__pair.is-correct .pv-mt__slot,
[data-theme="dark"] .pv-kc__fill.is-correct input,
[data-theme="dark"] .pv-dnd__chip.is-correct,
[data-theme="dark"] .pv-kc__tag,
[data-theme="dark"] .pv-kc__fb.is-ok { background: rgba(0,124,128,.24); }
[data-theme="dark"] .pv-kc__opt.is-wrong,
[data-theme="dark"] .pv-kc__pair.is-wrong select,
[data-theme="dark"] .pv-kc__pair.is-wrong .pv-mt__slot,
[data-theme="dark"] .pv-kc__fill.is-wrong input,
[data-theme="dark"] .pv-dnd__chip.is-wrong,
[data-theme="dark"] .pv-kc__fb.is-no { background: rgba(27,59,111,.24); }
[data-theme="dark"] .pv-dnd__chip,
[data-theme="dark"] .pv-mt__slot.is-filled { background: var(--field); }

/* Rise shell dark surfaces */
[data-theme="dark"] .bside,
[data-theme="dark"] .bplay__menu,
[data-theme="dark"] .bcover-pv,
[data-theme="dark"] .pv--tint { background: #0F1D3B; }
[data-theme="dark"] .bside__item:hover,
[data-theme="dark"] .bside__item.is-current { background: #182A4C; }
[data-theme="dark"] .bside__num { background: #22314F; color: var(--purple); }
[data-theme="dark"] .bcover-pv__ph { background: #182A4C; }

/* Rise block library dark surfaces */
[data-theme="dark"] .brep__row,
[data-theme="dark"] .pv-acc__item,
[data-theme="dark"] .pv-acc__hd,
[data-theme="dark"] .pv-tabs,
[data-theme="dark"] .pv-fc__face--b,
[data-theme="dark"] .pv-proc--stepper,
[data-theme="dark"] .pv-sort__chip,
[data-theme="dark"] .pv-sort__row,
[data-theme="dark"] .pv-lg__pop { background: #0F1D3B; }
[data-theme="dark"] .pv-acc__hd:hover,
[data-theme="dark"] .pv-tabs__tab.is-active { background: #182A4C; }
[data-theme="dark"] .pv-stmt--note,
[data-theme="dark"] .pv-quote,
[data-theme="dark"] .pv-tabs__bar,
[data-theme="dark"] .pv-sort__cat { background: #0E1C3A; }
[data-theme="dark"] .pv-sort__row.is-correct { background: rgba(46,125,91,.24); }
[data-theme="dark"] .pv-sort__row.is-wrong { background: rgba(27,59,111,.24); }
[data-theme="dark"] .brep__badge { background: #22314F; color: var(--purple); }

/* ---- Donut progress chart ---- */
.bside__donut-wrap { display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 0 8px; }
.bside__donut { display:block; }
#bSideProgTxt { font-size:.72rem; color:var(--muted,#888); text-align:center; }

/* ---- Gated continue button ---- */
.bplay__nav-r { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.bplay__gate-hint { color:var(--ochre,#c97c20); font-size:.8rem; }
#bpNext:disabled { opacity:.45; cursor:not-allowed; }

/* ---- SCORM iframe lesson ---- */
.bplay__scorm-wrap { display:flex; flex-direction:column; flex:1; min-height:0; }
.bplay__scorm-frame { flex:1; border:none; width:100%; min-height:600px; }
.pv-div--scorm .pv-div__badge { background:var(--teal,#1a7a6e); }

/* ---- All course player views: fill the full viewport edge-to-edge ---- */
.courseplayer { overflow: hidden; }
.courseplayer .courseplayer__stage {
  flex: 1; min-height: 0; max-width: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.courseplayer .bplay--lesson { flex: 1; min-height: 0; align-items: stretch; }
.courseplayer .bside {
  position: static; max-height: none; align-self: auto;
  border-radius: 0; border-top: none; border-bottom: none; border-left: none; overflow-y: auto;
}
.courseplayer .bplay__main { display: flex; flex-direction: column; min-height: 0; }
/* content card fills height and scrolls internally; nav pins to bottom */
.courseplayer .bplay__content {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  width: 100%; max-width: none; margin: 0; overflow-y: auto;
}
.courseplayer .bplay__content .bpreview__body { flex: 1; }
.courseplayer .bplay__nav { flex: none; }

/* ---- SCORM-specific: strip card chrome, fill iframe to 100% ---- */
.bplay__content--scorm {
  overflow: hidden;   /* iframe scrolls itself */
  background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0;
}
.bplay__content--scorm .bplay__scorm-wrap { flex: 1; min-height: 0; }
.bplay__content--scorm .bplay__scorm-frame { flex: 1; min-height: 0; height: 100%; }
.bplay__content--scorm .bplay__nav {
  padding: 10px 20px; border-top: 1px solid var(--line); background: var(--white);
}

/* ---- Image in accordion body ---- */
.pv-acc__img { width:100%; max-height:260px; object-fit:cover; border-radius:6px; margin-bottom:8px; display:block; }

/* ---- Image in tabs panel ---- */
.pv-tabs__img { width:100%; max-height:260px; object-fit:cover; border-radius:6px; margin-bottom:10px; display:block; }

/* ---- Flashcard faces with images ---- */
.pv-fc__face { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.pv-fc__img { width:100%; max-height:140px; object-fit:cover; border-radius:6px; }

/* ---- Editor: image row in block editors ---- */
.brep__imgrow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:4px 0; }
.bthumb { width:56px; height:40px; object-fit:cover; border-radius:4px; border:1px solid var(--border,#ddd); }
.brep__row--media { flex-direction:column; align-items:stretch; gap:4px; }
.brep__row--fc { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; }
.brep__fc-col { display:flex; flex-direction:column; gap:4px; }

/* ============================================================================
   TTS Narration — editor section + lesson audio bar
   ============================================================================ */

/* Narration section in the divider block editor */
.bnarr { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px;
  display: flex; flex-direction: column; gap: 8px; }
.bnarr__head { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .06em; }
.bnarr__preview { display: flex; align-items: center; gap: 8px; margin-top: 2px; }

/* Audio bar injected between the lesson counter and the content card */
.bplay__narration { display: flex; align-items: center; gap: 10px; padding: 8px 20px;
  background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  flex: none; }
.bnar__btn { width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--grad-pink); color: #fff; cursor: pointer; font-size: 14px; flex: none; }
.bnar__btn:hover { opacity: .85; }
.bnar__progress { flex: 1; height: 4px; background: var(--line); border-radius: 2px; cursor: pointer; }
.bnar__fill { height: 100%; background: var(--purple); border-radius: 2px; width: 0%;
  transition: width .1s linear; }
.bnar__time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.bnar__step { font-size: 12px; color: var(--muted); white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.bnar__speed { font-size: 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 2px 6px; background: var(--white); color: var(--ink); cursor: pointer; }
/* the block currently being narrated (per-block TTS queue) */
.bnar-hl { outline: 2px solid #C9A24D; outline-offset: 6px; border-radius: var(--r-sm); }
[data-theme="dark"] .bplay__narration { background: #0F1D3B; }
[data-theme="dark"] .bnar__speed { background: var(--field); color: var(--ink); }

/* ============================================================================
   Course thumbnails — admin course cards + player bar
   ============================================================================ */
.course-thumb { width: 100%; height: 80px; object-fit: cover; border-radius: var(--r-md) var(--r-md) 0 0;
  display: block; border-bottom: 1px solid var(--line); }
.cpbar__thumb { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; flex: none; }


/* U17: ordering-question drag (buttons remain the a11y path) */
.pv-ord__row[draggable="true"] { cursor: grab; }
.pv-ord__row.is-dragging { opacity: .55; outline: 2px dashed var(--purple); outline-offset: 2px; }

/* P3-17: question bank (pool) */
.pv-pool { border: 1px dashed var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 14px; }
.pv-pool__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pv-pool__head small { color: var(--muted); font-size: 12.5px; }
.bopt__go { flex: 0 0 auto; max-width: 160px; }

/* P3-18: chart, quote carousel, flashcard stack */
.pv-chart { margin: 0; display: grid; gap: 10px; }
.pv-chart__t { font-weight: 600; }
.pv-chart__box svg { width: 100%; height: auto; display: block; color: var(--ink, #2b2440); }
.pv-chart__pie { max-width: 240px; margin: 0 auto; }
.pv-chart__legend { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; font-size: 13px; }
.pv-chart__key { display: inline-flex; align-items: center; gap: 6px; }
.pv-chart__key i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.pv-qc { display: grid; gap: 10px; justify-items: center; }
.pv-qc__stage { width: 100%; }
.pv-qc__quote { margin: 0; }
.pv-fc--stack { display: grid; gap: 10px; justify-items: center; }
.pv-fc__stage { width: 100%; max-width: 420px; }
.pv-fc--stack .pv-fc__card { width: 100%; min-height: 180px; }

/* P3-18b: scenario choice set-action row */
.bscn__set { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }