/* Recorded walkthrough: the set-up and finished sheet, the countdown and the floating recording bar (walkthrough.js). */
.ewt-backdrop{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(13,28,40,.55);font-family:var(--font)}
.ewt-backdrop.show{display:flex}
.ewt-sheet{width:min(560px,100%);max-height:calc(100dvh - 36px);display:flex;flex-direction:column;background:#fff;border-radius:var(--ev-radius-lg);box-shadow:0 24px 70px #0b1d2c59;overflow:hidden;color:var(--ink)}
.ewt-head{display:flex;align-items:flex-start;gap:12px;padding:20px 22px 18px;background:var(--ev-navy);color:#fff}
.ewt-head>div{flex:1;min-width:0}
.ewt-head h2{margin:0;font-size:var(--text-xl);font-weight:700;letter-spacing:-.01em}
.ewt-head p{margin:5px 0 0;font-size:var(--text-ui);line-height:1.55;color:var(--ev-on-navy)}
.ewt-x{flex:none;width:var(--btn-h);height:var(--btn-h);display:grid;place-items:center;border:0;border-radius:var(--btn-r);background:#ffffff14;color:#fff;cursor:pointer}
.ewt-x:hover{background:#ffffff26}
.ewt-x svg{width:18px;height:18px}
.ewt-body{padding:20px 22px;overflow:auto;display:grid;gap:14px}
.ewt-opts{display:grid;gap:10px}
.ewt-opt{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border:1px solid var(--line2);border-radius:var(--ev-radius);cursor:pointer}
.ewt-opt:has(input:checked){border-color:var(--accent);background:var(--ev-info-bg)}
.ewt-opt input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent)}
.ewt-opt b{display:block;font-size:var(--text-sm)}
.ewt-opt small{display:block;margin-top:3px;font-size:var(--text-xs);line-height:1.5;color:var(--dim)}
.ewt-notes{margin:0;padding-left:18px;display:grid;gap:6px;font-size:var(--text-xs);line-height:1.55;color:var(--dim)}
.ewt-text{margin:0;font-size:var(--text-ui);line-height:1.6;color:var(--dim)}
.ewt-msg{margin:0;font-size:var(--text-ui);line-height:1.5;color:var(--ev-info)}
.ewt-msg:empty{display:none}
.ewt-msg.bad{color:var(--ev-bad)}
.ewt-preview{width:100%;max-height:46dvh;border-radius:var(--ev-radius);background:var(--ev-navy);display:block}
.ewt-foot{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;padding:14px 22px 18px;border-top:1px solid var(--line)}
.ewt-foot .ev-btn{min-height:var(--btn-h);padding:0 16px;gap:8px;border-radius:var(--btn-r);font-size:var(--btn-fs);font-weight:650;cursor:pointer}
.ewt-foot .ev-btn svg{width:17px;height:17px}

.ewt-count{position:fixed;left:50%;top:50%;z-index:310;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;display:grid;place-items:center;background:rgba(18,43,62,.86);color:#fff;font:700 var(--text-4xl)/1 var(--font);pointer-events:none}
.ewt-count.pop{animation:ewt-pop .9s ease-out}
@keyframes ewt-pop{from{transform:scale(1.25);opacity:.4}to{transform:none;opacity:1}}

.ewt-bar{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:300;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 16px;border-radius:999px;background:var(--ev-navy);color:#fff;box-shadow:0 10px 30px #0b1d2c59;font-family:var(--font);white-space:nowrap}
.ewt-dot{width:10px;height:10px;border-radius:50%;background:#e5484d;animation:ewt-blink 1.2s steps(2,start) infinite}
@keyframes ewt-blink{to{visibility:hidden}}
.ewt-time{font-size:var(--text-sm);font-weight:700;font-variant-numeric:tabular-nums}
.ewt-max{font-size:var(--text-xs);color:var(--ev-on-navy-dim);margin-right:6px}
.ewt-bar.late .ewt-time{color:var(--ev-amber)}
.ewt-bar button{display:inline-flex;align-items:center;gap:6px;min-height:var(--btn-h);padding:0 14px;border:0;border-radius:999px;font:650 var(--btn-fs) var(--font);cursor:pointer}
.ewt-bar button svg{width:16px;height:16px;flex:none}
.ewt-face{background:#ffffff14;color:var(--ev-on-navy)}
.ewt-face.on{background:#ffffff26;color:#fff}
.ewt-stop{background:var(--ev-sky);color:var(--ev-sky-ink)}
.ewt-stop:hover{background:var(--ev-sky-hover)}
.ewt-cancel{width:var(--btn-h);justify-content:center;padding:0;background:transparent;color:var(--ev-on-navy)}
.ewt-cancel:hover{background:#ffffff14;color:#fff}
/* in Show-client mode the bar's plans and 3D button stay in reach below, so the recording bar moves to the top and the
   title card steps aside (the video has its own caption) */
.ewt-client-rec svg{width:16px;height:16px;flex:none}
.ewt-client-rec.on{opacity:1;color:#fff}
.ewt-client-rec.on svg{color:#e5484d}
.ev-client-view .ewt-bar{top:max(16px,env(safe-area-inset-top,0px));bottom:auto}
.ewt-recording .ev-client-title{display:none}
@media (max-width:700px){
 .ev-client-slot>.ewt-client-rec{flex:1}
}
@media (max-width:520px){
 .ewt-head,.ewt-body{padding-left:16px;padding-right:16px}
 .ewt-foot{padding:12px 16px 16px}
 .ewt-foot .ev-btn{flex:1 1 auto;justify-content:center}
 .ewt-face span{display:none}
}
@media print{.ewt-backdrop,.ewt-bar,.ewt-count{display:none}}