/* Booking progress · page styles (W2A, 2026-10-16, Rick).
   Tokens only (tokens.css v0.2). Page-local tokens (--local-*, built FROM tokens, no raw hex):
   --local-primary-deep  darker-downward stop of the tactile primary (buttons rule 38), copied from buttons.css B1
   --local-glow          glow of the current marker (rule 32: α .45)
   --local-glass-strong  frost that keeps text passing on its own over the photo (materials rule 5)
   --local-key-*         the raised-key light model, copied from people-mic.css option 5
   --local-origin        where progress fills from: left in English, right in Arabic (stepper card rule 12) */
:root,[data-theme="light"]{
  --local-primary-deep: color-mix(in srgb, var(--primary-fill) 83%, var(--ph-ink));
  --local-glow: color-mix(in srgb, var(--primary) 45%, transparent);
  --local-glass-strong: color-mix(in srgb, var(--surface) 80%, transparent);
  --local-key-hi: color-mix(in srgb, var(--ph-white) 90%, transparent);
  --local-key-lo: color-mix(in srgb, var(--ph-ink) 9%, transparent);
  --local-key-drop: 0 1px 2px color-mix(in srgb, var(--ph-ink) 16%, transparent), 0 6px 14px color-mix(in srgb, var(--ph-ink) 9%, transparent);
  --local-origin: left; --local-flip: 1;
}
[data-theme="dark"]{
  --local-primary-deep: color-mix(in srgb, var(--primary-fill) 78%, var(--ph-ink));
  --local-glow: color-mix(in srgb, var(--ph-sky) 50%, transparent);
  --local-glass-strong: color-mix(in srgb, var(--surface) 78%, transparent);
  --local-key-hi: color-mix(in srgb, var(--ph-white) 10%, transparent);
  --local-key-lo: color-mix(in srgb, var(--ph-ink) 60%, transparent);
  --local-key-drop: 0 0 0 transparent;
}
[dir="rtl"]{ --local-origin: right; --local-flip: -1; }

@media (max-width: 440px) { .options { padding-inline: 0; gap: 32px; } .option .label { padding-inline: 16px; } }
.option .label code{display:block;margin-top:6px}

/* ── frame scaffold ── */
.frame.st{display:flex;flex-direction:column;gap:20px;min-height:440px}
.st p{margin:0}
:where(.st) button{font:inherit;color:inherit;margin:0;-webkit-tap-highlight-color:transparent;cursor:pointer;touch-action:manipulation}
.st .ic{width:20px;height:20px;flex:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;fill:none}
[dir="rtl"] .st h2{font-family:var(--font-arabic);font-stretch:normal;letter-spacing:0}
bdi{unicode-bidi:isolate}
.st .list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);column-gap:4px;grid-column:1 / -1;grid-row:1}
.st .item{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.hit{position:absolute;inset:-4px 2px;min-block-size:44px;border:0;background:transparent;border-radius:14px;z-index:2}
.hit:hover{background:color-mix(in srgb,var(--primary) 6%,transparent)}
.hit:focus-visible{outline:2px solid var(--line-focus);outline-offset:0}
.trk{position:relative;display:grid;grid-template-columns:repeat(5,1fr);row-gap:10px}
.rail{position:absolute;inset-inline:10%;block-size:2px;background:var(--line);border-radius:2px;z-index:0}
.rail .fill{position:absolute;inset:0;border-radius:inherit;background:var(--primary);transform:scaleX(var(--p,0));transform-origin:var(--local-origin);transition:transform var(--d-400) var(--ease-brand)}
[data-theme="dark"] .rail .fill{background:var(--ph-sky)}

/* recall chips: earlier choices, tap to go back (forms rule 41) */
.recall{display:grid;gap:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px;min-block-size:44px;align-items:center}
.rchip{display:inline-flex;align-items:center;gap:8px;min-block-size:44px;padding:0 12px 0 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);font-size:var(--fs-ui);font-weight:500;line-height:1.2;box-shadow:var(--shadow-1);transition:transform var(--d-180) var(--ease-brand),background-color var(--d-180)}
[dir="rtl"] .rchip{padding:0 14px 0 12px}
[data-theme="dark"] .rchip{background:var(--surface-raised);border-color:var(--line-strong)}
.rchip b{font-weight:700}
.rchip .ic{width:16px;height:16px;color:var(--primary-ink)}
.rchip:hover{background:var(--surface-hover)}
.rchip:active{transform:scale(var(--press-scale));transition-duration:var(--d-120)}
.rchip.new{animation:chip-in var(--d-400) var(--ease-brand)}
@keyframes chip-in{from{transform:scale(.95);opacity:0}to{transform:none;opacity:1}}
.none{font-size:var(--fs-ui);color:var(--fg-muted)}

