/* Manage > Build Content (build-content.js): design A "Outline + page", picked by Ryan 2026-09-30 from three
   mockups (~/.gstack/projects/PsychNPFellowship/designs/build-content-20260930/variant-A.html, whose styles
   these are). Left: the course outline. Right: the lesson exactly as members see it, edited in place.
   It lives in the normal page, so every rule is scoped to .baRoot or uses a "ba"/"bc" class. Staff tool:
   always the light look (the colors below override the portal's dark theme inside it). */
.baRoot{--text:#602D36;--muted:#7A5A5F;--border:rgba(96,45,54,.14);--bg:#fff;color:var(--text);color-scheme:light;
  font-family:Poppins,system-ui,-apple-system,sans-serif;font-size:13px;line-height:1.45;
  --baCream:#FAF8EE;--baDesk:#F6F3E9;--baRaised:#EFE9D8;--baRounds:#602D36;--baPsych:#CE3D1C;--baLime:#E1E782;
  --baLive:#2B7347;--baLiveBg:#E1EFE4;--baDraft:#8A5A08;--baDraftBg:#FBEBCB;--baDraftDot:#C98A1B;--topH:81px;--barH:58px}

/* ---------- buttons ---------- */
.baBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;
  border:1px solid transparent;background:none;font:600 14px/1.2 Poppins,sans-serif;color:var(--text);cursor:pointer;white-space:nowrap}
