/* The guided start (2026-10-09; static/studio/guide.js).

   Brand: cream #F4EFE4, chocolate #2A2118, muted #6A5C42, gold-deep #6F5310
   on cream, abyssal #204A5E for links and the Surveyed badge. Gold only on
   what takes a click or is chosen; labels and readouts chocolate or muted.
   Headings in var(--font-display); all other text inherits the body's face,
   so no family is named here. Nothing under 12 px; every control 44 px. */

.gs-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── The header link: "New here? Take the guided tour" ──────────────── */
.guide-link { display: none; }
body[data-screen="b"] .site-nav > .guide-link,
.studio-top .guide-link-strip {
  align-items: center; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase;
  color: #6A5C42; text-decoration: none; white-space: nowrap;
}
body[data-screen="b"] .site-nav > .guide-link { display: inline-flex; }
body[data-screen="b"] .site-nav > .guide-link:hover,
.studio-top .guide-link-strip:hover { color: #6F5310; }
.guide-link:focus-visible { outline: 2px solid #6F5310; outline-offset: 2px; }
/* 1239 px and below the section links, the guided tour, MakerBench and the
   account control do not fit one row with the logo (the owner's row needs
   1198 px): the tour and MakerBench share a strip of their own under the
   logo, still in the Studio's top bar, the tour at the left and MakerBench
   at the right (studio.css .mb-strip). Each is its own tap area. */
@media (max-width: 1239px) {
  body[data-screen="b"] .site-nav > .guide-link { display: none; }
  .studio-top { height: auto; min-height: var(--studio-top); flex-wrap: wrap; row-gap: 0; }
  .studio-top .mini-logo { display: inline-flex; align-items: center; min-height: var(--studio-top-row); }
  .studio-top .guide-link-strip { display: inline-flex; flex: 0 1 auto; letter-spacing: 0.1em; margin-top: -6px; }
}

/* ── The guide, in place of the decks ──────────────────────────────── */
#screen-b[data-guide="on"] .decks { display: none; }
.guide {
  flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
  background: #F4EFE4; color: #2A2118; font-size: 15px; font-weight: 400; line-height: 1.5;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.guide[hidden] { display: none; }
.guide :focus-visible { outline: 2px solid #6F5310; outline-offset: 2px; }
.guide[data-path="laser"] .gs-for-model,
.guide[data-path="model"] .gs-for-laser { display: none !important; }
/* Three paths (2026-10-10): laser (a lake's kit), model (a lake for a 3D
   printer or a CNC router) and terrain (a mountain, a region, the ocean
   floor, Space). gs-for-model is on both model paths; gs-for-lake on both
   lake paths. */
.guide:not([data-path="terrain"]) .gs-for-terrain,
.guide[data-path="terrain"] .gs-for-lake,
.guide[data-path="terrain"] .gs-for-laser { display: none !important; }
/* Any other place as a laser kit (laser-land): the machine step shows the
   laser's bed, not tiles (guide-v2). */
.guide[data-path="terrain"][data-machine="laser"] [data-slot="laser-kind"],
.guide[data-path="terrain"][data-machine="laser"] [data-slot="laser-bed"] { display: block !important; }
.guide[data-path="terrain"][data-machine="laser"] #gs-tiles-hint,
.guide[data-path="terrain"][data-machine="laser"] [data-slot="tiles"] { display: none !important; }
/* A laser kit is a stack, or one engraved contour sheet when the lake's
   bands are not allowed (the Studio's own flag, /api/laser/depths output;
   guide.js renderSheet). gs-for-stack is what only a stack has. */
.guide[data-sheet="contours"] .gs-for-stack,
.guide:not([data-sheet="contours"]) .gs-for-contours { display: none !important; }
.gs-world[hidden], #gs-search-wrap[hidden], .gs-card[hidden] { display: none; }

.gs-head { position: sticky; top: 0; z-index: 2; padding: 10px 18px 12px; background: #F4EFE4; border-bottom: 1px solid var(--border); }
.gs-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gs-steplabel { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #6A5C42; }
.gs-skip {
  min-height: 44px; padding: 0 2px; background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 14px; color: #204A5E; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.gs-skip:hover { text-decoration-thickness: 2px; }
.gs-progress { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; margin-top: 4px; }
.gs-seg { display: block; height: 4px; border-radius: 2px; background: #DDD2BD; overflow: hidden; }
.gs-seg i { display: block; width: 0; height: 100%; background: #2A2118; transition: width .3s ease; }
.gs-seg.on i { width: 100%; }

.gs-steps { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 24px; margin: 0; }
.gs-step[hidden] { display: none; }

/* A finished step, folded to one line: the tick, the summary, CHANGE. */
.gs-fold { display: none; align-items: center; gap: 12px; min-height: 52px; padding: 4px 4px 4px 12px; border: 1px solid var(--border); border-radius: 2px; background: #FAF7F2; }
.gs-step.done .gs-fold { display: flex; }
.gs-tick { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #2A2118; color: #F4EFE4; }
.gs-fold-sum { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; color: #2A2118; }
/* Any other place's folded lines (2026-10-10) wrap to a second line rather
   than end in an ellipsis: "200 mm wide · 12 mm relief · 5 mm base" does not
   fit one line beside CHANGE in the 440 px column. A lake's stay one line. */
.guide[data-path="terrain"] .gs-fold { padding-top: 6px; padding-bottom: 6px; }
.guide[data-path="terrain"] .gs-fold-sum {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  white-space: normal; line-height: 1.4;
}
.gs-change {
  flex: none; min-width: 44px; min-height: 44px; padding: 0 14px; background: none; border: 1px solid transparent; border-radius: 2px;
  cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #6F5310;
}
.gs-change:hover { border-color: #6F5310; }

/* The open step. It folds in about 200 ms: the body's row closes to 0 and
   the folded line takes its place; its controls leave the tab order once
   it has closed. */
.gs-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease; }
.gs-step.open .gs-body { grid-template-rows: 1fr; }
.gs-clip { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear .2s; }
.gs-step.open .gs-clip { visibility: visible; transition-delay: 0s; }
.gs-inner { display: flex; flex-direction: column; gap: 14px; padding: 4px 3px 6px; }

.gs-h { font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.15; color: #2A2118; }
.gs-h:focus { outline: none; }
.gs-h:focus-visible { outline: 2px solid #6F5310; outline-offset: 2px; }
.gs-text { font-size: 15px; color: #2A2118; }
.gs-small { font-size: 13.5px; line-height: 1.5; color: #6A5C42; }
.gs-small[hidden] { display: none; }
.gs-note { padding: 8px 12px; border-left: 2px solid #2A2118; background: rgba(42, 33, 24, 0.06); font-size: 14px; color: #2A2118; }
.gs-note[hidden] { display: none; }
.gs-label, .gs-dial-label, .gs-legend, .gs-get-label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #6A5C42;
}
.gs-label { margin-bottom: 8px; }
.gs-dial { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.gs-ctl { display: flex; flex-direction: column; gap: 4px; }
.gs-hint { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: #6A5C42; }
.gs-hint[hidden], .gs-slot[hidden] { display: none; }

/* Step 1's choices, and step 4's laser cards: real radio buttons and
   checkboxes, each in its own card. */
.gs-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.gs-legend { padding: 0; margin-bottom: 8px; }
.gs-opts, .gs-cards { display: flex; flex-direction: column; gap: 6px; }
.gs-opt, .gs-card {
  display: flex; align-items: flex-start; gap: 12px; min-height: 52px; padding: 8px 14px 9px;
  border: 1px solid #C4B89A; border-radius: 2px; background: #FAF7F2; cursor: pointer;
}
.gs-opt[hidden] { display: none; }
.gs-opt input, .gs-card input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: #6F5310; cursor: inherit; }
.gs-card input { width: 20px; height: 20px; margin-top: 2px; }
.gs-opt-text, .gs-card-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gs-opt-title, .gs-card-title { font-size: 16px; font-weight: 600; color: #2A2118; }
.gs-opt-desc, .gs-card-desc { font-size: 13.5px; line-height: 1.45; color: #6A5C42; }
.gs-opt:hover, .gs-card:hover { border-color: #6F5310; }
.gs-opt.on, .gs-card.on { border-color: #6F5310; box-shadow: inset 0 0 0 1px #6F5310; background: #FBF6EA; }
.gs-opt:has(input:focus-visible), .gs-card:has(input:focus-visible) { outline: 2px solid #6F5310; outline-offset: 2px; }
/* Laser chosen: a kind of place a kit cannot be made from, readable at full
   strength with a dashed edge (as the Studio's .mode-pill.unavail). */
.gs-opt.unavail, .gs-opt.unavail:hover { cursor: not-allowed; border-style: dashed; border-color: #6A5C42; box-shadow: none; background: transparent; }
.gs-opt.unavail .gs-opt-title { color: #6A5C42; }

/* The kind of place (guide-v2): a row of pills, real radio buttons, each
   44 px tall. */
.gs-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.gs-pill {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 1px solid #C4B89A; border-radius: 2px; background: #FAF7F2; cursor: pointer;
  font-size: 14px; font-weight: 600; color: #2A2118;
}
.gs-pill[hidden] { display: none; }
.gs-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.gs-pill:hover { border-color: #6F5310; }
.gs-pill.on { background: #6F5310; border-color: #6F5310; color: #F4EFE4; }
.gs-pill:has(input:focus-visible) { outline: 2px solid #6F5310; outline-offset: 2px; }

/* "Usual pick" (guide-v2): the default, marked, so a newcomer can just press
   Continue. On the guide's own cards a tag; on the Studio's own controls
   while they are here, the same tag after the default's caption. */
.gs-usual, .guide .usual-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid #6A5C42; border-radius: 2px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: #2A2118; vertical-align: 1px;
}
.guide #st-lake-variant-tiles .thumb[data-variant="bands"] .cap::after,
.guide #st-frame-tiles .thumb[data-frame="none"] .cap::after,
.guide #st-shape-tiles .thumb[data-shape="hex"] .cap::after {
  content: "Usual pick"; display: block; margin-top: 2px; font-size: 12px; letter-spacing: 0.04em; text-transform: none; color: #2A2118;
}
.guide #st-group-mode .mode-pill[data-group-mode="terrain"]::after {
  content: "Usual pick"; display: block; font-size: 12px; letter-spacing: 0.04em; text-transform: none;
}
.guide .gs-style, .guide .gs-paint, .guide [data-slot="tiles"], .guide .gs-tileshape { display: flex; flex-direction: column; gap: 12px; }
.guide .gs-paint .toggle-hint, .guide [data-slot="tiles"] .note { font-size: 13.5px; }
/* The Studio's switches (painted color, snow, rivers), 44 px tall while
   they are in the guide, so a thumb can press them. */
.guide .toggle .switch { width: 70px; height: 44px; border-radius: 22px; }
.guide .toggle .switch span { width: 38px; height: 38px; }
.guide .toggle .switch[aria-checked="true"] span { left: 28px; }
/* The Studio's small labels, at 12 px while they are in the guide. */
.guide .toggle-label, .guide .dial-label, .guide .colors3mf, .guide .font-opt .fo-why,
.guide .bedf .cap, .guide .bedf .inch, .guide .unit { font-size: 12px; }

/* Back, Continue and Build. */
.gs-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.gs-foot .gs-next:only-child { margin-left: auto; }
.gs-back, .gs-next, .gs-secondary {
  min-height: 48px; padding: 0 18px; border-radius: 2px; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
}
.gs-back { background: transparent; border: 1px solid #6F5310; color: #6F5310; }
.gs-back:hover { background: rgba(111, 83, 16, 0.07); }
.gs-next { flex: 1; max-width: 300px; background: #6F5310; border: 1px solid #6F5310; color: #F4EFE4; }
.gs-next:hover { background: #5F470E; }
.gs-next:disabled, .gs-next:disabled:hover { cursor: not-allowed; background: transparent; border: 1px dashed #6A5C42; color: #6A5C42; }
.gs-next .gs-busy { display: none; }
.gs-next.busy .gs-busy { display: inline; }
.gs-next.busy .gs-idle { display: none; }

/* The Studio's own controls while they are here: their type at 12 px and
   over, readouts in chocolate, chosen things in gold-deep, the Surveyed
   badge in abyssal. */
.guide .readout { color: #2A2118; }
.guide .row-sub { font-size: 12.5px; }
.guide .row-type { font-size: 12px; color: #6A5C42; }
.guide .lake-badge { font-size: 12px; }
.guide .lake-badge.surv { background: rgba(32, 74, 94, 0.1); color: #204A5E; }
.guide .lake-badge.est { background: rgba(170, 110, 40, 0.14); color: #74501A; }
.guide .lab, .guide .thumb .cap { font-size: 12px; }
.guide .note { font-size: 13.5px; }
.guide .mode-pill.active { background: #6F5310; color: #F4EFE4; }
.guide .thumb.on { border-color: #6F5310; box-shadow: inset 0 0 0 1px #6F5310; }
.guide .thumb.on .cap { color: #6F5310; }
.guide .gs-laser .pills { display: flex; border: 1px solid var(--border); border-radius: 2px; overflow: hidden; background: var(--surface); }
.guide .gs-laser .mode-pill { flex: 1; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.guide .pill-tag { display: block; font-size: 12px; letter-spacing: 0.04em; text-transform: none; }
.guide .stack-ro { margin-top: 6px; }
/* 3D print and CNC, step 4: the Studio's frame and engraving controls, with
   the room the decks give them; its own text fields at 44 px. */
.gs-model-finish { display: flex; flex-direction: column; gap: 18px; }
.guide .emboss-input { min-height: 44px; }

/* Any other place (2026-10-10). Step 2 in Space: the Studio's world list
   and its chosen line. Step 3: the Studio's relief cap sentence, shown only
   while a cap holds the slider (studio.js applyReliefCap). Step 4: the
   Studio's frame shapes under the Frame card. */
.gs-world { display: flex; flex-direction: column; gap: 8px; }
.gs-world .gs-label { margin-bottom: 0; }
.guide .space-groups { gap: 12px; }
.guide .world-group .lab { font-size: 13px; color: #2A2118; }
.guide .pills.worlds .mode-pill { min-height: 44px; color: #2A2118; }
.guide .pills.worlds .mode-pill.active { background: #6F5310; color: #F4EFE4; }
.guide .pills.worlds .mode-pill .pill-tag, .guide .world-chosen-name .pill-tag { font-size: 12px; }
.guide .world-chosen { border-color: #6F5310; }
.guide .world-change { font-size: 12px; color: #6F5310; border-color: #6F5310; }
.guide #st-relief-note:not([data-cap]) { display: none; }
.gs-fshape { padding: 4px 0 8px; }
.guide .fshapes { gap: 8px; }
.guide .fshape { min-height: 44px; }
.guide .fshape.on { border-color: #6F5310; box-shadow: inset 0 0 0 1px #6F5310; }
.guide .fshape .fs-name { font-size: 12px; letter-spacing: 0.04em; color: #2A2118; }
.guide .fshape.on .fs-name { color: #6F5310; }
.guide .fshape .fs-badge { font-size: 12px; letter-spacing: 0.04em; color: #2A2118; border-color: #6A5C42; background: transparent; }
.guide .fshape .fs-cost { font-size: 12px; color: #2A2118; }
.guide .fshape .fs-sub { font-size: 12px; color: #6A5C42; }

/* Ready. */
.gs-ready { display: flex; flex-direction: column; gap: 14px; padding: 4px 18px 28px; }
.gs-ready[hidden] { display: none; }
.gs-get { padding: 12px 14px; border: 1px solid var(--border); border-radius: 2px; background: #FAF7F2; }
.gs-get-label { margin-bottom: 4px; }
.gs-get-text { font-size: 15px; color: #2A2118; }
.gs-buy { display: flex; flex-direction: column; gap: 10px; }
.guide .gs-buy .buy-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 12px 18px;
  border: 0; border-radius: 2px; background: #6F5310; color: #F4EFE4; opacity: 1;
  font: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
}
.guide .gs-buy .buy-btn:hover { background: #5F470E; }
.guide .gs-buy .buy-btn[hidden] { display: none; }
.guide .gs-buy .who-line { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 13px; letter-spacing: 0.02em; color: #6A5C42; }
.guide .gs-buy .who-line[hidden] { display: none; }
.guide .gs-buy .who-sent-input { width: 100%; min-height: 44px; margin: 0; font-size: 15px; }
.gs-secondary { background: transparent; border: 1px solid #6F5310; color: #6F5310; }
.gs-secondary:hover { background: rgba(111, 83, 16, 0.07); }

/* ── Phones: the stage on top, the guide under it, Continue as a gold bar
   pinned to the bottom of the screen in place of Generate model. ───── */
.gs-bar { display: none; }
.gs-dock-bar, .gs-files { display: none; }
@media (max-width: 1023px) {
  .gs-head { position: static; }
  .guide .gs-next { display: none; }
  .gs-foot { justify-content: flex-start; }
  body.gs-on .phone-generate { display: none !important; }
  body.gs-on .gs-bar:not([hidden]) { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; }
  .gs-bar-btn {
    display: block; width: 100%; height: calc(52px + env(safe-area-inset-bottom, 0px));
    padding: 0 16px env(safe-area-inset-bottom, 0px); border: 0; border-radius: 0; cursor: pointer;
    background: #6F5310; color: #F4EFE4; box-shadow: 0 -2px 10px rgba(40, 28, 12, 0.18);
    font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  }
  .gs-bar-btn:hover { background: #5F470E; }
  .gs-bar-btn:disabled, .gs-bar-btn:disabled:hover { cursor: not-allowed; background: #E9E1D0; color: #5A4D36; box-shadow: 0 -1px 0 #C4B89A; }
  .gs-bar-btn:focus-visible { outline: 2px solid #2A2118; outline-offset: -4px; }
  /* Out of the way of the on-screen keyboard, as Generate model is. */
  body.gs-on:has(input[type="text"]:focus, input[type="number"]:focus, input:not([type]):focus) .gs-bar { display: none !important; }
  /* Once a place is picked, every step and Ready (pol-guide; every step
     since guide-v2, guide.js data-guide-dock): the model stays in view while
     the visitor picks. Under the stage the guide sat below the data lines
     and the action bar, so a pick changed a model scrolled off the top of
     the screen; the guide docks at the foot of the screen in the 56 % the
     stage's 44vh leaves, scrolls on its own with its head on top, and
     settles back into its place when the page is scrolled down past it
     (guide.js keepStageInView). Cream sheet, as the Studio's settings
     sheet. While a step is open the Continue bar sits over its foot, so the
     guide keeps that much room under its last line. The place step is not
     docked: there is no model yet, and the search's list needs the room. */
  #screen-b[data-guide="on"]:not([data-guide-dock]) .guide { overflow: visible; }
  #screen-b[data-guide-dock] .sidebar {
    position: sticky; bottom: 0; z-index: 860; max-height: 56vh; max-height: 56dvh; overflow: hidden;
    background: #F4EFE4; border-top: 1px solid #C4B89A; border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 16px rgba(40, 28, 12, 0.12);
  }
  #screen-b[data-guide-dock] .guide { overflow-y: auto; overscroll-behavior: contain; border-radius: 12px 12px 0 0; }
  #screen-b[data-guide-dock]:not([data-guide-ready]) .guide { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  #screen-b[data-guide-dock] .gs-head { position: sticky; }
  /* The docked panel's handle (pol-download): the settings sheet's own
     (studio.css .sheet-handle), on top of the panel; a tap lowers the panel
     to the handle alone, so the data lines and the file buttons show, and
     raises it again (guide.js setDockLow). */
  #screen-b[data-guide-dock] .gs-dock-bar { display: flex; flex: 0 0 auto; border-bottom: 1px solid #D4C8B0; }
  #screen-b[data-guide-dock][data-guide-low] .gs-dock-bar { border-bottom-color: transparent; }
  #screen-b[data-guide-dock][data-guide-low] .sidebar { max-height: var(--sheet-closed-h, 56px); }
  #screen-b[data-guide-dock][data-guide-low] .guide { display: none; }
  /* The downloads in the Ready panel, for an account that can download
     (studio.js fileTwins): in place of the line that points under the
     preview, which the docked panel covers. */
  .gs-files:not([hidden]) { display: flex; gap: 8px; }
  .guide .gs-file { flex: 1 1 0; min-width: 0; min-height: 44px; justify-content: center; padding: 8px 6px;
    white-space: normal; text-align: center; line-height: 1.3; border-color: #6F5310; color: #6F5310; background: transparent; }
  .guide .gs-file:hover { background: rgba(111, 83, 16, 0.07); }
  .guide .gs-file[hidden] { display: none; }
  .gs-ready:has(.gs-files:not([hidden])) #gs-buy-none { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gs-body, .gs-clip, .gs-seg i { transition: none !important; }
}