/* =============================================================
   Sidespesifikk layout for den midlertidige forsiden.
   Bruker kun variabler fra tokens.css. Ingen nye verdier.
   ============================================================= */

.side{position:relative;z-index:1;max-width:600px;margin:0 auto;padding:96px 26px 80px}
.side h1{font-family:var(--font-display);font-size:27px;font-weight:700;letter-spacing:-.02em;margin:0 0 12px;color:var(--fg-1)}
.side p{color:var(--fg-2);margin:0 0 14px}
.side .brand{margin-bottom:26px}
/* Merket er utsatt (B-45). Ordmerket står alene til navn og logo er valgt.
   En plassholder som ser ut som noe, blir husket som noe — derfor ingen figur. */
.side .ordmerke{padding-left:0}
.side-fot{margin-top:26px;padding-top:18px;border-top:1px solid var(--border-hairline);
  font-family:var(--font-mono);font-size:12.5px;color:var(--fg-3)}
.side-fot div{padding:2px 0}
.side-fot a{color:var(--teal-fg)}

/* Innlogging */
.skjult{display:none}
.felt{margin:0 0 14px}
.felt label{display:block;font-size:12.5px;color:var(--fg-3);margin-bottom:5px}
.felt input{width:100%;font:inherit;font-size:15px;padding:11px 13px;border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);background:var(--surface-2);color:var(--fg-1)}
.felt input:focus{outline:2px solid var(--ciron-teal);outline-offset:1px}
.knapperad{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.melding{margin-top:16px;font-size:14px;padding:11px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--border-hairline);color:var(--fg-2)}
.melding.feil{border-color:var(--state-hendelse-fg);color:var(--state-hendelse-fg)}
.melding.ok{border-color:var(--state-normal-fg);color:var(--state-normal-fg)}

.hint.avstand{margin-top:22px}

.skille{border:0;border-top:1px solid var(--border-hairline);margin:28px 0 18px}
.avkryssing{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:10px 0 14px}
.avkryssing input{margin-top:3px}
h2{font-size:20px;margin:0 0 6px}

.applogo{display:flex;align-items:center;gap:10px}.applogo svg{color:var(--ciron-teal)}.applogo b{font-family:var(--font-display);font-size:18px;font-weight:700}
.fraciron-tekst{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--fg-3);margin:4px 0 26px 44px}

/* Innloggingssiden (M43): to kort, ett valg på hvert. Alt sekundært er foldet. */
.kort{background:var(--surface-1);border:1px solid var(--border-strong);border-radius:12px;padding:24px 26px;margin:0 0 16px}
.kort h1{font-size:28px;margin:0 0 8px}.kort h2{font-size:20px;margin:0 0 6px}.kort p{margin:0 0 14px}
.kort .btn.primary{min-height:46px;padding:0 22px}
.to{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:600px){.to{grid-template-columns:1fr}}
.sso{margin-top:18px;padding-top:14px;border-top:1px solid var(--border-hairline)}
.mer{margin-top:18px;border-top:1px solid var(--border-hairline);padding-top:12px}
.mer summary{cursor:pointer;font-weight:600;color:var(--teal-fg);list-style:none;display:flex;gap:8px;align-items:center}
.mer summary::before{content:"+";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--border-strong);font-size:14px}
.mer[open] summary::before{content:"–"}
.mer summary::-webkit-details-marker{display:none}
.mer p{margin:10px 0 12px;color:var(--fg-2);font-size:14px}
.under{margin:6px 0 0 4px}

/* Bryteren: eksisterende eller ny kunde. Ett kort, ett valg. */
.bryter{display:inline-flex;border:1px solid var(--border-strong);border-radius:999px;padding:3px;margin:0 0 20px;background:var(--surface-2)}
.bryter button{border:0;background:transparent;color:var(--fg-2);font:inherit;font-weight:600;padding:8px 16px;border-radius:999px;cursor:pointer}
.bryter button[aria-selected="true"]{background:var(--ciron-teal);color:var(--on-teal)}
.bryter button:focus-visible{outline:3px solid var(--ciron-teal);outline-offset:2px}

