/* flow.css — the creation-flow prototypes (/preview/flow-*): one shell, styled entirely from the theme tokens
   (tokens-route.css / tokens-keepsake.css), so every flow takes any theme (?theme=a|b|c).
   Layout: phone = a visual stage on top, the step below, the main button pinned in the thumb zone; desktop (≥ 900 px)
   = the stage fills the left, the step lives in a 440 px column on the right with its button at the bottom. */

.route{--btn-case:uppercase;--btn-track:.06em;--btn-font:var(--label);--btn-wt:800;--title-max:13ch}
.keepsake{--btn-case:none;--btn-track:0;--btn-font:var(--display);--btn-wt:700;--title-max:16ch}
.keepsake.theme-b{--btn-font:var(--body);--btn-wt:650}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font:var(--b-wt,400) var(--b-size,17px)/1.5 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input{font:inherit;color:inherit}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ------------------------------------------------------------------ shell */
.fl{min-height:100dvh;display:flex;flex-direction:column}
.fl-top{position:sticky;top:0;z-index:40;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:6px;
  padding:calc(6px + env(safe-area-inset-top,0px)) 8px 6px;background:color-mix(in srgb,var(--bg) 90%,transparent);
  -webkit-backdrop-filter:saturate(1.2) blur(12px);backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid var(--line)}
.fl-icon{width:48px;height:48px;display:grid;place-items:center;border:0;background:none;border-radius:var(--radius-pill);color:var(--fg);text-decoration:none;cursor:pointer}
.fl-icon svg{width:22px;height:22px}
.fl-icon:hover{background:var(--surface-2)}
.fl-icon[aria-disabled="true"]{visibility:hidden}
.fl-where{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.fl-steplabel{font:var(--l-wt) 12px/1 var(--label);letter-spacing:var(--l-track);text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fl-steplabel b{color:var(--fg);font-weight:inherit}

.fl-main{flex:1;display:flex;flex-direction:column;min-height:0}
.fl-stage{position:relative;height:clamp(250px,50dvh,560px);background:var(--surface-2);overflow:hidden;isolation:isolate;flex:none}
.fl[data-stage="off"] .fl-stage{display:none}
.st-layer{position:absolute;inset:0;z-index:1;opacity:0;visibility:hidden;transition:opacity .38s cubic-bezier(.2,.7,.1,1),visibility 0s linear .38s}
.fl-stage[data-view="map"] .st-map,.fl-stage[data-view="3d"] .st-3d,.fl-stage[data-view="art"] .st-art{opacity:1;visibility:visible;transition:opacity .38s cubic-bezier(.2,.7,.1,1),visibility 0s}
.st-3d iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.st-art{display:grid;place-items:center;background:var(--bg)}
.st-art img{width:min(92%,760px);height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.18))}
.st-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:6;padding:7px 12px;border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--fg);font:600 13px/1.2 var(--body);white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.12);pointer-events:none;transition:opacity .3s}
.st-tools{position:absolute;top:10px;right:10px;z-index:6;display:flex;gap:6px}
.st-tool{min-height:40px;padding:0 12px;border:0;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--surface) 92%,transparent);
  color:var(--fg);font:600 13px/1 var(--body);box-shadow:0 4px 14px rgba(0,0,0,.12);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.st-tool svg{width:16px;height:16px}
.st-tool[aria-pressed="true"]{background:var(--fg);color:var(--bg)}

.fl-panel{flex:1;display:flex;flex-direction:column;padding:22px 20px 0;min-width:0}
.fl-step{display:flex;flex-direction:column;gap:18px;padding-bottom:24px;view-transition-name:panel}
.fl-kicker{font:var(--l-wt) 13px/1.2 var(--label);letter-spacing:var(--l-track);text-transform:uppercase;color:var(--accent)}
.fl-title{margin:0;font:var(--d-wt) clamp(36px,10vw,54px)/var(--d-lh) var(--display);text-transform:var(--d-case);letter-spacing:var(--d-track);max-width:var(--title-max);text-wrap:balance}
.fl-sub{color:var(--muted);max-width:40ch}
.fl-block{display:flex;flex-direction:column;gap:10px}
.fl-block-h{font:var(--l-wt) 13px/1.2 var(--label);letter-spacing:var(--l-track);text-transform:uppercase;color:var(--muted);margin:4px 0 0}
.fl-note{font-size:15px;color:var(--muted)}
.fl-foot{position:sticky;bottom:0;z-index:30;margin:auto -20px 0;padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 0%,transparent),var(--bg) 26%);display:flex;flex-direction:column;gap:8px}
.fl-cta{width:100%;min-height:58px;padding:0 24px;border:0;border-radius:var(--radius-pill);background:var(--accent);color:var(--accent-fg);
  font:var(--btn-wt) 18px/1 var(--btn-font);letter-spacing:var(--btn-track);text-transform:var(--btn-case);display:inline-flex;align-items:center;
  justify-content:center;gap:10px;cursor:pointer;text-decoration:none;box-shadow:0 10px 24px -12px var(--accent);transition:transform .15s,background .15s}
