/* Session length · page styles (B3, 2026-10-16, Rick).
   Tokens only. Page-local tokens (--local-*), all built from tokens:
   --local-primary-deep  darker-downward stop of the tactile primary (light --primary-hover, dark --primary-active)
   --local-glow          selected/drag glow
   --local-dir           +1 LTR / −1 RTL for mirrored translates
   --local-scrim         ink veil under text on the room photo (on-media: same in both themes)
   --local-gtint         the glass capsule tint, dense enough that its labels pass on their own (78 % light, 74 % dark) */
:root,[data-theme="light"]{
  --local-primary-deep: var(--primary-hover);
  --local-glow: color-mix(in srgb, var(--primary) 45%, 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) 18%, transparent), 0 6px 14px color-mix(in srgb, var(--ph-ink) 10%, transparent);
  --local-scrim: color-mix(in srgb, var(--ph-ink) 82%, transparent);
  --local-gtint: color-mix(in srgb, var(--ph-white) 78%, transparent);
  --local-gthumb-top: color-mix(in srgb, var(--ph-white) 98%, transparent);
  --local-gthumb-bot: color-mix(in srgb, var(--ph-white) 72%, transparent);
  --local-dir: 1;
}
[data-theme="dark"]{
  --local-primary-deep: var(--primary-active);
  --local-glow: color-mix(in srgb, var(--ph-sky) 50%, transparent);
  --local-key-hi: color-mix(in srgb, var(--ph-white) 12%, transparent);
  --local-key-lo: color-mix(in srgb, var(--ph-ink) 60%, transparent);
  --local-key-drop: 0 0 0 transparent;
  --local-gtint: color-mix(in srgb, var(--surface) 74%, transparent);
  --local-gthumb-top: color-mix(in srgb, var(--ph-white) 26%, transparent);
  --local-gthumb-bot: color-mix(in srgb, var(--ph-white) 10%, transparent);
}
[dir="rtl"]{ --local-dir: -1; }

/* ── frame scaffold ── */
.frame.du{display:flex;flex-direction:column;gap:16px}
.du .kicker{margin:0;font-size:var(--fs-label);font-weight:600;color:var(--fg-subtle);letter-spacing:.02em}
.du h2{margin-top:-8px}
.du .hint{margin:-10px 0 0;font-size:var(--fs-ui);color:var(--fg-muted)}
[dir="rtl"] .du h2,[dir="rtl"] .du .kicker{font-family:var(--font-arabic);font-stretch:normal;letter-spacing:0}
.du button{font:inherit;color:inherit;margin:0;-webkit-tap-highlight-color:transparent;cursor:pointer;touch-action:manipulation}
.du .ic{width:20px;height:20px;flex:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.summary{margin-top:auto;display:flex;gap:10px;align-items:center;min-height:56px;padding:12px 16px;border-radius:var(--r-tile);background:var(--surface);border:1px solid var(--line-subtle);box-shadow:var(--shadow-1);font-size:var(--fs-ui);font-weight:600;line-height:1.35}
.summary .ic{color:var(--primary-ink)}
[data-theme="dark"] .summary{background:var(--surface-raised);border-color:var(--line)}
bdi{unicode-bidi:isolate}
.option .label code{display:block;margin-top:6px;line-height:1.5}

/* "Longer sessions: ask us" (appears at 4 hours) */
.ask{display:grid;grid-template-rows:0fr;opacity:0;margin-top:-16px;transition:grid-template-rows var(--d-260) var(--ease-brand),opacity var(--d-260),margin-top var(--d-260)}
.ask.open{grid-template-rows:1fr;opacity:1;margin-top:0}
.ask-in{overflow:hidden;min-height:0;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--fs-ui);font-weight:600}
.ask.open .ask-in{padding:6px 6px 6px 16px;border-radius:var(--r-pill);background:var(--accent-muted);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
[dir="rtl"] .ask.open .ask-in{padding:6px 16px 6px 6px}
.ask-btn{white-space:nowrap;flex:none;min-height:var(--t-min);padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--surface);display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:var(--fs-ui)}
[data-theme="dark"] .ask-btn{background:var(--surface-raised)}
[dir="rtl"] .ask-btn .ic{transform:scaleX(-1)}

