/* Portal v2: "The Shelf, on white" (design approved by Ryan 2026-09-24; mockups in the
   "Portal Home Mockups" canvas, Round 2). Everything here is scoped to html.u2, which the
   switch at the top of portal.html sets, so the current portal is untouched until it's on.
   Every class starts with u2 so nothing collides with the v1 classes. */

/* ---------- colors: white by default, dark when chosen in Settings ---------- */
html.u2{
  --bg:#FFFFFF; --surface:#FFFFFF; --elev:#F6F3E9; --thumb:#EFE9D8;
  --text:#602D36; --muted:#7A5A5F; --border:rgba(96,45,54,.14); --figure:#CE3D1C;
  --psych:#CE3D1C; --ink:#1A1A1A;
  --u2-side:#FAF8EE; --u2-surf:#F6F3E9; --u2-raised:#EFE9D8; --u2-active:rgba(96,45,54,.08);
  --u2-track:rgba(96,45,54,.12); --u2-link:#CE3D1C; --u2-ring:rgba(96,45,54,.35); --u2-rec:#F1ECDD;
  --u2-chipOn:#602D36; --u2-chipOnText:#FAF8EE; --u2-btn:#CE3D1C; --u2-btnHover:#B33518;
  --u2-hero:#602D36; --u2-heroText:#FAF8EE; --u2-heroSoft:#EADDDF; --u2-lime:#E1E782;
  --u2-mark:#E1E782; --u2-markText:#602D36; --u2-shadow:0 10px 30px rgba(96,45,54,.10);
  color-scheme:light;
}
html.u2[data-theme="dark"]{
  --bg:#231215; --surface:#2B161A; --elev:#33191E; --thumb:#42232A;
  --text:#FAF8EE; --muted:#D9CCCE; --border:rgba(250,248,238,.12); --figure:#E1E782;
  --psych:#E8451F;
  --u2-side:#1B0D10; --u2-surf:#33191E; --u2-raised:#42232A; --u2-active:#42232A;
  --u2-track:rgba(250,248,238,.18); --u2-link:#E1E782; --u2-ring:rgba(250,248,238,.45); --u2-rec:#42232A;
  --u2-chipOn:#FAF8EE; --u2-chipOnText:#231215;
  --u2-mark:#E1E782; --u2-markText:#231215; --u2-shadow:0 10px 30px rgba(0,0,0,.35);
  color-scheme:dark;
}
html.u2 body{background:var(--bg);color:var(--text)}

/* ---------- shell: left menu on desktop, bottom tabs on phones ---------- */
#u2Side,#u2Top,#u2Tabs{display:none}
html.u2 #hdr,html.u2 .themeToggle,html.u2 #rail{display:none!important}
html.u2 #app{grid-template-columns:248px minmax(0,1fr);grid-template-rows:auto 1fr;min-height:100vh}
#u2SubBar:empty{display:none}
html.u2 .page{grid-column:2;display:block;max-width:1240px;width:100%;margin:0 auto;padding:6px 40px 64px}
html.u2{--hdrH:0px}

html.u2 #u2Side{display:flex;flex-direction:column;gap:26px;grid-column:1;grid-row:1/span 2;position:sticky;top:0;
  height:100vh;overflow-y:auto;background:var(--u2-side);border-right:1px solid var(--border);padding:26px 16px}
.u2Brand{display:flex;align-items:center;gap:12px;padding:0 8px;color:var(--text);background:none;border:0;cursor:pointer;text-align:left}
.u2Mark{width:36px;height:36px;border-radius:50%;display:block;flex:none}   /* the Fellowship icon (favicon.svg), 2026-09-30 */
/* Community badge: Slack-style count on the menu item */
.u2Badge{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:#E8451F;color:#fff;
  font:700 12px/22px Poppins,sans-serif;text-align:center;flex:none}
.u2Sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.u2BrandName{font:700 15px/1.2 Poppins,sans-serif}
.u2NavList{display:flex;flex-direction:column;gap:4px}
.u2NavBtn{display:flex;align-items:center;gap:14px;height:48px;padding:0 14px;border-radius:12px;border:0;background:none;
  color:var(--text);font:500 15px Poppins,sans-serif;cursor:pointer;text-align:left;width:100%}
.u2NavBtn svg{color:var(--muted);flex:none}
.u2NavBtn:hover{background:var(--u2-active)}
.u2NavBtn.on{background:var(--u2-active);font-weight:600}
.u2NavBtn.on svg{color:var(--u2-link)}
.u2NavBtn:focus-visible,.u2Btn:focus-visible,.u2Ghost:focus-visible,.u2Chk:focus-visible,.u2Chip:focus-visible,
.u2Tab:focus-visible,.u2Poster:focus-visible,.u2Tile:focus-visible,.u2VCard:focus-visible,.u2Row:focus-visible,
.u2Link:focus-visible,.u2Opt:focus-visible,.u2Av:focus-visible,.u2IconBtn:focus-visible{outline:2px solid var(--u2-link);outline-offset:2px}
.u2Rule{height:1px;background:var(--border);margin:0 8px}
/* One menu list (Ryan, 2026-11-12). The portal's bare nav{overflow-x:auto} rule made each list scroll on its own when
   the window was short, and that hid items. The list never scrolls now; a short window tightens the menu instead
   (navFit in portal-v2.js): u2Fit1 pulls the items closer, u2Fit2 also drops the small description lines. */
html.u2 #u2Side .u2NavList{overflow:visible;flex:none;max-width:none;margin:0}
html.u2 #u2Side.u2Fit1{gap:14px;padding-top:16px;padding-bottom:14px}
html.u2 #u2Side.u2Fit1 .u2NavList{gap:1px}
html.u2:not(.u2Rail) #u2Side.u2Fit1 .u2NavBtn:has(.u3NavTx){min-height:42px;padding:4px 14px}
html.u2:not(.u2Rail) #u2Side.u2Fit2 .u3NavTx small{display:none}
html.u2:not(.u2Rail) #u2Side.u2Fit2 .u2NavBtn,html.u2:not(.u2Rail) #u2Side.u2Fit2 .u2NavBtn:has(.u3NavTx){height:36px;min-height:36px;padding:0 14px}
html.u2.u2Rail #u2Side.u2Fit1 .u2NavBtn,html.u2.u2Rail #u2Side.u2Fit1 .u2NavBtn:has(.u3NavTx){height:42px;min-height:42px}
html.u2.u2Rail #u2Side.u2Fit2 .u2NavBtn,html.u2.u2Rail #u2Side.u2Fit2 .u2NavBtn:has(.u3NavTx){height:36px;min-height:36px}

html.u2 #u2Top{display:flex;align-items:center;gap:16px;grid-column:2;width:100%;padding:16px max(40px, calc((100% - 1160px) / 2));
  position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid transparent;transition:border-color .15s}
html.u2 #u2Top.scrolled{border-bottom-color:var(--border)}
.u2TopTitle{display:none}
.u2Search{position:relative;display:block;width:min(560px,100%);margin-right:auto}
.u2Search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.u2Search input{width:100%;height:48px;border-radius:14px;border:1px solid rgba(96,45,54,.24);background:var(--bg);
  color:var(--text);font:400 15px Poppins,sans-serif;padding:0 44px 0 44px;margin:0}
html.u2[data-theme="dark"] .u2Search input{border-color:rgba(250,248,238,.18);background:var(--u2-surf)}
.u2Search input:focus{outline:none;border:2px solid var(--u2-link);padding-left:43px}
.u2Search input::-webkit-search-cancel-button{display:none}
.u2Clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:0;
  background:var(--u2-surf);color:var(--text);display:grid;place-items:center;cursor:pointer}
.u2Cancel{display:none}
.u2Av{width:42px;height:42px;border-radius:50%;border:0;background:#FFCEEC;color:#602D36;font:700 15px Poppins,sans-serif;
  display:grid;place-items:center;flex:none;cursor:pointer;overflow:hidden;padding:0}
.u2Av img{width:100%;height:100%;object-fit:cover}
.u2IconBtn{display:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--u2-surf);color:var(--text);
  place-items:center;cursor:pointer;flex:none}

/* ---------- shared pieces ---------- */
.u2Kick{font:700 12px Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--u2-link)}
.u2H1{font:800 44px/1.02 'EC',serif;letter-spacing:-.01em;margin:0}
.u2Btn{height:52px;padding:0 24px;border-radius:14px;border:0;background:var(--u2-btn);color:#fff;
  font:600 16px Poppins,sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;text-decoration:none}
