/* Session length, wave 2 · page styles (W2C, Rick, 2026-10-16). Tokens only; built on wave-1 duration.css options 2, 3, 4 and 5.
   Page-local values, all derived from tokens:
   --local-deep     darker-downward stop of the tactile primary
   --local-glow     selected / drag glow
   --local-dir      +1 LTR / −1 RTL for mirrored translates
   --local-scrim    ink veil under text on the room photo
   --local-gtint    glass tint dense enough that its labels pass on their own (78 % light, 74 % dark) */
:root, [data-theme="light"] {
  --local-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-track: var(--line);
  --local-dir: 1;
}
[data-theme="dark"] {
  --local-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);
  --local-track: var(--line-strong);
}
[dir="rtl"] { --local-dir: -1; }
@media (max-width: 430px) {
  .options { padding-inline: 0; }
  .option .label { padding-inline: 16px; }
  .option .frame { border-radius: 0; border-inline: 0; }
}

/* ── frame scaffold ── */
.frame.du2 { display: flex; flex-direction: column; gap: 16px; }
.du2 .kicker { margin: 0; font-size: var(--fs-ui); font-weight: 600; color: var(--fg-subtle); }
.du2 h2 { margin-top: -10px; }
.du2 .hint { margin: -12px 0 0; font-size: var(--fs-ui); color: var(--fg-muted); }
[dir="rtl"] .du2 h2, [dir="rtl"] .du2 .kicker { font-family: var(--font-arabic); font-stretch: normal; letter-spacing: 0; }
[dir="rtl"] .du2, [dir="rtl"] .du2 button, [dir="rtl"] .du2 input { font-family: var(--font-arabic); }
:where(.du2) button { font: inherit; color: inherit; margin: 0; -webkit-tap-highlight-color: transparent; cursor: pointer; touch-action: manipulation; }
.du2 .ic { width: 20px; height: 20px; flex: none; }
.du2 .cap { margin: 0; font-size: var(--fs-ui); color: var(--fg-muted); text-align: center; }
.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; }

/* the in-flow "longer" door: opens in place, never a dead end */
.reveal { 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); }
.reveal.open { grid-template-rows: 1fr; opacity: 1; margin-top: 0; }
.reveal-in { overflow: hidden; min-height: 0; }
.over-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: var(--r-tile); background: var(--accent-muted); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.over-card p { margin: 0; font-size: var(--fs-ui); line-height: 1.45; color: var(--fg); }
.over-card b { font-size: var(--fs-h3); }
.wa-pill { min-height: var(--t-button); padding: 0 20px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-ui); font-weight: 600; position: relative; isolation: isolate; }
.wa-pill .ic { color: var(--success); }
[data-theme="dark"] .wa-pill { background: var(--surface-raised); }

/* press physics (transform only) */
.step-btn, .gseg-btn, .brow, .bcard.ext, .wa-pill, .stop, .ghost, .cb-btn { transition: transform var(--d-180) var(--ease-brand), background-color var(--d-180), border-color var(--d-180), color var(--d-180); }
.step-btn:active:not(:disabled), .gseg-btn:active, .brow:active, .bcard.ext:active, .wa-pill:active, .stop:active, .ghost:active, .cb-btn:active { transform: scale(var(--press-scale)); transition-duration: var(--d-120); }

/* ═════ Option 1 · Stepper + hex fill ═════ */
.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; position: relative; isolation: isolate; }
.step-btn svg { width: 24px; height: 24px; }
.step-btn.plus { background: linear-gradient(180deg, var(--primary-fill), var(--local-deep)); color: var(--primary-on); border-color: transparent; box-shadow: var(--tactile-shadow); }
.step-btn.plus:active:not(:disabled) { 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); }
.hexblock { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hexrow { position: relative; }
.hx { position: absolute; width: 48px; height: 55.43px; overflow: visible; }
.hx .bg { fill: var(--surface-sunken); }
[data-theme="dark"] .hx .bg { fill: var(--surface-raised); }
.hx .fl { fill: var(--primary-fill); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform 380ms var(--ease-brand); }
.hx.on .fl { transform: scaleY(1); transition-delay: var(--delay, 0ms); }
.hx .ol { fill: none; stroke: var(--line-strong); stroke-width: 1.5px; vector-effect: non-scaling-stroke; transition: stroke var(--d-180); }
.hx.on .ol { stroke: var(--primary); }
.hx.ext .ol { stroke-dasharray: 4 3; }
.hx.ext .fl { fill: var(--secondary); }
.hx.ext.on .ol { stroke: var(--secondary); stroke-dasharray: none; }
.totalcard { display: grid; gap: 4px; padding: 16px 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); }
.money { justify-self: start; display: inline-flex; align-items: baseline; gap: 8px; color: var(--fg); }
[dir="rtl"] .money { justify-self: end; }
.money .cur { font: 600 var(--fs-h3)/1 var(--font-body); color: var(--fg-muted); }
.roller { display: inline-flex; font: 700 44px/1 var(--font-display); font-stretch: var(--font-display-stretch); }
.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, .roller .sep.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 .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; }
.when { display: flex; align-items: center; gap: 8px; font-size: var(--fs-ui); color: var(--fg-muted); margin-top: 4px; }
.when .ic { color: var(--primary-ink); }

