/* ---------- evaluation request ----------
   The request panel in the contact section with its sun-gold button, the compact button in the phone dock, and the
   three-step dialog. Gold marks the button that starts a request; green appears only on the WhatsApp action at the end.
   Behaviour: js/evaluation/. */

/* ---------- panel (contact section, right column) ---------- */
.ev-panel{grid-area:panel;position:relative;min-width:0;display:flex;flex-direction:column;padding:clamp(1.75rem,3.6vw,3rem);
  border:1px solid rgba(243,245,248,.1);border-radius:var(--r-3);background:var(--navy);scroll-margin-top:calc(var(--header-h) + 16px)}
/* the same low sun in the corner as the process panel */
.ev-panel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(75% 60% at 100% 0%,rgba(251,176,59,.13),rgba(251,176,59,0) 65%)}
.ev-panel>*{position:relative}
.ev-panel-title{margin:0;font-family:var(--f-display);font-stretch:104%;font-weight:600;font-size:clamp(1.55rem,1.2rem + 1.3vw,2.2rem);
  line-height:1.12;letter-spacing:-.025em;color:#fff;text-wrap:balance}
.ev-panel-text{margin:1rem 0 0;max-width:42ch;color:var(--mist);font-size:var(--fs-body);line-height:1.62}
/* "press here": a short line with an arrow bending down to the button */
.ev-hint{display:flex;align-items:flex-start;gap:.5rem;margin:clamp(1.75rem,3vw,2.4rem) 0 .55rem;color:var(--paper);font-size:.95rem;line-height:1.4}
.ev-hint svg{width:24px;height:24px;flex:none;margin-top:.15em;color:var(--gold)}
html.ev-cooling .ev-hint{visibility:hidden}

/* ---------- the button ----------
   The same sun-gold button as the header and hero (base.css .btn-sun: surface, edge, static shadow, one light band on
   mouse hover), only full width and a little taller, as the one focal action of the section. Nothing animates at rest.
   It rests (muted, no light) while the pause after a request runs. */
.ev-cta{display:flex;align-items:center;justify-content:center;gap:.7rem;width:100%;min-height:60px;margin:0;padding:.85rem 1.5rem;
  border:1px solid var(--sun-edge);border-radius:var(--r-2);font:600 1.06rem/1.25 var(--f-body);letter-spacing:.01em;text-align:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),background-color var(--t-fast)}
.ev-cta-arrow{width:20px;height:20px;flex:none;transition:transform var(--t) var(--ease)}
.ev-cta:not([aria-disabled="true"]):hover .ev-cta-arrow{transform:translateX(3px)}
.ev-cta:focus-visible{outline:2px solid var(--paper);outline-offset:4px;border-radius:var(--r-2)}
/* resting after a request (aria-disabled keeps it focusable, so focus can come back to it) */
.ev-cta[aria-disabled="true"],.ev-cta:disabled{cursor:not-allowed;transform:none;opacity:1;background:rgba(243,245,248,.05);border-color:rgba(243,245,248,.22);
  color:var(--mist);box-shadow:none}
.ev-cta[aria-disabled="true"] .ev-cta-arrow,.ev-cta:disabled .ev-cta-arrow{display:none}
/* a thin bar that empties over what is left of the pause */
.ev-cta-time{display:none;position:absolute;left:14px;right:14px;bottom:8px;height:2px;border-radius:2px;background:var(--gold);opacity:.75;transform-origin:left}
.ev-cta[aria-disabled="true"] .ev-cta-time{display:block;animation:evDrain var(--ev-left,60s) linear both}
@keyframes evDrain{from{transform:scaleX(var(--ev-from,1))}to{transform:scaleX(0)}}

/* what happens after the click, in order */
.ev-path{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1.25rem;counter-reset:ev;color:var(--mist);font-size:.88rem;line-height:1.35}
.ev-path li{display:flex;align-items:center;gap:.5rem;counter-increment:ev}
.ev-path li::before{content:counter(ev);display:grid;place-items:center;width:22px;height:22px;flex:none;border:1px solid rgba(243,245,248,.28);border-radius:50%;
  font:500 .64rem/1 var(--f-mono);color:var(--paper)}

