/* ═══════════════════════════════════════════════════════════════════════
   maker.css · The Maker (maker.html)
   Preview = a paper "specimen plate" in both themes, so the line drawings
   keep their ink. Everything else uses the site tokens. Sharp edges only.
   ═══════════════════════════════════════════════════════════════════════ */

.maker{
  --mk-plate: #F1EEE8;
  --mk-ink: #1b1b19;
  --mk-top: 4.75rem;              /* clears the fixed running head */
  max-width:var(--max);
  margin:0 auto;
  padding:var(--mk-top) var(--pad) 0;
  min-height:100vh;
}
:where(.maker button:not(.cta)){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.maker button:disabled{cursor:not-allowed}
.maker :is(button,a,input,textarea,summary):focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.mk-title:focus{outline:none}


/* ─── LANDING ─── */
.mk-start{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:2rem 4rem;
  align-items:center;
  padding:3rem 0 var(--sec);
}
.mk-h1{font-size:clamp(3rem,7vw,6.25rem);line-height:1;margin:1.25rem 0 1.5rem}
.mk-begin{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem}
.mk-begin[hidden]{display:none}
.mk-fine{font-family:var(--body);font-size:.85rem;color:var(--mute);margin-top:1.5rem;max-width:48ch}
.mk-hero-art{
  background:var(--mk-plate);
  border:1px solid var(--rule);
  height:min(68vh,560px);
  display:grid;place-items:center;
  padding:1.5rem;
}
.mk-hero-art svg,.mk-hero-art img{height:100%;width:auto;max-width:100%}
.mk-recipes-wrap{grid-column:1 / -1;margin-top:2rem}
.mk-recipes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1rem;list-style:none;padding:0}
.mk-recipe{
  width:100%;height:100%;
  display:grid;gap:.4rem;align-content:start;text-align:left;
  border:1px solid var(--rule);
  padding:.75rem;
  transition:border-color .3s ease, background .3s ease;
}
.mk-recipe:hover{border-color:var(--ink);background:var(--bg-tint)}
.mk-recipe-art{background:var(--mk-plate);height:220px;display:flex;justify-content:center;align-items:center;padding:.75rem;margin-bottom:.5rem}
.mk-recipe-art :is(svg,img){height:100%;width:auto}


/* ─── STEPS ─── */
.mk-steps{border-bottom:1px solid var(--rule);margin:1rem 0 1.5rem}
.mk-steps-list{display:flex;gap:.25rem 2rem;list-style:none;padding:0;margin:0;overflow-x:auto;scrollbar-width:none}
.mk-step{
  position:relative;
  display:flex;gap:.6rem;align-items:baseline;
  font-family:var(--sans);font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--mute);
  padding:1rem 0;
  white-space:nowrap;
}
.mk-step-n{color:var(--accent-text)}
.mk-step:not(:disabled):hover,.mk-step.is-done{color:var(--ink-soft)}
.mk-step.is-current{color:var(--ink)}
.mk-step.is-current::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink)}
.mk-step:disabled{opacity:.45}
.mk-steps-compact{display:none}