/* the step body under the tracker */
.sbody{display:grid;gap:6px}
.sbody .kicker{font-size:var(--fs-ui);font-weight:600;color:var(--fg-muted)}
.sbody .hint{font-size:var(--fs-ui);color:var(--fg-muted)}
.sbody.in{animation:body-in var(--d-260) var(--ease-brand)}
@keyframes body-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* the one primary: tactile four-shadow pill (buttons rules 37–39, from buttons.css option 1) */
.foot{margin-top:auto}
.cta{position:relative;inline-size:100%;display:flex;align-items:center;justify-content:center;gap:10px;min-block-size:var(--t-button-lg);padding-inline:24px;border:0;border-radius:var(--r-pill);font-weight:600;font-size:17px;line-height:1.2;color:var(--primary-on);background:linear-gradient(180deg,var(--primary-fill) 0%,var(--local-primary-deep) 100%);box-shadow:var(--tactile-shadow);transition:transform var(--d-180) var(--ease-brand);user-select:none;-webkit-user-select:none}
.cta .arrow{transform:scaleX(var(--local-flip))}
.cta.is-pressed{transform:scale(var(--press-scale));box-shadow:var(--tactile-pressed);background:linear-gradient(180deg,var(--local-primary-deep),var(--primary-fill));transition-duration:var(--d-80)}

/* ═════ Option 1 · Numbered pills ═════ */
.pills .rail{inset-block-start:21px}
.pill{position:relative;z-index:1;display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:var(--r-pill);background:var(--surface-sunken);border:1.5px solid var(--line);color:var(--fg-muted);font:700 17px/1 var(--font-display);font-stretch:var(--font-display-stretch);
  transition:inline-size var(--d-260) var(--ease-brand),background-color var(--d-260) var(--ease-brand),border-color var(--d-260),color var(--d-260),box-shadow var(--d-260)}
[data-theme="dark"] .pill{background:var(--surface-raised);border-color:var(--line-strong)}
.pill > *{grid-area:1/1}
.pill .ok{width:20px;height:20px;stroke-width:2.8;opacity:0;transform:scale(.4);transition:opacity var(--d-180),transform var(--d-260) var(--ease-brand)}
.pills [data-s="done"] .pill{background:var(--primary-fill);border-color:var(--primary-fill);color:var(--primary-on)}
.pills [data-s="done"] .pill .num{opacity:0}
.pills [data-s="done"] .pill .ok{opacity:1;transform:none}
.pills [data-s="cur"] .pill{inline-size:60px;background:var(--primary-muted);border:2px solid var(--primary);color:var(--primary-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 14%,transparent)}
[data-theme="dark"] .pills [data-s="cur"] .pill{border-color:var(--ph-sky);color:var(--fg)}
.pname{grid-row:2;font-weight:700;font-size:var(--fs-ui);color:var(--fg);white-space:nowrap;animation:body-in var(--d-260) var(--ease-brand)}

/* ═════ Option 2 · Progress rail with hex markers ═════ */
.rail2 .rail{inset-block-start:21px}
.mark{position:relative;z-index:1;display:grid;place-items:center;inline-size:44px;block-size:44px}
.mark > *{grid-area:1/1}
.mark .hx{inline-size:32px;block-size:37px;fill:var(--surface);stroke:var(--line-strong);stroke-width:2.5;stroke-linejoin:round;transition:fill var(--d-260),stroke var(--d-260),filter var(--d-260)}
[data-theme="dark"] .mark .hx{fill:var(--surface-raised)}
.mark .ok{width:16px;height:16px;stroke-width:3.2;color:var(--primary-on);opacity:0;transition:opacity var(--d-180)}
.mark .core{inline-size:10px;block-size:10px;border-radius:50%;background:var(--primary);opacity:0;transform:scale(.3);transition:opacity var(--d-180),transform var(--d-260) var(--ease-brand)}
.rail2 [data-s="done"] .hx{fill:var(--primary-fill);stroke:var(--primary-fill)}
.rail2 [data-s="done"] .ok{opacity:1}
.rail2 [data-s="cur"] .hx{fill:var(--primary-muted);stroke:var(--primary);stroke-width:3;filter:drop-shadow(0 0 6px var(--local-glow)) drop-shadow(0 0 2px var(--local-glow))}
[data-theme="dark"] .rail2 [data-s="cur"] .hx{stroke:var(--ph-sky)}
.rail2 [data-s="cur"] .core{opacity:1;transform:none}
[data-theme="dark"] .rail2 [data-s="cur"] .core{background:var(--ph-sky)}
.rail2 [data-s="cur"] .mark{animation:arrive 600ms var(--ease-brand)}
@keyframes arrive{0%{transform:scale(.85)}45%{transform:scale(1.12)}100%{transform:none}}
.nm{font-size:var(--fs-ui);line-height:1.25;text-align:center;color:var(--fg-muted);padding-inline:2px;min-block-size:2.5em;hyphens:manual}
.rail2 [data-s="done"] .nm{color:var(--fg)}
.rail2 [data-s="cur"] .nm{color:var(--primary-ink);font-weight:700}
[data-theme="dark"] .rail2 [data-s="cur"] .nm{color:var(--ph-sky)}

