/**
 * DT Community Hub — merged dashboard.
 * Colours and component shapes are carried over from dt-vip-coaching's
 * dashboard CSS so the page looks like itself, not like a new product.
 */

.dtchd{
  --p:#6a4c89; --p-dark:#553b70; --lilac:#a987c2; --lilac-soft:#dec7ed;
  --wash:#faf5ff; --wash2:#f3e8ff; --tint:#f0eaf5;
  --praise:#fdf4ff; --praise-line:#e9d5ff;
  --slate:#475569; --slate2:#64748b; --line:#e2e8f0; --paper:#fff;
  --ok:#1f7a4d; --ok-bg:#eafaf0; --warn:#b26b00; --warn-bg:#fff7e6;
  --alert:#b3245e; --alert-bg:#fff0f5;
  max-width:1180px; margin:0 auto; color:#1f2937;
}
.dtchd *{box-sizing:border-box}

/* ---------- header ---------- */
.dtchd-head{background:linear-gradient(135deg,#fff 0%,#faf7fd 100%);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:18px}
/* Top-aligned, not centred. Centring meant the tallest child set the depth
   and everything else floated in the middle of it. Now the row is as tall as
   its tallest child and no taller, and both sides hang from the top. */
.dtchd-head-top{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;justify-content:space-between}
/* The identity block takes every spare pixel and the stats take none, so the
   stats are pushed hard right regardless of what the theme thinks an <a>
   or a <div> should be. margin-left:auto is belt and braces on top of
   space-between: it holds even if the row loses justify-content. */
.dtchd-id{display:flex;gap:16px;align-items:center;min-width:0;flex:1 1 auto}
.dtchd-stats{margin-left:auto;flex:0 0 auto}
.dtchd-avatar{width:74px;height:74px;border-radius:50%;flex:0 0 74px;background:radial-gradient(circle at 35% 30%,#d8bfe8,#a987c2);display:flex;align-items:center;justify-content:center;font-size:34px;border:3px solid #fff;box-shadow:0 4px 14px rgba(106,76,137,.28);overflow:hidden}
.dtchd-avatar img{width:100%;height:100%;object-fit:cover}
.dtchd-id h2{margin:0 0 6px;font-size:1.42rem;font-weight:800;letter-spacing:-.02em;color:#1f2937;line-height:1.2}
.dtchd-badges{display:flex;gap:6px;flex-wrap:wrap}
.dtchd-badge{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.04em;padding:3px 10px;border-radius:999px;text-transform:uppercase}
.dtchd-badge.vip{background:linear-gradient(135deg,#b8860b,#e6c15a);color:#3a2c00}
.dtchd-badge.tail,.dtchd-badge.tier,.dtchd-badge.standard{background:var(--p);color:#fff}
.dtchd-badge.paws{background:var(--tint);color:var(--p-dark);border:1px solid var(--lilac-soft)}
.dtchd-badge.stage{background:#eaf5f2;color:#2b6a63;border:1px solid #cfe6e0;text-transform:none;letter-spacing:0}

.dtchd-stats{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;align-self:flex-start}
.dtchd-stat{display:flex;flex-direction:column;justify-content:center;gap:2px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 14px;min-width:120px;text-decoration:none;line-height:1.2;transition:transform .15s,box-shadow .15s}
.dtchd-stat:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(106,76,137,.12)}
.dtchd-stat .lab{display:block;font-size:.66rem;line-height:1.3;text-transform:uppercase;letter-spacing:.09em;color:var(--slate2);font-weight:700;white-space:nowrap}
.dtchd-stat .val{display:block;font-size:1.12rem;line-height:1.2;font-weight:800;color:#1f2937}
.dtchd-stat.alert{background:var(--alert-bg);border-color:#f6cfe0}
.dtchd-stat.alert .val{color:var(--alert)}

.dtchd-quick{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px;padding-top:15px;border-top:1px dashed #e6e1ee}
.dtchd-qbtn{display:inline-flex;align-items:center;gap:6px;background:var(--wash);border:1px solid var(--praise-line);border-bottom:2px solid #d4bce5;border-radius:9px;padding:6px 11px;line-height:1.2;font-size:.8rem;font-weight:700;color:var(--slate);text-decoration:none;white-space:nowrap;transition:all .15s}
.dtchd-qbtn:hover{background:var(--wash2);border-color:var(--lilac);color:var(--p);transform:translateY(-1px)}
.dtchd-qbtn .ic{font-size:14px;line-height:1}

/* ---------- the shell on a "my…" page ---------- */
/* ONE header, everywhere. The whole point of the shell is that a member sees
   the same thing on the dashboard and on every "my…" page, so this must NOT
   restyle it — an earlier attempt shrank the avatar and type here and simply
   produced a second, different-looking header, which is the opposite of the
   consistency it exists for. Size and scale are inherited; nothing below
   touches them.

   The only differences are structural: what it sits above, and how wide the
   host page is. --dtchd-shell-max lets a page line the header up with its own
   content column (Dog Journey sets 920px), because a 1180px header floating
   above a 920px body reads as two pages stacked. */
.dtchd-shell{--dtchd-shell-max:1180px;max-width:var(--dtchd-shell-max);margin-bottom:0}
.dtchd-shell .dtchd-head{margin-bottom:22px}
/* Title doubles as the way back, but it must read as a heading — never as a
   link. No underline in any state: themes commonly force one on <a> inside
   headings, so this needs !important to hold. The colour shift and the ↩ on
   hover are the only affordance. */
.dtchd-head-home,
.dtchd-head-home:link,
.dtchd-head-home:visited,
.dtchd-head-home:hover,
.dtchd-head-home:focus,
.dtchd-head-home:active{color:inherit;text-decoration:none!important;border-bottom:0!important;box-shadow:none!important}
.dtchd-head-home:hover{color:var(--p)}
.dtchd-head-back{opacity:0;font-size:.8em;transition:opacity .15s}
.dtchd-head-home:hover .dtchd-head-back{opacity:.55}
/* Keyboard users still need to see where they are. */
.dtchd-head-home:focus-visible{outline:2px solid var(--lilac);outline-offset:3px;border-radius:4px}
/* You are here. Filled rather than outlined, so the row reads as navigation
   instead of a strip of identical buttons. */
.dtchd-qbtn.is-current{background:var(--p);border-color:var(--p-dark);border-bottom-color:var(--p-dark);color:#fff;cursor:default}
.dtchd-qbtn.is-current:hover{background:var(--p);border-color:var(--p-dark);color:#fff;transform:none}
/* Leaves the site — say so before they click, not after. */
.dtchd-qbtn .ext{margin-left:3px;font-size:.85em;opacity:.55}
.dtchd-qbtn.is-ext:hover .ext{opacity:.9}

/* "You're in" — a status, not a control. Looks like the outline button so
   the header lines up, but no hover lift and no pointer. */
.dtc-btn--static{cursor:default;opacity:.85;pointer-events:none}

/* ---------- groups directory (/groups/) ---------- */
.dtchd-dir-head{margin:0 0 16px}
.dtchd-dir-title{margin:0 0 4px;font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:#1f2937}
.dtchd-dir-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;align-items:start}
.dtchd-dir-section h3 .dtchd-dir-count{font-size:.72rem;font-weight:800;color:var(--slate2);background:var(--tint);border-radius:999px;padding:2px 9px}
.dtchd-dir-mine{grid-column:1 / -1}          /* yours span the full width; the rest share a row */
.dtchd-dir-row{padding:11px 0}
.dtchd-dir-row .gpurpose{display:block;font-size:.76rem;color:var(--slate);margin-top:3px;line-height:1.4}
.dtchd-dir-row .gav{width:44px;height:44px;flex-basis:44px;font-size:20px;border-radius:12px}
.dtchd-grp-lock{font-size:1rem;opacity:.5}
@media (max-width:600px){.dtchd-dir-cols{grid-template-columns:1fr}}

/* ---------- pinned resources (group rail) ---------- */
.dtchd-res-list{list-style:none;margin:0;padding:0}
.dtchd-res-list li{border-bottom:1px solid #f1f0f4}
.dtchd-res-list li:last-child{border-bottom:0}
.dtchd-res{display:flex;align-items:center;gap:9px;padding:9px 2px;text-decoration:none;color:#1f2937;font-size:.86rem;font-weight:600;line-height:1.3}
.dtchd-res .ic{flex:0 0 auto;font-size:15px}
.dtchd-res .t{flex:1 1 auto;min-width:0}
.dtchd-res .t small{display:block;font-size:.7rem;font-weight:500;color:var(--slate2);margin-top:1px}
.dtchd-res .go{flex:0 0 auto;color:var(--lilac);opacity:0;transition:opacity .15s,transform .15s}
a.dtchd-res:hover{color:var(--p)}
a.dtchd-res:hover .go{opacity:1;transform:translateX(2px)}
.dtchd-res.is-locked{color:var(--slate2);font-weight:500;cursor:default}

/* ---------- split ---------- */
.dtchd-split{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:18px;align-items:start}
.dtchd-rail{display:flex;flex-direction:column;gap:14px}
.dtchd-rail-side{position:sticky;top:14px}  /* ui.js lowers `top` below zero for tall rails so they lock at the END, not the top */
.dtchd-rail-mobile{display:none}     /* desktop: groups/events live in the side rail */

.dtchd-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.dtchd-card h3{margin:0 0 12px;font-size:.98rem;font-weight:800;letter-spacing:-.01em;color:#1f2937;display:flex;align-items:center;justify-content:space-between;gap:8px}
.dtchd-card h3 .more{font-size:.72rem;font-weight:700;color:var(--p);text-transform:uppercase;letter-spacing:.06em;text-decoration:none}
.dtchd-muted{color:var(--slate2);font-size:.85rem;margin:0 0 10px}
.dtchd-empty{background:var(--paper);border:1px dashed #d9d3e2;border-radius:14px;padding:28px;text-align:center;color:var(--slate2)}
.dtchd-empty .small{font-size:.85rem;margin:6px 0 0}

/* ---------- composer ---------- */
.dtchd-composer{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:14px}
/* "Posting to <group> · members only" — the line that says where it lands. */
.dtchd-composer-to{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-2px 0 10px;padding-bottom:9px;border-bottom:1px dashed #ebe6f1;font-size:.8rem;color:var(--slate)}
.dtchd-composer-to .lab{text-transform:uppercase;letter-spacing:.07em;font-size:.64rem;font-weight:800;color:var(--slate2)}
.dtchd-composer-groupname{color:var(--p);font-weight:800}
.dtchd-composer-group{font:inherit;font-weight:700;color:var(--p);background:var(--wash);border:1px solid var(--praise-line);border-radius:8px;padding:3px 26px 3px 9px;max-width:100%}
.dtchd-composer-priv{margin-left:auto;font-size:.72rem;color:var(--slate2);white-space:nowrap}
.dtchd-composer .row{display:flex;gap:11px;align-items:flex-start}
.dtchd-mini-av{width:38px;height:38px;border-radius:50%;flex:0 0 38px;background:radial-gradient(circle at 35% 30%,#d8bfe8,#a987c2);display:flex;align-items:center;justify-content:center;font-size:18px;overflow:hidden}
.dtchd-mini-av img{width:100%;height:100%;object-fit:cover}
.dtchd-composer textarea{flex:1;border:1px solid #ddd;border-radius:10px;padding:10px 13px;font-size:.92rem;font-family:inherit;resize:vertical;min-height:44px}
.dtchd-composer textarea:focus{border-color:var(--lilac);outline:2px solid var(--lilac-soft);outline-offset:1px}
.dtchd-composer .acts{display:flex;justify-content:space-between;align-items:center;margin-top:11px;gap:10px;flex-wrap:wrap}
.dtchd-firstpost{font-size:.73rem;color:var(--slate2);margin:9px 0 0}

/* ---------- tabs ---------- */
.dtchd-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.dtchd-pill{font-size:.78rem;font-weight:700;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--slate);text-decoration:none}
.dtchd-pill:hover{border-color:var(--lilac);color:var(--p)}
.dtchd-pill.on{background:var(--p);border-color:var(--p);color:#fff}
.dtchd-pill.wins.on{background:var(--ok);border-color:var(--ok)}

/* ---------- wins tab ---------- */
.dtchd-wins{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.dtchd-win{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.dtchd-win-img{height:130px;background-size:cover;background-position:center;background-color:var(--tint)}
.dtchd-win-body{padding:12px 14px}
.dtchd-win-body h4{margin:0 0 6px;font-size:.92rem;font-weight:800}
.dtchd-win-body p{margin:0 0 8px;font-size:.85rem;color:var(--slate)}
.dtchd-win-by{font-size:.73rem;color:var(--slate2)}

/* ---------- rail items ---------- */
.dtchd-grp{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #f1f0f4;text-decoration:none;color:inherit}
.dtchd-grp:last-of-type{border-bottom:0}
.dtchd-grp .gav{width:36px;height:36px;border-radius:10px;flex:0 0 36px;display:flex;align-items:center;justify-content:center;font-size:17px;background:var(--tint)}
.dtchd-grp .gbody{min-width:0}
.dtchd-grp .gname{display:block;font-weight:700;font-size:.85rem;color:#1f2937;line-height:1.25}
.dtchd-grp .gmeta{display:block;font-size:.72rem;color:var(--slate2)}
.dtchd-grp:hover .gname{color:var(--p)}
.dtchd-invite{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:var(--wash);border:1px solid var(--praise-line);border-radius:10px;padding:9px 12px;margin-bottom:8px;font-size:.82rem}

.dtchd-ev{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid #f1f0f4;text-decoration:none;color:inherit}
.dtchd-ev:last-of-type{border-bottom:0}
.dtchd-ev .cal{width:42px;flex:0 0 42px;border:1px solid var(--praise-line);border-radius:9px;overflow:hidden;text-align:center;background:#fff}
.dtchd-ev .cal .m{display:block;background:var(--p);color:#fff;font-size:.58rem;font-weight:800;letter-spacing:.07em;padding:2px 0}
.dtchd-ev .cal .d{display:block;font-size:1.05rem;font-weight:800;color:#1f2937;padding:1px 0 3px}
.dtchd-ev .evname{display:block;font-weight:700;font-size:.84rem;color:#1f2937;line-height:1.3}
.dtchd-ev .evmeta{display:block;font-size:.72rem;color:var(--slate2)}
.dtchd-ev:hover .evname{color:var(--p)}
.dtchd-ev .cal.any .m{background:var(--slate2)}
.dtchd-ev .cal.any .d{font-size:.9rem;color:var(--p)}

.dtchd-blog{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid #f1f0f4;text-decoration:none;color:inherit}
.dtchd-blog:last-of-type{border-bottom:0}
.dtchd-blog .bthumb{width:52px;height:44px;flex:0 0 52px;border-radius:8px;background:linear-gradient(130deg,#e6dcf2,#cfe4de);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;font-size:19px}
.dtchd-blog .btitle{display:block;font-weight:700;font-size:.82rem;color:#1f2937;line-height:1.32}
.dtchd-blog .bmeta{display:block;font-size:.7rem;color:var(--slate2);margin-top:2px}
.dtchd-blog:hover .btitle{color:var(--p)}
.dtchd-src{font-size:.68rem;color:var(--slate2);margin:10px 0 0;font-style:italic}

.dtchd-praise{background:var(--praise);border-color:var(--praise-line)}

.dtchd-progress{height:7px;background:#efe9f4;border-radius:4px;overflow:hidden;margin:8px 0 5px;display:block}
.dtchd-progress span{display:block;height:100%;background:var(--lilac);border-radius:4px}
.dtchd-progress.small{flex:1;margin:0}
.dtchd-progline{display:flex;justify-content:space-between;font-size:.75rem;color:var(--slate2)}
.dtchd-course{display:flex;align-items:center;gap:9px;padding:7px 0;text-decoration:none;color:inherit}
.dtchd-course .cname{flex:0 0 40%;font-size:.8rem;font-weight:700;color:#1f2937}
.dtchd-course .cpct{font-size:.74rem;color:var(--slate2);min-width:34px;text-align:right}
.dtchd-course:hover .cname{color:var(--p)}

/* ---------- heartbeat ---------- */
.dtchd-heart-nums{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.dtchd-heart-nums .big{font-size:2.1rem;font-weight:800;color:var(--p);line-height:1}
/* "/10" rides with the number so the scale is never in doubt, but quietly. */
.dtchd-heart-nums .big .of{font-size:.94rem;font-weight:700;color:var(--lilac);margin-left:1px}
.dtchd-heart-nums .unit{font-size:.76rem;color:var(--slate2);line-height:1.35}
.dtchd-spark{display:flex;align-items:flex-end;gap:5px;height:56px;padding:0 2px}
.dtchd-spark .bar{position:relative;flex:1;background:linear-gradient(180deg,var(--lilac),#cbb2df);border-radius:3px 3px 0 0;min-height:4px}
.dtchd-spark .bar .me{position:absolute;left:-2px;right:-2px;height:3px;background:var(--p-dark);border-radius:2px}
/* A day with no check-ins: a stub on the baseline, so the week keeps its
   shape and a gap reads as "nobody" rather than as a missing chart. */
.dtchd-spark .bar.empty{height:4px;background:repeating-linear-gradient(90deg,#e4dcee 0 3px,transparent 3px 6px)}
/* A 30-day window needs thinner gaps or the bars vanish. */
.dtchd-spark.dense{gap:2px}
.dtchd-spark.dense .bar{border-radius:2px 2px 0 0}
.dtchd-spark-cap{margin:6px 0 0;font-size:.68rem;letter-spacing:.02em;text-transform:uppercase;color:var(--slate2);font-weight:700}
.dtchd-heart-nums .big.none{color:var(--lilac);font-weight:700}
/* Only ever seen by someone who can act on it. */
.dtchd-admin-note{margin:12px 0 0;padding:8px 10px;background:var(--warn-bg);border:1px dashed #f0d9a8;border-radius:8px;font-size:.72rem;line-height:1.4;color:var(--warn)}
.dtchd-heart-you{margin:10px 0 0;font-size:.78rem;color:var(--slate);font-weight:600}

/* "Add your dog first" reads as a prompt, not a celebration — so it drops the
   praise pink for a neutral, quieter panel. */
.dtchd-winbar-empty{background:var(--wash);border-color:var(--line)}

/* Praise card is now a bare call to action — no heading, no paragraph — so it
   wants less height than a card with content in it. */
.dtchd-praise-cta{padding:14px}
.dtchd-praise-cta>.dtc-btn{margin:0}

/* The check-in. A button in the card; the form itself opens in a dialog,
   never on its own. */
.dtchd-pulse-open{display:flex;align-items:center;gap:7px;width:100%;margin-top:12px;padding:9px 12px;
  background:var(--wash);border:1px solid var(--praise-line);border-bottom:2px solid #d4bce5;border-radius:10px;
  font:inherit;font-size:.79rem;font-weight:700;color:var(--p);cursor:pointer;text-align:left;transition:all .15s}
.dtchd-pulse-open:hover{background:var(--wash2);border-color:var(--lilac);transform:translateY(-1px)}
.dtchd-pulse-open.is-done{background:var(--ok-bg);border-color:#bfe6cf;border-bottom-color:#a5d9bb;color:var(--ok)}
.dtchd-pulse-open.is-done:hover{background:#e0f6ea;border-color:#8ecfab}

/* The dialog is a flex column so the body scrolls and the panel never grows
   taller than the screen. Only [open] gets display:flex — setting it on the
   element itself would defeat the UA's display:none and show it when shut. */
.dtchd-pulse-dlg{border:0;padding:0;width:min(640px,calc(100vw - 24px));max-width:none;
  max-height:min(88vh,920px);border-radius:18px;overflow:hidden;
  background:var(--paper);color:inherit;box-shadow:0 24px 60px rgba(31,41,55,.3)}
.dtchd-pulse-dlg[open]{display:flex;flex-direction:column}
.dtchd-pulse-dlg::backdrop{background:rgba(31,41,55,.55)}
.dtchd-pulse-x{position:absolute;top:10px;right:12px;z-index:3;width:32px;height:32px;padding:0;
  background:rgba(255,255,255,.9);border:0;border-radius:50%;font-size:22px;line-height:1;color:var(--slate);
  cursor:pointer;transition:background .15s}
.dtchd-pulse-x:hover{background:#fff;color:var(--p)}

/* dt-vip-coaching's widget sets its OWN two widths — .dt-vip-pulse-inline is
   max-width:420px and .dt-vip-pulse-graph is max-width:700px — so dropped in
   side by side they render as two different-width blocks with the header
   floating short of the edge. Force both to the dialog's width. */
.dtchd-pulse-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 0 4px}
/* Belt and braces. The widget ships its own <style> and <script> as siblings
   of the markup, and a `> *` rule here would give them display:block and
   print the stylesheet on screen as text. Never blanket-style these children:
   name the blocks instead. */
.dtchd-pulse-body>style,.dtchd-pulse-body>script,.dtchd-pulse-body>link{display:none!important}
.dtchd-pulse-body .dt-vip-pulse-inline,
.dtchd-pulse-body .dt-vip-pulse-graph{width:auto!important;max-width:none!important;margin:0!important;
  border-radius:0!important;border-left:0!important;border-right:0!important;box-shadow:none!important}
.dtchd-pulse-body .dt-vip-pulse-graph{border-top:1px solid var(--line)!important;padding:14px 16px 18px!important}
.dtchd-pulse-body canvas,.dtchd-pulse-body svg,.dtchd-pulse-body img{max-width:100%!important;height:auto}
.dtchd-pulse-body table{display:block;overflow-x:auto}

@media (max-width:600px){
  /* Near enough full-screen on a phone: the form plus the graph is a tall
     panel, and a floating card with a hairline of backdrop round it is worse
     than simply owning the screen. */
  .dtchd-pulse-dlg{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0;margin:0}
  .dtchd-pulse-x{top:8px;right:8px;width:36px;height:36px}
  .dtchd-pulse-body .dt-vip-pulse-graph{padding:12px 12px 16px!important}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .dtchd-split{grid-template-columns:1fr}
  .dtchd-rail-side{position:static}
  /* Groups and What's On move ABOVE the feed: an infinite feed buries
     anything placed under it, and those two are the navigation. */
  .dtchd-rail-mobile{display:flex}
  .dtchd-hide-mobile{display:none}
  .dtchd-head-top{flex-direction:column;align-items:flex-start}
  .dtchd-stats{width:100%;margin-left:0}
  .dtchd-stat{flex:1}
}
@media (max-width:600px){
  .dtchd-head{padding:16px}
  .dtchd-id h2{font-size:1.15rem}
  .dtchd-avatar{width:58px;height:58px;flex:0 0 58px;font-size:26px}
  .dtchd-stat{min-width:calc(50% - 5px)}
  .dtchd-qbtn{font-size:.75rem;padding:5px 9px}
}

/* ---------- group page (same shell as the dashboard) ---------- */
.dtchd-crumb{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.dtchd-back{font-size:.82rem;font-weight:700;color:var(--p);text-decoration:none}
.dtchd-back:hover{text-decoration:underline}
.dtchd-crumb-chips{display:flex;gap:6px;margin-left:auto}
.dtchd-chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:.74rem;font-weight:700;color:var(--slate)}
.dtchd-crumb-av img,.dtchd-crumb-av .avatar{width:28px;height:28px;border-radius:50%;display:block;object-fit:cover}

.dtchd-group-head{background:linear-gradient(135deg,#fff 0%,#f7f3fc 100%)}
/* Cover banner: the retired theme template's one good idea. The head card
   gets a fixed-height photo strip on top; the identity row sits below it. */
.dtchd-group-head.has-banner{padding-top:0;overflow:hidden}
.dtchd-group-banner{height:180px;margin:0 -24px 16px;background:#e9e4f0 center/cover no-repeat;position:relative}
.dtchd-group-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.28) 100%)}
@media (max-width:600px){.dtchd-group-banner{height:120px;margin:0 -16px 12px}}
.dtchd-group-av{border-radius:18px}
.dtchd-group-av img{border-radius:15px}
.dtchd-group-purpose{margin:8px 0 0;font-size:.86rem;color:var(--slate);max-width:60ch}
.dtchd-group-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dtchd-faces{display:flex}
.dtchd-face{margin-left:-8px}
.dtchd-face:first-child{margin-left:0}
.dtchd-face img,.dtchd-face .avatar,.dtchd-face .dtch-mem-photo{width:28px;height:28px;border-radius:50%;border:2px solid #fff;display:block;object-fit:cover}
.dtchd-face .dtch-mem-initials{width:28px;height:28px;font-size:11px;border:2px solid #fff}

.dtchd-about{font-size:.88rem;color:var(--slate);line-height:1.6}
.dtchd-about p:first-child{margin-top:0}
.dtchd-about p:last-child{margin-bottom:0}

.dtchd-locked{padding:44px 28px}
.dtchd-lock-icon{font-size:38px;margin:0 0 8px}
.dtchd-mod{background:#f6fbfa;border-color:#cfe6e0}
.dtchd-mod-alert{margin:0 0 10px;font-size:.85rem;font-weight:700;color:#b26b00}

/* The group page's member grid is narrower than the standalone one. */
.dtchd-group .dtch-mem-grid{grid-template-columns:1fr}
.dtchd-group .dtch-mem{padding:8px 10px}

/* ---------- public community page ---------- */
.dtchd-hero{background:linear-gradient(135deg,#6a4c89 0%,#3f2c54 100%);color:#fff;border-radius:18px;padding:38px 32px;margin-bottom:18px;text-align:center}
.dtchd-hero-brand{margin-bottom:14px}
.dtchd-hero-logo{max-height:56px;width:auto;display:inline-block;filter:brightness(0) invert(1)}
.dtchd-hero-mark{font-size:40px;display:inline-block}
.dtchd-hero-title{margin:0 0 10px;font-size:clamp(1.6rem,3.6vw,2.3rem);font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.12}
.dtchd-hero-sub{margin:0 auto;max-width:56ch;color:rgba(255,255,255,.86);font-size:1rem;line-height:1.6}
.dtchd-hero-stats{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:20px;font-size:.86rem;color:rgba(255,255,255,.75)}
.dtchd-hero-stats strong{display:block;font-size:1.5rem;color:#fff;font-weight:800;line-height:1.1}
.dtchd-hero-cta{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.dtchd-hero-cta .dtc-btn--outline{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff}
.dtchd-hero-cta .dtc-btn--outline:hover{background:rgba(255,255,255,.12)}
.dtchd-hero-note{margin:14px 0 0;font-size:.78rem;color:rgba(255,255,255,.6)}

.dtchd-feed-title{margin:0 0 14px;font-size:1.1rem;font-weight:800;letter-spacing:-.01em}
.dtchd-joinbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--tint);border:1px solid var(--lilac-soft);border-radius:14px;padding:16px 20px;margin-top:16px}
.dtchd-joinbar p{margin:0;font-size:.9rem;color:var(--p-dark)}
/* Group avatar from its featured image, when it has one. */
.dtchd-grp .gav.gav-img{background:#e9e4f0 center/cover no-repeat}
.dtchd-grp .gav-link{display:contents}
/* Member faces on the right of a joined group — three, overlapped, small. */
.dtchd-grp-faces{margin-left:auto;flex:0 0 auto}
.dtchd-grp-faces .dtchd-face img,.dtchd-grp-faces .dtchd-face .avatar,.dtchd-grp-faces .dtchd-face .dtch-mem-photo{width:22px;height:22px}
.dtchd-grp-faces .dtchd-face .dtch-mem-initials{width:22px;height:22px;font-size:9px}
.dtchd-grp-faces .dtchd-face{margin-left:-7px}
.dtchd-grp-faces .dtchd-face:first-child{margin-left:0}
/* The divider between "in" and "could join". */
.dtchd-grp-sub{margin:10px 0 2px;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--slate2)}
.dtchd-grp .gmeta strong{color:var(--p);font-weight:700}
.dtchd-grp-static{cursor:default}
.dtchd-grp-static .gav{text-decoration:none}
.dtchd-grp-static .gname{text-decoration:none;color:#1f2937}
.dtchd-grp-static .gname:hover{color:var(--p)}
.dtchd-grp-act{margin-left:auto}
.dtchd-why{list-style:none;margin:0;padding:0}
.dtchd-why li{position:relative;padding:5px 0 5px 22px;font-size:.86rem;color:var(--slate)}
.dtchd-why li:before{content:"🐾";position:absolute;left:0;font-size:.78rem}

@media (max-width:600px){
  .dtchd-hero{padding:26px 18px;border-radius:14px}
  .dtchd-hero-stats{gap:16px}
  .dtchd-hero-stats strong{font-size:1.25rem}
}

/* ---------- share a win ---------- */
.dtchd-winbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--praise);border:1px solid var(--praise-line);border-radius:14px;padding:14px 18px;margin-bottom:14px}
.dtchd-winbar strong{display:block;font-size:.95rem;color:var(--p-dark)}
.dtchd-winbar span{display:block;font-size:.8rem;color:var(--slate2);margin-top:2px}
.dtchd-pending{background:var(--warn-bg);border:1px solid #f0d9a8;border-radius:12px;padding:14px 18px;margin-top:14px}
.dtchd-pending p{margin:0;color:#7a5200;font-size:.88rem}
.dtchd-pending .small{font-size:.8rem;margin-top:3px;color:#8a6320}
/* dt-vip-coaching's form ships with inline styles; just give it room here. */
#dt-praise-inline-container{margin-bottom:16px}

/* ---------- the Praise form -------------------------------------------
   dt-vip-coaching's form markup uses .dt-form-* classes that are styled by
   the CLASSIC dashboard's inline CSS. That stylesheet isn't loaded here, so
   without these rules the form renders raw — labels beside inputs, a
   two-line textarea, an unstyled file button. Scoped to the container so we
   only dress this one form and never leak into the rest of the page.        */
#dt-praise-inline-container{
  border:1px solid var(--praise-line)!important;
  border-radius:14px!important;
  box-shadow:none!important;
  padding:20px!important;
  margin-bottom:16px!important;
}
#dt-praise-inline-container .dt-form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
#dt-praise-inline-container .dt-form-group:last-of-type{margin-bottom:0}
#dt-praise-inline-container .dt-form-label{
  font-weight:700;font-size:.78rem;color:var(--slate);
  text-transform:uppercase;letter-spacing:.05em;margin:0;
}
#dt-praise-inline-container .dt-form-input,
#dt-praise-inline-container .dt-form-select,
#dt-praise-inline-container input[type=file],
#dt-praise-inline-container select,
#dt-praise-inline-container textarea{
  width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:9px;
  font-size:.92rem;font-family:inherit;background:#fff;box-sizing:border-box;
}
#dt-praise-inline-container textarea,
#dt-praise-inline-container textarea.dt-form-input{min-height:86px;resize:vertical;line-height:1.5}
#dt-praise-inline-container .dt-form-input:focus,
#dt-praise-inline-container .dt-form-select:focus,
#dt-praise-inline-container select:focus,
#dt-praise-inline-container textarea:focus{
  border-color:var(--lilac);outline:2px solid var(--lilac-soft);outline-offset:1px;
}
/* The file input: make the browser's button look deliberate. */
#dt-praise-inline-container input[type=file]{padding:8px 10px!important;cursor:pointer}
#dt-praise-inline-container input[type=file]::file-selector-button{
  border:0;background:var(--tint);color:var(--p-dark);font-weight:700;font-size:.82rem;
  padding:7px 14px;border-radius:7px;margin-right:12px;cursor:pointer;font-family:inherit;
}
#dt-praise-inline-container input[type=file]::file-selector-button:hover{background:var(--wash2)}
#dt-praise-inline-container .dt-btn-primary{
  background:var(--p);color:#fff;border:0;border-radius:9px;
  padding:11px 22px;font-size:.9rem;font-weight:700;cursor:pointer;
  font-family:inherit;transition:background .15s,transform .15s;
}
#dt-praise-inline-container .dt-btn-primary:hover{background:var(--p-dark);transform:translateY(-1px)}
#dt-praise-inline-container .dt-btn-primary:disabled{opacity:.6;cursor:default;transform:none}
/* Two fields side by side on desktop, stacked on a phone. */
@media (max-width:600px){
  #dt-praise-inline-container form > div[style*="grid"]{grid-template-columns:1fr!important}
}

/* CLASS COLLISION: dt-contact's front.css ships its own site-wide
   `.dtc-btn{width:100%;padding:16px;font-size:1.1rem;border-radius:12px}` for
   its contact form, and it lands on every hub button too — that is what
   turned the group composer's "Add photo" / "Post to …" into two full-width
   slabs. Re-assert the hub's own button inside the hub scope with a more
   specific selector (wins regardless of load order); the contact form's
   own scoped rule is untouched. */
.dtchd .dtc-btn,.dtchd-composer .dtc-btn{width:auto;flex:0 0 auto;display:inline-flex;padding:9px 16px;font-size:.88rem;border-radius:999px;line-height:1.2}
/* ui.css paints .dtc-btn with var(--dtc-accent) but nothing ever defines it, so
   inside a pale card the primary button was transparent with white text
   ("Create your free account" vanished). Paint it explicitly here. */
.dtchd{--dtc-accent:var(--p)}
.dtchd .dtc-btn--primary,.dtchd-composer .dtc-btn--primary{background:var(--p);color:#fff;border-color:var(--p)}
.dtchd .dtc-btn--primary:hover,.dtchd-composer .dtc-btn--primary:hover{background:var(--p-dark);border-color:var(--p-dark);filter:none}
.dtchd .dtc-btn--sm,.dtchd-composer .dtc-btn--sm{padding:6px 13px;font-size:.8rem}
.dtchd .dtc-btn--outline,.dtchd-composer .dtc-btn--outline{background:#fff;color:var(--p);border:1px solid var(--praise-line)}
.dtchd .dtc-btn--outline:hover,.dtchd-composer .dtc-btn--outline:hover{background:var(--wash);filter:none}
/* Composer: photo on the left, post on the right, one line — like everywhere else. */
.dtchd-composer .acts{justify-content:space-between;flex-wrap:nowrap;margin-top:9px}
.dtchd-composer .acts .dtc-btn{white-space:nowrap}
@media (max-width:480px){.dtchd-composer .acts{flex-wrap:wrap}.dtchd-composer .acts .dtc-btn{flex:1 1 auto}}

/* The theme stretches bare <button> elements inside content areas, which made
   "Close form" span the whole bar. Keep these two sized to their label on
   desktop; full width is still right on a phone. */
.dtchd-winbar .dtc-btn,
#dt-praise-inline-container .dt-btn-primary{width:auto;flex:0 0 auto;align-self:center}
.dtchd-winbar{align-items:center}
.dtchd-winbar > div{flex:1 1 260px;min-width:0}
@media (max-width:600px){
  .dtchd-winbar .dtc-btn,
  #dt-praise-inline-container .dt-btn-primary{width:100%}
  #dt-praise-inline-container form > div[style*="text-align"]{text-align:stretch!important}
}

/* Group "What's on" — empty state + the time-zone line under dated rows. */
.dtchd-group-events .dtchd-ev-empty{margin:0;font-size:.82rem}
.dtchd-group-events .dtchd-ev-tz{margin:8px 0 0;font-size:.7rem}

/* Public (logged-out) header — the member header's shape with the site's mark
   in the avatar spot and the numbers as badges. No buttons by design. */
.dtchd-avatar-brand{background:#fff;border-color:var(--praise-line)}
.dtchd-avatar-brand img{object-fit:contain;padding:9px}
.dtchd-head-sub{margin:8px 0 0;font-size:.86rem;line-height:1.45;color:var(--slate);max-width:60ch}
.dtchd-why-cta{display:flex;margin-top:12px}
.dtchd-why-login{margin:10px 0 0;font-size:.78rem;color:var(--slate2);text-align:center}
.dtchd-why-login a{color:var(--p);font-weight:700}
/* The full page inside the old 66% column would be squashed — let it out. */
.wp-block-column > .dtchd-public{min-width:0}

/* Upgrade nudge (free members) shares the Join-free look. */
.dtchd-upgrade .dtchd-why li::before{content:"\2726  "}

/* Showcase — one item at a time, cycling. */
.dtchd-showcase .dtchd-show-track{position:relative}
.dtchd-show-slide{display:block;text-decoration:none;color:inherit;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;transition:box-shadow .15s}
/* display:block above would beat the UA's [hidden]{display:none} — every slide showed at once. */
.dtchd-show-slide[hidden]{display:none}
.dtchd-show-slide:hover{box-shadow:0 8px 20px rgba(106,76,137,.14)}
.dtchd-show-img{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:linear-gradient(130deg,#e6dcf2,#cfe4de) center/cover no-repeat;font-size:34px}
.dtchd-show-kind{display:inline-block;margin:10px 12px 0;font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--tint);color:var(--p-dark)}
.dtchd-show-kind--event{background:#eaf5f2;color:#2b6a63}
.dtchd-show-kind--webinar{background:#fff7e6;color:#8a5200}
.dtchd-show-title{display:block;margin:6px 12px 0;font-weight:700;font-size:.9rem;line-height:1.3;color:#1f2937}
.dtchd-show-slide:hover .dtchd-show-title{color:var(--p)}
.dtchd-show-meta{display:block;margin:3px 12px 12px;font-size:.76rem;color:var(--slate2)}
.dtchd-show-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.dtchd-show-btn{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--p);font-size:18px;line-height:1;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center}
.dtchd-show-btn:hover{background:var(--wash)}
.dtchd-show-dots{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.dtchd-show-dot{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:var(--lilac-soft);cursor:pointer}
.dtchd-show-dot.is-on{background:var(--p);width:18px;border-radius:999px}

/* PAWS card */
.dtchd-paws-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.dtchd-paws-acts .dtc-btn{flex:1 1 auto;justify-content:center}

/* ---------- Featured strip (above the feed) ---------- */
.dtchd-featured{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 14px 14px;margin-bottom:14px}
.dtchd-featured-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dtchd-featured-head h3{margin:0;font-size:1rem;font-weight:800;color:#1f2937}
.dtchd-featured-nav button{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--p);font-size:17px;line-height:1;cursor:pointer;padding:0;margin-left:4px}
.dtchd-featured-nav button:hover{background:var(--wash)}
.dtchd-featured-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}
.dtchd-featured-track::-webkit-scrollbar{display:none}
.dtchd-feat{flex:0 0 46%;min-width:220px;max-width:300px;scroll-snap-align:start;display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;transition:box-shadow .15s,transform .15s}
.dtchd-feat:hover{box-shadow:0 8px 20px rgba(106,76,137,.14);transform:translateY(-1px)}
.dtchd-feat-top{display:flex;gap:8px;align-items:center;padding:10px 12px 0}
.dtchd-feat-av{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 34px;background:#f3e8ff}
.dtchd-feat-name{display:block;font-weight:700;font-size:.82rem;line-height:1.2;color:#1f2937}
.dtchd-feat-date{display:block;font-size:.7rem;color:var(--slate2)}
.dtchd-feat-text{display:block;padding:8px 12px 10px;font-size:.82rem;line-height:1.35;color:var(--slate);flex:1 1 auto}
.dtchd-feat-img{display:block;aspect-ratio:4/3;background:linear-gradient(130deg,#e6dcf2,#cfe4de) center/cover no-repeat}
@media (max-width:600px){.dtchd-feat{flex-basis:78%}}
/* the post a featured card jumped to */
.dtc-post.is-flash{animation:dtchd-flash 1.6s ease-out}
@keyframes dtchd-flash{0%{box-shadow:0 0 0 3px var(--lilac,#a987c2)}100%{box-shadow:0 0 0 0 rgba(169,135,194,0)}}

/* Composer photo preview (file picked from the device) */
.dtchd-composer-preview{display:flex;align-items:center;gap:8px;margin-top:10px}
.dtchd-composer-preview img{max-width:120px;max-height:90px;border-radius:8px;object-fit:cover;border:1px solid var(--line)}
.dtchd-composer-unpick{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:#fff;color:#b32d2e;font-weight:700;cursor:pointer;padding:0;line-height:1}