/* Publik inloggning har ett eget skal utan beroenden till kartans arbetsyta.
 * Kontodialogens DOM ägs av person-session.js; samma formulär och API används
 * här och i kartan. Hela sidan får skrolla på små skärmar och vid zoom. */
:root{color-scheme:light;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#18364a;background:#102b3d;}
*{box-sizing:border-box;}
[hidden]{display:none!important;}
body.plotting-login{margin:0;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:32px 16px;background:radial-gradient(ellipse at 10% 10%,#21546a 0,transparent 55%),radial-gradient(ellipse at 95% 95%,#184c4d 0,transparent 50%),#102b3d;font-size:15px;line-height:1.5;}
button,input,select{font:inherit;}
button,.access-file{min-height:46px;border:1px solid #b6c7d0;border-radius:9px;background:#f7fafb;color:#18364a;padding:11px 16px;font-weight:650;cursor:pointer;}
button:hover,.access-file:hover{background:#e7f0f3;border-color:#7095a7;}
button:disabled{opacity:.55;cursor:wait;}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,.access-file:focus-within{outline:3px solid #108eab;outline-offset:3px;}
a{color:#205f79;text-underline-offset:3px;}
.access-panel{width:min(100%,480px);overflow:hidden;border:1px solid #ffffff24;border-radius:20px;background:#fff;box-shadow:0 24px 80px #0005;}
.access-heading{text-align:center;padding:27px 28px 23px;background:#102b3d;color:#fff;}
.access-mark{display:inline-grid;place-items:center;width:48px;height:48px;border:1px solid #78d5d65c;border-radius:13px;color:#8be0d9;background:#ffffff08;}
.access-mark svg{width:30px;height:30px;}
.access-product{margin:8px 0 2px;font-size:27px;font-weight:750;letter-spacing:.12em;}
.access-tagline{margin:0;color:#c4d9e3;font-size:13px;}
.access-content{padding:26px 30px 22px;}
.access-content h1{margin:0 0 8px;font-size:23px;line-height:1.25;letter-spacing:-.025em;}
#accessEnrollHelp{margin:0 0 22px;color:#526b79;}
.access-primary{display:block;width:100%;border-color:#176a76;background:#176a76;color:#fff;}
.access-primary:hover{background:#105763;border-color:#105763;}
#accessContinue{margin-bottom:10px;}
.access-account-help{text-align:center;font-size:12px;color:#607784;margin:7px 0 0;}
.access-divider{display:flex;align-items:center;gap:14px;color:#657b87;font-size:12px;margin:23px 0 16px;}
.access-divider::before,.access-divider::after{content:"";height:1px;background:#dce5e9;flex:1;}
.access-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.access-file{position:relative;text-align:center;overflow:hidden;}
/* Ett äkta filfält behåller tangentbord, skärmläsare och mobilens bildväljare. */
.access-file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}
.access-code{display:grid;gap:7px;font-size:13px;font-weight:600;margin:18px 0 10px;}
.access-code input,.plotting-person-dialog input,.plotting-person-dialog select{width:100%;min-width:0;min-height:46px;border:1px solid #afc2cd;border-radius:8px;background:#fff;color:#18364a;padding:11px 12px;font:400 16px/1.35 system-ui,sans-serif;}
.access-code input::placeholder{color:#6c818d;font-size:14px;}
#accessRegister{width:100%;}
#accessCameraPreview{display:block;width:100%;max-height:260px;margin:14px 0 10px;border-radius:10px;background:#102b3d;object-fit:contain;}
.access-status{margin:12px 0 0;color:#38596b;overflow-wrap:anywhere;font-size:14px;}
.access-status:empty{display:none;}
.access-person{padding:10px 13px;margin:0 0 14px;border-radius:8px;background:#eaf5f2;color:#24594e;font-size:14px;overflow-wrap:anywhere;}
.access-identity{margin-top:18px;border-top:1px solid #dce5e9;padding-top:14px;font-size:13px;}
summary{cursor:pointer;font-weight:600;}
.access-identity dl{margin:12px 0 0;}
.access-identity dl div{margin-top:10px;}
.access-identity dt{color:#607784;}
.access-identity dd{margin:2px 0 0;overflow-wrap:anywhere;}
.access-footer{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:18px 30px;background:#f4f7f9;border-top:1px solid #e3ebef;color:#5f7582;font-size:12px;}
.access-footer a{white-space:nowrap;}
noscript{display:block;margin-top:16px;color:#8b2b21;}
/* Dialogen håller lösenord utanför startsidans QR-formulär och kan skrollas
 * självständigt med öppet mobilt tangentbord. Ingen fast höjd krävs. */
.plotting-person-dialog{width:min(480px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;margin:auto;border:1px solid #afc2cd;border-radius:16px;padding:24px;background:#fff;color:#18364a;font:15px/1.5 system-ui,sans-serif;box-shadow:0 24px 80px #0005;}
.plotting-person-dialog::backdrop{background:#071923b8;}
.plotting-person-dialog header{display:flex;gap:12px;justify-content:space-between;align-items:center;}
.plotting-person-dialog h2{margin:0;font-size:22px;overflow-wrap:anywhere;}
.plotting-person-dialog header button{flex-shrink:0;font-size:22px;padding:5px 13px;}
.plotting-person-dialog label{display:grid;gap:6px;margin:14px 0;font-size:14px;font-weight:600;}
.plotting-person-dialog [data-person-info],.plotting-person-device{color:#5a7382;font-size:13px;}
.plotting-person-dialog footer{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;}
.plotting-person-dialog button[type="submit"],.plotting-person-dialog [data-bind]{background:#176a76;border-color:#176a76;color:#fff;}
.plotting-person-dialog [data-status]{color:#8b2b21;overflow-wrap:anywhere;}
.plotting-person-dialog details{margin:16px 0;}
@media(max-width:420px){body.plotting-login{padding:12px;}.access-content{padding:23px 20px 20px;}.access-heading{padding:22px 20px 20px;}.access-footer{padding:16px 20px;}.access-actions{gap:8px;}.access-actions button,.access-file{font-size:14px;white-space:nowrap;}.access-footer{flex-wrap:wrap;gap:10px;}button,.access-file{padding:11px 10px;}.plotting-person-dialog{padding:20px;}}