/* Communities, threads, posts and skill discussions: /communities, /c, /posts, /skills, /feed, /reviews, /me/saved.
   Thread rows are in site.css (member profiles and saved items show them too).
   Loaded after site.css, in the head, only on its own routes (Operations/AreaStyles.cs), so pages that
   don't use these rules never download them. Same tokens as site.css; no inline styles (CSP). Rules here were moved
   from site.css by page usage: a rule belongs here only when every page that uses it loads this file. */
.proof{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 11px;font-size:var(--fs-small);font-weight:500;background:var(--ice);color:var(--navy)}
.proof::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--good);flex:none}
/* The communities (calm batch G, #190): each a tile on its area's brand tint, as the Browse panel draws an area: its icon, its name,
   what people share there and, once there's something to count, its counts. Three across on a desktop, two below 1100 px and on
   a phone, as the phone menu's tiles. A short last row fills its width, so the list never ends on a hole (five communities drew
   four and one): on a desktop two left over take half each and one left over pairs the last four; below, an odd last tile spans. */
.community-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.community-grid>li:nth-child(odd):last-child{grid-column:1/-1}
@media (min-width:1101px){
  .community-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .community-grid>li,.community-grid>li:nth-child(odd):last-child{grid-column:span 2}
  .community-grid:has(>li:nth-child(3n+2):last-child)>li:nth-last-child(-n+2),
  .community-grid:has(>li:nth-child(3n+1):last-child)>li:nth-last-child(-n+4){grid-column:span 3}
}
/* The calm site (CALM-10, #171): one line above the list while nobody has posted, instead of a "new" line on every card. */
.communities-new{margin:0 0 16px;color:var(--soft)}
/* The community's name stretches over its tile, so the whole tile opens it (layout review G1-13); the tile's own links sit
   above (site.css, .community-card .row-actions). Specific enough to beat the phone tap-area rule for a.row-title. */
.community-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:22px 22px 24px;border:1px solid transparent;border-radius:24px;transition:border-color .15s}
.community-card:hover{border-color:var(--navy)}
.community-card:has(a.row-title:focus-visible){outline:var(--ring-line);outline-offset:3px;box-shadow:var(--ring)}   /* the card rings only for keyboard focus on its name, never a click or its own links (layout batch 2 review, L9) */
.community-ic{display:block;color:var(--navy)}
.community-ic svg{width:48px;height:48px;margin:0 0 12px -2px}
.community-card a.row-title{position:static;font-family:var(--display);font-weight:600;font-size:var(--h3);line-height:1.2;color:var(--navy);text-decoration:none}
.community-card a.row-title:focus-visible{outline:none}
.community-card a.row-title::after{content:"";position:absolute;inset:0;border-radius:inherit}
.community-card-about{margin:4px 0 0;color:var(--ink);line-height:1.45}
.community-card .meta{margin:6px 0 0}
@media (max-width:760px){
  .community-grid{gap:10px}
  .community-card{padding:16px 14px 18px;border-radius:20px}
  .community-ic svg{width:40px;height:40px;margin-bottom:8px}
  .community-card a.row-title{font-size:var(--fs-body)}
  .community-card-about{display:none}
  .community-layout .thread-excerpt{display:none}   /* a phone's thread row: tags, title, who and when */
  /* A result on a phone leads with the result (the lead's reading-page rule, 21 Oct): the skill's header keeps its name, maker and
     tabs; what it does, its price and its button are in "Try it yourself" after the post, and its apps, follow and save are on the
     skill's own page (the code review, L2). */
  .result-wrap>.hub-head .hub-promise,.result-wrap>.hub-head .hub-apps,.result-wrap>.hub-head .hub-social,.result-wrap>.hub-head .hub-primary{display:none}   /* a phone's tile is its icon, name and counts, as the phone menu's (words a screen, #190) */
}
/* "How communities work", folded under the list (CALM-10): the v2 fold, a line above and below and its sign at the end. */
.community-how{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}   /* the page's width, like the tiles above it */
.community-how>summary{min-height:56px;display:flex;align-items:center;font-weight:600;color:var(--navy)}
/* A community's page (calm batch G, #190): the v2 head (site.css .pg-head) at the reading width; with nothing posted yet, the
   drawing small beside its one line, then the skills for its area under the section's heading. */
.community-head{padding-bottom:clamp(20px,3vw,40px)}
.community-empty{grid-template-columns:minmax(0,120px) minmax(0,1fr);padding:clamp(20px,2.5vw,32px)}
.community-empty .art-empty{max-width:120px}
.community-empty p{margin:0}
.community-skills-head{margin-top:clamp(40px,5vw,64px)}
@media (max-width:760px){
  .community-empty{grid-template-columns:96px minmax(0,1fr);align-items:center}
  .community-empty .art-empty{max-width:96px}
}
.community-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(24px,4vw,40px);align-items:start}
@media (max-width:900px){
  .community-layout{grid-template-columns:1fr}
}
.community-side{display:grid;gap:16px}
/* Nothing beside the threads yet (no live hour, moderators, rules, makers or requests): the main column takes the width, never a
   hollow column beside it (calm batch G, #190). */