/* ---------- phone dock: compact button between the introduction and the contact section ---------- */
.dock-ev{display:none}
.dock button:focus-visible{outline:2px solid var(--paper);outline-offset:3px;box-shadow:0 0 0 6px var(--night)}
@media (max-width:639px){
  html.ev-dock-on .dock{left:var(--gut-l)}
  html.ev-dock-on.has-cookie-fab .dock{left:calc(var(--gut-l) + 54px)}         /* clear of the cookie button */
  html.ev-dock-on .dock-ev{display:flex}
  /* the same sun gold as the other evaluation buttons, without a glow; a short press instead of a hover */
  .dock-ev{flex:1 1 auto;min-width:0;height:52px;align-items:center;justify-content:center;padding:0 1rem;border:1px solid var(--sun-edge);border-radius:26px;
    background:var(--sun-sheen) var(--sun-fill);color:var(--night);font:600 .88rem/1.15 var(--f-body);letter-spacing:.005em;cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:transform .08s ease,background-color .08s ease;
    box-shadow:inset 0 -1px 0 rgba(2,26,63,.14),0 10px 24px -12px rgba(2,10,30,.6)}
  .dock-ev span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dock-ev:active{transform:translateY(1px);background-color:var(--sun-fill-press)}
  .dock-ev[aria-disabled="true"]{background:var(--navy-2);border-color:rgba(243,245,248,.24);color:var(--mist);cursor:not-allowed;
    box-shadow:0 12px 28px -12px rgba(2,10,30,.6)}
  /* next to it, WhatsApp keeps only its logo; without a number it would open the same dialog, so it steps aside */
  html.ev-dock-on .dock-wa{flex:none;width:52px;padding:0;justify-content:center}
  html.ev-dock-on .dock-call{flex:none}
  html.ev-dock-on .dock-wa>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html.ev-dock-on .dock-wa[data-wa-missing]{display:none}
  /* phones keep the screen clear: no call button (the number is in the menu, Contact and footer) and WhatsApp as its logo only */
  .dock-call{display:none}
  .dock-wa{flex:none;width:52px;padding:0;justify-content:center}
  .dock-wa>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ---------- dialog ---------- */
html.ev-locked{overflow:hidden;scrollbar-gutter:stable}
/* the box fits the visible area: head and foot stay put, only the middle scrolls, and only when it has to */
.ev{width:min(44rem,calc(100vw - 2rem));max-width:none;max-height:min(calc(var(--ev-vh,100vh) - 3rem),52rem);margin:auto;padding:0;border:0;border-radius:var(--r-3);
  background:var(--white);color:var(--ink);color-scheme:light;box-shadow:0 30px 80px -30px rgba(1,10,28,.75);
  overflow:hidden;overflow:clip}                 /* clip: the box itself can never be scrolled, only .ev-body */
.ev[open]{display:flex;flex-direction:column}
.ev::backdrop{background:rgba(1,10,28,.66)}
.ev-form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}

