/* ARSWORD /template/: the template gallery. One live stage runs the chosen template, the field switch above it
   picks the template, and the column beside it names it, recolours it and orders it. The preview is rendered in
   the page by the template engine (/template/lib/, exported from arsword-templates; see template.js).
   Built on the tokens and sections of site.css and the chrome of chrome.css. */

:root { --pick: clamp(312px, 27vw, 380px); --studio-gap: clamp(28px, 3.4vw, 56px); }

/* ---------- opening: the headline and the lede share the studio's two columns */
.tpl-head {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--pick); align-items: end; gap: 14px var(--studio-gap);
  padding: clamp(28px, 3.6vw, 56px) 0 clamp(26px, 2.6vw, 40px);
}
.tpl-head h1.phrase { max-width: 17em; font-size: clamp(2.125rem, 1.1rem + 2.9vw, 3.75rem); line-height: 1.04; letter-spacing: -.04em; }
.tpl-head .lede { max-width: 46ch; font-size: var(--fs-md); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

/* ---------- studio: bar and stage on the left, the pick column on the right */
.studio {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--pick);
  grid-template-areas: "bar pick" "skip pick" "stage pick" "note pick";
  grid-template-rows: auto auto auto 1fr; column-gap: var(--studio-gap); align-items: start;
  padding-bottom: var(--block);
}
.studio-bar { grid-area: bar; display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 14px; }
.studio-opts { display: flex; flex: none; gap: 10px; }

/* segmented switches: the home's package switch (site.css .switch), sized for this bar */
.studio .switch { margin-top: 0; }
.fields { flex: 0 1 540px; min-width: 0; }
.fields button { display: grid; align-content: center; justify-items: center; gap: 1px; min-height: 54px; padding: 4px 12px; line-height: 1.25; }
.fields b { font-weight: 600; font-size: var(--fs-md); }
.fields small { font-size: var(--fs-sm); color: var(--ink-3); transition: color .2s; }
.fields button[aria-pressed="true"] small { color: var(--ink-2); }

.skip-stage {
  grid-area: skip; justify-self: start;
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-stage:focus { position: static; width: auto; height: auto; clip: auto; margin-bottom: 10px; font-size: var(--fs-md); font-weight: 600; }

/* ---------- the stage (stage.css draws it; here, its place and height) */
.stage { grid-area: stage; height: clamp(440px, calc(100svh - var(--topbar) - 290px), 780px); }
.stage-note { grid-area: note; max-width: 76ch; margin-top: 14px; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }

/* ---------- the pick column: name, colour, price, order */
.pick { grid-area: pick; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.pick:focus { outline: none; }
.pick-head h2 { font-size: var(--fs-2xl); font-weight: 600; line-height: 1.15; letter-spacing: -.025em; }
.pick-for { margin-top: 8px; font-size: var(--fs-md); font-weight: 500; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.pick-desc { margin-top: 8px; font-size: var(--fs-md); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

.pick-colors { padding-top: 18px; border-top: 1px solid var(--line); }
.pick-label { font-size: var(--fs-sm); font-weight: 600; }
.pick-label span { margin-left: 6px; font-weight: 400; color: var(--ink-3); }

.pick-buy { padding-top: 18px; border-top: 1px solid var(--line); }
.pick-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.pick-price .unit { font-size: var(--fs-md); color: var(--ink-3); }
.pick-maint { margin-top: 6px; font-size: var(--fs-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pick-actions { display: grid; justify-items: start; gap: 16px; margin-top: 20px; }
.pick-actions .cta { width: 100%; }
.pick-actions .more-link { font-size: var(--fs-md); }

.pick-facts { margin: 0; border-top: 1px solid var(--line); }
.pick-facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-md); }
.pick-facts dt { color: var(--ink-3); }
.pick-facts dd { margin: 0; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- what the package includes */
.isi { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 88px); }
.isi-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(24px, 3vw, 48px); }
.isi-list li { display: flex; gap: 10px; break-inside: avoid; padding: 7px 0; font-size: var(--fs-md); line-height: 1.4; }
.isi-list li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.isi-terms { margin: 0; display: grid; align-content: start; }
.isi-terms div { padding: 14px 0; border-top: 1px solid var(--line); }
.isi-terms div:first-child { padding-top: 0; border-top: 0; }
.isi-terms dt { font-size: var(--fs-sm); font-weight: 600; }
.isi-terms dd { margin: 4px 0 0; font-size: var(--fs-md); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

/* ---------- closing */
.tpl-closing { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 28px 48px; }
.tpl-closing-act { display: grid; justify-items: start; gap: 14px; }
.tpl-pro { max-width: 40ch; font-size: var(--fs-md); color: var(--ink-2); }
.tpl-pro a { color: var(--ink); font-weight: 600; text-decoration-color: var(--line-strong); }
.tpl-pro a:hover { text-decoration-color: currentColor; }

/* ---------- toast: tells a visitor why a contact button in the sample did nothing */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 60;
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(92vw, 440px);
  padding: 12px 16px; border-radius: var(--r-md);
  background: var(--inverse); color: var(--on-inverse); font-size: var(--fs-md); line-height: 1.4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1), 0 14px 36px rgba(0, 0, 0, .16);
  opacity: 0; transform: translate(-50%, 10px); pointer-events: none; visibility: hidden;
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); visibility: visible; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.toast .ico { width: 18px; height: 18px; }

/* ---------- below 1100px: one column. The swatches follow the stage, so a colour change happens in view */
@media (max-width: 1099.98px) {
  .tpl-head { grid-template-columns: minmax(0, 1fr); }
  .tpl-head .lede { max-width: 52ch; font-size: var(--fs-lg); line-height: 1.5; }
  .studio { display: flex; flex-direction: column; }
  .pick { display: contents; }
  .studio-bar { order: 1; }
  .skip-stage { order: 2; }
  .stage { order: 3; width: 100%; height: auto; aspect-ratio: 16 / 11; max-height: 72svh; }
  .stage[data-view="phone"] { aspect-ratio: auto; height: clamp(460px, 74svh, 760px); max-height: none; }
  .pick-colors { order: 4; margin-top: 18px; padding-top: 0; border-top: 0; }
  .stage-note { order: 5; margin-top: 10px; }
  .pick-head { order: 6; margin-top: clamp(32px, 5vw, 48px); max-width: 60ch; }
  .pick-buy { order: 7; margin-top: 24px; max-width: 520px; width: 100%; }
  .pick-facts { order: 8; margin-top: 28px; max-width: 520px; width: 100%; }
  .isi { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599.98px) {
  .studio-bar { flex-wrap: wrap; gap: 10px; }
  .fields { flex-basis: 100%; }
  .fields button { min-height: 52px; padding: 4px 6px; }
  .studio-opts { width: 100%; justify-content: space-between; }
  .stage { aspect-ratio: auto; height: clamp(360px, 64svh, 620px); max-height: none; }
  /* laptop view: a 16:10 window of the site between the address strip and the foot band */
  .stage[data-view="desktop"] { height: calc(min(100vw - 2 * var(--gutter), var(--page)) * .625 + 30px + 56px); aspect-ratio: auto; }
  .stage[data-view="phone"] { height: clamp(360px, 64svh, 620px); }
  .pick-actions { justify-items: stretch; }
  .pick-actions .more-link { justify-self: start; }
  .isi-list { columns: 1; }
  .tpl-closing .cta { width: 100%; }
  .tpl-closing-act { width: 100%; justify-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}