/* A phone-only care line (.only-small: the head says it above a phone) is nothing beside the threads on a wider screen (design-sweep-d: the empty
   community kept a hollow 320 px column for it). */
.community-layout:not(:has(>.community-side>:not(.only-small))){grid-template-columns:minmax(0,1fr)}   /* one level of :has() (code review L1) */
.community-side:not(:has(*)){display:none}
/* Three sort pills fit a 360 px phone (design-sweep-d2: they stuck out by 1 px once a community had four threads). */
@media (max-width:400px){.community-layout .head-row .filters a{padding-inline:12px}}
@media (min-width:601px){.community-side:not(:has(>:not(.only-small))){display:none}}
.rules{margin:10px 0 0;padding-left:20px;display:grid;gap:6px;font-size:var(--fs-body)}
.thread{padding-top:20px}
/* A thread's title is someone's question, read like a page's section: the v2 section size (calm batch G, #190), as /login's. */
.thread-title{font-size:var(--h2);margin-top:10px;text-wrap:balance}
.thread-body{font-size:var(--fs-body);max-width:68ch}
.reply-head{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-small)}
.reply-head .badge,.reply-head .proof{margin-left:4px;vertical-align:middle}
.skill-chip{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:4px 14px 4px 4px;background:var(--mist);color:var(--navy);text-decoration:none;font-size:var(--fs-small);font-weight:500}
.skill-chip .ic{width:28px;height:28px;border-radius:50%}
.skill-chip .ic svg{width:18px;height:18px}
.post-foot{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.vote{display:inline}
.vote-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:5px 14px 5px 10px;background:var(--white);color:var(--navy);font-size:var(--fs-small);font-weight:500;text-decoration:none;cursor:pointer}
.vote-btn::before{content:"";width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:9px solid var(--soft)}
.vote-btn:hover{border-color:var(--navy)}
.vote-btn[aria-pressed="true"]{background:var(--cream);border-color:var(--gold)}
.vote-btn[aria-pressed="true"]::before{border-bottom-color:var(--gold)}
.vote-static{cursor:default}
.vote-static:hover{border-color:var(--line)}
.vote-count{font-weight:600}
.report{font-size:var(--fs-small)}
.report[open]>summary,.reply-to[open]>summary{color:var(--navy);font-weight:500}
.report[open]{flex-basis:100%}
.report-form{margin-top:10px;display:grid;gap:12px;max-width:440px;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:14px}
.reply-to[open]{flex-basis:100%;order:5}
.reply-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.reply-list .reply-list{margin-top:12px;padding-left:clamp(12px,3vw,28px);border-left:1px solid var(--line)}
.reply-card{border:1px solid var(--line);border-radius:20px;padding:14px 16px;display:grid;gap:10px;scroll-margin-top:96px}
.reply-card:target{border-color:var(--marigold);box-shadow:0 0 0 3px var(--cream)}
.reply-accepted{border-color:var(--good);background:var(--mint-soft)}
.accepted-flag{font-weight:600;color:var(--good);font-size:var(--fs-small)}
.accepted-flag::before{content:"";display:inline-block;width:12px;height:7px;border-left:3px solid var(--good);border-bottom:3px solid var(--good);transform:rotate(-45deg);margin:0 8px 3px 2px}
.post-card{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;display:grid;gap:12px;scroll-margin-top:96px}
.post-head{display:flex;gap:12px;align-items:center;font-size:var(--fs-small)}
.post-head .avatar{width:40px;height:40px}
.post-skill{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--navy);background:var(--mist);border-radius:16px;padding:8px 12px;justify-self:start}
.post-skill .ic{width:36px;height:36px;border-radius:11px}
.post-skill .ic svg{width:22px;height:22px}
@media (pointer:coarse){
  .post-head a,.reply-head a{position:relative}
  .post-head a::after,.reply-head a::after{content:"";position:absolute;inset:-11px -6px}
}
@media (max-width:600px){
  .reply-list .reply-list{padding-left:10px}
  .post-card,.reply-card{padding:14px 16px}
}

/* ===== G12a: result cards and the result post page (docs/plans/COMMUNITY_VIBE_G12.md 4.1; result-post-desktop.png and
   -mobile.png, member-home-desktop.png). Brand tokens only: mint for proof from real use, cream for "with the skill" and the tip,
   mist for "before", the hand font for the part labels. ===== */