/* press physics (transform only) */
.htile,.step-btn,.gseg-btn,.addblock,.rm,.ask-btn,.tick-btn{transition:transform var(--d-180) var(--ease-brand),background-color var(--d-180) var(--ease-brand),border-color var(--d-180),color var(--d-180)}
.htile:active,.step-btn:active:not(:disabled),.gseg-btn:active,.addblock:active,.rm:active,.ask-btn:active,.tick-btn:active{transform:scale(var(--press-scale));transition-duration:var(--d-120)}

/* ═════ Option 1 · Hour chips (2 × 2) ═════ */
.htiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.htile{position:relative;text-align:start;min-height:104px;padding:14px 16px;border-radius:20px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:2px}
[data-theme="dark"] .htile{background:var(--surface-raised);border-color:var(--line-strong)}
.htile::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(120% 90% at 30% 0%,color-mix(in srgb,var(--ph-white) 50%,transparent),transparent 60%)}
.htile .h-len{font:700 var(--fs-h3)/1.2 var(--font-display);font-stretch:var(--font-display-stretch);padding-inline-end:30px}
[dir="rtl"] .htile .h-len{font-family:var(--font-arabic);font-stretch:normal}
.htile .h-price{font-size:var(--fs-ui);font-weight:500;color:var(--fg-muted)}
.htile .h-pop{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-label);font-weight:600;color:var(--fg-muted)}
.htile .h-pop::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.htile .badge{position:absolute;top:12px;inset-inline-end:12px;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--fg-subtle);display:grid;place-items:center}
.htile .badge svg{width:14px;height:14px;stroke:var(--primary-fill);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:0;transform:scale(.4);transition:transform var(--d-260) var(--ease-brand),opacity var(--d-180)}
.htile[aria-checked="true"]{background:linear-gradient(180deg,var(--primary-fill),var(--local-primary-deep));color:var(--primary-on);border-color:transparent;box-shadow:var(--tactile-shadow)}
.htile[aria-checked="true"]::before{opacity:.25}
.htile[aria-checked="true"] .h-price,.htile[aria-checked="true"] .h-pop{color:var(--primary-on)}
.htile[aria-checked="true"] .badge{background:var(--primary-on);border-color:var(--primary-on)}
.htile[aria-checked="true"] .badge svg{opacity:1;transform:none}
.htile.lit::before{animation:sheen 640ms var(--ease-brand)}
@keyframes sheen{0%{opacity:0}30%{opacity:1}100%{opacity:.25}}

/* ═════ Option 2 · Stepper + rolling total ═════ */
.stepper{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line-subtle);box-shadow:var(--shadow-1)}
[data-theme="dark"] .stepper{background:var(--surface-raised);border-color:var(--line)}
.step-btn{width:var(--t-button-lg);height:var(--t-button-lg);flex:none;border-radius:50%;border:1px solid var(--line);background:var(--canvas);display:grid;place-items:center}
.step-btn svg{width:24px;height:24px;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.step-btn[data-d="1"]{background:linear-gradient(180deg,var(--primary-fill),var(--local-primary-deep));color:var(--primary-on);border-color:transparent;box-shadow:var(--tactile-shadow)}
.step-btn:active:not(:disabled)[data-d="1"]{box-shadow:var(--tactile-pressed)}
.step-btn:disabled{cursor:not-allowed;background:var(--surface-sunken);color:var(--fg-disabled);border-color:var(--line-subtle);box-shadow:none}
.step-val{display:flex;align-items:baseline;gap:8px}
.step-val .num{font:700 44px/1 var(--font-display);font-stretch:var(--font-display-stretch)}
.step-val .unit{font-size:var(--fs-body);font-weight:600;color:var(--fg-muted)}
.totalcard{display:grid;grid-template-columns:1fr auto;align-items:end;gap:4px 12px;padding:18px 20px;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line-subtle);box-shadow:var(--shadow-1)}
[data-theme="dark"] .totalcard{background:var(--surface-raised);border-color:var(--line)}
.tc-label{font-size:var(--fs-ui);font-weight:600;color:var(--fg-muted);grid-column:1/-1}
.money{justify-self:start;display:inline-flex;align-items:baseline;gap:8px;grid-column:1/-1;color:var(--fg)}
.money .cur{font:600 var(--fs-h3)/1 var(--font-body);color:var(--fg-muted)}
.roller{display:inline-flex;font:700 48px/1 var(--font-display);font-stretch:var(--font-display-stretch);letter-spacing:-.01em}
.roller .col{display:inline-block;height:1em;overflow:hidden;width:.68em;transition:width var(--d-400) var(--ease-brand),opacity var(--d-260)}
.roller .col.off{width:0;opacity:0}
.roller .sep{display:inline-block;width:.28em;overflow:hidden;transition:width var(--d-400) var(--ease-brand),opacity var(--d-260)}
.roller .sep.off{width:0;opacity:0}
.roller .strip{display:flex;flex-direction:column;transform:translateY(calc(var(--d, 0) * -1em));transition:transform 560ms var(--ease-brand)}
.roller .strip span{height:1em;line-height:1;text-align:center}
.roller .col:nth-last-child(2) .strip{transition-delay:30ms}.roller .col:nth-last-child(3) .strip{transition-delay:60ms}
.when{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:var(--fs-ui);color:var(--fg-muted);margin-top:6px}
.when .ic{color:var(--primary-ink)}

