/* Nostalgi-temaet på mobil: gammel iPhone-stil (ca. 2008–2012) i stedet for XP.
   Lastes bare under 600px bredde (media-attributtet i skriv_header), og etter sidenes
   egne <style>, så like sterke selektorer her vinner. Egentegnet – ingen Apple-grafikk. */
:root {
    --ios-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ios-stripe: #C5CCD4;
    --ios-tekst-blaa: #385487;
    --ios-kant: #A9ABAE;
}

/* Vinduet blir hele skjermen */
body {
    font-family: var(--ios-font);
    font-size: 15px;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding-top: 20px;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: linear-gradient(90deg, var(--ios-stripe) 0 5px, #CBD2D8 5px 7px);
    background-size: 7px 100%;
}
body.skrivebord { background: transparent; padding-bottom: 100px; }
.xp-hoyreklikk { display: none !important; }

/* Statuslinje: gjenbruker oppgavelinja, viser bare klokka */
.xp-oppgavelinje {
    top: 0;
    bottom: auto;
    height: 20px;
    background: linear-gradient(to bottom, #3E3E3E, #000);
    font: bold 12px var(--ios-font);
    color: #FFF;
}
.xp-startmeny, .xp-apper { display: none; }
.xp-oppgavelinje::before { content: "▂▄▆█ noasn"; padding-left: 6px; font-size: 11px; letter-spacing: -1px; }
.xp-oppgavelinje::after {
    content: "";
    width: 22px;
    height: 9px;
    margin-right: 8px;
    border: 1px solid #FFF;
    border-radius: 2px;
    background: linear-gradient(90deg, #FFF 80%, transparent 80%) padding-box;
    box-shadow: 2px 0 0 -1px #FFF;
}
.xp-skuff {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    font-size: 13px;
}

/* Navigasjonslinje: gjenbruker tittellinja */
.header {
    position: sticky;
    top: 20px;
    height: 44px;
    margin: 0;
    padding: 0 6px;
    justify-content: center;
    border: 0;
    border-bottom: 1px solid #2D3642;
    border-radius: 0;
    background: linear-gradient(to bottom, #B0BCCD, #889BB3 50%, #8195AF 50%, #6D84A2);
}
.header h1 {
    flex: none;
    max-width: 60%;
    text-align: center;
    font: bold 20px var(--ios-font);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .45);
}
.xp-knapper { display: none; }
/* Logoen blir «‹ Hjem»-knapp */
.header > a {
    position: absolute;
    left: 6px;
    top: 7px;
    height: 30px;
    padding: 0 10px 0 16px;
    align-items: center;
    color: #FFF;
    font: bold 12px var(--ios-font);
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .45);
    background: linear-gradient(to bottom, #8EA4C1, #5877A2 50%, #4A6C9B 50%, #4A6C9B);
    clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
    border-radius: 0 5px 5px 0;
}
.header > a img { display: none; }
.header > a::after { content: "Hjem"; }

/* Hjemskjerm: app-ikoner i rutenett på Bliss */
body.skrivebord .xp-ikoner {
    position: static;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: none;
    grid-auto-columns: auto;
    height: auto;
    gap: 18px 0;
    padding: 18px 8px;
}
body.skrivebord .xp-ikoner .kun-mobil { display: flex; }
.xp-ikoner a, .ios-dock a { position: relative; gap: 5px; padding: 0; }
.xp-ikoner img, .ios-dock img {
    width: 57px;
    height: 57px;
    padding: 9px;
    box-sizing: border-box;
    border-radius: 12px;
    background: linear-gradient(to bottom, #8FB4E8, #3F6FC2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .55);
    filter: none;
}
/* Glans øverst på hvert ikon */
.xp-ikoner a::before, .ios-dock a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 57px;
    height: 29px;
    transform: translateX(-50%);
    border-radius: 12px 12px 50% 50% / 12px 12px 8px 8px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .6), rgba(255, 255, 255, .12));
    pointer-events: none;
}
.xp-ikoner span, .ios-dock span {
    font: bold 11px var(--ios-font);
    color: #FFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
    background: none;
    outline: none;
}
.xp-ikoner a:focus img { filter: brightness(.7); }
.xp-ikoner a[href="/cv/"] img { background: linear-gradient(to bottom, #F4F4F4, #B8C4D6); }
.xp-ikoner a[href="/ønskeliste/"] img { background: linear-gradient(to bottom, #FF9A8C, #C4271B); }
.ios-dock a[href="/min-datamaskin/"] img { background: linear-gradient(to bottom, #C9CED6, #6E7787); }
.ios-dock a[href="/admin/"] img { background: linear-gradient(to bottom, #6B6B6B, #1E1E1E); }
.ios-dock a:last-child img { background: linear-gradient(to bottom, #9BE29B, #2E8B2E); }

/* Dock nederst på hjemskjermen */
body.skrivebord .ios-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 92px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 20px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .45), rgba(255, 255, 255, .15) 45%, rgba(0, 0, 0, .25) 46%, rgba(0, 0, 0, .35));
    border-top: 1px solid rgba(255, 255, 255, .7);
}
.ios-dock a { display: flex; flex-direction: column; align-items: center; text-decoration: none; }

/* Undersider: hvite, avrundede grupper på stripet bakgrunn */
.dokument { background: none; border: 0; padding: 10px 10px 20px; min-height: 0; }
.ark, .xp .ark {
    margin: 0 0 12px;
    padding: 14px;
    background: #FFF;
    border: 1px solid var(--ios-kant);
    border-radius: 10px;
    box-shadow: none;
}
.ark h2, .xp .ark h2 {
    color: #4C566C;
    background: none;
    border: 0;
    padding: 0;
    text-shadow: 0 1px 0 #FFF;
    letter-spacing: 0;
}
.verktoylinje { margin: 0 0 10px; padding: 0; background: none; border: 0; box-shadow: none; }
.verktoylinje .knapp:first-child { display: none; } /* «← Back» – nav-linja har allerede Hjem */

/* Knapper og felt */
button, input[type=submit], .knapp {
    font: bold 15px var(--ios-font);
    min-height: 40px;
    padding: 8px 16px;
    color: var(--ios-tekst-blaa);
    background: linear-gradient(to bottom, #FFF, #E4E4E4);
    border: 1px solid var(--ios-kant);
    border-radius: 8px;
    box-shadow: none;
}
a.knapp, a.knapp:visited { color: var(--ios-tekst-blaa); }
input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=date], textarea, select {
    font: 16px var(--ios-font); /* 16px hindrer zoom ved fokus på iPhone */
    padding: 8px;
    border: 1px solid var(--ios-kant);
    border-radius: 8px;
}

/* /ønskeliste/: ønskene som hvite kort i to kolonner, skjemaet som grouped table */
.xp .griddernopp { margin: 10px; padding: 0; background: none; border: 0; box-shadow: none; gap: 10px; }
.xp .griddernopp > a { background: #FFF; border: 1px solid var(--ios-kant); border-radius: 10px; box-shadow: 0 1px 0 #FFF; }
.xp .griddernopp > a:hover { border-color: var(--ios-kant); }
.xp .griddernopp > a > span {
    order: 1;
    padding: 8px 10px;
    color: #000;
    font: bold 14px var(--ios-font);
    text-shadow: none;
    background: none;
}
.xp .griddernopp > a > img { border: 0; }
.xp #skjemaToggle { width: calc(100% - 20px); justify-content: center; }
.xp .inputskjema { margin: 0 10px 20px; max-width: none; background: none; border: 0; box-shadow: none; }
.xp .xp-dialog-tittel { margin: 0; padding: 0 10px 6px; font: bold 17px var(--ios-font); color: #4C566C; text-shadow: 0 1px 0 #FFF; background: none; }
.xp .inputskjema form {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    padding: 0;
    background: #FFF;
    border: 1px solid var(--ios-kant);
    border-radius: 10px;
}
.xp .inputskjema label { margin: 0; padding: 0 10px; font-weight: bold; }
.xp .inputskjema label { align-self: stretch; display: flex; align-items: center; border-bottom: 1px solid #D9D9D9; }
.xp .inputskjema input { margin: 0; height: 100%; border-width: 0 0 1px; border-color: #D9D9D9; border-radius: 0; color: var(--ios-tekst-blaa); }
.xp .inputskjema button { grid-column: 1 / -1; margin: 10px; }
.xp #onskeMelding { padding: 10px 0; text-align: center; font-weight: bold; }

/* /min-datamaskin/: fanene som segmented control, innholdet som grouped table */
.xp .main { padding: 10px; }
.xp .fanerad { padding: 0 0 12px; gap: 0; flex-wrap: nowrap; }
.xp .fanerad label {
    flex: 1;
    margin: 0 0 0 -1px;
    padding: 7px 4px;
    text-align: center;
    font: bold 13px var(--ios-font);
    color: #4C566C;
    text-shadow: 0 1px 0 #FFF;
    background: linear-gradient(to bottom, #FFF, #EBEBEB 50%, #DEDEDE 50%, #F2F2F2);
    border: 1px solid #8D96A3;
    border-radius: 0;
}
.xp .fanerad label:first-child { margin-left: 0; border-radius: 6px 0 0 6px; }
.xp .fanerad label:last-child { border-radius: 0 6px 6px 0; }
.xp .fanerad label:hover { box-shadow: none; }
.xp #f-gen:checked ~ .fanerad [for=f-gen],
.xp #f-hw:checked  ~ .fanerad [for=f-hw],
.xp #f-om:checked  ~ .fanerad [for=f-om] {
    margin-top: 0;
    padding-top: 7px;
    color: #FFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .4);
    background: linear-gradient(to bottom, #7A9CD3, #4A72B8 50%, #3762AE 50%, #2F5DAE);
    border-color: #2B4A80;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35);
}
.xp .panel { padding: 0; background: none; border: 0; line-height: 1.4; }
.xp .gen { justify-content: center; }
.xp .gen img { width: 72px; }
.xp .gen .data { flex-basis: 100%; min-width: 0; }
.xp fieldset { margin: 0 0 12px; padding: 0; border: 0; min-width: 0; }
.xp legend { float: left; width: 100%; box-sizing: border-box; padding: 0 10px 6px; font: bold 17px var(--ios-font); color: #4C566C; text-shadow: 0 1px 0 #FFF; }
.xp dl, .xp #p-om p { clear: left; background: #FFF; border: 1px solid var(--ios-kant); border-radius: 10px; }
.xp dl { grid-template-columns: auto 1fr; gap: 0; }
.xp dt, .xp dd { margin: 0; padding: 11px 10px; border-bottom: 1px solid #D9D9D9; }
.xp dl > :nth-last-child(-n+2) { border-bottom: 0; }
.xp dt { color: #000; font-weight: bold; }
.xp dd { text-align: right; color: var(--ios-tekst-blaa); overflow-wrap: break-word; }
.xp #p-om p { margin: 0 0 10px; padding: 11px 10px; }
.xp .handlinger { display: none; }

/* /admin/ og /admin/cv.php: seksjonsoverskrifter, hvite grupper og iOS-knapper */
.xp .admin { padding: 10px 10px 40px; }
.xp .admin h2 { margin: 18px 0 6px; padding: 0 10px; font: bold 17px var(--ios-font); color: #4C566C; text-shadow: 0 1px 0 #FFF; }
.xp .admin h2::after { display: none; }
.xp .admin > form, .xp .kort, .xp .rad, .xp .melding {
    padding: 4px 12px 12px;
    background: #FFF;
    border: 1px solid var(--ios-kant);
    border-radius: 10px;
    box-shadow: none;
}
.xp .rad, .xp .rad:nth-child(even), .xp .rad:hover { margin-bottom: 8px; padding: 10px 12px; background: #FFF; }
.xp .melding { padding: 12px 12px 12px 44px; }
.xp .oppforing { background: #F4F5F7; border-color: #D9D9D9; border-radius: 8px; }
.xp .knapp, .xp .knapp:visited, .xp .knapp:hover { color: var(--ios-tekst-blaa); line-height: 22px; }
.xp .knapp-fare, .xp .knapp.knapp-fare { color: #C4271B; }
.xp .miniknapp { min-height: 32px; padding: 4px 12px; }
.xp .hjelp { font-size: 12px; color: #6D7480; }
.xp .lagrelinje { margin: 20px -10px 0; padding: 8px 10px; background: linear-gradient(to bottom, #B0BCCD, #6D84A2); border-top: 1px solid #2D3642; box-shadow: none; }