.result-card .ugc{font-size:var(--fs-body)}
/* A result post's own title is its heading; the skill's name above it is a step smaller (the live design review, community 5). */
.result-wrap>.hub-head .hub-name{font-size:var(--h3)}
.result-rail-price{margin:0;font-weight:500;color:var(--navy)}
/* Under the skill's header a wide screen shows the promise and price there, so the rail leaves them out (the code review, L2). */
@media (min-width:761px){.result-wrap>.hub-head~.result-page .result-rail-skill .meta,.result-wrap>.hub-head~.result-page .result-rail-price{display:none}}
.result-card-title .ugc{font-size:inherit}   /* the title's link is people's words too (.ugc), at the title's size (code review M1) */
.result-card-title{font-family:var(--display);font-weight:700;font-size:var(--h3);line-height:1.22;color:var(--navy);margin:0;overflow-wrap:anywhere}
.result-card-title a{color:inherit;text-decoration:none}
.result-card-title a:hover{text-decoration:underline}
.result-card-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.result-card-chips .proof{text-decoration:none;background:var(--mint)}
.result-chip-app{display:inline-flex;align-items:center;border-radius:999px;padding:3px 11px;font-size:var(--fs-small);font-weight:500;background:var(--mist);color:var(--navy)}
.result-chip-guide{display:inline-flex;align-items:center;border-radius:999px;padding:3px 11px;font-size:var(--fs-small);font-weight:500;background:var(--navy);color:var(--white)}
.result-chip-maker{display:inline-flex;align-items:center;border-radius:999px;padding:3px 11px;font-size:var(--fs-small);font-weight:600;background:var(--marigold);color:var(--navy);text-decoration:none}
.result-chip-maker:hover{text-decoration:underline}
.result-ask .ask-box{margin:0;border:0;padding:0}   /* G5's ask box inside the rail card, without a second frame */
.result-outcome{display:inline-flex;align-items:center;border-radius:999px;padding:3px 11px;font-size:var(--fs-small);font-weight:500;background:var(--cream);color:var(--navy)}
.result-outcome-no{background:var(--apricot)}
.result-ba{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px}
.result-before,.result-after{border-radius:16px;padding:12px 14px;font-size:var(--fs-small);line-height:1.5;display:grid;gap:2px}
.result-before{background:var(--mist);color:var(--soft)}
.result-after{background:var(--cream);color:var(--navy)}
.result-ba-label{font-family:var(--hand);font-weight:700;font-size:var(--h3);line-height:1.1;color:var(--gold-text)}
.result-before .result-ba-label{color:var(--soft)}