/* ─── STAGE: preview + panel ─── */
.mk-stage{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(340px,460px);
  gap:3rem;
  align-items:start;
}
.mk-preview{
  position:sticky;
  top:calc(var(--mk-top) + 1rem);
  height:calc(100vh - var(--mk-top) - 6rem);
  min-height:420px;
  background:var(--mk-plate);
  border:1px solid var(--rule);
  display:grid;grid-template-rows:minmax(0,1fr) auto;
  padding:1.5rem 1.5rem 1rem;
  margin:0;
}
.mk-svg{height:100%;width:100%}
/* 3D view (maker-3d.js): one canvas, moved between hero and preview */
.mk-3d{display:block;width:100%;height:100%;min-width:0;min-height:0;touch-action:pan-y;animation:mk-fade .6s var(--ease-archival) both}
.mk-3d:focus-visible{outline:1px solid var(--mk-ink);outline-offset:-4px}
img.mk-thumb,img.mk-swatch{display:block;object-fit:contain}
.mk-preview figcaption{text-align:center;margin-top:.75rem;font-size:.6rem;color:#5a5a57}

/* SVG parts · fixed colours: they sit on the paper plate in both themes */
.mk-frame{fill:none;stroke:var(--mk-ink);stroke-width:1.2;stroke-linejoin:miter}
.mk-frame.outer{stroke-width:3.5}
.mk-frame.is-empty{stroke:#8d8a83;stroke-dasharray:5 5}
.mk-atmos{transition:opacity .5s ease}
.mk-atmos.is-dim{opacity:.5}
.mk-rod{stroke:#3a3a36;stroke-width:1.4}
.st{fill:none;stroke:#2a2f22;stroke-width:1.3;stroke-linecap:round}
.lf{fill:#62734f;stroke:#2a2f22;stroke-width:.7}
.ro{fill:#8a9c80}.ro.in{fill:#a7b69c}
.st.air{stroke:#7f9474;stroke-width:2.4}
.st.fern{stroke:#4f6340;stroke-width:1.1}
.moss{fill:#55663f;stroke:#2a2f22;stroke-width:.6}
.moss-dot{fill:#7c8f5f}
.trap{fill:#7c4a3c;stroke:#2a2f22;stroke-width:.6}
.trap.hood{fill:#9a5a48}
.b-drain{fill:#a7a297}.b-pebble{fill:#8d887c}.b-char{fill:#2b2a26}
.b-soil{fill:#5a4532}.b-soil.aroid{fill:#6b4b30}
.b-bark{fill:#94683f}.b-perlite{fill:#f3f0e8}.b-grain{fill:#6e5640}
.mk-bands{animation:mk-fade .5s ease both}
.mk-plant.is-new{animation:mk-grow .7s var(--ease-rise) both;transform-box:fill-box;transform-origin:50% 100%}
@keyframes mk-grow{from{transform:scale(.25);opacity:0}to{transform:none;opacity:1}}
@keyframes mk-fade{from{opacity:0}to{opacity:1}}


/* ─── PANEL ─── */
.mk-panel{min-width:0}
.mk-panel-head{margin-bottom:1.25rem}
.mk-title{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.1}
.mk-line,.mk-note,.mk-empty p,.mk-sub{font-family:var(--body);color:var(--ink-soft);line-height:1.6}
.mk-line{margin-top:.5rem}
.mk-note{font-size:.88rem;border-left:1px solid var(--accent);padding-left:.9rem;margin-bottom:1.25rem}
.mk-empty{border:1px dashed var(--rule-stronger);padding:1.25rem;display:grid;gap:.5rem}

.mk-notice{
  display:flex;gap:1rem;align-items:center;justify-content:space-between;
  background:var(--bg-tint);border:1px solid var(--rule);
  padding:.8rem 1rem;margin-bottom:1.25rem;
  font-family:var(--body);font-size:.88rem;line-height:1.5;
}

/* Cards (chambers, foundations) */
.mk-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.mk-list{display:grid;gap:.75rem}
.mk-card{
  position:relative;
  display:grid;gap:.6rem;align-content:start;
  text-align:left;
  border:1px solid var(--rule);
  background:var(--bg);
  padding:.7rem;
  transition:border-color .25s ease, background .25s ease;
}
.mk-card:not(:disabled):hover{border-color:var(--rule-stronger);background:var(--bg-tint)}
.mk-card.is-on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.mk-card:disabled{opacity:.6}
.mk-row{grid-template-columns:96px minmax(0,1fr);align-items:center;padding-right:5.5rem}
.mk-card-img{display:block;aspect-ratio:5 / 4;background:#111;overflow:hidden}
.mk-card-img img{width:100%;height:100%;object-fit:cover}
.mk-card-img.is-missing{background:var(--bg-tint)}
.mk-card-body{display:grid;gap:.25rem;min-width:0}
.mk-card-name{font-family:var(--serif);font-size:1.3rem;line-height:1.15;color:var(--ink)}
.mk-card-desc{font-family:var(--body);font-size:.84rem;line-height:1.45;color:var(--ink-soft)}
.mk-card-meta{font-family:var(--sans);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);line-height:1.6}
.mk-card-price{font-family:var(--sans);font-size:.68rem;letter-spacing:.12em;color:var(--ink);margin-top:.15rem}
.mk-tag{font-family:var(--sans);font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--accent);color:var(--accent-text);padding:.15rem .35rem;vertical-align:middle}
.mk-check{
  position:absolute;top:.7rem;right:.7rem;
  font-family:var(--sans);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;
  background:var(--bg);color:var(--mute);border:1px solid var(--rule);padding:.3rem .45rem;
}
.mk-card.is-on .mk-check{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.mk-card.is-on .mk-check::before{content:"✓ "}
.mk-why{font-family:var(--body);font-size:.8rem;font-style:italic;color:var(--accent-text)}
.mk-swatch{width:96px;height:44px;display:block;border:1px solid var(--rule)}

/* Plants */
.mk-count{font-family:var(--sans);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin-bottom:.75rem}
.mk-count strong{color:var(--ink);font-weight:400}
.mk-tray{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0;margin:0 0 1rem}
.mk-tray li{display:flex;align-items:center;gap:.2rem;border:1px solid var(--ink);padding-left:.6rem;font-family:var(--body);font-size:.8rem}
.mk-tray button{width:34px;height:34px;font-size:1rem;color:var(--ink-soft)}
.mk-tray button:hover{color:var(--ink);background:var(--bg-tint)}
.mk-filter{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem}
.maker .selector-chip{border:1px solid var(--rule);padding:.5rem .8rem;font-family:var(--sans);font-size:.6rem}
.maker .selector-chip.active{background:var(--ink);color:var(--reverse);border-color:var(--ink)}
.mk-plants{list-style:none;padding:0;margin:0}
.mk-plant-row{
  display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:.9rem;align-items:center;
  padding:.55rem 0;border-bottom:1px solid var(--rule);
}
.mk-plant-row.is-off{opacity:.62}
.mk-plant-row .mk-card-name{font-size:1.1rem}
.mk-thumb{width:56px;height:64px;background:var(--mk-plate);border:1px solid var(--rule)}
.mk-add{
  min-width:5.5rem;min-height:44px;
  font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  border:1px solid var(--ink);padding:.5rem .8rem;
  transition:background .25s ease,color .25s ease;
}
.mk-add:hover:not(:disabled){background:var(--bg-tint)}
.mk-add.is-on{background:var(--ink);color:var(--bg)}
.mk-add:disabled{border-color:var(--rule);color:var(--mute)}
.mk-more{margin-top:1.25rem}
.mk-more summary{cursor:pointer;font-family:var(--sans);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);padding:.6rem 0}
.mk-more summary:hover{color:var(--ink)}

/* Your space */
.mk-space{display:grid;gap:1.5rem}
.mk-space fieldset{border:0;padding:0;margin:0}
.mk-space legend,.mk-field > span{font-family:var(--sans);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mute);margin-bottom:.6rem}
.mk-choices{display:flex;flex-wrap:wrap;gap:.4rem}
.mk-choices-wide{display:grid}
.mk-choice{position:relative;cursor:pointer}
.mk-choice input{position:absolute;opacity:0;width:1px;height:1px}
.mk-choice span{
  display:block;
  font-family:var(--body);font-size:.88rem;color:var(--ink-soft);
  border:1px solid var(--rule);padding:.55rem .85rem;min-height:44px;
  display:flex;align-items:center;
  transition:border-color .2s ease,background .2s ease;
}
.mk-choice:hover span{border-color:var(--rule-stronger)}
.mk-choice input:checked + span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.mk-choice input:checked + span::before{content:"✓\00a0"}
.mk-choice input:focus-visible + span{outline:1px solid var(--ink);outline-offset:3px}
.mk-field{display:grid}
.mk-field textarea,.mk-field input{
  font-family:var(--body);font-size:.95rem;color:var(--ink);
  background:var(--bg);border:1px solid var(--rule);border-radius:0;
  padding:.65rem .75rem;width:100%;
}
.mk-field textarea{resize:vertical;line-height:1.5}
.mk-field :is(textarea,input):focus{outline:none;border-color:var(--ink)}

/* Review */
.mk-name{margin-bottom:1.5rem}
.mk-name input{font-family:var(--serif);font-size:1.5rem}
.mk-group{border-top:1px solid var(--rule);padding:.9rem 0}
.mk-group header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}
.mk-group h3{font-size:.6rem}
.mk-edit,.mk-x{
  font-family:var(--sans);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1px solid var(--rule);padding:.35rem 0;
}
.mk-edit:hover,.mk-x:hover{color:var(--ink);border-bottom-color:currentColor}
.mk-x{font-size:.9rem;margin-left:.6rem;padding:0 .3rem;min-width:28px;min-height:28px}
.mk-items{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}
.mk-item{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(--body);font-size:.95rem;color:var(--ink)}
.mk-item > span:last-child{font-family:var(--sans);font-size:.66rem;letter-spacing:.1em;color:var(--ink-soft);white-space:nowrap}
.mk-sub{font-size:.82rem;margin-top:.2rem}
.mk-total{border-top:1px solid var(--ink);padding:1rem 0;margin-top:.25rem}
.mk-total .mk-item{font-family:var(--serif);font-size:1.4rem}
.mk-total .mk-item > span:last-child{font-family:var(--serif);font-size:1.4rem;letter-spacing:0;color:var(--ink)}
.mk-send{display:grid;gap:.75rem;padding-bottom:1.5rem}
.mk-secondary{display:flex;flex-wrap:wrap;gap:.5rem}
.mk-sent,.mk-copied{font-family:var(--body);font-size:.82rem;color:var(--ink-soft)}
.mk-sent:empty,.mk-copied:empty{display:none}
.mk-copied .input{margin-top:.4rem;font-size:.8rem}

/* Bar · sticks to the bottom of the viewport while the panel scrolls */
.mk-bar{
  position:sticky;bottom:0;z-index:4;
  background:var(--bg);
  border-top:1px solid var(--rule);
  margin-top:1.5rem;
  padding:.85rem 0 1rem;
  display:grid;gap:.6rem;
}
.mk-sum{font-family:var(--body);font-size:.85rem;color:var(--ink-soft)}
.mk-sum strong{font-weight:400;color:var(--ink)}
.mk-error{font-family:var(--body);font-size:.85rem;color:var(--accent-text)}
.mk-error::before{content:"! ";font-weight:700}
.mk-nav{display:flex;gap:.6rem;justify-content:flex-end}
.mk-build{padding-block:0 var(--sec)}
.mk-build[hidden],.mk-start[hidden]{display:none}


/* ─── MOBILE ─── */
@media (max-width:900px){
  .maker{--mk-top:4.25rem}
  .mk-start{grid-template-columns:1fr;padding-top:1.5rem}
  .mk-hero-art{height:44vh;order:-1}
  .mk-recipes{grid-template-columns:1fr}
  .mk-recipe{grid-template-columns:110px 1fr;column-gap:1rem}
  .mk-recipe-art{grid-row:span 3;height:130px;margin:0}

  .mk-steps{margin:.25rem 0 0}
  .mk-steps-list{gap:1.25rem}
  .mk-step:not(.is-current) .mk-step-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .mk-stage{grid-template-columns:1fr;gap:1rem}
  .mk-preview{
    top:var(--mk-top);z-index:3;
    height:34vh;min-height:220px;
    padding:.75rem .75rem .5rem;
    box-shadow:0 1px 0 var(--rule);
  }
  .mk-preview figcaption{margin-top:.35rem;font-size:.52rem;letter-spacing:.18em}
  .mk-nav .cta{flex:1}
  .mk-build{padding-bottom:2rem}
}
@media (max-width:480px){
  .mk-cards{grid-template-columns:1fr}
  .mk-chamber{grid-template-columns:110px minmax(0,1fr);align-items:center;padding-right:.7rem}
  .mk-chamber .mk-check{top:auto;bottom:.7rem}
  .mk-row{grid-template-columns:72px minmax(0,1fr)}
  .mk-swatch{width:72px}
}

@media (prefers-reduced-motion:reduce){
  .mk-plant.is-new,.mk-bands,.mk-3d{animation:none}
  .mk-atmos{transition:none}
}
[data-stage="review"] .mk-bar{position:static}

/* ── Plants step: discovery (search · list/map · guided) ─────────── */
.mk-disc{display:grid;grid-template-columns:minmax(0,1fr) auto;border:1px solid var(--ink);margin-bottom:.6rem}
.mk-search input{width:100%;min-height:48px;padding:.7rem .9rem;border:0;background:transparent;color:var(--ink);font-family:var(--body);font-size:1rem}
.mk-search input:focus-visible{outline:1px solid var(--ink);outline-offset:-4px}
.mk-guide-btn{border-left:1px solid var(--ink);padding:0 1rem;font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;background:var(--ink);color:var(--bg)}
.mk-guide-btn:hover{background:var(--ink-soft)}
.mk-disc-tools{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.6rem 1rem;margin-bottom:1rem}
.mk-views{display:inline-flex;border:1px solid var(--rule-stronger)}
.mk-views button{min-height:40px;padding:0 1rem;font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.mk-views button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.mk-refine{flex:1 1 12rem}
.mk-refine summary{cursor:pointer;min-height:40px;display:flex;align-items:center;font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.mk-refine summary:hover{color:var(--ink)}
.mk-refine-body{display:grid;gap:.9rem;padding:.6rem 0 .4rem}
.mk-refine fieldset{border:0;padding:0;margin:0}
.mk-refine legend{margin-bottom:.4rem}
.mk-check-row{display:flex;gap:.5rem;align-items:center;font-family:var(--body);font-size:.88rem}
.mk-check-row input{width:18px;height:18px;accent-color:var(--ink)}
.mk-sort select{margin-left:.5rem;min-height:36px;border:1px solid var(--rule-stronger);background:var(--bg);color:var(--ink);font-family:var(--body);padding:0 .5rem}

.mk-found{font-family:var(--serif);font-size:1.15rem;color:var(--ink);margin-bottom:.5rem}
.mk-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem}
.mk-chip{min-height:34px;padding:0 .7rem;border:1px solid var(--ink);font-family:var(--body);font-size:.8rem;color:var(--ink)}
.mk-chip.is-guided{border-style:dashed}
.mk-chip:hover{background:var(--bg-tint)}
.mk-clear{min-height:34px;padding:0 .3rem;font-family:var(--sans);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
.mk-hint{font-family:var(--body);font-size:.8rem;font-style:italic;color:var(--ink-soft);margin-bottom:.75rem}
.mk-none .mk-relax{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem}

.mk-bot{font-family:var(--body);font-style:italic;font-size:.8rem;color:var(--ink-soft)}
.mk-plant-row .mk-detail{grid-column:2 / -1}
.mk-detail summary{cursor:pointer;font-family:var(--sans);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);padding:.2rem 0;width:max-content}
.mk-detail summary:hover{color:var(--ink)}
.mk-dl{display:grid;gap:.35rem;margin:.5rem 0 .3rem}
.mk-dl div{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:.5rem;font-size:.82rem}
.mk-dl dt{font-family:var(--sans);font-size:.54rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);padding-top:.2rem}
.mk-dl dd{margin:0;font-family:var(--body);color:var(--ink-soft)}
.mk-switch{min-width:auto}

/* Map: one region per plant group, driest → most humid */
.mk-map-key{margin-bottom:.6rem}
.mk-map{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.mk-region{background:var(--bg);padding:.8rem;display:flex;flex-direction:column;gap:.35rem;min-width:0}
.mk-region.is-fit{background:var(--mk-plate);color:#1a1a1a}
.mk-region.is-empty{opacity:.5}
.mk-region-head{display:flex;align-items:center;justify-content:space-between;gap:.4rem}
.mk-region-name{font-family:var(--serif);font-size:1.15rem}
.mk-region-none{font-family:var(--body);font-size:.8rem;font-style:italic;color:var(--mute)}
.mk-pins{display:flex;flex-wrap:wrap;gap:.3rem}
.mk-pin{position:relative;padding:0;line-height:0}
.mk-pin .mk-thumb{width:40px;height:46px}
.mk-pin[aria-pressed="true"] .mk-thumb{border-color:var(--ink);outline:1px solid var(--ink)}
.mk-pin.is-on::after{content:"✓";position:absolute;right:-3px;top:-3px;width:15px;height:15px;line-height:15px;font-size:.6rem;text-align:center;background:var(--ink);color:var(--bg)}
.mk-pin-card{border-top:1px solid var(--rule-stronger);padding-top:.6rem;margin-top:.2rem;display:grid;gap:.35rem;justify-items:start}
.mk-pin-card .mk-card-name{font-size:1.05rem}
.mk-region.is-fit .mk-card-name,.mk-region.is-fit .mk-region-name{color:#1a1a1a}
.mk-region.is-fit .mk-card-meta,.mk-region.is-fit .mk-bot,.mk-region.is-fit .mk-dl dd{color:#4a4a4a}
.mk-region.is-fit .mk-add{border-color:#1a1a1a;color:#1a1a1a}
.mk-region.is-fit .mk-add.is-on{background:#1a1a1a;color:#F1EEE8}

/* Guided search dialog */
.mk-guide{width:min(640px,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);padding:0;border:1px solid var(--ink);background:var(--bg);color:var(--ink)}
.mk-guide::backdrop{background:rgba(20,20,18,.55)}
.mk-gd{padding:1.5rem 1.75rem 1.75rem;display:grid;gap:1rem}
.mk-gd-head{display:flex;justify-content:space-between;align-items:center}
.mk-gd-x{width:44px;height:44px;font-size:1.4rem;margin:-.6rem -.8rem -.6rem 0;color:var(--ink-soft)}
.mk-gd-x:hover{color:var(--ink)}
.mk-gd-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:.3rem}
.mk-gd-steps button{width:100%;height:24px;position:relative}
.mk-gd-steps button::before{content:"";position:absolute;inset:auto 0 10px;height:3px;background:var(--rule)}
.mk-gd-steps button.is-done::before{background:var(--ink-soft)}
.mk-gd-steps button.is-current::before{background:var(--ink)}
.mk-gd-opts{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.mk-gd-opts.is-compact{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Exactly three options (care): one row, so none sits alone. */
@media (min-width:641px){.mk-gd-opts:has(> .mk-gd-opt:nth-of-type(3):last-of-type){grid-template-columns:repeat(3,minmax(0,1fr))}}
.mk-gd-opt{position:relative;cursor:pointer}
.mk-gd-opt input{position:absolute;opacity:0;width:1px;height:1px}
.mk-gd-opt span{display:grid;gap:.2rem;min-height:56px;align-content:center;padding:.8rem .9rem;border:1px solid var(--rule-stronger);height:100%}
.mk-gd-opt strong{font-family:var(--serif);font-weight:400;font-size:1.1rem}
.mk-gd-opt em{font-family:var(--body);font-size:.8rem;color:var(--ink-soft)}
.mk-gd-opt:hover span{border-color:var(--ink)}
.mk-gd-opt input:checked + span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.mk-gd-opt input:checked + span em{color:inherit;opacity:.8}
.mk-gd-opt input:focus-visible + span{outline:1px solid var(--ink);outline-offset:3px}
.mk-gd-foot{display:flex;justify-content:space-between;gap:.75rem;margin-top:.5rem}

@media (max-width:640px){
  .mk-guide{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border:0}
  .mk-gd{min-height:100%;grid-template-rows:auto auto auto auto 1fr auto;padding:1rem 16px calc(1rem + env(safe-area-inset-bottom))}
  .mk-gd-opts,.mk-gd-opts.is-compact{grid-template-columns:1fr 1fr;align-content:start}
  .mk-gd-foot{position:sticky;bottom:0;background:var(--bg);padding-top:.75rem}
  .mk-gd-foot .cta{flex:1;justify-content:center}
  .mk-map{grid-template-columns:1fr 1fr}
  .mk-region{padding:.6rem}
}
@media (max-width:380px){ .mk-map{grid-template-columns:1fr} }
.mk-found:focus{outline:none}