/* live-website-lw2 (owner-approved noviera Live Website, 2026-10-14, steps 01 to 05): the front page as the display of the noviera
   website queue. On top of noviera-home.css: the display itself (.nvd: night ground, copper lines, the big green number, the
   line, the menu) is today's approved style and is not restyled here. Added, as the approved frames place them: people visiting
   now and "you are number N" (under the menu), the sections with their real waiting counts (quiet pills above the facts), the
   card with the QR code (dark card with a green rim), the section list of "Take my number on this computer", and the called
   layout: "Your turn", the number, "<section> · Freddy is with you" and Freddy's panel with the answers. Dark only, as the
   public site is. Logical properties, so Arabic mirrors. */
.nvd--live{--palette-nvl-card:#111A2E;--palette-nvl-rim:#243049;--palette-nvl-chip-rim:#2B3A57;--palette-nvl-soft:#CBD5E1;--palette-nvl-nav:#E2E8F0;
 --palette-nvl-ink:#F1F5F9;--palette-nvl-mint:#86EFAC;--palette-nvl-green:#22C55E;--palette-nvl-press:#16A34A;--palette-nvl-stage-a:#1F2A44;
 --palette-nvl-stage-b:#101828;--palette-nvl-stage-c:#0A0F1C;--palette-nvl-qr:#FFFFFF;--palette-nvl-ground:#0B1220;
 --nvl-card:var(--palette-nvl-card);--nvl-rim:var(--palette-nvl-rim);--nvl-soft:var(--palette-nvl-soft);--nvl-ink:var(--palette-nvl-ink);
 --nvl-mint:var(--palette-nvl-mint);--nvl-green:var(--palette-nvl-green);--nvl-press:var(--palette-nvl-press);--nvl-glow:rgba(34,197,94,.22);
 --nvl-card-rim:rgba(34,197,94,.75);--nvl-you-bg:rgba(34,197,94,.12);--nvl-you-rim:rgba(34,197,94,.5)}
.nvd--live [hidden]{display:none!important}
.nvd--live .nvd__place--logo img{width:clamp(112px,9.2vw,150px);height:auto;display:block}

/* under the menu: "you are number N" on the leading side, people visiting now on the trailing side */
.nvl-meta{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;min-height:2.6em;margin-block-start:calc(-1 * clamp(4px,1vw,14px))}
.nvl-you{margin:0;display:inline-flex;align-items:center;gap:.7em;font-size:clamp(14px,1.25vw,19px);color:var(--palette-nvl-nav);background:var(--nvl-you-bg);border:1px solid var(--nvl-you-rim);border-radius:999px;padding:.42em 1.1em}
.nvl-you b{color:var(--nvl-mint);font-weight:600;font-variant-numeric:tabular-nums}
.nvl-visiting{margin:0;margin-inline-start:auto;display:inline-flex;align-items:center;gap:.7em;font-size:clamp(13px,1.15vw,17px);color:var(--nvl-soft)}
.nvl-dot{flex:none;width:.62em;height:.62em;border-radius:50%;background:var(--nvl-green);box-shadow:0 0 0 .32em var(--nvl-glow)}
@media (prefers-reduced-motion:no-preference){.nvl-dot{animation:nvl-breathe 2.8s ease-in-out infinite}}
@keyframes nvl-breathe{50%{box-shadow:0 0 0 .5em rgba(34,197,94,.08)}}

/* the foot: the line, the sections and the facts on the leading side, the card on the trailing side (it rises above the line) */
.nvd--live .nvl-foot{flex-wrap:nowrap;align-items:flex-end;justify-content:space-between;gap:clamp(20px,3vw,48px)}
.nvl-left{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:clamp(12px,1.25vw,20px)}
.nvl-left .nvd__line{flex:none;width:100%}
.nvl-left .nvd__facts{flex:none}
.nvl-sects{display:flex;flex-wrap:wrap;gap:clamp(8px,.9vw,14px)}
.nvl-sects span{display:inline-flex;align-items:baseline;gap:.45em;font-size:clamp(13px,1.15vw,17px);line-height:1.2;color:var(--nvl-soft);border:1px solid var(--nvl-rim);border-radius:999px;padding:.34em .95em;white-space:nowrap}
.nvl-sects b{color:var(--nvl-ink);font-weight:600;font-variant-numeric:tabular-nums}
.nvl-sects span.is-on{border-color:var(--nvl-green);color:var(--nvl-ink)}