/* the post page: the post and its comments, the rail beside on wide screens and after on phones */
.result-page{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,4vw,40px);align-items:start;margin-top:8px}
.result-main{min-width:0}
.result-back{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-small);color:var(--soft);margin-bottom:14px;min-height:44px}
.result-back::before{content:"";width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-right:2px}
.result-post{border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,3vw,30px);display:grid;gap:4px;scroll-margin-top:96px}
.result-head{display:flex;gap:14px;align-items:center;font-size:var(--fs-small)}
.result-head .avatar{width:56px;height:56px;font-size:1.1rem}
.result-who{min-width:0}
.result-title{font-family:var(--display);font-size:var(--h2);font-weight:700;letter-spacing:-.015em;line-height:1.12;margin:18px 0 10px}
.result-proofbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;background:var(--mint);border-radius:16px;padding:12px 14px;font-size:var(--fs-small);color:var(--good)}
.result-proofbar b{font-weight:600}
.result-proofbar .link{margin-left:auto;color:var(--good)}
.result-proofbar-ic{display:inline-grid;place-items:center;width:24px;height:24px;flex:none}
.result-proofbar-ic svg{width:24px;height:24px}
.result-guide-note{background:var(--mist);border-radius:var(--r-sm);padding:10px 14px;font-size:var(--fs-small);margin-top:10px}
.result-outcome-line{margin-top:12px}
.result-part{margin-top:22px;display:grid;gap:8px}
.result-part-h{font-family:var(--hand);font-weight:700;font-size:var(--h3);line-height:1.1;letter-spacing:0;color:var(--gold-text)}
.result-asked{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:end}
.result-bubble{background:var(--navy);color:var(--white);border-radius:22px 22px 6px 22px;padding:14px 18px;font-size:var(--fs-body);line-height:1.5;margin:0}
.result-asked-btns{display:flex;flex-direction:column;gap:8px}
.result-open-in{font-size:var(--fs-small);color:var(--soft);line-height:1.2}
.result-body{font-size:var(--fs-body);line-height:1.65}
.result-tip{display:flex;gap:12px;align-items:flex-start;background:var(--cream);border-radius:18px;padding:14px 18px;font-size:var(--fs-body)}
.result-tip p{margin:0}
.result-tip-ic{display:inline-grid;place-items:center;width:28px;height:28px;flex:none;margin-top:2px}
.result-tip-ic svg{width:28px;height:28px}
.result-foot{margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
.result-foot-gap{flex:1 1 auto}
.result-share>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;color:var(--navy);font-size:var(--fs-small);font-weight:500;border:1px solid var(--line);border-radius:999px;padding:4px 14px 4px 8px;min-height:36px}
.result-share>summary::-webkit-details-marker{display:none}
.result-share[open]{flex-basis:100%;order:5}
.result-share-body{margin-top:10px;display:grid;gap:8px;max-width:520px;border:1px solid var(--line);border-radius:18px;padding:14px}
.result-footnote{font-size:var(--fs-small);color:var(--soft);margin-top:12px}
.result-fixed{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 12px 3px 6px;background:var(--mint);color:var(--good);font-size:var(--fs-small);font-weight:600;text-decoration:none}
.result-fixed svg{width:20px;height:20px}
.result-fixed:hover{text-decoration:underline}
.result-rail{display:grid;gap:16px;align-content:start}
.result-rail-card{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;display:grid;gap:10px;align-content:start}
.result-try{border-color:var(--navy)}
.result-try .btn{width:100%}
.result-rail-h{font-family:var(--display);font-size:var(--fs-body);font-weight:600}
.result-rail-h a{color:inherit;text-decoration:none}
.result-rail-h a:hover{text-decoration:underline}
.result-rail-skill{display:flex;gap:12px;align-items:center;color:var(--navy);text-decoration:none}
.result-rail-skill .ic,.result-community .ic{width:44px;height:44px;border-radius:14px}
.result-rail-skill .ic svg,.result-community .ic svg{width:26px;height:26px}
.result-try-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:var(--fs-small)}
.result-try-list li{display:flex;gap:8px;align-items:baseline}
.result-try-list li::before{content:"";width:10px;height:6px;border-left:2px solid var(--good);border-bottom:2px solid var(--good);transform:rotate(-45deg) translateY(-2px);flex:none}
.result-more-list{list-style:none;margin:0;padding:0;display:grid}
.result-more-list li{display:grid;gap:4px;padding:12px 0;border-top:1px solid var(--line)}
.result-more-title{font-weight:600;font-size:var(--fs-small);line-height:1.35;color:var(--navy);text-decoration:none;overflow-wrap:anywhere}
.result-more-title:hover{text-decoration:underline}
.result-community{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
@media (max-width:900px){
  .result-page{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .result-head .avatar{width:44px;height:44px;font-size:.95rem}
  .result-asked{grid-template-columns:minmax(0,1fr)}
  .result-asked-btns{flex-direction:row;flex-wrap:wrap;align-items:center}
  .result-proofbar .link{margin-left:0}
  .result-community{grid-template-columns:auto minmax(0,1fr)}
  .result-community form,.result-community>.btn{grid-column:1/-1}
}
/* the author's own result (the G12a review, M5): Edit and Delete under the post, and the edit form */
.result-author-bar{border-style:solid;border-color:var(--mist);background:var(--mist)}
.result-delete{display:inline-block}
.result-delete>summary{list-style:none;cursor:pointer}
.result-delete>summary::-webkit-details-marker{display:none}
.result-delete[open]{flex-basis:100%}
.result-delete-body{margin-top:10px;display:grid;gap:10px;justify-items:start;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.result-delete-body p{margin:0}
.result-edit{margin-top:16px}
/* ===== end G12a ===== */
/* ===== G12e: the member home (docs/plans/COMMUNITY_VIBE_G12.md 4.2; mockup member-home), here and not in site.css so visitors never load it (the review, L6). Three columns on a desktop (their corner,
   the feed, people to follow); on a phone the feed comes first. Brand tokens and our own glyphs. ===== */
.mh{display:grid;gap:24px;grid-template-columns:minmax(0,1fr);padding-top:clamp(20px,4vw,40px);padding-bottom:clamp(28px,5vw,56px)}
.mh-main,.mh-left,.mh-right{min-width:0}
.mh-left,.mh-right{display:grid;gap:16px;align-content:start}
.mh-hello h1{font-size:var(--h1)}
.mh-start p{max-width:var(--measure)}
.mh-share{border:2px solid var(--navy);border-radius:var(--r);background:var(--white)}
.mh-share-sum{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:16px 20px;cursor:pointer;list-style:none}
.mh-share-sum::-webkit-details-marker{display:none}
.mh-share-q{font-family:var(--display);font-weight:700;font-size:var(--fs-body);color:var(--navy)}
.mh-share-go{display:inline-flex;align-items:center;border-radius:999px;padding:8px 16px;background:var(--navy);color:var(--white);font-weight:600;font-size:var(--fs-small)}
.mh-share[open] .mh-share-go{display:none}
.mh-share .result-composer{border:0;border-top:1px solid var(--line);border-radius:0 0 var(--r) var(--r);max-width:none}
/* The question is already the summary's: the form's own heading stays for screen readers only. */
.mh-share .result-composer-h{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mh-cheer{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;border-radius:var(--r);padding:18px 20px;background:var(--navy);color:var(--white)}
.mh-cheer-ic{flex:none;display:inline-grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--white)}
.mh-cheer-ic svg{width:32px;height:32px}
.mh-cheer-body{flex:1 1 16rem;min-width:0}
.mh-cheer-title{font-size:var(--fs-body);color:var(--white)}
.mh-cheer-body p{margin-top:4px;color:var(--white);overflow-wrap:anywhere}
.mh-cheer-go{background:var(--marigold);border-color:var(--marigold);color:var(--navy)}
.mh-meter{display:block;width:100%;max-width:22rem;height:8px;margin-top:10px;border:0;border-radius:999px;background:var(--mist);overflow:hidden;-webkit-appearance:none;appearance:none}
.mh-meter::-webkit-progress-bar{background:var(--mist);border-radius:999px}
.mh-meter::-webkit-progress-value{background:var(--marigold);border-radius:999px}
.mh-meter::-moz-progress-bar{background:var(--marigold);border-radius:999px}
.mh-help{border:2px solid var(--marigold);border-radius:var(--r);padding:18px 20px;background:var(--cream)}
.mh-help-title{display:flex;align-items:center;gap:10px;font-size:var(--fs-body)}
.mh-help-title svg{width:26px;height:26px;flex:none}
.mh-help-list{list-style:none;margin:0;padding:0;display:grid}
.mh-help-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding:12px 0;border-top:1px solid var(--line)}
.mh-help-text{flex:1 1 16rem;min-width:0}
.mh-tabs{margin-bottom:0}
.mh-explain{margin-top:10px;max-width:var(--measure)}
.mh-feed{display:grid;gap:16px}
.mh-board{background:var(--cream);border-color:var(--cream)}
.mh-board-kicker{display:flex;align-items:center;gap:8px;font-family:var(--hand);font-weight:700;font-size:var(--h3);color:var(--gold-text)}
.mh-board-kicker svg{width:22px;height:22px;flex:none}
.mh-board-list{list-style:none;margin:0;padding:0;display:grid}
.mh-board-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--marigold)}
.mh-board-row:first-child{border-top:0}
.mh-board-rk{font-family:var(--display);font-weight:700;color:var(--navy);text-align:center}
.mh-board-text{min-width:0}
.mh-board-text .tstrip-name{overflow-wrap:anywhere}
.mh-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mh-steps li{display:flex;align-items:center;gap:10px;min-height:32px}
.mh-steps svg{width:20px;height:20px;flex:none}
.mh-step-done{color:var(--soft)}
.mh-step-dot{flex:none;width:12px;height:12px;margin:4px;border-radius:50%;border:2px solid var(--navy)}
.mh-people{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mh-person{display:flex;align-items:flex-start;gap:10px}
.mh-person-text{flex:1;min-width:0}
.mh-person .row-title{font-size:var(--fs-body)}
.mh-me-head{display:flex;align-items:center;gap:12px}
.mh-me-name{font-size:var(--fs-body)}
.mh-me-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mh-me-stat{display:grid;border-radius:var(--r-sm);padding:10px 12px;background:var(--mist)}
.mh-me-stat b{font-family:var(--display);font-size:var(--h3);color:var(--navy);font-weight:700}
.mh-me-stat span{font-size:var(--fs-small);color:var(--soft)}
@media (min-width:760px){
  .mh{grid-template-columns:minmax(0,1fr) minmax(0,17rem);grid-template-areas:"main right" "main left";align-items:start}
  .mh-main{grid-area:main}
  .mh-right{grid-area:right}
  .mh-left{grid-area:left}
}
@media (min-width:1100px){
  .mh{grid-template-columns:minmax(0,15rem) minmax(0,1fr) minmax(0,18rem);grid-template-areas:"left main right"}
}
/* ===== end G12e member home ===== */

/* ===== G12b: the live "Ask the maker" thread, weekly threads, challenges (docs/plans/COMMUNITY_VIBE_G12.md 6; live-thread-desktop.png
   while it's live, live-thread-mobile.png after it ended, community-desktop.png for the "Live now" band and the weekly threads) */
.live-page{padding-bottom:24px}
.live-head{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:18px;align-items:center;padding-top:8px}
.live-head>.avatar{width:72px;height:72px;font-size:1.6rem}
.live-title{font-size:var(--h2);letter-spacing:-.02em;line-height:1.1}
.live-status-line{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0 0;font-size:var(--fs-small)}
.live-head-main>.meta{margin:4px 0 0}
.live-head-actions{display:flex;gap:8px;flex-wrap:wrap}
.live-chip{display:inline-flex;align-items:center;gap:8px;background:var(--mist);color:var(--navy);font-weight:600;font-size:var(--fs-small);border-radius:999px;padding:4px 12px;white-space:nowrap}
/* At 360 px a long start time wraps instead of pushing the page sideways (the G12b review, L12). */
@media (max-width:600px){.live-chip{white-space:normal}}
.live-chip-on{background:var(--marigold);padding-left:10px}
.live-chip-paused{background:var(--cream);color:var(--warn)}
.live-chip-dark{background:var(--navy);color:var(--white);padding-left:10px}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--navy);box-shadow:0 0 0 3px rgba(13,44,84,.2);flex:none}
.live-chip-dark .live-dot{background:var(--marigold);box-shadow:none}
.live-paused{margin:16px 0 0;background:var(--cream);border-radius:var(--r-sm);padding:10px 14px;font-size:var(--fs-body);color:var(--navy)}
.live-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;margin-top:22px;align-items:start}
.live-stream{border:2px solid var(--navy);border-radius:var(--r-lg);background:var(--white);display:flex;flex-direction:column;min-width:0}
.live-before{padding:20px 22px}
.live-list{list-style:none;margin:0;padding:8px 22px;max-height:min(70vh,760px);overflow-y:auto;overscroll-behavior:contain;border-radius:26px 26px 0 0}
.live-empty{padding:0 22px 8px;margin:0}
.live-earlier{padding:10px 22px 0;margin:0}
.live-msg{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:9px 0;scroll-margin-top:96px}
.live-msg .live-avatar{width:36px;height:36px}
.live-msg-main{min-width:0}
.live-msg-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:var(--fs-small);color:var(--soft);margin:0}
.live-msg-head .badge{font-size:var(--fs-small);padding:1px 8px}
.live-role{background:var(--marigold)}
.live-answer-chip{color:var(--good)}
.live-bub{margin-top:3px}
.live-body{font-size:var(--fs-body);line-height:1.5;margin:0}
.live-quote{margin:0 0 6px;font-size:var(--fs-small);color:var(--soft);border-left:1px solid var(--line);padding-left:8px}
.live-msg-mine .live-bub{display:inline-block;max-width:100%;background:var(--navy);color:var(--white);border-radius:18px 4px 18px 18px;padding:9px 13px}
.live-msg-mine .live-bub a{color:inherit}
.live-msg-answer .live-bub{display:block;background:var(--cream-soft);color:var(--ink);border:2px solid var(--marigold);border-radius:4px 18px 18px 18px;padding:10px 14px;margin-top:4px}
.live-msg-answer .live-quote{border-left-color:var(--marigold)}
.live-msg:target .live-bub{outline:3px solid var(--cream);outline-offset:2px}
.live-msg-foot{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-top:6px;font-size:var(--fs-small)}
.live-msg-foot:empty{display:none}
.live-up{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:2px 10px 2px 8px;min-height:30px;background:var(--white);color:var(--navy);font:inherit;font-size:var(--fs-small);font-weight:600;cursor:pointer}
.live-up::before{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:7px solid var(--navy)}
.live-up:hover{border-color:var(--navy)}
.live-up[aria-pressed="true"]{background:var(--cream);border-color:var(--navy)}
.live-up-static{cursor:default}
.live-up-static:hover{border-color:var(--line)}
.live-up-n:empty{display:none}
.live-typing{display:flex;align-items:center;gap:8px;font-size:var(--fs-small);color:var(--soft);padding:6px 22px 10px;margin:0}
.live-dots{width:6px;height:6px;border-radius:50%;background:var(--soft);box-shadow:9px 0 0 var(--soft),18px 0 0 var(--soft);margin-right:18px;opacity:.7;flex:none}
.live-new{align-self:center;margin:6px 0 4px;box-shadow:var(--shadow);position:sticky;bottom:12px;z-index:2}
.live-compose{border-top:1px solid var(--line);padding:12px 16px 14px;background:var(--white);border-radius:0 0 26px 26px}
.live-quick{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.live-quick form{display:contents}
.live-quick .chip{background:var(--white);font:inherit;font-size:var(--fs-small);font-weight:500;padding:4px 12px;border-width:1.5px;cursor:pointer;min-height:32px}
.live-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.live-form .live-input{flex:1 1 260px;width:auto;min-width:0;border-radius:24px;resize:vertical;padding:11px 18px;field-sizing:content;min-height:48px;max-height:180px}   /* one line that grows, as the mockup */
.live-msg-foot .rx-label{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}   /* icons and counts in the stream; the names stay for screen readers */
.live-msg-foot .rx-btn{min-height:32px;padding:2px 9px 2px 5px;font-size:var(--fs-small)}
.live-answers{flex:0 1 230px;width:auto;min-width:0}
.live-toggle{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-small);font-weight:500;color:var(--navy);white-space:nowrap;cursor:pointer}
.live-toggle input{appearance:none;width:36px;height:22px;border-radius:999px;background:var(--field);position:relative;margin:0;cursor:pointer;flex:none}
.live-toggle input::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--white)}
.live-toggle input:checked{background:var(--navy)}
.live-toggle input:checked::after{left:17px;background:var(--marigold)}
.live-toggle input:focus-visible{outline:var(--ring-line);box-shadow:var(--ring)}
.live-error{flex-basis:100%;margin:0}
.live-compose>.hint{display:block;margin:8px 0 0}
.live-side{display:grid;gap:16px;min-width:0}
.live-card{border:1px solid var(--line);border-radius:var(--r);padding:20px}
.live-card-h{display:flex;align-items:center;gap:10px;font-size:var(--fs-body)}
.live-card-h svg{width:24px;height:24px;flex:none}
.live-card>.meta,.live-card>.muted{margin:6px 0 0}
.live-progress{display:block;width:100%;height:8px;margin:10px 0 4px;appearance:none;border:0;border-radius:99px;background:var(--mist);color:var(--marigold);overflow:hidden}
.live-progress::-webkit-progress-bar{background:var(--mist)}
.live-progress::-webkit-progress-value{background:var(--marigold)}
.live-progress::-moz-progress-bar{background:var(--marigold)}
.live-qs{list-style:none;margin:6px 0 0;padding:0}
.live-q{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.live-q-n{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid var(--line);border-radius:14px;height:48px;font-weight:600;color:var(--navy);font-size:var(--fs-small)}
.live-q-n::before{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:7px solid var(--navy)}
.live-q-body{margin:0;font-size:var(--fs-body);font-weight:500;line-height:1.35;overflow-wrap:anywhere}
.live-q-body a{color:var(--navy);text-decoration:none}
.live-q-body a:hover{text-decoration:underline}
.live-q-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:5px 0 0;font-size:var(--fs-small)}
.live-q-state{border-radius:999px;padding:1px 9px;font-weight:600;color:var(--navy)}
.live-q-waiting{background:var(--mist)}
.live-q-answering{background:var(--marigold)}
.live-q-answered{background:var(--mint);color:var(--good)}
.live-q-later{background:var(--cream);color:var(--warn)}
.live-top{padding-bottom:12px}
.live-tools{background:var(--mist);border-color:var(--mist)}   /* only the people running the hour see it */
.live-tools .actions{margin-top:10px}
@media (max-width:900px){
  .live-layout{grid-template-columns:1fr}
  .live-list{max-height:none;overflow:visible}
  .live-compose{position:sticky;bottom:0;z-index:3;box-shadow:0 -12px 24px -20px rgba(13,44,84,.5)}
}
@media (max-width:600px){
  .live-head{grid-template-columns:56px minmax(0,1fr);gap:12px}
  .live-head>.avatar{width:56px;height:56px;font-size:1.3rem}
  .live-head-actions{grid-column:1/-1}
  .live-stream{border-radius:22px}
  .live-list{padding:6px 14px;border-radius:20px 20px 0 0}
  .live-compose{padding:10px 12px 12px;border-radius:0 0 20px 20px}
  .live-answers{flex:1 1 100%}
  .live-form>.btn{flex:1}
}
@media (pointer:coarse){
  .live-msg-foot .rx-btn{min-height:36px}
}

