/* Round 5 designer skin, on top of flow.css: each direction's six sizes and weights, sentence case, a segmented progress bar,
   and the motion back on (step slides, the code's letter-by-letter reveal, chip and button feedback). Tokens: design.css. */
.fl-top{grid-template-columns:48px 1fr 48px;border-bottom-color:var(--line);background:var(--bg)}
.fl-where{gap:8px}
.fl-steplabel{font:var(--w-1) var(--fs-1)/1.2 var(--font-body);letter-spacing:0;text-transform:none;color:var(--muted)}
.fl-steplabel b{font-weight:var(--w-2);color:var(--text)}
.fl-tags{width:min(100%,240px);gap:4px}
.fl-tags li{flex:1;width:auto;height:3px;border-radius:2px;background:var(--line)}
.fl-tags li.done{background:var(--text)}
.fl-tags li.now{width:auto;background:var(--text)}

.fl-panel{padding-top:28px}
.fl-step{gap:20px}
.fl-kicker{display:none}
.fl-title{font:var(--head-w,var(--w-2)) var(--fs-5)/var(--lh-head) var(--font-head);letter-spacing:var(--head-track,-.015em);text-transform:none;max-width:16ch}
@media (min-width:900px){ .fl-title{font-size:var(--fs-5)} }
.fl-sub{font-size:var(--fs-2);color:var(--muted)}
.fl-block-h{font:var(--w-2) var(--fs-1)/1.3 var(--font-body);letter-spacing:0;text-transform:none;color:var(--muted)}
.fl-place{display:flex;flex-direction:column;gap:2px}
.fl-place span{font-size:var(--fs-1);color:var(--muted)}
.fl-note{font-size:var(--fs-1)}
/* secondary lines all sit on the small size; values on the body size */
.wm-opt-tx small,.wm-sw-tx small,.wm-cw-tx small,.fl-sum-v small,.fl-area-sentence{font-size:var(--fs-1)}
.fl-area-sentence{min-height:2.8em;line-height:1.4}
.wm-turn-v{font:var(--w-2) var(--fs-2)/1 var(--font-body)}

.fl-cta{font:var(--w-2) var(--fs-2)/1 var(--font-body);letter-spacing:0;text-transform:none;border-radius:var(--btn-radius);min-height:54px;box-shadow:none}
@media (hover:hover) and (pointer:fine){ .fl-cta:hover{background:var(--accent-hover)} }
.fl-ghost{font:var(--w-1) var(--fs-2)/1 var(--font-body)}
.fl-cta[disabled],.fl-cta[aria-disabled="true"]{background:var(--surface);color:var(--muted)}

.wm-search-label{font:var(--w-2) var(--fs-1)/1.3 var(--font-body);letter-spacing:0;text-transform:none;color:var(--muted)}
.wm-search input{border-radius:var(--btn-radius);border-width:1px;font:var(--w-1) var(--fs-2)/1.2 var(--font-body);min-height:54px}
.wm-search input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 12%,transparent)}
.wm-group{font:var(--w-2) var(--fs-1)/1.3 var(--font-body);letter-spacing:0;text-transform:none}
.wm-opt-ic{background:var(--surface);color:var(--text)}
.wm-search-list{border-radius:var(--radius);box-shadow:0 12px 32px rgba(0,0,0,.10)}

.wm-chip{border-width:1px;border-radius:var(--btn-radius);font:var(--w-1) var(--fs-2)/1 var(--font-body);min-height:44px}
/* the size choices share one row, even with the wider faces and on 375px phones */
.fl-areas{gap:6px}
.fl-areas .wm-chip{flex:1 0 auto;min-width:52px;padding:0 10px}
.wm-chip[aria-checked="true"]{background:var(--text);border-color:var(--text);color:var(--bg)}
.fl-example{border-width:1px;border-radius:var(--btn-radius);font:var(--w-1) var(--fs-2)/1 var(--font-body);letter-spacing:0}
.wm-cw{border-width:1px;border-radius:var(--radius)}
.wm-cw[aria-checked="true"]{box-shadow:0 0 0 1px var(--text) inset;border-color:var(--text)}
.wm-cw-tx b{font-weight:var(--w-2)}
.wm-sw[aria-checked="true"]{background:var(--text)}
.wm-turn-b{border-width:1px;border-radius:var(--btn-radius)}
.wm-turn-reset{color:var(--text)}
.fl-card{border-width:1px;border-radius:var(--radius)}
.fl-card b{font:var(--w-2) var(--fs-3)/1.15 var(--font-body);letter-spacing:0;text-transform:none}
.fl-card:hover{box-shadow:none;transform:none;border-color:var(--text)}