/* the card: QR, title, line, the traditional website, "Take my number on this computer" */
.nvl-card{flex:none;position:relative;display:flex;align-items:center;gap:clamp(14px,1.4vw,22px);max-width:min(600px,48vw);padding:clamp(14px,1.3vw,20px) clamp(16px,1.5vw,24px);
 background:var(--nvl-card);border:1.5px solid var(--nvl-card-rim);border-radius:clamp(14px,1.3vw,20px);scroll-margin:24px}
.nvl-card__qr{flex:none;width:clamp(96px,8.6vw,132px);aspect-ratio:1;background:var(--palette-nvl-qr);border-radius:clamp(8px,.7vw,11px);padding:clamp(6px,.55vw,9px);box-sizing:border-box}
.nvl-card__qr img{display:block;width:100%;height:100%}
.nvl-card__tx{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:.3em}
.nvl-card__tx b{font-family:var(--display);font-size:clamp(20px,2vw,32px);font-weight:600;line-height:1.12;color:var(--nvl-ink);letter-spacing:-.01em}
.nvl-card__tx span{font-size:clamp(13px,1.15vw,17px);line-height:1.35;color:var(--nvl-soft)}
.nvl-card__web{margin-top:.45em;font-size:clamp(13px,1.05vw,16px);color:var(--nvl-mint)!important;text-decoration:none}
.nvl-card__web:hover{text-decoration:underline}
.nvl-card__here{margin:0;padding:.15em 0;border:0;background:none;font:inherit;font-size:clamp(12px,.95vw,14.5px);color:var(--nvl-soft);text-decoration:underline;text-decoration-color:rgba(203,213,225,.4);text-underline-offset:3px;cursor:pointer}
.nvl-card__here:hover{color:var(--nvl-ink)}
.nvl-card__phone{display:none}
.nvl-card[data-mode=full] .nvl-card__tx span{max-width:24em}
:is(.nvl-card__here,.nvl-card__web,.nvl-chips button,.nvl-pick button):focus-visible{outline:2px solid var(--nvl-mint);outline-offset:3px;border-radius:8px}

/* "Take my number on this computer": the sections with their waiting counts, in the card */
.nvl-card[data-mode=pick]{flex-direction:column;align-items:stretch;min-width:min(380px,40vw)}
.nvl-card[data-mode=pick] :is(.nvl-card__qr,.nvl-card__tx,.nvl-card__phone){display:none!important}
.nvl-pick{display:flex;flex-direction:column;gap:10px}
.nvl-pick__t{font-family:var(--display);font-size:clamp(18px,1.6vw,26px);font-weight:600;color:var(--nvl-ink)}
.nvl-pick__list{display:flex;flex-direction:column;border:1px solid var(--nvl-rim);border-radius:14px;overflow:hidden}
.nvl-pick__list button{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:48px;padding:10px 16px;border:0;border-top:1px solid var(--nvl-rim);background:transparent;color:var(--nvl-ink);font:inherit;font-size:clamp(15px,1.2vw,18px);font-weight:500;text-align:start;cursor:pointer;transition:background .15s}
.nvl-pick__list button:first-child{border-top:0}
.nvl-pick__list button small{font-size:.82em;font-weight:400;color:var(--nvl-soft);white-space:nowrap}
.nvl-pick__list button:hover{background:rgba(34,197,94,.1)}
.nvl-pick__list button:active{background:rgba(34,197,94,.18)}
.nvl-pick__list button[aria-busy=true]{opacity:.6;pointer-events:none}
.nvl-pick__err{margin:0;font-size:14px;color:var(--nvl-mint)}
.nvl-pick__x{align-self:flex-start;min-height:40px;padding:0 4px;border:0;background:none;color:var(--nvl-soft);font:inherit;font-size:15px;cursor:pointer}