/* ═════ Option 2 · Slider + waveform ═════ */
.readout { display: flex; flex-direction: column; gap: 2px; margin-bottom: -4px; }
.readout b { font: 700 28px/1.15 var(--font-display); font-stretch: var(--font-display-stretch); }
[dir="rtl"] .readout b { font-family: var(--font-arabic); font-stretch: normal; }
.readout span { font-size: var(--fs-ui); color: var(--fg-muted); }
.wv { --p: .3; --g: .7; display: flex; flex-direction: column; gap: 6px; }
.wv-track { position: relative; height: 84px; }
.rail { position: absolute; inset-block: 0; inset-inline: 22px; border-radius: 16px; }
.wave { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
.wave i { flex: 1 1 0; height: 70px; border-radius: 3px; background: var(--local-track); transform: scaleY(.08); transition: transform 300ms var(--ease-brand), background-color var(--d-180); }
.wave i.on { background: linear-gradient(to bottom, var(--primary-fill), var(--local-deep)); transform: scaleY(calc(var(--a) * var(--g))); }
.wave i.pz { background: color-mix(in srgb, var(--accent) 55%, var(--local-track)); }
.wv.plus .wave i.pz { background: var(--accent); transform: scaleY(calc(var(--a) * .9)); }
.plus-zone { position: absolute; inset-block: 4px; inset-inline-start: calc(600% / 7 + 1px); inset-inline-end: -6px; border-radius: 12px; border: 1.5px dashed color-mix(in srgb, var(--accent) 70%, transparent); pointer-events: none; }
.det { position: absolute; inset-block-end: -10px; inset-inline-start: calc(var(--p) * 100% - 1px); width: 2px; height: 8px; border-radius: 1px; background: var(--line-strong); }
.wv input { position: absolute; inset: 0; z-index: 1; -webkit-appearance: none; appearance: none; width: 100%; height: 84px; margin: 0; background: transparent; cursor: grab; touch-action: pan-y; }
.wv input:focus-visible { outline: none; }
.wv input::-webkit-slider-runnable-track { height: 84px; background: transparent; border: 0; }
.wv input::-moz-range-track { height: 84px; background: transparent; border: 0; }
.wv input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 44px; height: 44px; margin-top: 20px; 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); }
.wv 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"] .wv 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%); }
.wv input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--line-focus); outline-offset: 3px; }
.stops { position: relative; height: var(--t-min); margin-top: 6px; }
.stop { position: absolute; top: 0; inset-inline-start: calc(22px + (100% - 44px) * var(--p)); transform: translateX(calc(-50% * var(--local-dir))); min-width: var(--t-min); height: var(--t-min); padding: 0 6px; border: 0; border-radius: var(--r-chip); background: transparent; font-size: var(--fs-ui); font-weight: 600; color: var(--fg-muted); white-space: nowrap; }
.stop:active { transform: translateX(calc(-50% * var(--local-dir))) scale(var(--press-scale)); }
.stop[aria-pressed="true"] { color: var(--primary-ink); box-shadow: inset 0 -2px 0 currentColor; border-radius: 0; }
.stop[data-v="9"] { color: var(--warning); }