.fl-code{border-radius:var(--radius);background:var(--text);color:var(--bg)}
.fl-code-k{font:var(--w-1) var(--fs-1)/1.2 var(--font-body);letter-spacing:0;text-transform:none;opacity:.7}
/* codes skip i/l/o/u and lookup maps o→0, i/l→1, so the body face reads safely; no third typeface */
.fl-code-v{font:var(--w-2) var(--fs-4)/1 var(--font-body);letter-spacing:.08em;font-variant-numeric:tabular-nums;white-space:nowrap}
.fl-code-copy,.fl-sum-edit{font:var(--w-2) var(--fs-1)/1 var(--font-body)}
.fl-steps-list li::before{background:var(--surface);color:var(--text);font:var(--w-2) var(--fs-1)/1 var(--font-body)}
.fl-tips{border-radius:var(--radius);background:var(--surface)}
.fl-tips svg{color:var(--text)}
.fl-summary{border-radius:var(--radius)}
.fl-sum-k{font:var(--w-1) var(--fs-1)/1.2 var(--font-body);letter-spacing:0;text-transform:none}
.fl-sum-edit{color:var(--text)}
.wm-progress-card{border-radius:var(--radius)}
.wm-progress-t{font:var(--w-2) var(--fs-3)/1.2 var(--font-body);letter-spacing:0;text-transform:none}
.wm-progress-bar i{background:var(--text)}
.wm-frame-tag,.st-tool,.st-hint{font:var(--w-1) var(--fs-1)/1 var(--font-body)}
.wm-frame{border-color:var(--text)}
.wm-frame-tag{background:var(--text);color:var(--bg)}
.st-tool[aria-pressed="true"]{background:var(--text);color:var(--bg)}

/* phones: the map and 3D stage leave room for the step's controls above the button */
@media (max-width:899px){
  .fl[data-step="frame"] .fl-stage{height:clamp(230px,40dvh,480px)}
  .fl[data-step="look"] .fl-stage{height:clamp(240px,42dvh,480px)}
  .fl-panel{padding-top:20px}
  .fl-step{gap:14px}
  .fl-title{font-size:var(--fs-4)}
  .fl[data-step="where"] .fl-title,.fl[data-step="who"] .fl-title{font-size:var(--fs-5)}
}
/* the hint sits top-left, clear of the square's size label at the bottom */
.st-hint{left:12px;top:12px;bottom:auto;transform:none}

