/* Opening page (OPEN_ACCOUNT_REBUILD.md). Sizes from UI_SPEC: card padding 24 (phone 16), radius 20, primary 48, inputs 48, block gap 24. */
/* public-wide.css widens every .website-opening with !important; this page is a form and stays 720 wide. */
html[data-arena-site] body [data-public-route-content]>.website-opening.opening-flow[data-opening-flow],html[data-arena-site] .website-opening.opening-flow[data-opening-flow]{max-width:720px!important;width:min(720px,calc(100% - 48px))!important}
@media(max-width:680px){html[data-arena-site] body [data-public-route-content]>.website-opening.opening-flow[data-opening-flow],html[data-arena-site] .website-opening.opening-flow[data-opening-flow]{width:calc(100% - 32px)!important}}
html[data-arena-site] .opening-flow .site-opening-steps{margin:24px 0}
html[data-arena-site] .opening-flow .site-opening-steps li[hidden]{display:none}
html[data-arena-site] .opening-flow .opening-cheer{margin:0 0 24px;font-size:18px;font-weight:600;line-height:1.5;color:var(--bb-theme-ink, var(--site-ink))}
html[data-arena-site] .opening-flow .opening-panel{margin:0 0 24px;padding:24px;border-radius:20px}
html[data-arena-site] .opening-flow .opening-panel h2{margin:0 0 16px;font-size:24px;line-height:32px}
html[data-arena-site] .opening-flow .opening-field{display:block;margin:0 0 16px}
html[data-arena-site] .opening-flow .opening-field>span{display:block;margin:0 0 8px;font-size:14px;font-weight:500;color:var(--bb-theme-ink, var(--site-ink))}
html[data-arena-site] .opening-flow .opening-field input,html[data-arena-site] .opening-flow .opening-field select{width:100%;height:48px;box-sizing:border-box;padding:0 16px;border:1px solid var(--bb-theme-line, var(--site-border));border-radius:12px;background:var(--bb-theme-surface, var(--site-white));color:var(--bb-theme-ink, var(--site-ink));font:inherit;font-size:16px}
html[data-arena-site] .opening-flow .opening-check{display:flex;gap:12px;align-items:center;margin:0 0 16px;font-size:14px;color:var(--bb-theme-ink, var(--site-ink))}
html[data-arena-site] .opening-flow .opening-check input{width:20px;height:20px;margin:0;accent-color:#111}
html[data-arena-site] .opening-flow .opening-choices{display:flex;flex-wrap:wrap;gap:8px}
html[data-arena-site] .opening-flow .opening-choices label{display:inline-flex;align-items:center;height:40px;padding:0 16px;border:1px solid var(--bb-theme-line, var(--site-border));border-radius:999px;font-size:14px;font-weight:500;cursor:pointer}
html[data-arena-site] .opening-flow .opening-choices label:has(input:checked){background:var(--ui-primary,#111);color:var(--ui-on-primary,#fff);border-color:var(--ui-primary,#111)}
html[data-arena-site] .opening-flow .opening-choices input{position:absolute;opacity:0;width:0;height:0}
html[data-arena-site] .opening-flow .opening-summary{margin:0 0 16px;padding-left:20px;font-size:14px;line-height:1.6;color:var(--bb-theme-ink, var(--site-ink))}
html[data-arena-site] .opening-flow .opening-documents{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
html[data-arena-site] .opening-flow .opening-documents a{display:flex;align-items:center;min-height:48px;padding:0 16px;border:1px solid var(--bb-theme-line, var(--site-border));border-radius:12px;font-size:14px;font-weight:500;color:var(--bb-theme-ink, var(--site-ink));text-decoration:none}
html[data-arena-site] .opening-flow .opening-error{margin:0 0 12px;font-size:14px;color:var(--bb-theme-down, #c0392b)}
html[data-arena-site] .opening-flow .opening-state{margin:0;font-size:14px;color:var(--bb-theme-ink, var(--site-ink))}
html[data-arena-site] .opening-flow .opening-primary{display:inline-flex;align-items:center;justify-content:center;min-width:160px;text-decoration:none}
html[data-arena-site] .opening-flow .opening-primary[disabled]{opacity:.4;pointer-events:none}
html[data-arena-site] .opening-flow .opening-skeleton{min-height:160px;background:var(--bb-theme-inset, var(--site-inset))}
html[data-arena-site] .opening-flow .opening-experience{margin:8px 0 0}
html[data-arena-site] .opening-flow form[hidden]{display:none}
@media(max-width:680px){html[data-arena-site] .opening-flow .opening-panel{padding:16px}html[data-arena-site] .opening-flow .opening-panel h2{font-size:20px;line-height:28px}}
/* Terms sheet: slides up from the bottom (phone) / centred (desktop); the agree button unlocks after the read countdown. */
html[data-arena-site] .opening-sheet{position:fixed;inset:auto 0 0 0;width:100%;max-width:none;margin:0;padding:0;border:0;border-radius:28px 28px 0 0;background:var(--bb-theme-surface, var(--site-white));color:var(--bb-theme-ink, var(--site-ink));box-shadow:0 -12px 40px rgba(0,0,0,.18);max-height:92dvh;overflow:auto}
html[data-arena-site] .opening-sheet[open]{animation:opening-sheet-in .25s ease-out}
html[data-arena-site] .opening-sheet::backdrop{background:rgba(0,0,0,.36)}
@keyframes opening-sheet-in{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
html[data-arena-site] .opening-sheet-body{padding:12px 20px calc(24px + env(safe-area-inset-bottom))}
html[data-arena-site] .opening-sheet-grip{width:40px;height:4px;margin:0 auto 16px;border-radius:2px;background:var(--bb-theme-line, var(--site-border))}
html[data-arena-site] .opening-sheet h2{margin:0 0 16px;font-size:24px;line-height:32px}
html[data-arena-site] .opening-sheet-points{margin:0 0 16px;padding-left:22px;font-size:16px;line-height:1.6}
html[data-arena-site] .opening-sheet-points li{margin:0 0 8px}
html[data-arena-site] .opening-sheet .opening-documents{margin:0 0 16px}
html[data-arena-site] .opening-sheet-agree{width:100%;gap:8px}
html[data-arena-site] .opening-sheet-count{font-variant-numeric:tabular-nums;opacity:.8}
html[data-arena-site] .opening-sheet-later{display:flex;width:100%;justify-content:center;margin:8px 0 0;height:40px}
@media(min-width:681px){html[data-arena-site] .opening-sheet{inset:50% auto auto 50%;transform:translate(-50%,-50%);width:480px;border-radius:20px;max-height:80vh}html[data-arena-site] .opening-sheet[open]{animation:none}html[data-arena-site] .opening-sheet-grip{display:none}html[data-arena-site] .opening-sheet-body{padding:24px}}
@media(prefers-reduced-motion:reduce){html[data-arena-site] .opening-sheet[open]{animation:none}}