/* ═════ Option 3 · Glass capsule + hex ring over the Aura photo ═════ */
.frame.du2.photo { padding: 0; gap: 0; border-color: transparent; background: var(--ph-ink) url("img/aura.jpg") center 30%/cover no-repeat; justify-content: flex-end; min-height: 660px; }
.room-tag { position: absolute; top: 16px; inset-inline-start: 16px; z-index: 2; 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; } }
.ring-card { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 12px; border-radius: var(--r-card); }
[dir="rtl"] .ring-card { padding: 10px 12px 10px 16px; }
.ring { flex: none; width: 56px; height: 64.7px; overflow: visible; --fill: .5; }
.ring path { fill: none; stroke-linejoin: round; }
.ring .trk { stroke: var(--line-strong); stroke-width: 7; }
.ring .prog { stroke: var(--primary); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--fill)); transition: stroke-dashoffset var(--d-400) var(--ease-brand), stroke var(--d-260); }
[data-theme="dark"] .ring .prog { stroke: var(--secondary); }
.ring.plus .prog { stroke: var(--accent); }
.rc-txt { display: flex; flex-direction: column; min-width: 0; }
.rc-txt b { font: 700 24px/1.15 var(--font-display); font-stretch: var(--font-display-stretch); }
[dir="rtl"] .rc-txt b { font-family: var(--font-arabic); font-stretch: normal; }
.rc-txt span { font-size: var(--fs-ui); font-weight: 600; color: var(--fg-muted); }
.photo-foot { display: flex; flex-direction: column; gap: 14px; padding: 160px 16px 20px; background: linear-gradient(to bottom, transparent 0, var(--local-scrim) 120px); }
.photo-foot h2 { margin-top: -8px; }
.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(5, 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) / 5); 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; }
[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-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); white-space: nowrap; }
.gseg-btn[aria-checked="true"] { font-weight: 700; }
.gseg-btn[data-v="5"] { color: var(--warning); }
[data-theme="dark"] .gseg-btn[data-v="5"] { color: var(--accent); }
.gsheet { position: absolute; z-index: 3; inset-inline: 12px; inset-block-end: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; border-radius: var(--r-sheet); box-shadow: var(--glass-shadow);
  transform: translateY(calc(100% + 24px)); transition: transform 300ms var(--ease-brand); }
.sheet-open .gsheet { transform: none; }
.gsheet b { font-size: var(--fs-h3); }
.gsheet p { margin: 0; font-size: var(--fs-ui); line-height: 1.45; }
.ghost { min-height: var(--t-button); padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: transparent; font-size: var(--fs-ui); font-weight: 600; }
.photo-foot { transition: opacity var(--d-260); }
.sheet-open .photo-foot { opacity: .25; }

/* ═════ Option 4 · Hex bars ═════ */
.bars { display: flex; flex-direction: column; gap: 6px; }
.brow { width: 100%; min-height: 64px; padding: 8px 4px; border: 0; border-radius: 14px; background: transparent; display: flex; flex-direction: column; align-items: stretch; gap: 8px; text-align: start; position: relative; }
@media (hover: hover) { .brow:hover { background: var(--surface-hover); } }
.bar { position: relative; display: block; height: 24px; width: calc(var(--w) * 100%); background: var(--local-track);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%); }    /* 120° hex tips: depth = 12 / tan 60° ≈ 7 px (static, never animated) */
.bfill { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--primary-fill), var(--local-deep)); transform: scaleX(0); transform-origin: left center; transition: transform 340ms var(--ease-brand); }
[dir="rtl"] .bfill { transform-origin: right center; }
.brow.in .bfill { transform: scaleX(1); transition-delay: var(--delay, 0ms); }
.brow.lit .bar { animation: barpop var(--d-400) var(--ease-brand); }
@keyframes barpop { 0% { transform: scaleY(.85); } 50% { transform: scaleY(1.12); } 100% { transform: none; } }
.bcap { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: var(--fs-ui); color: var(--fg-muted); line-height: 1.3; }
.bcap b { font-size: 17px; color: var(--fg); }
.badge { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; color: transparent; flex: none; }
.badge svg { width: 14px; height: 14px; }
.brow[aria-checked="true"] .badge { background: var(--primary-fill); border-color: var(--primary-fill); color: var(--primary-on); }
.brow[aria-checked="true"] .bcap b { color: var(--primary-ink); }
.brow[aria-checked="true"] { background: var(--surface); box-shadow: 0 0 0 1.5px var(--primary), 0 0 14px var(--local-glow); }
[data-theme="dark"] .brow[aria-checked="true"] { background: var(--surface-raised); }
.brow.more { margin-top: -10px; }
.plusbar { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 40%, transparent) 0 6px, var(--accent-muted) 6px 12px); display: flex; align-items: center; justify-content: center; font-size: var(--fs-ui); font-weight: 700; color: var(--fg); line-height: 24px; }
.brow.more.on .plusbar { background: var(--accent); color: var(--accent-on); }
.brow.more.on { background: var(--surface); box-shadow: 0 0 0 1.5px var(--accent); }
[data-theme="dark"] .brow.more.on { background: var(--surface-raised); }