/* ------------------------------------------------------------------ round 5 motion */
.wm-chip[aria-checked="true"],.wm-cw[aria-checked="true"],.fl-card[aria-checked="true"]{animation:v5-pop .34s var(--spring)}
@keyframes v5-pop{40%{transform:scale(.95)}}
.fl-cta{transition:transform .2s var(--ease-out),background-color .2s}
.fl-cta:active{transform:scale(.97)}
.fl-tags li{transition:background-color .4s var(--ease-out),transform .4s var(--ease-out)}
.fl-tags li.now{animation:v5-fill .6s var(--ease-out) both;transform-origin:left}
@keyframes v5-fill{from{transform:scaleX(.15)}}
.fl-code{transition:transform .4s var(--ease-out)}
html.reduce .fl-code-v.in span{animation:none}
/* A: the designer sits on the dark stage */
.dir-a.design .leaflet-container{background:#1b1b1b}
.dir-a.design .wm-search-list{box-shadow:0 16px 40px rgba(0,0,0,.55)}
.dir-a.design .wm-sw[aria-checked="true"]{background:var(--accent)}
@media (hover:none){ .fl-cta:hover{background:var(--accent)} }   /* iOS keeps :hover after a tap; the next step's button sits under the finger */

/* ------------------------------------------------------------------ round 5: the redesign after Derek's 10-03 review */
/* desktop: a labelled Back and a clickable stepper (phones keep "Step 2 of 5" and the bars) */
.fl-back-l{display:none}
.fl-stepnav{display:none;margin:0;padding:0;list-style:none;counter-reset:st}
@media (min-width:900px){
  .fl-top{grid-template-columns:auto 1fr auto}
  .fl-back{width:auto;display:inline-flex;align-items:center;gap:4px;padding:0 14px 0 8px}
  .fl-back-l{display:inline;font:var(--w-2) var(--fs-1)/1 var(--font-body)}
  .fl-steplabel,.fl-tags{display:none}
  .fl-stepnav{display:flex;align-items:center;gap:4px}
  .fl-stepnav li{counter-increment:st}
  .fl-stepnav button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px 0 8px;border:0;border-radius:var(--btn-radius);background:none;color:var(--muted);font:var(--w-1) var(--fs-1)/1 var(--font-body);cursor:pointer}
  .fl-stepnav button::before{content:counter(st);display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);font-weight:var(--w-2)}
  .fl-stepnav li.done button{color:var(--text)}
  .fl-stepnav li.done button::before{content:"✓";border-color:var(--text);background:var(--text);color:var(--bg)}
  .fl-stepnav li.done button:hover{background:var(--surface)}
  .fl-stepnav li.now button{color:var(--text);font-weight:var(--w-2)}
  .fl-stepnav li.now button::before{border-color:var(--text)}
  .fl-stepnav button:disabled{cursor:default}
}

/* the chosen place, with Change, on every step after the search */
.fl-placebar{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.fl-placebar-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--bg);color:var(--text)}
.fl-placebar-ic svg{width:18px;height:18px}
.fl-placebar-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fl-placebar-tx b{font:var(--w-2) var(--fs-2)/1.25 var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-placebar-tx small{font-size:var(--fs-1);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-change{flex:none;min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:var(--btn-radius);background:var(--bg);color:var(--text);font:var(--w-2) var(--fs-1)/1 var(--font-body);cursor:pointer}
@media (hover:hover) and (pointer:fine){ .fl-change:hover{border-color:var(--text)} }

/* step one: what are you making */
.fl-kinds{display:grid;gap:12px}
.fl-kind{display:flex;align-items:center;gap:16px;min-height:104px;padding:10px 16px 10px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--text);text-align:left;cursor:pointer;transition:border-color .2s,transform .2s var(--ease-out)}
.fl-kind:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){ .fl-kind:hover{border-color:var(--text)} .fl-kind:hover .fl-kind-img img{transform:translateY(-4px) rotate(-1.5deg)} }
.fl-kind-img{flex:none;display:grid;place-items:center;width:116px;aspect-ratio:3/2}
.fl-kind-img img{width:100%;transition:transform .35s var(--ease-out)}
.fl-kind-tx{display:flex;flex-direction:column;gap:4px}
.fl-kind-tx b{font:var(--w-3) var(--fs-3)/1.15 var(--font-display);letter-spacing:var(--display-track)}
.fl-kind-tx small{font-size:var(--fs-1);color:var(--muted)}
.dir-a.design .fl-kind-tx b{font-stretch:112%}
.fl-kind[aria-pressed="true"]{border-color:var(--text);box-shadow:0 0 0 1px var(--text) inset}