/* called: "Your turn", the number, "<section> · Freddy is with you", Freddy's panel and the answers */
.nvl-with{margin:0;font-size:clamp(17px,1.9vw,30px);color:var(--palette-nvl-nav);font-weight:400}
.nvl-with b{color:var(--nvl-mint);font-weight:600}
.nvl-panel{display:flex;flex-direction:column;gap:clamp(12px,1.2vw,18px);min-width:0}
.nvl-stage{position:relative;aspect-ratio:16/10;border-radius:clamp(16px,1.6vw,24px);overflow:hidden;border:1px solid var(--nvl-rim);display:grid;place-items:center;
 background:radial-gradient(120% 90% at 50% 20%,var(--palette-nvl-stage-a) 0%,var(--palette-nvl-stage-b) 55%,var(--palette-nvl-stage-c) 100%)}
.nvl-stage img{width:clamp(64px,16%,140px);height:auto;opacity:.95}
.nvl-chips{display:flex;flex-wrap:wrap;gap:clamp(8px,.9vw,14px)}
.nvl-chips button{min-height:44px;padding:.62em 1.35em;border:1px solid var(--palette-nvl-chip-rim);border-radius:999px;background:var(--nvl-card);color:var(--nvl-ink);font:inherit;font-size:clamp(14px,1.3vw,19px);font-weight:400;line-height:1.2;cursor:pointer;
 touch-action:manipulation;transition:transform .14s cubic-bezier(.2,.8,.2,1),background-color .2s,border-color .2s}
.nvl-chips button.is-pri,.nvl-chips button[aria-pressed=true]{background:var(--nvl-press);border-color:var(--nvl-press);font-weight:500;color:var(--palette-nvl-qr)}
.nvl-chips[data-chosen] button.is-pri:not([aria-pressed=true]){background:var(--nvl-card);border-color:var(--palette-nvl-chip-rim);font-weight:400;color:var(--nvl-ink)}
.nvl-chips button:active{transform:scale(.96)}
.nvl-chips button[aria-busy=true]{opacity:.7}
.nvd--live.is-turn :is(.nvl-meta,.nvl-left .nvd__line,.nvl-sects,.nvl-card){display:none!important}
.nvd--live.is-turn .nvl-main{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto 1fr;grid-template-areas:"now panel" "with panel";column-gap:clamp(24px,5vw,80px);row-gap:clamp(14px,1.8vw,28px);align-items:start;align-content:start;flex:1 1 auto}
.nvd--live.is-turn .nvl-now{grid-area:now}
.nvd--live.is-turn .nvl-with{grid-area:with}
.nvd--live.is-turn .nvl-panel{grid-area:panel}
.nvd--live.is-turn .nvd__facts{justify-content:flex-start;gap:clamp(40px,12vw,220px)}
@media (prefers-reduced-motion:no-preference){.nvd--live.is-turn .nvl-panel{animation:nvl-in .5s cubic-bezier(.2,.8,.2,1) both}}
@keyframes nvl-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.nvl-chips button,.nvl-pick__list button{transition:none}}

.nvd--live .nvd__facts span:empty{display:none}
/* right to left: the English rows (until the translation step) keep their own order inside the mirrored layout, as dir=auto
   would; the label above the big number gets the room the locale font's taller line needs */
[dir=rtl] .nvd--live :is(.nvl-visiting span,.nvl-you span,.nvl-card__tx b,.nvl-card__tx span,.nvl-card__tx a,.nvl-card__tx button,.nvl-card__phone b,.nvl-card__phone span,
 .nvl-pick__t,.nvl-pick__list span,.nvl-pick__list small,.nvl-pick__err,.nvl-with,.nvl-chips button,.nvd__facts span){unicode-bidi:plaintext}
