/* CortovaVolt help (v36): pulsing "?", troubleshooting tray (side panel / bottom sheet) and the
   orientation pop-up. Works from 320 px phones to large monitors; tap targets are at least 44 px. */
:root{--cvh-bg:#0d1c3d;--cvh-panel:#0f2148;--cvh-line:rgba(120,170,255,.28);--cvh-text:#e6eefc;--cvh-muted:#9fb3d6;--cvh-accent:#2f7dff;--cvh-cyan:#38c8ff}

/* ---------- the "?" button ---------- */
.cvh-q{position:relative;flex:none;display:inline-grid;place-items:center;width:44px;height:44px;min-width:44px;border-radius:50%;
  border:1.5px solid var(--cvh-cyan);background:rgba(47,125,255,.16);color:#fff;font:700 20px/1 Inter,system-ui,sans-serif;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.cvh-q::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--cvh-cyan);opacity:.0;animation:cvh-pulse 2.2s ease-out infinite;pointer-events:none}
.cvh-q:hover,.cvh-q:focus-visible{background:rgba(47,125,255,.32)}
.cvh-q:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cvh-q.sm{width:36px;height:36px;min-width:36px;font-size:17px}
.cvh-q.sm::before{content:"";position:absolute;inset:-4px}  /* keeps a 44 px touch area */
@keyframes cvh-pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.55);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cvh-q::after{animation:none;opacity:.55;transform:scale(1.18)}}
.cvh-next-help{margin-left:8px;vertical-align:middle}
.cvh-modal-help{float:right;margin:-4px 0 6px 10px}

/* ---------- shared video ---------- */
.cvh-video{display:block;width:100%;max-height:min(62dvh,62vh);background:#000;border-radius:12px;aspect-ratio:16/9;object-fit:contain}
.cvh-video.is-vertical{aspect-ratio:9/16;max-height:min(66dvh,66vh);width:auto;max-width:100%;margin:0 auto}

/* ---------- tray ---------- */
.cvh-tray-wrap{position:fixed;inset:0;z-index:10050} /* above the sign-in and identity dialog (10000) */
.cvh-tray-wrap[hidden]{display:none}
.cvh-backdrop{position:absolute;inset:0;background:rgba(3,8,20,.55);opacity:0;transition:opacity .2s}
.cvh-tray-wrap.is-open .cvh-backdrop{opacity:1}
.cvh-tray{position:absolute;top:0;right:0;bottom:0;width:clamp(380px,32vw,420px);max-width:100vw;display:flex;flex-direction:column;
  background:var(--cvh-panel);color:var(--cvh-text);border-left:1px solid var(--cvh-line);box-shadow:-20px 0 50px rgba(0,0,0,.45);
  transform:translateX(100%);transition:transform .22s ease;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);
  font-family:Inter,system-ui,-apple-system,sans-serif}
.cvh-tray-wrap.is-open .cvh-tray{transform:none}
.cvh-tray.is-sheet{top:auto;left:0;right:0;width:auto;max-height:85dvh;max-height:85vh;border-left:0;border-top:1px solid var(--cvh-line);
  border-radius:18px 18px 0 0;transform:translateY(100%);box-shadow:0 -20px 50px rgba(0,0,0,.45)}