/* ═════ Option 3 · Recap bar (glass over the room) ═════ */
.frame[data-opt="recap"]{padding:0;gap:16px}
.frame[data-opt="recap"] .sbody,.frame[data-opt="recap"] .foot{padding-inline:16px}
.frame[data-opt="recap"] .foot{padding-block-end:20px}
.stage{position:relative;min-block-size:250px;background:var(--surface-sunken) url(img/aura.jpg) center 45% / cover no-repeat;isolation:isolate}
.stage::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--ph-ink) 25%,transparent),transparent 55%)}
[data-theme="dark"] .stage::after{background:linear-gradient(180deg,color-mix(in srgb,var(--ph-ink) 45%,transparent),color-mix(in srgb,var(--ph-ink) 25%,transparent))}
.rbar{position:sticky;inset-block-start:12px;margin:12px;padding:6px 8px 0;border-radius:20px;color:var(--fg);
  background:var(--local-glass-strong);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-stroke);box-shadow:var(--glass-shadow),inset 0 1px 0 color-mix(in srgb,var(--ph-white) 40%,transparent)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.rbar{background:var(--surface)}}
.rline{display:flex;flex-wrap:wrap;align-items:center;column-gap:0;font-size:var(--fs-ui);line-height:1.2}
.rpart{min-block-size:44px;padding:0 6px;border:0;background:transparent;border-radius:10px;font-weight:600;text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:color-mix(in srgb,var(--fg) 45%,transparent)}
.rpart b{font-weight:700}
.rpart:hover{background:color-mix(in srgb,var(--surface) 70%,transparent)}
.sep{color:var(--fg-muted);padding-inline:1px}
.rnone{padding:12px 6px;color:var(--fg-muted)}
.segrow{display:flex;align-items:center;gap:10px;padding-inline-end:4px}
.segrow .segs{flex:1}
.rof{font-weight:600;color:var(--fg-muted);white-space:nowrap}
.segs .list{gap:6px;padding-inline:4px}
.segs .item{block-size:28px;justify-content:center}
.segs .hit{inset:-10px 0 -6px}
.seg{inline-size:100%;block-size:6px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--fg) 16%,transparent);overflow:hidden;position:relative}
.seg::after{content:"";position:absolute;inset:0;background:var(--primary);transform:scaleX(0);transform-origin:var(--local-origin);transition:transform var(--d-400) var(--ease-brand)}
[data-theme="dark"] .seg::after{background:var(--ph-sky)}
.segs [data-s="done"] .seg::after{transform:none}
.segs [data-s="cur"] .seg::after{transform:scaleX(.5)}
.segs [data-s="cur"] .seg{box-shadow:0 0 8px var(--local-glow)}

/* ═════ Option 4 · Tactile keys ═════ */
.keys .item{padding-inline:3px}
.key{position:relative;z-index:1;inline-size:100%;block-size:56px;border-radius:16px;border:1px solid var(--line-subtle);display:grid;place-items:center;color:var(--fg-muted);
  background:linear-gradient(180deg,var(--surface-raised),var(--surface-hover));box-shadow:inset 0 1px 0 var(--local-key-hi),inset 0 -3px 0 var(--local-key-lo),var(--local-key-drop);
  transition:transform var(--d-180) var(--ease-brand),color var(--d-180)}
