/* real-content patches */
/* grid children may never stretch past the viewport (long nowrap text was widening cards) */
.grid>*{min-width:0}
.g-2>.card,.g-3>.card,.g-4>.card{min-width:0;overflow:hidden}
/* compact course grid - 4 cards per row (per Johnny) */
.g-c5{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.g-c5 .course__t{font-size:.92rem;line-height:1.25}
.g-c5 .course__d{font-size:.76rem;max-height:2.7em;overflow:hidden}
.g-c5 .course__b{padding:10px 12px}
/* THE THUMBNAILS ON #/courses, IN SAFARI. Tara, July 15 doc, Standalone courses >
   General: "On this page, IN SAFARI, the thumbnails are wonky at any screen size".

   This rule used to be `min-height:100px;max-height:120px`, on top of the base
   `.course__thumb{aspect-ratio:16/9}`. An aspect ratio and a max-height on the same box
   are a genuine conflict: one of the two has to give, and a browser may keep the width
   and clamp the height, or keep the ratio and shrink the width to match.

   MEASURED in Chrome on the live page, 4 Sep 2026: the thumbnail is 263 x 120 inside a
   265 wide card, so Chrome keeps the width and clamps the height, and it looks right.
   Her screenshot shows the opposite: every banner is NARROWER than its own card, with a
   white gap down the right, and the gap differs from card to card. That is what a
   ratio-preserving width does with a clamped height, and it explains "at any screen
   size", because the clamp applies at every width. NOT VERIFIED IN SAFARI, no Safari
   here; the diagnosis is from her screenshot plus the Chrome measurement.

   Either way the conflict is the bug, so it is removed rather than patched around. An
   explicit height with no ratio left to resolve gives 263 x 120 with nothing for any
   browser to decide. Measured before and after in Chrome at both the 4 column layout and
   a 1100px wide single column: identical, so nothing changes for anyone on Chrome. The
   base .course__thumb keeps its aspect-ratio for every other surface that uses it,
   because none of those cap the height. */
.g-c5 .course__thumb{aspect-ratio:auto;height:120px;min-height:0;max-height:none;width:100%}
@media(max-width:1100px){.g-c5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.g-c5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.g-c5{grid-template-columns:1fr}}
.player{position:relative}
#playerbox iframe,#playerbox video,#xp-playerbox iframe,#xp-playerbox video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:14px;border:0;background:#000;z-index:2}
.course__thumb .course__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.course__thumb .wm,.course__thumb .ls{z-index:2;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.course__thumb .play{z-index:2}
.course__lock{z-index:3}
/* live plan editing */
.edit-in{border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-family:inherit;font-size:.9rem;background:var(--paper-2);width:110px}
.edit-in:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(30,95,87,.1)}
.pri-dot{cursor:pointer;transition:transform .15s}
.pri-dot:hover{transform:scale(1.15)}
.xbtn{color:var(--faint);font-weight:700;cursor:pointer;padding:0 6px;font-size:.85rem}
.xbtn:hover{color:var(--clay-d)}
/* nav one-line */
.nav{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none;margin-left:4px;gap:1px}
.nav::-webkit-scrollbar{display:none}
.nav a{flex:none;padding:7px 9px;font-size:.78rem;letter-spacing:0}
.hdr__in{gap:12px}
@media(max-width:1280px){.hdr__right .streak{display:none}}
@media(max-width:1120px){.hdr__right .chip .chip__t{display:none}.chip{padding:4px 5px}}
.mention{color:var(--teal);font-weight:700;background:var(--teal-wash);border-radius:6px;padding:0 4px}
.mention:hover{background:var(--teal);color:#fff}
/* profile photos */
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
a.avatar{text-decoration:none;cursor:pointer}
.dmrow{display:flex;gap:8px;align-items:flex-start}
.dmrow .bubble{max-width:78%}
.bubble.me{border-bottom-right-radius:16px;border-top-left-radius:5px}
/* edit/delete/reply */
.msgact{opacity:0;transition:opacity .15s;display:flex;gap:2px;align-self:center}
.dmrow:hover .msgact{opacity:1}
.dmquote{font-size:.74rem;color:var(--muted);background:var(--paper-2);border-left:3px solid var(--gold);border-radius:6px;padding:4px 8px;margin-bottom:5px}
.bubble.me .dmquote{background:rgba(255,255,255,.16);color:rgba(255,255,255,.85);border-left-color:var(--gold)}
.post__h .xbtn{opacity:.35}
.post:hover .post__h .xbtn{opacity:1}
/* chat window + pins */
.dm__msgs{max-height:430px;min-height:260px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--gold-d) transparent}
.dm__msgs::-webkit-scrollbar{width:9px}
.dm__msgs::-webkit-scrollbar-thumb{background:var(--sand-2);border-radius:9px}
.dm__msgs::-webkit-scrollbar-thumb:hover{background:var(--gold-d)}
.pinbar{position:sticky;top:-18px;z-index:6;background:var(--paper-2);padding:6px;border-radius:10px;border:1px solid var(--line);margin-bottom:10px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow-sm)}
.pinitem{font-size:.78rem;background:var(--gold-wash);border-left:3px solid var(--gold-d);padding:4px 9px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* lesson notes & action items (rebuilt content) */
.lesson-notes .ln-body{margin-top:8px;font-size:.92rem;line-height:1.65;overflow-wrap:anywhere}
.lesson-notes .ln-body h1,.lesson-notes .ln-body h2,.lesson-notes .ln-body h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;margin:14px 0 4px;line-height:1.15}
.lesson-notes .ln-body h2{font-size:1.35rem}
.lesson-notes .ln-body ul,.lesson-notes .ln-body ol{margin:6px 0 6px 20px}
.lesson-notes .ln-body li{margin:3px 0}
.lesson-notes .ln-body a{color:var(--teal);font-weight:600;text-decoration:underline;text-decoration-color:rgba(30,95,87,.35)}
.lesson-notes .ln-body a:hover{color:#13433D}
.lesson-notes .ln-body img,.ln-body img{max-width:100%!important;height:auto!important;width:auto!important;border-radius:10px;object-fit:contain}
.lesson-notes .ln-body table{max-width:100%;border-collapse:collapse}
.lesson-notes .ln-body td,.lesson-notes .ln-body th{border:1px solid rgba(44,44,44,.12);padding:6px 8px;font-size:.85rem}
.ln-tg{border:1px solid rgba(44,44,44,.1);border-radius:10px;margin:10px 0;background:var(--paper-2)}
.ln-tg summary{cursor:pointer;font-weight:700;padding:10px 14px;font-size:.9rem;color:var(--teal)}
.ln-tg summary:hover{color:#13433D}
.ln-tg .ln-tgb{padding:2px 14px 12px}
.ln-tg[open] summary{border-bottom:1px solid rgba(44,44,44,.08)}
.ln-action{border-top:1px solid rgba(44,44,44,.08);padding:10px 0 2px;margin-top:8px}
.ln-action:first-of-type{border-top:0}
.ln-at{font-weight:700;font-size:.9rem}

/* ===== Roadmap overhaul (July 15) ===== */
.ms-banner .ms-group{margin-top:10px}
.ms-banner .ms-h{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px}
.ms-group--mine .ms-h{color:var(--teal-d)}
.ms-chips{display:flex;flex-wrap:wrap;gap:8px}
.ms-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--card,#fff);border-radius:999px;padding:6px 13px;font-size:.82rem;cursor:pointer;color:var(--ink);transition:.15s}
.ms-chip:hover{border-color:var(--teal)}
.ms-chip .ms-dot{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--lock,#c9c4bb);display:inline-flex;align-items:center;justify-content:center;font-size:.62rem;color:#fff}
.ms-chip.ms-on{background:var(--teal);border-color:var(--teal);color:#fff}
.ms-chip.ms-on .ms-dot{background:#fff;border-color:#fff;color:var(--teal)}
.ms-group--mine .ms-chip{border-color:var(--teal-2,#bcd)}

.rm-circle{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--lock,#c9c4bb);display:inline-flex;align-items:center;justify-content:center;font-size:.66rem;color:#fff;background:var(--card,#fff)}
.rm-circle.rm-done{background:var(--good,#3f9d6b);border-color:var(--good,#3f9d6b)}
.rm-circle.rm-now{background:var(--gold,#d6a94e);border-color:var(--gold,#d6a94e)}

/* A lesson pulled out of a module and embedded in the Roadmap (July 15 feedback).
   Styled as a card inside the section rather than as another module row, so it
   reads as part of the page it now lives on instead of a link away from it. */
.rm-embed{margin-top:14px;background:var(--card,#fff);border:1px solid var(--line);
  border-left:4px solid var(--clay,#c4643c);border-radius:14px;padding:14px 16px}
.rm-embed--done{border-left-color:var(--teal,#2f7d78)}
.rm-embed__eyebrow{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;opacity:.6;margin-bottom:4px}
.rm-embed__h{font-weight:700;font-size:1rem;line-height:1.25}
.rm-embed__d{margin:5px 0 0;font-size:.88rem;opacity:.75;line-height:1.45}
/* Tara, 15 July: "Let's make the video only take up 60% of the space".
   The embedded Roadmap lesson sits inside a card next to a checklist, and at full width
   the video was the loudest thing on a page that is meant to be about the list. */
.rm-embed__v{margin-top:12px;aspect-ratio:16/9;border-radius:10px;max-width:60%;overflow:hidden}
.rm-embed__v video,.rm-embed__v iframe{width:100%;height:100%;display:block;border:0}
.rm-embed__f{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}

.rm-mods{display:flex;flex-direction:column;gap:10px}
.rm-mod{background:var(--card,#fff);border:1px solid var(--line);border-radius:14px;padding:4px 14px;overflow:hidden}
.rm-mod>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 0;cursor:pointer}
.rm-mod>summary::-webkit-details-marker{display:none}
.rm-mod-t{font-weight:700;font-size:.96rem;line-height:1.2}
.rm-bar{height:6px;border-radius:99px;background:var(--line-2,#eee);margin-top:7px;overflow:hidden}
.rm-bar>i{display:block;height:100%;background:var(--teal);border-radius:99px}
.rm-count{font-size:.8rem;flex:none}
.rm-note{background:#faf3e2;border-left:3px solid var(--gold,#d6a94e);border-radius:8px;padding:8px 11px;font-size:.84rem;margin:2px 0 10px}
.rm-lessons{display:flex;flex-direction:column;gap:2px;padding-bottom:6px}
.rm-lesson{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:.88rem;color:var(--ink);text-decoration:none}
.rm-lesson:hover{color:var(--teal-d)}
.rm-lesson .rm-circle{width:18px;height:18px;font-size:.58rem}

.rm-bonuses{display:flex;flex-wrap:wrap;gap:8px}
.rm-bonus{display:inline-block;background:var(--sand,#f4efe6);border-radius:999px;padding:7px 14px;font-size:.84rem;color:var(--ink);text-decoration:none;border:1px solid var(--line)}
.rm-bonus:hover{border-color:var(--clay);color:var(--clay)}

/* ===== Garth - AI tour-guide widget (lower-left) ===== */
#garth-root{position:fixed;left:20px;bottom:20px;z-index:9000;font-family:inherit}
.garth-launch{position:relative;width:64px;height:64px;border-radius:50%;border:3px solid #fff;background:var(--sand,#ECE3D6);box-shadow:0 6px 20px rgba(0,0,0,.22);cursor:pointer;padding:0;overflow:hidden;transition:transform .15s}
.garth-launch:hover{transform:translateY(-2px) scale(1.04)}
.garth-launch img{width:100%;height:100%;object-fit:cover;display:block}
.garth-launch-dot{position:absolute;top:4px;right:4px;width:12px;height:12px;border-radius:50%;background:var(--clay,#C4785A);border:2px solid #fff}
.garth-hi{position:absolute;left:74px;bottom:12px;white-space:nowrap;background:#fff;border:1px solid var(--line,#e6e0d6);border-radius:14px;border-bottom-left-radius:2px;padding:8px 12px;font-size:.82rem;font-weight:700;color:var(--ink,#2C2C2C);box-shadow:0 4px 14px rgba(0,0,0,.12);cursor:pointer;animation:garthpop .3s ease}
.garth-hi span{font-weight:400;color:var(--muted,#7a746b);font-size:.76rem}
@keyframes garthpop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.garth-panel{width:340px;max-width:calc(100vw - 32px);height:460px;max-height:calc(100vh - 120px);background:#fff;border:1px solid var(--line,#e6e0d6);border-radius:18px;box-shadow:0 14px 44px rgba(0,0,0,.26);display:flex;flex-direction:column;overflow:hidden;animation:garthpop .2s ease}
.garth-head{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--teal,#1E5F57);color:#fff}
.garth-face{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#fff;border:2px solid rgba(255,255,255,.6);flex:none}
.garth-name{font-weight:800;line-height:1}
.garth-sub{font-size:.74rem;opacity:.85}
.garth-x{margin-left:auto;background:transparent;border:0;color:#fff;font-size:1rem;cursor:pointer;opacity:.8}
.garth-x:hover{opacity:1}
.garth-body{flex:1;overflow-y:auto;padding:14px;background:var(--cream,#FAF6EF);display:flex;flex-direction:column;gap:10px}
.garth-row{display:flex;gap:8px;align-items:flex-start}
.garth-mini{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line,#e6e0d6);background:#fff}
.garth-msg{font-size:.86rem;line-height:1.35;padding:9px 12px;border-radius:14px;max-width:82%}
.garth-msg--g{background:#fff;border:1px solid var(--line,#e6e0d6);border-top-left-radius:3px}
.garth-msg--me{background:var(--teal,#1E5F57);color:#fff;align-self:flex-end;border-top-right-radius:3px}
.garth-link{color:var(--clay-d,#A85F44);font-weight:700;text-decoration:none;white-space:nowrap}
.garth-link:hover{text-decoration:underline}
.garth-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.garth-chip{background:#fff;border:1px solid var(--line,#e6e0d6);border-radius:999px;padding:6px 12px;font-size:.8rem;cursor:pointer;color:var(--ink,#2C2C2C)}
.garth-chip:hover{border-color:var(--teal,#1E5F57);color:var(--teal-d,#13433D)}
.garth-input{display:flex;gap:6px;padding:10px;border-top:1px solid var(--line,#e6e0d6);background:#fff}
.garth-input input{flex:1;border:1px solid var(--line,#e6e0d6);border-radius:999px;padding:9px 14px;font-family:inherit;font-size:.86rem;outline:none}
.garth-input input:focus{border-color:var(--teal,#1E5F57)}
.garth-send{border:0;background:var(--clay,#C4785A);color:#fff;width:38px;border-radius:999px;cursor:pointer;font-size:.9rem;flex:none}
.garth-send:hover{background:var(--clay-d,#A85F44)}
@media(max-width:640px){#garth-root{left:12px;bottom:12px}.garth-panel{width:calc(100vw - 24px)}}

/* ===== Home: auto-populated "next call" banner + wiggle (July 15) ===== */
.banner--call{background:linear-gradient(90deg,var(--clay,#C4785A),var(--clay-d,#A85F44));color:#fff;border:none;border-left:4px solid #fff}
.banner--call b,.banner--call span{color:#fff}
.banner--call .banner__cta{margin-left:auto;color:#fff;font-weight:700;text-decoration:none;white-space:nowrap;font-size:.82rem;opacity:.95}
.banner--call .banner__cta:hover{opacity:1;text-decoration:underline}
@keyframes bbwiggle{0%,86%,100%{transform:rotate(0)}88%{transform:rotate(-1.4deg)}91%{transform:rotate(1.4deg)}94%{transform:rotate(-0.9deg)}97%{transform:rotate(0.6deg)}}
.banner--wiggle{animation:bbwiggle 3.2s ease-in-out infinite;transform-origin:center}

/* ===== Garth first-sign-in welcome + confetti ===== */
.garth-welcome{position:fixed;inset:0;z-index:10000;background:rgba(20,25,28,.55);display:flex;align-items:center;justify-content:center;overflow:hidden;animation:garthpop .25s ease}
.garth-welcome__conf{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.garth-conf{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;opacity:.95;animation-name:garthfall;animation-timing-function:linear;animation-iteration-count:1}
@keyframes garthfall{to{transform:translateY(105vh) rotate(540deg);opacity:.85}}
.garth-welcome__card{position:relative;z-index:2;background:#fff;border-radius:22px;max-width:400px;width:calc(100% - 40px);padding:26px 26px 22px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.garth-welcome__img{width:150px;height:150px;object-fit:contain;margin:-70px auto 4px;display:block;filter:drop-shadow(0 8px 16px rgba(0,0,0,.15))}
.garth-welcome__h{font-family:var(--display);font-size:1.55rem;margin:2px 0 8px}
.garth-welcome__p{color:var(--ink-soft,#54504A);font-size:.94rem;line-height:1.4;margin:0 0 18px}
.garth-welcome__skip{display:block;margin:10px auto 0;background:none;border:0;color:var(--muted,#9a938a);font-size:.8rem;cursor:pointer}

/* ============================================================
   My Target + KPI Reporting (#/plan · BBTARGET)
   ============================================================ */
.tg-page .tg-body{margin-top:16px}
.tg-box{margin-bottom:18px}
.tg-h{font-family:var(--display);font-size:1.18rem;font-weight:700;color:var(--ink,#2C2C2C);margin:2px 0 0}
.tg-flabel{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft,#54504A);font-weight:700;margin-bottom:4px}
.tg-fval{font-family:var(--display);font-size:1.35rem;font-weight:700;color:var(--teal-d,#13433D)}
.tg-field{min-width:0}
.tg-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tg-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:12px 0}
@media(max-width:720px){.tg-grid4{grid-template-columns:repeat(2,1fr)}.tg-grid3{grid-template-columns:1fr}}
/* number inputs */
.tg-nwrap{display:inline-flex;align-items:center;gap:2px;background:var(--cream,#F7F3EE);border:1px solid var(--line-2,#e6ddcf);border-radius:8px;padding:4px 8px}
.tg-nwrap:focus-within{border-color:var(--teal,#1E5F57)}
.tg-num{border:0;background:transparent;font-size:.98rem;font-weight:700;color:var(--ink,#2C2C2C);padding:0;outline:none}
.tg-pre,.tg-suf{color:var(--ink-soft,#54504A);font-weight:700;font-size:.9rem}
.tg-txt{border:1px solid var(--line-2,#e6ddcf);background:var(--cream,#F7F3EE);border-radius:8px;padding:5px 8px;font-size:.9rem;width:100%;outline:none}
.tg-txt:focus{border-color:var(--teal,#1E5F57)}
.tg-notewrap{margin-top:14px}
.tg-notes{width:100%;border:1px solid var(--line-2,#e6ddcf);background:var(--cream,#F7F3EE);border-radius:10px;padding:8px 10px;font-family:inherit;font-size:.9rem;color:var(--ink,#2C2C2C);resize:vertical;outline:none}
.tg-notes:focus{border-color:var(--teal,#1E5F57)}
.tg-notes-ro{font-size:.9rem;color:var(--ink-soft,#54504A);background:var(--cream,#F7F3EE);border-radius:10px;padding:8px 10px}
/* snapshot lock */
.tg-lock{font-size:.78rem;color:var(--ink-soft,#54504A);display:inline-flex;align-items:center;gap:6px}
.tg-unlock{background:none;border:0;color:var(--teal,#1E5F57);font-weight:700;text-decoration:underline;cursor:pointer;font-size:.78rem}
/* MTO grid */
.tg-mto{border:1px solid var(--line-2,#e6ddcf);border-radius:12px;overflow:hidden}
.tg-mto-row{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line-2,#e6ddcf)}
.tg-mto-row:last-child{border-bottom:0}
.tg-mto-head{background:var(--sand,#ECE3D6)}
.tg-mto-head .tg-col{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--ink-soft,#54504A);text-align:center}
.tg-mto-head .tg-tgt{color:var(--teal-d,#13433D)}
.tg-mlabel{font-weight:600;font-size:.92rem;color:var(--ink,#2C2C2C)}
.tg-col{text-align:center}
.tg-tgt-cell .tg-nwrap{border-color:var(--teal,#1E5F57);background:rgba(30,95,87,.06)}
.tg-milestone-note{margin-top:14px;font-size:.86rem;background:rgba(200,169,110,.14);border-left:3px solid var(--gold,#C8A96E);padding:8px 12px;border-radius:0 8px 8px 0;color:var(--ink,#2C2C2C)}
.tg-milestone-note a{color:var(--teal,#1E5F57);font-weight:700}
/* KPI box heads (collapsible) */
.tg-boxhead{display:flex;justify-content:space-between;align-items:center;cursor:pointer;gap:10px}
.tg-caret{font-size:1rem;color:var(--ink-soft,#54504A)}
.tg-viewtoggle{display:inline-flex;gap:0;border:1px solid var(--line-2,#e6ddcf);border-radius:8px;overflow:hidden;margin:14px 0 6px}
.tg-vt{background:var(--cream,#F7F3EE);border:0;padding:6px 14px;font-size:.82rem;font-weight:700;color:var(--ink-soft,#54504A);cursor:pointer}
.tg-vt.on{background:var(--teal,#1E5F57);color:#fff}
.tg-chartwrap{margin:10px 0 6px;overflow-x:auto}
.tg-tablewrap{overflow-x:auto;margin-top:8px}
.tg-table{width:100%;border-collapse:collapse;font-size:.88rem}
.tg-table th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft,#54504A);padding:6px 8px;border-bottom:2px solid var(--line-2,#e6ddcf)}
.tg-table td{padding:7px 8px;border-bottom:1px solid var(--line-2,#e6ddcf);vertical-align:middle}
.tg-x{background:none;border:0;color:var(--muted,#9a938a);cursor:pointer;font-size:.9rem}
.tg-x:hover{color:var(--clay-d,#A85F44)}
.tg-addrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.tg-total{font-size:.84rem;color:var(--ink-soft,#54504A)}
.tg-total b{color:var(--teal-d,#13433D)}
.tg-kpiline{margin-top:10px;font-size:.9rem;color:var(--ink,#2C2C2C)}
.tg-kpiline b{color:var(--teal-d,#13433D)}
.tg-monthpick{margin:8px 0}
/* funnel dashboards */
.tg-funnel{border:1px solid var(--line-2,#e6ddcf);border-radius:12px;padding:14px;margin-top:14px;background:var(--cream,#F7F3EE)}
.tg-funnel-title{font-weight:700;font-size:1rem;max-width:340px}
.tg-dash{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.tg-dash-item{background:#fff;border:1px solid var(--line-2,#e6ddcf);border-radius:10px;padding:8px 12px;min-width:96px;text-align:center}
.tg-dash-v{font-family:var(--display);font-size:1.3rem;font-weight:700;color:var(--teal-d,#13433D)}
.tg-dash-n{font-size:.72rem;color:var(--ink-soft,#54504A);margin-top:1px}
.tg-dash-t{font-size:.68rem;color:var(--muted,#9a938a);margin-top:2px}
.tg-dash-t.tg-hit{color:var(--teal,#1E5F57);font-weight:700}
.tg-examplenote{font-size:.82rem;color:var(--ink-soft,#54504A);background:var(--sand,#ECE3D6);border-radius:8px;padding:8px 12px;margin:10px 0}
/* share to coach */
.tg-sharebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:rgba(196,120,90,.1);border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:.9rem}
.tg-sharebar--lock{background:var(--sand,#ECE3D6);color:var(--ink-soft,#54504A)}

/* ============================================================
   Milestone automation: MTO target chips, worn badges, celebration
   ============================================================ */
.ms-group--mto{border-top:1px dashed var(--line-2,#e6ddcf);margin-top:10px;padding-top:10px}
.ms-group--mto .ms-h a{color:var(--teal,#1E5F57)}
.bb-worn{margin:14px 0;border-left:4px solid var(--gold,#C8A96E)}
.bb-worn-row{display:flex;flex-wrap:wrap;gap:8px}
.bb-worn-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(200,169,110,.16);border:1px solid var(--gold,#C8A96E);border-radius:999px;padding:5px 12px;font-size:.86rem;font-weight:600;color:var(--ink,#2C2C2C)}
.bb-worn-star{filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}
/* celebration overlay */
.bb-cel{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;background:rgba(19,67,61,.42);backdrop-filter:blur(2px);animation:bbcelfade .25s ease}
@keyframes bbcelfade{from{opacity:0}to{opacity:1}}
.bb-cel__conf{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bb-cel-conf{position:absolute;top:-16px;width:9px;height:14px;border-radius:2px;animation:bbcelfall linear forwards}
@keyframes bbcelfall{to{transform:translateY(102vh) rotate(540deg);opacity:.9}}
.bb-cel__card{position:relative;background:var(--cream,#F7F3EE);border-radius:20px;padding:30px 30px 26px;max-width:420px;width:90%;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.bb-cel__badge{font-size:3rem;line-height:1;margin-bottom:6px;animation:bbcelpop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes bbcelpop{from{transform:scale(0) rotate(-20deg)}to{transform:scale(1) rotate(0)}}
.bb-cel__h{font-family:var(--display);font-size:1.5rem;margin:2px 0 8px;color:var(--teal-d,#13433D)}
.bb-cel__p{color:var(--ink-soft,#54504A);font-size:.94rem;line-height:1.45;margin:0 0 18px}

/* ============================================================
   Course Library (standalone XP courses · BBXP)
   ============================================================ */
.tag--xp{background:var(--teal-l,#2E7E73);color:#fff}
.tag--lock{background:var(--sand,#ECE3D6);color:var(--ink-soft,#54504A)}
.xp-course .course__lock{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:100%;color:#fff}
.xp-badge{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.35);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:999px}
.course{position:relative}
.row--active{outline:2px solid var(--teal,#1E5F57);border-radius:10px}
/* XP course thumbnail gradients (on-brand) */
.th-xp1{background:linear-gradient(135deg,#1E5F57,#2E7E73)}
.th-xp2{background:linear-gradient(135deg,#C4785A,#A85F44)}
.th-xp3{background:linear-gradient(135deg,#C8A96E,#A98947)}
.th-xp4{background:linear-gradient(135deg,#2E7E73,#13433D)}
.th-xp5{background:linear-gradient(135deg,#A85F44,#C8A96E)}
.th-xp6{background:linear-gradient(135deg,#13433D,#1E5F57)}
.th-xp7{background:linear-gradient(135deg,#54504A,#2C2C2C)}
/* admin per-student unlock toggles */
.xp-admin-rows{display:flex;flex-direction:column;gap:2px}
.xp-admin-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-2,#e6ddcf)}
.xp-admin-row:last-child{border-bottom:0}
.xp-admin-t{font-weight:600;font-size:.9rem}
.xp-toggle{width:42px;height:24px;border-radius:999px;border:0;background:var(--line-2,#e6ddcf);position:relative;cursor:pointer;transition:background .15s;flex:0 0 auto}
.xp-toggle span{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.xp-toggle.on{background:var(--teal,#1E5F57)}
.xp-toggle.on span{left:20px}
.xp-toggle:disabled{opacity:.55;cursor:not-allowed}

/* ---- Community composer formatting toolbar ---- */
.bbfmt{display:flex;gap:4px;margin-bottom:6px;flex-wrap:wrap}
.bbfmt__b{border:1px solid var(--line,#e6ddcf);background:var(--paper,#fff);border-radius:8px;
  min-width:32px;height:30px;padding:0 8px;cursor:pointer;font-size:.9rem;line-height:1;
  color:var(--ink,#2b2b2b);font-family:inherit;transition:background .12s,border-color .12s}
.bbfmt__b:hover{background:var(--paper-2,#f6f1e7);border-color:var(--teal,#1E5F57)}
.bbfmt__b.is-on{background:var(--teal,#1E5F57);color:#fff;border-color:var(--teal,#1E5F57)}
.bbemoji{display:flex;flex-wrap:wrap;gap:2px;margin-bottom:6px;padding:6px;
  border:1px solid var(--line,#e6ddcf);border-radius:10px;background:var(--paper,#fff)}
.bbemoji span{cursor:pointer;font-size:1.15rem;padding:3px 5px;border-radius:6px}
.bbemoji span:hover{background:var(--paper-2,#f6f1e7)}
/* rendered post/comment lists */
.post__body .post-list,.post__body ul.post-list,.post__body ol.post-list{margin:6px 0 6px 0;padding-left:22px}
.post-list li{margin:2px 0}

/* ---- Community: post tags (composer selector + on-post pills) ---- */
.bbtag{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 2px}
.bbtag__lbl{font-size:.76rem;color:var(--muted);font-weight:600}
.bbtag__b{border:1px solid var(--line,#e6ddcf);background:var(--paper,#fff);border-radius:999px;
  padding:3px 11px;font-size:.78rem;cursor:pointer;color:var(--ink,#2b2b2b);font-family:inherit;transition:all .12s}
.bbtag__b:hover{border-color:var(--teal,#1E5F57)}
.bbtag__b.is-on{background:var(--teal,#1E5F57);color:#fff;border-color:var(--teal,#1E5F57)}
.bbtag__pill{display:inline-block;background:var(--paper-2,#f6f1e7);border:1px solid var(--line,#e6ddcf);
  color:var(--teal-d,#154a43);border-radius:999px;padding:1px 9px;font-size:.72rem;font-weight:600;cursor:pointer}
.bbtag__pill:hover{background:var(--teal,#1E5F57);color:#fff;border-color:var(--teal,#1E5F57)}
/* clickable category filter row */
.bbcat{border:1px solid var(--line,#e6ddcf);background:var(--paper,#fff);border-radius:999px;
  padding:3px 12px;font-size:.78rem;cursor:pointer;color:var(--ink,#2b2b2b);font-family:inherit;transition:all .12s}
.bbcat:hover{border-color:var(--teal,#1E5F57)}
.bbcat.is-on{background:var(--teal,#1E5F57);color:#fff;border-color:var(--teal,#1E5F57)}

/* ---- Community: pinned posts carousel + pop-up ---- */
.pincar-wrap{margin:0 0 14px}
.pincar-h{font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.pincar{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x mandatory}
.pincard{flex:0 0 230px;scroll-snap-align:start;background:var(--paper,#fff);border:1px solid var(--gold,#c8a24a);
  border-left:4px solid var(--gold-d,#a9863a);border-radius:12px;padding:11px 13px;cursor:pointer;transition:box-shadow .12s,transform .12s}
.pincard:hover{box-shadow:var(--shadow,0 6px 20px rgba(0,0,0,.12));transform:translateY(-1px)}
.pincard__h{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.pincard__nm{font-weight:700;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pincard__b{font-size:.82rem;color:var(--ink,#2b2b2b);line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pincard__more{margin-top:7px;font-size:.74rem;font-weight:700;color:var(--clay-d,#a8542e)}
.bb-modal{position:fixed;inset:0;z-index:200;background:rgba(20,20,20,.55);display:flex;align-items:flex-start;
  justify-content:center;padding:6vh 16px 40px;overflow-y:auto}
.bb-modal__box{position:relative;width:100%;max-width:640px}
.bb-modal__x{position:absolute;top:-40px;right:0;background:rgba(255,255,255,.9);border:0;border-radius:50%;
  width:34px;height:34px;font-size:1rem;cursor:pointer;box-shadow:var(--shadow,0 4px 14px rgba(0,0,0,.2))}

/* ---- Content editor field labels ---- */
.edlbl{display:block;font-size:.76rem;font-weight:700;letter-spacing:.02em;color:var(--muted,#6b6257);margin:14px 0 4px}

/* ============================================================
   Community: mobile adaptability
   (the rest of the site's mobile pass is shelved until we're done)
   ============================================================ */
@media(max-width:820px){
  /* forum: leaderboard + pinned stack above the feed; the side pins are replaced
     by a collapsed strip at the top of the feed (see .forum-pins-mobile) */
  .forumgrid{grid-template-columns:1fr!important}
  .forum-side{position:static!important}
  .forum-pins-side{display:none!important}
  .forum-pins-mobile{display:block!important}
}
@media(max-width:620px){
  /* podcast card: title + Listen wrap instead of overflowing */
  .podgreen .between{flex-wrap:wrap;gap:8px}
  .podgreen .between>a{flex:none}
  /* pinned carousel cards + pop-up fit a phone screen */
  .pincard{flex:0 0 78vw}
  .bb-modal{padding:4vh 10px 30px}
  /* member map stays tappable, not too tall on a phone */
  .memmap-svg,.podgreen svg{max-height:280px}
  /* forum header (name + tier tag) wraps cleanly */
  .forumgrid .between{flex-wrap:wrap}
}

/* ============================================================
   Site footer (all pages): menu tabs + social icons + legal links
   ============================================================ */
.site-foot{border-top:1px solid var(--line,#e9e2d5);margin-top:44px;padding:30px 0 42px;background:var(--card,#fff)}
.site-foot__in{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.site-foot__brand{font-family:var(--display,'Cormorant Garamond',serif);font-size:1.02rem;font-weight:700;color:var(--ink,#2c2c2c)}
.site-foot__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.site-foot__nav a{font-size:.9rem;font-weight:600;color:var(--ink,#2c2c2c);text-decoration:none}
.site-foot__nav a:hover{color:var(--teal,#1e5f57)}
.site-foot__social{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.site-foot__social a{color:var(--ink-soft,#6b6257);display:inline-flex;transition:color .15s}
.site-foot__social a:hover{color:var(--clay-d,#a85f44)}
.site-foot__social svg{width:22px;height:22px;display:block}
.site-foot__legal{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.site-foot__legal a{font-size:.82rem;color:var(--ink-soft,#6b6257);text-decoration:none}
.site-foot__legal a:hover{color:var(--teal,#1e5f57);text-decoration:underline}
.site-foot__copy{font-size:.78rem;color:var(--muted,#9a9086)}
@media(max-width:620px){.site-foot__nav{gap:14px}.site-foot__nav a{font-size:.86rem}.site-foot__legal{gap:14px}}

/* ---- the paintbrush builder -------------------------------------------------
   Staff-only. A small brush sits over the page Tara is looking at, and opens the
   same section builder she uses in the content editor. Members never see either. */
.brushfab{position:fixed;right:18px;bottom:18px;z-index:70;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--clay);background:var(--card);box-shadow:0 6px 18px rgba(0,0,0,.16);
  font-size:1.25rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.brushfab:hover{background:var(--paper-2);transform:translateY(-1px)}
.brushfab:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.brushwrap{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center}
.brushback{position:absolute;inset:0;background:rgba(24,22,20,.42)}
.brushbox{position:relative;width:min(560px,94vw);max-height:82vh;overflow-y:auto;background:var(--card);
  border:1px solid var(--clay);border-radius:14px 14px 0 0;padding:16px 16px 20px;box-shadow:0 -8px 30px rgba(0,0,0,.2)}
@media(min-width:700px){.brushwrap{align-items:center}.brushbox{border-radius:14px}}

/* ---- the member menu behind the avatar -------------------------------------- */
.mem{position:relative;display:flex}
.mem__pop{position:absolute;top:calc(100% + 8px);right:0;min-width:212px;z-index:80;
  background:var(--card);border:1px solid var(--clay);border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.16);padding:6px;display:none}
.mem__pop.on{display:block}
.mem__who{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;
  display:flex;flex-direction:column;gap:2px;line-height:1.3}
.mem__who b{font-size:.88rem}
.mem__who .muted{font-size:.76rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mem__i{display:block;width:100%;text-align:left;padding:9px 10px;border:0;background:none;
  border-radius:8px;font:inherit;font-size:.86rem;color:inherit;text-decoration:none;cursor:pointer}
.mem__i:hover{background:var(--paper-2)}

/* ---- Latest podcast and Upcoming calls, side by side ------------------------
   Both boxes sit at the top of their column under a matching section header.
   Left them to their own padding and they finished at different heights, which
   pushed Birthdays and the ascension card out of line with each other. */
.homepair{min-height:126px}
.homepair--card > .card{height:100%;display:flex;flex-direction:column;justify-content:center}
@media(max-width:820px){.homepair{min-height:0}}

/* the "Module 1" / "Bonus #3" line Tara asked for above each card title */
.course__n{font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--clay-d,#A85F44);margin-bottom:2px}
/* the Bonuses sub-heading inside each pillar sits tighter than a top-level section */
.sec--sub{margin-top:10px;padding-top:0;border-top:0;opacity:.9}

/* ---- the Library page -------------------------------------------------------
   The reading list is Tara's own HTML from the lesson, so this styles what is
   already there rather than restructuring it: her bold headings become section
   titles, her lists become two columns on a wide screen. */
.libpage{font-size:.92rem;line-height:1.6}
/* Only a div that is NOTHING BUT one <strong> is a section name. That decision is made
   in libMarkHeadings, which can read the whole div; CSS cannot, because the <br>s in a
   heading div stop the <strong> being :only-child.

   This used to be `.libpage div>strong`, which also matched bold inside a sentence and
   tore Tara's intro into blocks, leaving the full stop after "Shortform" alone on a line
   of its own. That is what she meant by "the formatting is broken". */
/* A post arrived at from a notification. Tara: "when clicked it doesn't open the post in
   question". Landing on the right page is not enough in a feed of thirty posts, so the one
   she was told about is marked for a couple of seconds and then goes back to normal.
   Nothing about the post changes, only how it is lit. */
.post--found{box-shadow:0 0 0 2px var(--clay,#C77B54);border-radius:12px;
  transition:box-shadow .4s ease}
@media(prefers-reduced-motion:reduce){ .post--found{transition:none} }
.libsec>strong{display:block;font-size:1.02rem;color:var(--clay-d,#A85F44);
  letter-spacing:.02em;margin:36px 0 10px}
/* Every heading of hers ends <strong>Name</strong><br><br>, two blank lines that sat
   between the heading and the books it introduces. Measured live, that left 48px above
   each heading and 49px below: the heading floated exactly halfway between the list it
   belongs to and the one before it, and read as attached to neither. The spacing is set
   by the margin above instead, 36 above and 10 below, so a heading sits with its own
   books. Only inside a heading; her <br>s anywhere else are her paragraph breaks. */
.libpage .libsec>br{display:none}
/* bold inside a sentence stays inside the sentence */
.libpage div:not(.libsec)>strong{display:inline;font-size:inherit;color:inherit;margin:0}
.libpage ul{list-style:none;margin:0 0 6px;padding:0;
  display:grid;grid-template-columns:1fr;gap:2px}
@media(min-width:760px){.libpage ul{grid-template-columns:1fr 1fr;column-gap:26px}}
.libpage li{padding:7px 0;border-top:1px solid rgba(44,44,44,.07)}
.libpage li a{color:var(--teal,#1E5F57);text-decoration:underline;font-weight:600}
.libpage li em,.libpage li strong{font-style:normal}
.libpage li strong em,.libpage li em strong{color:var(--clay-d,#A85F44)}

/* ---- finishing an action guide, and the progress it feeds ---------------------- */
.agdone{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin-top:18px;padding:14px 16px;border:1px solid var(--clay);border-radius:12px;
  background:var(--paper-2)}
.agdone--on{border-color:var(--teal);background:rgba(30,95,87,.06)}
.sbhead{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:6px}
.sbprog{display:flex;gap:12px;align-items:center;flex:none}
.sbdial{position:relative;width:64px;height:64px;flex:none}
.sbdial b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:.82rem;color:var(--teal,#1E5F57)}
.sbtally{display:inline-block;margin-right:10px;font-size:.72rem;font-weight:700;
  color:var(--teal,#1E5F57);background:rgba(30,95,87,.09);border-radius:999px;padding:1px 8px}

/* ============================================================
   Community · July 15 doc
   "Badges earned or milestone ribbons they're wearing show up next to their name"
   "Make the unread notification icon more obvious"
   ============================================================ */

/* the earned badge beside a name in the community */
.bb-badgechip{display:inline-block;vertical-align:-3px;margin-left:5px;width:16px;height:16px;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}

/* unread notifications. Three signals rather than one small dot: the bell lifts and
   tilts, the count is a larger high-contrast pill, and a ring breathes behind it. */
@keyframes bbbellring{0%,88%,100%{transform:rotate(0)}90%{transform:rotate(-11deg)}93%{transform:rotate(9deg)}96%{transform:rotate(-5deg)}}
@keyframes bbbellpulse{0%{box-shadow:0 0 0 0 rgba(196,120,90,.55)}70%{box-shadow:0 0 0 9px rgba(196,120,90,0)}100%{box-shadow:0 0 0 0 rgba(196,120,90,0)}}
.bell--un{animation:bbbellring 4s ease-in-out infinite;transform-origin:50% 12%;filter:drop-shadow(0 2px 4px rgba(196,120,90,.35))}
.bell__dot--un{min-width:20px;height:20px;line-height:20px;border-radius:10px;font-size:.68rem;
  background:var(--clay-d,#A85F44);border:2px solid var(--paper,#F7F3EE);
  animation:bbbellpulse 2.4s ease-out infinite}
@media (prefers-reduced-motion:reduce){
  .bell--un{animation:none}
  .bell__dot--un{animation:none}
}