.baBtn svg{flex:none}
.baBtn:focus-visible,.baIconBtn:focus-visible,.baLBtn:focus-visible,.baModT:focus-visible,.baGrip:focus-visible,.baDots:focus-visible,
.baAdd:focus-visible,.baCourse:focus-visible,.baPickRow:focus-visible,.baCoverBtn:focus-visible,.baTbB:focus-visible,.baArtB:focus-visible,
.baBig:focus-visible,.baSw:focus-visible,.baNext:focus-visible,.baPBarBtn:focus-visible{outline:2px solid var(--baPsych);outline-offset:2px}
.baSoft{background:var(--baCream);border-color:var(--border)}
.baSoft:hover{background:var(--baRaised)}
.baSoft svg{color:var(--baPsych)}
.baPri{background:var(--baPsych);color:#fff;box-shadow:0 2px 0 rgba(96,45,54,.22)}
.baPri:hover{background:#B33518}
.baGhost{background:#fff;border-color:var(--border)}
.baGhost:hover{border-color:rgba(96,45,54,.38)}
.baTxt{color:var(--muted);padding:0 10px}
.baTxt:hover{color:var(--text)}
.baSm{min-height:36px;padding:0 12px;font-size:13px;border-radius:10px}
.baLime{background:var(--baLime);color:#3A1A20}
.baLime:hover{background:#D5DB6C}
.baOnDark{background:rgba(250,248,238,.1);border-color:rgba(250,248,238,.3);color:#FAF8EE}
.baOnDark:hover{background:rgba(250,248,238,.18)}
.baMockDark{color:rgba(250,248,238,.78);border-color:rgba(250,248,238,.4)}
.baIconBtn{width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:#fff;display:grid;place-items:center;
  color:var(--text);cursor:pointer;flex:none;padding:0}
.baIconBtn:hover{border-color:rgba(96,45,54,.38)}
.baIconBtn[aria-pressed="true"]{background:var(--baDesk)}

/* ---------- header row: New lesson, New course, and the Live Coaching button ---------- */
.baHead{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:-6px 0 16px}
.baLiveBtn{margin-left:auto;min-height:54px;padding:0 14px 0 9px;border-radius:16px;gap:12px;background:var(--baRounds);color:#FAF8EE;
  font-size:15px;box-shadow:0 8px 22px rgba(96,45,54,.2)}
.baLiveBtn:hover{background:#4D222A}
.baLiveIc{width:38px;height:38px;border-radius:11px;background:var(--baLime);color:var(--baRounds);display:grid;place-items:center;flex:none}
.baWaitN{background:rgba(250,248,238,.14);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;color:#F3EFDF}
.baCar{transition:transform .15s;opacity:.8}
[aria-expanded="true"]>.baCar{transform:rotate(180deg)}
.baLiveBtn.huOver{box-shadow:0 0 0 3px var(--baLime)}

/* the upload place that opens right under the Live Coaching button */
.baLivePanel{flex-basis:100%;order:9;position:relative;margin-top:6px;background:var(--baCream);border:1px solid var(--border);
  border-radius:20px;padding:18px 20px 20px;box-shadow:0 14px 34px rgba(96,45,54,.08)}
.baLivePanel::before{content:"";position:absolute;top:-8px;left:var(--notchX,80%);width:14px;height:14px;margin-left:-7px;background:var(--baCream);
  border-left:1px solid var(--border);border-top:1px solid var(--border);transform:rotate(45deg)}
.baLpTop{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.baLpTop .baLiveIc{width:34px;height:34px}
.baLpH{font:800 24px/1.05 'EC','Poppins',serif;letter-spacing:-.01em;flex:1;min-width:0}
.baLpGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:18px;align-items:start}
.baDrop{border:2px dashed rgba(96,45,54,.26);border-radius:16px;background:#fff;padding:26px 18px;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:10px;transition:border-color .15s,background .15s}
.baDrop b{font-size:15px}
.baDrop small{font-size:12px;color:var(--muted)}
.baDrop.huOver{border-color:var(--baPsych);background:#FFF5F1}
.baDropIc{width:52px;height:52px;border-radius:50%;background:var(--baDesk);color:var(--baPsych);display:grid;place-items:center}
.baRow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.baWaitH{display:flex;align-items:center;gap:8px;font-size:14px;margin:2px 0 10px}
.baCount{min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--baRounds);color:#FAF8EE;font:700 12px/22px Poppins;text-align:center}
.baWaitL{list-style:none;display:flex;flex-direction:column;gap:8px}
.baWRow,.baUpRow{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:11px 12px}
.baWIc{width:38px;height:38px;border-radius:10px;background:var(--baRounds);color:var(--baLime);display:grid;place-items:center;flex:none}
.baUpRow .baWIc{background:var(--baDesk);color:var(--baPsych)}
.baWTx{flex:1;min-width:0}
.baWTx b{display:block;font-size:13.5px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.baWTx small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.baWaitNote{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-top:12px}
.baProg{height:8px;border-radius:99px;background:rgba(96,45,54,.12);overflow:hidden;margin:6px 0 4px}
.baProg i{display:block;height:100%;width:0;border-radius:inherit;background:var(--baPsych);transition:width .2s}
.baChip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;font:700 12px/1 Poppins;flex:none;white-space:nowrap}
.baChip i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.baChip.live,.baChip.ready{background:var(--baLiveBg);color:var(--baLive)}
.baChip.draft{background:var(--baDraftBg);color:var(--baDraft)}
.baChip.draft i{background:none;box-shadow:inset 0 0 0 2px currentColor}
.baChip.prev{background:#ECEBFF;color:#3F3D8F}
.baChip.wait{background:var(--baDesk);color:var(--muted)}
.baSpin{width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(96,45,54,.18);border-top-color:var(--baPsych);animation:baSpin .8s linear infinite;flex:none}
@keyframes baSpin{to{transform:rotate(360deg)}}

/* ---------- popovers and the ... menu ---------- */
.baPop{position:fixed;z-index:120;width:320px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px;
  box-shadow:0 20px 48px rgba(42,20,24,.18);display:flex;flex-direction:column;gap:12px}
.baPopH{font-size:15px;font-weight:700}
.baFld{display:block}
.baFld>span{display:block;font:600 12.5px Poppins;margin-bottom:5px}
.baFld input,.baFld select{width:100%;height:44px;border:1px solid rgba(96,45,54,.26);border-radius:10px;padding:0 12px;
  font:500 15px Poppins,sans-serif;color:var(--text);background:#fff}
.baFld input:focus,.baFld select:focus{outline:none;border:2px solid var(--baPsych);padding:0 11px}
.baPopRow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.baMenu{position:fixed;z-index:130;min-width:200px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:6px;
  box-shadow:0 20px 48px rgba(42,20,24,.18)}
.baMenu button{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 12px;border:0;border-radius:9px;background:none;
  font:500 14px Poppins,sans-serif;color:var(--text);cursor:pointer;text-align:left}
.baMenu button:hover,.baMenu button:focus-visible{background:var(--baCream);outline:none}
.baMenu button svg{color:var(--muted)}
.baMenu .baDanger{color:#B3261E}
.baMenu .baDanger svg{color:#B3261E}
.baMenu hr{border:0;border-top:1px solid var(--border);margin:4px 6px}

/* ---------- the workspace: outline + page ---------- */
.baWs{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;align-items:start;background:var(--baCream);
  border:1px solid var(--border);border-radius:24px;padding:12px}
.baWs.noOl{grid-template-columns:minmax(0,1fr)}
.baWs.noOl .baOl{display:none}
.baPBar,.baSheetHead,.baScrim{display:none}

/* ---------- the outline ---------- */
.baOl{position:sticky;top:calc(var(--topH) + 12px);max-height:calc(100vh - var(--topH) - 24px);overflow:auto;padding:4px 4px 8px;
  scrollbar-width:thin;scrollbar-color:rgba(96,45,54,.2) transparent}
.baCourse{display:flex;align-items:center;gap:10px;width:100%;min-height:62px;padding:7px 10px 7px 7px;border-radius:14px;border:1px solid var(--border);
  background:#fff;cursor:pointer;text-align:left;color:var(--text);font:inherit;box-shadow:0 1px 2px rgba(96,45,54,.06)}
.baCourse:hover{border-color:rgba(96,45,54,.3)}
.baThumb{width:46px;height:46px;border-radius:11px;flex:none;object-fit:cover;background:#F3F1E6;display:grid;place-items:center;color:var(--muted)}
.baThumb.ph{border:1.5px dashed rgba(96,45,54,.28)}
.baCourseTx{flex:1;min-width:0}
.baCourseTx b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;line-height:1.25;font-weight:700}
.baCourseTx small{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);margin-top:3px}
.baPick{margin-top:6px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:6px;box-shadow:0 10px 26px rgba(96,45,54,.1)}
.baPickRow{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:5px 8px;border-radius:10px;border:0;background:none;
  cursor:pointer;text-align:left;font:500 13px/1.3 Poppins,sans-serif;color:var(--text)}
.baPickRow:hover{background:var(--baCream)}
.baPickRow .baThumb{width:34px;height:34px;border-radius:8px}
.baPickRow span.t{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.baPickRow[aria-current="true"]{background:var(--baDesk);font-weight:600}
.baPickNew{color:var(--baPsych);font-weight:600;border-top:1px solid var(--border);border-radius:0 0 10px 10px;margin-top:4px}
.baPickNew svg{margin:0 8px}
.baCoverBtn{display:flex;align-items:center;gap:9px;width:100%;min-height:40px;margin:8px 0 8px;padding:0 10px;border-radius:10px;border:0;background:none;
  font:600 12.5px Poppins,sans-serif;color:var(--muted);cursor:pointer;text-align:left}
.baCoverBtn:hover{background:rgba(96,45,54,.05);color:var(--text)}
.baCoverBtn.baSel{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(96,45,54,.14)}
.baDot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--baLive)}
.baDot.d{background:#fff;box-shadow:inset 0 0 0 2px var(--baDraftDot)}
.baEmpty{font-size:12.5px;color:var(--muted);padding:6px 10px 4px;font-style:italic}

.baMods{display:flex;flex-direction:column}
.baMod{border-radius:12px}
.baModH{display:flex;align-items:center;gap:1px;min-height:42px;border-radius:10px;padding-right:2px}
.baModH:hover{background:rgba(96,45,54,.05)}
.baGrip{width:18px;height:34px;display:grid;place-items:center;color:rgba(96,45,54,.38);cursor:grab;touch-action:none;border:0;background:none;
  flex:none;border-radius:6px;padding:0;opacity:0;transition:opacity .12s}
.baModH:hover .baGrip,.baL:hover .baGrip,.baGrip:focus-visible{opacity:1}
.baGrip:hover{color:var(--text);background:rgba(96,45,54,.07)}
.baModT{flex:1;min-width:0;display:flex;align-items:center;gap:6px;border:0;background:none;padding:9px 2px;font:700 12.5px/1.3 Poppins,sans-serif;
  color:var(--text);text-align:left;cursor:pointer}
.baModT svg{transition:transform .15s;flex:none;color:var(--muted)}
.baMod.closed .baModT svg{transform:rotate(-90deg)}
.baModN{font:600 11px/1 Poppins;color:var(--muted);background:rgba(96,45,54,.07);border-radius:99px;padding:4px 7px;flex:none}
.baMini{font:700 10px/1 Poppins;letter-spacing:.02em;color:var(--baDraft);background:var(--baDraftBg);border-radius:99px;padding:4px 7px;flex:none}
.baDots{width:30px;height:32px;border-radius:8px;border:0;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;
  flex:none;opacity:0;padding:0}
.baModH:hover .baDots,.baL:hover .baDots,.baDots:focus-visible,.baDots[aria-expanded="true"],.baL.baSel .baDots{opacity:1}
.baDots:hover{background:rgba(96,45,54,.08);color:var(--text)}
@media(min-width:900px){ .baL .baDots{position:absolute;right:4px;top:50%;margin-top:-15px;height:30px;background:#fff;border:1px solid var(--border);box-shadow:0 1px 3px rgba(96,45,54,.12)}
  .baL .baDots:hover{background:var(--baCream)} .baL:hover .baLBtn,.baL.baSel .baLBtn{padding-right:36px} }
.baRen{flex:1;min-width:0;height:36px;border:2px solid var(--baPsych);border-radius:9px;padding:0 9px;font:700 13px Poppins,sans-serif;color:var(--text);
  background:#fff;margin:3px 2px}
.baRen:focus{outline:none}
.baLs{list-style:none;margin:0 0 2px 12px;padding-left:9px;border-left:1.5px solid rgba(96,45,54,.13)}
.baLs:empty{border-left-color:transparent;margin-bottom:0}
.baL{position:relative;display:flex;align-items:center;gap:1px;min-height:40px;border-radius:10px;margin:1px 0}
.baL:hover{background:rgba(96,45,54,.05)}
.baL.baSel{background:#fff;box-shadow:0 1px 4px rgba(96,45,54,.16)}
.baL.baSel::before{content:"";position:absolute;left:-11px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--baPsych)}
.baLBtn{flex:1;min-width:0;display:flex;align-items:center;gap:8px;border:0;background:none;padding:8px 4px 8px 2px;text-align:left;cursor:pointer;
  color:var(--text);font:500 12.5px/1.32 Poppins,sans-serif}
.baLBtn .t{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.baLBtn .t.untitled{color:var(--muted);font-style:italic}
.baL.baSel .baLBtn{font-weight:600}
.baMore{list-style:none;font-size:11.5px;color:var(--muted);padding:7px 8px 7px 25px;font-style:italic}
.baAdd{display:flex;align-items:center;gap:7px;width:calc(100% - 21px);min-height:36px;margin:3px 0 10px 21px;padding:0 10px;border:1px dashed rgba(96,45,54,.24);
  border-radius:10px;background:none;font:600 12.5px Poppins,sans-serif;color:var(--baPsych);cursor:pointer}
.baAdd:hover{background:#fff;border-style:solid}
.baAddMod{width:100%;margin:8px 0 4px;min-height:42px;color:var(--text);border-color:rgba(96,45,54,.3)}
.baAddMod svg{color:var(--baPsych)}
.baLegend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11.5px;color:var(--muted);padding:10px 8px 0;border-top:1px solid var(--border);margin-top:10px}
.baLegend span{display:inline-flex;align-items:center;gap:6px}
.baHideOl{margin:6px 0 0;font-weight:500;font-size:12px}
/* dragging */
.baDragGhost{position:fixed;z-index:300;pointer-events:none;background:#fff;box-shadow:0 16px 36px rgba(96,45,54,.3);border-radius:10px;
  transform:rotate(-1.2deg);opacity:.97;list-style:none}
.baDragGhost .baGrip,.baDragGhost .baDots{opacity:1}
.baDragSrc{opacity:.3}
body.baDragging,body.baDragging *{cursor:grabbing!important;user-select:none;-webkit-user-select:none}

/* ---------- the page (white paper on the cream desk) ---------- */
.baPg{min-width:0;background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:0 1px 0 rgba(96,45,54,.03),0 16px 36px rgba(96,45,54,.08)}
.baBar{position:sticky;top:var(--topH);z-index:20;display:flex;align-items:center;gap:8px;min-height:60px;padding:8px 12px 8px 14px;
  background:#fff;border-bottom:1px solid var(--border);border-radius:18px 18px 0 0}
.baState{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.baState.dirty{flex:none;display:inline-flex;align-items:center;gap:6px;color:var(--baDraft);font-weight:600}
.baState.dirty i{width:8px;height:8px;border-radius:50%;background:var(--baDraftDot);flex:none}
.baShort{display:none}
.baSp{flex:1}
.baConfirm{position:absolute;right:10px;top:calc(100% + 8px);z-index:25;width:300px;background:#fff;border:1px solid var(--border);border-radius:16px;
  padding:16px;box-shadow:0 20px 48px rgba(42,20,24,.2)}
.baConfirm b{display:block;font-size:15px;margin-bottom:4px}
.baConfirm p{font-size:13px;color:var(--muted);margin-bottom:12px}

/* lesson body: same order and look as the member page. It turns two-column (Lesson kit on the right) when the page is wide. */
.baLkBody{container-type:inline-size;padding:22px 24px 30px}
.baLk{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "kit" "notes";column-gap:24px;align-items:start}
.baTopA{grid-area:top;min-width:0}
.baNotesA{grid-area:notes;min-width:0}
@container (min-width:800px){
  .baLk{grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"top kit" "notes kit"}
  .baKit{position:sticky;top:calc(var(--topH) + var(--barH) + 14px);margin-top:0!important}
}
.baPlayer{container:baPl / inline-size;position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#2E1519;color:#FAF8EE}
.baPlayer.huOver{box-shadow:0 0 0 3px var(--baLime)}
.baPlDrop,.baPlState{position:absolute;inset:10px;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:14px}
.baPlDrop{border:2px dashed rgba(250,248,238,.32);background:radial-gradient(120% 90% at 30% 20%,#5A2E37 0%,#3A1C22 60%,#2A1418 100%)}
.baPlayer.huOver .baPlDrop{border-color:var(--baLime);background:#4A252C}
.baPlState{background:radial-gradient(120% 90% at 30% 20%,#5A2E37 0%,#3A1C22 60%,#2A1418 100%)}
.baPlDrop b,.baPlState b{font-size:16px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.baPlDrop small,.baPlState small{font-size:12px;color:rgba(250,248,238,.72)}
.baPlIc{width:54px;height:54px;border-radius:50%;background:var(--baLime);color:var(--baRounds);display:grid;place-items:center}
.baPlState .baProg{width:min(420px,90%);height:10px;background:rgba(250,248,238,.16);margin:2px 0}
.baPlState .baProg i{background:var(--baLime)}
.baPlState .baSpin{width:30px;height:30px;border-width:3px;border-color:rgba(250,248,238,.2);border-top-color:var(--baLime)}
@container baPl (max-width:520px){ .baPlState .baPlIc,.baPlDrop .baPlIc,.baKeep{display:none} .baPlDrop,.baPlState{gap:8px;padding:10px} .baPlDrop b,.baPlState b{font-size:14.5px} }
.baDur{position:absolute;right:12px;bottom:12px;background:rgba(20,8,10,.72);color:#FAF8EE;font:600 12px Poppins;padding:4px 8px;border-radius:7px}
.baPlName{position:absolute;left:12px;bottom:12px;font-size:12px;color:rgba(250,248,238,.85);background:rgba(20,8,10,.5);padding:4px 8px;border-radius:7px;max-width:55%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.baPlTools{position:absolute;top:10px;right:10px;display:flex;gap:6px;opacity:0;transition:opacity .15s}
.baPlayer:hover .baPlTools,.baPlayer:focus-within .baPlTools{opacity:1}
.baPlTools .baBtn{background:rgba(20,8,10,.68);backdrop-filter:blur(4px)}
.baKick{font:700 10px/1.45 Poppins,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--baPsych);margin:18px 0 2px}
.baTitle{font:800 38px/1.04 'EC','Poppins',serif;letter-spacing:-.02em;color:var(--text);text-wrap:balance;border-radius:10px;padding:3px 8px;margin:0 -8px;
  outline:none;transition:background .15s,box-shadow .15s;cursor:text;overflow-wrap:anywhere}
.baTitle:hover{box-shadow:inset 0 0 0 1px rgba(96,45,54,.18)}
.baTitle:focus{background:var(--baCream);box-shadow:inset 0 0 0 2px rgba(206,61,28,.45)}
.baTitle:empty::before{content:attr(data-ph);color:#B4A79E}
.baMetaRow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:8px 0 18px}
.baMeta{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center;line-height:1.5;flex:1;min-width:220px}
.baMeta .baNo{font-style:italic}
.baCe{display:inline-block;background:var(--baLime);color:#3A1A20;font:700 9.5px/1 Poppins;letter-spacing:.06em;padding:4px 6px;border-radius:5px}
.baSw{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 12px 0 6px;border-radius:999px;border:1px solid var(--border);background:var(--baCream);
  font:600 12.5px Poppins,sans-serif;color:var(--text);cursor:pointer;flex:none}
.baSwT{width:34px;height:20px;border-radius:10px;background:rgba(96,45,54,.22);position:relative;transition:background .15s;flex:none}
.baSwT::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.baSw[aria-checked="true"] .baSwT{background:var(--baLive)}
.baSw[aria-checked="true"] .baSwT::after{transform:translateX(14px)}

/* the Lesson kit: maroon in both themes, the one object that stands out (same as the member page) */
.baKit{grid-area:kit;background:var(--baRounds);color:#FAF8EE;border-radius:16px;padding:18px 18px 20px;box-shadow:0 18px 40px rgba(96,45,54,.22);
  margin:2px 0 22px;transition:box-shadow .15s}
.baKit.huOver{box-shadow:0 0 0 3px var(--baLime),0 18px 40px rgba(96,45,54,.22)}
.baKitH{font:800 23px/1.1 'EC','Poppins',serif;letter-spacing:-.01em;margin-bottom:4px}
.baKitSub{font-size:11px;color:rgba(250,248,238,.66);margin-bottom:14px}
.baKitStep{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px;margin-bottom:10px}
.baKitStep>div{flex:1;min-width:0}
.baKitStep b{display:block;font-size:13px;line-height:1.3}
.baKitStep small{display:block;font-size:11px;color:rgba(250,248,238,.72);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.baKitPlay{width:26px;height:26px;border-radius:50%;background:var(--baLime);color:#2A1418;display:grid;place-items:center;flex:none}
.baKitTrack{height:6px;border-radius:99px;background:rgba(255,255,255,.14);margin-top:9px}
.baKitLbl{font:700 9.5px/1.3 Poppins;letter-spacing:.16em;text-transform:uppercase;color:var(--baLime);margin:16px 0 4px}
.baKitFile{display:flex;align-items:center;gap:11px;padding:10px 2px;border-top:1px solid rgba(255,255,255,.12)}
.baFi{width:32px;height:32px;border-radius:8px;background:rgba(232,69,31,.24);color:#FFB39F;display:grid;place-items:center;flex:none}
.baFi.au{background:rgba(205,204,255,.2);color:#CDCCFF}
.baFm{flex:1;min-width:0}
.baFm b{display:block;font-size:12.5px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.baFm small{display:block;font-size:10.5px;color:rgba(250,248,238,.6)}
.baFm .baProg{height:5px;background:rgba(255,255,255,.14);margin:5px 0 3px}
.baFm .baProg i{background:var(--baLime)}
.baDl{color:rgba(250,248,238,.75);flex:none}
.baX{width:32px;height:32px;border-radius:8px;border:0;background:rgba(255,255,255,.08);color:#FAF8EE;display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.baX:hover{background:rgba(255,255,255,.18)}
.baAudio{display:flex;align-items:center;gap:8px;margin-top:8px}
.baAudio .baKitTrack{flex:1;margin:0}
.baKitDrop{border:1.5px dashed rgba(250,248,238,.34);border-radius:12px;padding:14px 12px;margin-top:8px;display:flex;flex-direction:column;align-items:center;
  gap:8px;text-align:center}
.baKit.huOver .baKitDrop{border-color:var(--baLime);background:rgba(225,231,130,.08)}
.baKitDrop b{font-size:13px;display:flex;align-items:center;gap:7px}
.baKitAdds{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.baKitAdds .baBtn{flex:1 1 auto}
.baKitForm{margin-top:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px}
.baKitForm .baFld>span{color:#FAF8EE}
.baKitForm .baFld input{background:#FAF8EE;border-color:transparent}
.baNext{display:flex;align-items:center;gap:11px;width:100%;margin-top:16px;padding:11px 12px;border-radius:12px;background:#FAF8EE;color:var(--baRounds);
  border:0;cursor:pointer;text-align:left;font:inherit}
.baNext:hover{background:#fff}
.baNext small{display:block;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--baPsych)}
.baNext b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;line-height:1.3}
.baNext span{flex:1;min-width:0}

/* lesson notes + the formatting toolbar that stays at the top while you scroll */
.baTabs{display:flex;gap:22px;border-bottom:1px solid var(--border);margin:0 0 12px}
.baTabOn{padding:10px 0;border-bottom:2px solid var(--baPsych);margin-bottom:-1px;font:600 13px Poppins;color:var(--text)}
.baTbWrap{position:sticky;top:calc(var(--topH) + var(--barH) - 1px);z-index:15;padding:6px 0 8px;background:#fff}
.baTb{display:flex;align-items:center;gap:2px;padding:5px;background:var(--baCream);border:1px solid var(--border);border-radius:13px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.baTb::-webkit-scrollbar{display:none}
.baTbB{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:36px;height:38px;padding:0 7px;border:0;border-radius:9px;background:none;
  color:var(--text);font:600 13px Poppins,sans-serif;cursor:pointer;flex:none}
.baTbB:hover{background:rgba(96,45,54,.08)}
.baTbB[aria-pressed="true"]{background:var(--baRounds);color:#FAF8EE}
.baTbB .gl{font:700 16px/1 Georgia,'Times New Roman',serif}
.baTbB .gl.i{font-style:italic;font-weight:600}
.baTbB .gl.h{font:700 15px/1 Poppins,sans-serif}
.baTbSep{width:1px;height:22px;background:rgba(96,45,54,.16);margin:0 3px;flex:none}
.baTbSp{flex:1;min-width:4px}
.baTbWrap .baPop{top:calc(100% - 2px);left:0}
.baNoteUp{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);margin:0 0 8px}
.baNoteUp .baProg{flex:1;max-width:240px;margin:0}
.baArticle{background:#fff;border:1px solid var(--border);border-radius:12px;padding:20px 26px 24px;transition:border-color .15s,box-shadow .15s}
.baArticle:focus-within{border-color:rgba(206,61,28,.45);box-shadow:0 0 0 3px rgba(206,61,28,.08)}
.baArticle.huOver{border-color:var(--baPsych);box-shadow:0 0 0 3px rgba(206,61,28,.15)}
.baArticle .hfNotes{min-height:180px}
.baArticle .hfNotes figcaption{outline:none}

/* preview: exactly what members see, no editing tools */
.isPreview .baEdit{display:none!important}
.isPreview .baTitle{cursor:default}
.isPreview .baTitle:hover{box-shadow:none}
.isPreview .baArticle:focus-within{border-color:var(--border);box-shadow:none}

/* ---------- the course page (name + picture) ---------- */
.baCov{padding:26px 28px 34px}
.baCovTop{display:flex;gap:22px;align-items:center}
.baCovArt{position:relative;width:168px;height:168px;flex:none;border-radius:20px;overflow:hidden;border:1px solid var(--border);background:#F3F1E6;padding:0;cursor:pointer}
.baCovArt img{width:100%;height:100%;object-fit:cover;display:block}
.baCovPh{position:absolute;inset:8px;border:2px dashed rgba(96,45,54,.28);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--muted);font:600 13px Poppins}
.baCovEdit{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.94);border-radius:999px;padding:5px 10px;
  font:600 12px Poppins;color:var(--text);box-shadow:0 2px 8px rgba(96,45,54,.16)}
.baCovTx{flex:1;min-width:0}
.baCovTx .baKick{margin-top:0}
.baCovTx .baTitle{font-size:40px}
.baCovMeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-top:10px}
.baArtPick{margin-top:20px;background:var(--baCream);border:1px solid var(--border);border-radius:18px;padding:14px 16px 16px}
.baArtPickH{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.baArtPickH b{flex:1;font-size:14px}
.baArts{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px}
.baArtB{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;border:2px solid transparent;background:#F3F1E6;padding:0;cursor:pointer;transition:transform .12s}
.baArtB:hover{transform:translateY(-2px);border-color:rgba(96,45,54,.25)}
.baArtB img{width:100%;height:100%;object-fit:cover;display:block}
.baArtB[aria-pressed="true"]{border-color:var(--baPsych);box-shadow:0 0 0 3px rgba(206,61,28,.22)}
.baArtB[aria-pressed="true"]::after{content:"";position:absolute;right:5px;top:5px;width:22px;height:22px;border-radius:50%;
  background:var(--baPsych) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.baCovAdd{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.baBig{display:flex;align-items:center;gap:14px;min-height:76px;padding:12px 16px;border-radius:16px;border:1.5px dashed rgba(96,45,54,.28);background:var(--baCream);
  cursor:pointer;text-align:left;font:inherit;color:var(--text)}
.baBig:hover{border-style:solid;border-color:var(--baPsych);background:#fff}
.baBigIc{width:42px;height:42px;border-radius:12px;background:var(--baPsych);color:#fff;display:grid;place-items:center;flex:none}
.baBig b{display:block;font-size:15px}
.baBig small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.baHint{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-top:18px}

/* ---------- phones ---------- */
@media(max-width:899px){
  .baHead{gap:8px;margin:-8px 0 14px}
  .baHead>.baSoft{flex:1 1 calc(50% - 4px);order:3;padding:0 10px}
  .baLiveBtn{order:1;flex:1 1 100%;margin:0;justify-content:flex-start;font-size:14.5px;min-height:58px}
  .baLiveBtn{white-space:normal;text-align:left;line-height:1.25;padding-right:12px}
  .baLiveBtn .baLiveTx{flex:1;min-width:0}
  .baLiveBtn .baCar{display:none}
  .baLivePanel{order:2;margin:2px 0 4px;padding:16px 14px}
  .baLpH{font-size:21px}
  .baLpGrid{grid-template-columns:minmax(0,1fr)}
  .baDrop{padding:20px 14px}
  .baPop{width:auto;left:16px!important;right:16px}

  .baWs{display:block;background:none;border:0;padding:0;border-radius:0}
  .baPg{border:0;box-shadow:none;border-radius:0;background:none}
  .baBar{margin:0 -16px;padding:8px 12px 8px 16px;border-radius:0;min-height:60px}
  .baBar .baHideP{display:none}
  .baLong{display:none}
  .baShort{display:inline}
  .baState{font-size:12px}
  .baLkBody{padding:14px 0 10px}
  .baTitle{font-size:31px}
  .baKit{margin:0 0 20px}
  .baArticle{padding:8px 16px 20px}
  .baTbWrap{margin:0 -16px;padding:6px 16px 8px}
  .baTbB{height:44px;min-width:44px}
  .baBtn{min-height:44px}
  .baSm{min-height:44px}
  .baIconBtn{width:44px;height:44px}
  .baDots,.baGrip{opacity:1}
  .baL,.baModH{min-height:46px}
  .baDots{width:40px;height:44px}
  .baGrip{width:28px;height:44px}
  .baAdd{min-height:44px}
  .baCov{padding:18px 0 20px}
  .baCovTop{flex-direction:column;align-items:flex-start;gap:16px}
  .baCovArt{width:132px;height:132px}
  .baCovTx .baTitle{font-size:32px}
  .baCovAdd{grid-template-columns:minmax(0,1fr)}
  .baArts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .baConfirm{right:8px;left:8px;width:auto}

  /* the outline: shown in place on the first screen, then as a sheet from the bottom once a page is open */
  .baPBar{display:block;margin:0 0 4px}
  .baPBarBtn{display:flex;align-items:center;gap:10px;width:100%;min-height:58px;padding:7px 8px 7px 7px;border-radius:14px;border:1px solid var(--border);
    background:var(--baCream);cursor:pointer;text-align:left;font:inherit;color:var(--text)}
  .baPBarBtn .baThumb{width:42px;height:42px}
  .baPBarTx{flex:1;min-width:0}
  .baPBarTx small{display:block;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .baPBarTx b{display:block;font-size:13.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .baPBarGo{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:10px;background:var(--baRounds);color:#FAF8EE;font:600 13px Poppins;flex:none}
  .baWs.listMode .baPBar,.baWs.listMode .baPg{display:none}
  .baWs.listMode .baOl{position:static;max-height:none;overflow:visible;padding:0;background:var(--baCream);border:1px solid var(--border);border-radius:20px;padding:10px 10px 12px}
  .baWs:not(.listMode) .baOl{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:61;max-height:86vh;overflow:auto;background:var(--baCream);border-radius:22px 22px 0 0;
    padding:0 14px calc(18px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .25s ease;box-shadow:0 -18px 40px rgba(42,20,24,.2);visibility:hidden}
  .baWs.sheetOpen .baOl{transform:none;visibility:visible}
  .baWs:not(.listMode) .baSheetHead{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:2;background:var(--baCream);padding:10px 0 8px;margin-bottom:4px}
  .baSheetHead b{flex:1;font:800 22px/1 'EC','Poppins',serif}
  .baScrim{position:fixed;inset:0;z-index:60;background:rgba(30,12,15,.42)}
  .baWs.sheetOpen .baScrim{display:block}
}
@media(prefers-reduced-motion:reduce){ .baWs .baOl,.baArtB,.baCar{transition:none} }

/* ===================== added for the live page (not in the mockup) ===================== */
.baRoot h1,.baRoot h2,.baRoot h3,.baRoot h4{margin:0}
.baRoot button{font-family:inherit}
.baLpH{margin:0}
.baTbWrap .baPop,.baKit .baPop{position:absolute}
/* the placeholder where a video frame shows (or while its thumbnail loads) */
.baArt{position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 20%,#7A4550 0%,#4A252C 55%,#2E1519 100%) center/cover no-repeat}
.baArt::after{content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  background:rgba(20,8,10,.38) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FAF8EE' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/30px no-repeat}
/* lesson notes: what members see (desktop-source .notes), so typing here looks like the lesson page */
.bcNotes{font-size:15px;line-height:1.72;color:var(--text)}
.bcNotes h2{font:700 20px/1.3 Poppins,sans-serif;margin:24px 0 8px}
.bcNotes h3{font:700 16.5px/1.35 Poppins,sans-serif;margin:18px 0 6px}
.bcNotes h4{font:700 15px/1.35 Poppins,sans-serif;margin:14px 0 4px}
.bcNotes>:first-child{margin-top:0}
.bcNotes p{margin:0 0 10px}
.bcNotes ul,.bcNotes ol{margin:0 0 12px 22px}
.bcNotes ul{list-style:disc}
.bcNotes ol{list-style:decimal}
.bcNotes li{margin-bottom:4px}
.bcNotes li p{margin:0}
.bcNotes strong,.bcNotes b{font-weight:700}
.bcNotes em,.bcNotes i{font-style:italic}
.bcNotes a{color:#CE3D1C;text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.bcNotes blockquote{border-left:3px solid #E8451F;padding:2px 0 2px 14px;margin:12px 0}
.bcNotes hr{border:0;border-top:1px solid var(--border);margin:16px 0}
.bcNotes a.ts{display:inline-block;text-decoration:none;font:600 12px/1.5 Poppins,sans-serif;padding:0 6px;border-radius:5px;background:#FBE3DA;color:#CE3D1C;font-variant-numeric:tabular-nums}
.bcNotes a.ts::before{content:'\25B6\FE0E  ';font-size:8px;vertical-align:1px}
.bcNotes .noteBox{border:1px solid var(--border);border-left:4px solid #602D36;border-radius:10px;background:#FBF8F1;padding:10px 14px 4px;margin:10px 0 14px;font-size:14px;line-height:1.6}
.bcNotes .noteOp{border-left-color:#C98A1B;background:#FDF6E8}
.bcNotes .noteBoxHead{font:700 11px/1.4 Poppins,sans-serif;letter-spacing:.06em;text-transform:uppercase;margin:0 0 4px;color:#A86F0C}
.bcNotes .noteBox p{margin-bottom:6px}
.bcNotes[contenteditable]{outline:none;position:relative;min-height:28px}
.bcNotes[contenteditable].hrEmpty::before{content:attr(data-ph);color:#8E8478;pointer-events:none;position:absolute}
/* the notes are made of the lesson's blocks, in order: text, images and the odd video part */
.baBlocks{display:flex;flex-direction:column;gap:6px}
.baTxtB{border-radius:8px}
.baFig{position:relative;margin:8px 0 14px}
.baFig img{width:100%;height:auto;min-height:80px;border-radius:10px;border:1px solid var(--border);display:block;background:#F3F1E6}
.baFig figcaption{font-size:12px;color:var(--muted);margin-top:6px;outline:none;border-radius:6px;padding:2px 4px;margin-left:-4px}
.baFig figcaption:focus{background:var(--baCream);box-shadow:inset 0 0 0 1px rgba(206,61,28,.4)}
.baFig figcaption:empty::before{content:attr(data-ph);color:#B4A79E}
.baBlkTools{position:absolute;top:8px;right:8px;display:flex;gap:6px;opacity:0;transition:opacity .15s}
.baFig:hover .baBlkTools,.baFig:focus-within .baBlkTools,.baCard:hover .baBlkTools,.baCard:focus-within .baBlkTools{opacity:1}
.baBlkTools .baBtn{background:rgba(255,255,255,.95);border-color:var(--border)}
.baCard{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--baCream);margin:6px 0 12px}
.baCard .baBlkTools{position:static;opacity:1;margin-left:auto}
.baCardIc{width:36px;height:36px;border-radius:10px;background:#fff;display:grid;place-items:center;color:var(--baPsych);flex:none}
.baCard b{display:block;font-size:13.5px;line-height:1.3}
.baCard small{display:block;font-size:12px;color:var(--muted)}
.baUpLine{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);margin:6px 0}
.baErr{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:10px 12px;border-radius:10px;background:#FFF4EF;border:1px solid #F4C9B8;color:#9A2A0C;font-size:13px}
.baState.err{color:#9A2A0C;font-weight:600}
.baLoading{display:flex;align-items:center;justify-content:center;gap:10px;padding:60px 20px;color:var(--muted);font-size:14px}
.baThumbImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the toast and the confirm dialog */
.baToast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);z-index:400;display:flex;align-items:center;gap:14px;
  background:#2A1418;color:#FAF8EE;border-radius:14px;padding:12px 16px;font:500 14px Poppins,sans-serif;box-shadow:0 12px 32px rgba(0,0,0,.28);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100vw - 32px)}
.baToast.on{opacity:1;transform:translateX(-50%);pointer-events:auto}
.baToast button{background:none;border:0;color:#E1E782;font:700 14px Poppins,sans-serif;cursor:pointer;min-height:36px;padding:0 4px}
.baScrimAsk{position:fixed;inset:0;z-index:390;background:rgba(30,12,15,.42);display:flex;align-items:center;justify-content:center;padding:16px}
.baAsk{width:min(460px,100%);background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(30,12,15,.3);padding:20px 22px 18px;color:var(--text)}
.baAsk h2{font:700 19px/1.3 Poppins,sans-serif;margin:0 0 8px}
.baAsk p{font-size:14px;line-height:1.55;color:#3A2A2C;margin:0 0 8px}
.baAskBtns{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:14px}
.baAskBtns .baBtn{min-width:110px}
.baDanger.baBtn{background:#B3261E;color:#fff}
@media(max-width:899px){ .baToast{bottom:calc(88px + env(safe-area-inset-bottom))} .baAsk{border-radius:18px 18px 0 0;align-self:flex-end} .baScrimAsk{padding:0} }
.baSavedNote{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:#3E7A4E;opacity:0;transition:opacity .2s}
.baSavedNote.on{opacity:1}

/* ---------- "Add a Live Coaching Recording": design A "Step track" (Ryan, 2026-10-20) ----------
   One card per recording: Uploading > Getting ready > Building your lesson > Ready to review > Live, with one button
   for the step it is on. The Mac job live-recordings/live_pipeline.py does "Building your lesson". */
.baDropRow{flex-direction:row;flex-wrap:wrap;text-align:left;align-items:center;gap:14px;padding:16px 18px}
.baDropRow .baDropIc{width:46px;height:46px;flex:none}
.baDropTx{flex:1;min-width:220px;display:flex;flex-direction:column;gap:3px}
.baDropTx small{max-width:62ch}
.baRecs{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.baRecs:empty{display:none}
.baRec{background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px 16px;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;gap:6px 14px;align-items:center}
.baRec>*{min-width:0}
.baRec.hot{border-color:var(--baPsych);box-shadow:0 0 0 3px rgba(206,61,28,.12)}
.baRec.bad{border-color:rgba(138,90,8,.45)}
.baRecTx b{display:block;font-size:15px;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.baRecTx small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.baRecAct{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.baRecBody{grid-column:2/-1}
.baTrack{display:flex;align-items:center;overflow-x:auto;padding:4px 0 2px;scrollbar-width:thin}
.baTrSt{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap;flex:none}
.baTrD{width:20px;height:20px;border-radius:50%;border:2px solid var(--baRaised);background:#fff;display:grid;place-items:center;
  font-size:10.5px;font-weight:700;flex:none}
.baTrSt.done{color:var(--baLive)}
.baTrSt.done .baTrD{background:var(--baLive);border-color:var(--baLive);color:#fff}
.baTrSt.now{color:var(--text)}
.baTrSt.now .baTrD{border-color:var(--baPsych);color:var(--baPsych)}
.baTrSt.bad{color:var(--baDraft)}
.baTrSt.bad .baTrD{border-color:var(--baDraftDot);background:var(--baDraftBg);color:var(--baDraft)}
.baTrLn{width:24px;height:2px;background:var(--baRaised);margin:0 6px;flex:none}
.baTrLn.done{background:var(--baLive)}
.baRec .baProg{margin:8px 0 2px}
.baRecNote{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.5}
.baRecNote.bad{color:var(--baDraft)}
.baDm{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap}
.baChip.prep{background:#ECEBFF;color:#3F3D8F}
.baRecs .baEmpty,.baRoot p.baEmpty{font-size:13px;color:var(--muted);padding:6px 2px}
@media (max-width:720px){
  .baRec{grid-template-columns:auto minmax(0,1fr)}
  .baRecAct{grid-column:1/-1;justify-content:flex-start}
  .baRecBody{grid-column:1/-1}
}