[dir=rtl] .nvd--live .nvl-now .nvd__label{line-height:1.35;margin-block-end:clamp(14px,2.8vw,48px)}

@media (max-width:980px){
 .nvd--live.is-turn .nvl-main{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"now" "with" "panel"}
 .nvl-card{max-width:56vw}
}
/* a phone (the phone-only visitor): no QR to scan, the card is the way to the walk-in page on this phone */
@media (max-width:640px){
 .nvl-meta{margin-block-start:0}
 .nvl-visiting{margin-inline-start:0}
 .nvd--live .nvl-foot{flex-direction:column;align-items:stretch;gap:18px}
 .nvl-sects{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-4px;padding-inline:4px}
 .nvl-sects::-webkit-scrollbar{display:none}
 .nvl-card{max-width:none;padding:0;border:0;background:none}
 .nvl-card :is(.nvl-card__qr,.nvl-card__tx){display:none}
 .nvl-card__phone{display:flex;flex-direction:column;gap:4px;width:100%;padding:16px 20px;border-radius:20px;background:var(--nvl-card);border:1.5px solid var(--nvl-card-rim);text-decoration:none;color:var(--nvl-ink)!important}
 .nvl-card__phone b{font-family:var(--display);font-size:22px;font-weight:600}
 .nvl-card__phone span{font-size:14px;color:var(--nvl-soft)}
 .nvl-card[data-mode=full]{padding:16px 20px;border:1.5px solid var(--nvl-card-rim);background:var(--nvl-card);border-radius:20px}
 .nvl-card[data-mode=full] .nvl-card__tx{display:flex}
 .nvl-card[data-mode=pick]{min-width:0}
}

/* live-website-lw3 (approved frames W3 and W4): Freddy's stage is noviera-freddy.css. The answers appear when he has finished
   (the listening loop plays). A tour step (W4): on the leading side "<section> · k of n", the step's name, its line, the pips and
   the four tour cards (the current one with a green rim); Freddy smaller on the trailing side with the answers under him; the
   big number and "Freddy is with you" make room for it. */
.nvd--live .nvl-chips:not([hidden]){animation:nvl-in .32s cubic-bezier(.2,.8,.2,1) both}
.nvl-spot{grid-area:spot;display:flex;flex-direction:column;min-width:0;align-self:center}
.nvl-spot__k{margin:0;font-size:clamp(12px,1.15vw,17px);letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--nvl-mint)}
.nvl-spot__t{margin:.3em 0 .35em;font-family:var(--display);font-size:clamp(34px,4.4vw,72px);font-weight:400;letter-spacing:-.03em;line-height:1.05;color:var(--nvl-ink)}
.nvl-spot__p{margin:0;max-width:34em;font-size:clamp(15px,1.5vw,22px);line-height:1.45;color:var(--nvl-soft)}
.nvl-spot__pips{display:flex;gap:.6em;margin-top:clamp(16px,2vw,30px)}
.nvl-spot__pips i{width:clamp(28px,3vw,46px);height:4px;border-radius:4px;background:var(--nvl-rim);transition:background-color .4s}
.nvl-spot__pips i.is-on{background:var(--nvl-green)}
.nvl-spot__cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);margin-top:clamp(20px,3vw,44px);max-width:880px}
.nvl-spot__cards div{aspect-ratio:4/3;display:flex;flex-direction:column;gap:.3em;padding:clamp(10px,.9vw,14px);border-radius:clamp(10px,1vw,16px);background:var(--nvl-card);
 border:1px solid var(--nvl-rim);font-size:clamp(12px,1vw,15px);line-height:1.3;color:var(--nvl-soft);transition:border-color .4s}