@supports (height:1dvh){.cvh-tray.is-sheet{max-height:85dvh}}
.cvh-tray-wrap.is-open .cvh-tray.is-sheet{transform:none}
.cvh-grab{display:none;padding:8px 0 2px;touch-action:none;cursor:grab}
.cvh-grab span{display:block;width:44px;height:5px;border-radius:3px;background:rgba(160,190,240,.5);margin:0 auto}
.cvh-tray.is-sheet .cvh-grab{display:block}
.cvh-tray-head{display:flex;align-items:center;gap:8px;padding:10px 12px 8px 16px;border-bottom:1px solid var(--cvh-line);touch-action:none}
.cvh-tray-head h2{flex:1;margin:0;font-size:clamp(16px,2.2vw,18px);font-weight:700;line-height:1.25}
.cvh-icon{flex:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--cvh-line);background:transparent;color:var(--cvh-text);font-size:24px;line-height:1;cursor:pointer}
.cvh-icon:focus-visible,.cvh-topic:focus-visible,.cvh-start:focus-visible,.cvh-seg button:focus-visible{outline:2px solid var(--cvh-cyan);outline-offset:2px}
.cvh-tray-body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:12px 16px 18px}
.cvh-intro{margin:2px 0 12px;color:var(--cvh-muted);font-size:14px}
.cvh-player{margin-bottom:14px}
.cvh-topics{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cvh-topic{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px;border-radius:12px;border:1px solid var(--cvh-line);
  background:rgba(47,125,255,.08);color:var(--cvh-text);text-align:left;font:600 15px/1.3 inherit;cursor:pointer}
.cvh-topic img{width:76px;height:43px;object-fit:cover;border-radius:7px;flex:none;background:#08132b}
.cvh-topic-t{flex:1}
.cvh-len{flex:none;color:var(--cvh-muted);font-size:12.5px;font-weight:500}
.cvh-contact{display:grid;gap:8px;margin-top:16px}
.cvh-contact a{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:12px;border:1px solid var(--cvh-line);color:var(--cvh-text);text-decoration:none;font-weight:600}

/* ---------- orientation pop-up ---------- */
.cvh-orient-wrap{position:fixed;inset:0;z-index:10100;display:grid;place-items:center;background:rgba(3,8,20,.86);
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.cvh-orient{width:min(980px,100%);max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:12px;background:var(--cvh-panel);color:var(--cvh-text);
  border:1px solid var(--cvh-line);border-radius:18px;padding:clamp(12px,2.4vw,22px);box-shadow:0 30px 80px rgba(0,0,0,.6);font-family:Inter,system-ui,-apple-system,sans-serif}
.cvh-orient-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px}
.cvh-orient-head h2{margin:0;font-size:clamp(18px,3vw,24px);line-height:1.2}
.cvh-orient-sub{margin:4px 0 0;color:var(--cvh-muted);font-size:14px}
.cvh-orient-tools{display:flex;align-items:center;gap:8px}
.cvh-seg{display:inline-flex;border:1px solid var(--cvh-line);border-radius:12px;overflow:hidden}
.cvh-seg button{min-height:44px;min-width:44px;padding:0 14px;border:0;background:transparent;color:var(--cvh-text);font:600 14px inherit;cursor:pointer}
.cvh-seg button.active{background:var(--cvh-accent)}
.cvh-orient-player{display:flex;justify-content:center}
.cvh-orient-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.cvh-orient-need{margin:0;color:var(--cvh-muted);font-size:14px;flex:1 1 220px}
.cvh-start{min-height:48px;padding:0 22px;border-radius:12px;border:0;background:linear-gradient(90deg,var(--cvh-accent),var(--cvh-cyan));color:#fff;font:700 16px inherit;cursor:pointer}
.cvh-start:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:600px){.cvh-start{width:100%}.cvh-orient-head{flex-direction:column}}
@media (max-height:480px) and (orientation:landscape){.cvh-video{max-height:58vh}.cvh-orient{gap:8px}.cvh-orient-sub{display:none}}

/* Standalone page (/orientation). */
.cvh-page{min-height:100dvh;min-height:100vh;margin:0;background:var(--cvh-bg);color:var(--cvh-text);font-family:Inter,system-ui,-apple-system,sans-serif;
  display:grid;place-items:center;padding:16px}
.cvh-page .cvh-orient{box-shadow:none}
.cvh-page a.cvh-start{display:inline-flex;align-items:center;text-decoration:none}
/* Phones in portrait: keep the whole pop-up (video, message and Start button) on one screen. */
.cvh-orient .cvh-video.is-vertical{max-height:calc(100dvh - 300px);max-height:calc(100vh - 300px);min-height:220px}
@supports (height:1dvh){.cvh-orient .cvh-video.is-vertical{max-height:calc(100dvh - 300px)}}
@media (max-width:600px){.cvh-orient{gap:8px}.cvh-orient-sub{font-size:13px}.cvh-orient-need{font-size:13px}}
/* On the white sign-in / identity dialog the "?" needs dark ink. */
.cvt-platform-modal .cvh-q{color:#0b3d91;background:rgba(47,125,255,.10);border-color:#2f7dff}
.cvt-platform-modal .cvh-q::after{border-color:#2f7dff}
.cvt-platform-modal .cvh-q:hover,.cvt-platform-modal .cvh-q:focus-visible{background:rgba(47,125,255,.2);outline-color:#0b3d91}