.fl-cta:hover{background:var(--accent-press)}
.fl-cta:active{transform:translateY(1px) scale(.995)}
.fl-cta svg{width:20px;height:20px}
.fl-cta[disabled],.fl-cta[aria-disabled="true"]{background:var(--surface-2);color:var(--muted);box-shadow:none;cursor:not-allowed}
.fl-ghost{min-height:48px;border:0;background:none;color:var(--fg);font:600 16px/1 var(--body);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.fl-secondary{width:100%;min-height:52px;padding:0 20px;border:1.5px solid var(--fg);border-radius:var(--radius-pill);background:transparent;color:var(--fg);
  font:var(--btn-wt) 16px/1 var(--btn-font);letter-spacing:var(--btn-track);text-transform:var(--btn-case);display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;text-decoration:none}

/* while the designer's data loads (≈ 1 s): a quiet placeholder instead of an empty panel */
.fl-skel{display:flex;flex-direction:column;gap:14px;padding-top:6px}
.fl-skel i{display:block;height:16px;border-radius:8px;background:linear-gradient(90deg,var(--surface-2) 0%,var(--surface) 50%,var(--surface-2) 100%);background-size:200% 100%;animation:fl-shim 1.3s linear infinite}
.fl-skel i:nth-child(1){height:14px;width:34%}
.fl-skel i:nth-child(2){height:48px;width:78%}
.fl-skel i:nth-child(3){width:92%}
.fl-skel i:nth-child(4){height:58px;border-radius:var(--radius-pill);margin-top:8px}
@keyframes fl-shim{to{background-position:-200% 0}}

/* step transitions (View Transitions; direction from <html data-dir>) */
::view-transition-old(panel){animation:fl-out .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(panel){animation:fl-in .34s cubic-bezier(.2,.7,.1,1) both}
@keyframes fl-out{to{opacity:0;transform:translateX(-24px)}}
@keyframes fl-in{from{opacity:0;transform:translateX(32px)}}
html[data-dir="back"]::view-transition-old(panel){animation-name:fl-out-b}
html[data-dir="back"]::view-transition-new(panel){animation-name:fl-in-b}
@keyframes fl-out-b{to{opacity:0;transform:translateX(24px)}}
@keyframes fl-in-b{from{opacity:0;transform:translateX(-32px)}}

@media (min-width:900px){
  .fl{height:100dvh;overflow:hidden}
  .fl-top{grid-template-columns:48px 1fr 48px;padding-inline:16px}
  .fl-main{flex-direction:row}
  .fl-stage,.fl[data-stage="off"] .fl-stage{display:block;flex:1;height:auto}
  .fl[data-stage="off"] .fl-stage{display:block}
  .fl-panel{flex:none;width:clamp(400px,34vw,480px);overflow:auto;padding:40px 36px 0;border-left:1px solid var(--line);background:var(--bg)}
  .fl-foot{margin:auto -36px 0;padding:18px 36px 24px}
  .fl-title{font-size:clamp(40px,3.6vw,58px)}
}

/* the order step: the code matters more than the tile on a phone — a shorter stage keeps it on the first screen */
@media (max-width:899px){
  .fl[data-step="order"] .fl-stage{height:clamp(170px,27dvh,250px)}
  .fl[data-step="frame"] .fl-stage{height:clamp(280px,54dvh,560px)}
}

/* ------------------------------------------------------------------ progress: Route rail (miles) */
.fl-rail{list-style:none;margin:0;padding:0;display:flex;align-items:center;width:min(100%,280px);position:relative}
.fl-rail::before{content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;margin-top:-1px;background:var(--line)}
.fl-rail::after{content:"";position:absolute;left:6px;top:50%;height:2px;margin-top:-1px;background:var(--accent);width:calc((100% - 12px) * var(--p,0));transition:width .5s cubic-bezier(.2,.7,.1,1)}
.fl-rail li{flex:1;display:flex;justify-content:center;position:relative;z-index:1}
.fl-rail li:first-child{justify-content:flex-start}.fl-rail li:last-child{justify-content:flex-end}
.fl-rail i{width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--line);transition:background .3s,border-color .3s,transform .3s}
.fl-rail li.done i{background:var(--accent);border-color:var(--accent)}
.fl-rail li.now i{background:var(--bg);border-color:var(--accent);transform:scale(1.35);box-shadow:0 0 0 4px var(--accent-soft)}

/* ------------------------------------------------------------------ progress: Keepsake tags */
.fl-tags{list-style:none;margin:0;padding:0;display:flex;gap:5px;align-items:center}
.fl-tags li{width:22px;height:6px;border-radius:999px;background:var(--line);transition:width .35s cubic-bezier(.2,.7,.1,1),background .3s}
.fl-tags li.done{background:color-mix(in srgb,var(--accent) 45%,var(--line))}
.fl-tags li.now{width:38px;background:var(--accent)}

/* ------------------------------------------------------------------ search */
.wm-search{position:relative;display:flex;flex-direction:column;gap:8px}
.wm-search-label{font:var(--l-wt) 13px/1.2 var(--label);letter-spacing:var(--l-track);text-transform:uppercase;color:var(--muted)}
.wm-search-field{position:relative;display:flex;align-items:center}
.wm-search-field>svg{position:absolute;left:16px;width:20px;height:20px;color:var(--muted);pointer-events:none}
.wm-search input{width:100%;min-height:58px;padding:0 50px 0 48px;border:2px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);
  font:500 18px/1.2 var(--body);color:var(--fg);-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.wm-search input::placeholder{color:color-mix(in srgb,var(--muted) 85%,transparent)}
.wm-search input:focus{outline:0;border-color:var(--fg);box-shadow:0 0 0 4px var(--accent-soft)}
.wm-search input::-webkit-search-cancel-button{display:none}
.wm-search-clear{position:absolute;right:6px;width:44px;height:44px;border:0;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;border-radius:50%}
.wm-search-clear svg{width:18px;height:18px}
.wm-spin{position:absolute;right:52px;width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:wm-spin .8s linear infinite}
@keyframes wm-spin{to{transform:rotate(1turn)}}
.wm-search-list{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow);overflow:auto;max-height:min(52dvh,420px);padding:6px}
.wm-group{padding:10px 12px 4px;font:var(--l-wt) 12px/1.2 var(--label);letter-spacing:var(--l-track);text-transform:uppercase;color:var(--muted)}
.wm-opt{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;border-radius:calc(var(--radius-lg) - 2px);cursor:pointer}
.wm-opt[aria-selected="true"],.wm-opt:hover{background:var(--surface-2)}
.wm-opt-ic{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.wm-opt-ic svg{width:19px;height:19px}
.wm-opt-tx{display:flex;flex-direction:column;min-width:0}
.wm-opt-tx b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm-opt-tx small{font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm-opt mark{background:none;color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
.wm-empty{padding:14px 12px;color:var(--muted);font-size:15px}
.wm-search-hint{font-size:14px;color:var(--muted);min-height:1em}
.fl-examples{display:flex;flex-wrap:wrap;gap:8px}
.fl-example{min-height:40px;padding:0 14px;border:1.5px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);color:var(--fg);font:500 15px/1 var(--body);cursor:pointer}
.fl-example:hover{border-color:var(--fg)}

/* ------------------------------------------------------------------ chips, switches, colourways, turn */
.wm-chips{display:flex;flex-wrap:wrap;gap:8px}
.wm-chip{min-height:48px;min-width:56px;padding:0 16px;border:1.5px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);color:var(--fg);
  font:600 16px/1 var(--body);cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:border-color .15s,background .15s,color .15s,transform .15s}
.wm-chip small{font-size:12px;font-weight:500;color:var(--muted)}
.wm-chip:hover{border-color:var(--fg)}
.wm-chip[aria-checked="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.wm-chip[aria-checked="true"] small{color:color-mix(in srgb,var(--bg) 75%,transparent)}
.wm-chip:active{transform:scale(.97)}
.fl-area-sentence{font-size:15px;color:var(--muted);min-height:2.6em}

.wm-switches{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.wm-sw-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:8px 0;border-bottom:1px solid var(--line)}
.wm-sw-tx{display:flex;flex-direction:column;min-width:0}
.wm-sw-tx b{font-weight:600}
.wm-sw-tx small{font-size:14px;color:var(--muted)}
.wm-sw{flex:none;position:relative;width:56px;height:32px;border:0;border-radius:999px;background:var(--line);cursor:pointer;transition:background .2s}
.wm-sw span{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .22s cubic-bezier(.2,.7,.1,1)}
.wm-sw[aria-checked="true"]{background:var(--accent)}
.wm-sw[aria-checked="true"] span{transform:translateX(24px)}
.wm-sw::after{content:"";position:absolute;inset:-8px}

.wm-colourways{display:grid;gap:10px}
.wm-cw{display:flex;align-items:center;gap:14px;min-height:72px;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.wm-cw:hover{border-color:var(--muted)}
.wm-cw[aria-checked="true"]{border-color:var(--fg);box-shadow:0 0 0 2px var(--fg) inset}
.wm-cw-sw{flex:none;display:grid;grid-template-columns:repeat(2,18px);gap:3px;padding:6px;border-radius:calc(var(--radius) + 4px);background:var(--surface-2)}
.wm-cw-sw i{width:18px;height:18px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.22)}
.wm-cw-tx{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.wm-cw-tx b{font-weight:650}
.wm-cw-tx small{font-size:14px;color:var(--muted);line-height:1.35}
.wm-cw-tick{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--fg);color:var(--bg);opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s}
.wm-cw-tick svg{width:16px;height:16px}
.wm-cw[aria-checked="true"] .wm-cw-tick{opacity:1;transform:none}

/* phones: colorways as one compact row, so the 3D tile above shows each change without scrolling */
@media (max-width:899px){
  .wm-colourways{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .wm-cw{min-height:60px;padding:10px 12px;gap:10px}
  .wm-cw-tx small{display:none}
  .wm-cw-tick{width:22px;height:22px}
}
.wm-turn{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wm-turn-b{width:48px;height:48px;border:1.5px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--fg)}
.wm-turn-b:hover{border-color:var(--fg)}
.wm-turn-b svg{width:20px;height:20px}
.wm-turn-v{min-width:92px;text-align:center;font:600 15px/1 var(--body);font-variant-numeric:tabular-nums}
.wm-turn-reset{min-height:44px;border:0;background:none;color:var(--accent);font:600 15px/1 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ------------------------------------------------------------------ map */
.wm-framer{position:absolute;inset:0;background:var(--surface-2)}
.wm-map{position:absolute;inset:0;background:var(--surface-2)}
.wm-framer .leaflet-container{background:var(--surface-2);font:12px/1.4 var(--body)}
.wm-framer .leaflet-tile-pane{filter:saturate(.72) contrast(.96)}
.wm-frame{position:absolute;z-index:500;pointer-events:none;border:3px solid #1e1c1a;box-shadow:0 0 0 9999px color-mix(in srgb,var(--bg) 46%,transparent),0 10px 30px rgba(0,0,0,.25);border-radius:2px;transition:width .3s,height .3s,left .3s,top .3s}
.wm-framer.dragging .wm-frame{transition:none}
.wm-frame::before,.wm-frame::after{content:"";position:absolute;left:50%;top:50%;background:#1e1c1a;opacity:.5}
.wm-frame::before{width:14px;height:2px;margin:-1px 0 0 -7px}
.wm-frame::after{width:2px;height:14px;margin:-7px 0 0 -1px}
.wm-frame-tag{position:absolute;left:50%;top:100%;margin-top:10px;translate:-50% 0;padding:6px 10px;border-radius:var(--radius-pill);background:#1e1c1a;color:#fff;font:600 13px/1 var(--body);white-space:nowrap}
.wm-framer.locked .wm-map{cursor:default}

/* ------------------------------------------------------------------ build progress */
.wm-progress{position:absolute;inset:0;z-index:7;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 55%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.wm-progress-card{width:min(86%,340px);padding:18px 20px;border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}
.wm-progress-t{font:var(--d-wt) 22px/1.05 var(--display);text-transform:var(--d-case);letter-spacing:var(--d-track)}
.wm-progress-l{font-size:15px;color:var(--muted);min-height:1.4em}
.wm-progress-bar{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.wm-progress-bar i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(.04);transition:transform .5s cubic-bezier(.2,.7,.1,1)}
.wm-progress.err .wm-progress-bar i{background:var(--muted)}
.wm-progress-retry{align-self:flex-start;min-height:44px;margin-top:4px;padding:0 18px;border:0;border-radius:var(--radius-pill);background:var(--accent);color:var(--accent-fg);font:600 15px/1 var(--body);cursor:pointer}

/* ------------------------------------------------------------------ summary + order */
.fl-summary{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden}
.fl-sum-row{display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 16px;border-top:1px solid var(--line)}
.fl-sum-row:first-child{border-top:0}
.fl-sum-k{flex:none;width:72px;font:var(--l-wt) 12px/1.2 var(--label);letter-spacing:var(--l-track);text-transform:uppercase;color:var(--muted)}
.fl-sum-v{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-sum-v small{display:block;font-weight:400;font-size:14px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.fl-sum-edit{flex:none;min-height:44px;padding:0 4px;border:0;background:none;color:var(--accent);font:600 15px/1 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fl-code{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-radius:var(--radius-lg);background:var(--fg);color:var(--bg)}
.fl-code-k{font:var(--l-wt) 12px/1.2 var(--label);letter-spacing:var(--l-track);text-transform:uppercase;opacity:.75}
.fl-code-v{font:700 clamp(28px,8vw,36px)/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.12em}
.fl-code-v.in span{display:inline-block;animation:fl-char .42s cubic-bezier(.2,.7,.1,1) both;animation-delay:calc(var(--i) * 45ms)}
@keyframes fl-char{from{opacity:0;transform:translateY(45%)}}
.fl-code-copy{flex:none;min-height:44px;padding:0 14px;border:1.5px solid color-mix(in srgb,var(--bg) 50%,transparent);border-radius:var(--radius-pill);background:none;color:var(--bg);font:600 15px/1 var(--body);display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.fl-code-copy svg{width:16px;height:16px}
.fl-steps-list{margin:0;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:12px}
.fl-steps-list li{counter-increment:s;display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start}
.fl-steps-list li::before{content:counter(s);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font:700 15px/1 var(--body)}
.fl-thumb{border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-2);aspect-ratio:1/1;max-width:200px}
.fl-thumb img{width:100%;height:100%;object-fit:cover}
.fl-tips{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--radius-lg);background:var(--surface-2)}
.fl-tips p{display:grid;grid-template-columns:24px 1fr;gap:10px;font-size:15px}
.fl-tips svg{width:20px;height:20px;color:var(--accent);margin-top:2px}

/* ------------------------------------------------------------------ picker cards (who / products) */
.fl-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fl-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:150px;padding:14px;border:1.5px solid var(--line);border-radius:var(--radius-lg);
  background:var(--surface);text-align:left;cursor:pointer;overflow:hidden;transition:border-color .15s,transform .2s cubic-bezier(.2,.7,.1,1),box-shadow .2s}
.fl-card:hover{border-color:var(--fg);transform:translateY(-2px);box-shadow:var(--shadow)}
.fl-card[aria-pressed="true"],.fl-card[aria-checked="true"]{border-color:var(--fg);box-shadow:0 0 0 2px var(--fg) inset}
.fl-card img{width:100%;height:82px;object-fit:contain;margin:-4px 0 2px}
.fl-card b{font:var(--d-wt) 20px/1.05 var(--display);text-transform:var(--d-case);letter-spacing:var(--d-track)}
.fl-card small{font-size:14px;color:var(--muted);line-height:1.3}
.fl-card.wide{grid-column:1/-1;min-height:68px;flex-direction:row;align-items:center;justify-content:space-between}
.fl-card>svg{flex:none;width:24px;height:24px}
.fl-cards.fl-adjust{gap:8px}
.fl-cards.fl-adjust .fl-card{min-height:58px;padding:10px 14px;justify-content:center;border-radius:var(--radius-pill)}
.fl-cards.fl-adjust .fl-card b{font-size:16px}
.fl-cards.fl-adjust .fl-card small{font-size:13px}
@media (max-width:899px){.fl[data-step="preview"] .fl-stage{height:clamp(240px,44dvh,480px)}}
.fl[data-step="studio"] .fl-kicker{display:none}
@media (max-width:899px){.fl[data-step="studio"] .fl-title{font-size:30px}}

/* ------------------------------------------------------------------ sheets (express flow) */
.fl-sheet{position:fixed;inset:auto 0 0 0;z-index:60;max-height:86dvh;display:flex;flex-direction:column;border-radius:calc(var(--radius-lg) + 6px) calc(var(--radius-lg) + 6px) 0 0;
  background:var(--bg);box-shadow:0 -20px 50px rgba(0,0,0,.25);transform:translateY(105%);transition:transform .38s cubic-bezier(.2,.7,.1,1);visibility:hidden}
.fl-sheet.on{transform:none;visibility:visible}
.fl-sheet-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 6px 20px}
.fl-sheet-h h2{margin:0;font:var(--d-wt) 26px/1 var(--display);text-transform:var(--d-case);letter-spacing:var(--d-track)}
.fl-sheet-b{overflow:auto;padding:6px 20px 0;display:flex;flex-direction:column;gap:16px}
.fl-sheet-map{position:relative;height:min(46dvh,420px);border-radius:var(--radius-lg);overflow:hidden}
.fl-scrim{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.35);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s linear .3s}
.fl-scrim.on{opacity:1;visibility:visible;transition:opacity .3s}
@media (min-width:900px){
  .fl-sheet{inset:0 0 0 auto;width:min(480px,40vw);max-height:none;border-radius:0;transform:translateX(105%)}
  .fl-sheet.on{transform:none}
  .fl-sheet-map{height:360px}
}

/* ------------------------------------------------------------------ studio tabs */
.fl-tabs{display:flex;gap:4px;padding:4px;border-radius:var(--radius-pill);background:var(--surface-2)}
.fl-tab{flex:1;min-height:44px;border:0;border-radius:var(--radius-pill);background:none;color:var(--muted);font:var(--btn-wt) 15px/1 var(--btn-font);letter-spacing:var(--btn-track);text-transform:var(--btn-case);cursor:pointer;transition:background .2s,color .2s}
.fl-tab[aria-selected="true"]{background:var(--surface);color:var(--fg);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.fl-tab:disabled{opacity:.45;cursor:not-allowed}

/* ------------------------------------------------------------------ toast */
.wm-toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:80;max-width:min(92vw,440px);padding:12px 16px;border-radius:var(--radius-lg);
  background:var(--fg);color:var(--bg);font:500 15px/1.35 var(--body);box-shadow:var(--shadow);transform:translate(-50%,20px);opacity:0;visibility:hidden;transition:transform .3s,opacity .3s,visibility 0s linear .3s}
.wm-toast.on{transform:translate(-50%,0);opacity:1;visibility:visible;transition:transform .3s,opacity .3s}

/* ------------------------------------------------------------------ direction details */
.route .fl-title{font-size:clamp(44px,13vw,64px)}
@media (min-width:900px){.route .fl-title{font-size:clamp(48px,4.4vw,72px)}}
.route .wm-chip,.route .fl-example{font-family:var(--label);font-weight:700;letter-spacing:.04em}
.route .fl-code{border-radius:var(--radius)}
.route .wm-frame{border-color:var(--fg)}
.route .wm-frame-tag{background:var(--fg);color:var(--bg)}
.route.theme-c .wm-frame{border-color:var(--accent)}
.route.theme-c .wm-frame-tag{background:var(--accent);color:var(--accent-fg)}
.route.theme-c .wm-framer .leaflet-tile-pane{filter:invert(1) hue-rotate(185deg) saturate(.55) brightness(.92) contrast(.92)}
.keepsake .fl-kicker{display:inline-flex;align-items:center;gap:8px}
.keepsake .fl-kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.keepsake.theme-c .fl-hand{font:600 26px/1.1 var(--hand);color:var(--accent)}
.fl-hand{font:inherit}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}