/* ═════ Option 3 · Slider rail ═════ */
.sl{--p:.5;position:relative;padding-top:4px}
.sl-top{position:relative;height:44px}
.bubble{position:absolute;bottom:4px;inset-inline-start:calc(22px + (100% - 44px) * var(--p));transform:translateX(calc(-50% * var(--local-dir)));min-height:36px;display:inline-flex;align-items:center;padding:0 12px;border-radius:var(--r-pill);background:var(--fg);color:var(--fg-inverse);font-size:var(--fs-ui);font-weight:600;white-space:nowrap}
.bubble::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:2px;z-index:-1}
.sl-track{position:relative;height:56px}
.rail{position:absolute;left:0;right:0;top:50%;height:16px;margin-top:-8px;border-radius:var(--r-pill);background:var(--surface-sunken);border:1px solid var(--line);box-shadow:inset 0 2px 3px var(--local-key-lo)}
.rail .fill{position:absolute;top:-1px;bottom:-1px;inset-inline-start:-1px;width:calc(22px + (100% - 44px) * var(--p));border-radius:var(--r-pill);background:linear-gradient(180deg,var(--primary-fill),var(--local-primary-deep))}
[dir="rtl"] .rail .fill{inset-inline-start:-1px}
.rail .det{position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--line-strong);inset-inline-start:calc(22px + (100% - 44px) * var(--k) / 4 - 3px)}
.rail .det.in{background:color-mix(in srgb,var(--primary-on) 80%,transparent)}
.sl input{position:relative;z-index:1;-webkit-appearance:none;appearance:none;width:100%;height:56px;margin:0;background:transparent;cursor:grab;touch-action:pan-y}
.sl input:focus-visible{outline:none}
.sl input::-webkit-slider-runnable-track{height:56px;background:transparent;border:0}
.sl input::-moz-range-track{height:56px;background:transparent;border:0}
.sl input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:44px;height:44px;margin-top:6px;border-radius:50%;border:1px solid var(--line-subtle);
  background:radial-gradient(circle at 50% 35%,var(--surface-raised) 0 40%,var(--surface-hover) 100%);
  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)}