/* the search step: switch kinds in place; races are a list you can tap */
.fl-kindswitch{display:flex;gap:4px;align-self:flex-start;padding:4px;border-radius:var(--btn-radius);background:var(--surface)}
.fl-kindswitch button{min-height:40px;padding:0 16px;border:0;border-radius:var(--btn-radius);background:none;color:var(--muted);font:var(--w-2) var(--fs-1)/1 var(--font-body);cursor:pointer}
.fl-kindswitch button[aria-checked="true"]{background:var(--bg);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.fl-racelist{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.fl-race{width:100%}
.fl-race{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:56px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--text);text-align:left;cursor:pointer}
.fl-race b{font:var(--w-2) var(--fs-2)/1.25 var(--font-body)}
.fl-race small{font-size:var(--fs-1);color:var(--muted)}
@media (hover:hover) and (pointer:fine){ .fl-race:hover{border-color:var(--text)} }

/* resize + turn the square: corner handles, a knob on a stem, two-finger gestures (touch-action none on the map) */
.wm-map{touch-action:none}
.wm-framer.adjusting .wm-frame{transition:none}
.wm-h{position:absolute;z-index:2;width:22px;height:22px;padding:0;border:2.5px solid var(--text);border-radius:50%;background:var(--bg);box-shadow:0 1px 5px rgba(0,0,0,.35);pointer-events:auto;touch-action:none;cursor:nwse-resize}
.wm-h::before{content:"";position:absolute;inset:-12px;border-radius:50%}
.wm-h:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wm-h-nw{left:-12.5px;top:-12.5px}
.wm-h-ne{right:-12.5px;top:-12.5px;cursor:nesw-resize}
.wm-h-sw{left:-12.5px;bottom:-12.5px;cursor:nesw-resize}
.wm-h-se{right:-12.5px;bottom:-12.5px}
.wm-h-rot{left:50%;top:-15px;width:30px;height:30px;margin-left:-15px;cursor:grab;
  background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M18.2 2.8v4.4h-4.4' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat}
.wm-h-rot:active{cursor:grabbing}
.wm-h-stem{display:none}   /* the knob sits on the top edge itself: always inside the map, even on short phones */
.wm-framer.adjusting .wm-frame-tag{background:var(--accent);color:var(--accent-text)}

/* the 3D preview failed: the framed map stands in, with a note and a retry */
.st-fallback{position:absolute;left:12px;right:12px;bottom:12px;z-index:8;display:grid;gap:8px;max-width:460px;padding:14px 16px;border-radius:var(--radius);background:var(--bg);color:var(--text);box-shadow:0 12px 32px rgba(0,0,0,.2)}
.st-fallback b{font:var(--w-2) var(--fs-2)/1.3 var(--font-body)}
.st-fallback p{margin:0;font-size:var(--fs-1);line-height:1.45;color:var(--muted)}
.st-fallback-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.st-fallback-retry{min-height:40px;padding:0 16px;border:0;border-radius:var(--btn-radius);background:var(--text);color:var(--bg);font:var(--w-2) var(--fs-1)/1 var(--font-body);cursor:pointer}
.st-fallback-note{font-size:var(--fs-1);color:var(--muted)}
@media (min-width:900px){ .st-fallback{left:24px;right:auto;bottom:24px} }

/* waiting in line: the bar shimmers instead of filling */
.wm-progress.queued .wm-progress-bar i{width:34%;transform:none!important;animation:wm-q 1.5s var(--ease-io) infinite}
@keyframes wm-q{from{translate:-110% 0}to{translate:310% 0}}
html.reduce .wm-progress.queued .wm-progress-bar i{animation:none;translate:0 0}
.fl-title:focus{outline:none}                                  /* focused for screen readers on each step, not for show */
.st-hint:not([hidden]){animation:st-hint-out .5s ease 6s forwards}   /* the gesture hint steps aside once it's been read */
@keyframes st-hint-out{to{opacity:0;visibility:hidden}}
.fl:not([data-step="frame"]) .wm-h,.fl:not([data-step="frame"]) .wm-h-stem{display:none}   /* resize + turn live on the Frame step only */
@media (max-width:899px){ .fl[data-step="frame"] .fl-stage{height:clamp(280px,48dvh,560px)} }   /* phones: room to pinch and twist */