/* ═════ Option 5 · Blocks + offer ═════ */
.blocks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; position: relative; }
.blocks::before { content: ""; position: absolute; top: 28px; bottom: 40px; inset-inline-start: 55px; width: 2px; border-radius: 2px; background: var(--line-strong); }
.blk { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.blk .at { position: relative; font-size: var(--fs-ui); font-weight: 600; color: var(--fg-muted); padding-top: 20px; white-space: nowrap; }
.blk .at::after { content: ""; position: absolute; top: 26px; inset-inline-end: -13px; width: 10px; height: 10px; border-radius: 50%; background: var(--canvas); border: 2px solid var(--line-strong); transition: background-color var(--d-180), border-color var(--d-180); }
.blk.base .at::after, .blk.in .at::after { background: var(--primary-fill); border-color: var(--primary-fill); }
.blk.talk .at { color: var(--warning); }
.blk.talk .at::after { border-color: var(--accent); }
.bcard { width: 100%; min-height: 64px; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: var(--r-tile); background: var(--surface); border: 1px solid var(--line-subtle); box-shadow: var(--shadow-1); text-align: start; position: relative; isolation: isolate; }
[dir="rtl"] .bcard { padding: 10px 14px 10px 10px; }
[data-theme="dark"] .bcard { background: var(--surface-raised); border-color: var(--line); }
.blk.base .bcard { background: var(--primary-muted); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.bcard.ext[aria-pressed="false"] { background: transparent; box-shadow: none; border: 1.5px dashed color-mix(in srgb, var(--primary) 55%, transparent); }
.bcard.ext[aria-pressed="false"] .bt b { color: var(--primary-ink); }
.bcard.ext[aria-pressed="true"] { animation: blk-in var(--d-260) var(--ease-brand); }
@keyframes blk-in { from { opacity: .5; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.bt { flex: 1; display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.bt b { font-size: var(--fs-ui); }
.bt span { font-size: var(--fs-ui); color: var(--fg-muted); }
.bt .note { margin-top: 2px; color: var(--fg-subtle); font-style: italic; }
[dir="rtl"] .bt .note { font-style: normal; }
.pr { font-size: var(--fs-ui); font-weight: 600; white-space: nowrap; }
.ck { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--primary-ink); color: var(--primary-ink); }
.ck svg { width: 18px; height: 18px; }
.ck .i-check { display: none; } .ck .i-plus { display: grid; }
.ck.on, .bcard.ext[aria-pressed="true"] .ck { background: var(--primary-fill); border-color: var(--primary-fill); color: var(--primary-on); }
.ck.on .i-check, .bcard.ext[aria-pressed="true"] .i-check { display: grid; }
.bcard.ext[aria-pressed="true"] .i-plus { display: none; }
.talkcard { flex-direction: column; align-items: stretch; gap: 10px; padding: 16px !important; background: var(--accent-muted) !important; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent) !important; box-shadow: none; }
.talkcard b { font-size: var(--fs-h3); }
.talkcard p { margin: 0; font-size: var(--fs-ui); line-height: 1.45; }
.talkcard .wa-pill { align-self: flex-start; }
.cb { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.cb label { font-size: var(--fs-ui); font-weight: 600; }
.cb-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cb input { flex: 1 1 200px; min-width: 0; height: var(--t-button-lg); padding: 0 14px; border-radius: var(--r-input); border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); font: 500 17px/1 var(--font-body); }
[dir="rtl"] .cb input { text-align: right; }
.cb input::placeholder { color: var(--fg-subtle); }
.cb-btn { flex: 1 0 auto; height: var(--t-button-lg); padding: 0 18px; border-radius: var(--r-pill); border: 0; background: var(--fg); color: var(--fg-inverse); font-size: var(--fs-ui); font-weight: 600; white-space: nowrap; }
.cb-done { margin: 0; font-size: var(--fs-ui); color: var(--success); font-weight: 600; min-height: 0; }
.cb-done:empty { 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-label { font-size: var(--fs-ui); font-weight: 600; opacity: .85; }
.pin-total { font: 700 var(--fs-h3)/1.3 var(--font-body); }
[dir="rtl"] .pin-total { font-family: var(--font-arabic); }
[data-theme="dark"] .pinned { background: var(--surface-active); color: var(--fg); border: 1px solid var(--line-strong); }

/* reduced motion: fills jump, decoration off, state stays (motion rule 20) */
@media (prefers-reduced-motion: reduce) {
  .frame.du2 *, .frame.du2 *::before, .frame.du2 *::after { animation: none !important; transition: none !important; }
}