.fraciron-rad{display:flex;align-items:center;gap:var(--s3);color:var(--fg-3);font-size:13.5px;margin:var(--s1) 0 var(--s6)}.fraciron-rad .orbit-lite.liten{width:28px;height:28px;color:var(--ciron-teal)}

/* Porten (M46-1, justert M46-2): ett kort midt på siden, som TM Drone.
   Kortet er sentrert; ALT innhold er venstrestilt og deler samme bredde.
   `text-align:center` på kortet ville arves av felter og hjelpetekst — derfor
   sentreres bare hodet, aldri skjemaet. */
.side{min-height:100dvh;display:grid;place-items:center;padding:var(--s5) var(--s4);background:var(--bg-app)}
.kort.port{width:100%;max-width:420px;padding:var(--s6) var(--s5) var(--s5);border-radius:var(--radius-lg);box-shadow:var(--shadow-2)}
.kort.port>*{max-width:100%}

/* Hodet: merke, navn, slagord. Det eneste som sentreres. */
.portmerke{display:grid;place-items:center;margin:0 0 var(--s4)}
.portmerke svg{width:52px;height:52px;color:var(--ciron-teal)}
.portnavn{text-align:center;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-fg);font-weight:700;margin:0 0 var(--s1)}
.portslag{text-align:center;font-size:16px;font-weight:600;color:var(--fg-1);margin:0 0 var(--s5);line-height:1.35}
.kort.port h1{text-align:center;font-size:24px;margin:0 0 var(--s2)}

/* Bryteren: to like halvdeler i full bredde. */
.kort.port .bryter{display:grid;grid-template-columns:1fr 1fr;width:100%;margin:0 0 var(--s5);background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:3px;gap:3px}
.kort.port .bryter button{border:0;background:transparent;font:inherit;font-weight:600;color:var(--fg-2);padding:9px 0;border-radius:calc(var(--radius-md) - 4px);cursor:pointer;min-height:44px}
.kort.port .bryter button[aria-selected="true"]{background:var(--surface-1);color:var(--fg-1);box-shadow:var(--shadow-2)}

/* Skjemaet: venstrestilt, full bredde, ingen som stikker ut. */
.kort.port .del{text-align:left}
.portledd{font-size:14.5px;color:var(--fg-2);margin:0 0 var(--s4);text-align:left}
.kort.port .felt{margin:0 0 var(--s3)}
.kort.port .felt label{display:block;font-size:13.5px;font-weight:600;color:var(--fg-2);margin-bottom:6px}
.kort.port .felt input,.kort.port .felt select,.kort.port .felt textarea{display:block;width:100%;box-sizing:border-box}
.kort.port .hint{text-align:left;margin:6px 0 0}
/* Avkryssingen: boks og tekst på én linje, teksten bryter under seg selv. */
.kort.port .avkryssing{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:var(--s2);text-align:left;font-size:14px;margin:var(--s4) 0 var(--s4);line-height:1.45}
.kort.port .avkryssing input{margin:2px 0 0}
.btn.full{width:100%;justify-content:center}
.kort.port .knapperad{display:grid;gap:var(--s2);margin-top:var(--s2)}
.kort.port .sso{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--border-hairline)}
.kort.port .mer{margin-top:var(--s4);text-align:left}
.kort.port .mer summary{font-size:14.5px}

/* De sjeldne veiene: lenker, sentrert, under alt annet. */
.portlenker{text-align:center;margin:var(--s4) 0 0;font-size:14px}
.portlenker a{color:var(--fg-2);text-decoration:underline;text-underline-offset:3px}
.portlenker a:hover{color:var(--teal-fg)}
.portfot{display:flex;align-items:center;justify-content:center;gap:var(--s2);margin:var(--s4) 0 0;color:var(--fg-3);font-size:13px}
.portfot .orbit-lite{width:22px;height:22px;color:var(--fg-3)}
.portmelding{max-width:420px;width:100%;margin:var(--s3) auto 0;text-align:left}
.portmelding:empty{display:none}
@media(max-width:480px){.kort.port{max-width:100%;padding:var(--s5) var(--s4)}}