/* after the hour: the recap, best answers first, the open questions and their day, the replay, the next live hour */
.live-recap{background:var(--mist);border-radius:var(--r);padding:20px 22px;margin-top:20px}
.live-best{margin-top:22px}
.live-recap .kicker{font-size:var(--h3)}
.live-recap-h{font-size:var(--h3)}
.live-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr));gap:8px;margin-top:12px}
.live-stats .stat{background:var(--white);border-radius:14px;padding:10px 12px}
.live-best-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:12px}
.live-best-item{border:1px solid var(--line);border-radius:22px;padding:14px 16px}
.live-best-q{display:flex;gap:10px;align-items:flex-start;margin:0;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.live-best-q .live-up{flex:none}
.live-best-q a{color:var(--navy);text-decoration:none}
.live-best-q a:hover{text-decoration:underline}
.live-best-a{margin-top:10px;border-left:4px solid var(--marigold);background:var(--cream);border-radius:0 14px 14px 0;padding:10px 12px;font-size:var(--fs-body)}
.live-best-a .ugc{margin:4px 0 0}
.live-open{margin-top:22px;border:1px solid var(--line);border-radius:20px;padding:14px 16px}
.live-open p{font-size:var(--fs-small);color:var(--soft);margin:4px 0 0}
.live-open-list{margin:8px 0 0;padding-left:20px;display:grid;gap:4px;font-size:var(--fs-small)}
.live-replay{margin-top:16px;border:1px solid var(--line);border-radius:22px;padding:6px 16px 14px}
.live-replay>summary{cursor:pointer;font-weight:600;color:var(--navy);padding:8px 0}
.live-next{margin-top:22px;background:var(--navy);color:var(--white);border-radius:22px;padding:16px 18px;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center}
.live-next>.avatar{width:44px;height:44px}
.live-next-h{font-size:var(--fs-body);color:var(--white)}
.live-next-h a{color:var(--white)}
.live-next p{margin:2px 0 0;font-size:var(--fs-small);color:var(--ice)}
@media (max-width:600px){
  .live-next{grid-template-columns:44px minmax(0,1fr)}
  .live-next>form,.live-next>.btn{grid-column:1/-1}
  .live-next .btn{width:100%}
}

/* the community page: the "Live now" band, the weekly threads pinned above the list, "Live this week"; a challenge's page */
.live-band{display:grid;grid-template-columns:auto 52px minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--marigold);color:var(--navy);border-radius:22px;padding:14px 18px;margin-bottom:20px}
.live-band>.avatar{width:52px;height:52px;box-shadow:0 0 0 2.5px var(--white)}
.live-band-h{font-size:var(--fs-body);line-height:1.2}
.live-band-main>.meta{color:var(--navy);margin:2px 0 0}
.weekly-line{margin:8px 0 0;font-size:var(--fs-small);color:var(--soft)}
.weekly-list{list-style:none;margin:0 0 16px;padding:0;border:1px solid var(--line);border-radius:22px;overflow:hidden}
.weekly-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 18px;border-top:1px solid var(--line)}
.weekly-row:first-child{border-top:0}
.weekly-ic{width:40px;height:40px;display:grid;place-items:center}
.weekly-ic svg{width:30px;height:30px}
.weekly-main{min-width:0}
.weekly-title{font-weight:600;color:var(--navy);text-decoration:none;overflow-wrap:anywhere}
a.weekly-title:hover{text-decoration:underline}
.live-week{padding:18px 20px}
.live-week-list{margin-top:10px}
.live-week-challenge{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line)}
@media (max-width:600px){
  .live-band{grid-template-columns:44px minmax(0,1fr);padding:12px 14px}
  .live-band>.avatar{width:44px;height:44px}
  .live-band>.live-chip{grid-column:1/-1;justify-self:start}
  .live-band>.btn{grid-column:1/-1}
  .weekly-row{grid-template-columns:32px minmax(0,1fr);padding:12px 14px}
  .weekly-row>.btn{grid-column:1/-1;justify-self:start}
  .top-skills>li:nth-child(n+4){display:none}   /* three on a phone; "All AI skills for ..." under them has the rest (design-sweep-d3) */
}
/* ===== end G12b ===== */