.nvl-spot__cards b{font-size:clamp(13px,1.2vw,18px);font-weight:500;color:var(--nvl-ink)}
.nvl-spot__cards div.is-on{border-color:var(--nvl-green)}
.nvd--live.is-turn.is-tour .nvl-main{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"spot panel";align-items:center}
.nvd--live.is-tour :is(.nvl-now,.nvl-with){display:none!important}
.nvd--live.is-tour .nvl-panel{width:100%;max-width:640px;justify-self:end}
[dir=rtl] .nvd--live :is(.nvl-spot__k,.nvl-spot__t,.nvl-spot__p,.nvl-spot__cards b,.nvl-spot__cards span){unicode-bidi:plaintext}
@media (max-width:980px){
 .nvd--live.is-turn.is-tour .nvl-main{grid-template-columns:minmax(0,1fr);grid-template-areas:"panel" "spot"}
 .nvd--live.is-tour .nvl-panel{max-width:none}
 .nvl-spot__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.nvd--live .nvl-chips:not([hidden]){animation:none}}

/* live-website-lw6 (independent verification 2026-10-14, problems 2 and 3): Your turn at the approved W3 place and size. On a
   computer Freddy's panel sits on the trailing half exactly as the approved frame draws it, in hundredths of the display's full
   width: 11 from the top, 5.5 from the trailing edge, 50 wide, 16:10, the answers 2.3 under it. On a
   short window it gets smaller so the answers stay clear of the foot. The copper lines are always behind every layer of the display
   (they never cross the panel or an answer), and the answers sit on their own solid surface. The main answer is the darker
   noviera green: white on it is 5.0:1 (the lighter green gave 3.3:1, too low for 19 px text). */