[data-theme="dark"] .key{border-color:var(--line-strong);background:linear-gradient(180deg,var(--surface-active),var(--surface-raised))}
.key > *{grid-area:1/1}
.key .num{font:700 22px/1 var(--font-display);font-stretch:var(--font-display-stretch)}
.key .ok{width:22px;height:22px;stroke-width:2.8;opacity:0}
.keys [data-s="done"] .key{transform:translateY(2px);background:var(--surface-sunken);color:var(--primary-ink);box-shadow:inset 0 2px 6px var(--local-key-lo)}
[data-theme="dark"] .keys [data-s="done"] .key{background:var(--surface-sunken);color:var(--ph-sky)}
.keys [data-s="done"] .key .num{opacity:0}
.keys [data-s="done"] .key .ok{opacity:1}
.keys [data-s="cur"] .key{background:linear-gradient(180deg,var(--primary-fill),var(--local-primary-deep));color:var(--primary-on);border-color:transparent;box-shadow:var(--tactile-shadow),0 0 0 4px color-mix(in srgb,var(--primary) 14%,transparent)}
.keys [data-s="cur"] .key::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(90% 80% at 50% 0%,color-mix(in srgb,var(--ph-white) 55%,transparent),transparent 65%);animation:keylit 600ms var(--ease-brand) forwards}
@keyframes keylit{0%{opacity:0}30%{opacity:1}100%{opacity:.2}}
.keys .nm{color:var(--fg-muted)}
.keys [data-s="done"] .nm{color:var(--fg)}
.keys [data-s="cur"] .nm{color:var(--primary-ink);font-weight:700}
[data-theme="dark"] .keys [data-s="cur"] .nm{color:var(--ph-sky)}

/* ═════ Option 5 · Hex ripple steps ═════ */
.hexes{margin-top:16px}
.hexes .rail{inset-block-start:27px}
.hexm{position:relative;z-index:1;display:grid;place-items:center;inline-size:48px;block-size:55.4px}
.hexm > *{grid-area:1/1}
.hexm .hx{inline-size:48px;block-size:55.4px;fill:var(--surface);stroke:var(--line-strong);stroke-width:2;stroke-linejoin:round;transition:fill var(--d-260) var(--ease-brand),stroke var(--d-260),filter var(--d-260)}
[data-theme="dark"] .hexm .hx{fill:var(--surface-raised)}
.hexm .num{position:relative;font:700 18px/1 var(--font-display);font-stretch:var(--font-display-stretch);color:var(--fg-muted);transition:color var(--d-180),opacity var(--d-180)}
.hexm .ok{position:relative;width:20px;height:20px;stroke-width:2.8;color:var(--primary-ink);opacity:0;transition:opacity var(--d-180)}
.hexes [data-s="done"] .hx{fill:var(--primary-muted);stroke:var(--primary)}
[data-theme="dark"] .hexes [data-s="done"] .hx{stroke:var(--ph-sky)}
[data-theme="dark"] .hexes [data-s="done"] .ok{color:var(--ph-sky)}
.hexes [data-s="done"] .num{opacity:0}
.hexes [data-s="done"] .ok{opacity:1}
.hexes [data-s="cur"] .hx{fill:var(--primary-fill);stroke:var(--primary-fill);filter:drop-shadow(0 0 10px var(--local-glow))}
.hexes [data-s="cur"] .num{color:var(--primary-on)}
.rings{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center}
.ring{grid-area:1/1;inline-size:48px;block-size:55.4px;fill:none;stroke:var(--primary);stroke-width:2;vector-effect:non-scaling-stroke;opacity:0;animation:ring 520ms var(--ease-brand) forwards}
[data-theme="dark"] .ring{stroke:var(--ph-sky)}
.ring.second{animation-delay:90ms}
@keyframes ring{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.3);opacity:0}}
.here{grid-row:2;position:relative;display:inline-flex;align-items:center;block-size:36px;margin-top:8px;padding:0 14px;border-radius:var(--r-pill);background:var(--primary-muted);color:var(--primary-ink);font-weight:700;font-size:var(--fs-ui);white-space:nowrap;transition:none}
[data-theme="dark"] .here{color:var(--fg);background:var(--secondary-muted)}
.here .caret{position:absolute;inset-block-start:-5px;inset-inline-start:calc(var(--cx, 50%) - 6px);inline-size:12px;block-size:12px;background:inherit;transform:rotate(45deg);border-radius:2px}

@media (prefers-reduced-motion: reduce){
  .rail .fill,.pill,.seg::after,.hexm .hx,.rchip{transition:none !important}
  .sbody.in,.rchip.new,.pname,.rail2 [data-s="cur"] .mark,.keys [data-s="cur"] .key::after{animation:none !important}
  .ring{display:none}
}