.u2Btn:hover{background:var(--u2-btnHover);color:#fff}
.u2Btn.sm{height:42px;padding:0 16px;font-size:14px;border-radius:12px}
.u2Ghost{height:52px;padding:0 20px;border-radius:14px;border:1.5px solid rgba(96,45,54,.3);background:transparent;color:var(--text);
  font:600 16px Poppins,sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none}
html.u2[data-theme="dark"] .u2Ghost{border-color:rgba(250,248,238,.35)}
.u2Ghost.sm{height:42px;padding:0 16px;font-size:14px;border-radius:12px}
.u2Ghost.onHero{border-color:rgba(250,248,238,.5);color:var(--u2-heroText)}
.u2Link{background:none;border:0;padding:0;color:var(--u2-link);font:600 14px Poppins,sans-serif;cursor:pointer;
  display:inline-flex;align-items:center;gap:4px;text-decoration:none}
.u2Bar{height:6px;border-radius:6px;background:var(--u2-track);overflow:hidden}
.u2Bar>i{display:block;height:100%;border-radius:6px;background:var(--figure)}
.u2Section{margin-top:48px}
.u2SecHead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.u2SecHead h2{margin:0;font:700 21px Poppins,sans-serif;color:var(--text)}
.u2SecHead h2 small{font-weight:500;color:var(--muted);font-size:inherit}
.u2Note{margin:-6px 0 16px;font-size:14px;line-height:1.55;color:var(--muted)}
.u2Empty{color:var(--muted);font-size:14px;line-height:1.6;padding:12px 0}
.u2Scroll{display:flex;gap:20px}

/* ---------- Home: hero + checklist ---------- */
.u2Hi{display:flex;flex-direction:column;gap:6px;margin:0 0 22px}
.u2Hi h1{font:800 34px/1.05 'EC',serif;margin:0}
.u2Grid{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:24px;align-items:stretch}
.u2Hero{border-radius:28px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 300px;background:var(--u2-hero);
  color:var(--u2-heroText);min-height:420px}
.u2HeroBody{padding:44px 40px;display:flex;flex-direction:column;gap:16px;justify-content:center;min-width:0}
.u2Hero .u2Kick{color:var(--u2-lime)}
.u2Hero h2{font:800 42px/1.03 'EC',serif;margin:0;color:var(--u2-heroText);overflow-wrap:anywhere}
.u2HeroMeta{font-size:15px;color:var(--u2-heroSoft)}
.u2Hero .u2Bar{background:rgba(250,248,238,.2);max-width:280px}
.u2Hero .u2Bar>i{background:var(--u2-lime)}
.u2HeroBtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.u2HeroArt{position:relative;background:#3A1D22;min-height:180px}
.u2HeroArt img,.u2HeroArt svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Home hero: pin the video frame to the top, so a short band crops the bottom, not the top (Ryan, 2026-09-30) */
.hcHero .u2HeroArt img{object-position:center top}

.u2Plan{background:var(--u2-surf);border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:12px}
.u2PlanHead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.u2PlanHead h2{margin:0;font:700 18px Poppins,sans-serif}
.u2PlanHead span{font-size:13px;font-weight:600;color:var(--muted)}
.u2Segs{display:flex;gap:6px}
.u2Segs i{flex:1;height:8px;border-radius:4px;background:var(--u2-track)}
.u2Segs i.on{background:var(--u2-lime)}
.u2Items{display:flex;flex-direction:column;margin-top:2px}
.u2Item{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--border)}
.u2Item:first-child{border-top:0}
.u2Chk{width:30px;height:30px;border-radius:50%;border:2px solid var(--u2-ring);background:transparent;color:#602D36;
  display:grid;place-items:center;flex:none;cursor:pointer;padding:0;margin-top:1px;transition:background .15s,border-color .15s}
.u2Chk:hover{border-color:var(--u2-link)}
.u2Chk.on{background:var(--u2-lime);border-color:var(--u2-lime)}
.u2Chk svg{display:none}
.u2Chk.on svg{display:block}
.u2ItemBody{flex-grow:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.u2ItemT{font-size:14.5px;font-weight:600;line-height:1.35;color:var(--text)}
.u2Item.done .u2ItemT{color:var(--muted);text-decoration:line-through}
.u2ItemM{font-size:12.5px;color:var(--muted);line-height:1.45}
.u2ItemA{align-self:flex-start;margin-top:5px}
.u2PlanErr{font-size:12.5px;color:var(--u2-link)}
.u2PlanFoot{font-size:12px;color:var(--muted);line-height:1.5;margin-top:2px}

/* ---------- Home rows ---------- */
.u2VCard{display:flex;flex-direction:column;gap:10px;width:263px;flex:none;color:var(--text);background:none;border:0;
  padding:0;text-align:left;cursor:pointer;font-family:Poppins,sans-serif}
.u2Thumb{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--thumb)}
.u2Thumb img,.u2Thumb svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.u2Left{position:absolute;right:10px;bottom:14px;font-size:12px;font-weight:600;background:rgba(27,13,16,.82);color:#FAF8EE;
  border-radius:8px;padding:3px 8px}
.u2ThumbBar{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(250,248,238,.35)}
.u2ThumbBar i{display:block;height:100%;background:#CE3D1C}
.u2VCard b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u2VCard small{font-size:13px;color:var(--muted);margin-top:-8px}

.u2Posters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.u2Poster{position:relative;height:190px;border-radius:16px;overflow:hidden;padding:16px 16px 18px;display:flex;flex-direction:column;
  justify-content:space-between;border:1px solid var(--border);cursor:pointer;text-align:left;font-family:Poppins,sans-serif}
.u2PosterTop{display:flex;justify-content:space-between;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.u2PosterName{font:800 30px/.98 'EC',serif;letter-spacing:-.01em;hyphens:auto;overflow-wrap:anywhere}
.u2PosterBar{position:absolute;left:0;right:0;bottom:0;height:6px;background:rgba(0,0,0,.12)}
.u2PosterBar i{display:block;height:100%}

.u2Recs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.u2Rec{display:flex;flex-direction:column;gap:10px;color:var(--text);background:none;border:0;padding:0;text-align:left;cursor:pointer;
  font-family:Poppins,sans-serif;min-width:0}
.u2RecArt{position:relative;aspect-ratio:16/9;border-radius:14px;background:var(--u2-rec);border:1px solid var(--border);padding:14px;
  display:flex;flex-direction:column;justify-content:space-between}
.u2RecArt span{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.u2RecArt b{font:800 30px/1 'EC',serif;color:var(--u2-link)}
.u2RecArt em{position:absolute;right:10px;bottom:10px;font-style:normal;font-size:12px;font-weight:600;background:rgba(27,13,16,.82);
  color:#FAF8EE;border-radius:8px;padding:3px 8px}
.u2Rec strong{font-size:15px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.u2Tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.u2Tile{display:flex;align-items:center;gap:14px;min-height:104px;padding:14px 18px;border-radius:18px;background:var(--u2-surf);
  color:var(--text);border:0;text-align:left;cursor:pointer;font-family:Poppins,sans-serif;min-width:0}
.u2TileIc{width:64px;height:64px;border-radius:14px;color:#602D36;border:1px solid rgba(96,45,54,.1);display:grid;place-items:center;flex:none}
.u2TileBody{display:flex;flex-direction:column;gap:3px;min-width:0;flex-grow:1}
.u2TileBody b{font-size:15px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.u2TileBody small{font-size:13px;color:var(--muted)}
.u2Pill{font-size:12px;font-weight:700;color:#602D36;background:#E1E782;border-radius:999px;padding:4px 10px;flex:none}

/* ---------- sub tabs (Community, Toolkit) ---------- */
.u2Sub{display:flex;gap:8px;margin:0 0 20px}
.u2Tab{height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--border);background:var(--bg);color:var(--text);
  font:600 14px Poppins,sans-serif;cursor:pointer}
.u2Tab.on{background:var(--u2-chipOn);border-color:var(--u2-chipOn);color:var(--u2-chipOnText)}

/* ---------- Toolkit header: tile board on the Toolkit home, icon row everywhere else ----------
   Design C "Tile Board" (Ryan, 2026-09-28). Every class starts with u2Tk. */
/* these are <nav> elements, and the portal has a bare nav{display:flex;padding:0 24px;...} rule */
.u2TkBoard{display:block;max-width:none;margin:2px 0 26px;padding:0;gap:0;overflow:visible}
.u2TkBoardL{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px;
  font:700 11.5px Poppins,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--u2-link)}
.u2TkBoardL span{font-size:12.5px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--muted)}
.u2TkTiles{display:grid;gap:12px;margin:0 0 18px}
.u2TkTiles:last-child{margin-bottom:0}
.u2TkTiles.ref{grid-template-columns:repeat(6,minmax(0,1fr))}
.u2TkTiles.tools{grid-template-columns:repeat(4,minmax(0,1fr))}
.u2TkTile{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;padding:16px;border:1px solid var(--border);
  border-radius:16px;background:var(--surface);color:var(--text);font:inherit;text-align:left;cursor:pointer;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.u2TkTile:hover{border-color:var(--text);box-shadow:var(--u2-shadow);transform:translateY(-2px)}
.u2TkIc{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--u2-side);
  color:var(--psych);border:1px solid var(--border)}
.u2TkTxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.u2TkT{font:700 15.5px/1.25 Poppins,sans-serif;color:var(--text)}
.u2TkS{font-size:12.5px;line-height:1.4;color:var(--muted)}
.u2TkS b{color:var(--text);font-weight:600}
.u2TkTile.tool{flex-direction:row;align-items:center;gap:14px;background:var(--u2-side)}
.u2TkTile.tool .u2TkIc{background:#602D36;border-color:#602D36;color:#E1E782}
html.u2[data-theme="dark"] .u2TkTile.tool .u2TkIc{background:var(--u2-raised);border-color:var(--u2-raised)}
.u2TkDock{margin:0 0 18px;padding:6px 0 8px;border-bottom:1px solid var(--border);background:var(--bg)}
.u2TkDockIn{display:flex;gap:4px;max-width:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.u2TkDockIn::-webkit-scrollbar{display:none}
.u2TkChip{flex:1 0 84px;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:62px;padding:8px 4px 6px;
  border-radius:12px;border:1px solid transparent;background:none;color:var(--text);font:600 12px/1.2 Poppins,sans-serif;
  text-align:center;cursor:pointer}
.u2TkChip svg{color:var(--psych)}
.u2TkChip:hover{background:var(--u2-side);border-color:var(--border)}
.u2TkChip.on{background:var(--u2-chipOn);color:var(--u2-chipOnText)}
.u2TkChip.on svg{color:#E1E782}
html.u2[data-theme="dark"] .u2TkChip.on svg{color:#CE3D1C}
.u2TkChip.first-tool{position:relative;margin-left:6px}
.u2TkChip.first-tool::before{content:"";position:absolute;left:-6px;top:10px;bottom:10px;width:1px;background:var(--border)}
.u2TkSibs{display:flex;flex-wrap:wrap;gap:6px;width:max-content;max-width:100%;margin:0 0 16px;padding:5px;overflow:visible;border-radius:14px;
  background:var(--u2-side);border:1px solid var(--border)}
.u2TkSib{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:10px;border:0;background:none;
  color:var(--text);font:600 14px Poppins,sans-serif;white-space:nowrap;cursor:pointer}
.u2TkSib:hover{background:var(--surface)}
.u2TkSib.on{background:var(--surface);box-shadow:0 2px 8px -3px rgba(96,45,54,.35)}
.u2TkTile:focus-visible,.u2TkChip:focus-visible,.u2TkSib:focus-visible{outline:2px solid var(--u2-link);outline-offset:2px}
/* on a computer the icon row stays under the top bar; --hdrH then counts it (tkSyncHeights) */
@media(min-width:900px){ html.u2 .u2TkDock{position:sticky;top:var(--u2TopH,78px);z-index:25} }
/* A sticky element only sticks inside its parent, and #u2SubBar is exactly as tall as the row.
   With the row showing, the wrapper steps out of the layout so the row sticks against the page. */
html.u2 #u2SubBar.u2TkHasDock{display:contents}
@media(max-width:1229px){
  .u2TkTiles.ref{grid-template-columns:repeat(3,minmax(0,1fr))}
  .u2TkTiles.tools{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:899px){
  .u2TkDock{margin:0 -16px 14px;padding:6px 12px 8px}
  .u2TkChip{flex:1 0 78px;min-height:60px}
  .u2TkTiles.ref,.u2TkTiles.tools{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .u2TkTile{padding:13px;gap:8px}
  .u2TkIc{width:38px;height:38px}
  .u2TkT{font-size:14.5px}
  .u2TkTile.tool{flex-direction:column;align-items:flex-start;gap:8px}
  .u2TkSibs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:auto}
  .u2TkSib{justify-content:center;padding:0 10px;white-space:normal;text-align:center;line-height:1.25;font-size:13.5px}
}

/* ---------- Live calls page ---------- */

/* ---------- search ---------- */
.u2SHead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.u2SHead h1{font:800 40px/1 'EC',serif;margin:0}
.u2SHead span{font-size:15px;color:var(--muted)}
.u2Chips{display:flex;gap:8px;flex-wrap:wrap}
.u2Chip{height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--border);background:var(--bg);color:var(--text);
  font:600 14px Poppins,sans-serif;display:inline-flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap}
.u2Chip span{opacity:.7;font-weight:500}
.u2Chip.on{background:var(--u2-chipOn);border-color:var(--u2-chipOn);color:var(--u2-chipOnText)}
.u2SGrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start}
.u2Group{margin-top:34px}
.u2Group h2{margin:0 0 6px;font:700 19px Poppins,sans-serif;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.u2Group h2 small{font-weight:500;color:var(--muted);font-size:inherit;margin-left:6px}
.u2Group h2 .u2Link{flex:none;white-space:nowrap}
.u2SubHead{margin:18px 0 2px;font:700 12px Poppins,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.u2Row{display:flex;align-items:center;gap:14px;min-height:72px;padding:10px 0;border-top:1px solid var(--border);width:100%;
  background:none;border-left:0;border-right:0;border-bottom:0;color:var(--text);text-align:left;cursor:pointer;font-family:Poppins,sans-serif}
.u2Row:first-of-type{border-top:0}
.u2RowIc{width:48px;height:48px;border-radius:12px;background:var(--u2-surf);color:var(--text);display:grid;place-items:center;flex:none}
.u2RowIc.rec{background:var(--u2-rec);color:var(--u2-link)}
.u2RowBody{flex-grow:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.u2RowBody b{font-size:15px;font-weight:600;line-height:1.35}
.u2RowBody small{font-size:13px;color:var(--muted)}
.u2RowBody .u2Bar{width:140px;height:5px;margin-top:4px}
.u2Chev{color:var(--muted);flex:none;display:flex}
.u2Moment{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--border)}
.u2Moment:first-of-type{border-top:0}
.u2Ts{height:34px;padding:0 12px;border-radius:999px;background:#CE3D1C;color:#fff;border:0;font:700 13px Poppins,sans-serif;
  display:inline-flex;align-items:center;gap:6px;flex:none;cursor:pointer}
.u2MomentBody{min-width:0;display:flex;flex-direction:column;gap:4px}
.u2MomentBody button{background:none;border:0;padding:0;text-align:left;font:600 14px/1.35 Poppins,sans-serif;color:var(--text);cursor:pointer}
.u2MomentBody p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
html.u2 mark{background:var(--u2-mark);color:var(--u2-markText);border-radius:4px;padding:0 3px;font-weight:600}
.u2ToolGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:10px}
.u2Tool{display:flex;align-items:center;gap:12px;min-height:84px;padding:14px 16px;border-radius:16px;background:var(--u2-surf);border:0;
  color:var(--text);text-align:left;cursor:pointer;font-family:Poppins,sans-serif}
.u2Tool .u2RowIc{width:40px;height:40px;border-radius:10px;background:var(--bg);color:var(--u2-link)}
.u2Tool em{display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--u2-link)}
.u2Tool b{display:block;font-size:14.5px;font-weight:600;line-height:1.3}
.u2Tool small{display:block;font-size:12.5px;color:var(--muted)}
.u2Top1{margin-top:26px}
.u2TopCard{margin-top:12px;display:flex;gap:22px;align-items:center;background:var(--u2-surf);border-radius:22px;padding:18px}
.u2TopCard .u2Poster{width:132px;height:172px;flex:none}
.u2TopCard .u2PosterName{font-size:28px}
.u2TopCard .u2PosterTop span:last-child{display:none}
.u2TopBody{display:flex;flex-direction:column;gap:8px;min-width:0}
.u2TopBody h3{margin:0;font:800 32px/1.05 'EC',serif}
.u2TopBody p{margin:0;font-size:15px;line-height:1.5;color:var(--muted);max-width:560px}
.u2Ref{background:var(--u2-surf);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:12px;margin-top:26px}
.u2Ref h3{margin:0;font:800 25px/1.08 'EC',serif}
.u2RefChips{display:flex;flex-wrap:wrap;gap:8px}
.u2RefChips button{height:36px;padding:0 12px;border-radius:999px;background:var(--bg);border:1px solid var(--border);color:var(--text);
  font:600 13px Poppins,sans-serif;cursor:pointer}
.u2SEmpty h2{margin:24px 0 10px;font:700 13px Poppins,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.u2SEmpty .u2Chips button{background:var(--u2-surf);border-color:transparent}
.u2Recent{display:flex;align-items:center;gap:12px;min-height:48px;border-top:1px solid var(--border)}
.u2Recent:first-of-type{border-top:0}
.u2Recent button:first-of-type{flex-grow:1;background:none;border:0;text-align:left;font:400 15px Poppins,sans-serif;color:var(--text);
  cursor:pointer;min-height:44px}
.u2Recent .u2IconBtn{display:grid;background:none}

/* ---------- settings ---------- */
.u2Set{max-width:820px}
.u2SetSec{margin-top:32px;padding-top:28px;border-top:1px solid var(--border)}
.u2SetSec h2{margin:0 0 4px;font:700 19px Poppins,sans-serif}
.u2SetSec>p{margin:0 0 16px;font-size:14px;color:var(--muted)}
.u2Me{display:flex;align-items:center;gap:16px;margin-top:28px}
.u2Me .u2Av{width:64px;height:64px;font-size:22px;cursor:default}
.u2Opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.u2Opt{text-align:left;border-radius:18px;border:1px solid var(--border);background:var(--u2-surf);color:var(--text);padding:16px;
  display:flex;flex-direction:column;gap:10px;cursor:pointer;font-family:Poppins,sans-serif}
.u2Opt[aria-checked="true"]{border:2px solid var(--u2-link);padding:15px}
.u2OptHead{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px;font-weight:700}
.u2Radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--u2-ring);display:grid;place-items:center;flex:none}
.u2Opt[aria-checked="true"] .u2Radio{border-color:var(--u2-link)}
.u2Opt[aria-checked="true"] .u2Radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--u2-link)}
.u2Opt small{font-size:13px;color:var(--muted)}
.u2Switch{display:flex;align-items:center;gap:16px}
.u2SwitchText{flex-grow:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.u2SwitchText b{font-size:15px;font-weight:600}
.u2SwitchText small{font-size:13px;color:var(--muted);line-height:1.5}
.u2Toggle{position:relative;width:52px;height:32px;border-radius:999px;border:0;background:var(--u2-track);cursor:pointer;flex:none;padding:0;
  transition:background .15s}
.u2Toggle span{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);
  transition:left .15s}
.u2Toggle[aria-checked="true"]{background:#CE3D1C}
.u2Toggle[aria-checked="true"] span{left:23px}
.u2Toggle:disabled{opacity:.45;cursor:not-allowed}
.u2Toggle:focus-visible{outline:2px solid var(--u2-link);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.u2Toggle,.u2Toggle span{transition:none}}
.u2SetLinks{display:flex;flex-direction:column}
.u2SetLinks button{min-height:52px;display:flex;align-items:center;justify-content:space-between;background:none;border:0;
  border-top:1px solid var(--border);color:var(--text);font:500 15px Poppins,sans-serif;cursor:pointer;text-align:left;padding:0}
.u2SetLinks button:first-child{border-top:0}
.u2SetLinks button.out{color:var(--u2-link);font-weight:600}

/* ---------- phones and small tablets ---------- */
@media(max-width:1180px){
  .u2Grid{grid-template-columns:1fr}
  .u2Posters{grid-template-columns:repeat(4,minmax(0,1fr))}
  .u2Tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .u2SGrid{grid-template-columns:1fr;gap:0}
}
@media(max-width:899px){
  html.u2 #app{grid-template-columns:minmax(0,1fr)}
  html.u2 #u2Side{display:none}
  html.u2 #u2Top{grid-column:1;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;gap:8px}
  html.u2 .page{grid-column:1;padding:4px 16px calc(104px + env(safe-area-inset-bottom))}
  .u2TopTitle{display:block;flex-grow:1;min-width:0;font:800 28px/1.05 'EC',serif;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .u2Search{display:none}
  .u2IconBtn{display:grid}
  .u2Av{width:40px;height:40px}
  html.u2 #u2Top.searching .u2TopTitle,html.u2 #u2Top.searching #u2SearchBtn,html.u2 #u2Top.searching .u2Av{display:none}
  html.u2 #u2Top.searching .u2Search{display:block;flex-grow:1;width:auto}
  html.u2 #u2Top.searching .u2Cancel{display:flex;align-items:center;height:44px;background:none;border:0;color:var(--u2-link);
    font:600 15px Poppins,sans-serif;cursor:pointer;padding:0 4px}
  .u2Search input{height:46px;border-radius:12px;font-size:16px}
  html.u2 #u2Tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--bg);border-top:1px solid var(--border);
    padding:0 6px env(safe-area-inset-bottom)}
  /* Six tabs since Ask Carlat AI (2026-11-10): the page-wide nav{gap:26px} left no room, so the labels wrapped
     or Toolkit ran off the screen. The tabs already share the width evenly (flex:1); keep each label on one line. */
  html.u2 #u2Tabs{gap:0}
  html.u2 .u2Tab2{min-width:0;white-space:nowrap}
  .u2Tab2{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:56px;border:0;background:none;
    color:var(--muted);font:500 10.5px Poppins,sans-serif;cursor:pointer;padding:0}
  .u2Tab2.on{color:var(--u2-link);font-weight:600}
  .u2Tab2{position:relative}
  .u2Tab2 .u2Badge{position:absolute;top:5px;left:calc(50% + 5px);margin:0;min-width:18px;height:18px;padding:0 5px;
    font-size:10.5px;line-height:18px;border-radius:9px;box-shadow:0 0 0 2px var(--bg)}
  .u2Hi{display:none}
  .u2Hero{grid-template-columns:1fr;min-height:0;border-radius:24px}
  .u2HeroArt{order:-1;height:196px}
  .u2HeroBody{padding:20px;gap:12px}
  .u2Hero h2{font-size:30px}
  .u2HeroBtns{flex-direction:column}
  .u2HeroBtns .u2Btn,.u2HeroBtns .u2Ghost{width:100%;height:50px;font-size:15px;padding:0 12px}
  .u2Plan{padding:18px;border-radius:22px}
  .u2ItemA.u2Btn,.u2ItemA.u2Ghost{height:38px;font-size:13px;padding:0 14px;border-radius:999px}
  .u2Section{margin-top:32px}
  .u2SecHead h2{font-size:18px}
  .u2Scroll,.u2Posters.u2Scroll,.u2Recs.u2Scroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
    margin:0 -16px;padding:0 16px 4px;scroll-padding:0 16px;scrollbar-width:none}
  .u2Scroll::-webkit-scrollbar{display:none}
  .u2Scroll>*{scroll-snap-align:start;flex:none}
  .u2VCard{width:240px}
  .u2Posters.u2Scroll .u2Poster{width:160px;height:200px}
  .u2PosterName{font-size:21px}
  .u2Posters.u2Scroll .u2PosterTop span:first-child{display:none}
  .u2Recs.u2Scroll .u2Rec{width:220px}
  .u2Tiles{grid-template-columns:1fr;gap:0}
  .u2Tile{background:none;border-radius:0;min-height:76px;padding:10px 0;border-bottom:1px solid var(--border)}
  .u2TileIc{width:52px;height:52px}
  .u2SHead h1{font-size:28px}
  .u2Chips.u2Scroll{flex-wrap:nowrap}
  .u2ToolGrid{grid-template-columns:1fr;gap:0}
  .u2Tool{background:none;border-radius:0;border-top:1px solid var(--border);padding:10px 0;min-height:68px}
  .u2TopCard{align-items:flex-start;padding:14px;gap:14px}
  .u2TopCard .u2Poster{width:96px;height:128px}
  .u2TopCard .u2PosterName{font-size:21px}
  .u2TopBody h3{font-size:24px}
  .u2TopBody p{font-size:13.5px}
  .u2Opts{grid-template-columns:1fr}
  .u2Set .u2H1{display:none}                /* the top bar already says Settings */
  .u2Me{flex-wrap:wrap;margin-top:8px}
  .u2Me .u2Ghost{white-space:nowrap}
  .u2H1{font-size:34px}
}
@media(prefers-reduced-motion:reduce){.u2Chk{transition:none}}

/* ---------- Home: "What's new for you" Community card + the slim week strip (design B+C, Ryan 2026-09-30) ----------
   Mockups: ~/.gstack/projects/PsychNPFellowship/designs/home-community-20260930/variant-BC.html */
/* ---------- top row: half-height hero + Community card ---------- */
.hcTop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:24px;align-items:stretch}

/* Hero: same maroon card, lime kicker, EC title and orange Resume; the video sits as a band on top
   and soaks up whatever height the Community card sets, so the text block stays compact. */
.u2Hero.hcHero{display:flex;flex-direction:column;min-height:0;border-radius:26px}
.hcHero .u2HeroArt{order:-1;flex:1 1 auto;min-height:130px;background:#3A1D22}
.hcHero .u2HeroBody{flex:none;padding:18px 26px 24px;gap:10px;justify-content:flex-start}
.hcHero h2{font-size:27px;line-height:1.07;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hcHero .u2HeroMeta{font-size:14px;line-height:1.35}
.hcHero .u2Bar{max-width:none;height:5px;margin-top:-2px}
.hcHero .u2HeroBtns{margin-top:6px;gap:10px;flex-wrap:nowrap}
.hcHero .u2Btn{height:50px;padding:0 28px}
.hcHero .u2Ghost{height:50px;padding:0 18px}

/* ---------- the Community card ---------- */
.hcCard{background:var(--u2-surf);border-radius:24px;padding:16px 20px 16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.hcHead{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:start}
.hcHeadL{display:contents}
.hcHead .hcOpen{grid-column:2;grid-row:1;margin:-4px 0 -6px}
.hcHead.pre h2,.hcHead .hcCount{grid-column:1/-1}
.hcHead h2{margin:0;font:700 18px/1.25 Poppins,sans-serif;color:var(--text)}
.hcCount{margin:2px 0 0;font-size:13px;color:var(--muted)}
.hcCount b{color:var(--u2-link);font-weight:600}
.hcOpen{flex:none;white-space:nowrap;margin-top:1px;min-height:28px}
.hcCaught{grid-column:1;display:flex;align-items:center;gap:7px;margin:0 0 6px;align-self:center;font-size:12.5px;font-weight:600;color:var(--muted)}
.hcCaught i{width:18px;height:18px;border-radius:50%;background:var(--u2-lime);color:#602D36;display:grid;place-items:center}

/* the mini thread: a thin spine joins the post, the reply bubble and your reply box */
.hcThread{position:relative;display:flex;flex-direction:column;gap:7px}
.hcThread::before{content:"";position:absolute;left:15px;top:16px;bottom:22px;width:2px;border-radius:2px;background:rgba(96,45,54,.14)}
.hcPost{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;text-align:left;cursor:pointer;color:var(--text);font-family:inherit;min-width:0;width:100%}
.hcPostIc{width:32px;height:32px;border-radius:10px;background:var(--bg);border:1px solid var(--border);display:grid;place-items:center;color:var(--u2-link);flex:none;position:relative;z-index:1}
.hcPostTx{display:flex;flex-direction:column;min-width:0}
.hcPostTx small{font-size:11.5px;font-weight:600;color:var(--muted);line-height:1.3}
.hcPostTx b{font-size:13.5px;font-weight:600;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcPostTx.one{flex-direction:row;align-items:baseline;gap:5px}
.hcPostTx.one small{font-size:12.5px;font-weight:500}
.hcPost:hover b{text-decoration:underline;text-underline-offset:2px}
.hcMsg{display:flex;gap:10px;align-items:flex-start}
.hcAvWrap{position:relative;z-index:1;display:grid;flex:none;width:32px;justify-items:center}
.hcBubble{flex:1;min-width:0;background:var(--bg);border-radius:4px 18px 18px 18px;padding:9px 14px 11px;
  box-shadow:0 1px 2px rgba(96,45,54,.07),0 0 0 1px rgba(96,45,54,.07)}
.hcBubble.pop{animation:hcPop .35s ease-out}
@keyframes hcPop{from{transform:translateY(6px);opacity:.3}to{transform:none;opacity:1}}
.hcWho{display:flex;align-items:center;flex-wrap:wrap;column-gap:6px;row-gap:0;font-size:12.5px;color:var(--muted);line-height:1.45}
.hcWho b{font-size:13.5px;color:var(--text);font-weight:700}
.hcWho .hcTag{color:var(--u2-link);font-weight:600}
.hcDot{width:8px;height:8px;border-radius:50%;background:#E8451F;display:inline-block;flex:none}
.hcWho .hcDot{margin-left:auto}
.hcBubble p{margin:3px 0 0;font-size:13.5px;line-height:1.5;color:var(--text)}
.hcBubble p.hcAsk{font-size:15px;font-weight:600;line-height:1.4;margin-top:4px}

/* your reply box, right in the card */
.hcReply{display:flex;gap:10px;align-items:flex-end;margin:0}
.hcMe{width:32px;height:32px;border-radius:50%;background:#FFCEEC;color:#602D36;font:700 13px Poppins,sans-serif;display:grid;place-items:center;
  flex:none;position:relative;z-index:1;box-shadow:0 0 0 3px var(--u2-surf)}
.hcReply .hcMe{margin-bottom:6px}
.hcField{flex:1;min-width:0;display:flex;align-items:flex-end;gap:6px;background:var(--bg);border:1.5px solid rgba(96,45,54,.22);
  border-radius:22px;padding:4px 4px 4px 15px;transition:border-color .15s,box-shadow .15s}
.hcField:focus-within{border-color:var(--u2-link);box-shadow:0 0 0 3px rgba(206,61,28,.12)}
.hcField textarea{flex:1;min-width:0;border:0;outline:0;resize:none;background:transparent;font:400 14px/20px Poppins,sans-serif;color:var(--text);
  padding:8px 0;height:36px;max-height:112px;overflow-y:auto}
.hcField textarea::placeholder{color:var(--muted);opacity:.9}
.hcSend{height:36px;padding:0 15px 0 12px;border-radius:18px;border:0;background:var(--u2-btn);color:#fff;font:600 14px Poppins,sans-serif;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;flex:none}
.hcSend:hover{background:var(--u2-btnHover)}
.hcReply.nudge .hcField{animation:hcNudge .35s}
@keyframes hcNudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* after Send: the box folds into one line */
.hcSent{display:flex;align-items:center;gap:10px}
.hcSentTx{flex:1;min-width:0;display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px 6px 8px;border-radius:22px;
  background:rgba(225,231,130,.5);font-size:13px;color:var(--text)}
.hcSentTx i{width:24px;height:24px;border-radius:50%;background:var(--u2-lime);color:#602D36;display:grid;place-items:center;flex:none}
.hcSentTx span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcSentTx b{font-weight:600}
.hcSentTx em{font-style:normal;color:var(--muted)}

/* "Also for you" (one line each) and the "Can you help?" rows */
.hcAlso h3{margin:0 0 2px;font:700 11.5px Poppins,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hcList{list-style:none;margin:0;padding:0}
.hcList li{display:flex;align-items:center;gap:8px;border-top:1px solid var(--border)}
.hcList li:first-child{border-top:0}
.hcRow{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:36px;padding:5px 0;background:none;border:0;
  text-align:left;cursor:pointer;color:var(--text);font:400 13px/1.35 Poppins,sans-serif}
.hcRowAv{position:relative;flex:none;display:grid}
.hcRowTx{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcRowTx b{font-weight:600}
.hcRowTx q{color:var(--muted)}
.hcRowTx.two{display:flex;flex-direction:column;white-space:normal}
.hcRowTx.two b,.hcRowTx.two small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcRowTx.two small{font-size:11.5px;color:var(--muted)}
.hcRow.q{padding:3px 0}
.hcRow:hover .hcRowTx b{text-decoration:underline;text-underline-offset:2px}
.hcWhen{flex:none;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.hcQReply{flex:none;min-height:36px;padding:0 4px 0 6px;font-size:13.5px;gap:5px}

/* one line for everything new in your channels */
.hcChan{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:8px 12px 8px 10px;border-radius:16px;background:var(--bg);
  border:1px solid var(--border);cursor:pointer;text-align:left;color:var(--text);font:400 13px/1.35 Poppins,sans-serif;margin-top:auto}
.hcChan:hover{border-color:rgba(96,45,54,.35)}
.hcStack{display:flex;flex:none}
.hcStack .hcAv{box-shadow:0 0 0 2px var(--bg)}
.hcStack .hcAv+.hfAv{margin-left:-3px}
.hcChanTx{flex:1;min-width:0}
.hcChanTx b{font-weight:600}
.hcChev{color:var(--muted);flex:none}
.hcPost:focus-visible,.hcRow:focus-visible,.hcChan:focus-visible,.hcSend:focus-visible,.hcQReply:focus-visible,.hcOpen:focus-visible{
  outline:2px solid var(--u2-link);outline-offset:2px;border-radius:10px}
/* ---------- small laptops and tablets: stack the top row ---------- */
@media(min-width:900px) and (max-width:1180px){
  .hcTop{grid-template-columns:minmax(0,1fr)}
  .u2Hero.hcHero{flex-direction:row}
  .hcHero .u2HeroArt{order:0;flex:0 0 36%;min-height:0}
  .hcHero .u2HeroBody{flex:1 1 auto;padding:26px 28px}
}
/* ---------- phones (same switch point as the live portal) ---------- */
@media(max-width:899px){
  .hcTop{grid-template-columns:minmax(0,1fr);gap:16px}
  /* hero: small video thumb on the left with the kicker, time and bar beside it; title and buttons below */
  .u2Hero.hcHero{display:grid;grid-template-columns:116px minmax(0,1fr);grid-template-rows:auto 1fr auto auto auto;
    grid-template-areas:"art kick" "art meta" "art bar" "title title" "btns btns";column-gap:14px;padding:16px;border-radius:22px}
  .hcHero .u2HeroBody{display:contents}
  .hcHero .u2HeroArt{grid-area:art;order:0;height:auto;min-height:0;aspect-ratio:16/10;border-radius:12px;overflow:hidden;align-self:start}
    .hcHero .u2Kick{grid-area:kick;font-size:11px;letter-spacing:.12em}
  .hcHero .u2HeroMeta{grid-area:meta;font-size:13px;margin-top:3px;text-wrap:balance}
  .hcHero .u2Bar{grid-area:bar;align-self:end;margin:6px 0 2px}
  .hcHero h2{grid-area:title;font-size:23px;line-height:1.08;margin-top:14px}
  .hcHero .u2HeroBtns{grid-area:btns;flex-direction:row;margin-top:14px;gap:10px}
  .hcHero .u2HeroBtns .u2Btn{flex:1.25 1 0;width:auto;height:48px;padding:0 12px}
  .hcHero .u2HeroBtns .u2Ghost{flex:1 1 0;width:auto;height:48px;padding:0 12px}

  .hcCard{padding:16px;border-radius:22px;gap:14px}
  .hcHead h2{font-size:17px}
  .hcHead .hcOpen{min-height:44px;margin:-12px 0 -14px}
  .hcPost{min-height:44px}
  .hcField{padding:4px 4px 4px 14px;border-radius:24px}
  .hcField textarea{font-size:16px;line-height:22px;height:44px;padding:11px 0;max-height:120px}
  .hcSend{height:44px;border-radius:22px;padding:0 16px 0 13px}
  .hcReply .hcMe{margin-bottom:8px}
  .hcThread::before{bottom:24px}
  .hcRow{min-height:48px}
  .hcRow.q{padding:6px 0}
  .hcPostTx b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .hcRow.also{display:grid;grid-template-columns:26px minmax(0,1fr) auto;grid-template-areas:"av l1 l1" "av q when";column-gap:10px;row-gap:1px;padding:7px 0}
  .hcRow.also .hcRowAv{grid-area:av}
  .hcRowTx.also{display:contents}
  .hcRowTx.also .hcL1{grid-area:l1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hcRowTx.also q{grid-area:q;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hcRow.also .hcWhen{grid-area:when}
  .hcCh{display:none}
  .hcRowTx.two b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
  .hcChanTx{line-height:1.3}
  .hcQReply{min-height:44px;padding:0 2px 0 8px}
  .hcChan{min-height:56px}
}
/* ---------- this week: a slim lime-accented strip ---------- */
.hcWeek{margin-top:16px;display:flex;gap:8px;padding:8px;border-radius:20px;background:var(--u2-surf)}
.hcWeekHead{flex:none;width:124px;border-radius:14px;background:#E1E782;color:#602D36;padding:10px 14px;
  display:flex;flex-direction:column;justify-content:center;gap:1px}
.hcWeekHead b{font:700 15px/1.2 Poppins,sans-serif}
.hcWeekHead span{font-size:12px;font-weight:600}
.hcSegs{display:flex;gap:4px;margin-top:7px}
.hcSegs i{flex:1;height:5px;border-radius:3px;background:rgba(96,45,54,.18);transition:background .15s}
.hcSegs i.on{background:#602D36}
.hcTiles{flex:1;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hcTile{display:flex;align-items:center;gap:10px;min-width:0;padding:9px 12px 9px 10px;border-radius:14px;background:var(--surface);
  border:1px solid var(--border);cursor:pointer;transition:border-color .15s}
.hcTile:hover{border-color:rgba(96,45,54,.35)}
.hcTile .u2Chk{position:relative;width:28px;height:28px;margin:0}
.hcTile .u2Chk::before{content:"";position:absolute;inset:-8px;border-radius:50%}
.hcTileB{min-width:0;display:flex;flex-direction:column;gap:1px}
.hcTileB b{font-size:13px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hcTileB small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcTile.done{background:transparent;border-color:transparent}
.hcTile.done b{color:var(--muted);text-decoration:line-through}

@media(max-width:1180px){
  .hcTiles{display:flex;overflow-x:auto;scrollbar-width:none}
  .hcTiles::-webkit-scrollbar{display:none}
  .hcTile{flex:none;width:210px}
}
@media(max-width:899px){
  .hcWeek{margin-top:16px;overflow-x:auto;scrollbar-width:none;padding:8px;gap:8px;border-radius:20px}
  .hcWeek::-webkit-scrollbar{display:none}
  .hcWeekHead{width:112px;padding:10px 12px}
  .hcTiles{display:flex;overflow:visible;flex:none}
  .hcTile{width:200px;min-height:60px}
  .hcWeek::after{content:"";flex:none;width:1px}
}
.hcTile:focus-visible{outline:2px solid var(--u2-link);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.hcSegs i{transition:none}}

/* avatars in the Home card: a photo when the member has one, else initials */
.hcAv{display:inline-grid;place-items:center;border-radius:50%;color:#FAF8EE;font-family:Poppins,sans-serif;font-weight:700;flex:none;
  letter-spacing:.02em;overflow:hidden}
.hcAv img{width:100%;height:100%;object-fit:cover;display:block}
.hcAv.fac{box-shadow:0 0 0 2px var(--u2-surf),0 0 0 4px #E1E782}
.hcTileB{background:none;border:0;padding:0;text-align:left;cursor:pointer;color:var(--text);font-family:inherit;flex:1}
.hcErr{margin:2px 0 0 42px;font-size:12.5px;color:var(--u2-link)}
.hcLoading{color:var(--muted);font-size:14px;padding:6px 0}
.hcEmptyBtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.hcSentLine{display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px 6px 8px;border-radius:22px;background:rgba(225,231,130,.5);
  font-size:13px;color:var(--text);border:0;cursor:pointer;text-align:left;font-family:inherit;width:100%}
.hcSentLine i{width:24px;height:24px;border-radius:50%;background:var(--u2-lime);color:#602D36;display:grid;place-items:center;flex:none}
.hcSentLine span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcWeekFoot{font-size:12px;color:var(--muted);line-height:1.5;margin:8px 4px 0}
/* a small toast ("Reply posted"); sits above the phone tabs */
.u2Toast{position:fixed;left:50%;bottom:28px;z-index:80;display:flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;border-radius:999px;
  background:#602D36;color:#FAF8EE;font:600 14px Poppins,sans-serif;box-shadow:0 12px 30px rgba(35,18,21,.28);max-width:calc(100vw - 32px);
  opacity:0;transform:translate(-50%,14px);pointer-events:none;transition:opacity .18s,transform .18s}
.u2Toast.on{opacity:1;transform:translate(-50%,0)}
.u2Toast i{width:24px;height:24px;border-radius:50%;background:#E1E782;color:#602D36;display:grid;place-items:center;flex:none}
@media(min-width:900px){ .u2Toast{left:calc(50% + 124px)} }
@media(max-width:899px){ .u2Toast{bottom:calc(76px + env(safe-area-inset-bottom))} }
@media(prefers-reduced-motion:reduce){ .u2Toast,.hcField{transition:none} .hcBubble.pop,.hcReply.nudge .hcField{animation:none} }

/* ---------- Courses page: design C "Up next + shelves" (Ryan 2026-09-30) ----------
   Mockups: ~/.gstack/projects/PsychNPFellowship/designs/courses-20260930/variant-C.html */
html.u2{--vc-cream:#F7F4E6;--vc-lift:0 14px 30px rgba(96,45,54,.14)}

/* ---------- page header (desktop only; phones show "Courses" in the top bar) ---------- */
.vcHead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 16px}
.vcHead .u2Hi{margin:0}
.vcTotals{flex:none;font-size:13px;font-weight:600;color:var(--muted);background:var(--u2-surf);border-radius:999px;padding:7px 14px}

/* ---------- top area: featured banner + Up next panel, side by side ---------- */
.vcTop{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:20px;align-items:stretch}

/* featured banner: the maroon Home card, with the illustration "bitten" into the top-right corner */
.vcFeat{display:grid;grid-template-columns:minmax(0,1fr) 216px;grid-template-rows:auto 1fr auto;
  grid-template-areas:"head art" "next next" "foot foot";background:var(--u2-hero);color:var(--u2-heroText);
  border-radius:28px;overflow:hidden;min-width:0}
.vcFeatArt{grid-area:art;position:relative;aspect-ratio:1;background:var(--vc-cream);border-bottom-left-radius:28px;overflow:hidden}
.vcFeatArt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vcFeatL{grid-area:head;padding:26px 18px 6px 30px;display:flex;flex-direction:column;justify-content:center;gap:16px;min-width:0}
.vcFeatHead{display:flex;flex-direction:column;gap:9px;min-width:0}
.vcFeat .u2Kick{color:var(--u2-lime);display:flex;align-items:center;gap:8px}
.vcLive{width:8px;height:8px;border-radius:50%;background:var(--u2-lime);box-shadow:0 0 0 4px rgba(225,231,130,.18)}
.vcFeat h2{font:800 40px/1.02 'EC',serif;margin:0;color:var(--u2-heroText);overflow-wrap:break-word}
.vcFeatSub{font-size:14px;color:var(--u2-heroSoft)}
.vcNext{grid-area:next;align-self:center;margin:18px 30px 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;
  background:rgba(250,248,238,.08);border:1px solid rgba(250,248,238,.14);border-radius:18px;padding:14px 16px;
  color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .15s}
.vcNext:hover{background:rgba(250,248,238,.13)}
.vcNextPlay{width:44px;height:44px;border-radius:50%;background:var(--u2-lime);color:#602D36;display:grid;place-items:center}
.vcNextPlay svg{margin-left:2px}
.vcNextTx{display:flex;flex-direction:column;gap:3px;min-width:0}
.vcNextLab{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--u2-heroSoft)}
.vcNextTx b{font-size:15px;font-weight:600;line-height:1.35}
.vcNextMeta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--u2-heroSoft);margin-top:2px}
.vcMini{flex:none;width:72px;height:4px;border-radius:4px;background:rgba(250,248,238,.22);overflow:hidden}
.vcMini i{display:block;height:100%;border-radius:4px;background:var(--u2-lime)}
.vcFeatFoot{grid-area:foot;padding:18px 30px 28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.vcProg{display:flex;flex-direction:column;gap:8px;min-width:0}
.vcProgTop{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--u2-heroSoft)}
.vcProgTop b{color:var(--u2-heroText);font-weight:600}
.vcFeat .u2Bar{background:rgba(250,248,238,.2)}
.vcFeat .u2Bar>i{background:var(--u2-lime)}
.vcFeatBtns{display:flex;gap:10px;flex:none}
.vcFeatBtns .u2Btn,.vcFeatBtns .u2Ghost{height:50px;font-size:15px}
.vcFeatBtns .u2Btn{padding:0 22px}
.vcFeatBtns .u2Ghost{padding:0 18px}

/* Up next panel: rich rows on cream */
.vcUp{background:var(--u2-surf);border-radius:28px;padding:18px 16px 8px;display:flex;flex-direction:column;min-width:0}
.vcUpHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 4px 4px}
.vcUpHead h2{margin:0;font:700 17px/1.25 Poppins,sans-serif;color:var(--text);white-space:nowrap}
.vcSeg{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(96,45,54,.07);flex:none}
.vcSeg button{height:32px;padding:0 10px;border-radius:999px;border:0;background:none;color:var(--muted);
  font:600 12.5px Poppins,sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.vcSeg button[aria-pressed="true"]{background:var(--bg);color:var(--text);box-shadow:0 1px 3px rgba(96,45,54,.14)}
.vcSeg button span{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--u2-lime);color:#602D36;font-size:11px;line-height:18px;text-align:center}
.vcUpList{display:flex;flex-direction:column}
.vcUpItem{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 8px;margin:0 -4px;
  border-top:1px solid var(--border);border-radius:14px;transition:background .15s}
.vcUpItem:first-child{border-top-color:transparent}
.vcUpItem:hover{background:rgba(255,255,255,.7)}
.vcUpItem:hover+.vcUpItem{border-top-color:transparent}
.vcUpMain{display:flex;align-items:center;gap:12px;min-width:0;background:none;border:0;padding:0;text-align:left;color:var(--text);
  font-family:inherit;cursor:pointer}
.vcUpThumb{position:relative;flex:none;width:58px;height:58px;border-radius:14px;overflow:hidden;background:var(--vc-cream);
  box-shadow:0 0 0 1px rgba(96,45,54,.10)}
.vcUpThumb.dx{box-shadow:0 0 0 3px var(--ring)}
.vcUpThumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vcUpText{display:flex;flex-direction:column;gap:2px;min-width:0}
.vcUpKick{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);opacity:.9;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vcUpText b{font-size:14.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vcUpWhy{font-size:12.5px;line-height:1.4;color:var(--muted)}
.vcUpBar{display:block;width:100%;max-width:140px;height:4px;border-radius:4px;background:var(--u2-track);overflow:hidden;margin-top:4px}
.vcUpBar i{display:block;height:100%;background:var(--figure);border-radius:4px}
.vcGo{height:36px;padding:0 13px;border-radius:999px;border:1.5px solid rgba(96,45,54,.28);background:var(--bg);color:var(--text);
  font:600 13px Poppins,sans-serif;display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.vcGo svg{color:var(--u2-link)}
.vcGo:hover{background:var(--u2-btn);border-color:var(--u2-btn);color:#fff}
.vcGo:hover svg{color:#fff}

/* ---------- shelves ---------- */
.vcShelf{margin-top:32px}
.vcShelfHead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:10px}
.vcShelfTitle{min-width:0}
.vcShelfTitle h2{margin:0;font:700 21px/1.25 Poppins,sans-serif;color:var(--text)}
.vcShelfTitle p{margin:4px 0 0;max-width:620px;font-size:14px;line-height:1.5;color:var(--muted)}
.vcShelfCtl{display:flex;align-items:center;gap:8px;flex:none}
.vcSeeAll{min-height:44px;padding:0 6px;margin-right:4px}
.vcArrow{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(96,45,54,.22);background:var(--bg);color:var(--text);
  display:grid;place-items:center;cursor:pointer;transition:background .15s,opacity .15s}
.vcArrow:hover:not(:disabled){background:var(--u2-surf)}
.vcArrow:disabled{opacity:.35;cursor:default}
.vcArrow.prev svg{transform:rotate(180deg)}
/* the row bleeds into the page gutter so cards slide out of view, streaming style */
.vcRow{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  margin:0 -40px;padding:8px 40px 18px;scroll-padding:0 40px;scrollbar-width:none}
.vcRow::-webkit-scrollbar{display:none}
.vcRow>*{flex:none;scroll-snap-align:start}

.vcCardBtn{font-family:Poppins,sans-serif;text-align:left;cursor:pointer;color:var(--text);
  transition:transform .18s ease,box-shadow .18s ease}
.vcCardBtn:hover{transform:translateY(-4px);box-shadow:var(--vc-lift)}
.vcCardBtn:focus-visible,.vcUpMain:focus-visible,.vcGo:focus-visible,.vcArrow:focus-visible,.vcSeg button:focus-visible,.vcNext:focus-visible{
  outline:2px solid var(--u2-link);outline-offset:3px}

/* By diagnosis: square illustrations framed in each diagnosis color */
.vcDx{width:176px;padding:10px 10px 14px;border-radius:22px;border:0;background:var(--c);color:var(--ink);
  display:flex;flex-direction:column;gap:0;box-shadow:inset 0 0 0 1px rgba(96,45,54,.10)}
.vcDx:hover{box-shadow:inset 0 0 0 1px rgba(96,45,54,.10),var(--vc-lift)}
.vcDxArt{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--vc-cream)}
.vcDxArt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vcDxName{margin:12px 4px 0;font:800 24px/1 'EC',serif;color:var(--ink);letter-spacing:-.005em}
.vcDxName.long{font-size:20px}
.vcDxMeta{margin:6px 4px 0;font-size:12px;font-weight:600;color:var(--ink);opacity:.82}
.vcDxBar{display:block;height:4px;margin:8px 4px 0;border-radius:4px;background:color-mix(in srgb,var(--ink) 22%,transparent);overflow:hidden}
.vcDxBar i{display:block;height:100%;border-radius:4px;background:var(--ink)}

/* The core playbooks: big landscape cards, description showing */
.vcCore{width:452px;min-height:232px;display:grid;grid-template-columns:188px minmax(0,1fr);border:1px solid var(--border);
  border-radius:22px;overflow:hidden;background:var(--bg);padding:0}
.vcCoreArt{position:relative;background:var(--vc-cream)}
.vcCoreArt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vcCoreBody{display:flex;flex-direction:column;gap:6px;padding:18px 20px 18px;min-width:0}
.vcCoreKick{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--u2-link)}
.vcCoreBody b{font-size:17px;font-weight:700;line-height:1.28;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vcCoreDesc{font-size:13px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.vcCoreBody.tall .vcCoreDesc{-webkit-line-clamp:3}
.vcStatus{margin-top:auto;padding-top:8px;display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;color:var(--muted)}
.vcStatus .u2Bar{flex:1;height:5px}
.vcStatus em{font-style:normal;white-space:nowrap}
.vcDoneTag{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px 0 7px;border-radius:999px;background:var(--u2-lime);color:#602D36;font-size:12px;font-weight:700}
.vcHint{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:500}
.vcHint::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid rgba(96,45,54,.4)}

/* Live calls & deep dives: compact cards, illustration flush on cream */
.vcDeep{width:304px;min-height:112px;display:flex;align-items:stretch;border:0;border-radius:20px;overflow:hidden;background:var(--u2-surf);padding:0}
.vcDeepArt{position:relative;flex:none;width:112px;background:var(--vc-cream)}
.vcDeepArt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vcDeepBody{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:12px 16px 12px 14px;min-width:0}
.vcDeepBody b{font-size:14.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vcDeepBody small{font-size:12.5px;color:var(--muted)}
.vcDeepBody .vcOpt{font-size:11.5px;line-height:1.35}
.vcDeepBody .vcStatus{margin-top:4px;padding-top:0;font-size:12px}
.vcNew{position:absolute;left:8px;top:8px;height:22px;padding:0 8px;border-radius:999px;background:#E8451F;color:#fff;
  font:700 10.5px/22px Poppins,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.vcNewIn{display:inline-block;vertical-align:2px;margin-left:6px;height:18px;padding:0 6px;border-radius:999px;background:#E8451F;color:#fff;
  font:700 9.5px/18px Poppins,sans-serif;letter-spacing:.1em;text-transform:uppercase}

/* Finish line: the certificate banner */
.vcFinish{margin-top:40px;display:grid;grid-template-columns:184px minmax(0,1fr) auto;gap:28px;align-items:center;
  background:var(--u2-lime);color:#602D36;border-radius:28px;padding:24px 30px 24px 24px}
.vcFinArt{position:relative;width:184px;aspect-ratio:1;border-radius:20px;overflow:hidden;background:#F3EBD7;transform:rotate(-2.5deg);
  box-shadow:0 10px 24px rgba(96,45,54,.18)}
.vcFinArt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vcFinBody{display:flex;flex-direction:column;gap:8px;min-width:0}
.vcFinish .u2Kick{color:#602D36;display:flex;align-items:center;gap:7px}
.vcFinish h2{margin:0;font:800 32px/1.04 'EC',serif;color:#602D36}
.vcFinish p{margin:0;font-size:14px;line-height:1.5;max-width:560px}
.vcTrack{margin-top:6px;max-width:600px}
.vcTrackTop{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;font-weight:600;margin-bottom:6px}
.vcTrackTop span:last-child{display:inline-flex;align-items:center;gap:5px}
.vcTrackBar{position:relative;height:12px;border-radius:12px;background:rgba(96,45,54,.15)}
.vcTrackBar i{position:absolute;left:0;top:0;bottom:0;border-radius:12px;background:#602D36}
.vcTrackBar i::after{content:"";position:absolute;right:-3px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;
  background:#FAF8EE;border:4px solid #602D36}
.vcCounts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.vcCounts span{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.55);
  font-size:12px;font-weight:600;white-space:nowrap}
.vcCounts span em{font-style:normal;color:#8A4A55;font-weight:500}
.vcCounts span.done{background:#602D36;color:#FAF8EE}
.vcFinCta{display:flex;flex-direction:column;align-items:stretch;gap:8px;text-align:center}
.vcFinCta small{font-size:12px;color:#7A4550;max-width:190px;line-height:1.4}

/* ---------- tablets: too narrow for side by side, so the panel drops under the banner in two columns ---------- */
@media(max-width:1239px) and (min-width:900px){
  .vcTop{grid-template-columns:minmax(0,1fr)}
  .vcFeat{grid-template-columns:minmax(0,1fr) 240px}
  .vcUpList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  .vcUpItem:nth-child(2){border-top-color:transparent}
}

/* ---------- phones ---------- */
@media(max-width:899px){
  .vcHead{display:none}
  .vcTop{grid-template-columns:minmax(0,1fr);gap:0}
  .vcFeat{grid-template-columns:minmax(0,1fr) 138px;grid-template-rows:auto auto auto auto;border-radius:24px;
    grid-template-areas:"head art" "prog prog" "next next" "foot foot"}
  .vcFeatArt{border-bottom-left-radius:22px}
  .vcFeatL{display:contents}
  .vcFeatHead{grid-area:head;align-self:center;padding:18px 12px 4px 18px;gap:7px}
  .vcProg{grid-area:prog;padding:16px 18px 0}
  .vcFeat h2{font-size:29px}
  .vcFeatSub{font-size:13px}
  .vcNext{margin:14px 14px 0;padding:12px;gap:12px}
  .vcNextTx b{font-size:14.5px}
  .vcFeatFoot{padding:14px 18px 18px;gap:14px}
  .vcFeatBtns{width:100%}
  .vcFeatBtns .u2Btn,.vcFeatBtns .u2Ghost{flex:1;height:50px;padding:0 10px}

  /* Up next becomes a swipeable row of cards */
  .vcUp{background:none;border-radius:0;padding:0;margin-top:30px}
  .vcUpHead{flex-direction:column;align-items:flex-start;gap:10px;margin:0 0 4px}
  .vcSeg button{height:44px;padding:0 16px;font-size:13.5px}
  .vcSeg{padding:3px}
  .vcUpList{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -16px;padding:8px 16px 6px;
    scroll-padding:0 16px;scrollbar-width:none}
  .vcUpList::-webkit-scrollbar{display:none}
  .vcUpItem{flex:none;width:262px;scroll-snap-align:start;margin:0;padding:10px 10px 14px;border:0;border-radius:20px;
    background:var(--u2-surf);grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;align-items:stretch;justify-items:start;gap:12px}
  .vcUpItem:first-child{border:0}
  .vcUpItem:hover{background:var(--u2-surf)}
  .vcUpMain{flex-direction:column;align-items:stretch;gap:10px}
  .vcUpThumb{width:100%;height:auto;aspect-ratio:16/9;border-radius:14px}
  .vcUpThumb.dx{box-shadow:inset 0 -6px 0 var(--ring),0 0 0 1px rgba(96,45,54,.08)}
  .vcUpThumb.dx::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--ring)}
  .vcUpText{padding:0 4px}
  .vcUpText b{font-size:15px}
  .vcUpWhy{font-size:13px}
  .vcUpMain{width:100%}
  .vcGo{height:44px;padding:0 18px;font-size:14px;margin-left:4px}
  .vcUpKick{font-size:11px}

  .vcShelf{margin-top:34px}
  .vcShelfHead{align-items:flex-start;margin-bottom:4px}
  .vcShelfTitle h2{font-size:18px}
  .vcShelfTitle p{font-size:13px}
  .vcArrow{display:none}
  .vcSeeAll{margin:-10px -6px 0 0;font-size:14px}
  .vcRow{gap:12px;margin:0 -16px;padding:8px 16px 14px;scroll-padding:0 16px}
  .vcCardBtn:hover{transform:none;box-shadow:none}
  .vcDx:hover{box-shadow:inset 0 0 0 1px rgba(96,45,54,.10)}

  .vcDx{width:150px;padding:8px 8px 12px;border-radius:20px}
  .vcDxName{font-size:21px;margin-top:10px}
  .vcDxName.long{font-size:17px}

  .vcCore{width:282px;min-height:0;grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .vcCoreArt{aspect-ratio:2/1}
  .vcCoreBody{padding:14px 16px 16px}
  .vcCoreBody b{font-size:16px}

  .vcDeep{width:274px;min-height:104px}
  .vcDeepArt{width:100px}

  .vcFinish{margin-top:34px;grid-template-columns:96px minmax(0,1fr);gap:14px 16px;padding:18px;border-radius:24px;align-items:start}
  .vcFinArt{width:96px;border-radius:14px}
  .vcFinBody{display:contents}
  .vcFinTitle{grid-column:2;align-self:center;display:flex;flex-direction:column;gap:6px}
  .vcFinish h2{font-size:25px}
  .vcFinRest{grid-column:1/-1;display:flex;flex-direction:column;gap:8px}
  .vcFinish p{font-size:13.5px}
  .vcFinCta{grid-column:1/-1}
  .vcFinCta .u2Btn{height:50px;width:100%}
  .vcFinCta small{max-width:none}

}
@media(prefers-reduced-motion:reduce){
  .vcRow,.vcUpList{scroll-behavior:auto}
  .vcCardBtn:hover{transform:none}
}

/* live-build additions: "See all" turns a shelf into a grid; courses without an illustration keep their drawn cover */
.vcRow.all{flex-wrap:wrap;overflow:visible;margin:0;padding:8px 0 18px;scroll-snap-type:none}
.vcCoreArt svg,.vcDeepArt svg,.vcUpThumb svg{position:absolute;inset:0;width:100%;height:100%}
.vcFinish .vcFinBtn{white-space:nowrap}
.vcEmptyUp{font-size:14px;line-height:1.55;color:var(--muted);padding:10px 4px 14px}
.vcUpMore{font-size:13px;color:var(--muted);padding:8px 4px 6px}
@media (max-width:899px){.vcUpMore{padding:4px 0 0}}

/* Home (Ryan 2026-09-30): the Courses page illustrations on "Courses by diagnosis" and "Live calls" */
.hmDx .vcDx{width:auto;min-width:0}
.u2RecArt.art{overflow:hidden;background:var(--vc-cream)}
html.u2[data-theme="dark"] .u2RecArt.art{background:var(--u2-rec)}
.u2RecArt.art img{position:absolute;top:-9%;right:-10px;height:118%;aspect-ratio:1;width:auto;object-fit:cover;pointer-events:none}
.u2RecArt.art span,.u2RecArt.art b{position:relative;z-index:1}
.u2RecArt.art em{z-index:1}
@media(max-width:899px){
  .hmDx.u2Scroll .vcDx{width:150px}
  .u2RecArt.art b{font-size:25px}
}
/* Home "More courses": each tile shows its course illustration */
.u2TileIc.art{position:relative;width:76px;height:76px;overflow:hidden;background:var(--vc-cream)}
.u2TileIc.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12)}   /* trims the empty cream margin */
@media(max-width:899px){ .u2TileIc.art{width:60px;height:60px} }
/* Search "Top result": the same diagnosis tile as Home and Courses */
.u2TopCard .vcDx{width:156px;flex:none}
@media(max-width:899px){
  .u2TopCard .vcDx{width:112px;padding:6px 6px 10px;border-radius:16px}
  .u2TopCard .vcDxArt{border-radius:11px}
  .u2TopCard .vcDxName{font-size:17px;margin-top:8px}
  .u2TopCard .vcDxName.long{font-size:13px}
  .u2TopCard .vcDxMeta{font-size:11px}
}

/* ---------- Edit profile, design A (profile-edit.js; mockups in designs/profile-edit-20260930, Ryan 2026-09-30) ---------- */
.epAv{display:inline-grid;place-items:center;border-radius:50%;font-family:Poppins,sans-serif;font-weight:700;flex:none;overflow:hidden;background:#eee;letter-spacing:.02em}
.epAv img{width:100%;height:100%;object-fit:cover;display:block}
#u2Av .epAv{width:100%!important;height:100%!important}
.u2Me .u2Av .epAv{width:100%!important;height:100%!important;font-size:22px!important}
.epSaved{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:#3E7A4E;opacity:0;transition:opacity .2s;white-space:nowrap}
.epSaved.on{opacity:1}
.epSaved.bad{color:#B42318}
html[data-theme="dark"] .epSaved{color:#9FD3A8}
.epPhoto.busy{opacity:.6;pointer-events:none}
.epBtns button{white-space:nowrap}
.psErr{margin:0 24px;padding:10px 12px;border-radius:12px;background:rgba(255,158,140,.14);color:#FFB4A6;font-size:13.5px}
.epToast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);z-index:200;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)}
.epToast.on{opacity:1;transform:translateX(-50%);pointer-events:auto}
.epToast button{background:none;border:0;color:#E1E782;font:700 14px Poppins,sans-serif;cursor:pointer;min-height:40px;padding:0 4px}
@media(max-width:899px){ .epToast{bottom:calc(88px + env(safe-area-inset-bottom))} .psErr{margin:10px 16px 0} }
/* =====================================================================================
   Variant A: "Preview card + photo studio" (Edit profile mockup, 2026-09-30)
   Desktop: a sticky "How members see you" card on the left, the fields in white cards on
   the right. The photo editor is a dark "Photo studio" dialog with Photo / Initial tabs.
   Phone: the card shrinks to a header block and the studio becomes a full-screen sheet.
   ===================================================================================== */

/* ---------- page header ---------- */
.epHead{display:flex;flex-direction:column;gap:6px;margin:4px 0 24px}
.epHead h1{font:800 34px/1.05 'EC',serif;margin:0}
.epSub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;font-size:14px;color:var(--muted)}
.epSub b{color:var(--text);font-weight:600}
.epAuto{display:inline-flex;align-items:center;gap:6px}
.epAuto svg{color:#3E7A4E}

/* ---------- two columns: preview card | fields ---------- */
.epGrid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:28px;align-items:start}
.epSide{position:sticky;top:96px;display:flex;flex-direction:column;gap:12px}
.epKick{display:flex;align-items:center;gap:8px;font:700 12px Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--u2-link)}

/* the live preview card */
.epCard{background:var(--u2-surf);border-radius:22px;overflow:hidden;padding:0 22px 20px;text-align:center}
.epBand{height:76px;margin:0 -22px;background:radial-gradient(120% 160% at 88% -30%,#8C4250 0%,#602D36 58%)}
.epCardAv{width:max-content;margin:-56px auto 12px;border-radius:50%;box-shadow:0 0 0 5px var(--u2-surf)}
.epCardAv .epAv{display:grid}
.epName{font:800 28px/1.1 'EC',serif;color:var(--text);overflow-wrap:anywhere}
.epBy{font-size:13.5px;color:var(--muted);margin-top:4px}
.epBio{font-size:14px;line-height:1.55;margin-top:12px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.epBio.none{color:var(--muted);font-style:italic}
.epSample{margin-top:16px;background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:12px 14px;text-align:left}
.epSampleK{font:700 11px Poppins,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.epPost{display:flex;gap:10px;align-items:flex-start}
.epPostTx{min-width:0}
.epPostBy{font-size:13px;line-height:1.3}
.epPostBy b{font-weight:600}
.epPostBy span{color:var(--muted)}
.epPostT{font-size:14px;font-weight:600;line-height:1.35;margin-top:2px}

/* email + sign out */
.epAcct{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 6px 0}
.epEmail{display:flex;align-items:center;gap:10px;min-width:0;color:var(--muted)}
.epEmail>div{display:flex;flex-direction:column;min-width:0}
.epEmail small{font-size:12px;color:var(--muted)}
.epEmail span{font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.epOut{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;color:var(--muted);font:600 14px Poppins,sans-serif;flex:none;border:0;background:none;cursor:pointer}
.epOut:hover{color:var(--text)}
.epAcctM{display:none}
.epMini{display:none}

/* ---------- the field cards ---------- */
.epCol{display:flex;flex-direction:column;gap:18px;min-width:0}
.epBox{background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:20px 24px 24px}
.epBoxHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;min-height:28px}
.epBoxHead h2{display:flex;align-items:center;gap:10px;margin:0;font:700 17px Poppins,sans-serif}
.epBoxHead h2 svg{color:var(--u2-link)}

/* Your photo */
.epPhoto{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"av btns" "av show";gap:14px 22px;align-items:center}
.epPhoto.solo{grid-template-areas:"av btns"}
.epPhotoAv{grid-area:av}
.epPhotoAv .epAv{display:grid}
.epBtns{grid-area:btns;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.epShow{grid-area:show;display:flex;align-items:center;gap:12px}
.epShowL{font-size:13.5px;font-weight:600}
.epSeg{display:inline-flex;gap:4px;padding:4px;border-radius:14px;background:var(--u2-surf)}
.epSeg button{height:38px;padding:0 16px;border-radius:10px;border:0;background:none;color:var(--muted);
  font:600 14px Poppins,sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.epSeg button:hover{color:var(--text)}
.epSeg button[aria-checked="true"]{background:var(--bg);color:var(--text);box-shadow:0 1px 4px rgba(96,45,54,.2)}
.epDanger{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 4px;border:0;background:none;color:#B42318;
  font:600 14px Poppins,sans-serif;cursor:pointer}
.epDanger:hover{text-decoration:underline}
.epColor{min-height:40px}
.epDot{width:14px;height:14px;border-radius:50%;display:inline-block;box-shadow:inset 0 0 0 1.5px rgba(96,45,54,.25)}

/* About you: a 6-column grid so State can be narrow */
.epFields{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.epField{display:flex;flex-direction:column;gap:6px;min-width:0}
.f-bio{grid-column:1/-1}
.f-first,.f-last{grid-column:span 3}
.f-cred{grid-column:span 4}.f-years{grid-column:span 2}
.f-state{grid-column:span 2}.f-set{grid-column:span 4}
.epLab{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px;font-weight:600;min-height:20px}
.epIn{width:100%;height:48px;border-radius:12px;border:1px solid rgba(96,45,54,.24);background:var(--bg);color:var(--text);
  font:400 15px Poppins,sans-serif;padding:0 14px;margin:0}
.epIn:hover{border-color:rgba(96,45,54,.4)}
.epIn:focus{outline:none;border:2px solid var(--u2-link);padding:0 13px}
textarea.epIn{height:auto;min-height:108px;padding:12px 14px;line-height:1.5;resize:vertical}
textarea.epIn:focus{padding:11px 13px}
select.epIn{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:40px;
  background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23602D36' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/18px no-repeat}
select.epIn:focus{padding-right:39px}
.epUp{text-transform:uppercase}
.epCount{font-size:12.5px;color:var(--muted);text-align:right}
.epCount.near{color:#B42318;font-weight:600}
.epHelp{font-size:12.5px;color:var(--muted)}

/* How you appear */
.epLabBlock{margin-bottom:10px}
.epOpts .u2Opt{padding:14px;gap:6px}
.epOpts .u2Opt[aria-checked="true"]{padding:13px}
.epOpts .u2OptHead{font-size:14px;align-items:flex-start;line-height:1.3}
.epOpts small{font-weight:600;color:var(--text);font-size:14px}
.epOpts small i{display:none}
.epOpts .ex{color:var(--muted);font-weight:500}
.epHandle{margin-top:16px;max-width:360px}

/* Emails */
.epSw{padding:14px 0;border-top:1px solid var(--border);cursor:pointer}
.epSw:first-child{border-top:0;padding-top:2px}
.epSw:last-child{padding-bottom:0}
.epSw .u2Toggle::after{content:"";position:absolute;inset:-6px -4px}

/* CE hours */
.epCEBig{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.epCEBig b{font:800 44px/1 'EC',serif;color:var(--text)}
.epCEBig span{font-size:15px;color:var(--muted);font-weight:500}
.epCEBar{height:8px;margin:14px 0 10px}
.epCEFoot{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted)}
.epCEFoot .u2Link{min-height:40px}

/* visible focus on this page's own controls */
.epSeg button:focus-visible,.epDanger:focus-visible,.epOut:focus-visible,.epSw .u2Toggle:focus-visible,.epColor:focus-visible{outline:2px solid var(--u2-link);outline-offset:2px}

/* ---------- the small confirm ---------- */
.epConfirm{position:fixed;inset:0;z-index:160;display:grid;place-items:center;padding:16px;background:rgba(35,18,21,.5)}
.epConfirmBox{width:min(380px,100%);background:#fff;color:#602D36;border-radius:20px;padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.epConfirmBox h3{margin:0;font:700 18px Poppins,sans-serif}
.epConfirmBox p{margin:6px 0 0;font-size:14px;line-height:1.5;color:#7A5A5F}
.epConfirmBtns{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.epConfirmBtns .u2Ghost{color:#602D36}
.u2Btn.epDel{background:#B42318}.u2Btn.epDel:hover{background:#912018}

/* ---------- Photo studio (dark, like a photo app) ---------- */
html.psLock{overflow:hidden}
.psBack{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;background:rgba(35,18,21,.62)}
#ps:focus{outline:none}
.ps{--ps-bg:#231215;--ps-surf:#33191E;--ps-text:#FAF8EE;--ps-muted:#D9CCCE;--ps-line:rgba(250,248,238,.14);
  width:min(688px,100%);max-height:calc(100vh - 48px);overflow:auto;display:flex;flex-direction:column;
  background:var(--ps-bg);color:var(--ps-text);border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.psHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 18px 0 24px}
.psHead h2{margin:0;font:800 26px/1.1 'EC',serif}
.psX{width:44px;height:44px;border-radius:50%;border:0;background:var(--ps-surf);color:var(--ps-text);display:grid;place-items:center;cursor:pointer;flex:none}
.psTabs{display:flex;gap:4px;width:max-content;margin:14px 24px 0;padding:4px;border-radius:14px;background:var(--ps-surf)}
.psTab{height:40px;padding:0 20px;border-radius:10px;border:0;background:none;color:var(--ps-muted);
  font:600 14px Poppins,sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.psTab:hover{color:var(--ps-text)}
.psTab[aria-selected="true"]{background:var(--ps-text);color:#602D36}
.psPanel{display:grid;grid-template-columns:360px minmax(0,1fr);gap:24px;padding:18px 24px 22px}
.psLeft{display:flex;flex-direction:column;gap:10px;min-width:0}
.psRight{display:flex;flex-direction:column;gap:16px;min-width:0}
.psStageBox{position:relative;width:360px;border-radius:18px}
.psEmpty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  pointer-events:none;color:var(--ps-text);font-size:15px}
.psEmpty svg{opacity:.8}
.psZoom{display:flex;align-items:center;gap:8px}
.psIc{width:44px;height:44px;border-radius:50%;border:0;background:var(--ps-surf);color:var(--ps-text);display:grid;place-items:center;cursor:pointer;flex:none}
.psIc:disabled,.psTool:disabled{opacity:.4;cursor:not-allowed}
.psRange{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:44px;margin:0;background:transparent;cursor:pointer;--p:0%;border:0;padding:0;border-radius:0;box-shadow:none}
.psRange::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,#E1E782 var(--p),rgba(250,248,238,.22) var(--p))}
.psRange::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:#FAF8EE;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.psRange::-moz-range-track{height:4px;border-radius:4px;background:rgba(250,248,238,.22)}
.psRange::-moz-range-progress{height:4px;border-radius:4px;background:#E1E782}
.psRange::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#FAF8EE}
.psRange:disabled{opacity:.4;cursor:not-allowed}
.psPrev{background:var(--ps-surf);border-radius:18px;padding:14px 16px 16px}
.psK{font:700 11.5px Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#E1E782;margin-bottom:12px}
.psPrev{text-align:center}
.psPrevBig{display:flex;justify-content:center}
.psPrevBig .epAv{display:grid}
.psPrevRow{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:6px 12px 6px 6px;border-radius:999px;background:rgba(250,248,238,.08);font-size:13.5px;color:var(--ps-muted);max-width:100%}
.psPrevRow b{color:var(--ps-text);font-weight:600}
.psTools{display:flex;flex-direction:column;gap:10px}
.psPair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.psTool{height:44px;padding:0 12px;border-radius:12px;border:1.5px solid rgba(250,248,238,.28);background:none;color:var(--ps-text);
  font:600 14px Poppins,sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.psTool:not(:disabled):hover{border-color:rgba(250,248,238,.6)}
.psTake{display:none}
.psHint{font-size:12.5px;color:var(--ps-muted);text-align:center;margin-top:-2px}
.psBigInit{width:360px;aspect-ratio:1;border-radius:18px;background:#2A1418;display:grid;place-items:center}
.psBigInit .epAv{display:grid}
.psSw{display:grid;grid-template-columns:repeat(3,52px);gap:14px}
.psSwatch{position:relative;width:52px;height:52px;border-radius:50%;border:0;display:grid;place-items:center;
  font:700 20px Poppins,sans-serif;cursor:pointer;padding:0}
.psSwatch[aria-checked="true"]{box-shadow:0 0 0 3px var(--ps-bg),0 0 0 6px #E1E782}
.psSwatch[aria-checked="true"]::after{content:"";position:absolute;right:-6px;bottom:-6px;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--ps-bg);background:#E1E782 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23602D36' 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/12px no-repeat}
.psFoot{display:flex;align-items:center;gap:10px;margin-top:auto;padding:14px 24px 16px;border-top:1px solid var(--ps-line)}
.psRemove{margin-right:auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 6px;border:0;background:none;
  color:#FF9E8C;font:600 14px Poppins,sans-serif;cursor:pointer}
.psRemove:hover{text-decoration:underline}
.psRemove,.psFoot .u2Btn,.psFoot .u2Ghost{white-space:nowrap}
.psSpacer{margin-right:auto}
.psFoot .u2Ghost{color:var(--ps-text);border-color:rgba(250,248,238,.35)}
.psFoot .u2Btn:disabled{opacity:.45;cursor:not-allowed}
.ps :focus-visible,.ps .u2Btn:focus-visible,.ps .u2Ghost:focus-visible{outline:2px solid #E1E782;outline-offset:2px}
.ps .hcStage:focus-visible{box-shadow:0 0 0 3px #E1E782}


/* ---------- mid widths: stack, with the compact header block ---------- */
@media(max-width:1099px){
  .epGrid{grid-template-columns:minmax(0,1fr);gap:16px}
  .epSide{position:static;gap:10px}
  .epCard,.epSide .epAcct{display:none}
  .epMini{display:flex;align-items:center;gap:14px;background:var(--u2-surf);border-radius:18px;padding:14px 16px}
  .epMini .epAv{display:grid}
  .epMiniTx{min-width:0}
  .epMiniN{font:800 24px/1.1 'EC',serif;overflow-wrap:anywhere}
  .epMini .epBy{margin-top:3px}
  .epAcctM{display:flex;border:1px solid var(--border);border-radius:20px;padding:10px 16px}
}

/* ---------- phones ---------- */
@media(max-width:899px){
  .epHead{margin:6px 0 16px;gap:4px}
  .epHead .u2Kick{display:none}
  .epHead h1{font-size:28px}
  .epSub{font-size:13.5px}
  .epBox{padding:18px 16px 20px;border-radius:18px}
  .epCol{gap:14px}
  .epPhoto{grid-template-areas:"av btns" "show show";gap:16px}
  .epPhoto.solo{grid-template-areas:"av btns"}
  .epBtns{flex-direction:column;align-items:flex-start;gap:6px}
  .epBtns .u2Btn{height:44px}
  .epShow{flex-direction:column;align-items:stretch;gap:8px}
  .epSeg{display:flex}
  .epSeg button{flex:1;height:44px}
  .epDanger,.epColor,.epCEFoot .u2Link{min-height:44px}
  .f-cred,.f-set{grid-column:1/-1}
  .f-years,.f-state{grid-column:span 3}
  .epHandle{max-width:none}
  .epOpts{gap:10px}
  .epOpts .u2Opt{flex-direction:row;align-items:center;justify-content:space-between;min-height:56px}
  .epOpts .u2OptHead{order:2}
  .epOpts .u2OptHead{font-size:0;gap:0}           /* phone: the preview name is the label */
  .epOpts small{order:1;display:flex;flex-direction:column;gap:1px}
  .epOpts small i{display:block;font-style:normal;font-weight:500;font-size:12.5px;color:var(--muted)}
  .epCEBig b{font-size:40px}

  /* the studio becomes a full-screen sheet, controls at the bottom */
  .psBack{padding:0;place-items:stretch}
  .ps{width:100%;height:100vh;height:100dvh;max-height:none;border-radius:0}
  .psHead{padding:calc(10px + env(safe-area-inset-top)) 12px 0 16px}
  .psHead h2{font-size:24px}
  .psTabs{width:auto;margin:10px 16px 0}
  .psTab{flex:1;height:44px}
  .psPanel{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;gap:12px;padding:12px 16px 0}
  .psLeft,.psRight,.psPair{display:contents}
  .psPrev,.psHint{display:none}
  .psStageBox,.psBigInit{width:min(100%,calc(100vh - 380px));width:min(100%,calc(100dvh - 380px));min-width:220px;align-self:center;margin:auto 0}
  .psTools{flex-direction:row;gap:8px}
  .psTool{flex:1 1 0;min-width:0;height:64px;flex-direction:column;gap:4px;padding:6px 4px;border:0;background:var(--ps-surf);
    font-size:12px;line-height:1.15;text-align:center}
  .psTake{display:inline-flex}
  .psColor .psK{text-align:center}
  .psSw{display:flex;justify-content:space-between;gap:0;padding:0 2px 6px}
  .psSwatch{width:48px;height:48px}
  .psFoot{margin-top:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .psFoot .u2Btn,.psFoot .u2Ghost{height:48px}
}
/* very small phones: keep the footer on one line and the six swatches in one row */
@media(max-width:359px){
  .psLong{display:none}
  .psFoot .u2Btn,.psFoot .u2Ghost{padding:0 14px}
  .psSw{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:0 0 6px}
  .psSwatch{width:100%;max-width:48px;height:auto;aspect-ratio:1;justify-self:center}
  .psSwatch[aria-checked="true"]{box-shadow:0 0 0 2px var(--ps-bg),0 0 0 4px #E1E782}
}
/* CE hours on Settings (moved from Edit profile, 2026-09-30) */
.u2SetSec .epCEBig{margin-top:6px}
.u2SetSec .epCEFoot{margin-top:0}

/* ======================================================================================
   Design 3 "Plain-language guide" (Ryan picked it 2026-10-22). Only on html.u3 (UI3 in portal-v2.js).
   ====================================================================================== */
/* menu: a one-line description under each item (computers only; phones keep the tabs) */
html.u3 #u2Side .u2NavList{padding:0}
html.u3 .u2NavBtn:has(.u3NavTx){height:auto;min-height:52px;padding:8px 14px}
.u3NavTx{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.2}
.u3NavTx small{font:400 11.5px/1.3 Poppins,sans-serif;color:var(--muted)}
.u2NavBtn.on .u3NavTx small{color:var(--muted)}
.u3Lead{margin:2px 0 0;max-width:62ch;font-size:15px;line-height:1.5;color:var(--muted)}

/* Home: the slim "Keep going" card */
.u3Keep{display:flex;align-items:center;gap:22px;background:var(--u2-hero);color:var(--u2-heroText);border-radius:24px;padding:18px 26px 18px 18px}
.u3KeepArt{width:96px;height:96px;flex:none;border-radius:16px;overflow:hidden;background:#FAF8EE}
.u3KeepArt img,.u3KeepArt svg{width:100%;height:100%;object-fit:cover;display:block}
.u3KeepTx{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.u3Keep .u2Kick{color:var(--u2-lime)}
.u3Keep h2{margin:0;font:700 21px/1.25 Poppins,sans-serif;color:var(--u2-heroText);overflow-wrap:anywhere}
.u3KeepMeta{font-size:14px;color:var(--u2-heroSoft)}
.u3Keep .u2Bar{background:rgba(250,248,238,.2);max-width:420px;margin-top:4px}
.u3Keep .u2Bar>i{background:var(--u2-lime)}
.u3Keep .u2Btn{flex:none}

/* Home: "What do you want to do?" */
.u3Do{margin-top:36px}
.u3Head{margin-bottom:16px}
.u3Head h2{margin:0;font:700 21px/1.25 Poppins,sans-serif;color:var(--text)}
.u3Head p{margin:4px 0 0;font-size:14px;color:var(--muted)}
.u3Cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.u3Card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;padding:20px;border:1px solid var(--border);border-radius:20px;
  background:var(--bg);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.u3Card:hover{border-color:var(--text);box-shadow:var(--u2-shadow);transform:translateY(-2px)}
.u3Card:focus-visible,.u3Chip:focus-visible,.u3Row:focus-visible,.u3FeatArt:focus-visible{outline:2px solid var(--u2-link);outline-offset:2px}
.u3Area{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 9px;border-radius:999px;background:var(--u2-surf);color:var(--u2-link);font:600 12.5px Poppins,sans-serif}
.u3Card b{font:700 18px/1.25 Poppins,sans-serif}
.u3Text{font-size:13.5px;line-height:1.5;color:var(--muted)}
.u3Foot{margin-top:auto;align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;
  border-top:1px solid var(--border);font-size:13px;color:var(--muted)}
.u3Foot svg{color:var(--u2-link);flex:none}

/* Courses: shelves that say what they're for */
.u3Use{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.u3Use span{font-size:12.5px;line-height:1.4;padding:4px 10px;border-radius:8px;background:var(--u2-surf);color:var(--muted)}
.u3Use b{color:var(--text);font-weight:600}
.u3Shelf{margin-top:32px}
.u3Shelf:first-of-type{margin-top:8px}
.u3ShelfHead{margin-bottom:14px}
.u3ShelfHead h2{margin:0;font:700 21px/1.25 Poppins,sans-serif;color:var(--text)}
.u3ShelfHead p{margin:4px 0 0;max-width:620px;font-size:14px;line-height:1.5;color:var(--muted)}
.u3Feat{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:center;padding:14px;border-radius:22px;background:var(--u2-surf)}
.u3FeatArt{display:block;padding:0;border:0;border-radius:16px;overflow:hidden;aspect-ratio:1.25;background:#FAF8EE;cursor:pointer}
.u3FeatArt img,.u3FeatArt svg{width:100%;height:100%;object-fit:cover;display:block}
.u3FeatTx{display:flex;flex-direction:column;gap:8px;min-width:0;padding-right:10px}
.u3FeatTx b{font:700 20px/1.25 Poppins,sans-serif}
.u3FeatMeta,.u3FeatNext{font-size:14px;color:var(--muted)}
.u3FeatTx .u2Bar{max-width:420px}
.u3FeatBtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.u3FeatBtns .u2Btn,.u3FeatBtns .u2Ghost{height:48px}
.u3Rows{border-radius:20px;background:var(--u2-surf);overflow:hidden}
.u3Row{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:10px 16px 10px 10px;border:0;border-top:1px solid var(--border);
  background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.u3Row:first-child{border-top:0}
.u3Row:hover{background:var(--u2-active)}
.u3Row>svg{color:var(--muted);flex:none}
.u3RowArt{width:56px;height:56px;flex:none;border-radius:12px;overflow:hidden;background:#FAF8EE}
.u3RowArt img,.u3RowArt svg{width:100%;height:100%;object-fit:cover;display:block}
.u3RowTx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.u3RowTx b{font-weight:600;font-size:15px;line-height:1.3}
.u3RowTx small{font-size:13px;color:var(--muted)}
.u3RowSt{flex:none;font-size:12.5px;font-weight:600;color:var(--muted)}

/* Toolkit home: grouped by the question you're asking */
.u3Tk{display:block;margin:2px 0 22px;padding:0;max-width:none}
.u3Qs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.u3Q{display:flex;flex-direction:column;gap:12px;min-width:0;padding:18px;border-radius:20px;background:var(--u2-surf)}
.u3Q h2{margin:0;font:800 22px/1.12 'EC',serif;color:var(--text)}
.u3Chips{display:flex;flex-wrap:wrap;gap:8px}
.u3Chip{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border:1px solid var(--border);border-radius:999px;
  background:var(--bg);color:var(--text);font:500 13.5px Poppins,sans-serif;cursor:pointer}
.u3Chip svg{color:var(--u2-link);flex:none}
.u3Chip em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--muted)}
.u3Chip:hover{border-color:var(--text)}
.u3TkAll{margin:24px 0 10px;font:700 15px Poppins,sans-serif;color:var(--text)}
/* the reference home under the questions: just its search until they type */
html.u3TkHome .cr-md-home:not(.is-searching){display:block}
html.u3TkHome .cr-md-home:not(.is-searching) .cr-m-body,
html.u3TkHome .cr-md-home:not(.is-searching) .cr-detail{display:none}

@media(max-width:1180px){
  .u3Cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:899px){
  .u3Keep{flex-wrap:wrap;gap:14px;padding:16px;border-radius:20px}
  .u3KeepArt{width:64px;height:64px;border-radius:12px}
  .u3KeepTx{flex-basis:calc(100% - 80px)}
  .u3Keep h2{font-size:18px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .u3Keep .u2Btn{width:100%;height:50px}
  .u3Do{margin-top:28px}
  .u3Head h2,.u3ShelfHead h2{font-size:18px}
  .u3Cards,.u3Qs{grid-template-columns:1fr;gap:12px}
  .u3Card{padding:16px}
  .u3Feat{grid-template-columns:96px minmax(0,1fr);gap:14px;padding:10px;align-items:start}
  .u3FeatTx{padding-right:0}
  .u3FeatTx b{font-size:17px}
  .u3FeatBtns{flex-direction:column}
  .u3FeatBtns .u2Btn,.u3FeatBtns .u2Ghost{width:100%}
  .u3RowSt{display:none}
  .u3Q h2{font-size:20px}
  /* the top bar already names the page on a phone: keep only the plain sentence */
  html.u3 .u2Hi:has(.u3Lead){display:flex;margin-bottom:16px}
  html.u3 .u2Hi:has(.u3Lead) h1,html.u3 .u2Hi:has(.u3Lead) .u2Kick{display:none}
}
@media(prefers-reduced-motion:reduce){.u3Card{transition:none}.u3Card:hover{transform:none}}

/* Six phone tabs (2026-11-10): on the narrowest phones "Community" needed 61px of a 58px tab */
@media(max-width:374px){ html.u2 .u2Tab2{font-size:9.5px} }
@media(max-width:340px){ html.u2 .u2Tab2{white-space:normal;line-height:1.15;text-align:center} }   /* 320px phones: let a label wrap, as before */

/* ======================================================================= Wide screens (Ryan, 2026-11-11)
   Mockups: artifact ABFm9bPotLBa4nmHyCiPcZ "Wide-Screen Layouts". His picks: the menu folds to an icon
   rail (A, names on hover), Toolkit "Wider One Box" (toolkit-home.css), Courses "Shelves + progress panel"
   and, for dated call courses, "Filters + months". Courses, course pages, Live calls and the Toolkit home
   (html.u2WidePage) grow to 1,480px of content; every other page keeps 1,160px. */

/* the fold button at the bottom of the menu, and the folded menu */
.u2Fold{display:none}
.u2RailTip{position:fixed;z-index:200;transform:translateY(-50%);padding:6px 10px;border-radius:8px;background:#602D36;color:#FAF8EE;
  font:600 13px/1.2 Poppins,sans-serif;white-space:nowrap;pointer-events:none;box-shadow:0 6px 18px rgba(35,18,21,.25)}
.u2RailTip[hidden]{display:none}
html.u2[data-theme="dark"] .u2RailTip{background:#FAF8EE;color:#231215}
@media(min-width:900px){
  html.u2 .u2Fold{display:flex;align-items:center;gap:10px;flex:none;width:100%;height:40px;margin-top:auto;padding:0 12px;border-radius:10px;
    border:1px solid var(--border);background:var(--bg);color:var(--muted);font:600 13px Poppins,sans-serif;cursor:pointer;text-align:left}
  html.u2 .u2Fold:hover{color:var(--text);border-color:var(--u2-ring)}
  html.u2 .u2Fold:focus-visible{outline:2px solid var(--u2-link);outline-offset:2px}
  html.u2.u2Rail #app{grid-template-columns:72px minmax(0,1fr)}
  html.u2.u2Rail #u2Side{padding:22px 12px 18px;gap:18px;align-items:center}
  html.u2.u2Rail .u2Brand{padding:0}
  html.u2.u2Rail .u2BrandName,html.u2.u2Rail .u3NavTx,html.u2.u2Rail .u2Fold span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html.u2.u2Rail .u2NavList{align-items:center}
  html.u2.u2Rail .u2NavBtn,html.u3.u2Rail .u2NavBtn:has(.u3NavTx){position:relative;width:48px;height:48px;min-height:48px;padding:0;gap:0;justify-content:center}
  html.u2.u2Rail .u2Rule{width:36px;margin:0}
  html.u2.u2Rail .u2Badge{position:absolute;top:3px;right:1px;min-width:18px;height:18px;margin:0;padding:0 5px;font-size:10.5px;line-height:18px}
  html.u2.u2Rail .u2New{display:none}
  html.u2.u2Rail .u2Fold{width:48px;padding:0;justify-content:center}
  html.u2.u2Rail .u2Fold svg{transform:rotate(180deg)}
}
@media(min-width:1200px){
  html.u2.u2WidePage .page{max-width:1560px}
  html.u2.u2WidePage #u2Top{padding-left:max(40px, calc((100% - 1480px) / 2));padding-right:max(40px, calc((100% - 1480px) / 2))}
}

/* Courses: the progress panel on the right (from 1280px) */
.u3Side{display:none}
@media(min-width:1280px){
  html.u2 .u3Wrap:has(.u3Side){display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:36px;align-items:start}
  html.u2 .u3Wrap:has(.u3Side) .u3NarrowOnly{display:none}
  html.u2 .u3Side{display:flex;flex-direction:column;gap:14px;margin-top:10px}
  html.u2 .u3MainCol .vcDxRow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;overflow:visible;margin:0;padding:8px 0 4px;scroll-snap-type:none}
  html.u2 .u3MainCol .vcDxRow .vcDx{width:auto;min-width:0}
  html.u2 .u3MainCol .vcDxRow .vcDxArt{aspect-ratio:16/10}
  html.u2 .u3MainCol .vcShelfCtl{display:none}
}
@media(min-width:1280px) and (min-height:860px){ html.u2 .u3Side{position:sticky;top:92px} }
.csCard{background:var(--u2-surf);border-radius:16px;padding:16px;color:var(--text)}
.csCardH{margin:0 0 10px;font:600 12px/1.2 Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.csKeepArt{display:block;width:100%;height:132px;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--u2-raised);cursor:pointer}
.csKeepArt>img,.csKeepArt>svg{display:block;width:100%;height:100%;object-fit:cover}
.csKeepArt:focus-visible{outline:2px solid var(--u2-link);outline-offset:2px}
.csKeepT{display:block;margin:12px 0 2px;font:600 16px/1.3 Poppins,sans-serif}
.csKeepM{display:block;margin-bottom:10px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.csKeepB{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.csSideCal .calStrip{margin:0;padding:0;border:0;background:none}
.csSideCal .calStripH b{font:600 12px/1.2 Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.csSideCal .calStripH a{font-size:13px}
.csSideCal .calStrip ul{grid-template-columns:1fr}
.csSideCal .calEmpty{margin:0;font-size:13.5px;color:var(--muted)}
.csCe{background:#E1E782}
.csCe .csCardH,.csCe .csCeN,.csCe .csCeN small,.csCe .csCeM{color:#602D36}
.csCeN{display:block;font:800 34px/1 'EC',serif}
.csCeN small{font:500 14px Poppins,sans-serif}
.csCe .u2Bar{margin-top:10px;background:rgba(96,45,54,.16)}
.csCeM{display:block;margin:8px 0 12px;font-size:12.5px;line-height:1.4}
.csCeB{width:100%;justify-content:center}
.csSeen{display:flex;flex-direction:column}
.csSeenRow{display:flex;align-items:center;gap:10px;width:100%;padding:9px 0;border:0;border-top:1px solid var(--border);background:none;
  color:var(--text);font:inherit;text-align:left;cursor:pointer}
.csSeenRow:first-child{border-top:0}
.csSeenRow:hover b{text-decoration:underline}
.csSeenRow:focus-visible{outline:2px solid var(--u2-link);outline-offset:2px}
.csSeenIc{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:7px;background:rgba(206,61,28,.13);color:var(--u2-link)}
.csSeenIc.done{background:var(--u2-lime);color:#602D36}
.csSeenTx{min-width:0}
.csSeenTx b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:600 13px/1.35 Poppins,sans-serif}
.csSeenTx small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11.5px;color:var(--muted)}

/* Dated call courses (Live Coaching Recordings): filters + months, from 1200px */
.dc{display:none}
@media(min-width:1200px){
  html.u2 .dcNarrow{display:none}
  html.u2 .dc{display:grid;grid-template-columns:250px minmax(0,1fr);gap:32px;align-items:start;margin-top:22px}
}
@media(min-width:1200px) and (min-height:760px){ html.u2 .dcSide{position:sticky;top:92px} }
.dcSide{display:flex;flex-direction:column;gap:4px}
.dcSearch{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--muted)}
.dcSearch:focus-within{box-shadow:0 0 0 3px var(--u2-ring)}
.dcSearch input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--text);font:400 14px Poppins,sans-serif;padding:0;margin:0;box-shadow:none}
.dcSearch input::placeholder{color:var(--muted);opacity:1}
.dcH{margin:18px 0 4px;font:600 11.5px/1.2 Poppins,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dcOpts{display:flex;flex-direction:column}
.dcOpt{display:flex;align-items:center;gap:9px;min-height:38px;padding:4px 8px;border:0;border-radius:8px;background:none;color:var(--text);
  font:500 14px Poppins,sans-serif;text-align:left;cursor:pointer}
.dcOpt:hover{background:var(--u2-active)}
.dcOpt.on{background:var(--u2-active);font-weight:600}
.dcBox.on{background:none}
.dcBox i{flex:none;width:16px;height:16px;border-radius:4px;border:1.5px solid var(--u2-ring)}
.dcBox.on i{background:var(--u2-chipOn);border-color:var(--u2-chipOn);box-shadow:inset 0 0 0 2px var(--bg)}
.dcOpt em{margin-left:auto;font-style:normal;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.dcChips{display:flex;flex-wrap:wrap;gap:6px}
.dcChip{min-height:34px;padding:4px 12px;border:1px solid var(--border);border-radius:17px;background:var(--bg);color:var(--text);font:500 13px Poppins,sans-serif;cursor:pointer}
.dcChip:hover{border-color:var(--u2-ring)}
.dcChip.on{background:var(--u2-chipOn);border-color:var(--u2-chipOn);color:var(--u2-chipOnText)}
.dcOpt:focus-visible,.dcChip:focus-visible{outline:2px solid var(--u2-link);outline-offset:2px}
.dcClear{align-self:flex-start;margin-top:14px}
.dcBar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dcBar h2{margin:0;font:700 20px/1.2 Poppins,sans-serif;color:var(--text)}
.dcCount{font-size:13px;color:var(--muted)}
.dcBar .mvSort{margin-left:auto}
.dcMonth{margin:24px 0 10px;font:600 12px/1.2 Poppins,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dcMonth span{font-weight:500;opacity:.8}
.dcGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
html.u2 .dc .mvRow.dcCard{display:flex;align-items:flex-start;gap:12px;width:100%;min-width:0;padding:14px 16px;border:1px solid var(--border);border-radius:14px;
  background:var(--bg);color:var(--text);font:inherit;text-align:left;cursor:pointer}
html.u2 .dc .mvRow.dcCard:hover{border-color:var(--u2-ring);background:var(--u2-surf)}
.dcCard .tickbox{margin-top:2px;flex:none}
.dcTx{flex:1;min-width:0}
.dcTx b{display:block;font:600 14px/1.38 Poppins,sans-serif}
.dcTx small{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.dcPlay{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:rgba(206,61,28,.12);color:var(--u2-link)}
.dc [hidden]{display:none!important}
.dcNone{margin-top:24px;color:var(--muted)}