.nvd--live{--palette-nvl-chip-pri:#15803D;--nvl-chip-pri:var(--palette-nvl-chip-pri)}
.nvd--live .nvd__art{z-index:0}
.nvd--live :is(.nvd__top,.nvl-meta,.nvd__main,.nvd__foot){z-index:1}
.nvd--live .nvl-chips button.is-pri,.nvd--live .nvl-chips button[aria-pressed=true]{background:var(--nvl-chip-pri);border-color:var(--nvl-chip-pri)}
.nvd--live .nvl-chips[data-chosen] button.is-pri:not([aria-pressed=true]){background:var(--nvl-card);border-color:var(--palette-nvl-chip-rim)}
/* the panel and the answers arrive with a short rise only, never a fade: a half transparent panel or answer would let the copper
   lines show through while it arrives */
@media (prefers-reduced-motion:no-preference){
 .nvd--live.is-turn .nvl-panel{animation:nvl-up .42s cubic-bezier(.2,.8,.2,1) both}
 .nvd--live .nvl-chips:not([hidden]){animation:nvl-up .24s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes nvl-up{from{transform:translateY(10px)}to{transform:none}}
@media (min-width:981px){
 /* --nvl-w: the display's full width (its content box, 100cqw, plus the display's own side padding of noviera-home.css), so the
    approved frame's proportions hold whatever the padding or a scroll bar */
 .nvd--live{container-type:inline-size;--nvl-w:calc(100cqw + 2 * clamp(20px,5vw,96px))}
 .nvd--live.is-turn:not(.is-tour) .nvl-main{position:static}
 .nvd--live.is-turn:not(.is-tour) :is(.nvl-now,.nvl-with){position:relative;z-index:1}
 .nvd--live.is-turn:not(.is-tour) .nvl-panel{position:absolute;z-index:2;inset-block-start:calc(var(--nvl-w) * .11);inset-inline-end:calc(var(--nvl-w) * .055);
  width:min(calc(var(--nvl-w) * .5),calc((100svh - var(--nvl-w) * .11 - 17rem) * 1.6));gap:calc(var(--nvl-w) * .023)}
 .nvd--live.is-turn:not(.is-tour) .nvl-chips{gap:calc(var(--nvl-w) * .009)}
}

/* live-website-lw4 (approved frames W5 and W5b): Freddy's gift and the registration on the leading side, Freddy smaller on the
   trailing side with the answers (the tour's grid). The kicker in mint, the title with its word in green, the line; W5b's four step
   pills (done, now in green, still to come). A visitor without a phone gets the scratch card here (nvl-gift.js) and Claim; the
   registration opens in a new tab. */
.nvl-gspot{grid-area:spot}
.nvl-spot__t b{font-weight:500;color:var(--nvl-green)}
.nvl-gsteps{display:flex;flex-wrap:wrap;gap:clamp(8px,.8vw,12px);margin-top:clamp(18px,2.2vw,32px)}
.nvl-gsteps span{display:inline-flex;align-items:center;min-height:2.3em;padding:0 1.05em;border-radius:999px;border:1px solid var(--palette-nvl-chip-rim);font-size:clamp(13px,1.05vw,16px);color:var(--nvl-soft)}
.nvl-gsteps span.is-done{color:var(--nvl-ink);border-color:var(--nvl-green)}
.nvl-gsteps span.is-now{background:var(--nvl-press);border-color:var(--nvl-press);color:var(--palette-nvl-qr);font-weight:500}
.nvl-gcard{display:flex;flex-direction:column;gap:12px;width:min(440px,100%);margin-top:clamp(18px,2.2vw,32px)}
.nvl-gcard .nvl-scratch{position:relative;aspect-ratio:1.6/1;border-radius:clamp(14px,1.3vw,20px);overflow:hidden;user-select:none;-webkit-user-select:none;
 background:linear-gradient(135deg,var(--palette-nvl-press) 0%,var(--nvl-green) 100%);border:1px solid var(--nvl-rim)}
.nvl-gcard .nvl-scratch__under{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:clamp(16px,1.8vw,26px)}
.nvl-gcard .nvl-scratch__under b{font-family:var(--display);font-size:clamp(28px,2.8vw,44px);font-weight:600;line-height:1.05;color:var(--palette-nvl-qr)}
.nvl-gcard .nvl-scratch__under span{font-size:clamp(13px,1.05vw,16px);color:var(--palette-nvl-qr);opacity:.86}
.nvl-gcard canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;transition:opacity .45s ease}
.nvl-gcard canvas.is-gone{opacity:0}
.nvl-gcard .nvl-scratch__hint{position:absolute;inset-inline-end:14px;bottom:14px;min-height:36px;border:0;border-radius:12px;padding:8px 14px;background:rgba(255,255,255,.86);color:var(--palette-nvl-ground);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.nvl-gcard__btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.4em;border:1px solid var(--nvl-press);border-radius:999px;background:var(--nvl-press);color:var(--palette-nvl-qr)!important;
 font:inherit;font-size:clamp(15px,1.2vw,18px);font-weight:500;text-decoration:none;cursor:pointer;transition:transform .14s cubic-bezier(.2,.8,.2,1)}
.nvl-gcard__btn:active{transform:scale(.97)}
.nvl-gcard__btn[aria-busy=true]{opacity:.7;pointer-events:none}
.nvl-gcard__reg{align-self:flex-start;margin-top:clamp(18px,2.2vw,32px)}
.nvl-gcard__err{margin:0;font-size:14px;color:var(--nvl-mint)}
:is(.nvl-gcard__btn,.nvl-gcard .nvl-scratch__hint):focus-visible{outline:2px solid var(--nvl-mint);outline-offset:3px}
.nvd--live.is-gift :is(.nvl-now,.nvl-with){display:none!important}
[dir=rtl] .nvd--live :is(.nvl-gsteps span,.nvl-gcard__btn,.nvl-gcard .nvl-scratch__under b,.nvl-gcard .nvl-scratch__under span){unicode-bidi:plaintext}
@media (prefers-reduced-motion:reduce){.nvl-gcard canvas,.nvl-gcard__btn{transition:none}}