/* head: title, close and the three steps on navy */
.ev-head{position:relative;flex:none;padding:.95rem clamp(1.25rem,3vw,2rem) 1rem;background:var(--navy);color:var(--paper)}
.ev-head-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.ev-title{margin:0;font:600 1.08rem/1.2 var(--f-display);font-stretch:104%;letter-spacing:-.005em;color:#fff}
.ev-x{display:grid;place-items:center;width:44px;height:44px;margin-right:-.4rem;padding:0;border:1px solid rgba(243,245,248,.24);border-radius:var(--r-2);
  background:none;color:var(--paper);cursor:pointer;transition:border-color var(--t-fast),background-color var(--t-fast)}
.ev-x:hover{border-color:rgba(243,245,248,.6);background:rgba(243,245,248,.06)}
.ev-x svg{width:22px;height:22px}
/* each step: a bar that fills when the step is reached, then its number and name. The current step is white and
   semibold, a finished one shows a gold check in place of its number, the next ones stay quiet. */
.ev-steps{list-style:none;margin:.8rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.ev-s{display:flex;flex-direction:column;gap:.5rem;min-width:0;color:#8D9AB0;font-size:.86rem;line-height:1.2}
.ev-s-bar{position:relative;height:3px;border-radius:2px;background:rgba(243,245,248,.16);overflow:hidden}
.ev-s-bar::after{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease),opacity .35s}
.ev-s:is([data-state="active"],[data-state="done"]) .ev-s-bar::after{transform:none}
.ev-s[data-state="done"] .ev-s-bar::after{opacity:.55}
.ev-s-t{display:flex;align-items:center;gap:.4rem;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ev-s-n{display:inline-flex;align-items:center;width:1.35rem;flex:none;font:500 .66rem/1 var(--f-mono);letter-spacing:.04em}
.ev-s-n svg{display:none;width:14px;height:14px;stroke-width:2.4;color:var(--gold)}
.ev-s[data-state="done"] .ev-s-n svg{display:block}
.ev-s[data-state="done"] .ev-s-num{display:none}
.ev-s[data-state="active"]{color:#fff;font-weight:600}
.ev-s[data-state="done"]{color:var(--mist)}

/* body: the step that is open, scrolling on its own */
.ev-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(1.3rem,3.2vw,2rem) clamp(1.25rem,3vw,2rem) clamp(1.4rem,3vw,1.9rem)}
.ev-step{min-width:0;margin:0;padding:0;border:0}
.ev-q{margin:0;font-family:var(--f-display);font-stretch:104%;font-weight:600;font-size:clamp(1.3rem,1.12rem + .75vw,1.65rem);line-height:1.18;
  letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.ev-q:focus{outline:none}
.ev-d{margin:.5rem 0 0;max-width:52ch;color:var(--graphite);font-size:.98rem;line-height:1.55}

/* option cards: a real radio fills each card, so clicks, arrows and screen readers all work as usual.
   One language for both steps: 8px corners, a steel edge that darkens on hover, and once chosen a navy edge,
   a faint navy tint and a filled navy check on the right. */
.ev-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-top:1.3rem}
.ev-options--n{grid-template-columns:repeat(3,minmax(0,1fr))}
.ev-opt{position:relative;display:flex;min-width:0}
.ev-opt-in{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
/* step 1: icon, name and check on one line; every card the same height */
.ev-opt-box{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:.85rem;min-height:76px;padding:.8rem 3rem .8rem .85rem;
  border:1px solid var(--steel);border-radius:var(--r-2);background:var(--white);
  transition:border-color var(--t-fast),background-color var(--t-fast),box-shadow var(--t-fast)}
.ev-opt:hover .ev-opt-box{border-color:#8E9BB0;background:#FBFCFD}
.ev-opt-ico{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:var(--r-2);background:var(--cloud);color:var(--navy);
  transition:background-color var(--t-fast),color var(--t-fast)}
.ev-opt-ico svg{width:24px;height:24px}
.ev-opt-t{min-width:0;font:600 1rem/1.3 var(--f-body);color:var(--ink)}
.ev-opt-mark{position:absolute;top:50%;right:.9rem;display:grid;place-items:center;width:22px;height:22px;margin-top:-11px;border:1.5px solid var(--steel);border-radius:50%;
  background:var(--white);color:#fff;transition:background-color var(--t-fast),border-color var(--t-fast)}
.ev-opt-mark svg{width:13px;height:13px;stroke-width:2.8;opacity:0;transform:scale(.6);transition:opacity .15s,transform .2s var(--ease)}
.ev-opt-in:checked+.ev-opt-box{border-color:var(--navy);background:#F3F6FB;box-shadow:inset 0 0 0 1px var(--navy)}
.ev-opt-in:checked+.ev-opt-box .ev-opt-ico{background:var(--navy);color:var(--gold)}
.ev-opt-in:checked+.ev-opt-box .ev-opt-mark{border-color:var(--navy);background:var(--navy)}
.ev-opt-in:checked+.ev-opt-box .ev-opt-mark svg{opacity:1;transform:none}
.ev-opt-in:focus-visible+.ev-opt-box{outline:2px solid var(--navy);outline-offset:2px}
.ev-step.is-invalid .ev-opt-box{border-color:#B42318}
/* step 2: the module drawing on top, the range and its unit at the bottom. The range line has a fixed height, so the
   units line up across a row whatever the size of the figure ("200+" or "Alt număr"). */
.ev-opt--n .ev-opt-box{flex-direction:column;align-items:flex-start;gap:0;min-height:112px;padding:.9rem 2.6rem .85rem 1rem}
.ev-opt--n .ev-opt-mark{top:.8rem;right:.8rem;margin-top:0}
.ev-cells,.ev-opt--n .ev-opt-ico{width:34px;height:25px;margin-bottom:auto;color:var(--steel)}
.ev-cells rect{fill:currentColor}
.ev-opt--n .ev-opt-ico,.ev-opt--n .ev-opt-in:checked+.ev-opt-box .ev-opt-ico{display:flex;align-items:flex-end;border-radius:0;background:none;color:var(--graphite-2)}
.ev-opt--n .ev-opt-ico svg{width:22px;height:22px}
.ev-opt-in:checked+.ev-opt-box .ev-cells{color:var(--gold-deep)}
.ev-opt-n{display:flex;align-items:flex-end;height:1.75rem;margin-top:.7rem;font:600 1.45rem/1 var(--f-display);font-stretch:104%;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ev-opt-n--word{font-size:1.15rem}
.ev-opt-u{margin-top:.2rem;font-size:.88rem;line-height:1.3;color:var(--graphite-2)}
.ev-custom{max-width:20rem;margin-top:1.1rem}

/* step 3: what was chosen, then name / locality + county / notes, the privacy note and the optional preview */
.ev-recap{margin:1rem 0 0;padding:.15rem .9rem;border:1px solid var(--l-line);border-radius:var(--r-2);background:var(--snow)}
.ev-recap>div{display:grid;grid-template-columns:6rem minmax(0,1fr);align-items:center;gap:.75rem;padding:.15rem 0}
.ev-recap>div+div{border-top:1px solid var(--l-line)}
.ev-recap dt{color:var(--graphite-2);font-size:.88rem}
.ev-recap dd{min-width:0;margin:0;display:flex;align-items:center;justify-content:space-between;gap:.75rem;color:var(--ink);font-weight:600;font-size:.96rem}
.ev-edit{flex:none;min-height:40px;margin-right:-.5rem;padding:0 .6rem;border:0;border-radius:var(--r-1);background:none;color:var(--navy);
  font:600 .88rem/1 var(--f-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ev-edit:hover{background:var(--cloud)}
.ev-edit:focus-visible{outline:2px solid var(--navy);outline-offset:0}
.ev-fields{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.95rem .9rem;margin-top:1.2rem}
.ev-field{min-width:0}
.ev-fields>.ev-field:first-child,.ev-field--wide{grid-column:1/-1}
.ev-field label{display:block;margin:0 0 .4rem;font:600 .93rem/1.3 var(--f-body);color:var(--ink)}
.ev-optional{margin-left:.35rem;font-weight:400;font-size:.86rem;color:var(--graphite-2)}
.ev-field input,.ev-field textarea,.ev-copy-text{display:block;width:100%;min-height:48px;margin:0;padding:.7rem .9rem;border:1px solid var(--steel);border-radius:var(--r-2);
  background:var(--snow);font:400 1rem/1.4 var(--f-body);color:var(--ink);transition:border-color var(--t-fast),background-color var(--t-fast)}
.ev-field textarea{min-height:88px;resize:vertical}
.ev-field :is(input,textarea)::placeholder{color:#657186;opacity:1}
.ev-field :is(input,textarea):hover{border-color:#9AA7B8}
.ev-field :is(input,textarea):focus-visible,.ev-copy-text:focus-visible{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy);background:var(--white);border-radius:var(--r-2)}
.ev-field [aria-invalid="true"]{border-color:#B42318;background-color:#FFF7F6}
.ev-field-foot{display:flex;justify-content:space-between;gap:1rem;margin:.4rem 0 0;color:var(--graphite-2);font-size:.85rem;line-height:1.45}
.ev-count{flex:none;font-variant-numeric:tabular-nums}
.ev-err{margin:.4rem 0 0;color:#B42318;font-size:.88rem;line-height:1.4}
.ev-step>.ev-err{margin-top:.8rem}
.ev-err:empty{display:none}
/* the field bots fill: off screen and out of the tab order, never only display:none */
.ev-trap{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.ev-privacy{margin:1.1rem 0 0;color:var(--graphite-2);font-size:.86rem;line-height:1.55}
.ev-privacy a{color:var(--navy);text-underline-offset:3px}

/* the message exactly as it will be sent: a quiet row that opens in place, showing the whole text on white with a thin
   WhatsApp-green edge. It grows with the text (no inner scrollbar); the dialog body scrolls if it has to. */
.ev-preview{margin-top:.9rem;border:1px solid var(--steel);border-radius:var(--r-2);background:var(--snow)}
.ev-preview summary{display:flex;align-items:center;gap:.6rem;min-height:46px;padding:0 .95rem 0 .85rem;border-radius:var(--r-2);
  color:var(--ink);font:600 .93rem/1.3 var(--f-body);cursor:pointer;list-style:none;transition:background-color var(--t-fast)}
.ev-preview summary::-webkit-details-marker{display:none}
.ev-preview summary:hover{background:var(--cloud)}
.ev-preview[open] summary{border-radius:var(--r-2) var(--r-2) 0 0}
.ev-preview summary:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.ev-preview-ico{display:grid;place-items:center;width:20px;height:20px;flex:none;color:#128C4B}
.ev-preview-ico svg{width:18px;height:18px}
.ev-preview-chev{width:8px;height:8px;margin-left:auto;flex:none;border-right:2px solid var(--graphite-2);border-bottom:2px solid var(--graphite-2);
  transform:translateY(-2px) rotate(45deg);transition:transform var(--t-fast)}
.ev-preview[open] .ev-preview-chev{transform:translateY(2px) rotate(-135deg)}
.ev-msg{margin:0 .85rem .85rem;padding:.85rem 1rem .9rem;border-left:3px solid var(--wa);border-radius:2px var(--r-1) var(--r-1) 2px;background:var(--white);
  color:var(--ink);font-size:.9rem;line-height:1.6;overflow-wrap:anywhere}

/* after the hand-off */
.ev-result-in{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.ev-result-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#E7F8EE;color:#128C4B}
.ev-result-ico svg{width:30px;height:30px}
.ev-result p{margin:0;max-width:52ch;color:var(--graphite);line-height:1.6}
/* the text to copy is sized to its content by the script, so it never needs a scrollbar of its own */
.ev-copy-text{min-height:160px;font-size:.9rem;line-height:1.5;resize:none;overflow:hidden}
.ev-copy-row,.ev-fallback{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}

/* foot: back on the left, the next action on the right, always in reach of the thumb */
.ev-foot{flex:none;padding:.8rem clamp(1.25rem,3vw,2rem) calc(.8rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--l-line);background:var(--white)}
.ev-actions{display:flex;align-items:center;gap:.75rem}
.ev-actions .btn{min-height:52px}
.ev-back{padding:0 1.15rem}
.ev-next,.ev-submit,.ev-finish{margin-left:auto}
/* the final action: WhatsApp green with dark text (8.9:1), its own mark, a slightly deeper green edge and a modest
   shadow; no glow and nothing moving. Without a configured number it is a navy "Pregătește mesajul" button instead. */
.ev-submit{gap:.6rem}
.ev-submit.btn-wa{border-color:#1FB457;box-shadow:inset 0 -1px 0 rgba(2,26,63,.14),0 1px 2px rgba(2,10,30,.14),0 8px 18px -12px rgba(18,140,75,.5)}
.ev-submit.btn-wa:hover:not(:disabled){border-color:#19A64E;box-shadow:inset 0 -1px 0 rgba(2,26,63,.14),0 2px 4px rgba(2,10,30,.16),0 12px 22px -12px rgba(18,140,75,.6)}
.ev-submit.btn-wa:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.ev-submit.is-waiting{background:var(--cloud);border-color:var(--steel);color:var(--graphite);box-shadow:none;white-space:normal;line-height:1.2}
.ev-submit:disabled{cursor:not-allowed;transform:none}
.ev-status{margin:0 0 .7rem;color:#B42318;font-size:.9rem;line-height:1.4}
.ev-status:empty{display:none}

/* motion that answers an action: the dialog rises in, each step slides in */
@media (prefers-reduced-motion:no-preference){
  .ev[open]{animation:evIn .3s var(--ease)}
  .ev[open]::backdrop{animation:evFade .3s ease}
  .ev.is-closing{animation:evOut .16s ease-in forwards}
  .ev.is-closing::backdrop{animation:evFadeOut .16s ease-in forwards}
  .ev-step:not([hidden]),.ev-result:not([hidden]){animation:evStep .32s var(--ease)}
}
@keyframes evIn{from{opacity:0;transform:translateY(14px) scale(.985)}}
@keyframes evOut{to{opacity:0;transform:translateY(8px) scale(.99)}}
@keyframes evFade{from{opacity:0}}
@keyframes evFadeOut{to{opacity:0}}
@keyframes evStep{from{opacity:0;transform:translateX(10px)}}
@media (prefers-reduced-motion:reduce){
  .ev-cta,.ev-cta-arrow,.ev-s-bar::after,.ev-opt-box,.ev-opt-mark svg,.ev-preview-chev,.dock-ev{transition:none}
  .ev-cta:hover,.ev-cta:active{transform:none}
  .ev-cta[aria-disabled="true"] .ev-cta-time{display:none}
}

/* ---------- phones: the dialog takes the whole visible area ---------- */
@media (max-width:639px){
  .ev{width:100%;height:var(--ev-vh,100dvh);max-height:none;margin:0;inset:var(--ev-vt,0px) 0 auto 0;border-radius:0}
  .ev-head{padding:calc(.6rem + env(safe-area-inset-top,0px)) max(1rem,env(safe-area-inset-right,0px)) .9rem max(1rem,env(safe-area-inset-left,0px))}
  .ev-body{padding:1.3rem max(1rem,env(safe-area-inset-right,0px)) 1.5rem max(1rem,env(safe-area-inset-left,0px))}
  .ev-foot{padding-left:max(1rem,env(safe-area-inset-left,0px));padding-right:max(1rem,env(safe-area-inset-right,0px))}
  .ev-options{gap:.6rem;margin-top:1.1rem}
  .ev-options--n{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ev-opt-box{min-height:72px;padding:.75rem 2.6rem .75rem .75rem;gap:.7rem}
  .ev-opt-ico{width:40px;height:40px}
  .ev-opt-mark{right:.75rem}
  .ev-opt--n .ev-opt-box{min-height:100px;padding:.8rem 2.3rem .8rem .85rem}
  .ev-opt--n .ev-opt-mark{top:.65rem;right:.65rem}
  .ev-next,.ev-submit,.ev-finish{flex:1 1 auto}
  @media (prefers-reduced-motion:no-preference){.ev[open]{animation-name:evUp}}
}
@keyframes evUp{from{opacity:0;transform:translateY(28px)}}
@media (max-width:479px){
  /* one card per row for the installation type, so each name fits beside its icon */
  .ev-options:not(.ev-options--n){grid-template-columns:minmax(0,1fr)}
  .ev-opt:not(.ev-opt--n) .ev-opt-box{min-height:62px}
  .ev-fields{grid-template-columns:minmax(0,1fr)}
  .ev-s-n{display:none}
  .ev-back{width:52px;padding:0}
  .ev-back span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ev-actions .btn{padding:0 1rem}
  .ev-submit{font-size:.97rem;white-space:normal;line-height:1.15}
  .ev-recap>div{grid-template-columns:5.25rem minmax(0,1fr)}
}
/* the narrowest phones: compact the cookie button slightly so both it and the dock remain accessible */
@media (max-width:359px){
  html.ev-dock-on .cookie-fab{width:38px;height:38px;min-height:38px}
  html.ev-dock-on.has-cookie-fab .dock{left:calc(var(--gut-l) + 46px)}
}
@media print{.ev,.dock{display:none!important}}