.sl input::-moz-range-thumb{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-subtle);background:var(--surface-raised);box-shadow:var(--shadow-2)}
[data-theme="dark"] .sl input::-webkit-slider-thumb{border-color:var(--line-strong);background:radial-gradient(circle at 50% 35%,var(--surface-active) 0 40%,var(--surface-raised) 100%)}
.sl input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--line-focus);outline-offset:3px}
.sl.drag input::-webkit-slider-thumb{background:radial-gradient(circle at 50% 30%,var(--primary-hover),var(--primary-fill) 70%);border-color:transparent;transform:scale(1.08);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ph-white) 40%,transparent),0 0 0 6px color-mix(in srgb,var(--primary) 18%,transparent),0 6px 20px var(--local-glow)}
.sl.drag input{cursor:grabbing}
.sl.snap .rail .fill,.sl.snap .bubble{transition:width var(--d-180) var(--ease-brand),inset-inline-start var(--d-180) var(--ease-brand)}
.sl-ticks{position:relative;height:48px}
.sl-ticks > *{position:absolute;top:0;inset-inline-start:calc(22px + (100% - 44px) * var(--k, 0) / 4);transform:translateX(calc(-50% * var(--local-dir)))}
.t-start{position:absolute;bottom:4px;inset-inline-start:0;min-height:36px;display:flex;align-items:center;gap:6px;font-size:var(--fs-ui);color:var(--fg-muted);font-weight:600}
.tick-btn{white-space:nowrap;min-height:var(--t-min);min-width:var(--t-min);padding:0 8px;border:0;border-radius:var(--r-chip);background:transparent;font-size:var(--fs-ui);font-weight:600;color:var(--fg-muted)}
.tick-btn[aria-pressed="true"]{color:var(--primary-ink)}
.tick-btn[aria-pressed="true"]::after{content:"";display:block;height:2px;border-radius:2px;background:currentColor;margin-top:2px}

/* ═════ Option 4 · Glass segmented over the Aura photo ═════ */
.frame.photo{padding:0;border-color:transparent;background:var(--ph-ink) url("img/aura.jpg") center 30%/cover no-repeat;display:flex;flex-direction:column;justify-content:flex-end;min-height:600px}
.room-tag{position:absolute;top:16px;inset-inline-start:16px;min-height:36px;padding:0 14px;display:inline-flex;align-items:center;border-radius:var(--r-pill);font-size:var(--fs-ui);font-weight:600}
.glass-chip{background:var(--local-gtint);-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);color:var(--fg)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass-chip,.gseg{background:var(--surface)!important}}
.photo-foot{display:flex;flex-direction:column;gap:16px;padding:120px 16px 20px;background:linear-gradient(to bottom,transparent 0,var(--local-scrim) 120px)}
.on-media{color:var(--ph-white)!important}
.photo .kicker.on-media{color:color-mix(in srgb,var(--ph-white) 82%,transparent)!important}
.photo .summary.glass-chip{background:var(--local-gtint);box-shadow:none}
.gseg{position:relative;display:grid;grid-template-columns:repeat(4,1fr);height:60px;padding:5px;border-radius:var(--r-pill);background:var(--local-gtint);-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:inset 0 1px 0 color-mix(in srgb,var(--ph-white) 55%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--ph-ink) 10%,transparent)}
.gseg-thumb{position:absolute;top:5px;bottom:5px;inset-inline-start:5px;width:calc((100% - 10px) / 4);border-radius:var(--r-pill);overflow:hidden;
  background:linear-gradient(180deg,var(--local-gthumb-top),var(--local-gthumb-bot));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ph-white) 95%,transparent),inset 0 -2px 3px color-mix(in srgb,var(--ph-ink) 10%,transparent),0 0 0 1px color-mix(in srgb,var(--ph-white) 50%,transparent),0 6px 16px color-mix(in srgb,var(--ph-ink) 22%,transparent);
  transform:translateX(calc(var(--i, 1) * 100% * var(--local-dir)));transition:transform var(--d-260) var(--ease-brand)}
.gseg-thumb::before{content:"";position:absolute;inset:0 0 45% 0;border-radius:inherit;background:radial-gradient(80% 100% at 30% 0%,color-mix(in srgb,var(--ph-white) 85%,transparent),transparent 70%);opacity:.9}
.gseg-thumb::after{content:"";position:absolute;inset:auto 18% 3px 18%;height:2px;border-radius:2px;background:color-mix(in srgb,var(--ph-white) 70%,transparent);filter:blur(1px)}
[data-theme="dark"] .gseg-thumb{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ph-white) 35%,transparent),0 0 0 1px color-mix(in srgb,var(--ph-white) 18%,transparent)}
[data-theme="dark"] .gseg-thumb::before{opacity:.35}
.gseg.moving .gseg-thumb::before{animation:spec 520ms var(--ease-brand)}
@keyframes spec{0%{opacity:.4;transform:translateX(calc(-20% * var(--local-dir)))}60%{opacity:1}100%{transform:none}}
.gseg-btn{position:relative;z-index:1;border:0;background:transparent;border-radius:var(--r-pill);min-height:var(--t-min);font-size:var(--fs-ui);font-weight:600;color:var(--fg)}
.gseg-btn[aria-checked="true"]{font-weight:700;color:var(--fg)} /* ink, not blue: --primary-ink on a glass over a dark frame drops to 3.1:1 */
[data-theme="dark"] .gseg-btn[aria-checked="true"]{color:var(--ph-white)}
.photo .ask.open .ask-in{background:var(--local-gtint);border-color:var(--glass-stroke)}

