/* The error pages' own look, from the mockup (doc/mockup/404.html and the others). */
/* ===================== 13. Error pages (400/403/404/408/418): small banner header, scene, message, Back/Home/Replay, 'Tell us what happened' form ===================== */
/* error-page tokens add --wall and --floor (scene colours) */
:root { --bg:#EEF3FA; --surface:#FFFFFF; --ink:#0E1E3A; --muted:#55657F; --line:#D3DDEC; --wall:#C9D8EE; --floor:#8FAEE0; --field:#FFFFFF; --pale:#C9D8EE; --link:#1E54A8; --font:'Barlow',Arial,sans-serif }
@media (prefers-color-scheme: dark) { :root:not([data-ea-theme="light"]) { --bg:#0A1322; --surface:#111F37; --ink:#E6EDF8; --muted:#9DAEC8; --line:#22365A; --wall:#1C3358; --floor:#111F37; --field:#0D182B; --pale:#2A426C; --link:#8FAEE0; color-scheme:dark } }
:root[data-ea-theme="dark"] { --bg:#0A1322; --surface:#111F37; --ink:#E6EDF8; --muted:#9DAEC8; --line:#22365A; --wall:#1C3358; --floor:#111F37; --field:#0D182B; --pale:#2A426C; --link:#8FAEE0; color-scheme:dark }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); padding:16px 16px 40px; overflow-x:hidden }
.top { max-width:1280px; width:100%; margin:0 auto; background:#1E54A8; border-radius:16px; padding:10px 14px; line-height:0 }
.top a { display:inline-block; border-radius:8px } .top svg { height:44px; width:auto }
.top a:focus-visible { outline:3px solid #FFFFFF; outline-offset:2px }
main { max-width:1280px; margin:0 auto; display:grid; gap:6px; padding-top:10px }
.scene { width:100%; height:auto; max-height:56vh; display:block; border-radius:16px }
.msg { text-align:center; display:grid; gap:6px; justify-items:center }
.oops { margin:0; font-size:clamp(20px,3.2vw,30px); font-weight:600; color:var(--muted) }
.code { margin:0; position:relative; font-size:clamp(72px,14vw,150px); line-height:.95; font-weight:700; letter-spacing:.08em; color:#1E54A8 }
@media (prefers-color-scheme: dark) { :root:not([data-ea-theme="light"]) .code { color:#8FAEE0 } } :root[data-ea-theme="dark"] .code { color:#8FAEE0 }
.err { position:absolute; right:100%; top:.12em; margin-right:.12em; font-size:.2em; line-height:1; letter-spacing:.06em; font-weight:700 }
.name { margin:0; font-size:22px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#1E54A8 }
@media (prefers-color-scheme: dark) { :root:not([data-ea-theme="light"]) .name { color:#8FAEE0 } } :root[data-ea-theme="dark"] .name { color:#8FAEE0 }
.what { margin:0; font-size:16px; color:var(--muted); max-width:640px }
.home { margin-top:10px; display:flex; flex-direction:column; gap:10px; align-items:center }
.btns { display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center }
.tbtn { display:inline-block; line-height:0; border-radius:10px; cursor:pointer; border:0; padding:0; background:none }
.tbtn .bar { height:48px; width:auto; display:block }
.tbtn:hover svg [fill="#1E54A8"] { fill:#5A82C6 } .tbtn:focus-visible { outline:3px solid #5A82C6; outline-offset:2px }
.replay { appearance:none; border:0; background:none; font:inherit; font-size:14px; font-weight:700; color:var(--link); text-decoration:underline; cursor:pointer }
/* report form */
.report { width:100%; max-width:720px; margin:18px auto 0; background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; text-align:left }
.report .bhead { background:#1E54A8; padding:12px 16px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap }
.report h2 { margin:0; font-size:16px; letter-spacing:.12em; text-transform:uppercase; color:#FFFFFF }
.report .hint { color:#FFFFFF; opacity:.85; font-size:13px }
.report form { padding:14px 16px 16px; display:grid; gap:12px }
.fld { display:grid; gap:5px }
.fld > span { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.fld textarea, .fld input { font:inherit; font-size:15px; color:var(--ink); background:var(--field); border:2px solid var(--pale); border-radius:10px; padding:8px 10px; width:100%; min-width:0 }
.fld textarea { min-height:84px; resize:vertical; line-height:1.4 } .fld input { height:42px }
.fld :is(textarea,input):focus { outline:0; border-color:#1E54A8; box-shadow:0 0 0 3px var(--pale) }
.fld :is(textarea,input)::placeholder { color:var(--muted); opacity:.6 }
.need { border-color:#B3261E !important }
.row2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px } @media (max-width:640px) { .row2 { grid-template-columns:minmax(0,1fr) } }
.acts { display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.send { appearance:none; font:inherit; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; height:42px; padding:0 18px; border-radius:10px; border:2px solid #1E54A8; background:#1E54A8; color:#FFFFFF; cursor:pointer }
.send:hover:not(:disabled) { background:#5A82C6; border-color:#5A82C6 } .send:disabled { opacity:.5; cursor:default }
.send.ghost { background:transparent; color:var(--link) } .send.ghost:hover { color:#FFFFFF }
.send:focus-visible { outline:3px solid #5A82C6; outline-offset:2px }
.status { font-size:14px; color:var(--muted) } .status.ok { color:#1C5427; font-weight:600 }
@media (prefers-color-scheme: dark) { :root:not([data-ea-theme="light"]) .status.ok { color:#A9CDB0 } } :root[data-ea-theme="dark"] .status.ok { color:#A9CDB0 }
.copybox { display:none; width:100%; min-height:110px; font:13px/1.4 ui-monospace,Menlo,Consolas,monospace; color:var(--ink); background:var(--field); border:2px dashed var(--pale); border-radius:10px; padding:8px 10px }
.copybox.show { display:block }