/* Client guides (resources/how-to-*, built by dev/guides/build-guides.mjs): the facts row under the title,
   "before you start", numbered steps with their pictures, the copy-ready address, quick answers and sources.
   Loaded only by the guide pages and the resources hub, on top of v2-studio.css's article view (art-*);
   uses its tokens (--c-ink, --c-mid, --c-line, --card-bg, --work-stage) and v2-pages.css's --orange. */

.art-prose .guide-facts{display:flex; flex-wrap:wrap; gap:8px; padding:0; list-style:none;}
.art-prose .guide-facts li + li{margin-top:0;}
.guide-fact{padding:8px 14px; border:1px solid var(--c-line); border-radius:999px; color:var(--c-mid);
  font-size:14px; line-height:1.3;}
.guide-fact strong{color:var(--c-ink); font-weight:400;}

.art-prose .guide-before{display:grid; gap:10px; padding:clamp(20px,2.2vw,28px); border-radius:14px;
  background:var(--work-stage); font-size:16px; line-height:1.6;}
.art-prose .guide-before h2{margin:0; font-size:clamp(20px,1.5vw,24px);}
.art-prose .guide-before ul{margin:0;}

.art-prose .guide-toc{padding:0; list-style:none; counter-reset:toc; font-size:16px;}
.art-prose .guide-toc li{counter-increment:toc;}
.art-prose .guide-toc li + li{margin-top:.35em;}
.art-prose .guide-toc a{text-decoration:none;}
.art-prose .guide-toc a::before{content:counter(toc) ".\00a0\00a0"; color:var(--c-dim);}
.art-prose .guide-toc a:hover,.art-prose .guide-toc a:focus-visible{text-decoration:underline 1px; text-underline-offset:.22em;}

.art-prose .guide-steps{padding:0; list-style:none;}
.art-prose .guide-step{margin-top:clamp(36px,4vw,56px); padding-top:clamp(28px,3vw,40px); border-top:1px solid var(--c-line);
  scroll-margin-top:110px;}
.art-prose .guide-step > * + *{margin-top:1em;}
.art-prose .guide-step h2{display:flex; align-items:baseline; gap:14px; margin-top:0;}
.guide-step-num{display:inline-grid; flex:0 0 auto; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--orange); color:var(--paper); font-size:16px; line-height:1; letter-spacing:0; transform:translateY(-3px);}

/* pictures are wider than the text column (up to 1040px) so the interface text in them stays readable */
.art-prose .guide-shot{width:min(1040px, calc(100vw - 64px)); max-width:none; margin-top:1.4em; margin-left:50%; transform:translateX(-50%);}
.guide-shot a{display:block; overflow:hidden; border:1px solid var(--c-line); border-radius:12px; background:var(--card-bg);}
.guide-shot a:focus-visible{outline:2px solid var(--c-ink); outline-offset:3px;}
.art-prose .guide-shot img{width:100%; border-radius:0;}

.art-prose .guide-copy{display:inline-block; padding:2px 8px; border:1px solid var(--c-line); border-radius:6px;
  background:var(--card-bg); color:var(--c-ink); font-family:Consolas,"Cascadia Mono",Menlo,monospace; font-size:.9em;
  user-select:all;}
.art-prose .guide-tip{padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,24px); border-left:3px solid var(--orange);
  border-radius:0 12px 12px 0; background:var(--work-stage); color:var(--c-ink); font-size:16px; line-height:1.6;}
.art-prose .guide-tip strong{font-weight:500;}

.art-prose .guide-faq{display:grid; gap:10px; margin-top:1em;}
.guide-faq details{border:1px solid var(--c-line); border-radius:12px; background:var(--card-bg);}
.guide-faq summary{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:52px;
  padding:12px 18px; color:var(--c-ink); cursor:pointer; list-style:none;}
.guide-faq summary::-webkit-details-marker{display:none;}
.guide-faq summary::after{content:"+"; flex:0 0 auto; color:var(--c-mid); font-size:22px; line-height:1;}
.guide-faq details[open] summary::after{content:"\2212";}
.guide-faq summary:focus-visible{outline:2px solid var(--c-ink); outline-offset:2px; border-radius:12px;}
.guide-faq details > div{padding:0 18px 16px; color:var(--c-mid); font-size:16px; line-height:1.6;}
.guide-faq details > div > * + *{margin-top:.8em;}

.art-prose .guide-sources{font-size:15px;}
.art-prose .guide-updated{color:var(--c-mid); font-size:14px;}

/* resources hub: the two guide groups, with room between them */
.guide-group + .guide-group{margin-top:clamp(64px,8vw,112px);}
.guide-group-note{margin:8px 0 0; color:var(--c-mid); font-size:15px; line-height:1.5;}

@media (max-width:640px){
  .art-prose .guide-step h2{gap:10px;}
  .guide-step-num{width:30px; height:30px; font-size:15px;}
}