/* ═════ Option 5 · Timeline blocks ═════ */
.tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;position:relative}
.tl::before{content:"";position:absolute;top:28px;bottom:28px;inset-inline-start:55px;width:2px;border-radius:2px;background:var(--line-strong)}
.blk{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:stretch;animation:blk-in var(--d-260) var(--ease-brand)}
.blk.out{animation:blk-out var(--d-180) var(--ease-brand) forwards}
@keyframes blk-in{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes blk-out{to{opacity:0;transform:translateY(-6px) scale(.97)}}
.blk .at{position:relative;font-size:var(--fs-ui);font-weight:600;color:var(--fg-muted);padding-top:18px}
.blk .at::after{content:"";position:absolute;top:24px;inset-inline-end:-13px;width:10px;height:10px;border-radius:50%;background:var(--canvas);border:2px solid var(--primary-ink)}
.blk .card{min-height:64px;display:flex;align-items:center;gap:10px;padding:10px 8px 10px 14px;border-radius:var(--r-tile);background:var(--surface);border:1px solid var(--line-subtle);box-shadow:var(--shadow-1)}
[dir="rtl"] .blk .card{padding:10px 14px 10px 8px}
[data-theme="dark"] .blk .card{background:var(--surface-raised);border-color:var(--line)}
.blk.base .card{background:var(--primary-muted);border-color:color-mix(in srgb,var(--primary) 30%,transparent)}
.blk .ct{flex:1;display:flex;flex-direction:column;line-height:1.3}
.blk .ct b{font-size:var(--fs-ui)}
.blk .ct span{font-size:var(--fs-ui);color:var(--fg-muted)}
.blk .pr{font-size:var(--fs-ui);font-weight:600;white-space:nowrap}
.rm{width:var(--t-min);height:var(--t-min);flex:none;border-radius:50%;border:1px solid var(--line);background:var(--canvas);display:grid;place-items:center;color:var(--fg-muted)}
.rm svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.rm-gap{width:var(--t-min);flex:none}
.rm[hidden]{display:grid;visibility:hidden}
.addblock{display:flex;align-items:center;gap:10px;min-height:var(--t-row);padding:0 16px;margin-inline-start:64px;border-radius:var(--r-tile);border:1.5px dashed var(--primary-ink);background:transparent;color:var(--primary-ink);font-size:var(--fs-ui);font-weight:700}
.addblock .add-price{margin-inline-start:auto;font-weight:600;color:var(--fg-muted)}
.addblock[hidden]{display:none}
.pinned{margin-top:auto;padding:14px 16px;border-radius:var(--r-tile);background:var(--fg);color:var(--fg-inverse);display:flex;flex-direction:column;gap:2px}
.pin-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pin-label{font-size:var(--fs-ui);font-weight:600;opacity:.85}
.pin-total{font:700 var(--fs-h3)/1.3 var(--font-body)}
.pin-sub{font-size:var(--fs-ui);opacity:.85}
[data-theme="dark"] .pinned{background:var(--surface-active);color:var(--fg);border:1px solid var(--line-strong)}

/* reduced motion: decoration off, state stays */
@media (prefers-reduced-motion:reduce){
  .frame.du *,.frame.du *::before,.frame.du *::after{animation:none!important;transition:none!important}
}
/* the lab column at a 390 px phone (shell overflow, page-local override) */
@media (max-width:421px){
  .options{padding-inline:0;grid-template-columns:390px;justify-content:start}
  .option .label{padding-inline:16px}
}