/* F · Stack — the designer skin (design.html?v=f, loaded last). Funnel Display + Funnel Sans on white. Ink until a kind is
   picked; from then on the product's panel colour carries the flow, as on the homepage panels: city blue, golf green,
   race brick red for the main button, the progress, the choices (kind switch, sizes, colours, switches, place bar) and
   the design code on the order step. Layout changes are CSS only; the 8 points (What → Place → Area → Look → Order,
   house-number search, Change / Back, resize and turn on the map, race white + red route, queue and fallback) are
   untouched. The kind comes from .fl's data-kind (every step once a place is picked) and, on the search step before
   that, from its kind switch. */
/* type, colour and radius come from css/f-tokens.css (loaded just before this file), the same values as every page */
.dir-f.design{
  --stage-top:#FFFFFF; --stage-bottom:#E9E9E6;            /* the 3D view's backdrop */
  --kc:var(--text);                                       /* the kind's colour (ink until one is picked) */
}

html.dir-f.design:has(.fl[data-kind="city"]),html.dir-f.design:has(.fl-kindswitch [data-k="city"][aria-checked="true"]){--kc:var(--city);--accent:var(--city);--accent-hover:#152E73}
html.dir-f.design:has(.fl[data-kind="golf"]),html.dir-f.design:has(.fl-kindswitch [data-k="golf"][aria-checked="true"]){--kc:var(--golf);--accent:var(--golf);--accent-hover:#103826}
html.dir-f.design:has(.fl[data-kind="race"]),html.dir-f.design:has(.fl-kindswitch [data-k="race"][aria-checked="true"]){--kc:var(--race);--accent:var(--race);--accent-hover:#7A2318}

/* titles: the site's h3 step (fs-4, h3 tracking); the first steps on a phone take the site's h2 step (fs-5) */
.dir-f.design .fl-title,.dir-f.design .fl[data-step] .fl-title{font-size:var(--fs-4);letter-spacing:var(--h-track)}
@media (max-width:899px){ .dir-f.design .fl[data-step="where"] .fl-title,.dir-f.design .fl[data-step="who"] .fl-title,.dir-f.design .fl[data-step="kind"] .fl-title{font-size:var(--fs-5);letter-spacing:var(--display-track)} }

/* step one: each kind carries its colour, as on the homepage panels */
.dir-f.design .fl-kind{position:relative;overflow:hidden}
.dir-f.design .fl-kind[data-k="city"]{--kc:var(--city)}
.dir-f.design .fl-kind[data-k="golf"]{--kc:var(--golf)}
.dir-f.design .fl-kind[data-k="race"]{--kc:var(--race)}
.dir-f.design .fl-kind::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--kc)}
.dir-f.design .fl-kind-tx b{letter-spacing:-.015em}
@media (hover:hover) and (pointer:fine){ .dir-f.design .fl-kind:hover{border-color:var(--kc)} }
.dir-f.design .fl-kind[aria-pressed="true"]{border-color:var(--kc);box-shadow:0 0 0 1px var(--kc) inset}

/* the flow in the kind's colour: progress, choices, the code */
.dir-f.design .fl-tags li.done,.dir-f.design .fl-tags li.now{background:var(--kc)}
.dir-f.design .fl-kindswitch button[aria-checked="true"]{background:var(--kc);color:#FFFFFF;box-shadow:none}
.dir-f.design .wm-chip[aria-checked="true"]{background:var(--kc);border-color:var(--kc);color:#FFFFFF}
.dir-f.design .wm-cw[aria-checked="true"]{border-color:var(--kc);box-shadow:0 0 0 1px var(--kc) inset}
.dir-f.design .wm-cw-tick{background:var(--kc);color:#FFFFFF}
.dir-f.design .wm-sw[aria-checked="true"]{background:var(--kc)}
.dir-f.design .fl-placebar-ic,.dir-f.design .wm-opt-ic{color:var(--kc)}
.dir-f.design .wm-opt-ic{background:color-mix(in srgb,var(--kc) 10%,var(--bg))}
.dir-f.design .wm-search input:focus{border-color:var(--kc);box-shadow:0 0 0 3px color-mix(in srgb,var(--kc) 18%,transparent)}
.dir-f.design .wm-progress-bar i{background:var(--kc)}
.dir-f.design .fl-code{background:var(--kc);color:#FFFFFF}
.dir-f.design .fl-steps-list li::before{background:color-mix(in srgb,var(--kc) 10%,var(--bg));color:var(--kc)}
@media (min-width:900px){
  .dir-f.design .fl-stepnav li.done button::before{border-color:var(--kc);background:var(--kc);color:#FFFFFF}
  .dir-f.design .fl-stepnav li.now button::before{border-color:var(--kc);color:var(--kc)}
}
@media (hover:hover) and (pointer:fine){
  .dir-f.design .wm-chip:hover,.dir-f.design .fl-example:hover,.dir-f.design .fl-race:hover,.dir-f.design .wm-cw:hover,.dir-f.design .fl-change:hover{border-color:var(--kc)}
}