/* Guides with a costed kit (DESIGN.md §7 "Kit"; step 6, batch 1). First ported from the
   reference build's kit CSS (5 Oct); since 7-8 Oct this file is the site's design (DESIGN.md
   §17): the numbered
   steps' layout (the circles are shared, in desk.css) and the receipt. Owned by the guides page type. */

/* the head: label, headline, lede; the PRICE CHECKED postmark on the right */
.g-head .sw{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;padding-block:22px 34px}
.g-head .pm{margin-right:12px}

/* the kit: the things on the left, the receipt on the right */
.guide{padding-bottom:clamp(44px,6vw,80px)}
.guide .sw{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:44px;align-items:start}
.guide .stops{gap:30px}  /* the list and its .num circles: desk.css */
/* Each step: the circle in column 1, the heading, its reason and the thing in column 2.
   The circle's centre sits on the gap between the heading and the reason's first line
   (owner, 6 Oct), however either wraps: its bottom is held to the heading row's bottom,
   then it hangs half a circle plus half the gap below it (the negative margin keeps the
   row the heading's own height). With no reason it centres on the heading. */
.guide .stops > li{--gap:2px;display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:14px;align-items:start;scroll-margin-top:16px}
.guide .stops > li > :not(.num){grid-column:2}
.guide .stops > li > .num{grid-row:1;grid-column:1;align-self:end;margin-bottom:calc(-23px - var(--gap) / 2)}
.guide .stops > li > p{margin:var(--gap) 0 0;color:color-mix(in srgb,var(--ink) 78%,transparent);max-width:52ch}
.guide .step{font:600 16px/1.45 var(--sans);margin:0;grid-row:1}
.guide .stops > li.solo > .num{align-self:center;margin-bottom:0}
.guide .stops > li.solo > .step{align-self:center}
/* each thing: its shop photo in a stamp frame, then its title and its prices, each the shop link */
.thing{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 22px;align-items:center;margin-top:16px;padding-top:16px;border-top:1px dotted color-mix(in srgb,var(--ink) 30%,transparent)}
.thing.nophoto{grid-template-columns:minmax(0,1fr)}
.thing .mount{justify-content:flex-start}
.thing h3{font-size:clamp(22px,2.2vw,26px)}
.thing .offers{margin-top:8px;gap:12px}
.thing .offers li{border-top:0;padding-top:0}
.thing .offers li + li{border-top:1px solid var(--rule);padding-top:12px}
.thing .diary{margin:12px 0 0}

/* the receipt */
.receipt{background:var(--white);padding:26px 26px 40px;font:400 14px/1.45 var(--label);--z:14px;box-shadow:0 10px 24px var(--shadow);transform:rotate(1deg);max-width:420px;justify-self:end;width:100%;position:sticky;top:24px}
.receipt .rh{text-align:center;padding-bottom:12px;border-bottom:1px dashed color-mix(in srgb,var(--ink) 35%,transparent);margin-bottom:10px}
.receipt .rh .wm{font-size:20px}
.receipt .rh .when{margin-top:6px}
.receipt .ri{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:8px 0;border-bottom:1px dotted color-mix(in srgb,var(--ink) 25%,transparent)}
.receipt .ri a{text-decoration:none}
.receipt .ri a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent)}
.receipt .ri .t{font-size:11px;color:color-mix(in srgb,var(--ink) 74%,transparent);grid-column:1/-1}
.receipt .tot{display:flex;justify-content:space-between;gap:12px;font-weight:500;font-size:16px;padding-top:12px;margin-top:4px;border-top:2px solid var(--ink)}
.receipt .tot.none span + span{font-weight:400;font-size:13px;color:color-mix(in srgb,var(--ink) 74%,transparent)}
.receipt .nototal{margin:8px 0 0;font:400 13px/1.45 var(--sans);color:color-mix(in srgb,var(--ink) 78%,transparent)}
.receipt > .when{margin:10px 0 0}

/* the small print */
.g-small{padding-block:0 34px}
.g-small p{margin:6px 0 0}

@media (max-width:900px){
  .guide .sw{grid-template-columns:minmax(0,1fr);gap:40px}
  .receipt{justify-self:start;position:relative;top:auto}
}
@media (max-width:560px){
  .g-head .pm.lg{width:72px;height:72px}
  .thing{grid-template-columns:minmax(0,1fr)}
}

/* ---------- the live kit builder (/kits/…; the intelligent site's build plan item 16) ---------- */
.g-head .budget{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.g-head .budget a{padding:10px 16px;background:var(--paper);box-shadow:0 2px 6px var(--shadow);font:400 12px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.g-head .budget a.on{background:var(--ink);color:var(--paper)}
.thing .swap{margin:8px 0 0;font-size:14.5px}
.thing .swap a{color:var(--ink2);text-decoration:underline;text-decoration-color:var(--yarn);text-underline-offset:3px}