/* versão web: passo a passo guiado do iPhone (web.js) */
.wb-entry{display:block;width:100%;margin:0 0 14px;padding:13px 12px;font:900 13px 'Montserrat',sans-serif;letter-spacing:.06em;color:var(--ink);background:var(--li);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--pu);text-align:center}
.wb-entry:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--pu)}

.wb-ov{position:fixed;inset:0;z-index:30;display:none;align-items:stretch;justify-content:center;background:rgba(13,7,22,.8);
  padding:calc(var(--st) + 12px) calc(var(--sr) + 12px) calc(var(--sb) + 12px) calc(var(--sl) + 12px)}
.wb-ov.on{display:flex}
body.wb-open{overflow:hidden}
.wb-box{position:relative;width:100%;max-width:460px;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border:5px solid var(--ink);box-shadow:8px 8px 0 var(--li);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.wb-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 0}
.wb-count{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--pu)}
.wb-x{width:40px;height:40px;font:900 18px 'Montserrat',sans-serif;color:var(--ink);background:#fff;border:3px solid var(--ink)}
.wb-bar{height:8px;margin:10px 14px 0;background:#fff;border:2px solid var(--ink)}
.wb-bar i{display:block;height:100%;background:var(--pu);transition:width .25s}
.wb-title{margin:16px 14px 4px;font-size:34px;line-height:1.05;color:var(--pu);text-shadow:2px 2px 0 var(--li)}
.wb-body{flex:1;padding:4px 16px 8px;font-size:17px;font-weight:700;line-height:1.45;color:#2a2138}
.wb-body p{margin:12px 0}
.wb-body ol{margin:10px 0;padding-left:24px}
.wb-body li{margin:10px 0}
.wb-body b{color:var(--ink);font-weight:900}
.wb-note{font-size:14px;color:#5b5070;font-weight:700}
.wb-ok{padding:10px 12px;background:#e6ffd1;border:3px solid var(--ink);font-weight:900}
.wb-bad{padding:10px 12px;background:#ffe1e6;border:3px solid var(--ink);font-weight:800}
.wb-big{display:block;width:100%;margin:14px 0;padding:16px 12px;font:900 16px 'Montserrat',sans-serif;letter-spacing:.06em;text-align:center;text-decoration:none;color:var(--paper);background:var(--pu);border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.wb-big:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.wb-big:disabled{opacity:.6}
.wb-lbl{display:block;margin-top:8px;font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.wb-lbl input{display:block;width:100%;margin-top:6px;height:54px;padding:0 12px;font:800 22px 'Montserrat',sans-serif;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:0;outline:0;-webkit-user-select:text;user-select:text}
.wb-res{font-size:16px;font-weight:800}
.wb-res:empty{display:none}
.wb-res.ok,.wb-res.warn,.wb-res.bad{padding:12px;border:3px solid var(--ink)}
.wb-res.ok{background:#e6ffd1}
.wb-res.warn{background:#fff3c4}
.wb-res.bad{background:#ffe1e6}
.wb-res ol{margin:8px 0 0;padding-left:22px}
.wb-nav{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 14px;background:var(--paper);border-top:3px solid var(--ink)}
.wb-back{padding:12px 6px;font:900 15px 'Montserrat',sans-serif;color:var(--pu);background:none;border:0}
.wb-next{flex:1;max-width:220px;padding:15px 12px;font:900 16px 'Montserrat',sans-serif;letter-spacing:.06em;color:var(--ink);background:var(--li);border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.wb-next:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