/* One maker's releases from one day as one card (the calm-site review, feed fix 11): its line, then the newest skill as its card
   with its note to its own post under it (calm batch G, #176), the rest as rows beside it, under it on a phone; no box round a card
   that is a box. */
.release-group{border:0;border-radius:0;padding:0;gap:16px}
.release-body{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:16px 28px;align-items:start}
.release-lead{display:flex;flex-direction:column;gap:10px;min-width:0}
.release-note{align-self:flex-start;font-size:var(--fs-body);min-height:44px;display:inline-flex;align-items:center;color:var(--soft)}   /* a link a thumb can hit */
/* The one list row (the live design review, community 2): full width, a 1 px line between, the skill's own icon on its tint, its note
   at the row's end; never a grey pill. */
.release-rows{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.release-rows li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:6px 0;border-bottom:1px solid var(--line)}   /* the name, its note at the row's end */
.release-rows .post-skill{flex:1;min-width:0;padding:0;background:none;border-radius:0}
.release-rows .meta{flex:none;font-size:var(--fs-body);min-height:44px;display:inline-flex;align-items:center}
.release-rows .release-row-lead{display:none}   /* its card says it */
.release-group .post-head b{color:var(--navy)}
@media (max-width:760px){
  .release-body{grid-template-columns:minmax(0,1fr)}
  .release-lead{order:1}   /* a phone lists what's new first, then the newest one shown working (words a screen, #190) */
  .release-group~.release-group .release-lead{display:none}   /* one card on a phone's feed, the first group's; later groups are their rows */
  .release-group~.release-group .release-rows .release-row-lead{display:flex}
  /* Words a screen (#190, any screen 80): the card is its picture, name, proof and price, its promise on the skill's page. */
  .release-lead .promise{display:none}
}
.release-new .release-rows .meta,.release-new .release-note{display:none}   /* its heading says "added N new skills"; a group with updates keeps each note */