/*================================================================
  GLOBAL — shared across ALL pages (nav, drawer, tab-bar, tokens)
  Do not duplicate this section when adding new pages below.
================================================================*/

/*──────────────────────────────────────────────
  RESET & TOKENS
──────────────────────────────────────────────*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* ── Brand palette (Recallers Launch Design System) ──
     Existing tokens below (--navy, --blue, etc.) are now mapped onto
     this palette so the rest of the file — which references those
     names throughout — picks up the brand colors automatically. These
     named tokens are the actual source of truth; keep them as the
     first thing to change if the palette ever moves again. */
  --grape:#391e5d;
  --grape-deep:#2a1546;
  --grape-soft:#efe7f6;
  --zap:#9fc658;
  --zap-deep:#7a9e3f;
  --sky:#336ca9;
  --sky-deep:#285585;
  --berry:#e5327e;
  --logo-blue:#1a75bc;
  --cloud:#f7f5fb;
  --paper:#fff;
  --ink:#2e2a33;
  --muted:#6b6675;
  /* DogsThat endorsement brand — ONLY for "brought to you by" contexts,
     never blended into the rest of this palette. */
  --dt-orange:#f58220;
  --dt-navy:#1f3a5f;

  --navy:#391e5d;
  --blue:#336ca9;
  --blue-hover:#285585;
  --blue-light:#5f92c4;
  --blue-pale:#e7eff6;
  --teal:#00b8cc;
  --red:#e5141d;
  --orange:#f25c03;
  --amber:#f9bf15;
  --green-done:#7a9e3f;
  --green-card:#3d9e3b;
  --teal-card:#007fcd;
  --cyan-card:#09319c;
  --purple:#704aa3;
  --indigo:#210985;
  --gray-bg:#f7f5fb;
  --gray-line:#e7e1f0;
  --gray-mid:#8f899b;
  --gray-dark:#4a4552;
  --text:#2e2a33;
  --white:#fff;
  --font-h:'Poppins',sans-serif;
  --font-b:'Inter',sans-serif;
  --r:10px;
  --r-sm:7px;
  --sh:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
  --sh-md:0 4px 14px rgba(0,0,0,.12);
}
html{font-size:17px;scroll-behavior:smooth;max-width:100%;overflow-x:hidden}
body{font-family:var(--font-b);background:var(--white);color:var(--text);min-height:100vh;max-width:100%;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:var(--font-b);border:none;background:none}
svg{display:block}
img{display:block;max-width:100%}
body.recallers-no-header-footer #masterhead,
body.recallers-no-header-footer footer.site-footer {
  display: none !important;
}
#profile-card .bb-card-footer {
    display: none!important;
}
body.topic-archive #page :not(article).page {
    padding: 0;
}
body.topic-archive div#recallers-discussion-page .main {
    gap: 0!important;
}

/* #masthead (header.php) is BuddyBoss's own native header, always hidden
   via inline style="display:none" — #masterhead (recallers-nav.php) is the
   real, visible header everywhere on this site. Hiding it with an inline
   style rather than removing it leaves its full native markup (logo, nav,
   search, notifications...) sitting in the DOM, unstyled and unclamped.
   That's invisible normally, but jQuery's .height()/.outerHeight() shim
   deliberately un-hides display:none elements just long enough to measure
   their natural content height — and BuddyBoss's own bundled main.js reads
   $('#masthead').height() in several places (comment-scroll offset,
   sticky-header math, mobile menu sizing) assuming it's the small, real
   sticky header. Against this theme's actual markup that "natural height"
   comes back at ~2200px, so e.g. ajax_comment()'s post-submit scroll-to-
   new-comment ends up subtracting ~2200px from a legitimate offset and
   lands back near the top of the page instead. Pinning the box to 0 here
   makes every one of those reads see the harmless number they expect,
   without touching BuddyBoss's vendored JS. */
#masthead{height:0!important;min-height:0!important;overflow:hidden!important}
.sfwd-topic footer.entry-footer, .sfwd-lessons footer.entry-footer {
    display: none!important;
}
li#xprofile-personal-li, li#forums-personal-li, li#activity-personal-li {
    display: none!important;
}
body.my-account.forums div#cover-image-container {
    display: none!Important;
}
body.my-account.forums nav#object-nav {
    display: none!Important;
}
.bb-popup-card {
    display: none!important;
}
a.bbp-author-link {pointer-events: none!Important;}
.settings-header a.button, .profile-header a.button {
    display: none!Important;
}

.bbp-reply-form .bbp-form>legend #bbp-reply-exerpt.show-empty {
    padding: 0!important;
}

#bbpress-forums .bbp-reply-form.bb-modal fieldset.bbp-form>legend {
    padding: 20px 25px!important;
}

/*──────────────────────────────────────────────
  NAV — TWO BAR LAYOUT
──────────────────────────────────────────────*/

/* ── Bar 1: slim black utility bar ── */
.topbar{
  position:sticky;top:0;z-index:201;
  background:var(--grape);
  height:42px;
  display:flex;align-items:center;justify-content:flex-end;
  padding:0 24px;gap:6px;
}
.topbar-icon{
  background:none!important;border:none;cursor:pointer;
  color:rgba(255,255,255,.82)!important;
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  transition:background .14s,color .14s;
}
.topbar-icon:hover{background:rgba(255,255,255,.12)!important;color:#fff!important}

/* TOPBAR — bookmark (Simple:Favorites)
   functions.php's sy_bookmark_btn() still fires on wp_footer and outputs
   <div class="bookmark-btn-container hidden">...</div> — that "hidden"
   class was never backed by an actual display:none rule anywhere in this
   theme, which is why it was rendering unstyled/misplaced. Left as-is
   (not edited) and suppressed here instead, so the version wired
   directly into .topbar below (recallers-nav.php) is the only one that
   shows. */
.bookmark-btn-container.hidden{display:none!important}

/* Unconditional version: hides every .bookmark-btn-container outright,
   regardless of whether the "hidden" class above is present on it. This
   makes the scoped rule above redundant (kept anyway rather than
   removed, since it's already correct and harmless) — if
   sy_bookmark_btn() ever stops adding that class, this rule still
   suppresses the container on its own. */
.bookmark-btn-container{display:none!important}

.topbar-bookmark-wrap{padding:0}
.topbar-bookmark-wrap .simplefavorite-button{
  background:none;border:none;padding:0;margin:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;color:inherit;
}
.topbar-bookmark-wrap .simplefavorite-button i{font-size:22px;line-height:1;color:inherit}
/* Simple:Favorites swaps the BuddyBoss icon from the outline variant
   (bb-icon-l) to the filled one (bb-icon-f) once bookmarked — give the
   filled state a visible accent color rather than just "same icon,
   different icon-font glyph". Verify this class swap is actually what
   fires once the button can be tested live; adjust if the plugin signals
   the bookmarked state differently (e.g. a class on the button itself). */
.topbar-bookmark-wrap .simplefavorite-button i.bb-icon-f{color:#fff}
.topbar-avatar{
  width:34px;height:34px;border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(255,255,255,.35);
  margin-left:2px;cursor:pointer;
}

/* ── Bar 2: white main nav ── */
.mainnav{
  position:sticky;top:42px;z-index:200;
  background:#fff;
  border-bottom:1px solid #e8eaed;
  height:72px;
  display:flex;align-items:center;
  padding:0 28px;gap:0;
}

/* Logo */
.logo{
  display:flex;align-items:center;
  flex-shrink:0;margin-right:44px;
  text-decoration:none;
  height:100%;
  max-width:220px;
  overflow:hidden;
}
.logo-img{
  height:46px;
  max-height:70%;
  max-width:100%;
  width:auto;
  object-fit:contain;
  display:block;
}

/* Nav links */
.nav-links{
  display:flex;list-style:none;gap:0;flex:1;
  height:100%;align-items:stretch;margin:0;
}
.nav-item{display:flex;align-items:stretch;position:relative}
.nav-links a.nav-link{
  display:flex;align-items:center;gap:4px;
  font-family:var(--font-b);font-size:.88rem;font-weight:700;
  color:var(--text);padding:0 18px;
  border-bottom:3px solid transparent;
  transition:color .14s,border-color .14s;
  white-space:nowrap;
}
.nav-links a.nav-link:hover{color:#336ca9}
.nav-links a.nav-link.active{
  color:#336ca9;font-weight:700;
  border-bottom:3px solid #336ca9;
}

/* Boxed chevron — matches the bordered-square dropdown icon style */
.chev-box{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:4px;
  background:transparent;flex-shrink:0;
  transition:transform .2s,border-color .14s,background .14s;
}
.nav-training .chev-box svg{stroke:#336ca9;}
.chev-box svg{width:15px;height:15px;display:block}
.nav-item:hover .chev-box svg{stroke:#336ca9;}
.nav-item.open .chev-box{transform:rotate(180deg);}
.nav-item.open .chev-box svg{stroke:#336ca9;}
.nav-item.open > a.nav-link{
    color: #336ca9;
}

/* Dropdown panel */
.nav-dropdown{
  position:absolute;top:100%;left:0;
  background:#fff;border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.16),0 2px 8px rgba(0,0,0,.08);
  min-width:240px;
  padding:8px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s,transform .16s,visibility .16s;
  z-index:300;
  margin-top:1px;
}
.nav-item.open .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dd-link{
  display:flex;align-items:center;gap:11px;
  padding:9px 11px;border-radius:7px;
  font-size:.8rem;font-weight:600;color:#333;
  transition:background .12s,color .12s;
}
.dd-link:hover{background:#f0f5ff;color:#336ca9}
.dd-icon{
  width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;background:#e7eff6;
}
.dd-icon svg{width:16px;height:16px}
.dd-text{display:flex;flex-direction:column;line-height:1.3}
.dd-text small{font-size:.68rem;font-weight:400;color:#8f899b}

/* Non-clickable group heading above a set of dd-links — set via a
   "menu-heading" CSS Class on a child menu item (Appearance > Menus).
   See class-recallers-nav-walker.php, Recallers_Nav_Walker::start_el(). */
.dd-heading{
  padding:10px 11px 4px;
  font-size:.68rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#a39cb0;
  white-space:nowrap;
}
.dd-heading:not(:first-child){
  margin-top:4px;border-top:1px solid #f0eef5;
}

/* Divider between links and right side */
.nav-divider{flex:1}

/* Right cluster */
.nav-right{
  display:flex;align-items:center;gap:10px;flex-shrink:0;
}

/* Training widget — dog thumb + text + chevrons, now a dropdown trigger */
.nav-training-wrap{position:relative;display:flex;align-items:center;gap:0px}
.nav-training{
  display:flex;align-items:center;gap:9px;
  cursor:pointer;padding:6px 10px;
  border-radius:8px;
  transition:background .14s;
  text-decoration:none;
  background:none;border:none;
}
.nav-training:hover,.nav-training-wrap.open .nav-training{background:#f7f5fb}

/* Force-picker: owns dogs, none active. Tinted so the "Choose your training
   dog" state reads as needing action rather than as a normal selection —
   otherwise the empty state is completely silent. */
.nav-training-wrap.needs-picker .nav-training{background:#fff8ec;box-shadow:inset 0 0 0 1.5px #f0d9b5}
.nav-training-wrap.needs-picker .t-label{color:#7a5620}
.nav-training-wrap.needs-picker .nav-dog-thumb{border-color:#f0d9b5}

/* One-shot attention pulse, added by JS only when the student has just
   archived their active dog and been scrolled back up here — so the widget
   they now have to act on isn't just quietly sitting open. */
@keyframes recallers-picker-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(240,133,2,0)}
  50%{box-shadow:0 0 0 6px rgba(240,133,2,.28)}
}
.nav-training-wrap.pulse .nav-training{
  border-radius:8px;
  animation:recallers-picker-pulse 1.3s ease-in-out 2;
}
@media(prefers-reduced-motion:reduce){
  .nav-training-wrap.pulse .nav-training{animation:none;box-shadow:0 0 0 4px rgba(240,133,2,.3)}
}
.drawer-dog-switch.needs-picker{background:#fff8ec;box-shadow:inset 0 0 0 1.5px #f0d9b5}
.drawer-dog-switch.needs-picker .drawer-dog-name{color:#7a5620}

.nav-dog-thumb{
  width:44px;height:44px;border-radius:50%;
  object-fit:cover;
  border:2.5px solid #dde1e7;
  flex-shrink:0;
}
/*──────────────────────────────────────────────
  Dog switcher: "switching…" spinner overlay
  Sits on top of the active dog's thumbnail (desktop nav widget AND mobile
  drawer button — same markup pattern in both, see template-parts/
  dog-switcher.php and recallers-nav.php) while switchActiveDog()
  (recallers-main.js) is persisting the pick server-side and about to
  reload the page. That round-trip can take a moment, so this is the only
  feedback the student gets that their tap registered. Hidden by default;
  JS toggles ".is-switching-dog" on the wrap/button to reveal it.
──────────────────────────────────────────────*/
.nav-dog-thumb-wrap,.drawer-dog-thumb-wrap{position:relative;width:44px;height:44px;flex-shrink:0}
.nav-dog-thumb-wrap .nav-dog-thumb,.drawer-dog-thumb-wrap img{width:100%;height:100%}
.recallers-avatar-spinner{
  display:none;position:absolute;inset:0;border-radius:50%;
  align-items:center;justify-content:center;
  background:rgba(20,22,28,.45);
}
.recallers-avatar-spinner::after{
  content:'';width:18px;height:18px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:recallers-btn-spin .7s linear infinite;
}
.nav-training-wrap.is-switching-dog .recallers-avatar-spinner,
.drawer-dog-switch.is-switching-dog .recallers-avatar-spinner{display:flex}
.nav-training-wrap.is-switching-dog .nav-training{cursor:default;opacity:.85;pointer-events:none}
.nav-training-wrap.is-switching-dog .chev-arrow-box{opacity:.5;pointer-events:none}
.drawer-dog-switch.is-switching-dog{cursor:default;opacity:.85;pointer-events:none}
.nav-training-text{display:flex;flex-direction:column;line-height:1.25;min-width:0;text-align:left}
.t-label{
  font-family:var(--font-b);font-size:.85rem;font-weight:700;
  color:#336ca9;white-space:nowrap;
}
.t-sub{
  font-size:.75rem;font-weight:600;
  color:#a7a7a7;white-space:nowrap;padding-top: 2px;
}
.nav-training-wrap.open .nav-training .chev-box{
  transform:rotate(180deg);border-color:#336ca9;background:#f0f5ff;
}
.chev-arrow-box{
  display:inline-flex;align-items:center;justify-content:center;
  width:25px;height:25px;
  border-radius:4px;
  background:#fff;flex-shrink:0;cursor:pointer;
  transition:border-color .14s,background .14s;
}
.chev-arrow-box:hover{border-color:#336ca9;background:#f0f5ff}
.chev-arrow-box svg{width:25px;height:25px}

/* Dog switcher dropdown (under Training with This!) */
.dog-dropdown{
  position:absolute;top:100%;right:0;
  background:#fff;border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.16),0 2px 8px rgba(0,0,0,.08);
  min-width:256px;
  padding:14px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s,transform .16s,visibility .16s;
  z-index:300;margin-top:8px;
}
.nav-training-wrap.open .dog-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dog-dd-title{
  font-family:var(--font-h);font-weight:600;font-size:.82rem;
  color:var(--text);margin-bottom:2px;padding:0 4px;
}
.dog-dd-sub{font-size:.68rem;color:#8f899b;margin-bottom:10px;padding:0 4px}
.dog-dd-row{
  display:flex;align-items:center;gap:11px;
  padding:9px 8px;border-radius:9px;
  cursor:pointer;transition:background .12s;
}
.dog-dd-row:hover{background:#f7f5fb}
.dog-dd-row.current{background:#e7eff6}
.dog-dd-thumb{
  width:42px;height:42px;border-radius:50%;object-fit:cover;
  border:2px solid #dde1e7;flex-shrink:0;
}
.dog-dd-info{flex:1;min-width:0}
.dog-dd-name{font-family:var(--font-h);font-weight:600;font-size:.8rem;color:var(--text)}
.dog-dd-phase{font-size:.68rem;font-weight:700;color:#336ca9}
.dog-dd-check{color:#336ca9;flex-shrink:0}
.dog-dd-divider{height:1px;background:#e8eaed;margin:8px 2px}
.dog-dd-addnew{
  display:flex;align-items:center;gap:9px;
  padding:9px 8px;border-radius:9px;
  font-size:.78rem;font-weight:700;color:#336ca9;
  text-decoration:none;
  cursor:pointer;transition:background .12s;
}
.dog-dd-addnew:hover{background:#f0f5ff}
.dog-dd-addicon{
  width:26px;height:26px;border-radius:50%;
  border:2px solid #336ca9;
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;flex-shrink:0;
}

/* Nav separator line */
.nav-sep{
  width:1px;height:32px;
  background:#e7e1f0;margin:0 4px;
  flex-shrink:0;
}

/* Person avatar (Susan) */
.nav-user-avatar{
  width:42px;height:42px;border-radius:50%;
  object-fit:cover;
  border:2px solid #dde1e7;
  cursor:pointer;flex-shrink:0;
  transition:border-color .14s;
}
.nav-user-avatar:hover{border-color:#336ca9}

/* Trophy icon badge */
.nav-trophy-badge{
  width:40px;height:40px;border-radius:50%;
  background:#c0392b!important;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
  transition:background .14s;
}
.nav-trophy-badge:hover{background:transparent!important}
/* Earned variant — replaces the flat trophy icon with the student's actual
   top badge chip (.badge-chip, see recallers_top_badge_chip_html()) once
   they have one. No background color of its own. */
.nav-trophy-badge--earned{background:none!important}

/*──────────────────────────────────────────────
  TOP BADGE CHIP (Coach/Team/Alumni/Rookie — Memberium-tag-driven)
──────────────────────────────────────────────
  The single component recallers_top_badge_chip_html() builds, shared by
  the header (inside .nav-trophy-badge--earned above), lesson/topic
  comments, forum replies, Coach Queue's Student Status column and Student
  Snapshot's profile pill — one place to fix or extend instead of five.

  Round, same shape and construction as the milestone hex badge
  (.hex-badge): a fixed viewBox="0 0 40 40" SVG — the coordinates inside
  never change, so every size/marker override below just resizes the whole
  element, exactly like .hex-badge-sm does for the milestone badge. A
  filled circle in the badge's own colour (Badge::$color, via
  dogsthat_get_badge_color()), with the uploaded artwork inset well inside
  it (not covering it) via preserveAspectRatio="xMidYMid meet" — see
  recallers_top_badge_chip_html(), which draws the circle, the inset
  artwork, and the mark pill below. The size the image is fetched at
  matters too — see Badge::IMAGE_SIZE, which exists because WordPress's
  built-in `thumbnail` hard-crops to a square. */
.badge-chip{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle}
.badge-chip svg{display:block}
.badge-chip--md{width:40px;height:40px}
.badge-chip--md svg{width:40px;height:40px}
.badge-chip--sm{width:36px;height:36px}
.badge-chip--sm svg{width:36px;height:36px}

/* Mark pill — the badge's own short label: a live membership year for
   Alumni (coloured to Badge::$membership_year_color, its own "Indicator
   colour" setting), a fixed letter ("C"/"T") for badges named Coach/Team
   (coloured to the badge's general Badge::$color, since there's no
   separate letter-colour field), or no pill at all for a badge like
   Rookie that carries neither — see dogsthat_get_badge_marker_text() /
   dogsthat_get_badge_marker_color(). White ring via box-shadow, same
   construction as the milestone hex badge's .hex-badge-num, so the two
   components read as one family sitting side by side in the header.
   `background` here is only a backstop for a badge with no colour
   configured yet; recallers_top_badge_chip_html() sets an inline style
   with this badge's own colour on top of it. */
.badge-chip-num{
  position:absolute;bottom:0;right:-2px;
  width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#2557d6;color:#fff;
  font-family:var(--font-b);font-weight:800;font-size:.6rem;line-height:1;
  box-shadow:0 0 0 2px #fff;
}
.badge-chip--sm .badge-chip-num{width:14px;height:14px;font-size:.52rem;right:-4px}

/* Wrapper around the trophy + hex badges — lets recallers-main.js move
   both as a single unit into the dashboard greeting row on mobile,
   instead of relocating them separately. Gap matches .nav-right's own
   gap so the desktop spacing between the two badges is unchanged now
   that they're one nested flex item instead of two direct children of
   .nav-right. */
.user-badges{display:flex;align-items:center;gap:5px;flex-shrink:0}

/* Milestone hexagon (rightmost header badge) — plain "M" mark until the
   student earns their first milestone, then the milestone's own colour +
   icon + number. `.nav-hex` is a marker class on a .hex-badge.hex-badge-sm
   (see .hex-badge-sm in the dashboard section for what it inherits), the
   same convention .ss-hex / .mj-dog-hex / .cmt-hex follow; the markup for
   all of them comes from recallers_milestone_hex_badge_html(). Sized up
   from the shared 34x34 to the header's 40x40, and clickable unlike the
   read-only ones elsewhere. */
.nav-hex.hex-badge-sm{width:40px;height:40px;cursor:pointer}
.nav-hex.hex-badge-sm svg{width:40px;height:40px}
.nav-hex.hex-badge-sm .hex-badge-num{width:16px;height:16px;font-size:.6rem;right:-6px;bottom: 2px;}

/* Mobile-only quick actions (bookmark/search/notifications) that stand
   in for the trophy/hex badges in the main nav at ≤760px — see the
   "nav-mobile-icons" markup note in recallers-nav.php. Hidden on
   desktop, where the topbar (.topbar) already covers these actions. */
.nav-mobile-icons{display:none;align-items:center;gap:2px;flex-shrink:0}
.nav-mobile-icon{
  background:none;border:none;cursor:pointer;
  color:var(--gray-dark);
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  position:relative;flex-shrink:0;
  transition:background .14s,color .14s;
}
.nav-mobile-icon:hover,.nav-mobile-icon:active{background:#f7f5fb;color:var(--text)}

/* Bookmark — same Simple:Favorites widget as .topbar-bookmark-wrap,
   just re-colored for a white background instead of the topbar's
   black one (dark icon by default, brand blue once bookmarked). */
.nav-mobile-bookmark-wrap{padding:0}
.nav-mobile-bookmark-wrap .simplefavorite-button{
  background:none;border:none;padding:0;margin:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;color:var(--gray-dark);
}
.nav-mobile-bookmark-wrap .simplefavorite-button i{font-size:20px;line-height:1;color:inherit}
.nav-mobile-bookmark-wrap .simplefavorite-button i.bb-icon-f{color:var(--blue)}

/* Notification badge — same shape/position as .topbar-badge, ring
   flipped from black to white to match the light nav background. */
.nav-mobile-badge{
  position:absolute;top:2px;right:2px;
  min-width:15px;height:15px;padding:0 3px;
  background:#e53935;color:#fff;
  border-radius:999px;
  font-size:.62rem;font-weight:800;line-height:15px;text-align:center;
  box-shadow:0 0 0 2px #fff;
}

/*──────────────────────────────────────────────
  MOBILE APP SHELL — hamburger, drawer, tab bar
  (hidden on desktop; activated at ≤760px)
──────────────────────────────────────────────*/

/* Hamburger trigger button */
.hamburger-btn{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;
  gap:4px;
  width:38px;height:38px;
  border-radius:8px;
  background:none;border:none;cursor:pointer;
  flex-shrink:0;
  transition:background .14s;
}
.hamburger-btn:hover{background:#f7f5fb}
.hamburger-btn span{
  display:block;width:19px;height:2px;border-radius:2px;
  background:var(--text);transition:transform .2s,opacity .2s;
}
.hamburger-btn.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger-btn.is-open span:nth-child(2){opacity:0}
.hamburger-btn.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Scrim behind the drawer */
.drawer-scrim{
  position:fixed;inset:0;z-index:399;
  background:rgba(15,18,30,.45);
  opacity:0;visibility:hidden;
  transition:opacity .25s;
}
.drawer-scrim.is-open{opacity:1;visibility:visible}

/* Slide-out drawer */
.drawer{
  position:fixed;top:0;left:0;height:100%;
  width:84%;max-width:340px;
  background:#fff;z-index:400;
  box-shadow:8px 0 30px rgba(0,0,0,.18);
  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.drawer.is-open{transform:translateX(0)}
.drawer-body{
  position:relative;
  flex:1;
  overflow-y:auto;
}

.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 18px 16px;
  border-bottom:1px solid var(--gray-line);
  flex-shrink:0;
}
.drawer-user{display:flex;align-items:center;gap:11px}
.drawer-user img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--gray-line)}
.drawer-user-name{font-family:var(--font-h);font-weight:700;font-size:.98rem;color:var(--text)}
.drawer-user-tag{font-size:.75rem;color:var(--text);margin-top:1px;font-weight: 500;}
.drawer-close{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#f7f5fb;color:var(--gray-dark);border:none;cursor:pointer;
  flex-shrink:0;
}

.drawer-dog-switch{
  display:flex;align-items:center;gap:12px;width:calc(100% - 32px);
  margin:14px 16px;padding:12px 14px;
  background:var(--blue-pale);border-radius:12px;
  cursor:pointer;text-align:left;
  transition:background .14s;
}
.drawer-dog-switch:hover,.drawer-dog-switch:active{background:#dde8fd}
.drawer-dog-switch img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid #fff;flex-shrink:0}
.drawer-dog-label{font-size:.7rem;color:var(--text);font-weight:600}
.drawer-dog-name{font-family:var(--font-h);font-weight:800;font-size:.95rem;color:var(--blue)}
.drawer-dog-name span{margin-left:4px;color:var(--gray-mid)}

.drawer-links{display:flex;flex-direction:column;padding:6px 12px 24px;gap:2px}
.drawer-link{
  display:flex;align-items:center;gap:14px;
  padding:13px 12px;border-radius:10px;
  font-size:.92rem;font-weight:600;color:var(--gray-dark);
  transition:background .12s,color .12s;
}
.drawer-link:hover{background:#f7f5fb}
.drawer-link.active{background:var(--blue-pale);color:var(--blue);font-weight:700}
.dl-icon{width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.dl-icon svg{width:100%;height:100%}

/* MOBILE DRAWER — bookmark (Simple:Favorites), same reasoning as the
   topbar version above. */
.drawer-bookmark-wrap{cursor:default} /* the click target is the nested button, not the row */
.drawer-bookmark-wrap .simplefavorite-button{
  background:none;border:none;padding:0;margin:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;color:inherit;
}
.drawer-bookmark-wrap .simplefavorite-button i{font-size:27px;line-height:1;color:inherit}
.drawer-bookmark-wrap .simplefavorite-button i.bb-icon-f{color:var(--green-done)}
.drawer-divider{height:1px;background:var(--gray-line);margin:10px 4px}

/* Dog-picker sub-panel — slides in over the drawer's main link list */
.drawer-dogpanel{
  position:absolute;top:0;left:0;right:0;
  min-height:100%;
  background:#fff;
  padding:18px 16px 24px;
  transform:translateX(100%);
  transition:transform .26s cubic-bezier(.4,0,.2,1);
}
.drawer-dogpanel.is-open{transform:translateX(0)}
.drawer-back{
  display:flex;align-items:center;gap:8px;
  background:none;border:none;cursor:pointer;
  font-family:var(--font-h);font-weight:700;font-size:.95rem;color:var(--text);
  padding:6px 4px;margin-bottom:4px;
}
.drawer-dog-sub{font-size:.78rem;color:var(--text);margin:0 4px 14px;font-weight: 600;}
.drawer-dog-row{
  display:flex;align-items:center;gap:12px;
  padding:11px 8px;border-radius:12px;
  cursor:pointer;transition:background .14s;
}
.drawer-dog-row:hover{background:#f7f5fb}
.drawer-dog-row.current{background:var(--blue-pale)}
.drawer-dog-row img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid #fff;flex-shrink:0}
.drawer-dog-row-info{flex:1;min-width:0}
.drawer-dog-row-name{font-family:var(--font-h);font-weight:700;font-size:.9rem;color:var(--text)}
.drawer-dog-row-phase{font-size:.76rem;font-weight:600;color:var(--blue);margin-top:1px}
.drawer-dog-check{color:var(--blue);flex-shrink:0;display:flex}
.drawer-dog-divider{height:1px;background:var(--gray-line);margin:12px 4px}
.drawer-dog-addnew{
  display:flex;align-items:center;gap:10px;
  padding:11px 8px;border-radius:12px;
  font-size:.88rem;font-weight:700;color:var(--blue);
  text-decoration:none;
  cursor:pointer;transition:background .14s;
}
.drawer-dog-addnew:hover{background:#f7f5fb}
.drawer-dog-addicon{
  width:24px;height:24px;border-radius:50%;
  border:2px solid var(--blue);color:var(--blue);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;flex-shrink:0;
}

/* Bottom tab bar */
.tabbar{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:250;
  background:#fff;
  border-top:1px solid var(--gray-line);
  box-shadow:0 -2px 16px rgba(0,0,0,.06);
  padding:6px 4px;
  padding-bottom:calc(6px + env(safe-area-inset-bottom));
  justify-content:space-between;
  align-items:center;
}
.tab-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 2px;border-radius:10px;
  color:var(--gray-mid);
  transition:color .15s;
}
.tab-item svg{width:22px;height:22px}
.tab-item span{font-size:.62rem;font-weight:600;white-space:nowrap}
.tab-item.active{color:var(--blue)}
.tab-item-fab{position:relative;margin-top:-22px}
.fab-circle{
  width:50px;height:50px;border-radius:50%;
  background:linear-gradient(145deg,var(--blue),var(--navy));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(37,87,214,.45);
  border:4px solid #fff;
}
/* Tabbar FAB states — see recallers-nav.php: "Get Started" (default,
   blue), "Add a Dog" when there's no active dog (green), "My Dogs"
   when on a game/topic page (orange). */
.fab-circle.is-blue{background:linear-gradient(145deg,var(--blue),var(--navy));box-shadow:0 4px 14px rgba(37,87,214,.45)}
.fab-circle.is-green{background:linear-gradient(145deg,var(--green-card),var(--zap-deep));box-shadow:0 4px 14px rgba(61,158,59,.45)}
.fab-circle.is-orange{background:linear-gradient(145deg,var(--orange),#c94802);box-shadow:0 4px 14px rgba(242,92,3,.45)}
.tab-item-fab span:last-child{margin-top:1px;color:var(--gray-dark)}

/*──────────────────────────────────────────────
  VIMEO MULTI-AUDIO-TRACK DISCLAIMER
  Auto-inserted by recallers-main.js directly under ANY Vimeo embed,
  anywhere on the site, whenever that specific video has more than one
  audio track available (i.e. an AI-dubbed/translated audio option
  exists). Global/page-agnostic by design — see recallers-main.js
  "COMPONENT: VIMEO AUDIO-TRACK DISCLAIMER (site-wide)".
──────────────────────────────────────────────*/
.recallers-audio-disclaimer{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--blue-pale);border:1px solid #cbdcee;color:var(--text);
  border-radius:var(--r-sm);padding:12px 14px;margin-top:10px;
  font-family:var(--font-b);font-size:.84rem;line-height:1.45;
}
.recallers-audio-disclaimer-icon{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:24px;height:24px;margin-top:1px;border-radius:50%;
  background:var(--blue);color:#fff;
}
.recallers-audio-disclaimer-icon svg{width:14px;height:14px}
.recallers-audio-disclaimer-text{flex:1;min-width:0}
#recallers-gameday-page .recallers-audio-disclaimer, #recallers-milestone-lesson-page .recallers-audio-disclaimer {margin-top: -10px;}


/*================================================================
  PAGE: DASHBOARD
================================================================*/

/*──────────────────────────────────────────────
  LAYOUT
──────────────────────────────────────────────*/
#page :not(article).page{
  display:grid;
  grid-template-columns:minmax(0,1fr) 400px;
  gap:24px;
  max-width:1500px;margin:0 auto;
  padding:26px 28px;
  align-items:start;
}
.main{display:flex;flex-direction:column;gap:24px;min-width:0}
body.page-template-page-dashboard .container {max-width: 100%;}
/* Coach Queue keeps buddyboss-theme-css loaded (its Discussion tab renders
   BuddyBoss's forum reply rows, which need theme.css — see the note in
   recallers_dequeue_on_custom_templates()), so it needs the same .container
   release the dequeue would otherwise have given it. */
body.page-template-page-coachqueue .container {max-width: 100%;}
.recallers-header .page{display:none!important;}
.sticky-header .recallers-site .site-content{padding-top: 0px!important;}
/*──────────────────────────────────────────────
  GREETING ROW
──────────────────────────────────────────────*/
.greeting-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:2px}
.greeting-name{font-family:var(--font-h);font-weight:700;font-size:2.4rem;color:var(--text);line-height:1}
/* Landing spot for the trophy/hex badges on mobile (see JS) — empty
   and hidden on desktop, since the badges stay in the nav there. */
.greeting-nav-badges{display:none}
/* ── Status badges: hexagon/shield icon + pill label ── */
.badge{
  display:inline-flex;align-items:center;gap:9px;
  border-radius:18px;
  padding:4px 18px 4px 4px;
  font-family:var(--font-b);font-size:.85rem;font-weight:700;
  white-space:nowrap;
  background:#fff;
  border:1.5px solid var(--gray-line);
}
/* Icon wrapper shared by all three badges — shape comes from the inline SVG itself */
.badge-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}

.badge-alumni{background:#fdf0f5;border-color:#f6cfe0}
.badge-alumni .badge-label{color:#e0276b}

.badge-coach{background:#e7eff6;border-color:#c3d8e8}
.badge-coach .badge-label{color:var(--blue)}

.badge-recaller{background:#fff;border-color:var(--gray-line)}
.badge-recaller .badge-label{color:var(--text)}

.badge-label{font-weight:700}

.badge-alumni,.badge-coach{background:0 0}

.badge{position:relative;padding:10px 10px 10px 0;border-radius:8px;border-width:2px}

.badge-icon{position:absolute;left:-10px}

.badge-label{padding-left:45px}

/* Hidden for now, per request — markup left intact in case these
   come back later. */
.badge-alumni,.badge-coach,.badge-recaller{display:none}

.badge-coach{padding:10px}

.badge-coach .badge-label{padding-left:30px}

.badge-coach .badge-icon{left:5px}

.greeting-name{padding-right:10px}

.badge-recaller{margin-left:5px;background:0 0}



/*──────────────────────────────────────────────
  DOG CARD
──────────────────────────────────────────────*/
.dog-card{
  background:var(--white);border-radius:var(--r);
  padding:24px 26px;border: 1px solid #ececec;
}
.dog-card-empty{
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:34px 20px;
}
.dog-hero{display:flex;align-items:flex-start;gap:22px;flex-wrap:wrap}
.dog-photo{
  width:115px;height:115px;border-radius:50%;object-fit:cover;
  border:3px solid var(--gray-line);flex-shrink:0;
}
/* Photo upload affordance for the active dog — same component as My
   Profile's .mp-dog-camera-btn, sized for this card's smaller photo.
   The wrap is the [data-dog-id] host the uploader reads. */
.dog-photo-wrap{position:relative;flex-shrink:0;display:inline-block;line-height:0}
.dog-camera-btn{
  position:absolute;right:2px;bottom:2px;width:30px;height:30px;border-radius:50%;
  background:#fff;border:none;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(20,30,60,.18)!important;cursor:pointer;padding:0;
}
.dog-camera-btn-ico{
  width:23px;height:23px;border-radius:50%;background:var(--violet);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.dog-camera-btn-ico svg{width:12px;height:12px}
.dog-details{flex:1;min-width:0}
.dog-name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:3px}
.dog-name{font-family:var(--font-h);font-weight:800;font-size:1.55rem;color:var(--text)}
/* Hex badge */
.hex-badge{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:54px;flex-shrink:0;
}
.hex-badge svg{width:54px;height:54px}
/* Small round badge-on-a-badge: same brand color as the hex, white
   border (via box-shadow ring so it isn't clipped), holding the
   milestone number, sitting on the hex's right edge, vertically
   centered. */
.hex-badge-num{
  position:absolute;bottom:5px;right:-2px;
  width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-b);font-weight:800;font-size:.62rem;color:#fff;
  box-shadow:0 0 0 2px #fff;line-height:1;
}
/* Compact variant of the same component (icon hex + number badge) for
   tighter contexts than the dashboard's dog-hero card — used by Student
   Snapshot's profile-bar Furthest Milestone badge and dog-name-row
   current-milestone badge. Same markup/behaviour, smaller footprint. */
.hex-badge-sm{width:34px;height:34px}
.hex-badge-sm svg{width:34px;height:34px}
.hex-badge-sm .hex-badge-num{width:15px;height:15px;font-size:.55rem;right:-5px}

/* Hover-to-enlarge — hovering (or, for the header's keyboard-focusable
   slots, focusing) either badge type scales it up in place, so artwork
   that's genuinely hard to make out at 24-40px becomes legible without
   needing every badge to render that big by default. One rule covers
   both .badge-chip (recallers_top_badge_chip_html()) and .hex-badge
   (recallers_milestone_hex_badge_html()) — every surface site-wide
   renders one of these two shared components rather than a bespoke
   badge of its own, so this alone reaches every badge everywhere without
   touching a single call site.

   Both are inline SVG at a fixed internal viewBox (see each component's
   own comment above), so scaling stays crisp rather than pixelating the
   way zooming a raster image would. The mark/number pill
   (.badge-chip-num / .hex-badge-num) is a descendant of the scaled
   element, so it grows right along with its badge instead of staying
   pinned at the original size.

   Purely visual: transform doesn't reflow surrounding content, so nothing
   else on the page shifts when a badge grows. `transform` also gives the
   element its own stacking context, so the small z-index below only has
   to beat its immediate siblings (adjacent text, neighbouring badges) —
   not compete with the site's modals/toasts/sticky nav, which sit in
   entirely separate, far higher stacking contexts.

   No effect on touch, which has no hover — expected, since a tap already
   reaches the real target (the header slots open Achievements / the
   milestone list). */
.badge-chip,.hex-badge{transition:transform .15s ease;cursor: default !important;}
.badge-chip:hover,.badge-chip:focus-visible,
.hex-badge:hover,.hex-badge:focus-visible{
  transform:scale(1.7);
  z-index:5;
}

.opts-btn{
  border:1.5px solid var(--gray-line);border-radius:5px;
  background:var(--white);color:var(--text);
  font-size:.7rem;font-weight:700;padding:3px 10px;
  transition:border-color .14s;
}
.opts-btn:hover{border-color:var(--blue);color:var(--blue)}
.dog-phase{font-family:var(--font-h);font-weight:700;font-size:1rem;color:var(--blue);margin-bottom:3px;margin-top:-10px}
.dog-meta{font-size:.78rem;color:var(--text);font-weight: 600;}
.dog-meta span{margin:0 4px}

/* Stats split */
.dog-stats{
  display:flex;gap:0;
  margin-top:18px;
  background:transparent;
  border:1px solid #ececec;
  border-radius:var(--r-sm);
  padding:18px 22px;
  flex-wrap:wrap;
}
.stat-col{flex:1;min-width:130px}
.stat-col+.stat-col{border-left:3px solid var(--gray-line);padding-left:40px;margin-left:4px}
.stat-lbl{font-family:var(--font-b);font-size:.8rem;font-weight:700;color:var(--blue);margin-bottom:5px}
.stat-val{font-family:var(--font-h);font-weight:700;font-size:1.1rem;color:var(--text);line-height:1.2}
.stat-sub{font-size:.78rem;color:var(--text);margin-top:5px;font-weight: 600;}
.stat-milestone-title{font-family:var(--font-h);font-weight:700;font-size:1.1rem;color:var(--text);line-height:1.25}
.stat-milestone-tag{font-family:var(--font-b);font-size:.8rem;font-weight:700;color:var(--blue);margin-top:8px}
.btn-resume{
  display:inline-flex;align-items:center;
  background:var(--navy);color:#fff;
  border-radius:var(--r-sm);font-size:.8rem;font-weight:500;
  padding:9px 18px;margin-top:10px;
  transition:background .15s,transform .1s;
}
.btn-resume:hover{background:var(--blue);transform:translateY(-1px)}

/* Progress gauge: flat semicircle, percentage + sub-label stacked below */
.ring-wrap{
  display:flex;flex-direction:column;align-items:center;
  flex-shrink:0;width:150px;
}
.ring-svg{overflow:visible;display:block}
.r-track{fill:none;stroke:#e2e5ea;stroke-width:6;stroke-linecap:round}
.r-fill{
  fill:none;stroke:var(--blue);stroke-width:6;
  stroke-linecap:round;
  transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1);
}
.ring-pct-row{
  display:flex;align-items:baseline;gap:2px;
  margin-top:-40px;margin-left: 10px;
}
.ring-pct-num{
  font-family:var(--font-h);font-weight:700;font-size:1.9rem;color:var(--blue);
  white-space:nowrap;line-height:1;
}
.ring-pct-sign{
  font-family:var(--font-h);font-weight:500;font-size:1.9rem;color:var(--blue);
}
.ring-pct-sub{
  font-size:.85rem;font-weight:600;color:var(--text);
  margin-top:0px;white-space:nowrap;
}

/*──────────────────────────────────────────────
  COMPONENT: DASHBOARD WELCOME SECTION
  Archetype-matched welcome video/carousel + copy, shown above the dog
  card — see page-dashboard-content.php and recallers-welcome-section.php.
  Collapses to the .welcome-restore-btn pill (rendered above .scard in the
  sidebar on desktop, relocated above the dog card via
  #welcomeRestoreBtnMobileMount on mobile — see recallers-main.js) when
  dismissed, and back again when that button is clicked. Height is
  animated with an explicit inline px value set by JS (see that file's
  "COMPONENT: DASHBOARD WELCOME SECTION"), since height can't transition
  to/from "auto" with plain CSS.
──────────────────────────────────────────────*/
.welcome-section{
  background:var(--white);border-radius:var(--r);
  border:1px solid #ececec;overflow:hidden;position:relative;
  transition:max-height .38s cubic-bezier(.4,0,.2,1),opacity .3s ease,margin-bottom .38s ease;
}
.welcome-section[hidden]{display:none}
.welcome-section.is-collapsing,
.welcome-section.is-collapsed{opacity:0;margin-bottom:0}

.welcome-close-btn{
  position:absolute;top:14px;right:14px;z-index:5;
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);border:1px solid var(--gray-line);
  color:var(--gray-dark);cursor:pointer;padding:0;
  box-shadow:0 2px 6px rgba(20,30,60,.12);
  transition:background .15s ease,transform .15s ease,color .15s ease;
}
.welcome-close-btn svg{width:15px;height:15px}
.welcome-close-btn:hover{background:#fff;color:var(--red);transform:scale(1.08)}
.welcome-close-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.welcome-scroll{
  display:flex;flex-direction:column;
}

/* ── Media (single video or carousel) — full width of the section, with
   the text stacked below rather than beside it, so the video reads as
   the section's main focus instead of a small thumbnail. ── */
.welcome-media{
  width:100%;background:#0f0f14;position:relative;
}
.welcome-video-frame{
  position:relative;width:100%;aspect-ratio:16/9;max-height:520px;background:#0f0f14;
  overflow:hidden;
}
/* Any black bars a source video adds internally to fit 16:9 (its own
   letterbox/pillarbox, baked in by the player or the file itself — not
   something outer CSS can normally remove) are cropped out here by
   rendering the iframe oversized and centered, then clipping it to the
   frame via the overflow:hidden above. --welcome-video-zoom controls how
   aggressive that crop is: 1 = no crop; higher trims more of the bars at
   the cost of trimming a little real video content too. 1.3 is a
   reasonable default — raise it if bars are still visible, lower it
   toward 1 if a properly-shaped 16:9 video is losing noticeable content
   at the edges. */
.welcome-video-frame iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  transform-origin:center center;
}
.welcome-carousel{position:relative;width:100%}
.welcome-carousel-track{position:relative;width:100%;aspect-ratio:16/9;max-height:573px;background:#0f0f14;overflow:hidden}
.welcome-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .3s ease}
.welcome-slide.is-active{opacity:1;visibility:visible}
.welcome-slide .welcome-video-frame{position:absolute;inset:0;aspect-ratio:auto;max-height:none}

.welcome-carousel-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(20,20,30,.55)!important;color:#fff!important;border:none;cursor:pointer;
  transition:background .15s ease;
}
.welcome-carousel-arrow svg{width:18px;height:18px}
.welcome-carousel-arrow:hover{background:rgba(20,20,30,.8)!important}
.welcome-carousel-arrow.prev{left:14px}
.welcome-carousel-arrow.next{right:14px}
.welcome-carousel-arrow:focus-visible{outline:2px solid #fff;outline-offset:2px}

.welcome-carousel-dots{
  position:absolute;left:0;right:0;bottom:14px;z-index:4;
  display:flex;justify-content:center;gap:8px;
}
.welcome-dot{
  width:9px;height:9px;border-radius:50%;padding:0;border:none;cursor:pointer;
  background:rgba(255,255,255,.45);transition:background .15s ease,transform .15s ease;
}
.welcome-dot:hover{background:rgba(255,255,255,.75)}
.welcome-dot.is-active{background:#fff;transform:scale(1.25)}

/* The site-wide audio-disclaimer script (recallers-main.js, "COMPONENT:
   VIMEO AUDIO-TRACK DISCLAIMER") inserts .recallers-audio-disclaimer as
   .welcome-video-wrap's next sibling — i.e. right here, between the video
   and the text — whenever the active video has more than one audio
   track. Its own CSS (see "VIMEO MULTI-AUDIO-TRACK DISCLAIMER") supplies
   the box styling; this just aligns it with the text block's horizontal
   padding instead of sitting flush edge-to-edge under the full-bleed video. */
.welcome-scroll > .recallers-audio-disclaimer{margin:16px 26px 0}

/* ── Text: title, description, scrollable rich content ── */
.welcome-text{
  width:100%;min-width:0;padding:22px 26px 26px;display:flex;flex-direction:column;gap:10px;
}
.welcome-title{
  font-family:var(--font-h);font-weight:700;font-size:1.35rem;color:var(--text);
  line-height:1.3;margin:0;padding-right:34px;
}
.welcome-desc{
  font-family:var(--font-b);font-size:.98rem;font-weight:600;color:var(--violet);
  margin:0;line-height:1.5;
}
.welcome-copy{
  font-family:var(--font-b);font-size:.9rem;color:var(--gray-dark);line-height:1.7;
  max-height:190px;overflow-y:auto;padding-right:6px;margin-top:2px;
  scrollbar-width:thin;scrollbar-color:var(--gray-line) transparent;
}
.welcome-copy::-webkit-scrollbar{width:6px}
.welcome-copy::-webkit-scrollbar-track{background:transparent}
.welcome-copy::-webkit-scrollbar-thumb{background:var(--gray-line);border-radius:6px}
.welcome-copy p{margin:0 0 12px}
.welcome-copy p:last-child{margin-bottom:0}
.welcome-copy ul,.welcome-copy ol{margin:0 0 12px;padding-left:20px}
.welcome-copy a{color:var(--blue);text-decoration:underline}
.welcome-copy strong{color:var(--text)}

.welcome-cta-btn{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  background:var(--violet);color:#fff;text-decoration:none;
  font-family:var(--font-b);font-weight:700;font-size:.88rem;
  padding:11px 20px;border-radius:var(--r-sm);margin-top:6px;
  transition:background .15s ease,transform .15s ease;
}
.welcome-cta-btn svg{width:15px;height:15px;flex-shrink:0}
.welcome-cta-btn:hover{background:var(--violet-hover);transform:translateX(2px);color:#fff}
.welcome-cta-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ── Restore button ("View Welcome Video") ── */
.welcome-restore-btn{
  display:flex;align-items:center;gap:10px;
  width:100%;justify-content:center;
  background:var(--violet)!important;color:#fff!important;border:none;border-radius:var(--r);
  padding:13px 18px;font-family:var(--font-b);font-weight:700;font-size:.9rem;
  cursor:pointer;box-shadow:var(--sh);
  transform:scale(.94);opacity:0;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),opacity .22s ease,background .15s ease,margin-bottom .28s ease;
}
.welcome-restore-btn[hidden]{display:none}
.welcome-restore-btn.is-visible{transform:scale(1);opacity:1}
.welcome-restore-btn:hover{background:var(--violet-hover)!important}
.welcome-restore-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.welcome-restore-ico{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;
}
.welcome-restore-ico svg{width:13px;height:13px}

/* The mobile mount point #welcomeRestoreBtn relocates into (see
   recallers-main.js) — display:none on desktop so it never adds stray
   space above the dog card there (the button lives in the sidebar above
   .scard instead); only becomes visible at the same ≤760px breakpoint the
   JS uses to actually move the button into it. */
#welcomeRestoreBtnMobileMount{display:none}
@media(max-width:760px){
  #welcomeRestoreBtnMobileMount{display:block}
}

@media(max-width:640px){
  .welcome-title{font-size:1.18rem}
  .welcome-text{padding:18px 20px 20px}
  .welcome-copy{max-height:150px}
  .welcome-scroll > .recallers-audio-disclaimer{margin:14px 20px 0}
  .welcome-video-frame,.welcome-carousel-track{max-height:320px}
}

@media(prefers-reduced-motion:reduce){
  .welcome-section,.welcome-close-btn,.welcome-restore-btn,.welcome-slide,.welcome-carousel-arrow,.welcome-dot{
    transition:none!important;
  }
}

/*──────────────────────────────────────────────
  LOCK NOTICE BANNER (dashboard — shown after being redirected away from
  a locked milestone/game page) + shared locked-content click tooltip.
──────────────────────────────────────────────*/
.recallers-lock-banner{
  display:flex;align-items:center;gap:10px;
  background:#fff4e5;border:1px solid #f0c37a;color:#7a5210;
  border-radius:var(--r-sm);padding:12px 14px;margin-bottom:14px;
  font-family:var(--font-b);font-size:.9rem;
}
.recallers-lock-banner-icon{flex-shrink:0;width:20px;height:20px;color:#c8790f}
.recallers-lock-banner-icon svg{width:100%;height:100%}
.recallers-lock-banner-text{flex:1}
.recallers-lock-banner-close{
  background:none;border:0;font-size:1.3rem;line-height:1;color:#7a5210;
  cursor:pointer;padding:0 2px;
}
.recallers-lock-toast{
  position:absolute;transform:translate(-50%,-100%);
  background:#20242c;color:#fff;font-family:var(--font-b);font-size:.8rem;
  padding:8px 12px;border-radius:8px;max-width:240px;text-align:center;
  z-index:9999;pointer-events:none;opacity:0;
  transition:opacity .15s,transform .15s;
}
.recallers-lock-toast.is-visible{opacity:1;transform:translate(-50%,calc(-100% - 8px))}
@media(max-width:760px){
  .recallers-lock-toast{width:171px}
}

/* Anchored to the BOTTOM of the viewport, not the top.
   The site header does not stick — it scrolls away. A top-anchored toast was
   measured to sit just under that header at scroll-top, so anywhere further
   down the page it floated in the middle of the content with nothing to
   belong to. The bottom edge is always the bottom edge, whatever the scroll
   position, so it needs no header maths and no admin-bar offsets (the admin
   bar is at the top, so those three overrides are gone). */
.recallers-toast{
  position:fixed;right:24px;bottom:24px;z-index:1200;
  display:flex;align-items:center;gap:11px;width:max-content;max-width:calc(100vw - 32px);
  padding:12px 16px 12px 12px;background:#fff;border:1px solid #cfe1b1;
  border-left:4px solid var(--green-done);border-radius:12px;color:var(--text);
  font-family:var(--font-b);font-size:.88rem;font-weight:700;
  box-shadow:0 12px 30px rgba(31,25,48,.18);opacity:0;pointer-events:none;
  /* Rises into place, since it now enters from the bottom edge. */
  transform:translateY(12px);transition:opacity .2s ease,transform .2s ease;
}
.recallers-toast.is-visible{opacity:1;transform:translateY(0)}
.recallers-toast-icon{
  display:grid;place-items:center;flex:0 0 26px;width:26px;height:26px;
  background:var(--green-done);border-radius:50%;color:#fff;
}
.recallers-toast-icon svg{width:15px;height:15px}
/* Error variant — same shape/position/animation, just red instead of
   green, so a failed save reads as clearly different at a glance. */
.recallers-toast--error{border-color:#eec2c2;border-left-color:#c23b3b}
.recallers-toast--error .recallers-toast-icon{background:#c23b3b}
.recallers-toast-message{line-height:1.3}
@media(prefers-reduced-motion:reduce){
  .recallers-toast{transition:opacity .2s ease;transform:none}
  .recallers-toast.is-visible{transform:none}
}
/* Below 760px the fixed .tabbar takes the bottom edge (74px, plus the safe
   area on notched phones), so clear it rather than sitting behind it. Full
   width here too — a max-content pill looks stranded on a narrow screen. */
@media(max-width:760px){
  .recallers-toast{
    left:16px;right:16px;width:auto;
    bottom:calc(74px + 12px + env(safe-area-inset-bottom));
  }
}

/*──────────────────────────────────────────────
  SITE-WIDE: button loading spinner
  Generic small spinner for buttons that AJAX-toggle in place — the
  comments sidebar's Follow/Favorite buttons and the Games Discussions
  tab's Unfollow/Unfavorite buttons (see recallers-main.js). Uses
  currentColor rather than a fixed color (unlike .gd-btn-spinner, built for
  a solid-background CTA) so it automatically matches whichever
  outline-style button it's dropped into — violet, blue, or red — with no
  per-button spinner variant needed. Hidden by default; JS toggles the
  button's own ".is-loading" class to reveal it (see each button's own
  CSS below for what that class hides/shows alongside it).
──────────────────────────────────────────────*/
.recallers-btn-spinner{
  display:none;width:14px;height:14px;border-radius:50%;flex-shrink:0;
  border:2px solid currentColor;border-top-color:transparent;opacity:.8;
  animation:recallers-btn-spin .7s linear infinite;
}
@keyframes recallers-btn-spin{to{transform:rotate(360deg)}}

/*──────────────────────────────────────────────
  SITE-WIDE: page loading overlay ("Page Exit Loading Overlay" /
  "Page Begin Loading Overlay" — Settings → Loading Overlay).
  One shared overlay element, printed at most once per page (see
  functions.php's recallers_print_page_loading_overlay(), hooked to
  wp_body_open). recallers-main.js only ever toggles ".is-active" —
  it never creates or removes this element. z-index is set above every
  other overlay/modal in this file (highest existing is the 100000
  milestone-lesson tooltip) so it always wins, including over a modal
  that happened to be open the moment navigation started.
──────────────────────────────────────────────*/
.recallers-page-loading-overlay{
  position:fixed;inset:0;z-index:999999;
  display:flex;align-items:center;justify-content:center;
  background:rgba(46,42,51,.35);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease;
}
.recallers-page-loading-overlay.is-active{
  opacity:1;visibility:visible;pointer-events:auto;
}
.recallers-page-loading-spinner{
  width:44px;height:44px;border-radius:50%;
  border:4px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:recallers-page-loading-spin .8s linear infinite;
}
@keyframes recallers-page-loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .recallers-page-loading-overlay{transition:none}
  .recallers-page-loading-spinner{animation-duration:1.6s}
}

/*──────────────────────────────────────────────
  MILESTONES
──────────────────────────────────────────────*/
.section-head{font-family:var(--font-h);font-weight:600;font-size:1.35rem;color:var(--text);margin-bottom:6px}
.milestones{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.mc{
  border-radius:var(--r-sm);overflow:hidden;
  box-shadow:var(--sh);display:flex;flex-direction:column;
  cursor:pointer;transition:transform .15s,box-shadow .15s;
  text-decoration:none;color:inherit;
}
.mc:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.mc-top{
  flex:1;position:relative;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:22px 12px 22px;
  text-align:center;
}
/* Number circle top-left */
.mc-num{
  position:absolute;bottom:-15px;left:50%;transform: translateX(-50%);
  width:30px;height:30px;border-radius:50%;
  background:#000;color:#fff;
  font-family:var(--font-h);font-size:0.85rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;border: 3px solid #fff;
}
.mc-icon-wrap{margin-bottom:5px}
.mc-icon-img{width:100%;max-width:139px;max-height:93px;object-fit:contain;display:block}
.mc-greyed .mc-icon-img{filter:grayscale(1)}
.mc-title{font-family:var(--font-h);font-weight:500;font-size:0.9rem;color:#fff;line-height:1.3}
.mc-foot{
  padding:13px 10px 9px 10px;border-top: 4px solid #fff;
  display:flex;align-items:center;justify-content:center;gap:5px;
  font-family:var(--font-h);font-size:.85rem;font-weight:400;color:#fff;
}
.mc-foot svg { width: 16px; height: 16px;}
/* Card bg colours */
.mc-red .mc-top, .mc-red .mc-num{background:#e5141d}
.mc-orange .mc-top, .mc-orange .mc-num{background:#f25c03}
.mc-amber .mc-top, .mc-amber .mc-num{background:#f9bf15}
.mc-green .mc-top, .mc-green .mc-num{background:#3d9e3b}
.mc-teal .mc-top, .mc-teal .mc-num{background:#007fcd}
.mc-cyan .mc-top, .mc-cyan .mc-num{background:#09319c}
.mc-purple .mc-top, .mc-purple .mc-num{background:#704aa3}
.mc-indigo .mc-top, .mc-indigo .mc-num{background:#210985}
/* Upcoming/locked, or "current" with no games completed yet — same grey
   as .foot-upcoming, overriding the milestone's own brand color. Placed
   after the color variants above so it wins on source order (equal
   specificity), same convention as the rest of this file. */
.mc-greyed .mc-top, .mc-greyed .mc-num{background:#cdcdcd}
.mc-locked{cursor:not-allowed}
/* Footer colours */
.foot-done{background:#7a9e3f}
.foot-current{background:var(--navy)}
.foot-upcoming{background:#8a929e}
.foot-locked{background:#8a929e}
.recallers-locked-trigger{outline:none}
.recallers-locked-trigger:focus-visible{outline:2px solid #fff;outline-offset:-2px}

/*──────────────────────────────────────────────
  MILESTONE SVG ILLUSTRATIONS
──────────────────────────────────────────────*/
.mc-svg{width:82px;height:68px}

/*──────────────────────────────────────────────
  COMMUNITY
──────────────────────────────────────────────*/
.comm-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.btn-go{
  border:1.5px solid var(--blue);color:var(--blue);background:#fff;
  border-radius:6px;font-size:.73rem;font-weight:700;padding:6px 14px;
  transition:background .14s,color .14s;
}
.btn-go:hover{background:var(--blue-pale)}
.comm-card{background:#fff;border-radius:var(--r);border: 1px solid #ececec;overflow:hidden}
.comm-item{
  display:flex;align-items:center;gap:14px;
  padding:14px 20px;border-bottom:1px solid var(--gray-line);
  cursor:pointer;transition:background .12s;
}
.comm-item:last-child{border-bottom:none}
.comm-item:hover{background:var(--gray-bg)}
.comm-ico{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.comm-ico img{width:100%;height:100%;object-fit:cover}
.comm-body{flex:1;min-width:0}
.comm-title{font-size:.78rem;font-weight:600;color:var(--text)}
.comm-sub{font-size:.7rem;color:var(--gray-mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top: 5px;}
.comm-right{display:flex;align-items:center;gap:12px;flex-shrink:0;font-size:.75rem;color:var(--text)}
.comm-arr{font-size:1.2rem;color:var(--text)}

/* Speech bubble icon */
.bubble-wrap{position:relative;display:inline-block}
.bubble-wrap img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.bubble-dot{
  position:absolute;bottom:-2px;right:-2px;
  width:16px;height:16px;border-radius:50%;
  background:var(--blue);
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;
}
.bubble-dot svg{width:9px;height:9px}

/*──────────────────────────────────────────────
  SIDEBAR
──────────────────────────────────────────────*/
.sidebar{display:flex;flex-direction:column;gap:16px}
.scard{background:#fff;border-radius:var(--r);padding:22px;border: 1px solid #ececec;}
.scard-title{font-family:var(--font-h);font-weight:700;font-size:1.4rem;color:var(--text);margin-bottom:6px}
.scard-sub{font-size:.80rem;color:var(--text);margin-bottom:14px;font-weight: 500;}

/* Dog list */
.dog-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 10px;border:1px solid #f1f1f1;border-radius: 8px;
  cursor:pointer;transition:background .12s;margin-bottom: 8px;
}
.dog-row:hover{background:var(--gray-bg);border-radius:8px;padding: 10px 10px;}
.dog-row-thumb{
  width:75px;height:75px;border-radius:50%;object-fit:cover;
  border:2.5px solid var(--gray-line);flex-shrink:0;
}
.dog-row-info{flex:1;min-width:0}
.dog-row-name{font-family:var(--font-h);font-weight:600;font-size:.9rem;color:var(--text);margin-bottom: 3px;}
.dog-row-phase{font-size:.8rem;font-weight:700;color:var(--blue);margin-bottom: 3px;}
.dog-row-tag{
  display:inline-flex;align-items:center;gap:4px;margin-top:3px;
  background:transparent;border-radius:6px;padding:3px 8px;
  font-size:.66rem;font-weight:700;color:var(--gray-dark);border: 1px solid var(--gray-line);
}
.dog-row-tag .hex-sm{
  width:18px;height:18px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:900;color:#fff;flex-shrink:0;
}
.dog-row-pct{font-weight:700;font-size:1rem;color:var(--blue);flex-shrink:0;margin-right:2px}
.dog-row-arr{color:var(--text);font-size:1.5rem}

.view-more{
  display:flex;align-items:center;gap:4px;
  font-size:.9rem;font-weight:700;color:var(--blue);
  margin-top:20px;cursor:pointer;justify-content: center;
}
.view-more:hover{text-decoration:underline}
.view-more.is-expanded .view-more-arr{transform:rotate(90deg)}
#viewMoreDogs.view-more.is-expanded{display:none}

.dog-row-extra{
  display:flex;overflow:hidden;
  max-height:0;opacity:0;margin-bottom:0;padding-top:0;padding-bottom:0;
  border-width:0;pointer-events:none;
  transition:max-height .3s ease,opacity .25s ease,margin .3s ease,padding .3s ease;
}
.my-dogs-scroll.show-extra .dog-row-extra{
  max-height:120px;opacity:1;margin-bottom:8px;
  padding-top:10px;padding-bottom:10px;border-width:1px;
  pointer-events:auto;
}
/* Container-level cap once expanded — JS sets an inline max-height equal
   to the panel's own height before expansion (i.e. "3 dogs' worth"), so
   revealing more than 3 extra rows scrolls within that same footprint
   instead of growing the whole sidebar card taller. */
.my-dogs-scroll.show-extra{
  overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--gray-line) transparent;
}
.my-dogs-scroll.show-extra::-webkit-scrollbar{width:6px}
.my-dogs-scroll.show-extra::-webkit-scrollbar-thumb{background:var(--gray-line);border-radius:999px}

.my-dogs-empty{font-size:.85rem;color:var(--gray-mid);padding:10px 0}

.add-dog{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:20px;
  border:2px dashed var(--gray-line);border-radius:var(--r);
  background:#fff;color:var(--blue);font-size:.9rem;font-weight:700;
  margin-top:20px;transition:border-color .14s,background .14s;
}
.add-dog:hover{border-color:var(--blue);background:var(--blue-pale)}
.add-circle{
  width:22px;height:22px;border-radius:50%;
  border:2px solid var(--blue);
  display:flex;justify-content:center;
  font-size:.95rem;line-height:1;color:var(--blue);
}

/* Quote card */
.quote-card{
  background:#fff;border-radius:var(--r);border: 1px solid #ececec;
  padding:40px 22px;text-align:center;
}
.quote-marks{
  font-size:4.8rem;line-height:.75;color:var(--blue);
  font-family:Georgia,serif;font-weight:900;
  margin-bottom:-20px;display:block;
}
.quote-text{
  font-size:1.2rem;font-style:italic;color:var(--text);
  line-height:1.85;margin-bottom:12px;
}
.quote-attr{font-size:.88rem;font-weight:800;color:var(--blue)}

/*──────────────────────────────────────────────
  RESPONSIVE
──────────────────────────────────────────────*/
@media(max-width:1040px){
  #page :not(article).page{grid-template-columns:minmax(0,1fr)}
  .sidebar{flex-direction:row;flex-wrap:wrap}
  .scard{flex:1;min-width:260px}
}
@media(max-width:1300px){
  .nav-links li.nav-item:nth-child(n+3){display:none}
  .nav-training-text{display:none}
  .mainnav{padding:0 16px;gap:6px}
  .logo{margin-right:16px}
  .nav-right{gap:6px}
  .chev-arrow-box{display:none}
  .nav-sep{margin:0 2px}
}

/* ════════════════════════════════════════════
   APP MODE — ≤760px
   Full restructure: compact header, slide-out
   drawer, fixed bottom tab bar, card-based
   single column content tuned for thumb use.
   ════════════════════════════════════════════ */
@media(max-width:760px){

  /* ── Hide the slim utility bar; fold its actions into the drawer/header ── */
  .topbar{display:none}

  /* ── Compact app header ── */
  .mainnav{
    position:sticky;top:0;
    height:58px;padding:0 14px;
    gap:10px;
  }
  .logo{margin-right:auto;max-width:160px}
  .logo-img{height:34px}
  .nav-links{display:none}
  .nav-divider{display:none}
  .nav-sep{display:none}
  .nav-training-wrap{display:none}     /* training widget lives in the drawer on mobile */

  /* Trophy/hex badge wrapper leaves the mobile nav — recallers-main.js
     moves the real .user-badges element into the dashboard greeting row
     (#greetingNavBadges) on pages that have one; this is just a fallback
     (e.g. JS disabled, or a non-dashboard page with no greeting row to
     move it into). */
  .nav-right .user-badges{display:none}

  /* ...and nav-mobile-icons (bookmark/search/notifications) takes
     their place in the nav-right cluster. */
  .nav-mobile-icons{display:flex}

  .nav-user-avatar{display:none}        /* avatar moves into the drawer header */
  .hamburger-btn{display:flex}

  /* ── Reserve space at the bottom for the fixed tab bar ── */
  body{padding-bottom:74px!important}
  .tabbar{display:flex}
  body.recallers-no-header-footer { padding-bottom: 0!important;}

  /* ── Page becomes a single tight column ── */
  #page :not(article).page{padding:14px 12px 12px;gap:16px;max-width:100vw;overflow-x:hidden}
  .main{gap:16px;min-width:0;max-width:100%}
  .sidebar{min-width:0;max-width:100%}

  /* ── Greeting: name + horizontally-scrolling badge row ── */
  .greeting-row{
    flex-wrap:nowrap;
    overflow-x:auto;
    max-width:100%;
    gap:10px;
    margin:0 -12px 2px;
    padding:0 12px 4px;
    scrollbar-width:none;
  }
  .greeting-row::-webkit-scrollbar{display:none}
  .greeting-name{font-size:1.5rem;flex-shrink:0}

  /* Trophy/hex badges, relocated here from the nav by JS — same size
     they used to render at in the mobile nav. */
  .greeting-nav-badges{display:flex;align-items:center;gap:8px;flex-shrink:0}
  .greeting-nav-badges .user-badges{display:flex;align-items:center;gap:8px}
  .user-badges .nav-trophy-badge,
  .user-badges .nav-hex.hex-badge-sm, .user-badges .nav-trophy-badge--earned .badge-chip--md{width:34px;height:34px}
  .user-badges .nav-hex.hex-badge-sm svg{width:34px;height:34px}
  .user-badges .nav-hex.hex-badge-sm .hex-badge-num, .user-badges .nav-trophy-badge--earned .badge-chip--md .badge-chip-num{width:14px;height:14px;font-size:.52rem;right:-5px}
  .badge{flex-shrink:0;padding:4px 14px 4px 4px}
  .badge-icon svg{width:32px;height:32px}
  .badge-label{font-size:.78rem;padding-left: 25px;}

  /* ── Dog card: compact app-card layout ── */
  .dog-card{padding:16px}
  .dog-hero{gap:14px}
  .dog-photo{width:64px;height:64px;border-width:2px}
  .dog-camera-btn{width:24px;height:24px;right:-2px;bottom:-2px}
  .dog-camera-btn-ico{width:19px;height:19px}
  .dog-camera-btn-ico svg{width:10px;height:10px}
  .dog-name-row{gap:7px;margin-bottom:2px}
  .dog-name{font-size:1.15rem}
  .hex-badge{width:34px;height:34px}
  .hex-badge svg{width:34px;height:34px}
  .hex-badge-num{width:15px;height:15px;font-size:.55rem;right:-5px;bottom: 0px;}
  .opts-btn{font-size:.65rem;padding:3px 8px}
  .dog-phase{font-size:.85rem;margin-top:-2px}
  .dog-meta{font-size:.72rem}

  /* Ring moves below the name block, centered, full width */
  .dog-hero{flex-wrap:wrap}
  .dog-details{order:1;flex-basis:calc(100% - 78px)}
  .ring-wrap{
    order:2;
    width:100%;
    flex-direction:column;
    align-items:center;
    margin-top:10px;
    padding-top:14px;
    border-top:1px dashed var(--gray-line);
  }
  .ring-svg{width:110px;height:61px}
  .ring-pct-row{margin-top:-34px;margin-left:0}
  .ring-pct-num,.ring-pct-sign{font-size:1.6rem}
  .ring-pct-sub{margin-top:0;font-size:.8rem}

  /* Stats box: stack the two columns cleanly */
  .dog-stats{padding:14px 16px;margin-top:14px;flex-direction:column;gap:14px}
  .stat-col+.stat-col{border-left:none;padding-left:0;margin-left:0;border-top:1px solid var(--gray-line);padding-top:14px}
  .stat-val,.stat-milestone-title{font-size:1rem}
  .btn-resume{width:100%;justify-content:center;padding:11px 16px}

  /* ── Milestones: tight 2-col grid, smaller illustrations ── */
  .section-head{font-size:.98rem;margin-bottom:10px}
  .milestones{grid-template-columns:repeat(2,1fr);gap:8px}
  .mc-top{padding:17px 8px 17px}
  .mc-svg{width:56px;height:46px}
  .mc-title{font-size:.85rem}
  .mc-foot{font-size:.75rem;padding:15px 6px 10px 6px}
  .mc-num{width:25px;height:25px;font-size:.75rem}

  /* ── Community: trim padding, tighten text ── */
  .comm-header{margin-bottom:10px}
  .comm-item{padding:11px 14px;gap:11px}
  .comm-ico{width:38px;height:38px}
  .comm-title{font-size:.76rem}
  .comm-sub{font-size:.68rem}
  .btn-go{font-size:.7rem;padding:5px 11px}

  /* ── Sidebar becomes single column; My Dogs as horizontal scroll-snap cards ── */
  .sidebar{flex-direction:column;flex-wrap:nowrap}
  .scard{min-width:0;overflow:hidden}
  .scard-title{font-size:.95rem}

  .dog-row{
    display:block;
    text-align:center;
    border-bottom:none;
    padding:14px 10px;
    border-radius:12px;
    border:1px solid var(--gray-line);
    margin-right:10px;
  }
  .dog-row:hover{padding-left:10px}
  .dog-row-thumb{width:56px;height:56px;margin:0 auto 8px}
  .dog-row-info{text-align:center}
  .dog-row-tag{margin:6px auto 0;font-size: .6rem;}
  .dog-row-pct{display:block;margin:6px 0 0}
  .dog-row-arr{display:none}
  .dog-row-tag .hex-sm { font-size: .6rem; width: 16px; height: 16px;}

  .my-dogs-scroll{
    display:flex;gap:10px;
    overflow-x:auto;overflow-y:visible;max-height:none!important; /* !important: overrides any inline max-height the desktop "View More" JS may have set before a resize/rotate into this breakpoint */
    margin:0 -22px;padding:0 22px 4px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .my-dogs-scroll::-webkit-scrollbar{display:none}
  .my-dogs-scroll .dog-row{
    scroll-snap-align:start;
    flex:0 0 150px;
    margin-right:0;
  }
  /* Every dog card renders fully — dragging left/right through the whole
     set replaces "View More Dogs" as the way to reach dogs beyond the
     first few, so nothing should be collapsed here in the first place. */
  .dog-row-extra{
    display:block;overflow:visible;
    max-height:none;opacity:1;margin-bottom:0;
    padding:14px 10px;border-width:1px;pointer-events:auto;
    transition:none;
  }
  .view-more{display:none}
  .quote-text{font-size: 1rem;line-height: 1.65;}

  .view-more{justify-content:center;margin-top:14px}
  .add-dog{margin-top:19px}

  /* ── Drawer width tweak for small phones ── */
  .drawer{width:88%}
}

@media(max-width:420px){
  .greeting-name{font-size:1.3rem}
  .milestones{gap:7px}
  .mc-svg{width:48px;height:40px}
  .dog-photo{width:56px;height:56px}
  .dog-camera-btn{width:22px;height:22px}
  .dog-camera-btn-ico{width:17px;height:17px}
}

/*================================================================
  PAGE: GAME DAY (milestone / single-game player)
  Styles for: page-gameday-content.php
  Append this whole block to recallers-main.css, right after the
  "PAGE: DASHBOARD" section (do not duplicate the GLOBAL tokens).
================================================================*/

/*──────────────────────────────────────────────
  LAYOUT (this page reuses the same #page :not(article).page
  grid + .main / .sidebar classes as the dashboard)
──────────────────────────────────────────────*/

/*──────────────────────────────────────────────
  BREADCRUMB / TITLE
──────────────────────────────────────────────*/
.gd-eyebrow{
  font-family:var(--font-b);font-size:.78rem;font-weight:800;
  color:var(--green-done);letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:2px;
}
.gd-title{
  font-family:var(--font-h);font-weight:700;font-size:1.9rem;
  color:var(--text);line-height:1.15;margin-bottom:6px;
}

/*──────────────────────────────────────────────
  GAME SELECTOR BAR
──────────────────────────────────────────────*/
.gd-selector{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;background:var(--blue-pale);border-radius:var(--r);
  padding:14px 18px;
}
.gd-selector-label{
  font-family:var(--font-b);font-size:.72rem;font-weight:800;
  color:var(--gray-dark);letter-spacing:.04em;text-transform:uppercase;
  margin-bottom:2px;
}
.gd-selector-name{font-family:var(--font-h);font-weight:700;font-size:1.4rem;color:var(--text)}
.gd-selector-mid{flex:1;min-width:0}
.gd-nav-btn{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:#dde6fb!important;color:var(--text);
  display:flex;align-items:center;justify-content:center;
  transition:background .14s;
}
.gd-nav-btn:hover{background:#cddafb!important}
.gd-nav-btn svg{width:18px;height:18px}
.gd-nav-btn:disabled{
  opacity:.4;cursor:not-allowed;background:#eceff5;
}
.gd-nav-btn:disabled:hover{background:#eceff5}

/*──────────────────────────────────────────────
  TODAY'S OUTCOME
──────────────────────────────────────────────*/
.gd-outcome{
  display:flex;align-items:flex-start;gap:12px;
  background:#f3fbf3;border:1.5px solid #bfe6bf;border-radius:var(--r-sm);
  padding:14px 16px;
}
.gd-outcome-ico{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:var(--green-done);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.gd-outcome-ico svg{width:16px;height:16px}
.gd-outcome-title{font-family:var(--font-h);font-weight:700;font-size:.92rem;color:var(--green-done);margin-bottom:2px}
.gd-outcome-text{font-size:.85rem;color:var(--text);font-weight:500;line-height:1.45}

/*──────────────────────────────────────────────
  SECTION LABEL (centered link-style heading)
──────────────────────────────────────────────*/
.gd-section-label{
  text-align:center;font-family:var(--font-h);font-weight:700;
  font-size:1.05rem;color:var(--grape);margin:2px 0 -2px;
}

/*──────────────────────────────────────────────
  VIDEO PLAYER
──────────────────────────────────────────────*/
.gd-video-row{display:flex;align-items:center;gap:8px}
.gd-video-wrap{
  position:relative;width:100%;min-width:0;
  border-radius:var(--r);overflow:hidden;background:#1a1a1a;
  aspect-ratio:16/9;
}
.gd-video-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.gd-video-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;z-index:5;
  background:rgba(20,20,20,.45)!important;color:#fff!important;
  display:flex;align-items:center;justify-content:center;
  transition:background .14s;
}
.gd-video-arrow:hover{background:rgba(20,20,20,.7)!important}
.gd-video-arrow svg{width:18px;height:18px}
.gd-video-arrow.gd-arrow-left{left:10px}
.gd-video-arrow.gd-arrow-right{right:10px}

/* Loading spinner — shown until the Vimeo player signals it's ready, and
   again briefly whenever a chapter switch loads a new video. */
.gd-video-loading{
  position:absolute;inset:0;z-index:4;
  display:flex;align-items:center;justify-content:center;
  background:#1a1a1a;pointer-events:none;
  transition:opacity .2s;
}
.gd-video-loading[hidden]{display:none}
.gd-spinner{
  width:38px;height:38px;border-radius:50%;
  border:3px solid rgba(255,255,255,.25);border-top-color:#fff;
  animation:gd-spin .8s linear infinite;
}
@keyframes gd-spin{to{transform:rotate(360deg)}}

/* Mini/pop-out player — stays the exact same DOM node (never moved,
   never recreated) so the Vimeo player instance and its playback
   position are untouched; only its on-screen position changes. A
   placeholder (inserted by JS) holds its normal spot in the page flow
   while it's floating, so nothing else jumps.

   .gd-video-sentinel is watched instead of .gd-video-wrap itself: once
   the wrap goes position:fixed it's visible again (sitting in its new
   corner), which would make an observer watching the wrap directly
   flip-flop endlessly between "back in view" and "scrolled past." The
   sentinel never moves, so its intersection state is a stable read of
   "has the user actually scrolled past this section." */
.gd-video-sentinel{height:1px;margin-top:-1px}
.gd-video-wrap.is-mini{
  position:fixed;right:20px;bottom:20px;z-index:998;
  width:320px;max-width:calc(100vw - 40px);min-width:160px;
  box-shadow:0 12px 34px rgba(0,0,0,.4);
  touch-action:none; /* stop touch-drag from also scrolling the page */
}
.gd-video-wrap.is-mini .gd-video-arrow{display:none}

/* While actively dragging/resizing: kill the transition so the box
   tracks the pointer with zero lag, and disable pointer-events on the
   Vimeo iframe. The iframe is a separate document — once the pointer is
   over it, mousemove/pointermove stop reaching our JS entirely, which
   would freeze the drag the instant the cursor crosses onto the video.
   Turning it off for the duration of the drag routes those events to
   the wrap/handles instead; it's restored the moment the drag ends. */
.gd-video-wrap.is-mini.is-dragging,
.gd-video-wrap.is-mini.is-resizing{
  transition:none;user-select:none;-webkit-user-select:none;
}
.gd-video-wrap.is-mini.is-dragging .gd-video-embed,
.gd-video-wrap.is-mini.is-dragging .gd-video-embed iframe,
.gd-video-wrap.is-mini.is-resizing .gd-video-embed,
.gd-video-wrap.is-mini.is-resizing .gd-video-embed iframe{
  pointer-events:none;
}

/* Drag handle — a slim bar across the top. Needed because the Vimeo
   iframe would otherwise swallow every pointer event over the video
   itself, so dragging has to start from this strip instead. */
.gd-video-mini-bar{
  display:none;position:absolute;top:0;left:0;right:0;height:28px;z-index:5;
  cursor:grab;align-items:center;padding-left:8px;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 100%);
  color:rgba(255,255,255,.75);
}
.gd-video-wrap.is-mini .gd-video-mini-bar{display:flex}
.gd-video-wrap.is-mini.is-dragging .gd-video-mini-bar{cursor:grabbing}
.gd-video-mini-bar svg{width:16px;height:16px;pointer-events:none}

.gd-video-mini-expand,.gd-video-mini-close{
  display:none;position:absolute;z-index:6;
  width:26px;height:26px;border-radius:6px;
  background:rgba(20,20,20,.65)!important;color:#fff!important;
  align-items:center;justify-content:center;border:0;cursor:pointer;
  transition:background .14s;
}
.gd-video-mini-expand:hover,.gd-video-mini-close:hover{background:rgba(20,20,20,.85)!important}
.gd-video-mini-expand svg,.gd-video-mini-close svg{width:14px;height:14px}
.gd-video-wrap.is-mini .gd-video-mini-expand,
.gd-video-wrap.is-mini .gd-video-mini-close{display:flex}
.gd-video-wrap.is-mini .gd-video-mini-expand{top:6px;right:34px}
.gd-video-wrap.is-mini .gd-video-mini-close{top:6px;right:6px}

/* Resize grip — bottom-right corner. Width changes only; height follows
   automatically via aspect-ratio:16/9 on .gd-video-wrap. */
.gd-video-mini-resize{
  display:none;position:absolute;right:0;bottom:0;width:18px;height:18px;z-index:6;
  cursor:nwse-resize;touch-action:none;
  background:linear-gradient(135deg,transparent 50%,rgba(255,255,255,.55) 50%);
  border-bottom-right-radius:var(--r);
}
.gd-video-wrap.is-mini .gd-video-mini-resize{display:block}

@media(max-width:520px){
  .gd-video-wrap.is-mini{width:220px}
}
.gd-video-controls{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.78) 100%);
  padding:22px 14px 10px;display:flex;flex-direction:column;gap:6px;
}
.gd-video-bar{position:relative;height:4px;border-radius:4px;background:rgba(255,255,255,.35)}
.gd-video-bar-fill{position:absolute;left:0;top:0;height:100%;border-radius:4px;background:#fff;width:18%}
.gd-video-bar-fill::after{
  content:'';position:absolute;right:-6px;top:50%;transform:translateY(-50%);
  width:12px;height:12px;border-radius:50%;background:#fff;
}
.gd-video-controls-row{display:flex;align-items:center;gap:12px;color:#fff}
.gd-video-controls-row svg{width:18px;height:18px;flex-shrink:0;cursor:pointer}
.gd-video-time{font-size:.74rem;font-weight:600;white-space:nowrap}
.gd-video-spacer{flex:1}
.gd-video-controls-row .gd-cc{
  font-size:.62rem;font-weight:800;border:1.5px solid #fff;border-radius:3px;
  padding:1px 4px;line-height:1.2;cursor:pointer;
}
/*──────────────────────────────────────────────
  STEP / CHAPTER LIST
──────────────────────────────────────────────*/
.gd-list-head{display:flex;justify-content:flex-end;margin-bottom:-4px}
.gd-list-head span{font-size:.78rem;font-weight:700;color:var(--gray-dark)}

.gd-chapters{display:flex;flex-direction:column;gap:2px}

.gd-step{
  display:flex;align-items:center;gap:12px;
  padding:11px 10px;border-radius:8px;cursor:pointer;
  border:1.5px solid transparent;
  transition:background .12s,border-color .12s;
}
.gd-step:hover{background:var(--gray-bg)}
.gd-step-num{
  width:27px;height:27px;border-radius:50%;flex-shrink:0;
  border:1.5px solid var(--grape);color:var(--grape);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-h);font-weight:700;font-size:.78rem;
}
.gd-step-title{flex:1;min-width:0;font-family:var(--font-h);font-weight:700;font-size:.92rem;color:var(--grape)}
.gd-step-right{font-size:.78rem;font-weight:700;color:var(--green-done);flex-shrink:0;display:flex;align-items:center;gap:4px}
.gd-step-right svg{width:14px;height:14px}
.gd-step-arr{color:var(--gray-mid);font-size:1.2rem;flex-shrink:0}

/* "Now Playing" highlighted state */
.gd-step.now-playing{
  background:#eef8ee;border-color:#bfe6bf;
}
.gd-step.now-playing .gd-step-num{
  background:var(--green-done);border-color:var(--green-done);color:#fff;
}
.gd-step.now-playing .gd-step-title{color:var(--green-done)}
.gd-step.now-playing .gd-step-arr{color:var(--green-done)}

/* Sub-step rows (Compare Mechanics / Optional Support / Geek Out / See Others Play It) */
.gd-substeps{display:flex;flex-direction:column;gap:2px;margin:2px 0 6px;padding-left:39px}
.gd-substep-head{
  display:flex;align-items:flex-start;gap:10px;
  padding:9px 6px;border-radius:8px;cursor:pointer;
}
.gd-substep-head:hover{background:var(--gray-bg)}
.gd-substep-ico{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;margin-top:1px;
  background:#fdecea;color:var(--red);
  display:flex;align-items:center;justify-content:center;
}
.gd-substep-ico svg{width:13px;height:13px}
.gd-substep-body{flex:1;min-width:0}
.gd-substep-title{font-family:var(--font-h);font-weight:700;font-size:.86rem;color:var(--grape)}
.gd-substep-sub{font-size:.76rem;color:var(--gray-dark);font-weight:500;margin-top:1px}
.gd-substep-chev{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;margin-top:1px;
  border:1.5px solid var(--grape);color:var(--grape);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s;
}
.gd-substep-chev svg{width:11px;height:11px}
.gd-substep.open .gd-substep-chev{transform:rotate(180deg)}
.gd-substep-panel{max-height:0;overflow:hidden;padding:0 6px;transition:max-height .25s ease}
.gd-substep.open .gd-substep-panel{padding-top:4px;padding-bottom:16px}

/* Top-level paw row (See Why This Matters for Other Archetypes) */
.gd-toplevel{padding-left:0}
.gd-toplevel .gd-substep-ico{background:#e7eff6;color:var(--blue);width:28px;height:28px}
.gd-toplevel .gd-substep-ico svg{width:15px;height:15px}
.gd-toplevel .gd-substep-title{font-size:.92rem}

/*──────────────────────────────────────────────
  ACCORDION PANEL CONTENT (shared)
──────────────────────────────────────────────*/
.gd-acc-text{font-size:.85rem;color:var(--text);font-weight:500;line-height:1.6;margin-bottom:10px}

/* Geek Out — resource cards, 2 per row (1 on small/mobile). */
.gd-geekout-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:12px;margin-top:4px;
}
.gd-geekout-card{
  display:flex;align-items:center;gap:10px;
  background:var(--blue-pale);border:1.5px solid #c3d8e8;border-radius:var(--r-sm);
  padding:12px;
  transition:background .14s,transform .1s;
}
.gd-geekout-card:hover{background:#dde8fd;transform:translateY(-1px)}
.gd-geekout-ico{
  align-self:center;flex-shrink:0;width:34px;height:34px;border-radius:7px;
  background:#fff;border:1.5px solid #c3d8e8;color:var(--blue);
  display:flex;align-items:center;justify-content:center;
}
.gd-geekout-ico svg{width:17px;height:17px}
.gd-geekout-body{flex:1;min-width:0}
.gd-geekout-title{
  display:block;font-family:var(--font-h);font-weight:700;font-size:.88rem;color:var(--text);
  line-height:1.3; /* titles wrap across multiple lines when long, rather than truncating */
}
.gd-geekout-type{
  display:block;font-size:.72rem;color:var(--blue);font-weight:700;
  text-transform:capitalize;margin-top:2px;
}
/* Fixed-size circle — deliberately NOT sized off the card's height (that
   was making it grow, and bleed past the card's own padding, as a long
   title wrapped across more lines). Stays the same diameter and stays
   centered no matter how tall the card gets. */
.gd-geekout-action{
  flex-shrink:0;align-self:center;margin-left:auto;
  width:38px;height:38px;border-radius:50%;
  background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.35), inset 0 -1px 2px rgba(255,255,255,.18);
}
.gd-geekout-action svg{width:15px;height:15px}
.gd-geekout-action--pdf{background:var(--green-done)}
.gd-geekout-card[role="button"]{cursor:pointer}
.gd-geekout-card[role="button"]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:640px){
  .gd-geekout-grid{grid-template-columns:1fr}
}

/* Compare-mechanics: side-by-side mini video + upload card */
.gd-compare-row{display:flex;gap:14px;flex-wrap:wrap}
.gd-mini-video{
  position:relative;width:150px;height:104px;border-radius:var(--r-sm);
  overflow:hidden;background:#1a1a1a;flex-shrink:0;
}
.gd-mini-video img{width:100%;height:100%;object-fit:cover}
.gd-mini-video-bar{
  position:absolute;left:8px;right:8px;bottom:8px;
  display:flex;align-items:center;gap:6px;color:#fff;
}
.gd-mini-video-bar svg{width:13px;height:13px;flex-shrink:0}
.gd-mini-video-time{font-size:.62rem;font-weight:600;white-space:nowrap}
.gd-mini-video-track{position:relative;flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.4)}
.gd-mini-video-track-fill{position:absolute;left:0;top:0;height:100%;width:0%;border-radius:3px;background:#fff}

.gd-upload-block{flex:1;min-width:200px;display:flex;flex-direction:column;gap:8px}
.gd-upload-btn{
  display:flex;align-items:center;gap:12px;width:100%;
  border:1.5px solid var(--blue);border-radius:var(--r-sm);
  background:#fff;padding:11px 14px;text-align:left;
  transition:background .14s;
}
.gd-upload-btn:hover{background:var(--blue-pale)}
.gd-upload-btn-ico{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:var(--blue-pale);color:var(--blue);
  display:flex;align-items:center;justify-content:center;
}
.gd-upload-btn-ico svg{width:16px;height:16px}
.gd-upload-btn-text{flex:1;min-width:0}
.gd-upload-btn-title{font-family:var(--font-h);font-weight:700;font-size:.85rem;color:var(--blue)}
.gd-upload-btn-sub{font-size:.72rem;color:var(--gray-dark);font-weight:500;margin-top:1px}
.gd-upload-btn-arr{color:var(--blue);font-size:1.1rem;flex-shrink:0}
.gd-upload-note{
  display:flex;align-items:flex-start;gap:7px;
  font-size:.72rem;color:var(--gray-dark);font-weight:500;line-height:1.4;
  padding:0 2px;
}
.gd-upload-note svg{width:13px;height:13px;flex-shrink:0;margin-top:2px}

/* Browser-only mechanics comparison. The whole row is server-rendered only
   for a numeric ACF Vimeo ID and remains hidden until the browser confirms
   that Vimeo resolves it. */
.gd-mechanics[hidden]{display:none!important}
.gd-compare-filepond{width:100%}
.gd-compare-filepond .filepond--root{
  min-height:56px;margin:0;font-family:var(--font-b);cursor:pointer;
}
.gd-compare-filepond .filepond--panel-root{
  border:1.5px solid var(--blue);border-radius:var(--r-sm);
  background:#fff;box-shadow:0 1px 2px rgba(30,80,150,.05);
  transition:background .14s,border-color .14s,box-shadow .14s;
}
.gd-compare-filepond .filepond--root:hover .filepond--panel-root,
.gd-compare-filepond .filepond--root:focus-within .filepond--panel-root{
  border-color:#4b83c5;background:#f8fbff;box-shadow:0 2px 8px rgba(45,108,190,.12);
}
.gd-compare-filepond .filepond--drop-label{min-height:56px;color:var(--blue)}
.gd-compare-filepond .filepond--drop-label label{display:block;width:100%;padding:0;cursor:pointer}
.gd-filepond-idle{
  display:flex;align-items:center;gap:11px;width:100%;min-height:56px;
  padding:10px 13px;text-align:left;
}
.gd-filepond-idle .gd-upload-btn-ico{
  width:32px;height:32px;background:#e5f1ff;box-shadow:inset 0 0 0 1px rgba(45,108,190,.06);
}
.gd-filepond-idle .gd-upload-btn-text{
  display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;line-height:1.25;
}
.gd-filepond-idle .gd-upload-btn-title{font-size:.85rem;line-height:1.25}
.gd-filepond-idle .gd-upload-btn-sub{font-size:.72rem;line-height:1.35;margin:0}
.gd-filepond-idle .gd-upload-btn-arr{margin-left:auto}
.gd-compare-filepond .filepond--item{margin:.42em}
.gd-compare-filepond .filepond--item-panel{
  background:#edf5ff!important;border:1px solid #c5dbf4;border-radius:8px;
  box-shadow:none;
}
.gd-compare-filepond .filepond--file{
  color:var(--text);font-family:var(--font-b);font-size:.76rem;font-weight:600;
}
.gd-compare-filepond .filepond--file-status{color:var(--gray-dark);font-size:.66rem}
.gd-compare-filepond .filepond--file-status-sub{color:var(--gray-dark);opacity:.8}
.gd-compare-filepond .filepond--file-action-button{
  width:24px;height:24px;background:#2d6cbe;color:#fff;box-shadow:none;
}
.gd-compare-filepond .filepond--file-action-button:hover{background:#1f569c}
.gd-compare-filepond .filepond--credits{display:none}

.gd-compare-reopen{
  align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:38px;padding:8px 13px;border:1.5px solid var(--blue);border-radius:8px;
  background:#2d6cbe!important;color:#fff!important;font-family:var(--font-b);font-size:.76rem;
  font-weight:700;box-shadow:0 3px 10px rgba(45,108,190,.15);cursor:pointer;
  transition:background .14s,transform .14s,box-shadow .14s;
}
.gd-compare-reopen:hover{background:#1f569c!important;transform:translateY(-1px);box-shadow:0 5px 14px rgba(45,108,190,.2)}
.gd-compare-reopen:focus-visible{outline:3px solid rgba(45,108,190,.22);outline-offset:2px}
.gd-compare-reopen svg{width:15px;height:15px}
.gd-compare-reopen[hidden]{display:none!important}

body.gd-compare-modal-open{overflow:hidden}
.gd-compare-modal{z-index:1100}
.gd-compare-modal:not(.is-open){display:none!important}
.ss-modal-panel.gd-compare-modal-panel{
  width:min(1180px,calc(100vw - 32px));max-width:1180px;
  max-height:calc(100vh - 32px);overflow:auto;
  padding:24px;background:#fff;
}
.gd-compare-modal-panel .ss-modal-close{z-index:2}
.gd-compare-modal-title{
  margin:0;padding-right:38px;
  font-family:var(--font-h);font-size:1.25rem;font-weight:800;color:var(--text);
}
.gd-compare-modal-description{
  margin:5px 38px 18px 0;font-size:.84rem;font-weight:500;line-height:1.55;color:var(--gray-dark);
}
.gd-compare-videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.gd-compare-video-column{min-width:0}
.gd-compare-video-label{
  margin-bottom:7px;font-family:var(--font-h);font-size:.82rem;font-weight:700;color:var(--blue);
}
.gd-compare-video-frame{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--r-sm);background:#111;box-shadow:0 7px 22px rgba(20,30,60,.18);
}
.gd-compare-video-frame>div,.gd-compare-video-frame iframe{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  padding:0!important;border:0;
}
.gd-compare-video-frame video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.gd-compare-modal-actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.gd-compare-control{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:42px;min-width:142px;border:1.5px solid #2d6cbe!important;
  border-radius:8px;padding:9px 16px;background:#2d6cbe!important;
  color:#fff!important;font-family:var(--font-b);font-size:.8rem;font-weight:700;cursor:pointer;
  box-shadow:0 3px 10px rgba(45,108,190,.18);transition:background .14s,transform .14s,box-shadow .14s;
}
.gd-compare-control:hover{background:#1f569c!important;transform:translateY(-1px);box-shadow:0 5px 14px rgba(45,108,190,.24)}
.gd-compare-control:focus-visible{outline:3px solid rgba(45,108,190,.24);outline-offset:2px}
.gd-compare-control:disabled{opacity:.55;transform:none!important;cursor:not-allowed;box-shadow:none}
.gd-compare-control svg{width:16px;height:16px}
.gd-compare-control span{color:inherit}
.gd-compare-restart-control{background:#fff!important;color:#2d6cbe!important;box-shadow:none}
.gd-compare-restart-control:hover{background:#edf5ff!important;color:#1f569c!important;box-shadow:0 3px 10px rgba(45,108,190,.14)}
.gd-compare-restart-control svg{width:15px;height:15px}
.gd-compare-status{flex-basis:100%;color:var(--gray-dark);font-size:.72rem;font-weight:600;text-align:center;min-height:1.2em}
.gd-compare-status.is-error{color:#b42318}

/* Video tile grids — used by "See Others Play It", "Optional Support",
   and "See Why This Matters for Other Archetypes" panels */
.gd-vid-grid{display:flex;gap:14px;flex-wrap:wrap}
.gd-vid-tile{flex:1 1 0;min-width:130px}
.gd-vid-cap-top{
  text-align:center;font-family:var(--font-h);font-weight:700;font-size:.82rem;
  color:var(--grape);margin-bottom:7px;
}
.gd-vid-thumb{
  position:relative;border-radius:8px;overflow:hidden;
  aspect-ratio:4/3;background:#1a1a1a;
}
.gd-vid-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gd-vid-duration{
  position:absolute;bottom:6px;right:6px;z-index:2;
  background:rgba(0,0,0,.72);color:#fff;font-size:.66rem;font-weight:700;
  padding:1px 6px;border-radius:4px;
}
.gd-vid-play{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--text);
  display:flex;align-items:center;justify-content:center;
}
.gd-vid-play svg{width:42%;height:42%;margin-left:2px}
/* small play icon, bottom-left — used on "See Others Play It" */
.gd-vid-tile.cap-below .gd-vid-play{left:7px;bottom:7px;width:24px;height:24px}
/* big centered play icon — used on Optional Support / Archetypes */
.gd-vid-tile.cap-above .gd-vid-play{left:50%;top:50%;transform:translate(-50%,-50%);width:40px;height:40px}
.gd-vid-cap-bottom{margin-top:7px}
.gd-vid-cap-title{font-family:var(--font-h);font-weight:700;font-size:.82rem;color:var(--text)}
.gd-vid-cap-sub{font-size:.74rem;color:var(--blue);font-weight:600;margin-top:1px}

/*──────────────────────────────────────────────
  SIDEBAR — MILESTONE PROGRESS
  Shared identically by the Game Day page and the
  Milestone Lesson page — see
  recallers_gd_render_progress_icons_strip().
──────────────────────────────────────────────*/
.gd-progress-icons-wrap{
  --gd-pi-size:54px;--gd-pi-gap:12px;
  display:flex;align-items:center;gap:8px;
  padding:6px 0 8px;
}
.gd-progress-icons-wrap .gd-nav-btn{width:30px;height:30px;flex-shrink:0}
.gd-progress-icons-wrap .gd-nav-btn svg{width:15px;height:15px}
.gd-progress-icons{
  display:flex;align-items:center;gap:var(--gd-pi-gap);
  overflow-x:auto;scrollbar-width:none;
  cursor:grab;user-select:none;-webkit-user-select:none;
  flex:1;min-width:0;
  scroll-behavior:smooth;
  /* Vertical breathing room for the badges, which sit right at the
     icon's edge (top:0 / bottom:0) — needed because overflow-x:auto
     forces overflow-y:auto too, so anything poking past the row's own
     box (badges included) would otherwise get clipped. */
  padding:6px 2px;
}
.gd-progress-icons.is-dragging{cursor:grabbing;scroll-behavior:auto}
.gd-progress-icons::-webkit-scrollbar{display:none}
.gd-progress-icons img,.gd-progress-icons svg{-webkit-user-drag:none}
.gd-pi{
  position:relative;
  width:var(--gd-pi-size);height:var(--gd-pi-size);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
}
/* Round, milestone-color-filled badge that houses the milestone's SVG
   artwork — the artwork itself is sized down (with overflow hidden) so
   there's a visible ring of the brand color as padding around it. */
.gd-pi-circle{
  width:100%;height:100%;border-radius:100%;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.gd-pi-circle img{width:70%;height:70%;object-fit:contain;pointer-events:none}
.gd-pi-static img{width:100%;height:100%;object-fit:contain;pointer-events:none}
/* Locked, or unlocked-with-zero-progress-and-not-viewing — greyed out
   (both the brand-color circle and the artwork on it, together).
   Locked is additionally non-clickable (rendered as a <span>, not an
   <a>, in recallers_gd_render_progress_icons_strip()). */
.gd-pi.is-greyed .gd-pi-circle{filter:grayscale(1);background:#cacaca !important}
.gd-pi.is-greyed .gd-pi-badge-bl--number{background:#9e9d9c !important}
.gd-pi.is-locked{cursor:not-allowed}
.gd-pi-static{cursor:default}

/* Top-right status badge — green check for a completed milestone, blue
   star for the 'next' one (see recallers_gd_milestone_progress_icons()).
   top:0 (not a negative offset) so it never gets clipped by the strip's
   forced overflow-y:auto. */
.gd-pi-badge{
  position:absolute;top:0;left:-5px;z-index:1;
  width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px #fff;
}
.gd-pi-badge svg{width:11px;height:11px}
.gd-pi-badge--complete{background:var(--green-done)}
.gd-pi-badge--next{background:var(--blue)}

/* Bottom-left badge — the milestone's own number on its brand color by
   default; swapped for a white "eye" badge (bold black icon) when this
   is the milestone or game page the user is actually viewing right now.
   Same size/offset pattern as the top-right badge, for the same
   clipping reason. */
.gd-pi-badge-bl{
  position:absolute;bottom:0;right:-5px;z-index:1;
  width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px #fff;
  font-family:var(--font-b);font-size:.62rem;font-weight:800;color:#fff;
}
.gd-pi-badge-bl--eye{background:#fff;box-shadow:0 0 0 2px var(--gray-line)}
.gd-pi-badge-bl--eye svg{width:12px;height:12px}
@media(max-width:760px){
  .gd-progress-icons-wrap{--gd-pi-size:60px;--gd-pi-gap:9px}
  .gd-progress-icons-wrap .gd-nav-btn{width:26px;height:26px}
  .gd-progress-icons-wrap .gd-nav-btn svg{width:13px;height:13px}
}

.gd-games-label{font-size:.85rem;font-weight:700;color:var(--text);margin:10px 0 6px}
.gd-segments{display:flex;gap:5px;margin-bottom:6px}
.gd-segment{flex:1;height:6px;border-radius:4px;background:var(--gray-line)}
.gd-segment.is-filled{background:var(--green-done)}
.gd-game-count{font-size:.8rem;font-weight:700;color:var(--text)}

/*──────────────────────────────────────────────
  SIDEBAR — GAME TOOLKIT
──────────────────────────────────────────────*/
.gd-toolkit-card{
  display:flex;align-items:flex-start;gap:12px;
  background:#f3fbf3;border:1.5px solid #bfe6bf;border-radius:var(--r);
  padding:16px;margin-top:10px;
}
.gd-toolkit-ico{
  width:34px;height:34px;border-radius:7px;flex-shrink:0;
  background:#fff;border:1.5px solid #bfe6bf;
  display:flex;align-items:center;justify-content:center;
}
.gd-toolkit-body{flex:1;min-width:0}
.gd-toolkit-title{font-family:var(--font-h);font-weight:700;font-size:.95rem;color:var(--text);margin-bottom:2px}
.gd-toolkit-sub{font-size:.78rem;color:var(--gray-dark);font-weight:500;margin-bottom:10px}
.gd-btn-green{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;background:var(--green-done);color:#fff;
  border-radius:var(--r-sm);font-size:.88rem;font-weight:700;
  padding:11px 14px;transition:background .15s;
}
.gd-btn-green:hover{background:#256528}
.gd-btn-green svg{width:16px;height:16px}

.gd-btn-blue-full{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;background:var(--blue)!important;color:#fff!important;
  border-radius:var(--r-sm);font-size:.9rem;font-weight:700;
  padding:13px 14px;margin-top:14px;transition:background .15s,transform .1s;
}
.gd-btn-blue-full:hover{background:var(--blue-hover)!important;transform:translateY(-1px)}
.gd-btn-blue-full svg{width:16px;height:16px}

.gd-quiz-card{
  display:flex;align-items:center;gap:12px;
  background:var(--blue-pale);border:1.5px solid #c3d8e8;border-radius:var(--r);
  padding:16px;margin-top:10px;cursor:pointer;transition:background .14s;
}
.gd-quiz-card:hover{background:#dde8fd}
.gd-quiz-ico{
  width:34px;height:34px;border-radius:7px;flex-shrink:0;
  background:#fff;border:1.5px solid #c3d8e8;color:var(--blue);
  display:flex;align-items:center;justify-content:center;
}
.gd-quiz-ico svg{width:17px;height:17px}
.gd-quiz-body{flex:1;min-width:0}
.gd-quiz-title{font-family:var(--font-h);font-weight:700;font-size:.92rem;color:var(--text)}
.gd-quiz-sub{font-size:.76rem;color:var(--gray-dark);font-weight:500;margin-top:1px}
.gd-quiz-arr{color:var(--blue);font-size:1.2rem;flex-shrink:0}

/*──────────────────────────────────────────────
  SIDEBAR — READY TO PROGRESS
──────────────────────────────────────────────*/
.gd-ready-title{font-family:var(--font-h);font-weight:700;font-size:1.1rem;color:var(--text);margin-top:18px;margin-bottom:2px}
.gd-ready-sub{font-size:.8rem;color:var(--blue);font-weight:600;margin-bottom:12px}
.gd-checklist{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.gd-check-item{display:flex;align-items:center;gap:10px;position:relative;cursor:pointer}
.gd-checklist[data-locked="1"] .gd-check-item{cursor:default}
.gd-check-input{
  position:absolute;top:0;left:0;width:20px;height:20px;margin:0;
  opacity:0;cursor:pointer;
}
.gd-check-input:disabled{cursor:default}
.gd-check-tick{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  background:#e3e6ea;color:#8f899b;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;
}
.gd-check-tick svg{width:11px;height:11px}
.gd-check-input:checked + .gd-check-tick{background:var(--green-done);color:#fff}
.gd-check-input:focus-visible + .gd-check-tick{outline:2px solid var(--blue);outline-offset:2px}
.gd-check-text{font-size:.85rem;color:var(--text);font-weight:600}

.gd-cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;background:var(--navy)!important;color:#fff!important;
  border-radius:var(--r-sm);font-family:var(--font-b);font-size:.92rem;font-weight:700;
  padding:14px 16px;transition:background .15s,transform .1s;
}
.gd-cta:hover{background:var(--blue)!important;transform:translateY(-1px)}
.gd-cta svg{width:17px;height:17px}
.gd-cta:disabled{
  background:#c7ccd6!important;color:#8a929e!important;cursor:not-allowed;transform:none;
}
.gd-cta:disabled:hover{background:#c7ccd6!important;transform:none}
.gd-cta--done{background:var(--green-done)!important;cursor:default}
.gd-cta--done:hover{background:var(--green-done)!important;transform:none}
.gd-cta--done:disabled{
  background:var(--green-done)!important;color:#fff!important;cursor:default;transform:none;
}
.gd-cta--done:disabled:hover{
  background:#c7ccd6!important;
  cursor:not-allowed;
}
.gd-btn-spinner{
  width:16px;height:16px;border-radius:50%;flex-shrink:0;
  border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:gd-spin .7s linear infinite;
}
.gd-cta-note{
  text-align:center;font-size:.78rem;color:var(--blue);font-weight:600;
  margin-top:8px;
}

/*──────────────────────────────────────────────
  DYNAMIC TOPIC.PHP INTEGRATION
  Added when page-gameday-content.php was wired up as the real
  LearnDash Topic template (see topic.php + recallers-gameday-
  template.php) instead of a standalone page-gameday.php page — this
  page doesn't have its own "#page .page" grid ancestor to key off of,
  so #recallers-gameday-page carries the grid itself, same properties
  as "#page :not(article).page" above.
──────────────────────────────────────────────*/
#recallers-gameday-page.gd-page{
  display:grid;
  grid-template-columns:minmax(0,1fr) 400px;
  gap:24px;
  max-width:1500px;margin:0 auto;
  padding:26px 28px;
  align-items:start;
}

/* Vimeo Player SDK injects an iframe into this div — fills the same box
   the mockup's <img> used to. */
.gd-video-embed{position:absolute;inset:0;width:100%;height:100%}
/* Vimeo Player SDK may still insert its own wrapper div(s) around the
   iframe (e.g. a `.fluid-width-video-wrapper` with an inline
   padding-top percentage) — force them flat regardless, so a future SDK
   version can't reintroduce the "pushed below the visible area" bug.
   !important is required: these are inline styles set by third-party JS. */
.gd-video-embed > div{position:absolute!important;inset:0!important;padding:0!important;width:100%!important;height:100%!important}
.gd-video-embed iframe{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0}

/* "Start Game" button — sits between the selector label and the next
   arrow, only shown (via JS) when the arrows have moved the selector
   away from the game the user is actually on. */
.gd-start-game-btn{
  flex-shrink:0;background:var(--blue);color:#fff;
  font-family:var(--font-b);font-size:.8rem;font-weight:700;
  border-radius:8px;padding:9px 14px;white-space:nowrap;
  transition:background .14s;
}
.gd-start-game-btn:hover{background:#1e46b8}
.gd-start-game-btn[hidden]{display:none!important}
.gd-start-game-btn.is-locked{background:var(--gray-mid);cursor:not-allowed;display:inline-flex;align-items:center;gap:6px}
.gd-start-game-btn.is-locked:hover{background:var(--gray-mid)}
.gd-start-game-btn.is-locked svg{width:14px;height:14px;flex-shrink:0}
.gd-nav-btn[hidden]{visibility:hidden}

/* Video-tile lightbox — reuses .ss-modal's overlay/backdrop/panel shape,
   but with its own sizing/background so the shared .ss-modal-panel /
   .ss-modal-video base rules (used by other modals too — Student
   Snapshot's Reflection modal, Coach Queue's preview modal) stay
   untouched. */
.ss-modal-panel.gd-vid-modal-panel{
  background:transparent;padding:20px;
  max-width:1200px;
  box-shadow:none;
}
.ss-modal-video.gd-vid-modal-video{box-shadow:0 0px 25px rgba(20, 30, 60, .3);}
.gd-vid-modal-panel .ss-modal-close{
  position:absolute;
  top:0px;right:0px;
  background:#fff;color:var(--text);
  box-shadow:0 0 8px rgba(0,0,0,.35);
  z-index:1001;
}
.gd-vid-modal-panel .ss-modal-close:hover{background:#f2f2f2}
.gd-vid-tile{cursor:pointer}

/*──────────────────────────────────────────────
  RESPONSIVE — app mode ≤760px
──────────────────────────────────────────────*/
@media(max-width:1040px){
  #recallers-gameday-page.gd-page{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .gd-title{font-size:1.4rem}
  .gd-selector{padding:12px 14px}
  .gd-selector-name{font-size:1.1rem}
  .gd-nav-btn{width:30px;height:30px}
  .gd-video-arrow{width:30px;height:30px}
  .gd-compare-row{flex-direction:column}
  .gd-mini-video{width:100%;height:160px}
  .gd-toolkit-card,.gd-quiz-card{padding:14px}
  .gd-ready-title{font-size:1rem}
  .gd-substeps{padding-left:24px}
  .gd-filepond-idle .gd-upload-btn-text{align-items:flex-start;gap:1px;flex-direction:column}
  .gd-compare-videos{grid-template-columns:1fr}
  .ss-modal-panel.gd-compare-modal-panel{padding:18px}
  .gd-compare-modal-description{margin-right:28px}
  .gd-compare-modal-actions{align-items:center;flex-direction:column}
  .gd-compare-control{width:auto;min-width:160px}
  .gd-vid-grid{gap:10px}
  .gd-vid-tile{flex:1 1 calc(50% - 5px);min-width:120px}
  #recallers-gameday-page.gd-page{padding:14px 12px 12px;gap:16px;max-width:100vw;overflow-x:hidden}
}

/*================================================================
  PAGE: MILESTONE COMPLETE
  Styles for: recallers-milestone-lesson-template.php (the .msc-*
  classes it renders in every state, not just 'complete').
  Append this whole block to recallers-main.css, right after the
  "PAGE: GAME DAY" section (do not duplicate the GLOBAL tokens).
================================================================*/

/*──────────────────────────────────────────────
  LOCAL TOKEN — accent violet used only on this
  page's primary actions (Save / Start Next)
──────────────────────────────────────────────*/
:root{
  --violet:#391e5d;
  --violet-hover:#2a1546;
}

/*──────────────────────────────────────────────
  TITLE
──────────────────────────────────────────────*/
.msc-title{
  font-family:var(--font-h);font-weight:800;font-size:1.7rem;
  color:var(--text);line-height:1.2;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.msc-sub{font-size:.88rem;color:var(--gray-dark);font-weight:500;margin-top:2px}

/*──────────────────────────────────────────────
  INFO BAR (dog / archetype / completed date)
──────────────────────────────────────────────*/
.msc-infobar{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--r);
  padding:14px 20px;
}
.msc-info-dog{display:flex;align-items:center;gap:12px}
.msc-dog-thumb{position:relative;width:46px;height:46px;border-radius:50%;overflow:hidden;flex-shrink:0}
.msc-dog-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.msc-dog-hex{
  position:absolute;right:-6px;bottom:-4px;
  width:22px;height:22px;border-radius:6px;background:var(--orange);
  color:#fff;font-family:var(--font-h);font-weight:800;font-size:.7rem;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;
}
.msc-dog-name{font-family:var(--font-h);font-weight:800;font-size:1.05rem;color:var(--text)}

.msc-info-sep{width:1px;height:30px;background:var(--gray-line);flex-shrink:0}

.msc-info-item{display:flex;align-items:center;gap:10px}
.msc-info-ico{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:var(--blue-pale);color:var(--blue);
  display:flex;align-items:center;justify-content:center;
}
.msc-info-ico.is-done{background:#eef8ee;color:var(--green-done)}
.msc-info-ico svg{width:15px;height:15px}
.msc-info-label{font-size:.72rem;color:var(--gray-dark);font-weight:600}
.msc-info-value{font-family:var(--font-h);font-weight:700;font-size:.88rem;color:var(--text);margin-top:1px}

/*──────────────────────────────────────────────
  CERTIFICATE REWARD CARD
──────────────────────────────────────────────*/
.msc-certificate-card{
  position:relative;overflow:hidden;margin-top:16px;padding:20px;
  border:1px solid #d9caed;border-radius:var(--r);
  background:linear-gradient(145deg,#fbf9ff 0%,#f0e9ff 100%);
  box-shadow:0 8px 20px rgba(57,30,93,.08);
}
.msc-certificate-card::after{
  content:"";position:absolute;right:-34px;top:-42px;width:116px;height:116px;
  border-radius:50%;background:rgba(255,255,255,.56);pointer-events:none;
}
.msc-certificate-card--course{margin-top:20px;padding:23px 22px;border-color:#b9d98f;background:linear-gradient(145deg,#fdfff8 0%,#edf8dc 58%,#e5f2ca 100%);box-shadow:0 12px 28px rgba(112,157,52,.16)}
.msc-certificate-card--locked{border-color:#d8dce7;background:linear-gradient(145deg,#fbfcff 0%,#eef1f8 100%);box-shadow:0 8px 20px rgba(49,61,91,.07)}
.msc-certificate-card--course.msc-certificate-card--locked{border-color:#cbd8ed;background:linear-gradient(145deg,#fcfdff 0%,#eef3fb 55%,#e4ebf7 100%);box-shadow:0 12px 28px rgba(65,91,133,.13)}
.msc-certificate-spark{position:absolute;z-index:1;color:var(--green-done);font-size:1.2rem;line-height:1}
.msc-certificate-spark--one{right:26px;top:18px}
.msc-certificate-spark--two{right:15px;top:45px;color:var(--violet);font-size:.72rem}
.msc-certificate-head{position:relative;z-index:1;display:flex;align-items:center;gap:12px}
.msc-certificate-badge{
  display:flex;align-items:center;justify-content:center;flex:0 0 48px;width:48px;height:48px;
  border-radius:15px;background:var(--violet);color:#fff;
  box-shadow:0 5px 12px rgba(57,30,93,.22);transform:rotate(-4deg)
}
.msc-certificate-card--course .msc-certificate-badge{background:var(--green-done);box-shadow:0 5px 12px rgba(112,157,52,.25)}
.msc-certificate-card--locked .msc-certificate-badge{background:#8a91a4;box-shadow:0 5px 12px rgba(69,78,102,.18);transform:none}
.msc-certificate-card--course .msc-certificate-badge{flex-basis:56px;width:56px;height:56px;border-radius:18px;box-shadow:0 7px 16px rgba(112,157,52,.3);transform:rotate(-5deg)}
.msc-certificate-card--course.msc-certificate-card--locked .msc-certificate-badge{background:#71809d;box-shadow:0 7px 16px rgba(69,91,126,.2);transform:rotate(-3deg)}
.msc-certificate-badge svg{width:27px;height:27px}
.msc-certificate-card--course .msc-certificate-badge svg{width:31px;height:31px}
.msc-certificate-eyebrow{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--violet);line-height:1.2;padding-right:34px}
.msc-certificate-card--course .msc-certificate-eyebrow{color:#5c8727}
.msc-certificate-card--locked .msc-certificate-eyebrow{color:#68728b}
.msc-certificate-course-ribbon{position:relative;z-index:1;display:flex;align-items:center;gap:6px;margin-bottom:12px;color:#5b8726;font-size:.64rem;font-weight:900;letter-spacing:.08em;line-height:1;text-transform:uppercase}
.msc-certificate-course-ribbon svg{width:15px;height:15px;flex:0 0 15px}
.msc-certificate-card--course.msc-certificate-card--locked .msc-certificate-course-ribbon{color:#617594}
.msc-certificate-title{margin:3px 0 0;font-family:var(--font-h);font-size:1.1rem;font-weight:800;line-height:1.15;color:var(--text)}
.msc-certificate-card--course .msc-certificate-title{font-size:1.22rem}
.msc-certificate-copy{position:relative;z-index:1;margin:15px 0 17px;color:var(--gray-dark);font-size:.78rem;font-weight:500;line-height:1.45}
.msc-certificate-dog-name{display:inline-block;padding:1px 6px;border-radius:6px;background:#e6dcf6;color:var(--violet);font-weight:800;line-height:1.35;white-space:nowrap}
.msc-certificate-card--course .msc-certificate-dog-name{background:#dfeecb;color:#527b23}
.msc-certificate-card--locked .msc-certificate-dog-name{background:#e1e7f2;color:#566782}
/* "Me & Them" -> "Us." transition chips. Reuses the dog-name chip grammar:
   the "before" recedes into the card's own tint, the "after" is the one warm
   accent on the card. Spans only, so the kses'd copy string still passes. */
.msc-certificate-transition{display:inline-flex;align-items:center;gap:6px;vertical-align:-1px;margin:0 1px}
.msc-certificate-transition-was{padding:1px 7px;border-radius:6px;background:#e6dcf6;color:var(--violet);font-weight:700;line-height:1.35;white-space:nowrap;opacity:.75}
.msc-certificate-transition-arrow{color:var(--violet);font-weight:700;font-size:.9em;font-style:italic;opacity:.75}
.msc-certificate-transition-now{padding:1px 8px;border-radius:6px;background:var(--violet);color:#fff;font-weight:800;line-height:1.35;white-space:nowrap;box-shadow:0 2px 6px rgba(57,30,93,.22)}
.msc-certificate-card--course .msc-certificate-transition-was{background:#dfeecb;color:#527b23}
.msc-certificate-card--course .msc-certificate-transition-arrow{color:#5c8727}
.msc-certificate-card--locked .msc-certificate-transition-was{background:#e1e7f2;color:#566782}
.msc-certificate-card--locked .msc-certificate-transition-arrow{color:#617594}
.msc-certificate-journey{position:relative;z-index:1;margin:0 0 16px;padding:11px 12px;border:1px solid rgba(122,158,63,.25);border-radius:10px;background:rgba(255,255,255,.55)}
.msc-certificate-card--course.msc-certificate-card--locked .msc-certificate-journey{border-color:#c4d1e5;background:rgba(255,255,255,.5)}
.msc-certificate-journey-label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;color:#5c8727;font-size:.68rem;font-weight:800}
.msc-certificate-card--course.msc-certificate-card--locked .msc-certificate-journey-label{color:#617594}
.msc-certificate-journey-label strong{font-size:.7rem;color:var(--text)}
.msc-certificate-journey-dots{display:flex;align-items:center;gap:5px}
.msc-certificate-journey-dots span{display:block;flex:1;height:7px;border-radius:999px;background:#d7dfcc}
.msc-certificate-journey-dots span.is-complete{background:linear-gradient(90deg,#9fc658,#7a9e3f);box-shadow:0 2px 5px rgba(122,158,63,.25)}
.msc-certificate-card--course.msc-certificate-card--locked .msc-certificate-journey-dots span{background:#d5dce8}
.msc-certificate-card--course.msc-certificate-card--locked .msc-certificate-journey-dots span.is-complete{background:linear-gradient(90deg,#8c9db9,#657a9c);box-shadow:none}
.msc-certificate-actions{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.msc-certificate-progress{position:relative;z-index:1;margin:4px 0 14px}
.msc-certificate-progress-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;color:#69728a;font-size:.7rem;font-weight:700}
.msc-certificate-progress-label strong{color:#59647d;font-size:.72rem}
.msc-certificate-progress-track{height:7px;overflow:hidden;border-radius:999px;background:#dfe3ec}
.msc-certificate-progress-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#9ca5ba 0%,#737e99 100%);transition:width .25s ease}
.msc-certificate-card--course .msc-certificate-progress-track{height:9px;background:#d4e2bf}
.msc-certificate-card--course .msc-certificate-progress-track span{background:linear-gradient(90deg,#9fc658 0%,#6f9b31 100%)}
.msc-certificate-card--course.msc-certificate-card--locked .msc-certificate-progress-track{background:#d6deeb}
.msc-certificate-card--course.msc-certificate-card--locked .msc-certificate-progress-track span{background:linear-gradient(90deg,#8c9db9 0%,#617697 100%)}
.msc-certificate-locked-note{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:36px;border:1px dashed #c4cbd9;border-radius:9px;color:#69728a;font-size:.72rem;font-weight:800;text-align:center}
.msc-certificate-locked-note svg{width:14px;height:14px;flex:0 0 14px}
.msc-certificate-action{display:flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:9px 8px;border-radius:9px;font-size:.76rem;font-weight:800;text-align:center;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s}
.msc-certificate-action svg{width:16px;height:16px;flex:0 0 16px}
.msc-certificate-action:hover{transform:translateY(-1px);box-shadow:0 5px 12px rgba(57,30,93,.15)}
.msc-certificate-action--view{background:var(--violet);color:#fff}
.msc-certificate-action--view:hover{background:var(--violet-hover);color:#fff}
.msc-certificate-action--download{background:#fff;color:var(--violet);border:1px solid #d8cbea}
.msc-certificate-action--download:hover{background:#f8f4ff;color:var(--violet)}
.dashboard-certificate-wrap{margin:18px 0 24px}
.dashboard-certificate-wrap .msc-certificate-card{margin-top:0}
.recallers-certificate-celebration{width:min(92vw,560px)!important;padding:34px 38px 30px!important;border-radius:24px!important;border:1px solid #dfd2ef!important;background:linear-gradient(145deg,#fff 0%,#fbf8ff 56%,#f0e8fc 100%)!important;box-shadow:0 22px 60px rgba(57,30,93,.24)!important}
.recallers-certificate-celebration .swal2-icon{width:78px;height:78px;margin:0 auto 17px;border:0;border-radius:24px;background:linear-gradient(145deg,#422066,#2f174d);color:#fff;box-shadow:0 10px 22px rgba(57,30,93,.24);transform:rotate(-3deg)}
.recallers-certificate-celebration .swal2-icon svg{width:49px;height:49px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.recallers-certificate-celebration .swal2-icon.swal2-success .swal2-success-ring,.recallers-certificate-celebration .swal2-icon.swal2-success [class^=swal2-success-line]{display:none}
.recallers-certificate-celebration .swal2-title{margin:0;color:var(--text);font-family:var(--font-h);font-size:1.9rem;font-weight:900;line-height:1.1}
.recallers-certificate-celebration .swal2-html-container{margin:0;padding:0}
.recallers-certificate-celebration-eyebrow{margin:10px 0 13px;color:#6f9b31;font-size:.69rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.recallers-certificate-celebration-copy{margin:0 auto 20px;max-width:420px;color:var(--gray-dark);font-size:.98rem;line-height:1.55}
.recallers-certificate-celebration-copy strong{color:var(--violet);font-weight:900}
.recallers-certificate-celebration-details{display:flex;gap:10px;margin:0 0 22px}
.recallers-certificate-celebration-chip{display:flex;align-items:center;gap:9px;min-width:0;flex:1;padding:10px 12px;border:1px solid #e2d6f0;border-radius:12px;background:rgba(255,255,255,.82);text-align:left}
.recallers-certificate-celebration-chip svg{width:22px;height:22px;flex:0 0 22px;fill:none;stroke:var(--violet);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.recallers-certificate-celebration-chip span{display:block;min-width:0}
.recallers-certificate-celebration-chip small{display:block;margin-bottom:2px;color:#7a8192;font-size:.63rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.recallers-certificate-celebration-chip strong{display:block;overflow:hidden;color:var(--text);font-size:.8rem;font-weight:900;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
.recallers-certificate-celebration-reflection{display:flex;align-items:flex-start;gap:11px;margin:0 0 8px;padding:14px 15px;border:1px solid #e4d8f2;border-radius:13px;background:rgba(255,255,255,.82);text-align:left}
.recallers-certificate-celebration-reflection-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 32px;border-radius:9px;background:#edf5df;color:#6f9b31}
.recallers-certificate-celebration-reflection-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.recallers-certificate-celebration-reflection strong{display:block;color:var(--violet);font-size:.82rem;font-weight:900;line-height:1.3}
.recallers-certificate-celebration-reflection span:not(.recallers-certificate-celebration-reflection-icon){display:block;margin-top:4px;color:var(--gray-dark);font-size:.76rem;line-height:1.45}
.recallers-certificate-celebration-reflection-link{display:inline-flex;align-items:center;gap:6px;margin:0 0 21px;color:var(--violet)!important;font-size:.78rem;font-weight:900;text-decoration:none}
.recallers-certificate-celebration-reflection-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.recallers-certificate-celebration-reflection-link:hover{text-decoration:underline}
.recallers-certificate-celebration-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.recallers-certificate-celebration-actions a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 12px;border-radius:11px;font-size:.8rem;font-weight:800;text-decoration:none;transition:transform .15s,box-shadow .15s}
.recallers-certificate-celebration-actions svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.recallers-certificate-celebration-actions a:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(57,30,93,.16)}
.recallers-certificate-celebration-download{background:var(--violet);color:#fff!important}
.recallers-certificate-celebration-download:hover{background:var(--violet-hover)}
.recallers-certificate-celebration-view{border:1px solid #d8cbea;background:#fff;color:var(--violet)!important}
.recallers-certificate-celebration-unavailable{margin:14px 0 0;color:var(--gray-dark);font-size:.82rem}
.recallers-certificate-celebration .swal2-close:focus{outline:none;box-shadow:none}

/*──────────────────────────────────────────────
  VIDEO PLAYER (recap clip — big centered play button)
──────────────────────────────────────────────*/
.msc-video-wrap{
  position:relative;width:100%;min-width:0;
  border-radius:var(--r);overflow:hidden;background:#1a1a1a;
  aspect-ratio:16/9;
}
.msc-video-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.msc-video-center-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;
  background:var(--violet);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25);transition:background .15s,transform .15s;
}
.msc-video-center-play:hover{background:var(--violet-hover);transform:translate(-50%,-50%) scale(1.05)}
.msc-video-center-play svg{width:26px;height:26px;margin-left:2px}
.msc-video-controls{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.78) 100%);
  padding:22px 14px 10px;display:flex;flex-direction:column;gap:6px;
}
.msc-video-bar{position:relative;height:4px;border-radius:4px;background:rgba(255,255,255,.35)}
.msc-video-bar-fill{position:absolute;left:0;top:0;height:100%;border-radius:4px;background:var(--violet);width:0%}
.msc-video-bar-fill::after{
  content:'';position:absolute;right:-6px;top:50%;transform:translateY(-50%);
  width:12px;height:12px;border-radius:50%;background:#fff;
}
.msc-video-controls-row{display:flex;align-items:center;gap:12px;color:#fff}
.msc-video-controls-row svg{width:18px;height:18px;flex-shrink:0;cursor:pointer}
.msc-video-time{font-size:.74rem;font-weight:600;white-space:nowrap}
.msc-video-spacer{flex:1}
.msc-video-controls-row .msc-cc{
  font-size:.62rem;font-weight:800;border:1.5px solid #fff;border-radius:3px;
  padding:1px 4px;line-height:1.2;cursor:pointer;
}

/*──────────────────────────────────────────────
  CAPTURE THIS MILESTONE (journal card)
──────────────────────────────────────────────*/
.msc-capture-card{
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--r);
  padding:18px 20px 16px;
}
.msc-capture-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.msc-capture-ico{
  width:34px;height:34px;border-radius:8px;flex-shrink:0;
  background:var(--blue-pale);color:var(--violet);
  display:flex;align-items:center;justify-content:center;
}
.msc-capture-ico svg{width:17px;height:17px}
.msc-capture-title{font-family:var(--font-h);font-weight:800;font-size:1.05rem;color:var(--text)}
.msc-capture-sub{font-size:.82rem;color:var(--gray-dark);font-weight:500;margin-top:2px}

.msc-prompts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.msc-prompt-pill{
  border:1.5px solid var(--blue);border-radius:999px;background:#fff;
  color:var(--blue);font-family:var(--font-h);font-weight:700;font-size:.82rem;
  padding:8px 16px;transition:background .14s;
}
.msc-prompt-pill:hover{background:var(--blue-pale)}

.msc-textarea{
  width:100%;min-height:90px;resize:vertical;
  border:1.5px solid var(--gray-line);border-radius:var(--r-sm);
  padding:14px;font-family:var(--font-b);font-size:.9rem;color:var(--text);
  background:#fff;margin-bottom:10px;
}
.msc-textarea:focus{outline:none;border-color:var(--blue)}
.msc-textarea::placeholder{color:var(--gray-mid)}

.msc-meta-row{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  font-size:.8rem;color:var(--gray-dark);font-weight:500;margin-bottom:16px;
}
.msc-meta-item{display:flex;align-items:center;gap:7px}
.msc-meta-item svg{width:15px;height:15px;color:var(--violet);flex-shrink:0}
.msc-video-link-input{
  border:none;border-bottom:1px solid var(--gray-line);background:transparent;
  font-size:.8rem;color:var(--gray-dark);padding:2px 0;min-width:200px;flex:1;
}
.msc-video-link-input::placeholder{color:var(--gray-mid)}
.msc-video-link-input:focus{outline:none;border-color:var(--blue)}

.msc-footer-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.msc-save-btn{
  display:flex;align-items:center;gap:9px;
  background:var(--violet)!important;color:#fff!important;border-radius:var(--r-sm);
  font-family:var(--font-b);font-weight:700;font-size:.88rem;
  padding:11px 20px;transition:background .15s,transform .1s;
}
.msc-save-btn:hover{background:var(--violet-hover)!important;transform:translateY(-1px)}
.msc-save-btn svg{width:16px;height:16px}
.msc-char-count{font-size:.78rem;color:var(--gray-mid);font-weight:500}
.msc-continue-row{display:flex;justify-content:flex-end;margin-top:20px}
.msc-continue-btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--blue);color:#fff;border-radius:var(--r-sm);
  font-family:var(--font-b);font-weight:700;font-size:.88rem;
  padding:11px 20px;transition:background .15s,transform .1s;
}
.msc-continue-btn:hover{background:var(--blue-hover);transform:translateY(-1px)}
.msc-continue-btn svg{width:16px;height:16px}

/*──────────────────────────────────────────────
  SIDEBAR — Milestone Progress icons reuse
  .gd-progress-icons / .gd-pi verbatim (see the
  "SIDEBAR — MILESTONE PROGRESS" block above), so
  this page matches the Game Day page exactly.
──────────────────────────────────────────────*/
.msc-games-label{font-size:.85rem;font-weight:700;color:var(--text);margin:6px 0 6px}
.msc-bar-track{height:7px;border-radius:5px;background:var(--gray-line);margin-bottom:6px}
.msc-bar-fill{height:100%;border-radius:5px;background:var(--green-done)}
.msc-bar-note{font-size:.78rem;color:var(--gray-dark);font-weight:500}

.msc-completed-title{font-family:var(--font-h);font-weight:700;font-size:.98rem;color:var(--text);margin:18px 0 10px}
.msc-completed-list{display:flex;flex-direction:column}
.msc-completed-row{
  display:flex;align-items:center;gap:10px;
  padding:9px 4px;border-bottom:1px solid var(--gray-line);cursor:pointer;
  transition:background .12s;
}
.msc-completed-row:last-child{border-bottom:none}
.msc-completed-row:hover{background:var(--gray-bg)}
.msc-completed-check{
  width:19px;height:19px;border-radius:50%;flex-shrink:0;
  background:var(--green-done);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.msc-completed-check svg{width:11px;height:11px}
.msc-completed-name{flex:1;min-width:0;font-size:.86rem;font-weight:600;color:var(--text)}
.msc-completed-arr{color:var(--blue);flex-shrink:0}
.msc-completed-arr svg{width:15px;height:15px}

.msc-start-next{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;background:var(--violet)!important;color:#fff!important;
  border-radius:var(--r-sm);font-family:var(--font-b);font-weight:700;font-size:.9rem;
  padding:13px 16px;margin-top:16px;transition:background .15s,transform .1s;
}
.msc-start-next:hover{background:var(--violet-hover)!important;transform:translateY(-1px)}
.msc-start-next svg{width:16px;height:16px}

/*──────────────────────────────────────────────
  QUOTE CARD (lavender, with sparkle accents)
──────────────────────────────────────────────*/
.msc-quote-card{
  position:relative;overflow:hidden;
  background:#eef0fd;border-radius:var(--r);
  padding:22px 22px 20px;
}
.msc-quote-mark{font-size:2.2rem;line-height:1;color:var(--violet);font-family:Georgia,serif;font-weight:900;display:block;margin-bottom:4px}
.msc-quote-text{font-family:var(--font-h);font-style:italic;font-weight:700;font-size:1.3rem;color:var(--text);line-height:1.25;margin-bottom:14px}
.msc-quote-attr{font-size:.88rem;font-weight:700;color:var(--violet)}
.msc-quote-spark{position:absolute;color:var(--green-done)}
.msc-quote-spark.spark-1{top:18px;right:34px;width:16px;height:16px}
.msc-quote-spark.spark-2{top:42px;right:14px;width:12px;height:12px;color:var(--violet)}
.msc-quote-spark.spark-3{bottom:16px;right:46px;width:14px;height:14px}

/*──────────────────────────────────────────────
  RESPONSIVE — app mode ≤760px
──────────────────────────────────────────────*/
@media(max-width:760px){
  .msc-title{font-size:1.3rem}
  .msc-infobar{padding:12px 14px;gap:14px}
  .msc-info-sep{display:none}
  .msc-info-item,.msc-info-dog{flex:1 1 100%}
  .msc-capture-card{padding:14px}
  .msc-prompts{gap:8px}
  .msc-prompt-pill{font-size:.78rem;padding:7px 13px}
  .msc-footer-row{flex-direction:column;align-items:stretch}
  .msc-save-btn{justify-content:center}
  .msc-continue-row{margin-top:16px}
  .msc-continue-btn{width:100%;justify-content:center}
  .msc-char-count{text-align:right}
  .msc-meta-row{gap:10px}
  .msc-video-link-input{min-width:0;flex-basis:100%}
}

/*================================================================
  PAGE: COACH QUEUE (admin table)
  Styles for: page-coachqueue-content.php
  Append this whole block to recallers-main.css, right after the
  "PAGE: MILESTONE COMPLETE" section (do not duplicate GLOBAL tokens).
================================================================*/

.cq-page{display:flex;flex-direction:column;gap:18px;min-width:0}

/* This page (and other full-width admin/coach pages) is a single
   column, not the main+sidebar grid used by Dashboard/Game Day/
   Milestone Complete. */
#page :not(article).page.page--full{display:block}

/*──────────────────────────────────────────────
  TITLE
──────────────────────────────────────────────*/
.cq-title-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.cq-title{margin:0;font-family:var(--font-h);font-weight:800;font-size:2rem;line-height:1;color:var(--navy)}
.cq-lock-badge{
  display:inline-flex;align-items:center;gap:7px;line-height:1;
  background:#fdeedb;color:var(--orange);
  font-family:var(--font-b);font-weight:800;font-size:.74rem;letter-spacing:.03em;
  border-radius:999px;padding:6px 14px 6px 10px;
}
.cq-lock-badge svg{width:15px;height:15px;flex-shrink:0}


.cq-sub{font-size:.92rem;color:var(--gray-dark);font-weight:500;margin-bottom:4px}

/*──────────────────────────────────────────────
  TABS
──────────────────────────────────────────────*/
.cq-tabs{
  display:inline-flex;gap:4px;background:#fff;
  border:1px solid var(--gray-line);border-radius:var(--r-sm);padding:4px;
}
.cq-tab{
  font-family:var(--font-h);font-weight:700;font-size:.88rem;
  color:var(--gray-dark);padding:9px 22px;border-radius:8px;
  transition:background .14s,color .14s;
}
.cq-tab:hover{background:var(--gray-bg)}
.cq-tab.active{background:var(--blue-pale);color:var(--blue)}

.cq-panel{display:flex;flex-direction:column;gap:18px;min-width:0}
/* Beats the UA [hidden] default, which an author display:flex would win against. */
.cq-panel[hidden]{display:none}

/* Panel switch. The outgoing panel is swapped out at once and only the
   incoming one animates — a true cross-fade would mean overlapping two
   panels of very different heights (a paged table against a reply list),
   which collapses the page height mid-transition and makes the toolbar
   jump. A short rise-and-fade reads as the new panel arriving without
   anything under it moving.

   Applied by JS as a one-shot class (removed on animationend) rather than
   keyed off [hidden], so re-clicking the same tab doesn't re-run it. */
.cq-panel.is-entering{animation:cq-panel-in .22s cubic-bezier(.2,.7,.3,1) both}
@keyframes cq-panel-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  /* Keep the fade, drop the movement. */
  .cq-panel.is-entering{animation-name:cq-panel-in-fade;animation-duration:.12s}
  @keyframes cq-panel-in-fade{from{opacity:0}to{opacity:1}}
}

/*──────────────────────────────────────────────
  GAME DAY VIEW TABS  (.cq-views)
  Presets over the two dog-type filters — see the $cq_views array in
  page-coachqueue-content.php for the mapping.

  Deliberately an UNDERLINE tab, not the pill .cq-tabs above it uses. Two
  pill rows stacked would read as one two-level control and leave the coach
  working out which of the two owns the table; the different shape says
  these are a level down. The count is the point of the row, so it gets a
  pill of its own and picks up the active colour with its tab.
──────────────────────────────────────────────*/
/* The card's header strip. The tint is what makes this read as a level above
   the filter row rather than a second equal row, so the hairline under it can
   stay a hairline. It also means a strip that scrolls sideways on a narrow
   screen ends on a visible edge instead of looking like a cut-off mistake.

   Sits inside .cq-toolbar-card, whose corners it has to match itself — see
   there for why the card can't just clip it. */
.cq-views{
  display:flex;align-items:flex-end;gap:2px;flex-wrap:wrap;
  background:var(--gray-bg);
  border-bottom:1px solid var(--gray-line);
  border-radius:var(--r) var(--r) 0 0;
  /* Left padding is the card's own gutter, and the first tab then drops its
     leading padding (below) so that tab's box — and therefore the left end of
     its underline — starts exactly on that line, level with the stat and
     search in the row beneath. Putting the gutter on the tab instead would
     align the label but leave the rule hanging 16px further left, which is
     the same "underline starts nowhere" problem in the other direction. */
  padding:0 4px 0 20px;
}
.cq-views .cq-view:first-child{padding-left:0}
/* Scoped as .cq-views .cq-view, and every state repeats border-bottom-color
   explicitly, because the parent theme styles bare `button` borders: left to
   `transparent` alone the underline fell back to currentColor on hover, and an
   inactive tab under the pointer grew a dark underline indistinguishable from
   the selected one. */
.cq-views .cq-view{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-h);font-weight:700;font-size:.87rem;
  color:var(--gray-dark);background:none;cursor:pointer;
  /* Asymmetric on purpose. The count badge is a rounded pill carrying its own
     8px of internal padding, so an equal 16px after it left more air on the
     right than on the left — and the underline, which spans the whole button,
     read as overshooting past the badge. 10px trailing balances it optically
     while the leading 16px keeps the gutter alignment above. */
  padding:12px 10px 12px 16px;margin-bottom:-1px;
  border:0;border-bottom:2px solid transparent;
  /* Explicitly square. The parent theme rounds bare <button> corners, and a
     bottom border follows that radius — which hooked the underline upwards at
     both ends and read as a curved box rather than a rule. */
  border-radius:0;
  transition:color .14s,border-bottom-color .14s;
}
/* No fill on any state — the label colour and the rule along the strip's
   bottom edge carry the whole selected state. Hover gets the faintest
   possible rule so the target is felt without previewing a second selection. */
.cq-views .cq-view:hover{color:var(--text);border-bottom-color:var(--gray-line)}
.cq-views .cq-view.is-active,
.cq-views .cq-view.is-active:hover{color:var(--blue);border-bottom-color:var(--blue)}
.cq-views .cq-view:focus-visible{outline:2px solid var(--blue);outline-offset:-4px;border-radius:var(--r-sm)}

/* The counts wear the queue's own orange — the same pair the "23 waiting for
   coach" stat below uses (--orange on #fdeedb, see .cq-stat-num and
   .cq-stat-ico). That is deliberate: on this page orange means "comments
   still waiting", so every number that counts waiting comments should look
   like the headline one. Blue is left to mean selection and nothing else,
   which is why the count does NOT change colour with its tab. */
.cq-views .cq-view-n{
  font-size:.75rem;font-weight:800;
  background:#fdeedb;color:var(--orange);
  border-radius:999px;padding:1px 8px;
  font-variant-numeric:tabular-nums;
}

/* Narrow: the row scrolls sideways rather than stacking into four full-width
   rows, which would push the toolbar and the whole table off the first
   screen. The tabs are short enough that a swipe reaches all four. */
@media (max-width:760px){
  .cq-views{
    flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    /* The 14px gutter .cq-toolbar drops to at this width; the first tab drops
       its own leading padding, as above. */
    padding:0 4px 0 14px;
  }
  .cq-views::-webkit-scrollbar{display:none}
  .cq-toolbar{padding:12px 14px}
  /* Same .cq-views .cq-view specificity as the base rule above, or the
     padding and font-size here would silently lose to it. Keeps the trailing
     side tighter than the leading one, for the reason the base rule gives. */
  .cq-views .cq-view{flex:none;padding:11px 8px 11px 13px;font-size:.83rem}
}

/*──────────────────────────────────────────────
  DISCUSSION TAB
  The rows are BuddyBoss's own reply markup (rendered through their
  loop-single-reply.php — see recallers-coachqueue-replies.php), so the
  rules below restyle THEIR classes into this design system rather than
  introducing new ones. Everything is scoped under .cq-discussion so no
  real forum page is affected.

  On specificity: bbpress.css targets these elements with a doubled ID
  (`#bbpress-forums#bbpress-forums .bs-forums-items…`), so the overrides
  that have to win repeat that same doubled ID plus the .cq-discussion
  scope. Anything gentler silently loses.
──────────────────────────────────────────────*/
.cq-discussion-body{transition:opacity .15s}
.cq-discussion-body.is-loading{opacity:.45;pointer-events:none}
.cq-discussion-body:focus{outline:none}

/* Game Day's loading state (recallers-main.js, "PAGE: COACH QUEUE") — shown
   for a page change AND for every search/filter change, since both now fetch
   from the server rather than hiding already-downloaded rows.

   The dim is applied to the CHILDREN rather than the wrapper so the spinner,
   a ::after on the wrapper itself, stays at full opacity instead of fading
   out with the rows it sits on top of. min-height keeps it visible when the
   result set is short or empty — otherwise a filter that matches nothing
   would collapse the box and clip the spinner. */
.cq-gameday-body{position:relative;min-height:140px}
.cq-gameday-body:focus{outline:none}
.cq-gameday-body.is-loading{pointer-events:none}
.cq-gameday-body > *{transition:opacity .15s}
.cq-gameday-body.is-loading > *{opacity:.4}
.cq-gameday-body.is-loading::after{
  content:"";position:absolute;top:60px;left:50%;margin-left:-14px;
  width:28px;height:28px;border-radius:50%;
  border:3px solid var(--violet);border-top-color:transparent;
  animation:recallers-btn-spin .7s linear infinite;
}
@media(prefers-reduced-motion:reduce){
  .cq-gameday-body.is-loading::after{animation-duration:1.6s}
}
.cq-replies-error{
  background:#fdeedb;color:var(--orange);border-radius:var(--r-sm);
  font-family:var(--font-h);font-weight:700;font-size:.82rem;
  padding:12px 16px;margin-bottom:14px;
}

/* Strip the forum chrome — the page already provides the card surface. */
.cq-discussion #bbpress-forums{
  background:none;border:0;padding:0;margin:0;font-family:var(--font-b);
}
.cq-discussion #bbpress-forums#bbpress-forums .bs-item-list{
  background:none;border:0;border-radius:0;box-shadow:none;
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:14px;
}

/* One reply = one card, matching .cq-card on the Game Day tab. */
.cq-discussion #bbpress-forums#bbpress-forums .bs-item-list > li{
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--r);
  list-style:none;margin:0;padding:0;overflow:visible;
}
.cq-discussion #bbpress-forums#bbpress-forums .bs-item-list > li .bs-reply-list-item{
  background:none;border:0;padding:18px 20px;
}
.cq-discussion #bbpress-forums#bbpress-forums .bs-item-list > li .bs-reply-list-item:hover{background:none}

/* Header row: avatar · name/role/time · actions */
.cq-discussion .bs-reply-header{display:flex;align-items:center;gap:12px}
.cq-discussion .bbp-reply-author.item-avatar{margin:0;flex-shrink:0}
.cq-discussion .bbp-reply-author.item-avatar img{
  width:44px;height:44px;border-radius:50%;display:block;
}
.cq-discussion .item-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cq-discussion .item-meta h3{
  margin:0;font-family:var(--font-h);font-weight:700;font-size:.92rem;
  line-height:1.3;color:var(--text);
}
.cq-discussion .item-meta h3 a,
.cq-discussion .bbp-author-name{color:var(--text)}
.cq-discussion .item-meta h3 a:hover .bbp-author-name{color:var(--blue)}
.cq-discussion .bbp-author-role{
  display:inline-flex;align-self:flex-start;align-items:center;
  background:var(--blue-pale);color:var(--blue);border-radius:999px;
  font-family:var(--font-h);font-weight:700;font-size:.66rem;
  letter-spacing:.02em;text-transform:uppercase;padding:3px 9px;margin:2px 0;
}
.cq-discussion .bs-timestamp{font-size:.76rem;color:var(--gray-dark);font-weight:500}

/* Reply body */
.cq-discussion #bbpress-forums#bbpress-forums .bbp-reply-content{
  margin:12px 0 0;padding:0;
  font-family:var(--font-b);font-size:.88rem;line-height:1.55;color:var(--text);
}
.cq-discussion .bbp-reply-content > p{margin:0 0 .6em}
.cq-discussion .bbp-reply-content > p:last-child{margin-bottom:0}

/* Row actions: the Reply button + the "..." menu trigger */
.cq-discussion .bbp-meta.push-right{margin-left:auto;flex-shrink:0}
/* Positioning anchor for the absolutely-placed "..." menu below. */
.cq-discussion .bs-dropdown-wrap{position:relative}
.cq-discussion .bs-dropdown-wrap-inner{display:flex;align-items:center;gap:6px}
.cq-discussion #bbpress-forums#bbpress-forums .bbp-reply-to-link{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--blue);color:#fff;border-radius:var(--r-sm);
  font-family:var(--font-h);font-weight:700;font-size:.78rem;
  padding:7px 14px;transition:background .14s;
}
.cq-discussion #bbpress-forums#bbpress-forums .bbp-reply-to-link:hover{background:var(--blue-hover);color:#fff}
.cq-discussion #bbpress-forums#bbpress-forums .bbp-reply-to-link i{font-size:.85rem}
.cq-discussion #bbpress-forums#bbpress-forums .bs-dropdown-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--r-sm);
  color:var(--gray-dark);opacity:1;padding:0;
  transition:background .14s;
}
.cq-discussion #bbpress-forums#bbpress-forums .bs-dropdown-link:hover{background:var(--gray-bg);color:var(--text)}

/* The "..." menu itself. The hide/show mechanism is restated here rather
   than inherited, so the menu stays collapsed even if buddyboss-theme-css
   is ever dequeued from this page again (that exact regression is what
   made the rows render with every action expanded inline). */
.cq-discussion #bbpress-forums#bbpress-forums .bs-dropdown{
  position:absolute;right:0;top:calc(100% + 6px);z-index:95;
  min-width:172px;padding:6px;margin:0;list-style:none;
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--r-sm);
  box-shadow:0 10px 28px rgba(20,30,60,.14);
  opacity:0;visibility:hidden;
}
.cq-discussion #bbpress-forums#bbpress-forums .bs-dropdown.open{opacity:1;visibility:visible}
.cq-discussion #bbpress-forums#bbpress-forums .bs-dropdown li{margin:0;padding:0;list-style:none}
.cq-discussion #bbpress-forums#bbpress-forums .bs-dropdown a{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:6px;
  font-family:var(--font-b);font-size:.82rem;font-weight:600;color:var(--text);
}
.cq-discussion #bbpress-forums#bbpress-forums .bs-dropdown a:hover{background:var(--gray-bg);color:var(--text)}

/* Appended per reply via the bbp_theme_after_reply_content hook. */
.cq-reply-jump{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--gray-line);
}
.cq-reply-topic{font-size:.8rem;color:var(--gray-dark);font-weight:600;min-width:0}
.cq-reply-topic a{color:var(--blue)}
.cq-reply-topic a:hover{text-decoration:underline}
.cq-reply-jump-actions{display:flex;gap:8px;margin-left:auto;flex-shrink:0}

.cq-replies-pager{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--gray-line);
}
.cq-pager-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 12px;
  border:1px solid var(--gray-line);border-radius:7px;background:#fff;
  font-family:var(--font-h);font-weight:700;font-size:.8rem;color:var(--text);
  cursor:pointer;transition:background .14s,border-color .14s;
}
.cq-pager-btn:hover:not(:disabled):not(.is-current){background:var(--gray-bg)}
.cq-pager-btn:disabled{opacity:.4;cursor:default}
.cq-pager-btn.is-current{background:var(--blue-pale);color:var(--blue);border-color:transparent}
.cq-pager-gap{padding:0 2px;color:var(--gray-mid);font-weight:700}

/*──────────────────────────────────────────────
  STAT + FILTER BAR
──────────────────────────────────────────────*/
/* The card that holds the view tabs AND the filter row. The background,
   border and radius used to live on .cq-toolbar itself; they moved out here
   when the tabs came inside, so the two read as one panel.

   Deliberately NOT overflow:hidden, tempting as that is for clipping the tab
   strip into the rounded corners: .cq-dropdown-panel is absolutely positioned
   inside this box and would be cut off by it — the same trap the placeholder
   tooltip hit inside .cq-table-scroll. The strip rounds its own top corners
   instead, which needs no clipping at all. */
.cq-toolbar-card{
  background:#fff;border:1px solid #ececec;border-radius:var(--r);
}
.cq-toolbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 20px;
}
.cq-stat{display:flex;align-items:center;gap:12px;flex-shrink:0}
.cq-stat-ico{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:#fdeedb;color:var(--orange);
  display:flex;align-items:center;justify-content:center;
}
.cq-stat-ico svg{width:20px;height:20px}
.cq-stat-num{font-family:var(--font-h);font-weight:800;font-size:1.55rem;color:var(--orange);line-height:1}
.cq-stat-text{display:flex;flex-direction:column}
.cq-stat-title{font-family:var(--font-h);font-weight:700;font-size:.95rem;color:var(--text)}
.cq-stat-sub{font-size:.76rem;color:var(--gray-dark);font-weight:500}
.cq-stat-row{display:flex;align-items:center;gap:10px}
.cq-toolbar-sep{width:1px;height:34px;background:var(--gray-line);flex-shrink:0}


/* The one elastic item in the toolbar: it absorbs the Reset button when that
   appears, so applying a filter doesn't push the whole row onto a second line
   (and the table down with it). Everything else here is fixed-width, so this
   floor is what decides whether the row survives Reset — it's set to the
   narrowest the field stays usable at. Below that the toolbar wraps, which it
   already does at narrower widths anyway. */
.cq-search{
  position:relative;flex:1;min-width:140px;
}
.cq-search svg{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--gray-mid);
}
.cq-search input{
  width:100%;border:1.5px solid var(--gray-line);border-radius:var(--r-sm);
  padding:10px 14px 10px 38px;font-size:.86rem;color:var(--text);font-family:var(--font-b);
}
.cq-search input::placeholder{color:var(--gray-mid)}
.cq-search input:focus{outline:none;border-color:var(--blue)}

/* Grows with its selected value (a game title can be long) but stops at
   260px, past which .cq-filter span ellipsises — otherwise one very long
   title would keep widening the trigger and push the rest of the toolbar
   onto a second row. */
.cq-dropdown{position:relative;flex-shrink:0;min-width:150px;max-width:260px}
.cq-filter{
  display:flex;align-items:center;gap:9px;flex-shrink:0;
  border:1.5px solid var(--gray-line);border-radius:var(--r-sm);
  padding:10px 14px;background:#fff;cursor:pointer;
  font-family:var(--font-h);font-weight:700;font-size:.84rem;color:var(--text);
  min-width:150px;width:100%;
}
.cq-dropdown.open .cq-filter{border-color:var(--blue)}
.cq-dropdown.open .cq-chev{transform:rotate(180deg)}
.cq-filter svg.cq-filter-ico{width:15px;height:15px;color:var(--blue);flex-shrink:0}
/* The selected value can be an arbitrarily long game title, so the trigger
   ellipsises rather than stretching the toolbar. JS puts the full text in the
   button's title attribute, so it stays readable on hover. */
.cq-filter span{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cq-filter svg.cq-chev{width:13px;height:13px;color:var(--gray-dark);flex-shrink:0;transition:transform .16s}

/* The panel sizes to its longest option instead of being pinned to the
   trigger's width (which was `left:0;right:0` and only 150px) — a game called
   "You Control the Squirrel" was being cut off mid-word. It still can't get
   narrower than the trigger, and it's capped so one very long title can't run
   off the side of the screen; anything past the cap wraps. */
.cq-dropdown-panel{
  position:absolute;top:calc(100% + 6px);left:0;z-index:30;
  min-width:100%;width:max-content;max-width:min(320px, calc(100vw - 48px));
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--r-sm);
  box-shadow:0 10px 28px rgba(20,30,60,.14);
  padding:6px;max-height:260px;overflow-y:auto;
  display:none;
}
.cq-dropdown.open .cq-dropdown-panel{display:block}
.cq-dropdown-option{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 10px;border-radius:7px;font-size:.84rem;font-weight:600;color:var(--text);
  cursor:pointer;
  /* Wrap rather than clip: with the panel's overflow-y set, the horizontal
     axis was scrolling instead of showing the rest of the title. */
  white-space:normal;overflow-wrap:anywhere;line-height:1.35;
}
/* Segmented switches for Age and Sort — the same component shape as the
   .cq-tabs above (bordered track, 4px padding, active segment in blue-pale),
   scaled down to sit level with the toolbar's filters. These two have few
   enough states to show at once, and a coach flipping between them shouldn't
   pay two clicks each time a dropdown would cost. */
.cq-toggle{
  display:inline-flex;gap:3px;flex-shrink:0;
  background:#fff;border:1.5px solid var(--gray-line);
  border-radius:var(--r-sm);padding:3px;
}
.cq-toggle-opt{
  border:none;background:none;cursor:pointer;white-space:nowrap;
  font-family:var(--font-h);font-weight:700;font-size:.82rem;
  color:var(--gray-dark);padding:7px 13px;border-radius:7px;
  transition:background .14s,color .14s;
}
.cq-toggle-opt:hover{background:var(--gray-bg)}
.cq-toggle-opt.is-active{background:var(--blue-pale);color:var(--blue)}
.cq-toggle-opt.is-active:hover{background:var(--blue-pale)}

/* Reset: clears every filter and the sort back to the default view. JS
   unhides it only while something is actually active (see
   syncResetVisibility() in recallers-main.js), so it reads as a "filters are
   on" indicator rather than permanent toolbar furniture. The [hidden] guard
   is explicit because the display rule below would otherwise beat the UA
   stylesheet's. */
.cq-reset{
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  border:1.5px solid var(--gray-line);border-radius:var(--r-sm);
  padding:10px 12px;background:#fff;cursor:pointer;
  font-family:var(--font-h);font-weight:700;font-size:.84rem;color:var(--gray-dark);
  transition:border-color .14s,color .14s;
}
.cq-reset[hidden]{display:none}
.cq-reset:hover{border-color:var(--blue);color:var(--blue)}
.cq-reset svg{width:14px;height:14px;flex-shrink:0}
.cq-dropdown-option:hover{background:var(--gray-bg)}
.cq-dropdown-option.is-selected{background:var(--blue-pale);color:var(--blue)}
.cq-dropdown-option.is-selected svg{width:13px;height:13px;flex-shrink:0}

/* The "Sort by" label this used to hold is gone — the options say "Oldest
   first" / "Newest first" themselves. See page-coachqueue-content.php. */
.cq-sort{display:flex;align-items:center;flex-shrink:0}

/*──────────────────────────────────────────────
  TABLE
──────────────────────────────────────────────*/
.cq-table-card{
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--r);
  overflow:hidden;
}
/* Mirrored top scrollbar — markup + rationale in
   recallers-coachqueue-gameday.php. Empty box, explicit height (its only
   child is a 1px spacer, so without one there is no room to paint a bar),
   revealed by JS with .is-on when the table overflows.

   Styled to disappear into the table's own header band rather than look like
   a second browser scrollbar bolted to the top of the card: it takes the
   header's background, has no rule under it, and the track is transparent so
   only a slim pill thumb shows. The thumb is thinned by a transparent border
   with background-clip:padding-box — the scrollbar keeps its real 14px hit
   area (nobody wants to chase a 5px target) while painting far less. It
   fattens and darkens on hover so it reads as grabbable once the pointer is
   near it. */
.cq-table-railtop{
  display:none;
  height:14px;
  overflow-x:auto;overflow-y:hidden;
  background:#fafbfd;
}
.cq-table-railtop.is-on{display:block}
.cq-table-railtop-inner{height:1px}
.cq-table-railtop::-webkit-scrollbar{height:14px}
.cq-table-railtop::-webkit-scrollbar-track{background:transparent}
.cq-table-railtop::-webkit-scrollbar-thumb{
  background:#cdd2da;border-radius:99px;
  border:5px solid transparent;background-clip:padding-box;
}
.cq-table-railtop:hover::-webkit-scrollbar-thumb{
  background:#a6abb5;border-width:4px;background-clip:padding-box;
}

/* The scroll pane — BOTH axes, deliberately.

   Sideways is forced on us: twelve columns don't fit a laptop, hence the
   1280px min-width below. Vertical is a choice, and it is what makes the
   sticky header work at all: `position:sticky` resolves against the nearest
   scrollport, so a header inside a pane that only scrolls horizontally never
   moves relative to that pane and scrolls away with the page instead. Capping
   the height makes this box the vertical scrollport too, so the header row
   stays put over twenty rows of queue — and the toolbar above and pager below
   stay on screen while a coach reads down.

   The max() keeps the pane usable on a short window: never shorter than
   420px even if that means the page itself scrolls a little.

   Styling the WebKit scrollbars is not decoration. macOS hides overlay
   scrollbars until something moves, which is exactly why a coach on a plain
   wheel mouse had no way to discover the horizontal axis and no bar to drag.
   Giving them a defined width opts the pane out of overlay mode, so both
   bars are always visible and draggable. scrollbar-color covers Firefox.

   Same slim pill as the top rail (see .cq-table-railtop): full-size hit
   area, transparent track, thin painted thumb that thickens on hover.

   scrollbar-width/scrollbar-color are deliberately NOT set here, and are
   quarantined in the Firefox-only @supports block below. Chrome ignores every
   ::-webkit-scrollbar rule the moment either standard property is present, and
   `thin` on macOS resolves to a hidden overlay bar — which is the exact
   problem this is here to fix. */
.cq-table-scroll{
  overflow:auto;
  max-height:max(420px, calc(100vh - 210px));
  overscroll-behavior-x:contain;
}
.cq-table-scroll:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.cq-table-scroll::-webkit-scrollbar{width:14px;height:14px}
.cq-table-scroll::-webkit-scrollbar-track{background:transparent}
.cq-table-scroll::-webkit-scrollbar-corner{background:transparent}
.cq-table-scroll::-webkit-scrollbar-thumb{
  background:#cdd2da;border-radius:99px;
  border:5px solid transparent;background-clip:padding-box;
}
.cq-table-scroll:hover::-webkit-scrollbar-thumb{
  background:#a6abb5;border-width:4px;background-clip:padding-box;
}

.cq-table{width:100%;border-collapse:collapse;min-width:1280px}
/* z-index 3 so the header passes over ordinary cells; the pinned columns'
   own header cells go higher again (they have to beat both). */
.cq-table thead th{
  text-align:center;font-family:var(--font-h);font-weight:700;font-size:.76rem;
  color:var(--text);text-transform:none;letter-spacing:0;
  padding:14px 14px;border-bottom:1px solid var(--gray-line);white-space:nowrap;
  background:#fafbfd;
  position:sticky;top:0;z-index:3;
  /* Collapsed borders belong to the table grid, not to the cell, so Chrome
     leaves them behind when a cell is lifted into a sticky layer — the header
     ends up floating over the rows with no line under it. An inset shadow
     paints the same 1px as part of the cell and travels with it. Same reason
     the pinned columns below repaint their row separator. */
  box-shadow:inset 0 -1px 0 var(--gray-line);
}

/*── Pinned columns ──
  Game Day is which row you're on and Actions is what you do about it; losing
  either to the horizontal scroll is what made this table hard to work. Both
  stay put while the middle eight columns move under them.

  Sticky cells must be opaque or the scrolling content shows through, so every
  row state (default, hover) has to be repainted on them by hand.

  Game Day is width-capped and ellipsised: lesson titles are nowrap and some
  are long enough that an uncapped pinned column would eat a third of the
  viewport. The full title is on the link's title attribute. */
.cq-table th.cq-col-game,
.cq-table td.cq-col-game{
  position:sticky;left:0;z-index:2;background:#fff;
  max-width:200px;overflow:hidden;text-overflow:ellipsis;
}
.cq-table tbody td.cq-col-game{box-shadow:inset 0 -1px 0 var(--gray-line)}
.cq-table tbody tr:last-child td.cq-col-game{box-shadow:none}
.cq-table thead th.cq-col-game{z-index:4;background:#fafbfd}
.cq-table tbody tr:hover td.cq-col-game{background:var(--gray-bg)}

/* The shadows are the "there is more over here" cue, and they only appear on
   the side that actually has more — no shadow at the start edge when you're
   already at the start, none at all when the table happens to fit.
   .is-x-scrollable / .is-at-start / .is-at-end are set in recallers-main.js. */
.cq-table-scroll.is-x-scrollable:not(.is-at-start) thead th.cq-col-game,
.cq-table-scroll.is-x-scrollable:not(.is-at-start) tbody td.cq-col-game{
  box-shadow:inset 0 -1px 0 var(--gray-line), 10px 0 12px -10px rgba(16,24,40,.4);
}
.cq-table-scroll.is-x-scrollable:not(.is-at-start) tbody tr:last-child td.cq-col-game{
  box-shadow:10px 0 12px -10px rgba(16,24,40,.4);
}

@media(min-width:1200px){
  .cq-table th.cq-col-game,
  .cq-table td.cq-col-game{max-width:260px}
}

/* Firefox has no ::-webkit-scrollbar, so it gets the standard properties —
   in here, where Chrome will never see them (see the note on .cq-table-scroll
   about the two being mutually exclusive). Firefox's bars are always laid out
   rather than overlaid, so `thin` is a cosmetic choice there, not a
   disappearing act. */
@supports (-moz-appearance:none){
  .cq-table-scroll,
  .cq-table-railtop{scrollbar-width:thin;scrollbar-color:#cdd2da transparent}
}

/* Actions pins from the first paint, not after the first scroll — it is the
   column a coach acts from, so it has to be there before they have touched
   anything. Below ~1024px it does not pin at all: two pinned columns would
   leave barely half the viewport for the eight that actually need the scroll.

   A right-pinned column reserves no space, it floats over what is beneath it,
   so at rest this one sits over Date Posted and part of Preview. The edge
   shadow is what keeps that legible — it reads as a panel held above the
   table rather than a cell sliced in half — and everything underneath is one
   scroll away, with the column settling back into its natural place at the
   far end. */
@media(min-width:1024px){
  .cq-table-scroll.is-x-scrollable th.cq-col-actions,
  .cq-table-scroll.is-x-scrollable td.cq-col-actions{
    position:sticky;right:0;z-index:2;background:#fff;
  }
  .cq-table-scroll.is-x-scrollable thead th.cq-col-actions{z-index:4;background:#fafbfd}
  .cq-table-scroll.is-x-scrollable tbody tr:hover td.cq-col-actions{background:var(--gray-bg)}
  /* Pinned: repaint the row separator (collapsed borders don't travel into a
     sticky layer) and add the edge shadow, unless we're at the far end where
     the column has settled back into its natural place. */
  .cq-table-scroll.is-x-scrollable tbody td.cq-col-actions{
    box-shadow:inset 0 -1px 0 var(--gray-line);
  }
  .cq-table-scroll.is-x-scrollable tbody tr:last-child td.cq-col-actions{box-shadow:none}
  .cq-table-scroll.is-x-scrollable:not(.is-at-end) thead th.cq-col-actions,
  .cq-table-scroll.is-x-scrollable:not(.is-at-end) tbody td.cq-col-actions{
    box-shadow:inset 0 -1px 0 var(--gray-line), -10px 0 12px -10px rgba(16,24,40,.4);
  }
  .cq-table-scroll.is-x-scrollable:not(.is-at-end) tbody tr:last-child td.cq-col-actions{
    box-shadow:-10px 0 12px -10px rgba(16,24,40,.4);
  }
}
.cq-table tbody td{
  padding:13px 14px;border-bottom:1px solid var(--gray-line);
  font-size:.85rem;color:var(--text);font-weight:500;white-space:nowrap;
  text-align:center;
}
.cq-table tbody tr:last-child td{border-bottom:none}
.cq-table tbody tr:hover{background:var(--gray-bg)}

.cq-game-link{color:var(--blue);font-weight:700}

.cq-status-pill{display:flex;align-items:center;justify-content:center;gap:7px}
/* Sized to match the header trophy badge / Student Snapshot's top-badge
   chip (.badge-chip) — same 40x40 everywhere the student's top badge
   appears, so it doesn't read as a different, smaller component here. */
.cq-status-star{
  width:40px;height:40px;border-radius:8px;flex-shrink:0;
  background:#e0185a;color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.cq-status-star svg{width:40px;height:40px}
/* Real badge variant (recallers_cq_student_status_parts()) — the badge's
   own .badge-chip (recallers_top_badge_chip_html()) replaces the flat pink
   star box + SVG once the student actually holds a badge, so no background
   color of its own. */
.cq-status-star--badge{background:none}
.cq-status-label{font-weight:700;font-size:.83rem;color:var(--text)}
/* No badge yet (Memberium hasn't synced them one) — muted dash, no icon box. */
.cq-status-label--none{color:var(--gray-dark);font-weight:600}

.cq-hex{display:inline-flex}
.cq-hex svg{width:26px;height:26px}

.cq-dog{display:flex;align-items:center;justify-content:center;gap:10px}
.cq-dog-thumb{width:30px;height:30px;border-radius:50%;overflow:hidden;flex-shrink:0}
.cq-dog-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cq-dog-name{font-weight:700;color:var(--text)}

.cq-preview-btn{
  border:1.5px solid var(--gray-line);border-radius:7px;background:#fff;
  font-family:var(--font-h);font-weight:700;font-size:.78rem;color:var(--text);
  padding:7px 14px;transition:border-color .14s,background .14s;
}
.cq-preview-btn:hover{border-color:var(--blue);background:var(--blue-pale)}

.cq-actions{display:flex;align-items:center;justify-content:center;gap:8px}
.cq-btn-view{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--blue)!important;color:#fff!important;border-radius:7px;
  font-family:var(--font-h);font-weight:700;font-size:.78rem;
  padding:7px 16px;transition:background .14s;
}
.cq-btn-view:hover{background:var(--blue-hover)!important}
.cq-btn-link{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--blue);font-weight:700;font-size:.78rem;
}
.cq-btn-link svg{width:13px;height:13px}
.cq-btn-snapshot{
  border:1.5px solid var(--gray-line);border-radius:7px;background:#fff;
  font-family:var(--font-h);font-weight:700;font-size:.78rem;color:var(--text);
  padding:7px 14px;transition:border-color .14s,background .14s;
}
.cq-btn-snapshot:hover{border-color:var(--blue);background:var(--blue-pale)}

.cq-status{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--orange);font-weight:700;font-size:.82rem}
.cq-status-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);flex-shrink:0}

/*──────────────────────────────────────────────
  MOBILE CARD LIST (app mode replacement for the
  table — one card per row, shown ≤760px only)
──────────────────────────────────────────────*/
.cq-cards{display:none;flex-direction:column;gap:12px}

.cq-card{
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--r);
  padding:16px;
}
.cq-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.cq-card-dog{display:flex;align-items:center;gap:10px}
.cq-card-dog-thumb{width:42px;height:42px;border-radius:50%;overflow:hidden;flex-shrink:0}
.cq-card-dog-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cq-card-dog-name{font-family:var(--font-h);font-weight:800;font-size:1rem;color:var(--text)}
.cq-card-archetype{font-size:.78rem;color:var(--gray-dark);font-weight:500;margin-top:1px}
.cq-card-game{font-family:var(--font-h);font-weight:700;color:var(--blue);font-size:.85rem;text-align:right}

.cq-card-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;
  padding:12px 0;border-top:1px solid var(--gray-line);border-bottom:1px solid var(--gray-line);
  margin-bottom:14px;
}
.cq-card-field-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-mid);font-weight:700}
.cq-card-field-value{font-size:.86rem;font-weight:700;color:var(--text);margin-top:3px;display:flex;align-items:center;gap:6px}
.cq-card-field-value .cq-hex svg{width:22px;height:22px}
/* Student Status badge (.cq-status-star) is deliberately NOT shrunk here
   like .cq-hex is — kept at its full 40x40 (see .cq-status-star above) so
   it stays the same size as the header trophy badge / Student Snapshot's
   top-badge icon on every surface, mobile card included. */

.cq-card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.cq-card-date{font-size:.78rem;color:var(--gray-dark);font-weight:500}

.cq-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.cq-card-actions .cq-btn-view,
.cq-card-actions .cq-preview-btn,
.cq-card-actions .cq-btn-snapshot{flex:1 1 auto;text-align:center}
.cq-card-actions .cq-btn-link{flex:1 1 auto;justify-content:center}

/*──────────────────────────────────────────────
  RESPONSIVE — app mode ≤760px
──────────────────────────────────────────────*/
@media(max-width:1040px){
  .cq-toolbar{flex-wrap:wrap}
  .cq-toolbar-sep{display:none}
  .cq-search{flex-basis:100%;order:1}
  .cq-sort{margin-left:auto}
}
@media(max-width:760px){
  .cq-title{font-size:1.4rem}
  .cq-toolbar{padding:12px 14px;gap:12px;flex-direction:column;align-items:stretch}
  .cq-stat{width:100%}
  .cq-toolbar-sep{display:none}
  .cq-search{flex-basis:auto;order:0}
  /* Stacked on mobile, so the desktop 260px growth cap doesn't apply. */
  .cq-dropdown{width:100%;max-width:none}
  .cq-filter{width:100%}
  /* Switches go full width and split their track evenly, so the segments
     stay comfortably tappable rather than shrinking to their text. */
  .cq-toggle{width:100%}
  .cq-toggle-opt{flex:1;padding:9px 8px;text-align:center}
  .cq-sort{margin-left:0;width:100%}
  .cq-sort .cq-dropdown{flex:1}

  /* Swap the desktop table for the stacked card list */
  .cq-table-card{display:none}
  .cq-cards{display:flex}
}

/*================================================================
  PAGE: STUDENT SNAPSHOT (coach view)
  Styles for: page-studentsnapshot-content.php
  Append this whole block to recallers-main.css, right after the
  "PAGE: COACH QUEUE" section (do not duplicate GLOBAL tokens).
  Reuses --violet/--violet-hover defined in the MILESTONE COMPLETE
  section above.
================================================================*/

/*──────────────────────────────────────────────
  BACK BUTTON / TITLE
──────────────────────────────────────────────*/
.ss-back-btn{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  border:1.5px solid var(--violet);color:var(--violet);background:#fff;
  border-radius:999px;font-family:var(--font-h);font-weight:700;font-size:.82rem;
  padding:8px 18px 8px 14px;transition:background .14s;
}
.ss-back-btn:hover{background:#f1efff}
.ss-back-btn svg{width:14px;height:14px}

.ss-title{font-family:var(--font-h);font-weight:800;font-size:1.7rem;color:var(--text)}
.ss-sub{font-size:.88rem;color:var(--gray-dark);font-weight:500;margin-top:2px}

/*──────────────────────────────────────────────
  PROFILE BAR
──────────────────────────────────────────────*/
.ss-profile-card{
  display:flex;align-items:center;justify-content:flex-start;gap:40px;flex-wrap:nowrap;
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--r);
  padding:16px 20px;
}
.ss-profile-left{display:flex;align-items:center;gap:14px}
.ss-profile-avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;flex-shrink:0}
.ss-profile-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ss-profile-name{font-family:var(--font-h);font-weight:800;font-size:1.05rem;color:var(--text)}
/* Actual Name reads as one small label+value chip — a caption-style label
   (matching .cq-card-field-label's idiom) rather than a loose "Actual
   name: …" sentence, so it doesn't compete with the bold Display Name
   above it or run into the Differs badge beside it. */
.ss-profile-actual-name{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px}
.ss-profile-actual-name-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-mid);font-weight:700}
.ss-profile-actual-name-value{font-size:.8rem;color:var(--gray-dark);font-weight:600}
.ss-profile-badges{display:flex;align-items:center;gap:8px;margin-top:9px}
/* The student's own top badge (ss-badge-top) — styled identically to the
   Furthest Milestone badge next to it (.ss-badge-hex: plain inline icon +
   label, no pill background) rather than the boxed/rounded treatment
   originally mocked up, so the two badges in this row read as one family. */
/* .ss-hex is now just a marker class on a .hex-badge.hex-badge-sm — see
   .hex-badge-sm above for sizing; the two rules below are Student
   Snapshot-specific overrides of that shared component (extra breathing
   room before the title text in the profile badge; the number badge
   sitting further out on its hex so it doesn't crowd the icon at this
   smaller size, in both places .hex-badge-sm is used on this page). */

.ss-badge-hex{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;color:var(--gray-dark)}
/* Sized up from the shared .hex-badge-sm's 34x34 to 40x40 here specifically
   (not the dog-name-row's .ss-hex, which stays 34x34) so this badge matches
   the top badge (.ss-badge-top-icon) sitting right next to it in the
   profile row. */
.ss-badge-hex .hex-badge-sm{width:40px;height:40px;margin-right:12px}
.ss-badge-hex .hex-badge-sm svg{width:40px;height:40px}
.ss-badge-hex .hex-badge-sm .hex-badge-num,
.ss-hex.hex-badge-sm .hex-badge-num{right:-10px}

.ss-choose-dog{display:flex;flex-direction:column;gap:5px;min-width:170px}
.ss-choose-dog-label{font-size:.76rem;color:var(--gray-dark);font-weight:700}

/*──────────────────────────────────────────────
  GENERIC DROPDOWN (reused for "Choose Dog")
──────────────────────────────────────────────*/
.ss-dropdown{position:relative}
.ss-dropdown-trigger{
  display:flex;align-items:center;gap:8px;width:100%;
  border:1.5px solid var(--gray-line);border-radius:var(--r-sm);
  background:#fff;padding:9px 12px;cursor:pointer;
  font-family:var(--font-h);font-weight:700;font-size:.85rem;color:var(--violet);
}
.ss-dropdown.open .ss-dropdown-trigger{border-color:var(--violet)}
.ss-dropdown-trigger span{flex:1;min-width:0;text-align:left}
.ss-dropdown-trigger svg{width:13px;height:13px;color:var(--gray-dark);flex-shrink:0;transition:transform .16s}
.ss-dropdown.open .ss-dropdown-trigger svg{transform:rotate(180deg)}
.ss-dropdown-panel{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--r-sm);
  box-shadow:0 10px 28px rgba(20,30,60,.14);padding:6px;display:none;
}
.ss-dropdown.open .ss-dropdown-panel{display:block}
.ss-dropdown-option{
  display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;
  font-size:.84rem;font-weight:600;color:var(--text);cursor:pointer;white-space:nowrap;
}
.ss-dropdown-option:hover{background:var(--gray-bg)}
.ss-dropdown-option.is-selected{background:#ece8fd;color:var(--violet)}

/* Coaches (unlike students) see archived dogs in this switcher — tagged so
   the two are never confused. See StudentSnapshotRouting::resolve_context(). */
.ss-archived-tag{
  display:inline-flex;align-items:center;margin-left:6px;padding:2px 8px;border-radius:999px;
  background:#eceef1;color:var(--gray-dark);
  font-family:var(--font-h);font-weight:700;font-size:.65rem;letter-spacing:.03em;text-transform:uppercase;
}

/*──────────────────────────────────────────────
  3-COLUMN ROW: dog card / Dog Basics / Starting Point
──────────────────────────────────────────────*/
.ss-row-3{display:grid;grid-template-columns:260px 1fr 1fr;gap:18px;align-items:start}

.ss-dog-card{
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--r);
  padding:18px;display:flex;flex-direction:column;gap:14px;
}
.ss-dog-photo{width:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden}
.ss-dog-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ss-dog-name-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.ss-dog-name{font-family:var(--font-h);font-weight:800;font-size:1.25rem;color:var(--text)}
.ss-dog-pill{
  background:#ece8fd;color:var(--violet);font-family:var(--font-h);font-weight:700;
  font-size:.74rem;border-radius:999px;padding:4px 12px;
}
.ss-dog-section-label{font-size:.74rem;color:var(--gray-dark);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.ss-dog-game-name{font-family:var(--font-h);font-weight:800;font-size:1rem;color:var(--violet);margin-top:2px}

/* Milestone Progress now renders via the shared .gd-progress-icons-wrap
   component (recallers_gd_render_progress_icons_strip()) — same one used
   by Game Day / Milestone Lesson / My Journal. .ss-progress-block is just
   a sizing hook, same pattern as .mj-progress-block below. */
.ss-progress-block .gd-progress-icons-wrap{--gd-pi-size:44px}

/*──────────────────────────────────────────────
  INFO CARDS (Dog Basics / Starting Point)
──────────────────────────────────────────────*/
.ss-info-card{
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--r);
  padding:18px;
}
.ss-card-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ss-card-head-ico{
  width:28px;height:28px;border-radius:7px;flex-shrink:0;
  background:var(--violet);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.ss-card-head-ico svg{width:14px;height:14px}
.ss-card-head-title{font-family:var(--font-h);font-weight:800;font-size:1rem;color:var(--text)}

.ss-info-row{display:flex;align-items:flex-start;gap:12px;padding:8px 0}
.ss-info-row + .ss-info-row{border-top:1px solid var(--gray-line)}
.ss-info-ico{width:24px;height:24px;flex-shrink:0;color:var(--violet);display:flex;align-items:center;justify-content:center;margin-top:1px}
.ss-info-ico svg{width:17px;height:17px}
.ss-info-label{flex:1;min-width:0;font-size:.84rem;font-weight:700;color:var(--violet)}
.ss-info-value{flex:1;min-width:0;font-size:.84rem;font-weight:500;color:var(--text);text-align:right}

/*──────────────────────────────────────────────
  TOP CHALLENGES
──────────────────────────────────────────────*/
.ss-challenges-pills{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:16px}
.ss-challenge-pill{
  display:inline-flex;align-items:center;gap:7px;
  background:#ece8fd;color:var(--violet);font-family:var(--font-h);font-weight:700;font-size:.8rem;
  border-radius:999px;padding:7px 14px;
}
.ss-challenge-pill svg{width:14px;height:14px;flex-shrink:0}

.ss-subsection-label{font-family:var(--font-h);font-weight:700;font-size:.86rem;color:var(--violet);margin-bottom:8px}
.ss-subsection-row{display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--text);font-weight:500}
.ss-subsection-row svg{width:16px;height:16px;color:var(--violet);flex-shrink:0}

/*──────────────────────────────────────────────
  GOALS & VISION
──────────────────────────────────────────────*/
.ss-goals-card{position:relative;overflow:hidden}
.ss-goals-label{font-family:var(--font-h);font-weight:700;font-size:.84rem;color:var(--text);margin:0 0 9px}
.ss-outcome-pills{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:16px}
.ss-outcome-pill{
  display:inline-flex;align-items:center;gap:7px;
  background:#eef8ee;color:var(--green-done);font-family:var(--font-h);font-weight:700;font-size:.8rem;
  border-radius:999px;padding:7px 14px;
}
.ss-outcome-pill svg{width:14px;height:14px;flex-shrink:0}
.ss-goals-list{display:flex;flex-direction:column;gap:7px;margin:0;padding-left:18px}
.ss-goals-list li{font-size:.85rem;color:var(--text);font-weight:500;line-height:1.5}
.ss-goals-quote{position:absolute;right:18px;bottom:14px;font-size:2.6rem;line-height:1;color:#ece8fd;font-family:Georgia,serif;font-weight:900}

/*──────────────────────────────────────────────
  TABLE CARDS (Journal Overview / Previous Posts)
──────────────────────────────────────────────*/
.ss-table-card{
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--r);
  padding:18px;
}
.ss-table-title{font-family:var(--font-h);font-weight:800;font-size:1rem;color:var(--text)}
.ss-table-sub{font-size:.78rem;color:var(--gray-dark);font-weight:500;margin:2px 0 12px}
.ss-empty-state{padding:32px 20px;text-align:center;color:var(--gray-dark);font-size:.9rem}

.ss-table-scroll{overflow-x:auto}
.ss-table{width:100%;border-collapse:collapse;min-width:560px}
.ss-table th{
  text-align:left;font-family:var(--font-h);font-weight:700;font-size:.78rem;color:var(--violet);
  padding:8px 10px;border-bottom:1px solid var(--gray-line);white-space:nowrap;
}
.ss-table td{padding:9px 10px;border-bottom:1px solid var(--gray-line);font-size:.84rem;color:var(--text);font-weight:500;vertical-align:middle}
.ss-table tr:last-child td{border-bottom:none}

.ss-milestone-cell{display:flex;align-items:center;gap:9px;font-weight:700}
.ss-m-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;background:var(--gray-mid)}
.ss-m-dot.is-done{background:var(--green-done)}
.ss-m-dot.is-current{background:var(--orange)}

.ss-reflection-cell{display:flex;align-items:center;gap:8px}
.ss-r-dot{width:16px;height:16px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.ss-r-dot.is-saved{background:var(--green-done);color:#fff}
.ss-r-dot.is-pending{background:var(--gray-line)}
.ss-r-dot svg{width:9px;height:9px}

.ss-view-link{color:var(--violet);font-weight:700}

.ss-viewpost-btn{
  border:1.5px solid var(--violet);color:var(--violet);background:#fff;
  border-radius:7px;font-family:var(--font-h);font-weight:700;font-size:.78rem;
  padding:6px 16px;transition:background .14s;
}
.ss-viewpost-btn:hover{background:#f1efff}

/*──────────────────────────────────────────────
  SIDEBAR — Private Coach Notes / Coaching Tips
──────────────────────────────────────────────*/
.ss-side-card{background:#fff;border:1px solid var(--gray-line);border-radius:var(--r);padding:18px}
.ss-side-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ss-side-head-ico{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  background:var(--violet);color:#fff;display:flex;align-items:center;justify-content:center;
}
.ss-side-head-ico svg{width:15px;height:15px}
.ss-side-head-title{font-family:var(--font-h);font-weight:800;font-size:.98rem;color:var(--text)}
.ss-side-sub{font-size:.78rem;color:var(--gray-dark);font-weight:500;margin-bottom:12px}

.ss-note-textarea{
  width:100%;min-height:140px;resize:vertical;
  border:1.5px solid var(--gray-line);border-radius:var(--r-sm);
  padding:12px;font-family:var(--font-b);font-size:.85rem;color:var(--text);
  margin-bottom:12px;line-height:1.5;
}
.ss-note-textarea:focus{outline:none;border-color:var(--violet)}
.ss-save-note-btn{
  border:1.5px solid var(--violet);color:var(--violet);background:#fff;
  border-radius:7px;font-family:var(--font-h);font-weight:700;font-size:.82rem;
  padding:8px 18px;transition:background .14s;
}
.ss-save-note-btn:hover{background:#f1efff}
.ss-save-note-btn.is-saved{background:var(--violet);color:#fff}

.ss-tips-card{position:relative;overflow:hidden}
.ss-tips-text{font-size:.85rem;color:var(--text);font-weight:500;line-height:1.65;margin-bottom:14px}
.ss-tips-text:last-of-type{margin-bottom:0}
.ss-tips-quote{position:absolute;right:16px;bottom:10px;font-size:2.4rem;line-height:1;color:#ece8fd;font-family:Georgia,serif;font-weight:900}

/*──────────────────────────────────────────────
  REFLECTION MODAL ("View Reflection" — Journal Overview)
  Same fixed-overlay/backdrop/panel shape as the My Profile photo-crop
  modal (.mp-crop-modal) — see recallers-main.js's [data-modal-open]/
  [data-modal-close] handlers in the STUDENT SNAPSHOT section.
──────────────────────────────────────────────*/
.ss-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.ss-modal[hidden]{display:none}
.ss-modal-backdrop{position:absolute;inset:0;background:rgba(20,20,30,.55)}
#setPasswordModal .ss-modal-backdrop { background: rgba(20, 20, 30, .65);}
#setPasswordModal .spm-modal-panel:before {
    content:'';
    display:block;
    height: 6px;
    width: 100%;
    background: linear-gradient(90deg, #391e5d 0%, #336ca9 55%, #9fc658 100%);
    position: absolute;
    left: 0;
    top: 0px;
}
#setPasswordModal .ss-modal-title{
	font-size: 1.25rem;
	margin: 10px 0 4px;
	text-transform: uppercase;
    font-weight: 700;
}
#setPasswordModal .ss-modal-sub{
	font-size: .9rem;
}
#setPasswordModal .password_change_message {
    background: #9bc35b;
    padding: 6px 15px 10px 15px;
    border-radius: 10px;
    color: #fff;
    font-size: 0.9rem;
    border: 2px solid #cbeb98;
    margin-bottom: 10px;
    margin-top: -5px;
}

#setPasswordModal form div {
    margin-bottom: 0;
}

#setPasswordModal form div:last-child {
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

#setPasswordModal form input[type="submit"] {
    text-transform: uppercase;
    font-size: .82rem;
}

/* Change-password submit spinner — this is a real, full-page-reload
   <input type="submit">, so recallers-main.js just disables it and
   inserts this spinner right before it on submit for immediate
   feedback while that request/reload is in flight (see the "Set
   Password modal" section of recallers-main.js). */
#setPasswordModal form input[type="submit"]:disabled {
    opacity: .65;
    cursor: not-allowed;
}
#setPasswordModal .spm-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(51, 108, 169, .25);
    border-top-color: var(--blue, #336ca9);
    border-radius: 50%;
    animation: spmSpin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes spmSpin {
    to { transform: rotate(360deg); }
}

#setPasswordModal .ss-modal-close {
    top: 20px;
}


#setPasswordModal form div:last-child label {
    display: none;
}
.ss-modal-panel{
  position:relative;background:#fff;border-radius:var(--r);padding:26px;
  width:100%;max-width:560px;max-height:88vh;overflow:auto;
  box-shadow:0 20px 50px rgba(20,30,60,.3);
}
.ss-modal-close{
  position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;
  border:none;background:var(--gray-bg);color:var(--gray-dark);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.ss-modal-close svg{width:14px;height:14px}
.ss-modal-title{font-family:var(--font-h);font-weight:800;font-size:1.05rem;color:var(--text);margin:0 0 4px;padding-right:30px}
.ss-modal-sub{font-size:.8rem;color:var(--gray-dark);font-weight:600;margin-bottom:16px}
.ss-modal-reflection{font-size:.9rem;color:var(--text);font-weight:500;line-height:1.65;margin:0 0 18px;white-space:pre-wrap}
.ss-modal-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;background:#000}
.ss-modal-video[hidden]{display:none}
.ss-modal-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Coach Queue — enriched Preview modal (student + dog, archetype, comment, small video) */
.cq-preview-head{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding-right:30px}
.cq-preview-avatar{flex:0 0 auto;width:46px;height:46px;border-radius:50%;overflow:hidden;background:var(--gray-bg)}
.cq-preview-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.cq-preview-head .ss-modal-title{margin:0;padding-right:0}
.cq-preview-date{font-size:.78rem;color:var(--gray-dark);font-weight:600;margin-top:3px}
.cq-preview-dogrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--gray-bg);border-radius:var(--r-sm);padding:10px 12px;margin:0 0 16px}
.cq-preview-dog-photo{flex:0 0 auto;width:38px;height:38px;border-radius:50%;overflow:hidden;background:#fff}
.cq-preview-dog-photo img{width:100%;height:100%;object-fit:cover;display:block}
.cq-preview-dogmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.82rem;font-weight:600;color:var(--text)}
.cq-preview-dog-name{font-family:var(--font-h);font-weight:800}
.cq-preview-archetype{color:var(--gray-dark)}
/* Same badge in the Preview modal — see .cq-puppy-tag above. */
.cq-preview-puppy{
  display:inline-flex;align-items:center;gap:5px;
  background:#fdeaf2;color:var(--berry);
  border-radius:999px;padding:5px 11px 5px 9px;line-height:1.2;
  font-family:var(--font-h);font-weight:800;font-size:.68rem;letter-spacing:.01em;
}
.cq-preview-puppy .cq-paw{width:12px;height:11px;flex-shrink:0;opacity:.9}
.cq-preview-puppy[hidden],.cq-preview-archetype[hidden],.cq-preview-milestone[hidden]{display:none}
.cq-preview-milestone{background:#336ca9;color:#fff;font-weight:700;font-size:.68rem;border-radius:5px;padding:2px 8px}
.cq-preview-comment{font-size:.9rem;color:var(--text);font-weight:500;line-height:1.65;margin:0 0 16px;white-space:pre-wrap}
.cq-preview-video{position:relative;width:100%;max-width:320px;aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;background:#000}
.cq-preview-video[hidden]{display:none}
.cq-preview-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/*──────────────────────────────────────────────
  RESPONSIVE — app mode
──────────────────────────────────────────────*/
@media(max-width:1100px){
  .ss-row-3{grid-template-columns:1fr 1fr}
  .ss-dog-card{grid-column:1 / -1}
}
@media(max-width:760px){
  .ss-title{font-size:1.4rem}
  .ss-row-3{grid-template-columns:1fr 1fr;gap:14px}
  .ss-profile-card{flex-direction:column;align-items:stretch;gap: 20px;}
  .ss-choose-dog{min-width:0}
  .ss-info-row{flex-direction:column;gap:3px}
  .ss-info-value{text-align:left}
  .ss-table{min-width:480px}
  .ss-dog-pill{margin-left: 10px;}
  .ss-info-card { grid-column: 1 / -1;}
}

/*================================================================
  PAGE: MY JOURNAL
  Styles for: page-myjournal-content.php
  Append this whole block to recallers-main.css, right after the
  "PAGE: STUDENT SNAPSHOT" section. Reuses --violet/--violet-hover
  defined in the MILESTONE COMPLETE section above.
================================================================*/

/*──────────────────────────────────────────────
  TITLE
──────────────────────────────────────────────*/
.mj-title{font-family:var(--font-h);font-weight:800;font-size:1.7rem;color:var(--navy)}
.mj-sub{font-size:.88rem;color:var(--gray-dark);font-weight:500;line-height:1.5}

/*──────────────────────────────────────────────
  PROFILE CARD
──────────────────────────────────────────────*/
.mj-profile-card{
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--r);
  padding:18px 20px;
}
.mj-profile-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mj-profile-left{display:flex;align-items:flex-start;gap:14px}
.mj-dog-avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;flex-shrink:0}
.mj-dog-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.mj-dog-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mj-dog-name{font-family:var(--font-h);font-weight:800;font-size:1.25rem;color:var(--text)}
/* .mj-dog-hex is now just a marker class on a .hex-badge.hex-badge-sm —
   see .hex-badge-sm (dashboard section) for sizing; the two rules below
   are overrides of that shared component for this page (extra breathing
   room before the milestone title; the number badge sitting further out
   on its hex at this smaller size — same override pattern as
   .ss-badge-hex .hex-badge-sm on Student Snapshot). */
.mj-dog-hex.hex-badge-sm{margin-right:7px}
.mj-dog-hex.hex-badge-sm .hex-badge-num{right:-7px;bottom: 1px;}
.mj-dog-milestone-title{
  font-family:var(--font-h);font-weight:600;font-size:.75rem;color:var(--gray-dark);
  border:1px solid #cdcdcd;border-radius:6px;padding:2px 7px;
}
.mj-dog-archetype-row{display:flex;align-items:center;gap:6px;margin-top:2px;flex-wrap:nowrap}
.mj-dog-archetype{font-size:.92rem;color:var(--gray-dark);font-weight:600;white-space:nowrap}

.mj-print-btn{
  display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
  border:1.5px solid var(--violet);color:var(--violet);background:#fff;
  border-radius:var(--r-sm);font-family:var(--font-h);font-weight:700;font-size:.85rem;
  padding:9px 18px;transition:background .14s;
}
.mj-print-btn:hover{background:#f1efff}
.mj-print-btn svg{width:15px;height:15px}

/* "Change dog" — small inline dropdown link */
.mj-changedog{position:relative;margin-top:6px;display:inline-block}
.mj-changedog-trigger{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--violet);font-family:var(--font-h);font-weight:700;font-size:.85rem;
  cursor:pointer;
}
.mj-changedog-trigger svg{width:12px;height:12px;transition:transform .16s}
.mj-changedog.open .mj-changedog-trigger svg{transform:rotate(180deg)}
.mj-changedog-panel{
  position:absolute;top:calc(100% + 6px);left:0;z-index:30;min-width:200px;
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--r-sm);
  box-shadow:0 10px 28px rgba(20,30,60,.14);padding:6px;display:none;
}
.mj-changedog.open .mj-changedog-panel{display:block}
.mj-changedog-note{
  font-size:.74rem;color:var(--gray-mid);font-weight:500;line-height:1.4;
  padding:4px 10px 8px;
}
.mj-changedog-option{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;border-radius:7px;font-size:.84rem;font-weight:600;color:var(--text);
  cursor:pointer;white-space:nowrap;
}
.mj-changedog-option:hover{background:var(--gray-bg)}
.mj-changedog-option.is-selected{background:#ece8fd;color:var(--violet)}
.mj-changedog-option--archived{color:var(--gray-dark)}
.mj-changedog-grouplabel{
  font-size:.68rem;font-weight:700;color:var(--gray-dark);text-transform:uppercase;
  letter-spacing:.03em;padding:8px 10px 4px;
}
.mj-changedog-activetag{
  display:inline-flex;align-items:center;flex-shrink:0;
  background:#ece8fd;color:var(--violet);font-family:var(--font-h);font-weight:700;
  font-size:.65rem;border-radius:999px;padding:2px 8px;
}

/*──────────────────────────────────────────────
  ARCHIVED DOG — read-only journal view
──────────────────────────────────────────────*/
.mj-archived-banner{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;
  background:#fff8ec;border:1px solid #f0d9b5;border-radius:var(--r-sm);
  padding:12px 16px;color:#7a5620;font-size:.88rem;line-height:1.45;
}
.mj-archived-banner svg{width:18px;height:18px;flex-shrink:0}
.mj-archived-banner span{flex:1 1 240px}
.mj-archived-banner a{color:#7a5620;font-weight:700;text-decoration:underline}
.mj-profile-card.is-archived{border-color:#f0d9b5}

/* Viewing an in-training dog that isn't the active one — informational, so
   blue rather than the archived state's amber. */
.mj-viewing-banner{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;
  background:var(--blue-pale);border:1px solid #cddcfb;border-radius:var(--r-sm);
  padding:12px 16px;color:#28457f;font-size:.88rem;line-height:1.45;
}
.mj-viewing-banner svg{width:18px;height:18px;flex-shrink:0}
.mj-viewing-banner span{flex:1 1 240px}
.mj-viewing-banner a{color:#28457f;font-weight:700;text-decoration:underline;white-space:nowrap}

.mj-archived-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.mj-archived-link{
  display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;
  background:var(--gray-bg);color:var(--text);text-decoration:none;
  font-family:var(--font-h);font-weight:700;font-size:.8rem;
}
.mj-archived-link:hover{background:#ece8fd;color:var(--violet)}

.mj-startingpoint-link{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  color:var(--blue);font-family:var(--font-h);font-weight:700;font-size:.86rem;
}
.mj-startingpoint-link svg{width:15px;height:15px}

/*──────────────────────────────────────────────
  TOP CHALLENGES / GOALS & VISION (within profile card)
──────────────────────────────────────────────*/
.mj-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.mj-info-card{background:var(--gray-bg);border-radius:var(--r-sm);padding:16px}
.mj-card-head{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.mj-card-head-ico{
  width:26px;height:26px;border-radius:7px;flex-shrink:0;
  background:var(--violet);color:#fff;display:flex;align-items:center;justify-content:center;
}
.mj-card-head-ico svg{width:13px;height:13px}
.mj-card-head-title{font-family:var(--font-h);font-weight:800;font-size:.95rem;color:var(--text)}

.mj-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.mj-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:#ece8fd;color:var(--violet);font-family:var(--font-h);font-weight:700;font-size:.78rem;
  border-radius:999px;padding:6px 13px;
}
.mj-pill.is-outcome{background:#eef8ee;color:var(--green-done)}
.mj-pill svg{width:13px;height:13px;flex-shrink:0}

.mj-subsection-label{font-family:var(--font-h);font-weight:700;font-size:.82rem;color:var(--violet);margin-bottom:7px}
.mj-subsection-row{display:flex;align-items:center;gap:8px;font-size:.83rem;color:var(--text);font-weight:500}
.mj-subsection-row svg{width:15px;height:15px;color:var(--violet);flex-shrink:0}

.mj-goals-list{display:flex;flex-direction:column;gap:6px;margin:0;padding-left:17px}
.mj-goals-list li{font-size:.83rem;color:var(--text);font-weight:500;line-height:1.5}

/*──────────────────────────────────────────────
  MILESTONE PROGRESS STRIP
──────────────────────────────────────────────*/
.mj-progress-block{margin-top:18px}
.mj-progress-label{font-family:var(--font-h);font-weight:800;font-size:1rem;color:var(--text)}
.mj-progress-sub{font-size:.8rem;color:var(--gray-dark);font-weight:500;margin-top:1px;margin-bottom:10px}
/* The strip itself now renders via .gd-progress-icons-wrap / .gd-pi,
   verbatim from the "SIDEBAR — MILESTONE PROGRESS" block above — see
   recallers_gd_render_progress_icons_strip() — so this page matches
   Game Day exactly. */
/* Desktop-only: bigger icons on My Journal specifically. Below 761px,
   the shared .gd-progress-icons-wrap mobile rule above (60px) applies
   to every page, My Journal included. */
@media(min-width:761px){
  .mj-progress-block .gd-progress-icons-wrap{--gd-pi-size:80px}
}

/*──────────────────────────────────────────────
  TABS
──────────────────────────────────────────────*/
.mj-tabs{display:flex;gap:22px;border-bottom:1px solid var(--gray-line);margin-top:16px}
.mj-tab{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-h);font-weight:700;font-size:.86rem;color:var(--blue);
  padding:10px 2px 12px;border-bottom:2px solid var(--blue);
}
.mj-tab svg{width:14px;height:14px}

/*──────────────────────────────────────────────
  MILESTONE ACCORDION LIST
  One continuous bordered list. Every row (including the first,
  open-by-default one) uses the same markup/classes — only the
  open/closed CSS state changes how it's laid out.
──────────────────────────────────────────────*/
.mj-m-list{background:#fff;border:1px solid var(--gray-line);border-radius:var(--r);overflow:hidden;margin-top:16px}
.mj-m-card{border-bottom:1px solid var(--gray-line)}
.mj-m-card:last-child{border-bottom:none}

.mj-m-head{
  position:relative;display:flex;align-items:center;gap:14px;
  padding:14px 160px 14px 18px;cursor:pointer;
}
.mj-m-card.open .mj-m-head{align-items:flex-start;padding-top:18px;padding-bottom:18px}

.mj-m-num{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:var(--navy);color:#fff;font-family:var(--font-h);font-weight:800;font-size:.82rem;
  display:flex;align-items:center;justify-content:center;position:relative;
}
.mj-m-card.is-done .mj-m-num{background:var(--green-done)}
.mj-m-card.open .mj-m-num{width:32px;height:32px;font-size:.92rem}
.mj-m-check{
  position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;border-radius:50%;
  background:#fff;color:var(--green-done);display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--green-done);
}
.mj-m-check svg{width:8px;height:8px}

.mj-m-content{flex:1;display:flex;align-items:center;gap:16px;min-width:0}
.mj-m-card.open .mj-m-content{flex-direction:column;align-items:flex-start;gap:4px}

.mj-m-titleblock{flex:0 0 230px;min-width:0}
.mj-m-card.open .mj-m-titleblock{flex:0 0 auto}
.mj-m-title{font-family:var(--font-h);font-weight:700;font-size:.92rem;color:var(--text);white-space:normal}
.mj-m-card.open .mj-m-title{font-size:1.05rem;font-weight:800}

.mj-m-row-meta{
  flex:1;display:flex;align-items:center;justify-content:center;gap:16px;
  font-size:.83rem;color:var(--gray-dark);font-weight:500;min-width:0;
}
.mj-m-card.open .mj-m-row-meta{flex:0 0 auto;justify-content:flex-start;gap:14px;margin-top:1px}
.mj-m-row-meta .is-saved{color:var(--green-done);font-weight:700;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.mj-m-row-meta .is-saved svg{width:13px;height:13px}
.mj-m-row-meta .is-pending{white-space:nowrap}

.mj-m-actions{
  position:absolute;top:50%;right:18px;transform:translateY(-50%);
  display:flex;align-items:center;gap:10px;
}
.mj-m-card.open .mj-m-actions{top:18px;transform:none}

.mj-edit-btn{
  display:none;
  border:1.5px solid var(--violet);color:var(--violet);background:#fff;
  border-radius:7px;font-family:var(--font-h);font-weight:700;font-size:.82rem;
  padding:8px 16px;transition:background .14s;white-space:nowrap;
}
.mj-m-card.open .mj-edit-btn{display:inline-flex}
.mj-edit-btn:hover{background:#f1efff}

.mj-m-chev{
  width:18px;height:18px;flex-shrink:0;color:var(--gray-dark);
  display:flex;align-items:center;justify-content:center;transition:transform .2s;
}
.mj-m-chev svg{width:15px;height:15px}
.mj-m-card.open .mj-m-chev{transform:rotate(180deg)}

.mj-m-panel{max-height:0;overflow:hidden;transition:max-height .25s ease}
.mj-m-card.open .mj-m-panel{border-top:1px solid var(--gray-line)}
.mj-m-panel-inner{display:grid;grid-template-columns:340px 1fr;gap:24px;padding:18px}

.mj-video-wrap{position:relative;border-radius:var(--r-sm);overflow:hidden;background:#000;aspect-ratio:16/10}
.mj-video-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.mj-video-controls{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 100%);
  padding:16px 10px 7px;display:flex;flex-direction:column;gap:5px;
}
.mj-video-bar{position:relative;height:3px;border-radius:3px;background:rgba(255,255,255,.4)}
.mj-video-bar-fill{position:absolute;left:0;top:0;height:100%;border-radius:3px;background:var(--violet);width:0%}
.mj-video-controls-row{display:flex;align-items:center;gap:9px;color:#fff;font-size:.72rem;font-weight:600}
.mj-video-controls-row svg{width:14px;height:14px;flex-shrink:0;cursor:pointer}
.mj-video-spacer{flex:1}
.mj-video-cc{font-size:.6rem;font-weight:800;border:1.3px solid #fff;border-radius:3px;padding:1px 4px;cursor:pointer}

.mj-reflection-label{font-family:var(--font-h);font-weight:800;font-size:.92rem;color:var(--text);margin-bottom:10px}
.mj-prompt-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.mj-prompt-pill{
  border:1.5px solid var(--blue);border-radius:999px;background:#fff;
  color:var(--blue);font-family:var(--font-h);font-weight:700;font-size:.78rem;
  padding:7px 14px;transition:background .14s;
}
.mj-prompt-pill:hover{background:var(--blue-pale)}
.mj-reflection-text{font-size:.9rem;color:var(--text);font-weight:500;line-height:1.6;margin-bottom:16px}
.mj-reflection-footer{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--gray-dark);font-weight:500}
.mj-reflection-footer .is-saved{color:var(--green-done);font-weight:700;display:inline-flex;align-items:center;gap:5px}
.mj-reflection-footer .is-saved svg{width:13px;height:13px}

/*──────────────────────────────────────────────
  SIDEBAR
──────────────────────────────────────────────*/
.mj-side-card{background:#fff;border:1px solid var(--gray-line);border-radius:var(--r);padding:18px}
.mj-side-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.mj-side-head-ico{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  background:#ece8fd;color:var(--violet);display:flex;align-items:center;justify-content:center;
}
.mj-side-head-ico svg{width:16px;height:16px}
.mj-side-head-title{font-family:var(--font-h);font-weight:800;font-size:.98rem;color:var(--text)}
.mj-side-text{font-size:.85rem;color:var(--text);font-weight:500;line-height:1.6;margin-bottom:12px}
.mj-side-text:last-of-type{margin-bottom:0}

.mj-help-link{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  color:var(--blue);font-family:var(--font-h);font-weight:700;font-size:.86rem;
  padding:9px 0;border-bottom:1px solid var(--gray-line);
}
.mj-help-link:last-of-type{border-bottom:none}
.mj-help-link svg{width:13px;height:13px;flex-shrink:0}

.mj-illustration{display:flex;justify-content:center;padding-top:10px}
.mj-illustration svg{width:170px;height:auto}

/*──────────────────────────────────────────────
  RESPONSIVE — app mode
──────────────────────────────────────────────*/
@media(max-width:900px){
  .mj-row-2{grid-template-columns:1fr}
  .mj-m-panel-inner{grid-template-columns:1fr}
}
@media(max-width:760px){
  .mj-title{font-size:1.4rem}
  .mj-profile-top{flex-direction:column;align-items:stretch}
  .mj-print-btn{justify-content:center}
  .mj-tabs{gap:14px;overflow-x:auto}

  .mj-m-head{flex-wrap:wrap;padding:14px 50px 14px 16px}
  .mj-m-card.open .mj-m-head{padding-right:50px}
  .mj-m-content{flex-wrap:wrap;gap:6px}
  .mj-m-titleblock{flex:1 1 100%}
  .mj-m-row-meta{flex:1 1 100%;justify-content:flex-start;gap:14px}
  .mj-m-actions{flex-direction:column-reverse;gap:8px;right:14px}
  .mj-m-card.open .mj-m-actions{position:static;transform:none;align-items:flex-end;margin-top:10px;right:auto}
}

/*================================================================
  PAGE: MY JOURNAL — PRINT VIEW
  Styles for the #mj-print-sheet built by mjPrintJournal() in
  recallers-main.js (see "── Print Journal ──" in that file's
  "PAGE: MY JOURNAL" section). The sheet's markup is built FRESH from
  extracted text/data rather than cloned from the on-screen
  components — this is its own compact typographic scale (explicit pt
  sizes, not rem, so nothing here can inherit an on-screen sizing
  cascade), tuned for a dense, document-like printed page instead of
  a shrunk copy of the interactive UI.

  Sizing is a straightforward 4-level scale: page title, section
  heading, sub-heading/label, and body text — repeated consistently
  instead of each block inventing its own.

  Layout note: ONLY leaf-level blocks (a profile row, one info box,
  one progress box, one milestone card) get `break-inside:avoid-page`.
  The wrapping `.mj-print-section` elements deliberately do NOT, so
  content flows across the natural page boundary instead of forcing a
  short section onto its own mostly-empty page.
================================================================*/

/* Hidden on screen; only ever shown inside the print media query
   below, and only removed from the DOM again once printing ends. */
.mj-print-sheet{display:none}

@media print{
  html.mj-printing body{background:#fff}
  /* Everything else on the page — header, sidebar, nav, drawers,
     the live journal itself — is a direct-or-indirect descendant of
     some OTHER child of <body>. Hiding every top-level sibling of
     the sheet, rather than trying to enumerate/undo each component's
     own layout, is what lets this work regardless of what template
     wraps page-myjournal-content.php. */
  html.mj-printing body > *:not(#mj-print-sheet){display:none !important}
  html.mj-printing #mj-print-sheet{
    display:block !important;
    color:#000;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  @page{margin:14mm 14mm}
}

.mj-print-sheet{
  font-family:var(--font-b);color:var(--text);font-size:9.5pt;line-height:1.45;
  max-width:680px;margin:0 auto;
}
.mj-print-sheet h1,.mj-print-sheet h2{font-family:var(--font-h);color:var(--navy);line-height:1.25}
.mj-print-sheet p{margin:0}
.mj-print-sheet strong{font-weight:700}

.mj-print-header{margin-bottom:14px;padding-bottom:10px;border-bottom:1.5px solid var(--navy)}
.mj-print-header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.mj-print-header-text{flex:1;min-width:0}
.mj-print-logo{max-width:150px;max-height:52px;width:auto;height:auto;object-fit:contain;flex-shrink:0}
.mj-print-title{font-size:19pt;font-weight:800}
.mj-print-subtitle{font-size:9.5pt;color:var(--gray-dark);font-weight:500;margin-top:3px}
.mj-print-meta{font-size:7.5pt;color:var(--gray-mid);font-weight:500;margin-top:5px}

/* Sections flow into one another — see note above; nothing here
   forces a page break of its own. */
.mj-print-section{margin-top:18px}
.mj-print-section:first-of-type{margin-top:0}
.mj-print-heading{
  font-size:12pt;font-weight:800;margin-bottom:8px;padding-bottom:4px;
  border-bottom:1px solid var(--gray-line);
  /* Without this, a heading that fits at the bottom of a page prints
     there alone — its first bit of content doesn't fit underneath it,
     so the browser pushes THAT to the next page instead, leaving the
     heading stranded above a blank run-out of the page. Forbidding a
     break right after the heading makes the browser move heading +
     content together instead. */
  break-after:avoid-page;page-break-after:avoid;
}
.mj-print-subheading{font-family:var(--font-h);font-weight:700;font-size:8.5pt;color:var(--violet);margin-bottom:4px}

/* 3. Profile summary */
.mj-print-profile-row{display:flex;align-items:center;gap:10px}
.mj-print-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0}
.mj-print-profile-name{font-family:var(--font-h);font-weight:800;font-size:13pt;color:var(--text)}
.mj-print-profile-sub{font-size:8.5pt;color:var(--gray-dark);font-weight:500;margin-top:1px}

/* 4. "Starting Point" heading — was a link on screen; printed as a
   plain heading, so it uses the same heading style as everything
   else instead of link/icon treatment. */

/* 5. Top Challenges / Goals & Vision */
.mj-print-info-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mj-print-info-box{
  background:var(--gray-bg);border-radius:6px;padding:9px 11px;
  break-inside:avoid-page;
}
.mj-print-info-title{font-family:var(--font-h);font-weight:800;font-size:9.5pt;color:var(--text);margin-bottom:6px}
.mj-print-info-subheading{font-family:var(--font-h);font-weight:700;font-size:8pt;color:var(--violet);margin:6px 0 4px}
.mj-print-info-subheading:first-child{margin-top:0}

.mj-print-tags{display:flex;flex-wrap:wrap;gap:5px}
.mj-print-tag{
  display:inline-block;background:#ece8fd;color:var(--violet);font-weight:700;font-size:7.8pt;
  border-radius:999px;padding:3px 9px;
}
.mj-print-tag.is-outcome{background:#eef8ee;color:var(--green-done)}

.mj-print-kv{font-size:8.5pt;margin-top:6px}
.mj-print-kv-label{font-weight:700;color:var(--text)}

.mj-print-simple-list{margin:0;padding-left:14px}
.mj-print-simple-list li{font-size:8.5pt;line-height:1.4}

.mj-print-empty-note{font-size:8.5pt;color:var(--gray-dark);font-style:italic}

/* 6. Milestone Progress summary */
.mj-print-progress-stats{display:flex;gap:22px;margin-bottom:10px}
.mj-print-stat{display:flex;flex-direction:column}
.mj-print-stat-num{font-family:var(--font-h);font-weight:800;font-size:15pt;color:var(--violet);line-height:1.1}
.mj-print-stat-label{font-size:7.5pt;color:var(--gray-dark);font-weight:600}

/* Rows rather than a 3-column grid: three columns left "Current
   Milestone" and "Completed" — both usually short — stretched or
   towered over by empty space up to whatever height "Remaining"
   needed. A full-width row per box uses that width for the label +
   content instead, and each box only takes the vertical space its
   own content needs. Plain block spacing (not flex/grid) between the
   three boxes so the browser can still break between them across a
   page if it ever has to. */
.mj-print-progress-cols{margin-top:0}
.mj-print-progress-box{
  display:flex;align-items:flex-start;gap:16px;
  background:var(--gray-bg);border-radius:6px;padding:8px 12px;
  margin-bottom:8px;
  break-inside:avoid-page;
}
.mj-print-progress-box:last-child{margin-bottom:0}
.mj-print-progress-box-label{
  font-family:var(--font-h);font-weight:700;font-size:7.8pt;color:var(--violet);
  flex:0 0 118px;padding-top:1px;
}
.mj-print-progress-current{font-weight:700;font-size:8.8pt;flex:1}
.mj-print-progress-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;flex:1}
.mj-print-progress-list li{font-size:8pt;font-weight:500;line-height:1.35}
.mj-print-progress-empty{font-size:8pt;color:var(--gray-dark);font-weight:500;flex:1}

/* 7–10. Intentions & Reflections — one card per milestone.
   Deliberately plain block flow, not flex/grid: browsers can only
   fragment (paginate) a flex or grid container as a single atomic
   unit, not break it mid-list — so with `display:flex` here, if the
   first card didn't fit in the space left on a page, the WHOLE list
   (all of it) got pushed to the next page, leaving that space blank.
   Block-level siblings paginate normally, one at a time. */
.mj-print-mcard-list{margin-top:2px}
.mj-print-mcard{
  border:1px solid var(--gray-line);border-radius:6px;padding:9px 12px;
  margin-bottom:8px;
  break-inside:avoid-page;
}
.mj-print-mcard:last-child{margin-bottom:0}
.mj-print-mcard-head{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.mj-print-mcard-num{
  width:19px;height:19px;border-radius:50%;flex-shrink:0;
  background:var(--navy);color:#fff;font-family:var(--font-h);font-weight:800;font-size:7.5pt;
  display:flex;align-items:center;justify-content:center;
}
.mj-print-mcard.is-done .mj-print-mcard-num{background:var(--green-done)}
.mj-print-mcard-title{font-family:var(--font-h);font-weight:800;font-size:10pt}

.mj-print-mcard-meta{
  font-size:8pt;color:var(--gray-dark);font-weight:500;
  margin-bottom:7px;padding-bottom:7px;border-bottom:1px solid var(--gray-line);
}
.mj-print-mcard-meta .is-saved{color:var(--green-done);font-weight:700}
.mj-print-dot{color:var(--gray-mid);margin:0 5px}

.mj-print-placeholder{font-size:8.3pt;color:var(--gray-dark);font-weight:500;font-style:italic}

/* 9. Video: thumbnail + url */
.mj-print-video{margin-bottom:8px;break-inside:avoid-page}
.mj-print-video-thumb{
  display:block;width:100%;max-width:220px;aspect-ratio:16/9;object-fit:cover;
  border-radius:6px;border:1px solid var(--gray-line);margin-bottom:4px;
}
.mj-print-video-url{font-size:7.5pt;color:var(--gray-dark);word-break:break-all}
.mj-print-video-label{font-weight:700;color:var(--text)}

/* 10. "Your intention going in" + "Your reflection" */
.mj-print-intention{
  background:var(--gray-bg);border-radius:6px;padding:8px 10px;margin-bottom:8px;
  break-inside:avoid-page;
}
.mj-print-intention .mj-print-kv{margin-top:3px}
.mj-print-intention .mj-print-kv:first-of-type{margin-top:0}
.mj-print-reflection{break-inside:avoid-page}
.mj-print-reflection-text{font-size:8.8pt;line-height:1.5}
.mj-print-reflection-footer{font-size:7.5pt;color:var(--gray-dark);font-weight:500;margin-top:5px}

/*================================================================
  PAGE: MY PROFILE
  Styles for: page-myprofile-content.php
  Append this whole block to recallers-main.css, right after the
  "PAGE: MY JOURNAL" section. Reuses --violet/--violet-hover defined
  in the MILESTONE COMPLETE section above.
================================================================*/

.mp-page{display:flex;flex-direction:column;gap:18px;min-width:0}

/*──────────────────────────────────────────────
  TITLE
──────────────────────────────────────────────*/
.mp-title{font-family:var(--font-h);font-weight:800;font-size:1.7rem;color:var(--text)}
.mp-sub{font-size:.86rem;color:var(--blue);font-weight:600;margin-top:2px}

/*──────────────────────────────────────────────
  SHARED CARD
──────────────────────────────────────────────*/
.mp-card{background:#fff;border:1px solid var(--gray-line);border-radius:var(--r);padding:20px}
.mp-card-title{font-family:var(--font-h);font-weight:800;font-size:1.02rem;color:var(--violet);margin-bottom:16px}

/* Small round edit-pencil button, reused everywhere */
.mp-edit-btn{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;border:none;
  background:#ece8fd!important;color:var(--violet)!important;display:inline-flex;align-items:center;justify-content:center;
  transition:background .14s;cursor:pointer;
}
.mp-edit-btn:hover{background:#ddd6fb!important}
.mp-edit-btn svg{width:12px;height:12px}

/*──────────────────────────────────────────────
  MY PROFILE (WP user — links out to BuddyBoss's own
  edit-profile/change-avatar screens; styled to match
  the rest of this page, no inline editing here)
──────────────────────────────────────────────*/
.mp-profile-row{display:flex;align-items:flex-start;gap:20px}
.mp-avatar-wrap{position:relative;flex-shrink:0;display:inline-block}
.mp-avatar{width:96px;height:96px;border-radius:50%;overflow:hidden;background:var(--gray-bg);display:block}
.mp-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.mp-camera-btn{
  position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;
  background:#fff;border:none;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(20,30,60,.18);
}
.mp-camera-btn-ico{
  width:24px;height:24px;border-radius:50%;background:var(--violet);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.mp-camera-btn-ico svg{width:12px;height:12px}

.mp-name-row{display:flex;align-items:center;gap:10px}
.mp-name{font-family:var(--font-h);font-weight:800;font-size:1.15rem;color:var(--text)}

.mp-nickname-row{display:flex;align-items:center;gap:8px;margin-top:12px}
.mp-nickname-label{font-family:var(--font-h);font-weight:700;font-size:.92rem;color:var(--violet)}
.mp-nickname-value{font-size:.92rem;color:var(--text);font-weight:500}

.mp-badges{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.mp-pill{
  display:inline-flex;align-items:center;background:#ece8fd;color:var(--violet);
  font-family:var(--font-h);font-weight:700;font-size:.78rem;border-radius:999px;padding:6px 14px;
}
.mp-pill--active{background:#eef8ee;color:var(--green-done)}
.mp-pill--link{text-decoration:none;transition:background .14s}
.mp-pill--link:hover{background:#ddd6fb}

/*──────────────────────────────────────────────
  BUTTONS (shared: add / delete / crop actions)
──────────────────────────────────────────────*/
.mp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--font-h);font-weight:700;font-size:.86rem;border-radius:var(--r-sm);
  padding:9px 18px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .14s,border-color .14s;
}
.mp-btn-primary{background:var(--violet)!important;color:#fff!important}
.mp-btn-primary:hover{background:var(--violet-hover)!important}
.mp-btn-ghost{background:#fff;border-color:var(--violet);color:var(--violet)}
.mp-btn-ghost:hover{background:#ece8fd}
.mp-btn-disabled{opacity:.55;cursor:not-allowed;border-color:var(--gray-line);color:var(--text)}
.mp-btn-danger-ghost{background:#fff;border-color:#e6b3b3;color:#c23b3b}
.mp-btn-danger-ghost:hover{background:#fbeaea}

/* Neutral/secondary. Three weights on this page, so the eye can rank them:
   violet ghost = constructive (add a dog, restore one), muted = retire or
   sidestep (archive, view journal), red = destructive (delete). Archive was
   violet ghost, which made retiring a dog look as inviting as adding one. */
.mp-btn-muted{background:#fff;border-color:var(--gray-line);color:var(--gray-dark)}
.mp-btn-muted:hover{background:var(--gray-bg);border-color:var(--gray-mid);color:var(--text)}
/* Solid red — the confirm button inside the delete dialog, where the action is
   already committed to and wants full weight (the row button stays ghost). */
.mp-btn-danger{background:#c23b3b;border-color:#c23b3b;color:#fff}
.mp-btn-danger:hover{background:#a83030;border-color:#a83030}
.mp-btn svg{width:15px;height:15px;flex-shrink:0}

/*──────────────────────────────────────────────
  MY DOGS — heading row + empty state
──────────────────────────────────────────────*/
.mp-dogs-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mp-dogs-title{margin-bottom:0}

.mp-empty-state{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:34px 20px}
.mp-empty-state p{font-size:.92rem;color:var(--text);margin:0}

/*──────────────────────────────────────────────
  DOG LIST — one card per dog, full details always
  visible (no collapse/expand, no duplicate header)
──────────────────────────────────────────────*/
.mp-dog-list{display:flex;flex-direction:column;gap:14px}
.mp-dog-card{background:#fff;border:1px solid var(--gray-line);border-radius:var(--r);overflow:hidden}
/* Busy state for archive / restore / delete. The spinner takes the icon's
   place rather than the label's (the pattern .mp-crop-save uses) because
   these three sit in a row: collapsing one to a bare spinner would shuffle
   the others sideways mid-request. Keeping the text also means the button
   still says which action is running. */
.mp-btn.is-loading{cursor:default;opacity:.75}
.mp-btn.is-loading svg{display:none}
.mp-btn.is-loading .recallers-btn-spinner{display:inline-block}
/* Flashed on the card a dog was just restored into, after the page reloads
   and scrolls to it — the card moves from the archived list up into the
   active one, so it needs to say "here". Same 2.6s tint-out as a deep-linked
   comment (.cmt-item-highlight). */
.mp-dog-card-highlight{animation:recallers-card-highlight 2.6s ease-out}
@keyframes recallers-card-highlight{
  0%{background:var(--grape-soft);border-color:var(--grape)}
  100%{background:#fff;border-color:var(--gray-line)}
}

.mp-dog-summary-age{font-size:.82rem;color:var(--blue);font-weight:600}

.mp-dog-panel{padding:20px}

/*──────────────────────────────────────────────
  DOG PANEL — details + inline edit
──────────────────────────────────────────────*/
.mp-dogprofile-row{display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap}
.mp-dog-photo-wrap{position:relative;flex-shrink:0;width:170px;display:inline-block}
.mp-dog-photo{width:170px;height:170px;border-radius:50%;overflow:hidden;background:var(--gray-bg);display:block}
.mp-dog-photo img{width:100%;height:100%;object-fit:cover;display:block}
.mp-dog-camera-btn{
  position:absolute;right:4px;bottom:4px;width:34px;height:34px;border-radius:50%;
  background:#fff;border:none;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(20,30,60,.18)!important;cursor:pointer;
}
.mp-dog-camera-btn-ico{
  width:26px;height:26px;border-radius:50%;background:var(--violet);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.mp-dog-camera-btn-ico svg{width:13px;height:13px}

.mp-dog-content{flex:1;min-width:280px}
.mp-dog-name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.mp-dog-name{font-family:var(--font-h);font-weight:800;font-size:1.3rem;color:var(--text)}
.mp-dog-name-edit{
  border:1.5px solid var(--violet);border-radius:6px;padding:3px 8px;font-size:1.2rem;
  font-family:var(--font-h);font-weight:800;color:var(--text);min-width:160px;
}
.mp-dog-name-edit:focus{outline:none}

.mp-info-cols{display:flex;gap:28px;flex-wrap:wrap}
.mp-info-col{flex:1;min-width:220px;display:flex;flex-direction:column}
.mp-info-sep{width:1px;background:var(--gray-line);align-self:stretch;flex-shrink:0}

.mp-info-row{display:flex;align-items:center;gap:14px;padding:11px 0}
.mp-info-row + .mp-info-row{border-top:1px solid var(--gray-line)}
.mp-info-ico{width:22px;height:22px;flex-shrink:0;color:var(--violet);display:flex;align-items:center;justify-content:center}
.mp-info-ico svg{width:20px;height:20px}
.mp-info-label{flex:0 0 130px;font-family:var(--font-h);font-weight:700;font-size:.88rem;color:var(--violet)}
.mp-info-value{flex:1;font-size:.9rem;color:var(--text);font-weight:500;min-width:0}
.mp-info-value-note{color:var(--blue);font-weight:600;font-size:.82rem}
.mp-info-value-edit{
  border:1.5px solid var(--violet);border-radius:6px;padding:5px 9px;font-size:.88rem;
  font-family:var(--font-b);color:var(--text);width:100%;max-width:220px;
}
.mp-info-value-edit:focus{outline:none}

/* Brief highlight shown on a value when a save fails (reverted + flagged). */
.mp-field-error{outline:2px solid #c23b3b;outline-offset:2px;border-radius:4px}

/* In-flight state for an inline-edited field (.mp-info-value or .mp-dog-name,
   whichever the edit target is): lay the input and spinner out side by side
   (the input's own width:100% would otherwise push the spinner onto its own
   line) and dim it slightly so it reads as busy. */
.mp-field-saving{display:flex;align-items:center;gap:8px;opacity:.75}
.mp-field-saving .mp-info-value-edit,
.mp-field-saving .mp-dog-name-edit{width:auto;flex:1;min-width:0}
.mp-field-spinner{display:inline-block;color:var(--violet)}

.mp-dog-notes{display:flex;flex-direction:column;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--gray-line)}
.mp-dog-note{display:flex;flex-direction:column;gap:2px}
.mp-dog-note-label{font-family:var(--font-h);font-weight:700;font-size:.82rem;color:var(--violet)}
.mp-dog-note-text{font-size:.88rem;color:var(--text)}
.mp-challenge-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:5px}
.mp-challenge-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:#ece8fd;color:var(--violet);font-family:var(--font-h);font-weight:700;font-size:.78rem;
  border-radius:999px;padding:6px 13px;line-height:1.3;
}

/* Compact, collapsed-by-default full quiz answers — small type + tight rows
   so opening it never adds much page height. */
.mp-quiz{margin-top:16px;padding-top:16px;border-top:1px solid var(--gray-line)}
.mp-quiz-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  background:none;border:none;padding:0;cursor:pointer;text-align:left;
  font-family:var(--font-h);font-weight:700;font-size:.85rem;color:var(--violet);
}
.mp-quiz-chevron{width:13px;height:13px;flex-shrink:0;transition:transform .16s}
.mp-quiz-toggle[aria-expanded="true"] .mp-quiz-chevron{transform:rotate(180deg)}
.mp-quiz-panel{margin-top:8px}
.mp-quiz-row{display:flex;align-items:baseline;gap:12px;padding:6px 0}
.mp-quiz-row + .mp-quiz-row{border-top:1px solid var(--gray-line)}
.mp-quiz-q{flex:0 0 56%;font-size:.8rem;color:var(--text);opacity:.7}
.mp-quiz-a{flex:1;font-size:.8rem;color:var(--text);font-weight:600;text-align:right}

.mp-dog-actions{display:flex;justify-content:flex-end;margin-top:18px}

/* visually-hidden file input used by the camera upload buttons */
.mp-file-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}

/*──────────────────────────────────────────────
  PHOTO CROP MODAL (core Jcrop — see functions.php
  jcrop enqueue + recallers-main.js photo handlers)
──────────────────────────────────────────────*/
.mp-crop-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.mp-crop-modal[hidden]{display:none}
.mp-crop-modal-backdrop{position:absolute;inset:0;background:rgba(20,20,30,.55)}
.mp-crop-modal-panel{
  position:relative;background:#fff;border-radius:var(--r);padding:22px;
  width:100%;max-width:440px;max-height:90vh;overflow:auto;
  box-shadow:0 20px 50px rgba(20,30,60,.3);
}
.mp-crop-modal-title{font-family:var(--font-h);font-weight:800;font-size:1.05rem;color:var(--text);margin-bottom:14px}
.mp-crop-stage{max-width:100%}
.mp-crop-stage img{max-width:100%;display:block}
.mp-crop-stage > img{height:auto}
.mp-crop-stage .jcrop-holder img{max-width:none!important;height:auto!important}
.mp-crop-error{color:#c23b3b;font-size:.84rem;margin:12px 0 0}
.mp-crop-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}

/*──────────────────────────────────────────────
  OVERLAY MOTION — shared by the crop modal and the
  confirm dialog so the photo flow feels identical on
  /my-profile and /dashboard (one component drives
  both — see COMPONENT: DOG PHOTO UPLOAD and
  COMPONENT: DOG DIALOGS in recallers-main.js).

  The JS unsets [hidden] a frame before adding
  ".is-open", and re-sets [hidden] only after the
  leave transition, which is what gives these rules
  a state to transition from — [hidden]{display:none}
  on its own can't be animated.
──────────────────────────────────────────────*/
.mp-crop-modal,.mp-confirm{opacity:0;pointer-events:none;transition:opacity .18s ease}
.mp-crop-modal.is-open,.mp-confirm.is-open{opacity:1;pointer-events:auto}

/* Crop panel lifts without scaling: Jcrop measures the image while the
   panel is still transformed, and a scale would feed it dimensions 2.5%
   off. translateY moves the panel without changing any element's size,
   so the cropper's geometry stays exact. */
.mp-crop-modal-panel{
  opacity:0;transform:translateY(12px);
  transition:opacity .2s ease,transform .22s cubic-bezier(.2,.8,.3,1);
}
.mp-crop-modal.is-open .mp-crop-modal-panel{opacity:1;transform:none}

/* Nothing measures inside the confirm dialog, so it gets the fuller lift. */
.mp-confirm-panel{
  opacity:0;transform:translateY(10px) scale(.975);
  transition:opacity .2s ease,transform .22s cubic-bezier(.2,.8,.3,1);
}
.mp-confirm.is-open .mp-confirm-panel{opacity:1;transform:none}

/* Save button busy state — the upload is a network round trip. Same
   spinner convention as .cmt-post-btn / .cm-btn-discussion-remove. */
.mp-crop-save.is-loading{cursor:default;opacity:.9}
.mp-crop-save.is-loading .mp-crop-save-label{display:none}
.mp-crop-save.is-loading .recallers-btn-spinner{display:inline-block}

/* The saved photo landing in its card, on either template's hook. */
@keyframes recallers-photo-pop{from{opacity:.25;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
[data-dog-photo-img].is-photo-updated{animation:recallers-photo-pop .34s ease-out}

@media(prefers-reduced-motion:reduce){
  .mp-crop-modal,.mp-confirm,.mp-crop-modal-panel,.mp-confirm-panel{transition:none}
  .mp-crop-modal-panel,.mp-confirm-panel{transform:none}
  [data-dog-photo-img].is-photo-updated{animation:none}
}

/*──────────────────────────────────────────────
  CONFIRM DIALOG — replaces window.confirm/alert
  for archive/delete. Same overlay shape as the
  crop modal above (and .ss-modal elsewhere), so
  modals on this site stay visually one thing.
──────────────────────────────────────────────*/
.mp-confirm{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:20px}
.mp-confirm[hidden]{display:none}
.mp-confirm-backdrop{position:absolute;inset:0;background:rgba(20,20,30,.55)}
/* Card structure: titled header, ruled off from the body, so the dialog reads
   as a considered card rather than a stack of loose paragraphs. */
.mp-confirm-panel{
  position:relative;background:#fff;border-radius:var(--r);padding:0;
  width:100%;max-width:430px;box-shadow:0 20px 50px rgba(20,30,60,.3);overflow:hidden;
}
/* Merged header: photo + question + archetype on one line. --mp-arch is set
   per-dialog by JS from the dog's archetype colour (Archetype::color()), with
   --mp-arch-tint its low-alpha form; both fall back to brand violet for a dog
   with no archetype yet. */
.mp-confirm-head{
  display:flex;align-items:center;gap:14px;
  padding:18px 24px;border-bottom:1px solid var(--gray-line);
}
.mp-confirm-dog-photo{
  width:48px;height:48px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:var(--gray-bg);display:block;
}
.mp-confirm-dog-photo[hidden]{display:none}
.mp-confirm-dog-photo img{width:100%;height:100%;object-fit:cover;display:block}
.mp-confirm-head-text{min-width:0}

.mp-confirm-title{
  font-family:var(--font-h);font-weight:800;font-size:1.05rem;color:var(--text);
  margin:0;line-height:1.3;
}
/* The dog's name inside the question: archetype colour with a tinted band
   behind the baseline. `inset` box-shadow rather than a border so it sits
   behind the glyphs like a highlighter and doesn't affect line height. */
.mp-confirm-dog-name{
  color:var(--mp-arch,var(--violet));
  box-shadow:inset 0 -.32em 0 var(--mp-arch-tint,rgba(91,43,224,.18));
}
.mp-confirm-dog-meta{
  display:block;font-size:.78rem;font-weight:600;
  color:var(--mp-arch,var(--violet));margin-top:3px;
}
.mp-confirm-dog-meta[hidden]{display:none}

.mp-confirm-body{font-size:.88rem;color:var(--gray-dark);line-height:1.6;margin:0;padding:20px 24px 0}
/* The dog's name where it appears in the body copy. Bold and a shade darker
   than the surrounding prose — the archetype colour and highlighter band stay
   in the header, where they land once; repeating them three times down here
   would shout, especially in the red delete dialog. */
.mp-confirm-name-inline{font-weight:700;color:var(--text)}

.mp-confirm-actions{
  display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;
  margin-top:22px;padding:0 24px 22px;
}
.mp-confirm-actions .mp-btn[hidden]{display:none}
/* Stop the page scrolling behind the dialog. */
body.mp-confirm-open{overflow:hidden}

@media(max-width:480px){
  .mp-confirm-head{padding:16px 18px;gap:12px}
  .mp-confirm-dog-photo{width:42px;height:42px}
  .mp-confirm-body{padding:18px 18px 0}
  .mp-confirm-actions{flex-direction:column-reverse;padding:0 18px 18px}
  .mp-confirm-actions .mp-btn{width:100%}
}

/*──────────────────────────────────────────────
  NO-ACTIVE-DOG PROMPT — shown when the student
  owns dogs but none is active (e.g. just after
  archiving the active one). Explains why no dog
  shows the Active badge; the top-bar switcher is
  where they pick one.
──────────────────────────────────────────────*/
.mp-picker-prompt{
  display:flex;align-items:center;gap:10px;margin:14px 0;
  background:#fff8ec;border:1px solid #f0d9b5;border-radius:var(--r-sm);
  padding:12px 16px;color:#7a5620;font-size:.88rem;line-height:1.45;
}
.mp-picker-prompt svg{width:18px;height:18px;flex-shrink:0}

/*──────────────────────────────────────────────
  ARCHIVED DOGS — compact rows, not full cards:
  a retired dog is a record to revisit, not a
  profile to keep editing. Restore + Delete live
  here only (Delete is never offered above).
──────────────────────────────────────────────*/
.mp-dogs-head--archived{margin-top:30px}
.mp-archived-note{font-size:.82rem;color:var(--gray-dark)}

.mp-dog-list--archived{margin-top:4px}
.mp-dog-card--archived{background:var(--gray-bg)}
.mp-archived-row{display:flex;align-items:center;gap:16px;padding:14px 18px;flex-wrap:wrap}

.mp-archived-photo{
  width:56px;height:56px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:#fff;display:block;
}
.mp-archived-photo img{width:100%;height:100%;object-fit:cover;display:block}

.mp-archived-meta{flex:1 1 200px;min-width:0}
.mp-archived-name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mp-archived-sub{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:3px;
  font-size:.8rem;color:var(--gray-dark);
}
.mp-pill--archived{background:#eceef1;color:var(--gray-dark)}

.mp-archived-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mp-archived-actions .mp-btn{padding:7px 14px;font-size:.8rem}

/*──────────────────────────────────────────────
  RESPONSIVE — app mode
──────────────────────────────────────────────*/
@media(max-width:760px){
  .mp-title{font-size:1.4rem}
  .mp-profile-row{flex-direction:column;align-items:center;text-align:center}
  .mp-name-row,.mp-nickname-row,.mp-badges{justify-content:center}
  .mp-dogs-head{flex-direction:column;align-items:stretch;text-align:center}
  .mp-dogprofile-row{flex-direction:column;align-items:center;text-align:center}
  .mp-dog-name-row{justify-content:center}
  .mp-info-cols{flex-direction:column;gap:0}
  .mp-info-sep{display:none}
  .mp-info-row{flex-wrap:wrap}
  .mp-info-label{flex:1 1 100%}
  .mp-quiz-row{flex-direction:column;gap:2px}
  .mp-quiz-q{flex-basis:auto;opacity:.6}
  .mp-quiz-a{text-align:left}
  .mp-dog-actions{justify-content:center}
}

/*================================================================
  PAGE: COMMUNITY
  Styles for: page-community-content.php
  Append this whole block to recallers-main.css, right after the
  "PAGE: MY PROFILE" section.
================================================================*/

/*──────────────────────────────────────────────
  TITLE
──────────────────────────────────────────────*/
/* Hide the parent forum/archive headers because the child forum templates
   provide the single visible page heading as the designed Community title. */
body.single-forum .entry-header.bb-single-forum,
body.forum-archive .entry-header{display:none}
.cm-title-row{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.cm-title-row .cm-title{margin:0}
.cm-title-ico{color:var(--navy);flex-shrink:0;display:flex;align-items:center}
.cm-title-ico svg{width:30px;height:30px;display:block}
.cm-title{font-family:var(--font-h);font-weight:800;font-size:1.7rem;color:var(--navy)}
.cm-sub{font-size:.88rem;color:var(--blue);font-weight:600;margin-top:2px}

.recallers-community-heading{margin-bottom:15px;}
.recallers-topic-community-header{margin-bottom:18px}
.recallers-topic-community-heading{margin-bottom:18px}
.recallers-topic-community-header .cm-tabs{margin-bottom:18px}
.recallers-community-tabs-linked{margin-bottom:18px}

/* Match the custom forum index/single-forum columns while retaining the
   parent topic/reply markup inside the two columns. */
body.single-topic #bbpress-forums.bs-replies-wrapper > .bb-grid{
  display:grid;margin:0;
  grid-template-columns:minmax(0,1fr) 400px;
  gap:24px;
}
body.single-topic #bbpress-forums.bs-replies-wrapper > .bb-grid > .replies-content,
body.single-topic #bbpress-forums.bs-replies-wrapper > .bb-grid > .bs-single-topic-sidebar{
  min-width:0;max-width:none;width:auto;padding-left:0;padding-right:0;
}
body.single-topic #bbpress-forums.bs-replies-wrapper > .bb-grid > .bs-single-topic-sidebar{
  flex:none;
}
body.single-topic .recallers-topic-guidelines-card{
  margin:0 0 18px;
}
body.single-topic .bs-topic-sidebar-inner{padding-top:0}
body.single-topic .bs-topic-sidebar-inner .scrubber{margin-top:25px}

/*──────────────────────────────────────────────
  LEAD TOPIC HEADER — "Posted by" author block + activity strip
  (bbpress/content-single-topic-lead.php)

  The author is primary: a "Posted by" label, then their photo, name and
  badge pair. Everything about the latest reply is demoted into a tinted
  strip along the bottom edge of the card, so the two never read as a pair
  of equal lines the way BuddyBoss's two meta sentences did.
──────────────────────────────────────────────*/
/* BuddyBoss zeroes `.item-meta` margins from a doubled-ID selector
   (`#bbpress-forums#bbpress-forums … .topic-lead.topic-lead .item-meta`), which
   outranks anything class-scoped — so the two meta rows this design owns have
   to match that specificity to set their own spacing. */
#bbpress-forums#bbpress-forums .bs-forums-items.list-view .bs-header-item.bs-item-wrap.topic-lead .item-meta.rc-posted{
  margin:18px 0 0;
}
/* Vertical rhythm for the whole header block, set from the same doubled-ID
   scope for the same reason: title → author → content → tags → strip each
   need their own gap, and BuddyBoss's defaults (10px/15px/-5px) leave the
   author line crowded against both neighbours. */
#bbpress-forums#bbpress-forums .bs-forums-items.list-view .bs-header-item.bs-item-wrap.topic-lead .item-description{margin:18px 0 0}
#bbpress-forums#bbpress-forums .bs-forums-items.list-view .bs-header-item.bs-item-wrap.topic-lead .item-tags.rc-tags{margin:16px 0 0}
.topic-lead .rc-posted-label{
  font-family:var(--font-h);font-weight:800;font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gray-dark);opacity:.7;
}
.topic-lead .rc-posted-row{display:flex;align-items:center;gap:10px;margin-top:7px;flex-wrap:wrap}
.topic-lead .rc-posted-name{display:flex;align-items:center;gap:7px}
.topic-lead .rc-posted-name a{font-family:var(--font-h);font-weight:700;font-size:.95rem;color:var(--text)}
.topic-lead .rc-posted-name a:hover{color:var(--blue)}
.topic-lead .rc-posted-date{font-size:.8rem;color:var(--gray-dark)}

/* Photos. bbp_get_author_link() nests its <img> in an <a>, so size the wrap
   and let both fill it. */
.topic-lead .rc-av{border-radius:50%;overflow:hidden;flex-shrink:0;display:block;background:var(--gray-bg)}
.topic-lead .rc-av a,.topic-lead .rc-av .bbp-author-avatar,
.topic-lead .rc-av img{display:block;width:100%;height:100%}
.topic-lead .rc-av img{object-fit:cover}
.topic-lead .rc-av-32{width:32px;height:32px}
.topic-lead .rc-av-26{width:26px;height:26px}

/* Bleeds to the card edges: the lead <li> carries 25px 30px of padding and
   is only rounded at the top, the replies list continuing below it. */
#bbpress-forums#bbpress-forums .bs-forums-items.list-view .bs-header-item.bs-item-wrap.topic-lead .item-meta.rc-activity{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:22px -30px -25px;padding:13px 30px;
  background:var(--gray-bg);border-top:1px solid var(--gray-line);
}
/* The tag row above the strip carries a -5px bottom margin of its own. */
#bbpress-forums#bbpress-forums .bs-forums-items.list-view .topic-lead .item-tags{margin-bottom:0}
.topic-lead .rc-activity-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.topic-lead .rc-activity-right{display:flex;align-items:center;gap:16px;margin-left:auto}
.topic-lead .rc-activity-who{display:flex;align-items:center;gap:6px}
.topic-lead .rc-activity-who a{font-family:var(--font-h);font-weight:700;font-size:.9rem;color:var(--text)}
.topic-lead .rc-activity-who a:hover{color:var(--blue)}
.topic-lead .rc-activity-tag{
  background:var(--blue-pale);color:var(--blue);border-radius:7px;padding:5px 11px;
  font-family:var(--font-h);font-weight:700;font-size:.78rem;white-space:nowrap;
}
.topic-lead .rc-activity-when,
.topic-lead .rc-activity-when a{font-size:.83rem;color:var(--gray-dark);font-weight:500}
.topic-lead .rc-activity-when a:hover{color:var(--blue)}
.topic-lead .rc-vr{width:1px;height:26px;background:var(--gray-line);flex-shrink:0}
.topic-lead .rc-stat{display:flex;align-items:center;gap:7px;font-size:.83rem;
  color:var(--gray-dark);white-space:nowrap}
.topic-lead .rc-stat-ico{width:17px;height:17px;color:var(--blue);flex-shrink:0}

/* Badge pair, appended after each name by recallers_author_badges_html():
   28px on the author line, 24px in the strip — the size step is what keeps
   the author dominant. Both hold on mobile, where the shared rule would
   otherwise drop the hex to 30px. */
.topic-lead .rc-posted-name .recallers-bbp-top-badge{width:28px;height:28px;margin:0}
.topic-lead .rc-posted-name .recallers-bbp-top-badge svg{width:28px;height:28px}
.topic-lead .rc-posted-name .recallers-bbp-top-badge .badge-chip-num{
  width:14px;height:14px;font-size:.48rem;right:-4px;bottom:0;
}
.topic-lead .rc-posted-name .recallers-bbp-hex.hex-badge-sm{width:28px;height:28px;margin:0}
.topic-lead .rc-posted-name .recallers-bbp-hex.hex-badge-sm svg{width:28px;height:28px}
.topic-lead .rc-posted-name .recallers-bbp-hex.hex-badge-sm .hex-badge-num{
  width:14px;height:14px;font-size:.48rem;right:-4px;bottom:0;
}
.topic-lead .rc-activity-who .recallers-bbp-top-badge{width:24px;height:24px;margin:0}
.topic-lead .rc-activity-who .recallers-bbp-top-badge svg{width:24px;height:24px}
.topic-lead .rc-activity-who .recallers-bbp-top-badge .badge-chip-num{
  width:12px;height:12px;font-size:.44rem;right:-3px;bottom:0;
}
.topic-lead .rc-activity-who .recallers-bbp-hex.hex-badge-sm{width:24px;height:24px;margin:0}
.topic-lead .rc-activity-who .recallers-bbp-hex.hex-badge-sm svg{width:24px;height:24px}
.topic-lead .rc-activity-who .recallers-bbp-hex.hex-badge-sm .hex-badge-num{
  width:12px;height:12px;font-size:.44rem;right:-3px;bottom:0;
}

/* "This discussion was modified … by <avatar> <name>." bbPress appends this
   revision log inside the topic/reply content. Its 14px avatar inherits the
   theme's global `img{display:block}`, which drops the avatar and the name
   onto their own lines mid-sentence — so put the avatar back inline and mute
   the whole line, which is metadata rather than content. Source images are
   150px, so 20px stays crisp. */
.bbp-topic-revision-log,
.bbp-reply-revision-log{margin:12px 0 0;padding:0;list-style:none}
.bbp-topic-revision-log-item,
.bbp-reply-revision-log-item{font-size:.79rem;color:var(--gray-dark);line-height:1.8}
.bbp-topic-revision-log-item img,
.bbp-reply-revision-log-item img{
  display:inline-block;vertical-align:middle;
  width:20px;height:20px;border-radius:50%;margin:0 2px;
}
.bbp-topic-revision-log-item a,
.bbp-reply-revision-log-item a{color:var(--gray-dark);font-weight:600}
.bbp-topic-revision-log-item a:hover,
.bbp-reply-revision-log-item a:hover{color:var(--blue)}

/* Topic tags. BuddyBoss lays this row out for its icon font — 25px of left
   padding for an absolutely-positioned glyph — so the inline SVG replacing it
   needs the padding dropped and the row aligned as a flex line. */
#bbpress-forums#bbpress-forums .bs-forums-items.list-view .topic-lead .item-tags.rc-tags{
  display:flex;align-items:center;gap:7px;padding:0;
}
.topic-lead .rc-tags .rc-stat-ico{width:15px;height:15px;color:var(--gray-dark);opacity:.8;flex-shrink:0}
.topic-lead .rc-tags ul{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.topic-lead .rc-tags li{margin:0}
.topic-lead .rc-tags a{
  font-size:.76rem;font-weight:600;color:var(--gray-dark);
  background:var(--gray-bg);border:1px solid var(--gray-line);
  border-radius:999px;padding:2px 10px;display:inline-block;line-height:1.6;
}
.topic-lead .rc-tags a:hover{color:var(--blue);border-color:var(--blue)}

@media(max-width:600px){
  .topic-lead .rc-activity{gap:10px}
  .topic-lead .rc-activity-right{margin-left:0}
  .topic-lead .rc-vr{display:none}
}

@media(max-width:1040px){
  body.single-topic #bbpress-forums.bs-replies-wrapper > .bb-grid{grid-template-columns:minmax(0,1fr);gap:0}
  body.single-topic .bs-single-topic-sidebar{display:none}
  body.single-topic .bs-topic-sidebar-inner{padding-top:0}
  body.single-topic .bs-topic-sidebar-inner .scrubber{margin-top:25px}
}

/*──────────────────────────────────────────────
  TABS
──────────────────────────────────────────────*/
.cm-tabs{display:flex;gap:26px;border-bottom:1px solid var(--gray-line)}
.cm-tab{
  font-family:var(--font-h);font-weight:700;font-size:.92rem;color:var(--gray-dark);
  padding:10px 2px 12px;border-bottom:2px solid transparent;
}
.cm-tab:hover:not(.active){color:var(--text)}
.cm-tab.active{color:var(--blue);border-bottom-color:var(--green-done)}

/*──────────────────────────────────────────────
  GROUPS SECTION HEADER
──────────────────────────────────────────────*/
.cm-section-title{font-family:var(--font-h);font-weight:800;font-size:1.3rem;color:var(--text)}
.cm-section-sub{font-size:.86rem;color:var(--gray-dark);font-weight:500;margin-top:2px}

/*──────────────────────────────────────────────
  GROUP LIST
──────────────────────────────────────────────*/
.cm-group-list{display:flex;flex-direction:column;gap:14px}
.cm-group-card{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--r);
  padding:18px 22px;
}
.cm-group-top{display:flex;align-items:center;gap:18px;flex:1;min-width:220px}
.cm-group-ico{
  width:54px;height:54px;border-radius:50%;flex-shrink:0;color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.cm-group-ico svg{width:24px;height:24px}

.cm-group-body{flex:1;min-width:0}
.cm-group-title{font-family:var(--font-h);font-weight:800;font-size:1.05rem;color:var(--text)}
.cm-group-desc{font-size:.85rem;color:var(--gray-dark);font-weight:500;margin-top:2px}

/* Fixed widths on the stat and action columns so they line up down the whole
   list — without them each card sizes to its own content (a 4-digit count or a
   longer date shifts that card's columns out of line with its neighbours). */
.cm-group-bottom{display:flex;align-items:center;gap:24px;flex-shrink:0}
.cm-group-stats{display:flex;gap:24px}
.cm-group-stat{text-align:center;flex-shrink:0;min-width:56px}
.cm-group-actions{min-width:172px}
.cm-group-stat-num{font-family:var(--font-h);font-weight:800;font-size:1.15rem;color:var(--text)}
.cm-group-stat-label{font-size:.76rem;color:var(--gray-dark);font-weight:600;margin-top:1px}

.cm-group-actions{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}
.cm-btn-view-group{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1.5px solid var(--blue);color:var(--blue);background:#fff;
  border-radius:7px;font-family:var(--font-h);font-weight:700;font-size:.85rem;
  padding:8px 18px;white-space:nowrap;transition:background .14s;
}
.cm-btn-view-group:hover{background:var(--blue-pale)}
/* The forum index (bbpress/content-archive-forum.php) uses real links where
   the mockup used <button>s. */
a.cm-btn-view-group,a.cm-btn-outline-block{display:inline-flex;text-align:center}
a.cm-btn-outline-block{display:block}
.cm-group-lastpost{font-size:.76rem;color:var(--gray-dark);font-weight:500;white-space:nowrap}

/*──────────────────────────────────────────────
  SIDEBAR — shared card head pattern
──────────────────────────────────────────────*/
.cm-side-card{background:#fff;border:1px solid var(--gray-line);border-radius:var(--r);padding:18px}
.cm-side-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cm-side-head-ico{color:var(--blue);flex-shrink:0;display:flex}
.cm-side-head-ico svg{width:22px;height:22px}
.cm-side-head-title{font-family:var(--font-h);font-weight:800;font-size:1.02rem;color:var(--text)}
.cm-side-text{font-size:.84rem;color:var(--gray-dark);font-weight:500;line-height:1.5;margin-bottom:14px}
.cm-side-text-note{margin-top: 10px;}
.cm-kindness-code-link{color: var(--blue);}

.cm-btn-outline-block{
  display:flex;align-items:center;justify-content:center;width:100%;
  border:1.5px solid var(--blue);color:var(--blue);background:#fff;
  border-radius:7px;font-family:var(--font-h);font-weight:700;font-size:.88rem;
  padding:10px 16px;transition:background .14s;
}
.cm-btn-outline-block:hover{background:var(--blue-pale)}

/*──────────────────────────────────────────────
  LATEST ACTIVITY
──────────────────────────────────────────────*/
.cm-activity-list{display:flex;flex-direction:column;gap:14px;margin-bottom:12px}
.cm-activity-item{display:flex;align-items:flex-start;gap:12px}
.cm-activity-ico{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.cm-activity-ico svg{width:17px;height:17px}
.cm-activity-title{font-family:var(--font-h);font-weight:700;font-size:.88rem;color:var(--text);line-height:1.3}
.cm-activity-meta{font-size:.78rem;color:var(--gray-dark);font-weight:500;margin-top:2px}
.cm-activity-meta a{color:var(--blue);font-weight:700}
.cm-activity-time{font-size:.76rem;color:var(--gray-mid);font-weight:500;margin-top:1px}

.cm-view-all-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--blue);font-family:var(--font-h);font-weight:700;font-size:.85rem;
}
.cm-view-all-link svg{width:13px;height:13px;transition:transform .14s}
.cm-view-all-link:hover svg{transform:translateX(2px)}

/*──────────────────────────────────────────────
  COMMUNITY GUIDELINES
──────────────────────────────────────────────*/
.cm-guidelines-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--blue);font-family:var(--font-h);font-weight:700;font-size:.85rem;
}
.cm-guidelines-link svg{width:13px;height:13px;transition:transform .14s}
.cm-guidelines-link:hover svg{transform:translateX(2px)}

/*──────────────────────────────────────────────
  RESPONSIVE — app mode
──────────────────────────────────────────────*/
@media(max-width:760px){
  .cm-title{font-size:1.4rem}
  .cm-group-card{padding:16px;gap:14px;flex-direction:column;align-items:stretch}
  .cm-group-ico{width:46px;height:46px}
  .cm-group-ico svg{width:20px;height:20px}
  .cm-group-bottom{width:100%;flex-direction:column;align-items:stretch;gap:14px}
  .cm-group-stats{justify-content:center;gap:36px}
  .cm-group-actions{align-items:stretch;min-width:0}
  .cm-btn-view-group{width:100%;text-align:center}
  .cm-group-lastpost{text-align:center}
}

/*──────────────────────────────────────────────
  GAMES DISCUSSIONS TAB (Followed / Favorite lists)
  Part of the Community/forum-index "Games Discussions" panel — see
  recallers_render_discussion_card() in functions.php and
  recallers-main.js "PAGE: COMMUNITY — Games Discussions". Reuses
  .cm-group-card/.cm-group-list/.cm-group-ico/.cm-btn-view-group above;
  these rules only add what's specific to a discussion card.
──────────────────────────────────────────────*/
.cm-discussion-card{cursor:pointer}
.cm-discussion-card:hover{border-color:var(--blue)}
.cm-discussion-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* "Archetype: [Label]" — highlighted per spec, set apart from the
   milestone title next to it. */
.cm-discussion-archetype-name{color:var(--blue);font-weight:700}
.cm-discussion-empty{font-size:.86rem;color:var(--gray-dark);font-weight:500;margin:4px 0 28px}
/* Separates "Followed Discussions" from "Favorite Discussions" — plain rule
   with generous vertical margin so the two sections read as distinct groups
   instead of the second section's heading crowding the first list's last
   card. */
.cm-discussion-divider{border:none;border-top:1px solid var(--gray-line);background:transparent;margin:40px 0}
/* On a discussion card .cm-group-lastpost sits under .cm-group-desc (a third
   line in .cm-group-body), unlike the Groups list above where it's a lone
   line in the action column — give it the same top spacing as .cm-group-desc
   gets and let it wrap like normal body text instead of forcing one line. */
.cm-discussion-card .cm-group-lastpost{margin-top:2px;white-space:normal}
/* Unfollow/Unfavorite gets its own red-outline treatment so it reads as a
   destructive action, distinct from the blue "View Discussion" button next
   to it (same .cm-btn-view-group base — border/text colour only differs). */
.cm-btn-discussion-remove{border-color:var(--red);color:var(--red)}
.cm-btn-discussion-remove:hover{background:#fdecea}
/* Loading: swap the label for the spinner so the button doesn't imply the
   click did nothing while the AJAX removal is in flight. */
.cm-btn-discussion-remove.is-loading{cursor:default}
.cm-btn-discussion-remove.is-loading:hover{background:#fff}
.cm-btn-discussion-remove.is-loading .cm-btn-label{display:none}
.cm-btn-discussion-remove.is-loading .recallers-btn-spinner{display:inline-block}

/* Card is followed/favorited (archetype matches) but the CURRENTLY active
   dog hasn't actually reached this game yet — see
   recallers_discussion_is_locked_for_dog()'s docblock in functions.php for
   why archetype-matching alone doesn't guarantee that. Reuses the site's
   existing "locked" pill treatment (.cq-lock-badge, Coach Queue) rather
   than inventing a new visual language for the same concept. */
.cm-discussion-locked-badge{margin-left:8px;vertical-align:1px}
.cm-discussion-card--locked{cursor:pointer} /* still clickable — click shows the tooltip, doesn't navigate */
.cm-discussion-card--locked:hover{border-color:var(--orange)}

@media(max-width:760px){
  .cm-discussion-locked-badge{display:inline-flex;margin:6px 0 0}
}

@media(max-width:760px){
  .cm-discussion-card .cm-group-lastpost{text-align:left}
}

/*──────────────────────────────────────────────
  MY ACTIVITY / GAMES ACTIVITY TABS — forum lists
  (My Replies / My Topics / My Favorite Topics on the Community Activity
  tab; My Replies on the Games Activity tab)
  Part of the Community/forum-index "community-activity" and
  "games-activity" panels — see recallers_render_my_forum_lists() /
  recallers_render_game_replies_section() in functions.php and
  recallers-main.js "PAGE: COMMUNITY — My Activity / Games Activity tabs:
  forum list pagination". Reuses .cm-group-card/.cm-group-list/
  .cm-section-title/.cm-section-sub/.cm-discussion-divider/
  .cm-discussion-empty above, and the native forum topic list's own
  .ds-pagination/.ds-page-nums/.ds-page-num/.ds-page-btn pagination styles
  (PAGINATION, below) for the prev/next + numbered pagination bar; these
  rules only add the list's own AJAX-swap loading state.
──────────────────────────────────────────────*/
.cm-forum-list.is-loading .cm-forum-list-items{opacity:.5;pointer-events:none;transition:opacity .14s}
.cm-forum-list.is-loading .cm-forum-list-pagination{opacity:.5;pointer-events:none}

/*================================================================
  PAGE: DISCUSSION (group topic list)
  Styles for: page-discussion-content.php
  Append this whole block to recallers-main.css, right after the
  "PAGE: COMMUNITY" section. Reuses .cm-* header/tab classes from
  that section (this page shares the same Community header).
================================================================*/

/*──────────────────────────────────────────────
  GROUP CARD WRAPPER
──────────────────────────────────────────────*/
.ds-card{background:#fff;border:1px solid var(--gray-line);border-radius:var(--r);padding:22px}

.ds-back-link{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--blue);font-family:var(--font-h);font-weight:700;font-size:.88rem;
  margin-bottom:14px;
}
.ds-back-link svg{width:14px;height:14px}

.ds-group-title{font-family:var(--font-h);font-weight:800;font-size:1.5rem;color:var(--navy)}
.ds-group-desc{font-size:.88rem;color:var(--gray-dark);font-weight:500;margin-top:4px;margin-bottom:18px}

/*──────────────────────────────────────────────
  SEARCH
──────────────────────────────────────────────*/
.ds-search{position:relative;margin-bottom:18px;max-width:420px}
.ds-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--gray-mid)}
.ds-search input{
  width:100%;border:1.5px solid var(--gray-line);border-radius:var(--r-sm);
  padding:10px 14px 10px 38px;font-size:.86rem;color:var(--text);font-family:var(--font-b);
}
.ds-search input::placeholder{color:var(--gray-mid)}
.ds-search input:focus{outline:none;border-color:var(--blue)}

/* On the real forum templates ReadyLaunch's stylesheet loads after this file
   and resets input padding/height, which pushed the placeholder under the
   search icon. Scoping by page id wins the cascade without !important. */
#recallers-discussion-page .ds-search input{
  height:auto;background:#fff;
  padding:10px 14px 10px 38px;
  border:1.5px solid var(--gray-line);border-radius:var(--r-sm);
  font-size:.86rem;font-family:var(--font-b);color:var(--text);
}
#recallers-discussion-page .ds-search input:focus{border-color:var(--blue);box-shadow:none}

/* Toolbar above the topic list: search left, forum actions right. */
.ds-list-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:18px;
}
.ds-list-toolbar .ds-search{margin-bottom:0;flex:1 1 260px;max-width:420px}
.ds-list-toolbar .ds-forum-actions{margin-bottom:0;margin-left:auto}

/* bbPress's Subscribe/Unsubscribe link, kept as-is functionally and given the
   design's secondary-button look. */
.ds-forum-actions .subscription-toggle{
  display:inline-flex;align-items:center;
  border:1.5px solid var(--gray-line);border-radius:7px;background:#fff;color:var(--text);
  font-family:var(--font-h);font-weight:700;font-size:.85rem;padding:7px 16px;
  transition:border-color .14s,color .14s;
}
.ds-forum-actions .subscription-toggle:hover{border-color:var(--blue);color:var(--blue)}

/* Native BuddyBoss topic modal trigger, styled to match the existing design. */
.ds-forum-actions .ds-new-discussion-btn{
  display:inline-flex;align-items:center;gap:6px;
  border:1.5px solid var(--blue);border-radius:7px;background:var(--blue);color:#fff;
  font-family:var(--font-h);font-weight:700;font-size:.85rem;padding:7px 16px;
  transition:filter .14s;
}
.ds-forum-actions .ds-new-discussion-btn:hover{filter:brightness(1.08);color:#fff}
.ds-forum-actions .ds-new-discussion-btn svg{width:15px;height:15px;flex-shrink:0}

/*──────────────────────────────────────────────
  TOPIC TABLE (desktop)
──────────────────────────────────────────────*/
.ds-table-card{border:1px solid var(--gray-line);border-radius:var(--r);overflow:hidden}
.ds-table-scroll{overflow-x:auto}
.ds-table{width:100%;border-collapse:collapse;min-width:680px;margin:0}
.ds-table thead th{
  text-align:left;font-family:var(--font-h);font-weight:700;font-size:.72rem;
  color:var(--gray-dark);letter-spacing:.04em;text-transform:uppercase;
  padding:12px 18px;border-bottom:1px solid var(--gray-line);background:#fafbfd;white-space:nowrap;
}
.ds-table tbody td{padding:13px 18px;border-bottom:1px solid var(--gray-line);vertical-align:middle}
.ds-table tbody tr:last-child td{border-bottom:none}
.ds-table tbody tr:hover{background:var(--gray-bg)}

.ds-topic-cell{display:flex;align-items:center;gap:12px}
.ds-topic-visual{position:relative;width:36px;height:36px;flex:0 0 36px}
.ds-topic-ico{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:var(--blue-pale);color:var(--blue);
  display:flex;align-items:center;justify-content:center;
}
.ds-topic-ico svg{width:17px;height:17px}
.ds-topic-name{font-family:var(--font-h);font-weight:700;font-size:.92rem;color:var(--text)}
.ds-topic-members{font-size:.78rem;color:var(--gray-dark);font-weight:500;margin-top:1px}

.ds-replies-cell{text-align:center;white-space:nowrap}
.ds-replies-num{font-family:var(--font-h);font-weight:800;font-size:.98rem;color:var(--text)}
.ds-replies-label{font-size:.76rem;color:var(--gray-dark);font-weight:600}

.ds-activity-cell{display:flex;align-items:center;gap:12px;white-space:nowrap}
.ds-activity-avatar{width:42px;height:42px;border-radius:50%;overflow:hidden;flex-shrink:0;display:block}
.ds-activity-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ds-activity-name{font-family:var(--font-h);font-weight:700;font-size:.9rem;line-height:1.25;color:var(--text)}
.ds-activity-meta{font-size:.76rem;color:var(--gray-dark);font-weight:500;margin-top:3px}
.ds-activity-tag{font-weight:700;color:var(--blue)}
.ds-activity-tag.is-new{color:var(--green-done)}

.ds-open-topic-btn{
  border:1.5px solid var(--blue);color:var(--blue);background:#fff;
  border-radius:7px;font-family:var(--font-h);font-weight:700;font-size:.82rem;
  padding:7px 16px;white-space:nowrap;transition:background .14s;
}
.ds-open-topic-btn:hover{background:var(--blue-pale)}
a.ds-open-topic-btn{display:inline-block;text-align:center}
.ds-topic-name a{color:inherit}
.ds-topic-name a:hover,.ds-activity-name a:hover{color:var(--blue)}
.ds-activity-name a{color:inherit}
.ds-activity-avatar img{width:100%;height:100%}

/* Author badges on a discussion row's "Latest Activity" cell, appended by
   recallers_topic_last_author_html() — via the same bbp_get_reply_author_link
   filter the reply list uses when the latest activity is a reply, and
   directly when it is the opening post.

   Held at 30x30 — smaller than the 36x36 reply header, on mobile too, where
   the shared rule would otherwise drop the hex to 30px anyway: at full size
   the pair outweighs the name beside it and stretches the row. The name becomes
   a flex line, so the badges sit level with it instead of on its baseline,
   and their own margins give way to the flex gap. */
.ds-activity-name{display:flex;align-items:center;gap:7px}
.ds-activity-name .recallers-bbp-top-badge{width:30px;height:30px;margin:0}
.ds-activity-name .recallers-bbp-top-badge svg{width:30px;height:30px}
.ds-activity-name .recallers-bbp-top-badge .badge-chip-num{
  width:14px;height:14px;font-size:.5rem;right:-4px;bottom:1px;
}
.ds-activity-name .recallers-bbp-hex.hex-badge-sm{
  width:30px;height:30px;margin:0;
}
.ds-activity-name .recallers-bbp-hex.hex-badge-sm svg{width:30px;height:30px}
.ds-activity-name .recallers-bbp-hex.hex-badge-sm .hex-badge-num{
  width:14px;height:14px;font-size:.5rem;right:-4px;bottom:1px;
}

/*──────────────────────────────────────────────
  ROW END — BuddyBoss-native per-topic controls kept alongside the design's
  "Open Topic" button (see template-parts/forum-topic-actions.php)
──────────────────────────────────────────────*/
.ds-row-end{display:flex;align-items:center;justify-content:flex-end;gap:10px;white-space:nowrap}
.ds-topic-actions{display:flex;align-items:center;gap:4px;position:relative}
.ds-card-row-top .ds-topic-actions{margin-left:auto}

/* BuddyBoss positions status badges against its avatar wrapper. In the
   custom topic row, the visual wrapper is the equivalent anchor point. */
.ds-topic-status-actions{
  position:absolute;top:-2px;right:-9px;z-index:1;
  flex-direction:column;gap:2px;
}
.ds-topic-status-actions .bb-topic-status-wrapper{
  position:static;display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;top:auto;right:auto;font-size:18px;
}
.ds-topic-status-actions .bb-topic-status-wrapper .bb-topic-status{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;background-color:#fff;color:var(--bb-alternate-text-color,var(--gray-dark));
  font-size:18px;line-height:1;
}
.ds-topic-status-actions .bb-topic-status-wrapper .bb-topic-status:before{font-size:18px}
/* BuddyBoss single-topic dropdown structure. The parent theme scopes some
   of these rules to #bbpress-forums; this custom topic table sits outside
   that container, so keep only the equivalent fallback here. */
.ds-topic-menu-actions .bs-dropdown-wrap{position:relative}
.ds-topic-menu-actions .bs-dropdown-wrap-inner{position:relative}
.ds-topic-menu-actions .bs-dropdown-wrap-inner>a.bs-dropdown-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;border-radius:6px;color:var(--gray-dark);line-height:1;
}
.ds-topic-menu-actions .bs-dropdown-wrap-inner>a.bs-dropdown-link:hover{background:var(--gray-bg);color:var(--text)}
.ds-topic-menu-actions .bs-dropdown-wrap-inner>a.bs-dropdown-link>i{font-size:19px;line-height:1}
.ds-topic-menu-actions .bs-dropdown-wrap-inner .bs-dropdown{
  position:absolute;top:calc(100% + 4px);right:0;z-index:112;
  min-width:168px;margin:0;padding:10px 0;background:var(--bb-content-background-color,#fff);
  border:0;border-radius:var(--bb-block-radius,12px);
  box-shadow:0 2px 7px 1px rgba(0,0,0,.05),0 6px 32px 0 rgba(18,43,70,.1);list-style:none;text-align:left;display:none;
}
.ds-topic-menu-actions .bs-dropdown-wrap-inner .bs-dropdown.open{display:block}
.ds-topic-menu-actions .bs-dropdown-wrap-inner .bs-dropdown:after{display:none}
.ds-topic-menu-actions .bs-dropdown .bb_more_dropdown__title{display:none}
/* recallers_get_topic_action_data() calls bbp_get_topic_admin_links() with
   before/after/sep all set to '', so — unlike BuddyBoss's native single-topic
   markup — there is no .bbp-admin-links wrapper here: the <a> tags are bare
   direct children of the single <li>. Style that shape directly. */
.ds-topic-menu-actions .bs-dropdown>li{
  margin:0;padding:0;display:flex;flex-direction:column;width:100%;
}
.ds-topic-menu-actions .bs-dropdown>li>a{
  display:inline-flex;align-items:center;width:100%;padding:9px 15px;
  border:0;background:transparent;color:var(--bb-body-text-color,var(--text));
  font-size:13px;font-weight:400;line-height:20px;white-space:nowrap;text-align:left;
}
.ds-topic-menu-actions .bs-dropdown>li>a>i[class^="bb-icon-"],
.ds-topic-menu-actions .bs-dropdown>li>a>i[class*=" bb-icon-"]{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px;
  width:20px;margin:0 10px 0 0;color:var(--bb-alternate-text-color,var(--gray-dark));
  font-size:16px;font-style:normal;font-weight:400;line-height:1;
}
.ds-topic-menu-actions .bs-dropdown>li>a:hover{background:var(--bb-content-alternate-background-color,var(--gray-bg));color:var(--bb-body-text-color,var(--text))}

/* Let BuddyBoss supply the native button, icon, dropdown width, spacing,
   shadow, arrow, hover state, and menu-link treatment. Only the table's
   overflow needs a child-theme adjustment so the native menu is not clipped. */
body.user_more_option_open .ds-table-scroll,
body.user_more_option_open .ds-table-card,
body:has(.ds-topic-menu-actions .bs-dropdown.open) .ds-table-scroll,
body:has(.ds-topic-menu-actions .bs-dropdown.open) .ds-table-card{overflow:visible}

/* Forum "New discussion" / "Subscribe" controls, kept functionally native
   and given the spacing the design expects. */
.ds-forum-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}

/* bbPress prints paginate_links() markup; make it read as the mockup's
   .ds-page-num pills without duplicating bbPress's pagination logic. */
.ds-page-count{font-size:.8rem;color:var(--gray-dark);font-weight:600}
.ds-page-nums .page-numbers{
  min-width:30px;height:30px;padding:0 8px;border-radius:7px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-h);font-weight:700;font-size:.85rem;color:var(--text);
}
.ds-page-nums .page-numbers:hover{background:var(--gray-bg)}
.ds-page-nums .page-numbers.current{background:var(--blue);color:#fff}
.ds-page-nums .page-numbers.dots{color:var(--gray-mid)}
.ds-page-nums .page-numbers.dots:hover{background:none}

/*──────────────────────────────────────────────
  TOPIC CARDS (mobile app view — shown ≤760px instead of the table)
──────────────────────────────────────────────*/
.ds-cards{display:none;flex-direction:column;gap:12px}
.ds-card-row{background:#fff;border:1px solid var(--gray-line);border-radius:var(--r-sm);padding:14px}
.ds-card-row-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ds-card-row-stats{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--gray-line);border-bottom:1px solid var(--gray-line);margin-bottom:10px}
.ds-card-row-replies{text-align:left}
.ds-card-row-activity{display:flex;align-items:center;gap:10px}

/*──────────────────────────────────────────────
  PAGINATION
──────────────────────────────────────────────*/
.ds-pagination{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;flex-wrap:wrap}
.ds-page-nums{display:flex;align-items:center;gap:6px}
.ds-page-num{
  min-width:30px;height:30px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-h);font-weight:700;font-size:.85rem;color:var(--text);
}
.ds-page-num:hover{background:var(--gray-bg)}
.ds-page-num.active{background:var(--blue);color:#fff}
.ds-page-num.is-ellipsis{color:var(--gray-mid);cursor:default}
.ds-page-num.is-ellipsis:hover{background:none}

.ds-page-btn{
  display:inline-flex;align-items:center;gap:6px;
  border:1.5px solid var(--gray-line);border-radius:7px;background:#fff;color:var(--text);
  font-family:var(--font-h);font-weight:700;font-size:.85rem;padding:7px 14px;
  transition:border-color .14s,background .14s;
}
.ds-page-btn svg{width:13px;height:13px}
.ds-page-btn:hover{border-color:var(--blue);background:var(--blue-pale)}
.ds-page-btn[disabled]{color:var(--gray-mid);border-color:var(--gray-line);background:#fff;cursor:default;opacity:.6}
.ds-page-btn[disabled]:hover{background:#fff;border-color:var(--gray-line)}

/*──────────────────────────────────────────────
  SIDEBAR — Tip card (light blue background)
──────────────────────────────────────────────*/
.ds-tip-card{
  background:var(--blue-pale);border:1px solid #c3d8e8;border-radius:var(--r);padding:20px;
}
.ds-tip-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:12px}
.ds-tip-ico{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;
}
.ds-tip-ico svg{width:20px;height:20px}
.ds-tip-title{font-family:var(--font-h);font-weight:800;font-size:1rem;color:var(--text);margin-top:8px}
.ds-tip-text{font-size:.86rem;color:var(--text);font-weight:500;line-height:1.6;margin-bottom:12px}
.ds-tip-text:last-of-type{margin-bottom:0}
.ds-tip-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  color:var(--blue);font-family:var(--font-h);font-weight:700;font-size:.88rem;
}
.ds-tip-link svg{width:13px;height:13px;transition:transform .14s}
.ds-tip-link:hover svg{transform:translateX(2px)}

/*──────────────────────────────────────────────
  RESPONSIVE — app mode ≤760px
──────────────────────────────────────────────*/
@media(max-width:760px){
  .ds-card{padding:16px}
  .ds-group-title{font-size:1.3rem}
  .ds-table-card{display:none}
  .ds-cards{display:flex}
  .ds-pagination{flex-direction:column;align-items:stretch;gap:12px}
  .ds-page-nums{justify-content:center;flex-wrap:wrap}
  .ds-pagination .ds-page-btn{justify-content:center}
}

/*================================================================
  PAGE: WELCOME (onboarding step 1 of 2)
  Styles for: page-welcome-content.php
================================================================*/

.wc-page{
  width:100%;display:flex;flex-direction:column;gap:26px;
  position:relative;overflow:hidden;padding:24px 0 52px;
}

/*──────────────────────────────────────────────
  TOP BAR
──────────────────────────────────────────────*/
.wc-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.wc-logo img{height:60px;display:block}

.wc-step-badge{display:inline-flex;align-items:center;gap:0;flex-shrink:0}
.wc-step-pill{
  background:#2957a7;color:#fff;font-family:var(--font-h);font-weight:700;font-size:.75rem;
  letter-spacing:.06em;text-transform:uppercase;border-radius:999px 0 0 999px;
  padding:8px 16px;white-space:nowrap;
}
.wc-step-label{
  background:var(--gray-bg);color:var(--text);font-family:var(--font-b);font-weight:500;font-size:.84rem;
  border-radius:0 999px 999px 0;padding:8px 18px 8px 14px;white-space:nowrap;
}

/*──────────────────────────────────────────────
  HERO
──────────────────────────────────────────────*/
.wc-hero{display:flex;align-items:center;gap:40px}
.wc-hero-text{flex:1;min-width:0}
.wc-hero-title{
  font-family:var(--font-h) !important;font-weight:700;font-size:3rem;
  color:var(--navy);line-height:1.18;text-transform:capitalize;
}
.wc-hero-title .wc-accent{color:var(--violet)}
.wc-hero-title .wc-underline{position:relative;display:inline-block}
.wc-hero-title .wc-underline::after{
  content:'';position:absolute;left:0;right:0;bottom:-3px;
  height:3px;background:var(--green-done);border-radius:3px;
}
.wc-hero-lead{
  font-size:1.5rem;color:var(--text);font-weight:600;
  margin-top:20px;line-height:1.45;font-family:var(--font-h) !important;
}
.wc-hero-lead .wc-accent{color:var(--violet);font-weight:700}
.wc-hero-sub{
  font-size:1rem;color:#000000;font-weight:400;
  margin-top:15px;line-height:1.65;
}

.wc-hero-video{flex:0 0 48%;max-width:600px}
.wc-video-wrap{
  position:relative;border-radius:12px;overflow:hidden;background:#000;
  /* Matches Vimeo's actual player ratio. This was 16/10 before, which
     doesn't match the 16/9 video — the player letterboxed itself inside
     the too-tall box, showing as black bars above/below the picture. */
  aspect-ratio:16/9;cursor:pointer;
}
.wc-video-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.wc-video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;display:block}

/* Thumbnail + play button shown before the Vimeo player is loaded */
.wc-video-play{
  position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;
  border:0;background:#000;cursor:pointer;display:block;
}
.wc-video-thumb-img{
  position:absolute;inset:0;width:100%;height:100%;
  background-size:cover;background-position:center;background-color:#111;
  transition:transform .35s ease;
}
.wc-video-play:hover .wc-video-thumb-img{transform:scale(1.03)}
.wc-video-play::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.32) 100%);
}
.wc-video-play-icon{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform .2s ease,background .2s ease;
}
.wc-video-play-icon svg{width:30px;height:30px;margin-left:4px}
.wc-video-play:hover .wc-video-play-icon{transform:translate(-50%,-50%) scale(1.08);background:#fff}
@media(max-width:760px){
  .wc-video-play-icon{width:60px;height:60px}
  .wc-video-play-icon svg{width:24px;height:24px}
}

/*──────────────────────────────────────────────
  ARCHETYPES SECTION
──────────────────────────────────────────────*/
.wc-archetypes-section{background:var(--gray-bg);border-radius:var(--r);padding:35px 24px}
.wc-archetypes-head{text-align:center;margin-bottom:30px}
.wc-archetypes-title{
  font-family:var(--font-h);font-weight:700;font-size:1.7rem;color:var(--navy);
  text-transform:capitalize;
}
.wc-archetypes-sub{
  font-size:1.1rem;color:var(--text);font-weight:400;margin-top:7px;line-height:1.5;
}
.wc-archetypes-sub.is-bold{
  font-family:var(--font-h);font-weight:700;color:#4ca211;margin-top:8px;
}

.wc-archetype-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  max-width:95%;
  margin:0 auto;
}
.wc-archetype-card{
  position:relative;background:#fff;border:1px solid var(--gray-line);
  border-radius:var(--r-sm);padding:24px 14px 24px;text-align:center;
}
.wc-archetype-num{
  position:absolute;top:13px;left:14px;width:31px;height:31px;border-radius:50%;
  background:#2957a8;color:#fff;font-family:var(--font-h);font-weight:700;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;
}
.wc-archetype-ico{
  display:flex;align-items:center;justify-content:center;height:102px;margin-bottom:13px;
}
.wc-archetype-ico img{max-height:102px;max-width:120px;object-fit:contain;height: 100px !important;}
.wc-archetype-name{
  font-family:var(--font-h);font-weight:700;font-size:1.1rem;color:#2957a8;
}
.wc-archetype-desc{font-size:.9rem;color:var(--gray-dark);font-weight:400;margin-top:1px;text-transform:capitalize}

/*──────────────────────────────────────────────
  RECALLERS ARCHETYPE SECTION
──────────────────────────────────────────────*/
.wc-recallers-section{
  background:#f4f8f1;border:1.5px solid #bfe6bf;border-radius:var(--r);
  padding:24px 20px 22px;text-align:center;
}

/* Title row: deco images sit at edges, title centered */
.wc-recallers-deco-row{
  display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:4px;
}
.wc-deco-strip{
  width:100%;max-width:300px;height:auto;display:block;
  object-fit:contain;pointer-events:none;margin-bottom:-3px;
}
.wc-recallers-title{
  font-family:var(--font-h);font-weight:800;font-size:2rem;line-height:1.2;
}
.wc-recallers-title .wc-navy{color:var(--navy)}
.wc-recallers-title .wc-green{color:var(--green-done)}

.wc-recallers-sub{
  font-size:1rem;color:var(--text);font-weight:500;
  margin-top:6px;margin-bottom:22px;
}

.wc-traits-row{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
  margin-bottom:20px;
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}
.wc-trait{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:0 6px;position:relative;
}
.wc-trait + .wc-trait::before{
  content:'';position:absolute;left:0;top:6px;bottom:18px;
  width:1px;background:#bfe6bf;
}
.wc-trait img{width:46px;height:46px;object-fit:contain;flex-shrink:0}
.wc-trait-label{
  font-family:var(--font-h);font-weight:600;font-size:0.9rem;
  color:var(--navy);text-align:center;line-height:1.2;
}

.wc-recallers-tagline{
  font-family:var(--font-h);font-weight:700;font-size:1.2rem;
  color:#2957a8;margin-top:25px;text-transform:capitalize;
}

/*──────────────────────────────────────────────
  CTA BUTTON
──────────────────────────────────────────────*/
.wc-cta-wrap{display:flex;justify-content:center}
.wc-cta-btn{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--navy);color:#fff;border-radius:999px;
  font-family:var(--font-h);font-weight:700;font-size:1.3rem;
  padding:15px 90px;
  transition:background .15s,transform .15s;
  box-shadow:0 8px 22px rgba(14,31,94,.22);
}
.wc-cta-btn:hover{background:var(--violet);transform:translateY(-1px)}
.wc-cta-btn svg{width:17px;height:17px;transition:transform .15s}
.wc-cta-btn:hover svg{transform:translateX(3px)}

/*──────────────────────────────────────────────
  FOOTER NOTES
──────────────────────────────────────────────*/
.wc-footnotes{
  display:flex;align-items:flex-start;justify-content:center;
  gap:52px;flex-wrap:wrap;
}
.wc-footnote{display:flex;align-items:flex-start;gap:12px;max-width:450px}
.wc-footnote-ico{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  border:1.5px solid var(--violet);color:var(--violet);
  display:flex;align-items:center;justify-content:center;
}
.wc-footnote-ico svg{width:15px;height:15px}
.wc-footnote-title{font-family:var(--font-h);font-weight:600;font-size:.85rem;color:var(--text)}
.wc-footnote-sub{font-size:.78rem;color:var(--gray-dark);font-weight:400;margin-top:2px;line-height:1.45}


/*──────────────────────────────────────────────
  RESPONSIVE
──────────────────────────────────────────────*/
@media(max-width:1040px){
}
@media(max-width:900px){
  .wc-archetype-grid{grid-template-columns:repeat(2,1fr);max-width:100%}
  .wc-traits-row{grid-template-columns:repeat(4,1fr);row-gap:20px;max-width:100%}
  .wc-trait + .wc-trait::before{display:none}
}
@media(max-width:760px){
  /* ── App shell ── */
  .wc-page{padding:20px 0 8px;gap:20px}

  /* ── Top bar: centered, compact ── */
  .wc-topbar{flex-direction:column;align-items:center;gap:14px;text-align:center}
  .wc-logo img{height:56px}

  /* Step badge: smaller, subtler — more like a tag than a headline */
  .wc-step-badge{align-self:center}
  .wc-step-pill{font-size:.68rem;padding:5px 12px;letter-spacing:.06em}
  .wc-step-label{font-size:.76rem;padding:5px 14px 5px 10px}

  /* ── Hero: video first, text centered below ── */
  .wc-hero{flex-direction:column;gap:16px;align-items:center}
  .wc-hero-video{width:100%;max-width:none;flex:0 0 auto;order:0}
  .wc-video-wrap{border-radius:10px}
  .wc-hero-text{order:1;text-align:center}
  .wc-hero-title{font-size:1.5rem;line-height:1.2}
  .wc-hero-lead{font-size:.9rem;margin-top:10px}
  .wc-hero-sub{font-size:.82rem;margin-top:8px;text-align:center}

  /* ── Archetypes: centred heading, 2-col cards ── */
  .wc-archetypes-section{padding:20px 14px 18px;border-radius:12px}
  .wc-archetypes-head{margin-bottom:18px}
  .wc-archetypes-title{font-size:1rem}
  .wc-archetypes-sub{font-size:.81rem}
  .wc-archetype-grid{grid-template-columns:1fr 1fr;gap:10px;max-width:100%}
  .wc-archetype-card{padding:22px 10px 14px}
  .wc-archetype-ico{height:94px}
  .wc-archetype-ico img{max-height:90px;max-width:90px}
  .wc-archetype-name{font-size:.82rem}
  .wc-archetype-desc{font-size:.71rem}

  /* ── Recallers Archetype: fully centered ── */
  .wc-recallers-section{padding:20px 14px 16px;border-radius:12px;text-align:center}
  .wc-deco-strip{max-width:260px;margin-left:auto;margin-right:auto;margin-bottom:0px}
  .wc-recallers-title{font-size:1.4rem}
  .wc-recallers-sub{font-size:.8rem;margin-bottom:16px}

  /* Traits: 4-per-row, centered, no dividers ── */
  .wc-traits-row{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;row-gap:16px;max-width:340px;margin-bottom:14px;
    margin-left:auto;margin-right:auto;
  }
  .wc-trait + .wc-trait::before{display:none}
  .wc-trait img{width:36px;height:36px}
  .wc-trait-label{font-size:.69rem}
  .wc-recallers-tagline{font-size:.86rem}
  
  .wc-traits-row .wc-trait:last-child{grid-column:1 / -1;justify-self:center;}

  /* ── CTA: full width, pill shape, centered ── */
  .wc-cta-wrap{padding:0 4px}
  .wc-cta-btn{
    width:100%;justify-content:center;
    font-size:.92rem;padding:14px 20px;border-radius:14px;
  }

  /* ── Footer notes: centered icon+text cards, thin dividers ── */
  .wc-footnotes{flex-direction:column;align-items:stretch;gap:0}
  .wc-footnote{
    max-width:none;padding:13px 4px;
    border-bottom:1px solid var(--gray-line);
    justify-content:flex-start;align-items:flex-start;
  }
  .wc-footnote:last-child{border-bottom:none}
  .wc-footnote-title{font-size:.82rem}
  .wc-footnote-sub{font-size:.76rem}
}

@media(max-width:380px){
  .wc-archetype-grid{gap:8px}
  .wc-traits-row{grid-template-columns:repeat(3,1fr)}
  .wc-hero-title{font-size:1.3rem}
  .wc-deco-strip{max-width:260px}
  .wc-page{gap:16px;padding:16px 0 6px}
}

/*================================================================
  PAGE: ARCHETYPE QUIZ (step 2 of 2)
================================================================*/

.qz-page{
  width:100%;display:flex;flex-direction:column;gap:0;
  position:relative;overflow:hidden;padding:24px 0 48px;min-height:100vh;
}

/*── Decorative blobs ──*/
.qz-blob-bl,.qz-blob-br{position:fixed;pointer-events:none;z-index:0}
.qz-blob-bl{
  left:-80px;bottom:-60px;width:320px;height:260px;border-radius:50%;
  background:radial-gradient(ellipse at 30% 70%,#c8e6c0 0%,#eaf4e5 55%,transparent 80%);
}
.qz-blob-br{
  right:-60px;bottom:-40px;width:220px;height:180px;border-radius:50%;
  background:radial-gradient(ellipse at 70% 70%,#c8e6c0 0%,#eaf4e5 55%,transparent 80%);
}

/*── Top bar ──*/
.qz-topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;position:relative;z-index:1;
}
.qz-logo img{height:60px;display:block}
.qz-step-badge{display:inline-flex;align-items:center;gap:0;flex-shrink:0}
.qz-step-pill{
  background:#7a9e3f;color:#fff;font-family:var(--font-h);font-weight:700;
  font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
  border-radius:999px 0 0 999px;padding:8px 16px;white-space:nowrap;
}
.qz-step-label{
  background:var(--gray-bg);color:var(--text);font-family:var(--font-b);
  font-weight:500;font-size:.84rem;
  border-radius:0 999px 999px 0;padding:8px 18px 8px 14px;white-space:nowrap;
}

/*── Page header ──*/
.qz-header{text-align:center;padding:32px 0 28px;position:relative;z-index:1}
.qz-header-title{
  font-family:var(--font-h) !important;font-weight:800;font-size:2.4rem;
  color:var(--navy);line-height:1.15;margin-bottom: 7px;
}
.qz-header-title .qz-green{color:var(--green-done)}
.qz-header-underline{
  width:56px;height:3px;background:var(--green-done);border-radius:3px;
  margin:10px auto 18px;
}
.qz-header-sub{
  font-size:.95rem;color:#000000;font-weight:400;line-height:1.6;
  max-width:600px;margin:0 auto;
}

/*── Centred column wrapper ──*/
.qz-card-wrap{
  display:flex;flex-direction:column;align-items:center;
  gap:16px;position:relative;z-index:1;
}

/*── Info banner ──*/
.qz-info-banner{
  display:flex;align-items:flex-start;gap:14px;
  background:#eef1fb;border-radius:10px;padding:14px 18px;
  max-width:740px;width:100%;
}
.qz-info-banner-ico{
  width:26px;height:26px;flex-shrink:0;
  color:var(--blue);display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.qz-info-banner-ico svg{width:26px;height:26px}
.qz-info-banner-text{font-size:.88rem;color:var(--text);font-weight:500;line-height:1.55}

/*── Quiz card ──*/
.qz-card{
  width:100%;max-width:740px;
  background:#fff;border:1px solid var(--gray-line);border-radius:18px;
  padding:28px 28px 24px;
  box-shadow:0 4px 24px rgba(14,31,94,.07);
  position:relative;
}

/*── At-limit overlay (5 active dogs — see recallers_dog_limit_reached()
    in functions.php). .qz-card-body holds the real quiz controls; it gets
    `inert` server-side whenever the overlay renders, so the blur/dim below
    isn't the only thing standing between a visitor and the form — deleting
    this overlay node in devtools leaves an inert, unwired card behind it. ──*/
.qz-card--limit-reached{overflow:hidden}
.qz-card-body{position:relative;z-index:1}
.qz-limit-overlay{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  padding:24px;border-radius:inherit;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.qz-limit-overlay-panel{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:10px;max-width:360px;
}
.qz-limit-overlay-icon{
  width:56px;height:56px;flex-shrink:0;border-radius:50%;
  border:2px solid var(--red);color:var(--red);background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(229,20,29,.18);
}
.qz-limit-overlay-icon svg{width:28px;height:28px}
.qz-limit-overlay-text{
  font-family:var(--font-b);font-weight:500;font-size:.92rem;
  color:var(--text);line-height:1.55;
}
.qz-limit-overlay-text strong{font-family:var(--font-h);color:var(--navy)}
.qz-limit-overlay-link{
  font-family:var(--font-h);font-weight:700;font-size:.84rem;
  color:var(--violet);text-decoration:underline;text-underline-offset:2px;
}
.qz-limit-overlay-link:hover{color:var(--navy)}
.qz-limit-overlay-btn{
  display:inline-block;margin-top:4px;
  border:none;background:var(--navy);color:#fff!important;
  border-radius:8px;font-family:var(--font-h);font-weight:700;font-size:.86rem;
  padding:11px 30px;cursor:pointer;text-decoration:none;
  transition:background .15s,transform .1s;
  box-shadow:0 4px 14px rgba(14,31,94,.22);
}
.qz-limit-overlay-btn:hover{background:var(--violet);transform:translateY(-1px)}

/*── Progress ──*/
.qz-progress-row{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.qz-progress-label{
  font-family:var(--font-h);font-weight:700;font-size:.84rem;
  color:var(--violet);white-space:nowrap;
}
.qz-progress-track{
  flex:1;height:8px;border-radius:999px;background:var(--gray-line);overflow:hidden;
}
.qz-progress-fill{
  height:100%;border-radius:999px;background:var(--green-done);transition:width .4s ease;
}
.qz-progress-pct{
  font-family:var(--font-h);font-weight:700;font-size:.78rem;color:var(--green-done);
  background:#eef8ee;border:1px solid #bfe6bf;border-radius:999px;
  padding:3px 10px;white-space:nowrap;flex-shrink:0;
}

/*── Section tag ──*/
.qz-section-tag{
  font-family:var(--font-h);font-weight:700;font-size:.8rem;
  color:var(--violet);margin-bottom:10px;
}

/*── Question area ──*/
.qz-question{
  font-family:var(--font-h);font-weight:700;font-size:1.08rem;
  color:var(--navy);line-height:1.5;margin-bottom:20px;
}

/*── Text-input question type ──*/
.qz-question-title{
  font-family:var(--font-h);font-weight:800;font-size:1.5rem;
  color:var(--navy);margin-bottom:6px;line-height:1.25;
}
.qz-question-sub{
  font-size:.88rem;color:var(--gray-dark);font-weight:400;
  margin-bottom:20px;line-height:1.5;
}
.qz-text-input{
  width:100%;border:2px solid var(--violet);border-radius:10px;
  padding:16px 18px;font-size:1rem;font-family:var(--font-b);color:var(--text);
  background:#fff;margin-bottom:10px;
  transition:border-color .15s,box-shadow .15s;
}
.qz-text-input:focus{
  outline:none;border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(75,47,237,.1);
}
.qz-text-input::placeholder{color:var(--gray-mid)}
.qz-input-hint{font-size:.8rem;color:var(--gray-dark);font-weight:400;margin-bottom:22px}

/*── Options ──*/
.qz-options{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.qz-option{
  display:flex;align-items:flex-start;gap:14px;
  border:1.5px solid var(--gray-line);border-radius:10px;
  padding:13px 16px;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.qz-option:hover{border-color:var(--violet);background:#faf8ff}
.qz-option.selected{border-color:var(--violet);background:#f3f0ff}
.qz-option-radio{
  width:20px;height:20px;border-radius:50%;border:2px solid var(--gray-line);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px;
  transition:border-color .15s;
}
.qz-option.selected .qz-option-radio{border-color:var(--violet)}
.qz-option-radio::after{
  content:'';width:10px;height:10px;border-radius:50%;background:var(--violet);
  opacity:0;transition:opacity .15s;
}
.qz-option.selected .qz-option-radio::after{opacity:1}
.qz-option-text{font-size:.9rem;color:var(--text);font-weight:500;line-height:1.5}
.qz-option.selected .qz-option-text{color:var(--navy);font-weight:600}

/*── Textarea / multi-select / "Other, specify" ──*/
.qz-textarea{resize:vertical;min-height:104px;line-height:1.5;margin-bottom:22px}
.qz-options--multi .qz-option-radio{border-radius:5px}
.qz-options--multi .qz-option-radio::after{border-radius:2px;width:9px;height:9px}
.qz-other-wrap{margin-top:4px}
.qz-other-input{margin-bottom:0}

/*── Nav buttons ──*/
.qz-nav{display:flex;align-items:center;justify-content:space-between;gap:14px}
.qz-btn-back{
  border:1.5px solid var(--gray-line);background:var(--gray-bg);color:var(--text);
  border-radius:8px;font-family:var(--font-h);font-weight:600;font-size:.9rem;
  padding:12px 28px;cursor:pointer;transition:border-color .14s,background .14s;
}
.qz-btn-back:hover{border-color:var(--gray-dark);background:#e9eaec}
.qz-btn-back:disabled{opacity:.5;cursor:not-allowed}
.qz-btn-next{
  border:none;background:var(--navy)!important;color:#fff!important;
  border-radius:8px;font-family:var(--font-h);font-weight:700;font-size:.9rem;
  padding:12px 36px;cursor:pointer;
  transition:background .15s,transform .1s;
  box-shadow:0 4px 14px rgba(14,31,94,.22);
}
.qz-btn-next:hover:not(:disabled){background:var(--violet)!important;transform:translateY(-1px)}
.qz-btn-next:disabled{background:var(--gray-mid)!important;box-shadow:none;cursor:not-allowed}

/*── Footer notes ──*/
.qz-footer-notes{
  display:flex;flex-direction:column;align-items:center;gap:0;
  max-width:740px;width:100%;
}
.qz-footer-note{
  display:inline-flex;align-items:flex-start;gap:12px;text-align-last: center;
  padding:13px 0;position:relative;
}
.wc-footnotes .qz-footer-note:before{display: none;}
.wc-footnotes .qz-footer-note{text-align-last: start;padding: 0;}

/* Divider spans only the width of the content, centred */
.qz-footer-note + .qz-footer-note::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:1px;background:var(--gray-line);
}
.qz-footer-note-ico{
  width:32px;height:32px;flex-shrink:0;
  color:var(--violet);display:flex;align-items:center;justify-content:center;
}
.qz-footer-note-ico svg{width:32px;height:32px}
.qz-footer-note-title{font-family:var(--font-h);font-weight:700;font-size:.88rem;color:var(--text)}
.qz-footer-note-sub{font-size:.8rem;color:var(--gray-dark);font-weight:400;margin-top:2px}

/*──────────────────────────────────────────────
  RESPONSIVE — app mode ≤760px
──────────────────────────────────────────────*/
@media(max-width:760px){
  .qz-blob-bl{width:200px;height:160px;left:-50px;bottom:-40px}
  .qz-blob-br{display:none}

  .qz-page{padding:18px 16px 28px}
  .qz-topbar{flex-direction:column;align-items:center;gap:12px;text-align:center}
  .qz-logo img{height:50px}
  .qz-step-pill{font-size:.68rem;padding:5px 12px}
  .qz-step-label{font-size:.76rem;padding:5px 12px 5px 10px}

  .qz-header{padding:20px 0 20px}
  .qz-header-title{font-size:1.6rem}
  .qz-header-sub{font-size:.86rem;padding:0 8px}

  .qz-card-wrap{gap:12px}
  .qz-info-banner{padding:12px 14px;border-radius:8px}
  .qz-info-banner-text{font-size:.82rem}

  .qz-card{border-radius:14px;padding:20px 16px 18px}
  .qz-limit-overlay{padding:18px}
  .qz-limit-overlay-icon{width:48px;height:48px}
  .qz-limit-overlay-icon svg{width:24px;height:24px}
  .qz-limit-overlay-text{font-size:.86rem}
  .qz-limit-overlay-btn{padding:10px 24px;font-size:.82rem}
  .qz-question-title{font-size:1.2rem}
  .qz-section-tag{font-size:.74rem}
  .qz-question{font-size:.92rem;margin-bottom:14px}
  .qz-text-input{padding:14px 16px;font-size:.95rem}
  .qz-input-hint{font-size:.76rem}
  .qz-options{gap:8px;margin-bottom:18px}
  .qz-option{padding:12px 12px}
  .qz-option-text{font-size:.85rem}
  .qz-progress-row{gap:10px;margin-bottom:16px}
  .qz-progress-label{font-size:.78rem}

  .qz-nav{gap:10px}
  .qz-btn-back{padding:11px 20px;font-size:.86rem;flex-shrink:0}
  .qz-btn-next{flex:1;padding:13px 16px;font-size:.9rem}

  .qz-footer-notes{padding:0 2px}
  .qz-footer-note{display: flex;padding:11px 0;flex-direction: column;align-items: center;}
  .qz-footer-note-title{font-size:.84rem; text-align: center;}
  .qz-footer-note-sub{font-size:.76rem}
  .wc-footnotes .qz-footer-note{padding: 15px 0;gap: 5px;text-align-last: center;}
  .wc-footnotes .qz-footer-note:before {display:block}
}

@media(max-width:380px){
  .qz-header-title{font-size:1.35rem}
  .qz-card{padding:16px 14px 14px}
  .qz-btn-back{padding:11px 14px;font-size:.82rem}
}

/*================================================================
  PAGE: QUIZ RESULTS
================================================================*/

.qr-page{
  width:100%;display:flex;flex-direction:column;align-items:center;
  gap:0;position:relative;overflow:hidden;padding:32px 0 52px;
  min-height:100vh;background:#fff;
}

/*── Blobs ──*/
.qr-blob-bl,.qr-blob-br{position:fixed;pointer-events:none;z-index:0}
.qr-blob-bl{
  left:-80px;bottom:-60px;width:320px;height:260px;border-radius:50%;
  background:radial-gradient(ellipse at 30% 70%,#c8e6c0 0%,#eaf4e5 55%,transparent 80%);
}
.qr-blob-br{
  right:-60px;bottom:-40px;width:220px;height:180px;border-radius:50%;
  background:radial-gradient(ellipse at 70% 70%,#c8e6c0 0%,#eaf4e5 55%,transparent 80%);
}

/*── Top bar ──*/
.qr-topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;width:100%;position:relative;z-index:1;
}
.qr-logo img{height:60px;display:block}

/*── Hero ──*/
.qr-hero{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;width:100%;position:relative;z-index:1;
  padding:28px 0 0;
}

.qr-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--violet);color:#fff;
  font-family:var(--font-h);font-weight:600;font-size:.88rem;
  border-radius:999px;padding:9px 22px;margin-bottom:20px;
}
.qr-badge svg{width:15px;height:15px;flex-shrink:0}

.qr-pre-title{
  font-family:var(--font-h);font-weight:500;font-size:.98rem;
  color:var(--navy);margin-bottom:6px;opacity:.8;
}

.qr-archetype-name{
  font-family:var(--font-h);font-weight:800;font-size:2.8rem;
  color:var(--navy);line-height:1.1;margin-bottom:17px;
}

.qr-underline{
  width:60px;height:3px;background:var(--green-done);border-radius:3px;
  margin:0 auto 22px;
}

.qr-dog-img{
  display:block;width:100%;max-width:360px;height:auto;
  margin:0 auto 6px;
}

.qr-desc{
  max-width:590px;margin:16px auto 0;
  font-size:.92rem;color:var(--gray-dark);font-weight:400;
  line-height:1.7;text-align:center;
}
.qr-desc-highlight{
  display:block;font-size:.92rem;color:var(--text);font-weight:400;
  margin-bottom:8px;
}

/*── Content column — narrower to match design ──*/
.qr-content{
  width:100%;max-width:620px;
  display:flex;flex-direction:column;gap:14px;
  margin-top:28px;position:relative;z-index:1;
}

/*── Starting point banner ──*/
.qr-starting-banner{
  display:flex;align-items:center;gap:16px;
  background:#fff;border:1px solid var(--gray-line);border-radius:12px;
  padding:16px 24px;
}
.qr-starting-ico{
  width:32px;height:32px;flex-shrink:0;color:var(--green-done);
  display:flex;align-items:center;justify-content:center;
}
.qr-starting-ico svg{width:28px;height:28px}
.qr-starting-text{
  font-family:var(--font-h);font-weight:700;font-size:1rem;color:var(--navy);
}

/*── Why archetype card ──*/
.qr-why-card{
  background:#f3f2f8;border:1px solid #e4e2ef;border-radius:12px;
  padding:22px 24px 20px;
}
.qr-why-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.qr-why-head-ico{
  width:26px;height:26px;flex-shrink:0;color:var(--green-done);
  display:flex;align-items:center;justify-content:center;
}
.qr-why-head-ico svg{width:26px;height:26px}
.qr-why-title{
  font-family:var(--font-h);font-weight:700;font-size:1.2rem;color:var(--violet);
}
.qr-why-list{display:flex;flex-direction:column;gap:12px}
.qr-why-item{display:flex;align-items:flex-start;gap:12px}
.qr-why-check{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:var(--violet);color:#fff;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.qr-why-check svg{width:11px;height:11px}
.qr-why-text{font-size:.9rem;color:var(--text);font-weight:400;line-height:1.55}

/*── CTA card ──*/
.qr-cta-card{
  background:#fff;border:1px solid var(--gray-line);border-radius:12px;
  padding:22px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.qr-cta-text{flex:1;min-width:0}
.qr-cta-label{
  font-family:var(--font-h);font-weight:800;font-size:1.3rem;color:var(--navy);
  line-height:1.2;
}
.qr-cta-sub{font-size:.86rem;color:var(--gray-dark);font-weight:400;margin-top:5px;line-height:1.4}
.qr-cta-btn{
  display:inline-flex;align-items:center;gap:10px;flex-shrink:0;
  background:var(--navy);color:#fff;border-radius:10px;border:none;
  font-family:var(--font-h);font-weight:700;font-size:.95rem;
  padding:14px 24px;cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background .15s,transform .1s;
  box-shadow:0 4px 14px rgba(14,31,94,.22);
}
.qr-cta-btn:hover{text-decoration:none}
.qr-cta-btn:hover{background:var(--violet);transform:translateY(-1px)}
.qr-cta-btn svg{width:14px;height:14px}

/*──────────────────────────────────────────────
  RESPONSIVE — app mode ≤760px
──────────────────────────────────────────────*/
@media(max-width:760px){
  .qr-page{padding:18px 16px 36px}
  .qr-blob-bl{width:200px;height:160px;left:-50px;bottom:-40px}
  .qr-blob-br{display:none}

  .qr-topbar{justify-content:center}
  .qr-logo img{height:48px}

  .qr-hero{padding:20px 0 0}
  .qr-badge{font-size:.8rem;padding:7px 16px;margin-bottom:16px}
  .qr-pre-title{font-size:.88rem}
  .qr-archetype-name{font-size:2rem}
  .qr-underline{margin-bottom:16px}
  .qr-dog-img{max-width:260px}
  .qr-desc,.qr-desc-highlight{font-size:.86rem}

  .qr-content{margin-top:20px;gap:10px}
  .qr-starting-banner{padding:13px 16px;gap:12px}
  .qr-starting-ico svg{width:24px;height:24px}
  .qr-starting-text{font-size:.92rem}

  .qr-why-card{padding:18px 16px}
  .qr-why-title{font-size:1.05rem}
  .qr-why-text{font-size:.86rem}

  .qr-cta-card{flex-direction:column;align-items:flex-start;gap:14px;padding:18px 16px}
  .qr-cta-btn{width:100%;justify-content:center;font-size:.92rem}
  .qr-cta-label{font-size:1.1rem}
}

@media(max-width:380px){
  .qr-archetype-name{font-size:1.7rem}
  .qr-dog-img{max-width:220px}
}

/*================================================================
  COMPONENT: COMMENTS SECTION (Ask a Coach / Leave a Comment)
  Styles for: part-comments.php (template part)
  Prefix: cmt-
  Can be placed inside any page template that has the
  standard .main / .sidebar grid already in place.
================================================================*/

.cmt-wrap{display:flex;flex-direction:column;gap:22px}
.recallers-comments{border: 1px solid #eaeaea;background: #fafafa;padding: 25px;border-radius: 10px;}
.sidebar.recallers-comments{gap:0;}
/*──────────────────────────────────────────────
  SECTION HEADER
──────────────────────────────────────────────*/
.cmt-title{font-family:var(--font-h);font-weight:800;font-size:1.55rem;color:var(--grape);margin-bottom:4px}
.cmt-sub{font-size:.88rem;color:var(--gray-dark);font-weight:400}

/*──────────────────────────────────────────────
  COMPOSER CARD
──────────────────────────────────────────────*/
/* comment_form() wraps our .cmt-composer in #respond.comment-respond, which the
   BuddyBoss parent theme styles as its own bordered white card (background +
   border + padding + radius) — producing a double box. Flatten that wrapper so
   .cmt-composer is the single composer card inside the .recallers-comments panel. */
.recallers-comments #respond.comment-respond{background:0 0;border:0;border-radius:0;box-shadow:none;padding:0;margin:0 0 18px}
.cmt-composer{background:#fff;border:1px solid var(--gray-line);border-radius:var(--r);padding:16px}
.cmt-composer-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.cmt-posting-as{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--gray-dark);font-weight:600}
.cmt-posting-as img{width:28px;height:28px;border-radius:50%;object-fit:cover;display:block}
.cmt-posting-name{font-family:var(--font-h);font-weight:700;color:var(--text)}
.cmt-dog-select{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--gray-dark);font-weight:600}
.cmt-dog-select select{
  border:1.5px solid var(--gray-line);border-radius:6px;padding:5px 28px 5px 10px;
  font-family:var(--font-h);font-weight:700;font-size:.82rem;color:var(--violet);
  background:#fff url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%239aa0ad' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 6px center/14px;
  -webkit-appearance:none;cursor:pointer;
}
.cmt-dog-select select:focus{outline:none;border-color:var(--violet)}

.cmt-textarea{
  width:100%;min-height:110px;resize:vertical;
  border:1px solid var(--gray-line);border-radius:var(--r-sm);
  padding:12px 14px;font-family:var(--font-b);font-size:.9rem;color:var(--text);
  line-height:1.5;transition:border-color .14s;
}
.cmt-textarea:focus{outline:none;border-color:var(--blue)}

.cmt-composer-footer{display:flex;align-items:center;gap:14px;margin-top:10px;flex-wrap:wrap}
.cmt-video-label{
  display:flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;
  color:var(--gray-dark);white-space:nowrap;flex-shrink:0;
}
.cmt-video-label svg{width:14px;height:14px}
.cmt-video-input{
  flex:1;min-width:180px;border:1px solid var(--gray-line);border-radius:6px;
  padding:7px 12px;font-size:.82rem;font-family:var(--font-b);color:var(--text);
}
.cmt-video-input:focus{outline:none;border-color:var(--blue)}
.cmt-video-note{
  display:flex;align-items:center;gap:5px;font-size:.76rem;color:var(--gray-dark);
  font-weight:400;line-height:1.3;flex-shrink:0;
}
.cmt-video-note svg{width:13px;height:13px;flex-shrink:0;color:var(--blue)}
.cmt-post-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--violet)!important;color:#fff!important;border:none;border-radius:8px;
  font-family:var(--font-h);font-weight:700;font-size:.9rem;
  padding:10px 22px;cursor:pointer;white-space:nowrap;flex-shrink:0;
  transition:background .14s;
}
.cmt-post-btn:hover{background:var(--violet-hover)!important}
.cmt-post-btn .recallers-btn-spinner{margin:0}
/* Posting can take a moment (native form submit, or BuddyBoss's own AJAX
   interception — see recallers-main.js's "AJAX opt-in" IIFE); ".is-loading"
   is added by the "submit" handler in that same file's COMMENTS SECTION —
   Post button section right as the form submits, so there's feedback for
   the whole round trip instead of the button just sitting there. */
.cmt-post-btn.is-loading{cursor:default;opacity:.85}
.cmt-post-btn.is-loading .recallers-btn-spinner{display:inline-block}

/*──────────────────────────────────────────────
  ARCHETYPE & TOP BADGE (inline next to names)
──────────────────────────────────────────────*/
.cmt-badge-hex{display:inline-flex;flex-shrink:0}
.cmt-badge-hex svg{width:28px;height:28px;display:block}

/* Comment and forum-reply top badges are the shared .badge-chip component
   (recallers_top_badge_chip_html()). Only forum replies still pass a marker
   class — .recallers-bbp-top-badge — because the activity-feed sections
   further down shrink the chip further. */

/* Author's furthest-milestone hex, the second half of the badge pair the
   header shows — .cmt-hex (comment meta rows) and .recallers-bbp-hex (forum
   reply author links) are marker classes on a .hex-badge.hex-badge-sm, the
   same convention .ss-hex and .mj-dog-hex follow; see .hex-badge-sm in the
   dashboard section for the sizing they inherit. Markup for all of them
   comes from recallers_milestone_hex_badge_html().

   Sized up from 34x34 to sit level with the 36x36 .cmt-top-badge /
   .recallers-bbp-top-badge alongside, and given room on the right so the
   number pill doesn't collide with the date. */
.cmt-hex.hex-badge-sm,.recallers-bbp-hex.hex-badge-sm{
  width:36px;height:36px;vertical-align:middle;margin-right:7px;
}
.cmt-hex.hex-badge-sm svg,.recallers-bbp-hex.hex-badge-sm svg{width:36px;height:36px}
.recallers-bbp-hex.hex-badge-sm{margin-left:2px}
.hex-badge-sm.cmt-hex .hex-badge-num{bottom: 2px;}
@media(max-width:760px){
  .cmt-hex.hex-badge-sm,.recallers-bbp-hex.hex-badge-sm{width:30px;height:30px;margin-right:6px}
  .cmt-hex.hex-badge-sm svg,.recallers-bbp-hex.hex-badge-sm svg{width:30px;height:30px}
  .cmt-hex.hex-badge-sm .hex-badge-num,
  .recallers-bbp-hex.hex-badge-sm .hex-badge-num{width:13px;height:13px;font-size:.5rem;right:-4px}
}

/*──────────────────────────────────────────────
  SEARCH + FILTER BAR (before comments list)
──────────────────────────────────────────────*/
.cmt-filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cmt-search-wrap{position:relative;flex:1;min-width:220px}
.cmt-search-wrap svg{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--gray-mid);pointer-events:none;
}
.cmt-search-input{
  width:100%;border:1.5px solid var(--gray-line);border-radius:8px;
  padding:9px 14px 9px 36px;font-size:.86rem;font-family:var(--font-b);color:var(--text);
  transition:border-color .14s;
}
.cmt-search-input:focus{outline:none;border-color:var(--blue)}
.cmt-search-input::placeholder{color:var(--gray-mid)}

.cmt-filter-select{
  border:1.5px solid var(--gray-line);border-radius:8px;
  padding:9px 32px 9px 12px;font-size:.84rem;font-family:var(--font-h);
  font-weight:600;color:var(--text);cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%239aa0ad' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center/13px;
  -webkit-appearance:none;min-width:160px;
  transition:border-color .14s;
}
.cmt-filter-select:focus{outline:none;border-color:var(--blue)}

/* AJAX-swappable results body. The overlay keeps the current comments in
   place while search or pagination is in flight, so the page does not jump. */
/* The reserved height keeps the spinner from collapsing the list mid-swap, but
   it must not survive the swap: an empty result leaves the container holding
   64px of nothing, pushing the "no comments match" line (a sibling below it)
   down behind a gap that reads as a broken, blank panel. */
.cmt-comments-results{position:relative;min-height:0}
.cmt-comments-results.is-loading{min-height:64px}
.cmt-comments-results-body{
  transition:opacity .24s ease,transform .24s ease;
  will-change:opacity,transform;
}
.cmt-comments-results.is-loading .cmt-comments-results-body{opacity:.45}
.cmt-comments-results.is-entering .cmt-comments-results-body{opacity:0;transform:translateY(5px)}
.cmt-comments-loading{
  display:none;position:absolute;inset:0;z-index:2;align-items:center;justify-content:center;
  gap:8px;background:rgba(250,250,250,.78);color:var(--gray-dark);font-size:.84rem;font-weight:600;
}
.cmt-comments-loading.is-visible{display:flex}
.cmt-comments-loading .recallers-btn-spinner{display:inline-block;margin:0}
.cmt-error-state{padding:18px 12px;text-align:center;color:var(--red);font-size:.86rem;font-weight:600}
.cmt-pagination-region:empty{display:none}

/*──────────────────────────────────────────────
  COMMENTS LIST
──────────────────────────────────────────────*/
.cmt-list{display:flex;flex-direction:column;gap:0;list-style:none;margin:0;padding:0}

/* Native `wp_list_comments( array( 'style' => 'ul' ) )` renders each reply
   nested inside a real `<ul class="children">` under its parent `<li>` (see
   recallers_render_ask_a_coach_comment() in functions.php) — this is what
   lets hiding a filtered-out top-level .cmt-item also hide its replies. */
.cmt-list .children{list-style:none;margin:14px 0 0;padding-left:28px;display:flex;flex-direction:column;gap:14px}

.cmt-item{
  padding:18px 0;border-bottom:1px solid var(--gray-line);
}
.cmt-item:last-child{border-bottom:none}
.cmt-item[data-hidden="true"]{display:none}

/* Flashed on the target of a #comment-{id} deep link (notification/activity
   links — see recallers_ask_a_coach_comment_link() in functions.php and
   "COMPONENT: Comment / forum-reply deep link" in recallers-main.js, which
   flashes bbPress replies reached from the Coach Queue's Discussion tab with
   this same class)
   so it's obvious which comment was linked to, since a fragment scroll
   alone gives no visual cue. Padding here (rather than relying on
   .cmt-item's own) is what gives a reply — whose .cmt-item-reply li has
   none of its own — a visible flashed box too, top-level and reply alike. */
.cmt-item-highlight{
  animation:recallers-cmt-highlight 2.6s ease-out;
  border-radius:8px;padding-left:10px;padding-right:10px;margin-left:-10px;margin-right:-10px;
}
@keyframes recallers-cmt-highlight{
  0%{background:var(--grape-soft)}
  100%{background:transparent}
}
.cmt-empty-state{padding:32px 16px;text-align:center;font-size:.9rem;color:var(--gray-dark);font-weight:500}
.cmt-mod-notice{
  font-size:.78rem;color:#856404;background:#fff3cd;border:1px solid #ffd700;
  border-radius:6px;padding:5px 10px;margin:0 0 10px;display:inline-block;
}

/* Comment layout: avatar left, content right */
.cmt-item-inner{display:flex;gap:14px;align-items:flex-start}
.cmt-avatar{width:46px;height:46px;border-radius:50%;overflow:hidden;flex-shrink:0;display:block}
.cmt-avatar img{width:100%;height:100%;object-fit:cover;display:block}

.cmt-body{flex:1;min-width:0}

/* Meta row: name + badges + dog + archetype + date */
.cmt-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.cmt-username{
  font-family:var(--font-h);font-weight:700;font-size:.95rem;color:var(--grape);
}
/* Forum replies append the author's badge pair inside this span
   (recallers_bbp_reply_author_badges()). Laying the span out as a flex line
   centres them against the name instead of dropping them on its baseline, and
   28px matches the lead-topic header's author badges so the whole page agrees. */
.cmt-username{display:inline-flex;align-items:center;gap:7px}
.cmt-username .recallers-bbp-top-badge{width:28px;height:28px;margin:0}
.cmt-username .recallers-bbp-top-badge svg{width:28px;height:28px}
.cmt-username .recallers-bbp-top-badge .badge-chip-num{
  width:14px;height:14px;font-size:.48rem;right:-4px;bottom:0;
}
.cmt-username .recallers-bbp-hex.hex-badge-sm{width:28px;height:28px;margin:0}
.cmt-username .recallers-bbp-hex.hex-badge-sm svg{width:28px;height:28px}
.cmt-username .recallers-bbp-hex.hex-badge-sm .hex-badge-num{
  width:14px;height:14px;font-size:.48rem;right:-4px;bottom:0;
}
.cmt-dot{color:var(--gray-line);font-size:.9rem}
.cmt-dog-info{display:flex;align-items:center;gap:5px;font-size:.84rem;color:var(--gray-dark);font-weight:500}
.cmt-dog-info-avatar{width:22px;height:22px;border-radius:50%;overflow:hidden;flex-shrink:0;display:block}
.cmt-dog-info-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.cmt-dog-name{font-weight:600;color:var(--text)}
.cmt-archetype-info{display:flex;align-items:center;gap:5px;font-size:.84rem;color:var(--gray-dark);font-weight:500}
.cmt-date{font-size:.8rem;color:var(--gray-mid);font-weight:400;margin-left:auto;white-space:nowrap}

/* Forum reply "in reply to: {topic}" line (My Replies view only — see
   bbpress/loop-single-reply.php) — same inline-meta treatment as
   .cmt-dog-info/.cmt-archetype-info above. */
.cmt-reply-context{font-size:.84rem;color:var(--gray-dark);font-weight:500}

/* Forum reply's Reply link + "More actions" (edit/move/split/trash)
   dropdown trigger (bbpress/loop-single-reply.php) — sits inside .cmt-meta
   right after .cmt-date; .cmt-date's own margin-left:auto already pushes
   itself AND every sibling after it flush to the row's right edge, so this
   needs no positioning of its own beyond not being squashed. Only this
   wrapper's position changed from the original buddyboss-theme template —
   the dropdown itself keeps its original BuddyBoss markup/classes/JS.
   The two icons' visual chrome is fully reset and rebuilt below: the
   plugin's own bbpress.css sizes them inconsistently (35px vs 38px tall,
   a border+background painted directly on one <i> but not reconciled with
   the other) because that CSS was written for a different row context —
   patching the mismatch wasn't an option, so both get identical round
   icon-button treatment instead. */
.cmt-reply-admin-menu{flex-shrink:0;margin-left:2px}
.cmt-reply-admin-menu .bs-dropdown-wrap-inner{display:flex;align-items:center;gap:6px}
.cmt-reply-admin-menu a.bbp-reply-to-link,
.cmt-reply-admin-menu a.bb-reply-actions-button{
  display:flex!important;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%!important;
  border:1.5px solid var(--gray-line)!important;background:#fff!important;
  transition:background .14s,border-color .14s;
}
.cmt-reply-admin-menu a.bbp-reply-to-link:hover,
.cmt-reply-admin-menu a.bb-reply-actions-button:hover{
  background:var(--gray-bg)!important;border-color:var(--gray-mid)!important;
}
.cmt-reply-admin-menu i{
  width:15px!important;height:15px!important;border:none!important;
  background:none!important;border-radius:0!important;
  display:inline-flex!important;align-items:center;justify-content:center;
  font-size:15px;line-height:1;
  /* The plugin's own bbpress.css puts a small negative left margin on
     these icons (-2px / -5px, different per icon) to compensate for a
     wider button in their original context — left uncorrected, it throws
     the glyph off-center inside our round button. */
  margin:0!important;padding:0!important;
}

/* Forum reply rows (bbpress/loop-single-reply.php) sit inside a bordered
   card (#bbpress-forums .bs-single-forum-list) that carries no padding of
   its own — unlike the lesson/topic comment thread, which gets its
   horizontal gutter from ITS OWN page container. No override needed here:
   the template keeps the original .bs-reply-list-item class (alongside
   .cmt-item) specifically so buddyboss-theme's own padding:15px 30px rule
   for it — and its hover-reveal CSS for the "More actions" dropdown, which
   ALSO keys off that class — both keep working unmodified. */

/* Comment text */
.cmt-text{font-size:.9rem;color:var(--text);font-weight:400;line-height:1.65;margin-bottom:12px}

/* Video embed */
.cmt-video-embed{
  border-radius:var(--r-sm);overflow:hidden;margin-bottom:12px;
  max-width:340px;aspect-ratio:16/9;background:#000;
}
.cmt-video-embed iframe{width:100%;height:100%;display:block;border:none}

/* Actions row: Like · Reply · (like count, far right). `.comment-reply-
   link` is WP core's own class (hardcoded by comment_reply_link() — see
   recallers_render_ask_a_coach_comment() in functions.php); `.cmt-reply-
   btn` is kept only as a no-op alias in case any other markup still
   references it. Like is live — AJAX-toggled via recallers-main.js
   "COMPONENT: COMMENTS SECTION — Like" — `disabled` is now only used for a
   logged-out visitor (see that render function). */
.cmt-actions{display:flex;align-items:center;gap:6px;font-size:.82rem}
.cmt-like-btn,.cmt-reply-btn,.comment-reply-link{
  display:inline-flex;align-items:center;gap:5px;color:var(--gray-dark);
  font-family:var(--font-h);font-weight:600;background:none;border:none;
  cursor:pointer;padding:0;transition:color .14s;text-decoration:none;
}
.cmt-like-btn:hover{color:var(--red)}
.cmt-like-btn.liked{color:var(--red)}
/* Filled heart once liked — the state changes optimistically on click and
   the short pop/fade transition replaces the old AJAX loading spinner. */
.cmt-like-btn-icon{
  transform-origin:center;transition:fill .18s ease,stroke .18s ease;
}
.cmt-like-btn.liked .cmt-like-btn-icon{fill:var(--red)}
.cmt-like-btn.is-changing .cmt-like-btn-icon{
  animation:recallers-like-heart-pop .3s cubic-bezier(.2,.8,.2,1);
}
.cmt-like-btn.is-changing .cmt-like-btn-label{
  animation:recallers-like-label-fade .24s ease;
}
@keyframes recallers-like-heart-pop{
  0%{transform:scale(.72)}
  58%{transform:scale(1.28)}
  100%{transform:scale(1)}
}
@keyframes recallers-like-label-fade{
  0%{opacity:.35;transform:translateY(2px)}
  100%{opacity:1;transform:translateY(0)}
}
.comment-reply-link:hover,.cmt-reply-btn:hover{color:var(--blue)}
.cmt-like-btn svg,.cmt-reply-btn svg{width:15px;height:15px}
.cmt-actions-dot{color:var(--gray-line)}

/* Like count badge — always a filled red heart + number, pinned to the
   far right of `.cmt-actions` via margin-left:auto (not DOM order).
   Hidden by recallers_render_ask_a_coach_comment() / recallers-main.js
   whenever the count is 0, so a fresh comment doesn't show "0". */
.cmt-like-count{
  display:inline-flex;align-items:center;gap:5px;margin-left:auto;
  font-family:var(--font-h);font-weight:700;font-size:.85rem;color:var(--red);
}
.cmt-like-count svg{width:16px;height:16px;fill:var(--red);stroke:var(--red)}
.cmt-like-count-num{color:var(--gray-dark)}
.cmt-like-count.is-changing{animation:recallers-like-count-pop .3s ease}
@keyframes recallers-like-count-pop{
  0%{opacity:.35;transform:scale(.82)}
  100%{opacity:1;transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .cmt-like-btn.is-changing .cmt-like-btn-icon,
  .cmt-like-btn.is-changing .cmt-like-btn-label,
  .cmt-like-count.is-changing{animation:none}
}

/* Follow/Favorite (sidebar discussion-level actions) are still deferred —
   see recallers_toggle_discussion() in functions.php. The logged-out
   state of the Like button reuses the same muted/disabled treatment. */
.cmt-like-btn[disabled],
.cmt-side-action[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}

/* WP core's own cancel-reply link (get_cancel_comment_reply_link()) — hidden
   via inline style by default, shown by comment-reply.js while replying. */
#cancel-comment-reply-link{
  display:inline-block;margin-left:8px;font-family:var(--font-h);
  font-weight:600;font-size:.8rem;color:var(--gray-dark);
}
#cancel-comment-reply-link:hover{color:var(--red)}

/* Nested replies — outer <li> from wp_list_comments(); inner layout below. */
.cmt-item-reply{list-style:none}
.cmt-reply-item{display:flex;gap:12px;align-items:flex-start}
.cmt-reply-avatar{width:38px;height:38px;border-radius:50%;overflow:hidden;flex-shrink:0;display:block}
.cmt-reply-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.cmt-reply-body{flex:1;min-width:0}
.cmt-reply-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:6px}
.cmt-reply-text{font-size:.88rem;color:var(--text);font-weight:400;line-height:1.6;margin-bottom:8px}

/*──────────────────────────────────────────────
  PAGINATION
──────────────────────────────────────────────*/
.cmt-pagination{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:16px 0;flex-wrap:wrap;
}
.cmt-page-nums{display:flex;align-items:center;gap:6px}
.cmt-page-num{
  min-width:32px;height:32px;border-radius:7px;display:inline-flex;
  align-items:center;justify-content:center;
  font-family:var(--font-h);font-weight:700;font-size:.84rem;color:var(--text);
  border:none;background:none;cursor:pointer;
}
.cmt-page-num:hover{background:var(--gray-bg)}
.cmt-page-num.active{background:var(--blue);color:#fff}
.cmt-page-num.ellipsis{color:var(--gray-mid);cursor:default}
.cmt-page-num.ellipsis:hover{background:none}
.cmt-page-btn{
  display:inline-flex;align-items:center;gap:6px;
  border:1.5px solid var(--gray-line);border-radius:7px;
  background:#fff;color:var(--text);
  font-family:var(--font-h);font-weight:700;font-size:.84rem;
  padding:7px 14px;cursor:pointer;transition:border-color .14s;
}
.cmt-page-btn svg{width:13px;height:13px}
.cmt-page-btn:hover{border-color:var(--blue);background:var(--blue-pale)}
.cmt-page-btn:disabled{opacity:.45;cursor:not-allowed}
.cmt-page-btn:disabled:hover{border-color:var(--gray-line);background:#fff}

/* Pagination is generated by recallers_ask_a_coach_pagination_markup() and
   swapped with the result body after each server-side request. */

/*──────────────────────────────────────────────
  SIDEBAR
──────────────────────────────────────────────*/
.cmt-side-actions{display:flex;flex-direction:column;gap:0;margin-bottom:18px}
.cmt-side-action{
  display:inline-flex;align-items:center;gap:9px;padding:6px 0;
  font-family:var(--font-h);font-weight:700;font-size:.9rem;color:var(--violet);
  background:none;border:none;cursor:pointer;text-align:left;
  transition:color .14s;
}
.cmt-side-action:hover{color:var(--violet-hover)}
.cmt-side-action svg{width:18px;height:18px;flex-shrink:0}
.cmt-side-action.active svg{fill:var(--violet)}
/* Followed → green bell. Favorited → amber/yellow star. Scoped to each
   button's own icon (not the button's text color) via `color` on the <svg>
   itself, which is what its stroke="currentColor" paths actually read —
   see recallers_render_ask_a_coach_comment-adjacent markup in
   part-comments.php for the icons themselves. */
.cmt-discussion-follow.active svg{fill:var(--green-card);color:var(--green-card)}
.cmt-discussion-favorite.active svg{fill:var(--amber);color:var(--amber)}
/* Loading: swap the icon for the spinner (both buttons use the same slot),
   label stays put so the button doesn't jump width. */
.cmt-side-action .recallers-btn-spinner{margin:0}
.cmt-side-action.is-loading{cursor:default}
.cmt-side-action.is-loading svg{display:none}
.cmt-side-action.is-loading .recallers-btn-spinner{display:inline-block}

.cmt-helpful-card{background:#fff;border:1px solid var(--gray-line);border-radius:var(--r);padding:18px}
.cmt-helpful-title{
  font-family:var(--font-h);font-weight:700;font-size:.95rem;color:var(--violet);
  margin-bottom:14px;
}
.cmt-helpful-list{display:flex;flex-direction:column;gap:10px;list-style:none;padding:0;margin:0}
.cmt-helpful-item{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:var(--text);font-weight:400;line-height:1.45}
.cmt-helpful-num{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:var(--violet);color:#fff;font-family:var(--font-h);font-weight:700;font-size:.72rem;
  display:flex;align-items:center;justify-content:center;
}

/*──────────────────────────────────────────────
  NO RESULTS STATE
──────────────────────────────────────────────*/
.cmt-no-results{
  display:none;text-align:center;padding:32px 16px;
  font-size:.9rem;color:var(--gray-dark);font-weight:500;
}
.cmt-no-results.visible{display:block;animation:cmt-no-results-in .24s ease}
/* The list body fades in via .is-entering; this message is a sibling that only
   ever toggles display, so without an animation it snapped in the instant the
   spinner cleared. Same .24s/5px as .cmt-comments-results-body so an empty
   result settles at the same pace a populated one does. A display change
   cannot be transitioned, hence a keyframe rather than a transition. */
@keyframes cmt-no-results-in{
  0%{opacity:0;transform:translateY(5px)}
  100%{opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  .cmt-no-results.visible{animation:none}
}

/*──────────────────────────────────────────────
  RESPONSIVE — app mode ≤760px
──────────────────────────────────────────────*/
@media(max-width:760px){
  .cmt-title{font-size:1.25rem}
  .cmt-composer-meta{flex-direction:column;align-items:flex-start;gap:10px}
  .cmt-composer-footer{gap:8px}
  .cmt-video-input{min-width:0;width:100%;order:3}
  .cmt-post-btn{width:100%;justify-content:center;order:4}
  .cmt-video-label{order:1}
  .cmt-video-note{order:2;width:100%}

  .cmt-filter-bar{flex-direction:column;align-items:stretch;gap:8px}
  .cmt-filter-select{min-width:0;width:100%}

  .cmt-meta{gap:5px}
  .cmt-date{margin-left:0;width:100%}
  .cmt-avatar{width:38px;height:38px}
  .cmt-video-embed{max-width:100%}
  .cmt-list .children{padding-left:14px}

  .cmt-side-actions{flex-direction:row;flex-wrap:wrap;gap:8px;margin-bottom:12px}
  .cmt-pagination{flex-direction:column;align-items:stretch;gap:10px}
  .cmt-page-nums{justify-content:center;flex-wrap:wrap}
  .cmt-pagination .cmt-page-btn{justify-content:center}
}


/* ────────────────────────────────────────────────────────────
   They're needed because the old markup used
   inline SVGs sized via width/height attributes; the dynamic menu
   now renders BuddyBoss icon-font <i> tags instead, which need an
   explicit font-size.
   ──────────────────────────────────────────────────────────── */
 
.dd-icon i{
  font-size:16px;
  line-height:1;
  color:#336ca9;
}
 
.dl-icon i{
  font-size:20px;
  line-height:1;
  color:currentColor;
}

.dd-icon [class*=" bb-icon-"]:before,
.dd-icon [class^=bb-icon-]:before,
.dl-icon [class*=" bb-icon-"]:before,
.dl-icon [class^=bb-icon-]:before,
.dsl-icon [class*=" bb-icon-"]:before,
.dsl-icon [class^=bb-icon-]:before {
    font-weight: 300;
    font-size: 22px;
}

/* ────────────────────────────────────────────────────────────
   NEW — expandable sub-menus inside the mobile drawer
   (Community / Resources / Bonuses). Nothing existing is changed;
   these are new selectors only.
   ──────────────────────────────────────────────────────────── */
 
.drawer-group{display:flex;flex-direction:column}
 
.drawer-link-parent{
  cursor:pointer;
  width:100%;
  background:none;border:none;text-align:left;
}
.drawer-link-parent .chev-box{
  margin-left:auto;
  transition:transform .2s;
}
.drawer-group.open .drawer-link-parent .chev-box{transform:rotate(180deg)}
.drawer-group.open .drawer-link-parent{
  background:var(--blue-pale);color:var(--blue);font-weight:700;
}
 
.drawer-submenu{
  max-height:0;
  overflow:hidden;
  display:flex;flex-direction:column;
  padding-left:8px;
  transition:max-height .25s ease;
}
.drawer-group.open .drawer-submenu{
  max-height:1000px; /* generous fixed cap — real content is always shorter */
}
 
.drawer-sublink{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px 11px 34px;border-radius:10px;
  font-size:.85rem;font-weight:600;color:var(--gray-dark);
  transition:background .12s,color .12s;
}
.drawer-sublink:hover{background:#f7f5fb;color:var(--blue)}
.drawer-sublink.active{background:var(--blue-pale);color:var(--blue);font-weight:700}
 
.dsl-icon{width:18px;height:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.dsl-icon i{font-size:15px;line-height:1;color:#336ca9}

/* Non-clickable group heading above a set of drawer-sublinks — set via
   a "menu-heading" CSS Class on a child menu item (Appearance > Menus).
   See class-recallers-nav-walker.php, Recallers_Drawer_Walker::start_el(). */
.drawer-subheading{
  padding:12px 12px 4px 34px;
  font-size:.68rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#a39cb0;
}
.drawer-subheading:not(:first-child){
  margin-top:4px;padding-top:12px;border-top:1px solid #f0eef5;
}
 
/* Fix: .drawer-body only sets overflow-y:auto, which per the CSS spec
   silently computes overflow-x to auto too (browsers can't leave one
   axis "visible" while the other is scrollable) — so anything even
   1px wider than the drawer surfaces an unwanted horizontal
   scrollbar. This pins it back to vertical-only scrolling. */
.drawer-body{overflow-x:hidden}
 
/* ────────────────────────────────────────────────────────────
   NEW — header avatar account dropdown
   ──────────────────────────────────────────────────────────── */
 
.nav-account{position:relative}
 
.nav-account-trigger{
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;padding:0;margin:0;
  cursor:pointer;flex-shrink:0;
}
/* .nav-user-avatar keeps its existing look untouched — see
   recallers-main.css line ~269 (size, border, hover color). */
 
.nav-account-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;
  min-width:250px;
  background:#fff;border:1px solid var(--gray-line, #e7e1f0);
  border-radius:12px;
  box-shadow:0 12px 28px rgba(20,20,30,.12);
  padding:8px;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
  z-index:60;
}
.nav-account.open .nav-account-dropdown{
  opacity:1;visibility:visible;transform:translateY(0);
}
 
.nav-account-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;
}
 
.nav-account-item{position:relative}
 
.nav-account-row{
  display:flex;align-items:center;
}
 
.nav-account-link{
  flex:1;
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:8px;
  font-size:.9rem;font-weight:600;color:var(--gray-dark,#374151);
  transition:background .12s,color .12s;
}
.nav-account-link:hover{background:#f7f5fb;color:var(--blue,#336ca9)}
.nav-account-link svg{flex-shrink:0}
 
.nav-account-toggle{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;flex-shrink:0;
  background:none;border:none;border-radius:8px;
  cursor:pointer;color:#8a8f98;
  transition:background .12s,color .12s;
}
.nav-account-toggle:hover{background:#f7f5fb}
.nav-account-item.open .nav-account-toggle{color:var(--blue,#336ca9)}
 
/* Sub-items render as their own separate flyout panel — a real 3-tier
   nested menu — rather than expanding inline underneath the parent.
   Opens to the LEFT since the main dropdown already sits flush against
   the right edge of the screen (near the avatar), so there's no room
   to flyout further right. */
.nav-account-submenu{
  position:absolute;top:0;right:calc(100% + 8px);
  min-width:190px;
  background:#fff;border:1px solid var(--gray-line, #e7e1f0);
  border-radius:12px;
  box-shadow:0 12px 28px rgba(20,20,30,.12);
  padding:8px;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateX(6px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
  z-index:61;
}
.nav-account-item.open .nav-account-submenu{
  opacity:1;visibility:visible;transform:translateX(0);
}
 
.nav-account-sublink{
  display:block;
  padding:9px 12px;border-radius:8px;
  font-size:.87rem;font-weight:600;color:#6b7280;
  transition:background .12s,color .12s;
  white-space:nowrap;
}
.nav-account-sublink:hover{background:#f7f5fb;color:var(--blue,#336ca9)}
 
@media(max-width:760px){
  /* Desktop avatar/dropdown cluster is replaced by the drawer's own
     profile button + sliding panel on mobile — hide it here instead
     of leaving an empty clickable button with no visible avatar. */
  .nav-account{display:none}
}
 
/* ────────────────────────────────────────────────────────────
   NEW — mobile drawer profile panel (tap avatar to open)
   Mirrors the existing .drawer-dogpanel pattern exactly.
   ──────────────────────────────────────────────────────────── */
 
/* .drawer-user is now a <button> when logged in — reset default
   button styling so it looks identical to before, just tappable. */
button.drawer-user{
  background:none;border:none;padding:0;margin:0;
  cursor:pointer;text-align:left;width:auto;
}
.drawer-user-tag span{margin-left:2px;color:var(--gray-mid,#9aa1ac)}
 
.drawer-profilepanel{
  position:absolute;top:0;left:0;right:0;
  min-height:100%;
  background:#fff;
  padding:18px 16px 24px;
  transform:translateX(100%);
  transition:transform .26s cubic-bezier(.4,0,.2,1);
  z-index:2;
}
.drawer-profilepanel.is-open{transform:translateX(0)}
 
.drawer-profile-list{display:flex;flex-direction:column}
 
.drawer-profile-link{
  display:flex;align-items:center;gap:14px;
  padding:13px 12px;border-radius:10px;
  font-size:.92rem;font-weight:600;color:var(--gray-dark,#374151);
  transition:background .12s,color .12s;
}
.drawer-profile-link:hover{background:#f7f5fb}
.drawer-profile-link svg{flex-shrink:0}
.drawer-profile-link.logout{color:#c0392b}
.drawer-profile-link.logout:hover{background:#fdecea}
 
.drawer-profile-sublist{display:flex;flex-direction:column;padding:2px 0 8px 50px}
.drawer-profile-sublink{
  padding:9px 10px;border-radius:8px;
  font-size:.85rem;font-weight:600;color:#6b7280;
  transition:background .12s,color .12s;
}
.drawer-profile-sublink:hover{background:#f7f5fb;color:var(--blue,#336ca9)}
 
.nav-account-divider{height:1px;background:var(--gray-line,#e7e1f0);margin:6px 4px}
 
.nav-account-list .logout .nav-account-link{color:#c0392b}
.nav-account-list .logout .nav-account-link:hover{background:#fdecea;color:#c0392b}

/* ── "Set Password" trigger buttons — same look as the sibling <a>
   links (.nav-account-link / .drawer-profile-link) they sit next to,
   just reset from <button> defaults since they open a modal instead
   of navigating anywhere. ── */
.nav-account-link-btn,
.drawer-profile-link-btn{
  background:none;border:none;margin:0;width:100%;
  font-family: unset;text-align:left;cursor:pointer;
}

/* ── Set Password modal — reuses the site's existing .ss-modal shell
   (overlay + centered panel + close button); this just sizes the
   panel and restyles whatever form fields [memb_change_password]
   renders inside .spm-modal-body so they don't look like bare,
   unstyled plugin markup. ── */
.spm-modal-panel{max-width:440px}
.spm-modal-body{margin-top:6px}
.spm-modal-body form{display:flex;flex-direction:column;gap:14px}
.spm-modal-body p{margin:0 0 14px}
.spm-modal-body p:last-child{margin-bottom:0}
.spm-modal-body label{
  display:block;margin-bottom:6px;
  font-size:.82rem;font-weight:700;color:var(--gray-dark,#374151);
}
.spm-modal-body input[type="text"],
.spm-modal-body input[type="password"],
.spm-modal-body input[type="email"]{
  display:block;width:100%;padding:11px 13px;border-radius:10px;
  border:1px solid var(--gray-line,#e0dcea);
  font-size:.92rem;font-family:inherit;color:var(--text,#1f2430);
  background:#faf9fc;transition:border-color .15s,background .15s;
  box-sizing:border-box;
}
.spm-modal-body input[type="text"]:focus,
.spm-modal-body input[type="password"]:focus,
.spm-modal-body input[type="email"]:focus{
  outline:none;border-color:var(--blue,#336ca9);background:#fff;
}
.spm-modal-body input[type="submit"],
.spm-modal-body button[type="submit"],
.spm-modal-body button{
  margin-top:6px;padding:12px 20px;border:none;border-radius:10px;
  background:var(--blue,#336ca9);color:#fff;font-weight:700;font-size:.92rem;
  font-family:inherit;cursor:pointer;transition:background .15s,transform .1s;
}
.spm-modal-body input[type="submit"]:hover,
.spm-modal-body button[type="submit"]:hover,
.spm-modal-body button:hover{background:#2a578c}
.spm-modal-body input[type="submit"]:active,
.spm-modal-body button[type="submit"]:active,
.spm-modal-body button:active{transform:scale(.98)}
.spm-modal-body table{width:100%;border-collapse:collapse}
.spm-modal-body table td{padding:0 0 14px;border:none}
.spm-modal-body a{color:var(--blue,#336ca9);font-weight:600}
/* Broad net for whatever class the plugin puts on its own success/error
   notices, so they read as clear banners instead of plain text. */
.spm-modal-body [class*="error"]{
  color:#c0392b;font-size:.84rem;font-weight:600;background:#fdecea;
  border-radius:8px;padding:10px 12px;margin-bottom:14px;
}
.spm-modal-body [class*="success"]{
  color:#1e7d43;font-size:.84rem;font-weight:600;background:#e9f8ef;
  border-radius:8px;padding:10px 12px;margin-bottom:14px;
}
/* Inline notice above the form — the "your session timed out" message
   after an expired nonce is bounced back by
   recallers_intercept_stale_password_nonce(), and the fallback shown when
   the form itself can't be fetched. Lives OUTSIDE .spm-modal-body so
   re-rendering the form doesn't wipe the explanation for why it re-rendered. */
.spm-modal-notice{
  margin:10px 0 0;border-radius:8px;padding:10px 12px;
  font-size:.84rem;font-weight:600;line-height:1.45;
}
.spm-modal-notice--success{color:#1e7d43;background:#e9f8ef}
.spm-modal-notice--warn{color:#8a5a00;background:#fdf3e0}
.spm-modal-notice--error{color:#c0392b;background:#fdecea}
.spm-modal-loading{
  margin:14px 0;color:var(--gray-dark,#374151);
  font-size:.88rem;font-weight:600;
}

@media(max-width:520px){
  .spm-modal-panel{max-width:100%;padding:22px 18px}
}

/* ═══════════════════════════════════════════════════════════
   RECALLERS — topbar notifications, search overlay, mobile
   drawer additions (bookmarks/search links, notification badge
   + panel). All new selectors, nothing existing overridden.
   ═══════════════════════════════════════════════════════════ */

.topbar-notify{position:relative}

.topbar-badge{
  position:absolute;top:2px;right:2px;
  min-width:15px;height:15px;padding:0 3px;
  background:#e53935;color:#fff;
  border-radius:999px;
  font-size:.62rem;font-weight:800;line-height:15px;text-align:center;
  box-shadow:0 0 0 2px #000;
}

.topbar-notify-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;
  transform:translateY(-6px);
  width:340px;max-width:90vw;
  background:#fff;border:1px solid var(--gray-line,#e7e1f0);
  border-radius:14px;
  box-shadow:0 16px 36px rgba(20,20,30,.16);
  opacity:0;visibility:hidden;
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
  z-index:220;
  overflow:hidden;
}
.topbar-notify.open .topbar-notify-dropdown{
  opacity:1;visibility:visible;transform:translateY(0);
}

.tn-head{padding:14px 16px 10px;border-bottom:1px solid var(--gray-line,#e7e1f0)}
.tn-head h3{margin:0;font-size:.95rem;font-weight:800;color:#1f2430}

.tn-list{max-height:360px;overflow-y:auto}
.tn-item{
  padding:12px 16px;
  font-size:.85rem;line-height:1.45;color:var(--gray-dark,#374151);
  border-bottom:1px solid #f1f2f4;
  transition:background-color .3s ease;
}
.tn-item:last-child{border-bottom:none}
.tn-item a{color:var(--blue,#336ca9);font-weight:600}
.tn-item-unread{background:#eef4ff}
.tn-item-read{background:#fff}
.tn-empty{padding:28px 16px;text-align:center;font-size:.85rem;color:#9aa1ac}

.tn-divider{
  padding:8px 16px 6px;
  font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#9aa1ac;background:#fafbfc;
  border-bottom:1px solid #f1f2f4;
}

.tn-foot{padding:10px 16px;border-top:1px solid var(--gray-line,#e7e1f0)}
.tn-foot a,
.tn-loadmore{
  display:block;width:100%;text-align:center;
  font-size:.82rem;font-weight:700;color:var(--blue,#336ca9);
  background:none;border:none;cursor:pointer;font-family:inherit;padding:4px;
}
.tn-loadmore:disabled{color:#9aa1ac;cursor:default}

.search-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(20,22,28,.55);
  display:flex;align-items:flex-start;justify-content:center;
  padding:10vh 20px 20px;
  opacity:0;visibility:hidden;
  transition:opacity .18s ease,visibility .18s;
}
.search-overlay.open{opacity:1;visibility:visible}

.search-overlay-inner{
  width:100%;max-width:600px;
  background:#fff;border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.3);
  overflow:hidden;
  transform:translateY(-10px);
  transition:transform .18s ease;
}
.search-overlay.open .search-overlay-inner{transform:translateY(0)}

.search-box{
  display:flex;align-items:center;gap:10px;
  padding:16px 18px;border-bottom:1px solid var(--gray-line,#e7e1f0);
}
.search-box-icon{color:#9aa1ac;flex-shrink:0}
.search-box-input{
  flex:1;border:none;outline:none;
  font-size:1rem;font-family:inherit;color:#1f2430;
  background:none;
}
.search-box-close{
  background:none;border:none;cursor:pointer;
  color:#9aa1ac;padding:4px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s;
}
.search-box-close:hover{background:#f7f5fb;color:#1f2430}

.search-type-filters{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:12px 18px;border-bottom:1px solid var(--gray-line,#e7e1f0);
}
.search-type-filter{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px 5px 10px;border-radius:999px;
  background:#f7f5fb;color:#5c6270;
  font-size:.78rem;font-weight:700;cursor:pointer;
  transition:background .12s,color .12s;
}
.search-type-filter:has(input:checked){background:var(--blue-pale,#e7eff6);color:var(--blue,#336ca9)}
.search-type-filter input{accent-color:var(--blue,#336ca9);margin:0;cursor:pointer}

.search-results{max-height:60vh;overflow-y:auto}
.search-results-hint,
.search-results-empty{
  padding:32px 18px;text-align:center;
  font-size:.88rem;color:#9aa1ac;
}
.search-results-loading{
  padding:20px 18px;text-align:center;
  font-size:.85rem;color:#9aa1ac;
}

.sr-group-label{
  padding:12px 18px 4px;
  font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#9aa1ac;
}
.sr-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 18px;
  transition:background .12s;
}
.sr-item:hover,.sr-item.active{background:#f7f5fb}
.sr-item-icon{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;
  background:#e7eff6;color:var(--blue,#336ca9);
  display:flex;align-items:center;justify-content:center;
}
.sr-item-icon img{width:100%;height:100%;border-radius:9px;object-fit:cover}
.sr-item-text{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.sr-item-title{
  font-size:.9rem;font-weight:700;color:#1f2430;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sr-item-type{font-size:.76rem;color:#9aa1ac}
.sr-item-meta{
  display:flex;align-items:center;gap:6px;min-width:0;
  font-size:.74rem;color:#9aa1ac;
}
.sr-item-meta-milestone{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-item-meta-sep{flex-shrink:0;color:#c7cbd3}
.sr-item-archetype-pill{
  display:inline-flex;align-items:center;flex-shrink:0;
  padding:1px 8px;border-radius:999px;
  background:var(--blue-pale,#e7eff6);color:var(--blue,#336ca9);
  font-size:.68rem;font-weight:800;letter-spacing:.02em;
}
.sr-item-locked-pill{
  display:inline-flex;align-items:center;gap:4px;flex-shrink:0;
  padding:3px 9px 3px 7px;border-radius:999px;
  background:#fdeeee;color:#c65c5c;
  font-size:.68rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
}
.sr-item-locked-pill svg{width:10px;height:10px;flex-shrink:0}

button.drawer-link{
  background:none;border:none;width:100%;text-align:left;cursor:pointer;
  font-family:inherit;
}

.drawer-link-badge{
  margin-left:auto;
  min-width:20px;height:20px;padding:0 5px;
  background:#e53935;color:#fff;
  border-radius:999px;
  font-size:.72rem;font-weight:800;line-height:20px;text-align:center;
}

.drawer-notifypanel{
  position:absolute;top:0;left:0;right:0;
  min-height:100%;
  background:#fff;
  padding:18px 0 24px;
  transform:translateX(100%);
  transition:transform .26s cubic-bezier(.4,0,.2,1);
  z-index:2;
  display:flex;flex-direction:column;
}
.drawer-notifypanel.is-open{transform:translateX(0)}
.drawer-notifypanel .drawer-back{margin:0 16px 12px}

.drawer-notify-list{flex:1;overflow-y:auto}
.drawer-notify-item{
  padding:13px 16px;
  font-size:.87rem;line-height:1.45;color:var(--gray-dark,#374151);
  border-bottom:1px solid #f1f2f4;
  transition:background-color .3s ease;
}
.drawer-notify-item a{color:var(--blue,#336ca9);font-weight:600}
.drawer-notify-item-unread{background:#eef4ff}
.drawer-notify-item-read{background:#fff}
.drawer-notify-empty{padding:32px 16px;text-align:center;font-size:.87rem;color:#9aa1ac}

.drawer-notify-divider{
  padding:8px 16px 6px;
  font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#9aa1ac;background:#fafbfc;
  border-bottom:1px solid #f1f2f4;
}

.drawer-notify-foot{padding:12px 16px 0}
.drawer-notify-foot a,
.drawer-notify-loadmore{
  display:block;width:100%;text-align:center;
  padding:11px;border-radius:10px;background:#f7f5fb;
  font-size:.85rem;font-weight:700;color:var(--blue,#336ca9);
  border:none;cursor:pointer;font-family:inherit;
}
.drawer-notify-loadmore:disabled{color:#9aa1ac;cursor:default}

/* ── mark-as-read UI additions ── */

.tn-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tn-markall{
  background:none;border:none;cursor:pointer;
  font-size:.78rem;font-weight:700;color:var(--blue,#336ca9);
  padding:4px 6px;border-radius:6px;flex-shrink:0;
}
.tn-markall:hover{background:#e7eff6}

.tn-item{display:flex;align-items:flex-start;gap:10px}
.tn-item-avatar{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  object-fit:cover;margin-top:1px;background:#e7eff6;
}
.tn-item-content{
  flex:1;min-width:0;
  color:var(--gray-dark,#374151);font-weight:600;text-decoration:none;
}
.tn-item-content:hover{color:var(--blue,#336ca9)}
/* "Following" badge — flags a notification as "comment on a discussion you
   follow" rather than "reply to you" (see recallers_get_relevant_comment_
   notifications()'s ->is_following flag, recallers-dashboard-helpers.php).
   The same small violet-pill treatment used elsewhere on the site, just
   sized for inline use here — shared between both the topbar dropdown and
   the mobile drawer variant. */
.recallers-notify-following-badge{
  display:inline-flex;align-items:center;background:#ece8fd;color:var(--violet);
  font-family:var(--font-h,inherit);font-weight:700;font-size:.66rem;letter-spacing:.02em;
  text-transform:uppercase;border-radius:999px;padding:2px 9px;
  margin-right:0px;vertical-align:1px;
}
.tn-item-time{
  display:block;
  font-size:.72rem;font-weight:500;color:#9aa1ac;margin-top:2px;
}
.tn-item-dismiss{
  flex-shrink:0;
  width:24px;height:24px;margin-top:2px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--gray-line,#e7e1f0);border-radius:50%;
  color:#9aa1ac;cursor:pointer;
  transition:background .12s,color .12s,border-color .12s;
}
.tn-item-dismiss:hover{background:var(--blue,#336ca9);border-color:var(--blue,#336ca9);color:#fff}

.drawer-notify-headrow{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 16px 12px;
}
.drawer-notify-headrow .drawer-back{margin:0}
.drawer-notify-markall{
  background:none;border:none;cursor:pointer;
  font-size:.8rem;font-weight:700;color:var(--blue,#336ca9);
  padding:6px 8px;border-radius:8px;flex-shrink:0;
}
.drawer-notify-markall:hover{background:#e7eff6}

.drawer-notify-item{display:flex;align-items:flex-start;gap:12px}
.drawer-notify-item-avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  object-fit:cover;margin-top:1px;background:#e7eff6;
}
.drawer-notify-item-content{
  flex:1;min-width:0;
  color:var(--gray-dark,#374151);font-weight:600;text-decoration:none;
}
.drawer-notify-item-content:hover{color:var(--blue,#336ca9)}
.drawer-notify-item-time{
  display:block;
  font-size:.74rem;font-weight:500;color:#9aa1ac;margin-top:2px;
}
.drawer-notify-item-dismiss{
  flex-shrink:0;
  width:28px;height:28px;margin-top:2px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--gray-line,#e7e1f0);border-radius:50%;
  color:#9aa1ac;cursor:pointer;
  transition:background .12s,color .12s,border-color .12s;
}
.drawer-notify-item-dismiss:hover{background:var(--blue,#336ca9);border-color:var(--blue,#336ca9);color:#fff}

/*──────────────────────────────────────────────
  STUDENT JOURNAL — real video embeds (Milestone
  Complete recap + My Journal accordion), the
  Milestone Start intention form, the lesson-page
  inline intention card, and My Journal's inline
  reflection editor.
──────────────────────────────────────────────*/
.msc-video-wrap--embed,
.mj-video-wrap--embed{background:#000}
.msc-video-wrap--embed iframe,
.mj-video-wrap--embed iframe{width:100%;height:100%;border:0;display:block}
.mj-video-empty{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:16/10;border-radius:var(--r-sm);background:var(--gray-pale,#f7f5fb);
  color:var(--gray-mid);font-size:.85rem;font-weight:500;
}

.mj-intention-recap{
  border:1px solid var(--gray-line);border-radius:var(--r-sm);
  background:var(--gray-pale,#f8f9fb);padding:12px 14px;margin-bottom:16px;
}
.mj-intention-line{font-size:.85rem;color:var(--text);line-height:1.5;margin:0 0 4px}
.mj-intention-line:last-child{margin-bottom:0}
.mj-reflection-text--empty{color:var(--gray-mid);font-style:italic}

.mj-reflection-textarea{
  width:100%;min-height:110px;resize:vertical;
  border:1.5px solid var(--gray-line);border-radius:var(--r-sm);
  padding:12px;font-family:var(--font-b);font-size:.9rem;color:var(--text);
  background:#fff;margin-bottom:10px;
}
.mj-reflection-textarea:focus{outline:none;border-color:var(--blue)}
.mj-reflection-edit-actions{display:flex;gap:10px;margin-bottom:16px}
.mj-edit-save-btn,
.mj-edit-cancel-btn{
  border-radius:var(--r-sm);font-family:var(--font-b);font-weight:700;font-size:.82rem;
  padding:8px 16px;
}
.mj-edit-save-btn{background:var(--violet);color:#fff}
.mj-edit-save-btn:hover{background:var(--violet-hover)}
.mj-edit-save-btn:disabled{opacity:.6;cursor:default}
.mj-edit-cancel-btn{background:#fff;border:1.5px solid var(--gray-line);color:var(--gray-dark)}
.mj-field-error{outline:2px solid #c23b3b;outline-offset:2px;border-radius:4px}

/* Milestone Start — the before-a-milestone intention form (reuses
   .msc-capture-card / .msc-textarea / .msc-save-btn / .msc-footer-row). */
.mst-field-label{
  display:block;font-family:var(--font-h);font-weight:700;font-size:.85rem;
  color:var(--text);margin-bottom:6px;
}
.mst-form .mst-textarea{margin-bottom:16px}
.mst-prefilled-note{font-size:.78rem;color:var(--gray-mid);font-style:italic;margin:-8px 0 14px}
.mst-skip-link{
  font-family:var(--font-b);font-weight:700;font-size:.88rem;
  color:var(--gray-dark);padding:11px 8px;
}
.mst-skip-link:hover{color:var(--text)}
.mst-save-status{font-size:.8rem;color:var(--gray-mid);font-weight:500;margin:10px 0 0}

/*================================================================
  ASK A COACH — COACH QUEUE EMPTY STATE + DOG ARCHETYPE PUPPY TAG
  Small additions to the existing "PAGE: COACH QUEUE" component.
================================================================*/
.cq-empty-state{padding:32px 20px;text-align:center;color:var(--gray-dark);font-size:.9rem}
/* PUPPY badge — a paw-print pill in the brand's berry, replacing a
   bootstrap-ish yellow chip that used two colours (#fff3cd/#856404/#ffd700)
   found nowhere else in the palette. Berry is the one brand colour not
   already carrying a meaning in this table: orange reads "waiting", green
   reads "done", and the archetype hexes own the rest. Same rounded-pill
   idiom as .cq-lock-badge and .cq-count-badge, so it sits in the site's
   existing badge language rather than inventing a third one.
   Markup: recallers_cq_puppy_tag(). */
.cq-puppy-tag{
  display:inline-flex;align-items:center;gap:5px;vertical-align:middle;
  margin-left:7px;padding:5px 11px 5px 9px;
  background:#fdeaf2;color:var(--berry);
  border-radius:999px;line-height:1.2;
  font-family:var(--font-h);font-weight:800;font-size:.68rem;letter-spacing:.01em;
}
.cq-puppy-tag .cq-paw{width:12px;height:11px;flex-shrink:0;opacity:.9}

/* The Coach Queue's "Actual Name differs from Display Name" caution badge —
   recallers_cq_name_differs_badge(). Same pale-tint-pill-plus-tooltip
   mechanics as .dogsthat-placeholder-badge (see the plugin's frontend.css
   for the full reasoning on the tooltip's position/z-index/caret/
   reduced-motion handling, replayed here rather than shared since this
   badge is theme-owned, not plugin-rendered), but amber rather than blue:
   this is a caution, the placeholder badge is neutral information. */
.cq-name-differs-badge{
  position:relative;
  display:inline-flex;align-items:center;gap:5px;vertical-align:middle;
  padding:4px 10px 4px 8px;
  background:#fdf1d6;color:#8a5a06;
  border-radius:999px;line-height:1.2;
  font-family:var(--font-h);font-weight:800;font-size:.68rem;letter-spacing:.01em;
  cursor:help;transition:background .14s ease,color .14s ease;
}
.cq-name-differs-badge:hover,
.cq-name-differs-badge:focus-visible{background:#fbe6b8;color:#6b4400}
.cq-name-differs-badge__icon{width:11px;height:11px;flex:none;opacity:.9}
.cq-name-differs-badge__tip{
  position:absolute;top:calc(100% + 9px);left:50%;z-index:100000;
  width:max-content;max-width:17rem;
  transform:translateX(-50%) translateY(-4px);
  padding:10px 13px;border-radius:10px;
  background:#2a1546;color:#f3eefa;
  font-family:'Inter',system-ui,sans-serif;font-size:.78rem;font-weight:500;
  line-height:1.5;white-space:normal;text-align:left;
  box-shadow:0 4px 14px rgba(0,0,0,.12),0 10px 30px rgba(42,21,70,.22);
  opacity:0;visibility:hidden;
  transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s;
  pointer-events:none;
}
.cq-name-differs-badge__caret{
  position:absolute;top:-3px;left:50%;width:10px;height:10px;margin-left:-5px;
  border-radius:2px;background:inherit;transform:rotate(45deg);
}
.cq-name-differs-badge:hover .cq-name-differs-badge__tip,
.cq-name-differs-badge:focus-visible .cq-name-differs-badge__tip{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
  transition-delay:0s;
}
.cq-name-differs-badge:focus-visible{outline:2px solid #336ca9;outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  .cq-name-differs-badge__tip{transform:translateX(-50%);transition:opacity .14s ease,visibility 0s linear .14s}
  .cq-name-differs-badge:hover .cq-name-differs-badge__tip,
  .cq-name-differs-badge:focus-visible .cq-name-differs-badge__tip{transform:translateX(-50%)}
}

/*================================================================
  ASK A COACH — SNAPSHOT BADGE ROW
  Rendered by the Dogsthat Training plugin (dogsthat_comment_badge_html(),
  src/AskACoach/CommentBadgeRenderer.php) directly inline in each comment's
  meta row (functions.php's recallers_render_ask_a_coach_comment()).
  Native-comments rework (2026-07-24): the wpDiscuz-era composer-field
  styles this component used to also carry (`.dogsthat-comment-*`) are
  removed — the composer's dog-select/video-link inputs are now the mockup's
  own `.cmt-dog-select`/`.cmt-video-input` (part-comments.php), rendered via
  native `comment_form()`. Only the badge-row styles (`.dogsthat-cmt-*`)
  remain, retargeted to this inline call site.
================================================================*/
.dogsthat-cmt-dot{color:var(--gray-mid);margin:0 4px}
.dogsthat-cmt-dog-info,
.dogsthat-cmt-archetype-info,
.dogsthat-cmt-milestone-info{
  display:inline-flex;align-items:center;gap:5px;font-size:.8rem;
  color:var(--gray-dark);font-weight:600;
}
.dogsthat-cmt-dog-avatar{display:inline-flex;width:36px;height:36px;border-radius:50%;overflow:hidden}
.dogsthat-cmt-dog-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.dogsthat-cmt-dog-name{color:var(--text);font-weight:700}
.dogsthat-cmt-badge-hex{display:inline-flex;width:22px;height:22px}
.dogsthat-cmt-badge-hex svg{width:100%;height:100%}
/* Same puppy pill as the Coach Queue's — see .cq-puppy-tag for the reasoning.
   Markup comes from the plugin's CommentBadgeRenderer, so only the styling
   lives here. */
.dogsthat-cmt-puppy-badge{
  display:inline-flex;align-items:center;gap:5px;vertical-align:middle;
  margin-left:4px;padding:5px 11px 5px 9px;
  background:#fdeaf2;color:var(--berry);
  border-radius:999px;line-height:1.2;
  font-family:var(--font-h);font-weight:800;font-size:.68rem;letter-spacing:.01em;
}
.dogsthat-cmt-puppy-badge .dogsthat-cmt-paw{width:12px;height:11px;flex-shrink:0;opacity:.9}
.dogsthat-cmt-video-embed{
  position:relative;width:100%;max-width:420px;aspect-ratio:16/9;margin-top:10px;
  border-radius:var(--r-sm);overflow:hidden;background:#000;
}
.dogsthat-cmt-video-embed iframe{width:100%;height:100%;border:0;display:block}
/*================================================================
  SITE FOOTER — logged-in dashboard shell (all pages)
  See template-parts/site-footer.php + recallers_render_site_footer()
================================================================*/
.site-footer{
  background: var(--white);
  padding:20px 28px;
border-top: 1px solid var(--gray-line);
}

/* Any logged-in page whose content column is shorter than the viewport
   (dashboard/my-journal/my-profile with no dog yet, a near-empty forum
   index, etc.) otherwise leaves .site-footer floating mid-page instead of
   pinned to the bottom. #page is the flex column for the whole shell —
   header(s) + content + footer are its direct children — so growing the
   content column to fill any leftover viewport height pushes the footer
   down to the bottom edge on short pages and has no effect on tall ones. */
#page{
  display:flex;flex-direction:column;min-height:100vh;
  /* ReadyLaunch's own CSS reserves 69px here for its fixed header bar (when
     ReadyLaunch is active). Ours is in normal flow, so that reservation is
     just a white gap under the admin bar. */
  margin-top:0;
}
/* WP core pushes <html> down with `margin-top:32px !important` (46px under
   the 782px admin-bar breakpoint) whenever the admin bar is showing, and
   that margin sits outside #page entirely. A plain 100vh here is then 100vh
   *plus* that margin tall, which is a few pixels more than the viewport —
   just enough to force a scrollbar even though the footer is otherwise
   pinned. Subtract it so #page's min-height still exactly fills what's left
   of the viewport below the admin bar. */
body.admin-bar #page{min-height:calc(100vh - 32px)}
@media screen and (max-width:782px){
  body.admin-bar #page{min-height:calc(100vh - 46px)}
}
#page > #primary,
#page > #content{flex:1 0 auto}
.site-footer-inner{
  max-width:1500px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:10px 28px;flex-wrap:wrap;
}

/* Brand mark — real site logo (see recallers_get_site_logo()), on a light
   chip so it stays legible on the navy bar regardless of the logo's own
   colors (the BuddyBoss logo is a colored mark + dark wordmark, made for a
   white nav bar, not this dark one). */
.site-footer-brand{
  display:flex;
  align-items:center;
  background:rgb(255 255 255);
  padding: 0;
  border-radius:8px;
  flex-shrink:0;
  line-height:0;
  transition:background .15s;
}
.site-footer-brand:hover{background:#fff}
.site-footer-logo{height:34px;width:auto;max-width:140px;object-fit:contain;display:block}

/* Copyright + legal links */
.site-footer-legal{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px 10px;
  flex:1;
  min-width:0;
  font-size:.82rem;
  color: var(--gray-mid);
}
.site-footer-copy::after{content:"•";margin-left:10px;color:var(--gray-mid)}
/* margin/padding are stated explicitly because buddyboss-theme-css sets a
   bottom+left margin on every 'ul'. It's dequeued on the custom page
   templates but not on pages like the homepage, where that bottom margin
   made this centred row sit ~14px above the copyright line. */
.site-footer-menu{display:flex;list-style:none;align-items:center;gap:0;margin:0;padding:0}
.site-footer-menu li{display:flex;align-items:center}
.site-footer-menu li:not(:first-child)::before{content:"•";color:var(--gray-mid);margin:0 10px}
.site-footer-menu a{color: var(--gray-mid);transition:color .15s}
.site-footer-menu a:hover{color: var(--gray-dark);}

/* Help / email pill */
.site-footer-help{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.8rem;
  font-weight:600;
  color: var(--gray-mid);
  padding:7px 14px;
  border: 1px solid var(--gray-mid);
  border-radius:999px;
  transition:background .15s,border-color .15s;
  flex-shrink:0;
}
.site-footer-help svg{width:14px;height:14px}
.site-footer-help:hover{background: var(--gray-bg);border-color: var(--gray-dark);color: var(--gray-dark);}

@media(max-width:900px){
  .site-footer-inner{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:14px}
  .site-footer-legal{flex-direction:column;gap:10px}
  .site-footer-copy::after{display:none}
  .site-footer-menu{justify-content:center}
  .site-footer-menu li,.site-footer-menu a{white-space:nowrap}
}
@media(max-width:480px){
  .site-footer{padding:18px 16px}
}

/*================================================================
  BUDDYBOSS: PROFILE EDIT (xProfile field spacing)
  Styles for: /members/{slug}/profile/edit/group/{n}/
  Spacing only — BuddyBoss's own visibility label ("Public",
  "Visibility: Public") keeps its default appearance deliberately.
================================================================*/

/* Separate the visibility line from the input it belongs to. */
.profile-edit .field-visibility-settings-header,
.profile-edit .bb-rl-field-visibility-block {
  margin: 10px 0 0;
}

/* Breathing room between one field and the next. */
.profile-edit .editfield {
  margin-bottom: 26px;
}

.profile-edit .editfield:last-of-type {
  margin-bottom: 18px;
}

/*================================================================
  PAGE: MILESTONE LESSON (merged Milestone Start + Milestone Complete)
  Styles for: recallers-milestone-lesson-template.php, rendered onto
  the LearnDash lesson.php template via `buddyboss_learndash_content`
  (same mechanism as #recallers-gameday-page below). Reuses almost
  everything from the "PAGE: MILESTONE COMPLETE" section above
  (.msc-* / .mst-*) — this section only adds what's new: the grid
  wrapper (this page has no ".page" ancestor of its own, same reason
  #recallers-gameday-page.gd-page carries its own grid), the
  "in-progress"/unfilled game-check state, the current-milestone icon
  emphasis, and the "All Milestones Completed" done-button state.
================================================================*/
#recallers-milestone-lesson-page.msl-page{
  display:grid;
  grid-template-columns:minmax(0,1fr) 400px;
  gap:24px;
  max-width:1500px;margin:0 auto;
  padding:26px 28px;
  align-items:start;
}
@media(max-width:1040px){
  #recallers-milestone-lesson-page.msl-page{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  #recallers-milestone-lesson-page.msl-page{padding:14px 12px 12px;gap:16px;max-width:100vw;overflow-x:hidden}
  .msc-certificate-actions{grid-template-columns:1fr}
  .recallers-certificate-celebration{padding:28px 20px 24px!important}
  .recallers-certificate-celebration .swal2-title{font-size:1.65rem}
  .recallers-certificate-celebration-details{flex-direction:column;gap:8px;margin-bottom:18px}
  .recallers-certificate-celebration-actions{grid-template-columns:1fr}
  .recallers-certificate-celebration-reflection-link{margin-bottom:16px}
}

/* Games-in-this-milestone list now includes NOT-YET-complete games too
   (not just completed ones) — the check circle stays hollow/outlined
   until that game is done. */
.msc-completed-check.is-incomplete{
  background:#fff;border:2px solid var(--gray-line);
}
.msc-completed-check.is-incomplete svg{opacity:0}

/* "All Milestones Completed" — the course-finished end state of the
   Start/Continue/Start Next button, once there's no next milestone. */
.msc-start-next.is-done{
  background:var(--green-done)!important;cursor:default;
}
.msc-start-next.is-done:hover{background:var(--green-done)!important;transform:none}

/*──────────────────────────────────────────────
  MILESTONE LESSON — sidebar-only lock treatment:
  a locked whole milestone (this page) is now
  handled entirely by the page-level overlay (see
  "PAGE-LEVEL LOCK OVERLAY" below), not by blurring
  individual elements here. What's left is just the
  sidebar's own per-game preview: games list rows
  swap their checkmark for a lock icon and stop
  being links, and the Start/Continue button can
  show a disabled grey "Milestone Locked" state.
──────────────────────────────────────────────*/
.msc-completed-row.is-locked{cursor:default}
.msc-completed-check.is-locked{background:var(--gray-mid)}
.msc-completed-check.is-locked svg{width:12px;height:12px}

.msc-start-next.is-locked{background:var(--gray-mid)!important;cursor:not-allowed}
.msc-start-next.is-locked:hover{background:var(--gray-mid)!important;transform:none}

/*──────────────────────────────────────────────
  JOURNAL CAPTURE CARDS — saved (read-only) view
  Both cards (intention + reflection) render this
  alongside their form and swap between the two
  client-side; see setupCaptureCard() in
  recallers-main.js.
──────────────────────────────────────────────*/
/* Explicit [hidden] guards: these sit inside BuddyBoss/LearnDash markup,
   whose stylesheets set `display` on bare form/div selectors and would
   otherwise beat the UA stylesheet's [hidden] rule. Same convention as
   .gd-video-loading[hidden] / .ss-modal[hidden] above. */
.ml-saved[hidden],
.ml-saved-field[hidden],
.ml-cancel-btn[hidden],
.msc-capture-card [data-ml-form][hidden]{display:none}

.ml-saved-field{margin-bottom:14px}
.ml-saved-label{
  display:block;font-family:var(--font-h);font-weight:700;font-size:.85rem;
  color:var(--text);margin-bottom:6px;
}
.ml-saved-value{
  font-size:.9rem;color:var(--gray-dark);line-height:1.55;margin:0;
  /* Matches the textarea the value was typed into, and keeps the
     server-rendered value identical to the one JS writes back after a
     save (textContent, so no nl2br to reproduce). */
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.ml-saved-link{color:var(--blue);text-decoration:underline}
.ml-saved-link:hover{color:var(--blue-hover)}

.ml-saved-actions{display:flex;justify-content:flex-end;margin-top:16px}
.ml-edit-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1.5px solid var(--gray-line);border-radius:var(--r-sm);
  color:var(--gray-dark);font-family:var(--font-b);font-weight:700;font-size:.85rem;
  padding:9px 16px;transition:background .14s,border-color .14s,color .14s;
}
.ml-edit-btn:hover{background:var(--blue-pale);border-color:var(--violet);color:var(--violet)}
.ml-edit-btn svg{width:15px;height:15px}

.ml-form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ml-cancel-btn{
  background:#fff;border:1.5px solid var(--gray-line);border-radius:var(--r-sm);
  color:var(--gray-dark);font-family:var(--font-b);font-weight:700;font-size:.88rem;
  padding:11px 18px;transition:background .14s,color .14s;
}
.ml-cancel-btn:hover{background:var(--gray-bg);color:var(--text)}

@media(max-width:760px){
  .ml-form-actions{width:100%}
  .ml-form-actions .msc-save-btn,
  .ml-cancel-btn{flex:1 1 auto;justify-content:center;text-align:center}
}

/*================================================================
  BEFORE / AFTER JOURNAL PAIR
  Always shown on the milestone lesson. Before completion, the reflection
  is a locked preview; after completion, the student is redirected here
  from the last game to write it (see wp_ajax_recallers_gd_mark_complete
  in functions.php).

  Follows My Journal's treatment of the same two entries: the
  intention is a quiet recessed recap (cf. .mj-intention-recap), the
  reflection is the live card. The only real accent is green on the
  reflection — no washes, badges or connectors; the pair reads as
  "here's what you said, here's what happened".
================================================================*/
:root{
  --ml-green:#1f8a4c;
  --ml-green-hover:#17703d;
  --ml-green-wash:#eaf7ef;
}

.ml-journal-pair{display:flex;flex-direction:column;gap:16px}

/* Upcoming AFTER card — visually previews the reflection without rendering
   any live form controls. The readable overlay sits above a subdued card
   skeleton, making both the locked state and its unlock condition explicit. */
.ml-card--reflection-locked{
  position:relative;overflow:hidden;min-height:245px;
  border-left:3px solid var(--gray-mid);background:var(--gray-bg);
}
.ml-reflection-locked-preview{
  opacity:.42;filter:blur(1.5px);pointer-events:none;user-select:none;
}
.ml-reflection-locked-preview .msc-capture-head{margin-bottom:14px}
.ml-reflection-locked-preview .msc-prompt-pill{display:inline-flex}
.ml-reflection-locked-textarea{
  min-height:78px;color:var(--gray-mid);background:#fff;margin-bottom:0;
}
.ml-reflection-lock-overlay{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;text-align:center;background:rgba(255,255,255,.78);
}
.ml-reflection-lock-icon{
  width:46px;height:46px;border-radius:50%;margin-bottom:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--violet);color:#fff;box-shadow:0 8px 22px rgba(57,30,93,.2);
}
.ml-reflection-lock-icon svg{width:22px;height:22px}
.ml-reflection-lock-title{
  font-family:var(--font-h);font-weight:800;font-size:1.02rem;color:var(--text);
}
.ml-reflection-lock-message{
  max-width:390px;margin:5px 0 0;font-size:.85rem;line-height:1.5;
  color:var(--gray-dark);font-weight:600;
}

@media(max-width:760px){
  .ml-card--reflection-locked{min-height:230px}
  .ml-reflection-lock-overlay{padding:20px}
}

/* INTENTION NUDGE — the treatment on an empty intention card in the
   'start' state. Two layers, neither of which blocks anything: the quiet
   permanent --awaiting accent, and the one-time .ml-nudge coach-mark
   that recallers-main.js reveals when the student first tries to leave
   for a game. See setupIntentionNudge() for the behaviour.

   The coach-mark borrows the sidebar reward card's visual language
   (.msc-certificate-card — soft gradient, corner glow, tilted badge,
   sparks) on purpose: it interrupts a student mid-stride, so it has to
   read as part of the journey rather than as a validation error. Violet
   rather than the certificate's green, since it belongs to the intention
   card it sits inside. */
.ml-nudge[hidden]{display:none}

.ml-card--awaiting{border-color:var(--violet)}

.ml-nudge{
  position:relative;overflow:hidden;
  margin-bottom:16px;padding:18px 20px;
  border:1px solid #d9caed;border-radius:var(--r);
  background:linear-gradient(145deg,#fbf9ff 0%,#f0e9ff 100%);
  box-shadow:0 8px 20px rgba(57,30,93,.08);
}
.ml-nudge::after{
  content:"";position:absolute;right:-34px;top:-42px;width:116px;height:116px;
  border-radius:50%;background:rgba(255,255,255,.56);pointer-events:none;
}
.ml-nudge-spark{position:absolute;z-index:1;color:var(--amber);font-size:1.1rem;line-height:1}
.ml-nudge-spark--one{right:24px;top:16px}
.ml-nudge-spark--two{right:14px;top:42px;color:var(--violet);font-size:.68rem}

.ml-nudge-head{position:relative;z-index:1;display:flex;align-items:center;gap:12px}
.ml-nudge-badge{
  display:flex;align-items:center;justify-content:center;
  flex:0 0 46px;width:46px;height:46px;border-radius:14px;
  background:var(--violet);color:#fff;
  box-shadow:0 5px 12px rgba(57,30,93,.22);transform:rotate(-4deg);
}
.ml-nudge-badge svg{width:23px;height:23px}
.ml-nudge-eyebrow{
  font-size:.68rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--violet);line-height:1.2;
}
.ml-nudge-title{
  margin:3px 0 0;font-family:var(--font-h);font-size:1.05rem;
  font-weight:800;line-height:1.15;color:var(--text);
}
.ml-nudge-copy{
  position:relative;z-index:1;margin:14px 0 16px;
  color:var(--gray-dark);font-size:.82rem;font-weight:500;line-height:1.5;
}
.ml-nudge-dog-name{
  display:inline-block;padding:1px 6px;border-radius:6px;
  background:#e6dcf6;color:var(--violet);font-weight:800;
  line-height:1.35;white-space:nowrap;
}

/* Outlined, not solid: the loud action on this card is the textarea
   right below it, and a skip button that out-shouts the thing it's
   offering to skip would be arguing with itself. */
.ml-nudge-actions{position:relative;z-index:1;display:flex;justify-content:flex-end}
.ml-nudge-skip{
  display:inline-flex;align-items:center;gap:8px;max-width:100%;
  background:rgba(255,255,255,.75);border:1.5px solid #d9caed;
  border-radius:var(--r-sm);color:var(--violet);
  font-family:var(--font-b);font-weight:700;font-size:.82rem;
  padding:9px 15px;text-align:left;
  transition:background .14s,border-color .14s,color .14s;
}
.ml-nudge-skip:hover{background:var(--violet);border-color:var(--violet);color:#fff}
.ml-nudge-skip svg{width:15px;height:15px;flex-shrink:0}

/* The card takes focus itself on touch (tabindex="-1", so the on-screen
   keyboard doesn't cover it) — the ring below IS the visible focus
   treatment, so suppress the UA outline rather than stacking both. */
.msc-capture-card[data-ml-nudge]:focus{outline:none}

.msc-capture-card.is-nudging{
  box-shadow:0 0 0 3px rgba(57,30,93,.16);
  animation:ml-nudge-pulse .5s ease-out 1;
}
@keyframes ml-nudge-pulse{
  0%{box-shadow:0 0 0 0 rgba(57,30,93,.30)}
  100%{box-shadow:0 0 0 3px rgba(57,30,93,.16)}
}
@media(prefers-reduced-motion:reduce){
  .msc-capture-card.is-nudging{animation:none}
}

@media(max-width:560px){
  .ml-nudge{padding:16px}
  /* A long "continue to <game>" label needs the full width rather than
     squeezing itself against the right edge. */
  .ml-nudge-actions{justify-content:stretch}
  .ml-nudge-skip{width:100%;justify-content:center;text-align:center}
}

/* BEFORE — recessed recap. Same idea as .mj-intention-recap: a plain
   tinted box, no icon chip, smaller type. Still editable. */
.ml-card--recap{background:var(--gray-bg)}
.ml-card--recap .msc-capture-ico{display:none}
.ml-card--recap .msc-capture-title{font-size:.92rem}
.ml-card--recap .ml-saved-value{font-size:.85rem}
.ml-card--recap .ml-edit-btn,
.ml-card--recap .msc-textarea,
.ml-card--recap .ml-cancel-btn{background:#fff}

/* AFTER — green. Recolouring the tokens the base .msc-capture-card
   already references is the whole change: icon chip, prompt pills,
   textarea focus ring, save button and Edit hover all follow, and
   can't drift out of sync with the base card. */
.ml-card--current{
  --violet:var(--ml-green);
  --violet-hover:var(--ml-green-hover);
  --blue:var(--ml-green);
  --blue-hover:var(--ml-green-hover);
  --blue-pale:var(--ml-green-wash);

  /* Carries the card's identity in the SAVED state too, where the green
     save button and prompt pills aren't on screen to do it. */
  border-left:3px solid var(--ml-green);
}

/* Saved milestone video — embedded, matching My Journal's recap
   player rather than showing a bare URL. */
.ml-saved-video{
  position:relative;aspect-ratio:16/10;
  border-radius:var(--r-sm);overflow:hidden;background:#000;
}
.ml-saved-video iframe{width:100%;height:100%;border:0;display:block}
.ml-saved-video[hidden]{display:none}

/* Two-column saved reflection: player left, text right — the same split
   My Journal uses (.mj-m-panel-inner). Only applied when there's a real
   embed, which is why it's a class rather than :has() on the video row;
   recallers-main.js re-toggles it after a save, with no reload. */
.ml-saved.is-split{
  display:grid;grid-template-columns:340px minmax(0,1fr);gap:22px;
  align-items:start;
}
/* The video row is first in the DOM (so it lands in the left column and
   still reads first when this collapses); the Edit row spans both. */
.ml-saved.is-split > .ml-saved-field{margin-bottom:0}
.ml-saved.is-split > .ml-saved-actions{grid-column:1/-1}

@media(max-width:900px){
  .ml-saved.is-split{grid-template-columns:minmax(0,1fr);gap:0}
  .ml-saved.is-split > .ml-saved-field{margin-bottom:14px}
}

/* Settings custom tabs: BuddyBoss applies a default icon via
   ".bp-navs .current a:before" to whichever settings tab is active. Each
   rule below overrides that pseudo-element's content with the icon font
   code for that specific tab, rather than adding an <i> tag in the
   template (matches how the theme's own built-in tabs, e.g. Login
   Information / Notification Settings / Privacy, already do it). */
.bb-template-v2 .buddypress-wrap .bp-settings-container .bp-navs #my-programs-personal-li a:before {
	content: "\edc3";
}

.bb-template-v2 .buddypress-wrap .bp-settings-container .bp-navs #payments-personal-li a:before {
	content: "\ee64";
}

.bb-template-v2 .buddypress-wrap .bp-settings-container .bp-navs #credit-cards-personal-li a:before {
	content: "\ee42";
}

/*================================================================
  PAGE-LEVEL LOCK OVERLAY — Milestone (Lesson) / Game (Topic) page
  reached directly while it's locked for the student's currently
  active dog: either linear progression (previous milestone/game not
  finished) or an archetype mismatch (page belongs to a course the
  active dog isn't enrolled in). Replaces the old template_redirect-
  based handling for these two cases (see recallers-linear-progression.php)
  — the page underneath still fully renders; it's just blurred and made
  non-interactive.

  Markup (both templates):
    <div id="recallers-..." class="page ... recallers-page-locked">
      ...normal page content (main, aside, etc.)...
      <div class="recallers-page-lock-overlay">           <!-- LAST child -->
        <div class="recallers-page-lock-card">...</div>
      </div>
    </div>

  `.recallers-page-locked` blurs/disables every OTHER direct child of the
  page div via the wildcard rule below — new direct children added later
  (e.g. another sidebar card) are covered automatically, no extra classes
  needed per element. `pointer-events:none` alone only stops mouse/touch;
  recallers-main.js's matching section additionally sets the `inert`
  attribute on those same children at render time, which also blocks
  keyboard focus/tab — and, because that attribute is set once on load
  rather than continuously enforced, still holds even if the overlay node
  below is deleted via devtools afterward.

  Two-layer split: `.recallers-page-lock-overlay` is the full-page dim —
  it spans the whole (possibly very tall) page div via position:absolute.
  `.recallers-page-lock-card` is the actual white, rounded message box,
  pinned to the viewport with position:fixed + a 50%/50%/translate
  center, so it stays put in the middle of the screen through scrolling
  on desktop and touch-scroll on mobile, rather than scrolling away with
  the (blurred) page content or only centering within whatever's
  currently on-screen. This only works because neither
  .recallers-page-lock-overlay nor its ancestors up to <body> ever get a
  CSS filter/transform of their own — either one would re-scope "fixed"
  to that ancestor instead of the real viewport. The blurred content sits
  in a SIBLING branch (recallers-main.css's ".page.recallers-page-locked >
  *:not(.recallers-page-lock-overlay)" rule), so that's not a concern
  here.
================================================================*/
.page.recallers-page-locked{position:relative}
.page.recallers-page-locked > *:not(.recallers-page-lock-overlay){
  filter:blur(6px);
  pointer-events:none;
  user-select:none;
}

.recallers-page-lock-overlay{
  position:absolute;inset:0;z-index:20;
  background:rgba(255,255,255,.55);
}

.recallers-page-lock-card{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:21;
  display:flex;flex-direction:column;align-items:center;
  gap:14px;
  width:calc(100% - 48px);max-width:440px;
  padding:32px 28px;text-align:center;
  background:#fff;border-radius:16px;
  box-shadow:0 20px 50px rgba(20,22,35,.22),0 2px 8px rgba(20,22,35,.08);
}

.recallers-page-lock-icon{
  width:56px;height:56px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:2.5px solid var(--red);color:var(--red);
  box-shadow:0 8px 22px rgba(229,20,29,.22);
}
.recallers-page-lock-icon svg{width:26px;height:26px}

.recallers-page-lock-text{
  max-width:390px;margin:0;font-size:.95rem;line-height:1.6;
  color:var(--text);font-weight:600;
}
.recallers-page-lock-text strong{font-weight:800}

.recallers-page-lock-btn{
  display:inline-flex;align-items:center;gap:8px;margin-top:2px;
  background:var(--violet);color:#fff;font-family:var(--font-h);font-weight:700;
  font-size:.9rem;padding:12px 22px;border-radius:var(--r-sm);
  transition:background .14s,transform .14s;
}
.recallers-page-lock-btn:hover{background:var(--violet-hover);color:#fff;transform:translateY(-1px)}

@media(max-width:760px){
  .recallers-page-lock-card{padding:24px 20px;gap:12px}
  .recallers-page-lock-icon{width:48px;height:48px}
  .recallers-page-lock-icon svg{width:22px;height:22px}
}


/*================================================================
  MY BOOKMARKS PAGE (Favorites plugin, restyled)
  Server-rendered by recallers_render_bookmarks_list() in functions.php,
  which replaces the [user_favorites] shortcode's own markup with this —
  a plain single-column card list, same visual language (fonts, colors,
  radius) as the rest of the site.

  .rb-card-actions .simplefavorite-button is the Favorites plugin's OWN
  Favorite/Unfavorite toggle element (kept as-is functionally — its click
  handling and AJAX come from the plugin's own JS, already loaded
  elsewhere on the site via the_favorites_button() in wp_footer) — only
  restyled here, scoped tightly to this page so it doesn't affect that
  floating footer button or any other favorite button elsewhere. `!important`
  is used only where needed to beat the plugin's own inline `style=""`
  attribute (its optional custom-color feature).
================================================================*/
.rb-page{
  max-width:900px;margin:0 auto;padding:32px 24px 60px;
}

.rb-header{margin-bottom:28px}
.rb-title{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-h);font-weight:800;font-size:1.7rem;color:var(--text);
  margin:0 0 6px;
}
.rb-title-ico{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--violet);color:#fff;
}
.rb-title-ico svg{width:18px;height:18px}
.rb-sub{margin:0;font-size:.95rem;color:var(--gray-dark)}

.rb-empty{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:48px 24px;text-align:center;
  background:var(--gray-bg);border:1px solid var(--gray-line);border-radius:var(--r);
  color:var(--gray-dark);
}
.rb-empty-ico{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1.5px solid var(--gray-line);color:var(--gray-mid);
}
.rb-empty-ico svg{width:22px;height:22px}
.rb-empty p{margin:0;max-width:420px;font-size:.92rem;line-height:1.55}

.rb-list{display:flex;flex-direction:column;gap:14px}

.rb-card{
  display:flex;align-items:center;gap:16px;
  padding:18px 20px;
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--r);
  transition:box-shadow .14s,border-color .14s;
}
.rb-card:hover{box-shadow:var(--sh)}
.rb-card.is-locked{border-color:var(--gray-line);background:var(--gray-bg)}

.rb-card-ico{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--violet);color:#fff;
}
.rb-card.is-locked .rb-card-ico{background:var(--gray-mid)}
.rb-card-ico svg{width:20px;height:20px}

.rb-card-body{flex:1;min-width:0}
.rb-card-title{
  display:block;font-family:var(--font-h);font-weight:700;font-size:1.02rem;
  color:var(--text);text-decoration:none;line-height:1.35;
}
.rb-card-title:hover{color:var(--violet)}
.rb-card-meta{
  margin-top:3px;font-size:.85rem;color:var(--blue);font-weight:600;
}
.rb-lock-badge{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  padding:5px 12px;border-radius:999px;
  border:1.5px solid var(--red);color:var(--red);
  font-size:.78rem;font-weight:700;
}
.rb-lock-badge svg{width:13px;height:13px;flex-shrink:0}

.rb-card-actions{
  display:flex;align-items:center;gap:10px;flex-shrink:0;flex-wrap:wrap;
  justify-content:flex-end;
}

.rb-card-actions .simplefavorite-button{
  display:inline-flex!important;align-items:center;justify-content:center;
  height:auto!important;line-height:1.3!important;
  padding:9px 16px!important;border-radius:var(--r-sm)!important;
  border:1.5px solid var(--red)!important;background:#fff!important;
  color:var(--red)!important;
  font-family:var(--font-h)!important;font-weight:700!important;font-size:.82rem!important;
  box-shadow:none!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;
  cursor:pointer;transition:background .14s,color .14s;
  white-space:nowrap;
}
.rb-card-actions .simplefavorite-button:hover{background:var(--red)!important;color:#fff!important}
/* Not-yet-favorited state shouldn't normally appear on this page (every
   card here IS a favorite), but styled anyway in case a toggle click
   flips it before the row re-renders. */
.rb-card-actions .simplefavorite-button:not(.active){
  border-color:var(--gray-line)!important;color:var(--gray-dark)!important;
}
.rb-card-actions .simplefavorite-button:not(.active):hover{
  background:var(--gray-bg)!important;color:var(--text)!important;
}

.rb-view-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:9px 16px;border-radius:var(--r-sm);
  border:1.5px solid var(--violet);color:var(--violet);
  font-family:var(--font-h);font-weight:700;font-size:.82rem;
  text-decoration:none;white-space:nowrap;
  transition:background .14s,color .14s;
}
.rb-view-btn:hover{background:var(--violet);color:#fff}

@media(max-width:640px){
  .rb-page{padding:24px 16px 48px}
  .rb-card{flex-wrap:wrap}
  .rb-card-actions{width:100%;justify-content:flex-start;margin-top:4px}
  .rb-card-actions .simplefavorite-button,
  .rb-view-btn{flex:1 1 auto;text-align:center}
}

/*================================================================
  SITE INDEX PAGE
  Server-rendered by recallers_render_site_index() in functions.php — a
  page header, a sticky Archetype nav down the left, and every Milestone/
  Game listed under its Archetype's accordion card on the right,
  checkable and bookmarkable, with a red "Locked for <dog>" badge
  anywhere the active dog can't currently open that Archetype/Milestone/
  Game (recallers_linear_get_archetype_lock() / recallers_linear_get_
  lock_overlay() in recallers-linear-progression.php — same checks the
  pages themselves use). Locked rows render as plain text, never a link.

  Each Archetype is a collapsible accordion card
  (.si-archetype-toggle/.si-archetype-body — recallers-main.js wires up
  the click; this file only styles both states) and the sidebar
  highlights whichever Archetype is currently in view
  (.si-sidebar-link.is-active, set by the same JS section via
  IntersectionObserver).

  .si-row-bookmark .simplefavorite-button restyles the Favorites plugin's
  own toggle (same element/behaviour as .rb-card-actions
  .simplefavorite-button on the My Bookmarks page above — just sized down
  to fit a dense list row). Scoped to this page only.
================================================================*/

/* ── Layout reset ──
   The theme's shared "#page :not(article).page" rule (specificity
   1 ID + 1 class + 1 type, from the :not(article) argument) turns EVERY
   .page-classed element into a 2-column grid — [content 1fr] |
   [right-rail 400px] — meant for pages with a right-hand widget sidebar.
   #recallers-milestone-lesson-page/#recallers-gameday-page never collide
   with it because LearnDash's own singular templates don't sit inside
   the theme's #page wrapper at all, so that selector never matches them
   in the first place — but a plain WordPress Page (what this Site Index
   shortcode renders into) DOES sit inside #page, so it DOES match here,
   silently splitting .si-page-header and .si-body — this page's only two
   direct children — into that unrelated 2-column grid instead of letting
   them stack normally.

   "#page #recallers-site-index-page.si-page" (2 IDs) beats the theme
   rule's specificity outright, so this doesn't depend on matching its
   :not(article) trick or on load order — it neutralizes the grid via
   `display:block` and re-declares the box model this page actually
   wants, self-contained, rather than partially inheriting whatever the
   theme rule leaves in place. Unconditional (not media-query-gated) so
   it holds at every viewport width regardless of what breakpoints the
   theme rule itself may or may not have. With this in place, the
   `grid-template-columns` override some earlier troubleshooting added
   in the WordPress editor's Additional CSS for #recallers-site-index-page
   is no longer needed and can be removed. */
#page #recallers-site-index-page.si-page{
  display:block;
  max-width:1500px;margin:0 auto;padding:0px 24px 60px;
}

/* ── Page header ── */
.si-page-header{
  display:flex;align-items:center;gap:14px;
  padding:0 0 24px;
}
.si-page-header-ico{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--violet);color:#fff;
  box-shadow:0 6px 18px rgba(57,30,93,.22);
}
.si-page-header-ico svg{width:24px;height:24px}
.si-page-title{
  font-family:var(--font-h);font-weight:800;font-size:1.7rem;color:var(--text);
  margin:0 0 3px;
}
.si-page-sub{margin:0;font-size:.9rem;color:var(--gray-dark)}

/* ── Body: sidebar + main ── */
.si-body{
  display:grid;grid-template-columns:250px 1fr;gap:32px;align-items:start;
}

/* ── Sidebar ── */
.si-sidebar{
  position:sticky;top:24px;
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--r);
  padding:16px;box-shadow:var(--sh);
}
.si-sidebar-title{
  font-family:var(--font-h);font-weight:800;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gray-dark);margin:0 0 10px;padding:0 4px;
}
.si-sidebar-empty{margin:0;font-size:.85rem;color:var(--gray-dark)}
.si-sidebar-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.si-sidebar-link{
  display:flex;align-items:center;gap:9px;
  padding:9px 10px;border-radius:var(--r-sm);
  border-left:3px solid transparent;
  font-family:var(--font-h);font-weight:700;font-size:.86rem;color:var(--violet);
  text-decoration:none;transition:background .12s,border-color .12s;
}
.si-sidebar-link:hover{background:var(--gray-bg)}
.si-sidebar-link.is-active{
  background:#f2edf9;border-left-color:var(--violet);color:var(--violet);
}
.si-sidebar-link-ico{
  width:20px;height:20px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--violet);
}
.si-sidebar-link-ico svg{width:15px;height:15px}
.si-sidebar-link.is-locked{color:var(--gray-dark)}
.si-sidebar-link.is-locked .si-sidebar-link-ico{color:var(--red)}
.si-sidebar-link.is-locked.is-active{background:#f2f2f2;border-left-color:var(--gray-mid)}
.si-sidebar-link-text{flex:1;min-width:0}

/* ── Main column ── */
.si-main-title{
  font-family:var(--font-h);font-weight:800;font-size:1.35rem;color:var(--text);
  margin:0 0 20px;
}

/* ── Archetype accordion card ── */
.si-archetype{
  margin-bottom:20px;scroll-margin-top:20px;
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--r);
  overflow:hidden;
}
.si-archetype.is-locked{background:#fafafa}

.si-archetype-heading{margin:0;display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px}
.si-archetype-toggle{
  flex:1;min-width:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:none;border:0;padding:10px 8px;cursor:pointer;text-align:left;
  border-radius:var(--r-sm);transition:background .12s;
}
.si-archetype-toggle:hover{background:var(--gray-bg)}
.si-archetype-toggle-ico{
  width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  color:var(--gray-dark);transition:transform .18s ease;
}
.si-archetype-toggle[aria-expanded="true"] .si-archetype-toggle-ico{transform:rotate(90deg)}
.si-archetype-toggle-ico svg{width:16px;height:16px}
.si-archetype-title{
  font-family:var(--font-h);font-weight:800;font-size:1.2rem;color:var(--violet);
}
.si-archetype.is-locked .si-archetype-title{color:var(--gray-dark)}
.si-archetype-meta{font-size:.8rem;font-weight:600;color:var(--gray-dark)}
.si-archetype-progress{
  padding:3px 10px;border-radius:999px;background:#eef8ee;color:var(--green-done);
  font-family:var(--font-h);font-weight:700;font-size:.76rem;white-space:nowrap;
}

.si-archetype-body{padding:0 14px 14px}
.si-archetype-body[hidden]{display:none}
.si-archetype-empty{margin:0 0 12px;padding:0 4px;font-size:.9rem;color:var(--gray-dark)}

/* ── Milestone + Game rows ── */
.si-milestone{margin-bottom:6px}
.si-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-sm)}
.si-row--milestone{background:var(--gray-bg);margin-bottom:2px}
.si-milestone.is-locked .si-row--milestone{background:#f2f2f2}

.si-games{margin:0 0 8px;padding-left:8px;border-left:2px solid var(--gray-line);margin-left:25px}
.si-row--game{padding:10px 14px 10px 12px;border-bottom:1px solid var(--gray-line);border-radius:0}
.si-games .si-row--game:last-child{border-bottom:none}
.si-row--game:hover{background:var(--gray-bg)}

.si-check{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--gray-line);color:#fff;background:#fff;
}
.si-check.is-done{background:var(--green-done);border-color:var(--green-done)}
.si-check svg{width:12px;height:12px}
.si-check--sm{width:18px;height:18px}
.si-check--sm svg{width:10px;height:10px}

.si-row-ico{
  width:26px;height:26px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.si-row-ico--milestone{background:#f2edf9;color:var(--violet)}
.si-row-ico--milestone svg{width:14px;height:14px}
.si-row-ico--game{width:22px;height:22px;background:#eaf2fb;color:var(--blue)}
.si-row-ico--game svg{width:12px;height:12px}
.si-milestone.is-locked .si-row-ico--milestone{background:#eee;color:var(--gray-dark)}
.si-row--game.is-locked .si-row-ico--game{background:#eee;color:var(--gray-dark)}

.si-row-title{
  flex:1;min-width:0;
  font-family:var(--font-h);color:var(--text);text-decoration:none;
  font-weight:800;font-size:1.05rem;
}
.si-row--game .si-row-title{font-weight:600;font-size:.9rem}
a.si-row-title:hover{color:var(--violet)}
.si-row-title--disabled{color:var(--gray-dark);cursor:default}

.si-lock-badge{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  padding:5px 12px;border-radius:999px;
  border:1.5px solid var(--red);color:var(--red);
  font-family:var(--font-h);font-size:.74rem;font-weight:700;white-space:nowrap;
}
.si-lock-badge svg{width:12px;height:12px;flex-shrink:0}
.si-lock-badge--sm{padding:4px 10px;font-size:.68rem}

.si-row-bookmark{flex-shrink:0;display:flex;align-items:center}
.si-row-bookmark .simplefavorite-button{
  display:inline-flex!important;align-items:center;justify-content:center;gap:5px;
  height:auto!important;line-height:1.2!important;
  padding:6px 12px!important;border-radius:999px!important;
  border:1.5px solid var(--gray-line)!important;background:#fff!important;color:var(--gray-dark)!important;
  font-family:var(--font-h)!important;font-weight:700!important;font-size:.72rem!important;
  box-shadow:none!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;
  cursor:pointer;white-space:nowrap;transition:background .14s,border-color .14s,color .14s;
}
.si-row-bookmark .simplefavorite-button:hover{border-color:var(--violet)!important;color:var(--violet)!important}
.si-row-bookmark .simplefavorite-button.active{
  border-color:var(--violet)!important;background:var(--violet)!important;color:#fff!important;
}

@media(max-width:820px){
  #page #recallers-site-index-page.si-page{padding:0px 16px 48px}
  .si-body{grid-template-columns:1fr;gap:20px}
  .si-page-header{padding-bottom:20px}
  .si-sidebar{position:static}
  .si-games{margin-left:14px}
}
@media(max-width:480px){
  #page #recallers-site-index-page.si-page{padding:0px 14px 40px}
  .si-page-header{gap:10px}
  .si-page-header-ico{width:38px;height:38px}
  .si-page-header-ico svg{width:20px;height:20px}
  .si-page-title{font-size:1.4rem}
  .si-archetype-toggle{gap:8px}
  .si-row{flex-wrap:wrap;gap:8px}
  .si-row-bookmark{margin-left:auto}
  .si-row--milestone .si-lock-badge, .si-row--game .si-lock-badge{flex-basis:100%;}
}

/* ===========================================================================
   PLACEHOLDER ("TEMPORARY") DOG
   ---------------------------------------------------------------------------
   The marker pill itself is the plugin's — one renderer, styled in
   dogsthat-training/assets/css/frontend.css against this theme's badge idiom
   (borderless pill, pale tint + saturated text, Poppins 800 at .68rem, same
   geometry as .cq-puppy-tag). Everything here is theme-side surface glue:
   spacing against the names it follows, clipping escapes for the tooltip, and
   the two explainer blocks only this theme renders.
   ======================================================================== */

/* Breathing room after a dog name, matching .cq-puppy-tag's own margin-left. */
.dog-name-row .dogsthat-placeholder-badge,
.mj-dog-name-row .dogsthat-placeholder-badge,
.mp-dog-name-row .dogsthat-placeholder-badge{
  align-self:center;flex:none;margin-left:3px;
}

/* Tight rows take the round icon-chip variant; nudge it onto the text
   baseline and scale it down a touch so it reads as a marker on the name
   rather than a control beside it. */
.dog-dd-name .dogsthat-placeholder-badge,
.dog-row-name .dogsthat-placeholder-badge,
.mj-changedog-option .dogsthat-placeholder-badge,
.cq-placeholder-tag{
  position:relative;top:-1px;margin-left:5px;
}

/* The header switcher's sub-line is small and low-contrast; the full pill
   would overpower it. */
.nav-training-text .dogsthat-placeholder-badge{
  transform:scale(.92);transform-origin:left center;margin-left:4px;
}

/* Coach Queue rows sit on a white table; the pill needs the same left margin
   the PUPPY tag beside it uses so the two align when both are present. */
.cq-placeholder-tag{margin-left:7px}

/* Tooltips are absolutely positioned below the pill and have to escape every
   ancestor that would clip them — switcher rows, the dashboard's dog rows,
   the header itself.

   The Coach Queue table is NOT on this list and cannot be: .cq-table-scroll
   is a two-axis scroll pane (a 1280px-wide table sideways, a capped height
   vertically so its header can stay sticky), and a box that scrolls cannot
   also let a tooltip hang outside it. That one is handled at
   runtime instead — see COMPONENT: PLACEHOLDER BADGE TOOLTIP in
   recallers-main.js, which repositions a tip that would be clipped. */
.dog-dd-row,
.dog-dd-info,
.dog-row-info,
.mp-dog-name-row,
.nav-training,
.nav-training-text,
.nav-training-wrap{
  overflow:visible;
}

/* The header switcher and its dropdown sit hard against the right edge of the
   nav, where a centre-anchored tooltip would run off-screen. Anchor the right
   edge to the badge instead so it opens inward, and move the caret to match —
   it has to keep pointing at the pill, not at the panel's centre. */
.nav-training-text .dogsthat-placeholder-badge__tip,
.dog-dd-row .dogsthat-placeholder-badge__tip{
  left:auto;right:-8px;transform:translateY(-4px);
}
.nav-training-text .dogsthat-placeholder-badge:hover .dogsthat-placeholder-badge__tip,
.nav-training-text .dogsthat-placeholder-badge:focus-visible .dogsthat-placeholder-badge__tip,
.dog-dd-row .dogsthat-placeholder-badge:hover .dogsthat-placeholder-badge__tip,
.dog-dd-row .dogsthat-placeholder-badge:focus-visible .dogsthat-placeholder-badge__tip{
  transform:translateY(0);
}
.nav-training-text .dogsthat-placeholder-badge__caret,
.dog-dd-row .dogsthat-placeholder-badge__caret{
  left:auto;right:14px;margin-left:0;
}

/* Quiz results: the "this is a temporary dog" explainer under the reveal.
   Same Sky register as the pill, so the whole feature reads as one thing —
   and an informational blue rather than a cautionary amber, since nothing
   here is wrong. */
.qr-placeholder-note{
  display:flex;align-items:flex-start;gap:12px;
  max-width:40rem;margin:22px auto 0;padding:15px 18px;
  background:#eef4fa;border:1px solid #cadcee;border-radius:var(--r);
  color:#285585;text-align:left;
}
.qr-placeholder-note p{margin:0;font-size:.92rem;font-weight:500;line-height:1.6}
.qr-placeholder-ico{flex:none;width:22px;height:22px;margin-top:1px;color:var(--sky)}
.qr-placeholder-ico svg{width:100%;height:100%}

/* My Profile: the handoff block on a placeholder dog's card — "got your own
   dog now? archive this one and take the quiz". Dashed edge so it reads as a
   prompt rather than a warning; the card already carries the pill. */
.mp-dog-placeholder-note{
  margin:0 0 14px;padding:14px 16px;
  background:#f2f7fb;border:1.5px dashed #b6d0e6;border-radius:var(--r-sm);
}
.mp-dog-placeholder-note strong{
  display:block;margin-bottom:5px;color:var(--blue-hover);
  font-family:var(--font-h);font-weight:700;font-size:.92rem;
}
.mp-dog-placeholder-note p{
  margin:0 0 12px;color:#4a6b8a;font-size:.86rem;font-weight:500;line-height:1.55;
}
/* The CTA inherits .mp-btn-ghost's shape but takes the note's Sky register, so
   it doesn't drop a violet button into a blue panel. */
.mp-dog-placeholder-note .mp-btn-ghost{
  background:#fff;border-color:var(--blue-light);color:var(--blue-hover);
}
.mp-dog-placeholder-note .mp-btn-ghost:hover{background:var(--blue-pale)}

/*================================================================
  PAGE: PROFILE EDIT (BuddyBoss /profile/edit/group/1/)
  See recallers-profile-display-name.php.
================================================================*/
/* The raw Nickname field isn't safe to expose for editing (can carry an
   email address on this site — see UserSlug/Slug::safe_nickname()) and is
   superseded by the "Display Name Publicly As" field below. The input
   stays in the DOM, unchanged, so BuddyBoss's own required-field check on
   submit still passes. */
/* BuddyBoss's own .buddypress-wrap .profile.edit .editfield{display:flex}
   (buddypress.min.css) outweighs a plain class selector here (4 classes
   vs. 2), so this has to match or beat it. */
body.profile-edit .profile.edit .editfield.field_nickname{display:none!important}
.recallers-display-name-custom-wrap.recallers-is-hidden{display:none!important}

/* The custom-name box: a visible sub-field of the select above it rather
   than a second, unrelated input butted straight up against it — a left
   rule + indent ties it back to "Custom…", and its own small label plus
   a same-as-select spacing rhythm gives the empty box some context
   instead of a blank void. */
.recallers-display-name-custom-wrap{
  margin:10px 0 0 2px;
  padding-left:14px;
  border-left:2px solid var(--gray-line);
}
.recallers-display-name-custom-label{
  display:block;margin:0 0 6px;
  color:var(--gray-mid);font-size:.78rem;font-weight:600;
}
.recallers-display-name-custom{
  width:100%;
}