/* live-website-lw2 (owner-approved noviera Live Website, 2026-10-14, phone screens P1, P2, P3, P5, P8): the live parts of the
   walk-in page and the ticket page, on top of nvv-visit.css and in its tokens, so they follow the phone's light and dark
   appearance (and the member's Me choice) like the rest of the ticket app. Logical properties: Arabic mirrors. */
.nvl-p,.nvl-turn,.nvl-after{flex:1;padding:6px 20px 0;display:flex;flex-direction:column;gap:14px}
.nvl-k{margin:4px 0 0;font-size:12.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--g1)}
.nvl-h{margin:0;font:400 31px/1.1 var(--f-brand);letter-spacing:-.6px;color:var(--ink0);text-wrap:balance}
.nvl-h b{font-weight:600;color:var(--g1)}
.nvl-h--c{text-align:center;font-size:26px}
.nvl-sub{margin:0;color:var(--soft);font-size:15px;line-height:1.4}
/* P1: the two ways in */
.nvl-opt{display:block;padding:17px 18px 18px;border-radius:22px;background:var(--card);box-shadow:0 0 0 .5px var(--hair),var(--shadow);text-decoration:none;color:var(--ink0);transition:transform .14s cubic-bezier(.2,.8,.2,1)}
.nvl-opt:active{transform:scale(.985)}
.nvl-opt.is-hero{box-shadow:0 0 0 1.5px var(--g1),var(--shadow)}
.nvl-opt.is-off{opacity:.75}
.nvl-opt .tag{display:inline-block;margin-bottom:9px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:650;color:var(--g1);background:color-mix(in srgb,var(--g2) 15%,transparent)}
.nvl-opt b{display:block;font:600 19px/1.2 var(--f-brand);margin-bottom:4px}
.nvl-opt>span:not(.tag){display:block;font-size:14.5px;line-height:1.38;color:var(--soft)}
.nvl-steps{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:9px;font-size:15px}
.nvl-steps li{display:flex;align-items:center;gap:11px}
.nvl-steps i{flex:none;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--g1)}
.nvl-tiny{margin:auto 0 0;padding-top:18px;text-align:center;font-size:13px;color:var(--soft)}
/* P2: the sections */
.nvl-form{display:flex;flex-direction:column;gap:14px}
.nvl-list{border-radius:22px;background:var(--card);box-shadow:0 0 0 .5px var(--hair),var(--shadow);overflow:hidden}
.nvl-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:60px;padding:12px 18px;border-top:.5px solid var(--hair);cursor:pointer;-webkit-tap-highlight-color:transparent}
.nvl-row:first-child{border-top:0}
.nvl-row input{position:absolute;opacity:0;pointer-events:none}
.nvl-row b{font-size:17px;font-weight:550}
.nvl-row>span{display:flex;flex-direction:column;align-items:flex-end;text-align:end;font-size:13.5px;line-height:1.3;color:var(--soft)}
.nvl-row:has(input:checked){background:color-mix(in srgb,var(--g2) 12%,transparent)}
.nvl-row:has(input:checked) b{color:var(--g1)}
.nvl-row:has(input:focus-visible){outline:2.5px solid var(--g2);outline-offset:-3px}
.nvl-row:active{background:color-mix(in srgb,var(--g2) 18%,transparent)}
.nvl-list--info .nvl-row{cursor:default}
/* P3: the ticket */
.nvl-tk{display:flex;flex-direction:column;align-items:center;gap:16px;padding:22px 16px 18px}
.nvl-ring{position:relative;width:min(56vw,212px);aspect-ratio:1}
.nvl-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.nvl-ring circle{fill:none;stroke-width:5}
.nvl-ring .tr{stroke:var(--hair)}
.nvl-ring .pr{stroke:var(--ring);stroke-linecap:round;transition:stroke-dasharray .6s cubic-bezier(.2,.8,.2,1)}
.nvl-ring .n{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.nvl-ring .n b{font:600 64px/1 var(--f-brand);letter-spacing:-2px;color:var(--ink0)}
.nvl-ring .n b.long{font-size:46px}
.nvl-ring .n span{font-size:13.5px;color:var(--soft)}
.nvl-facts{display:flex;width:100%;margin:0;text-align:center}
.nvl-facts div{flex:1;display:flex;flex-direction:column;gap:2px}
.nvl-facts dd{margin:0;font-size:20px;font-weight:650;color:var(--ink0);font-variant-numeric:tabular-nums}
.nvl-facts dt{font-size:12.5px;color:var(--soft)}
.nvl-club{border-radius:22px;padding:16px 18px;background:color-mix(in srgb,var(--g2) 13%,var(--card));display:grid;gap:6px}
.nvl-club b{font:600 17px/1.2 var(--f-brand);color:var(--ink0)}
.nvl-club p{margin:0 0 6px;font-size:14px;line-height:1.4;color:var(--soft)}
.nvl-club .cb{display:flex;gap:10px}
.nvl-club .cb a{flex:1;min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:22px;font-size:15px;font-weight:650;text-decoration:none;white-space:nowrap}
.nvl-club .go{background:var(--g1);color:var(--onG)}
.nvl-club .have{box-shadow:inset 0 0 0 1.5px var(--g1);color:var(--g1)}
/* P5: the turn */
.nvl-turn{align-items:stretch;text-align:center;padding-top:14px}
.nvl-big{display:block;font:600 min(30vw,128px)/1 var(--f-brand);letter-spacing:-.05em;color:var(--g1)}
.nvl-with{margin:0;font-size:17px;color:var(--ink0)}
.nvl-with b{color:var(--g1);font-weight:650}
.nvl-rem,.nvl-chips{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.nvl-rem button,.nvl-chips button{min-height:50px;padding:10px 16px;border:0;border-radius:16px;background:var(--card);box-shadow:0 0 0 .5px var(--hair),var(--shadow);color:var(--ink0);font:inherit;font-size:16px;font-weight:550;cursor:pointer;
 touch-action:manipulation;transition:transform .14s cubic-bezier(.2,.8,.2,1),background-color .2s}
.nvl-rem button.is-pri,.nvl-chips button.is-pri,.nvl-rem button[aria-pressed=true],.nvl-chips button[aria-pressed=true]{background:var(--g1);color:var(--onG);box-shadow:none}
:is(.nvl-rem,.nvl-chips)[data-chosen] button.is-pri:not([aria-pressed=true]){background:var(--card);color:var(--ink0);box-shadow:0 0 0 .5px var(--hair),var(--shadow)}
.nvl-rem button:active,.nvl-chips button:active{transform:scale(.97)}
.nvl-rem button[aria-busy=true],.nvl-chips button[aria-busy=true]{opacity:.7}
/* a phone-only visit: Freddy's panel full width (the night stage of the website's display) */
.nvl-turn--solo .nvl-stage{position:relative;aspect-ratio:16/10;border-radius:20px;overflow:hidden;display:grid;place-items:center;
 background:radial-gradient(120% 90% at 50% 20%,rgba(31,42,68,1) 0%,rgba(16,24,40,1) 55%,rgba(10,15,28,1) 100%);box-shadow:0 0 0 1px rgba(36,48,73,1)}
.nvl-turn--solo .nvl-stage img{width:22%;height:auto}
.nvl-turn--solo .nvl-big{font-size:min(22vw,96px)}
/* P8: after the visit */
.nvl-after .nvv-btn{margin-top:2px}
.nvl-btn2{background:var(--card)!important;color:var(--ink0)!important;box-shadow:0 0 0 .5px var(--hair)}
/* right to left: the English rows (until the translation step) keep their own order inside the mirrored layout, as dir=auto would */
[dir=rtl] :is(.nvl-k,.nvl-h,.nvl-opt b,.nvl-opt>span,.nvl-steps li,.nvl-tiny,.nvl-row b,.nvl-row bdi,.nvl-club b,.nvl-club p,.nvl-club a,.nvl-facts dt,.nvl-facts dd,
 .nvl-sub,.nvl-with,.nvl-rem button,.nvl-chips button,.nvl-ring .n span,.nvl-after .nvv-btn){unicode-bidi:plaintext}
@media (prefers-reduced-motion:reduce){.nvl-opt,.nvl-rem button,.nvl-chips button,.nvl-ring .pr{transition:none}}
/* live-website-lw3 (frames P5 and P5b): once Freddy has moved on from the greeting, the phone beside a screen is the remote: a card
   "With Freddy · <section>" with "k of n · <clip>" and a green play mark, one line of text, the answers, and at the bottom the
   Share & Chat partner when the visit is shared. A phone-only visitor's Freddy stage is noviera-freddy.css. */
.nvl-greet{display:flex;flex-direction:column;gap:14px}
.nvl-rhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:18px;background:var(--card);box-shadow:0 0 0 .5px var(--hair),var(--shadow);text-align:start}
.nvl-rhead span{display:flex;flex-direction:column;gap:2px;min-width:0}
.nvl-rhead b{font-size:15.5px;font-weight:600;color:var(--ink0)}
.nvl-rhead small{font-size:13px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nvl-rhead i{flex:none;display:grid;place-items:center;color:var(--g1)}
.nvl-sub--remote{text-align:start;font-size:14.5px}
.nvl-turn.is-later{text-align:start}
.nvl-partner{margin-top:auto;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:18px;background:var(--card);box-shadow:0 0 0 .5px var(--hair),var(--shadow);text-align:start}
.nvl-partner .av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:650;font-size:15px;color:var(--g1);background:color-mix(in srgb,var(--g2) 15%,transparent)}
.nvl-partner span:last-child{display:flex;flex-direction:column;gap:1px;min-width:0}
.nvl-partner b{font-size:15px;font-weight:600;color:var(--ink0)}
.nvl-partner small{font-size:13px;color:var(--soft)}
.nvl-turn--solo .nvl-chips[hidden]{display:none}
.nvl-turn--solo .nvl-chips:not([hidden]){animation:nvl-rise .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes nvl-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
[dir=rtl] :is(.nvl-rhead b,.nvl-rhead small,.nvl-partner b,.nvl-partner small){unicode-bidi:plaintext}
@media (prefers-reduced-motion:reduce){.nvl-turn--solo .nvl-chips:not([hidden]){animation:none}}
/* live-website-lw6: the answers wait, hidden, until Freddy has finished the clip (the same moment as on the website's screen) */
:is(.nvl-rem,.nvl-chips)[hidden]{display:none}
.nvl-rem:not([hidden]){animation:nvl-rise .22s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){.nvl-rem:not([hidden]){animation:none}}
