/* Skrifter fra egen server (se fonter/LISENS.md). */
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonter/atkinson-next-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonter/atkinson-next-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/fonter/newsreader-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/fonter/newsreader-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonter/newsreader-kursiv-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonter/newsreader-kursiv-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Skjermen er verkets etikett: kalkvegg, etikettkartong, trykksverte og
   ultramarin som eneste aksent. Se Undr/design/besokside-design-v1.html. */
:root {
  --grunn: #F4F5F2;
  --flate: #FFFFFF;
  --blekk: #1B1F24;
  --dempet: #555D68;      /* 6,1:1 mot grunnen */
  --linje: #DCDFDA;       /* bare pynt */
  --kant: #7C838D;        /* kant på kontroller, 3,5:1 */
  --pigment: var(--kunde-pigment, #2B3A9E);
  --pa-pigment: #FFFFFF;
  --pigment-svak: #E6E9F7;
  --merknad: #FFF3CD; --pa-merknad: #5C4400;
  --skygge: 0 1px 2px rgb(27 31 36 / .06), 0 8px 24px rgb(27 31 36 / .06);
  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --tekst: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rask: 120ms; --vanlig: 280ms; --rolig: 600ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --radius: 14px;
  color-scheme: light;
  font-size: 112.5%; /* 18 px, følger nettleserens tekststørrelse */
}
:root[data-stor="ja"] { font-size: 131.25%; } /* 21 px med «Aa» */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grunn: #121418; --flate: #1B1E24; --blekk: #ECEDEF; --dempet: #A3A9B3; --linje: #2C3038; --kant: #6E7684;
    --pigment: #9AA8FF; --pa-pigment: #10132A; --pigment-svak: #232A4D; --merknad: #3A3018; --pa-merknad: #F0D28A;
    --skygge: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --grunn: #121418; --flate: #1B1E24; --blekk: #ECEDEF; --dempet: #A3A9B3; --linje: #2C3038; --kant: #6E7684;
  --pigment: #9AA8FF; --pa-pigment: #10132A; --pigment-svak: #232A4D; --merknad: #3A3018; --pa-merknad: #F0D28A;
  --skygge: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--grunn); color: var(--blekk); }
/* Ingen dobbelttrykk-zoom når to kort trykkes raskt etter hverandre. Knipezoom virker fortsatt. */
html { touch-action: manipulation; }
body { font: 1rem/1.55 var(--tekst); -webkit-text-size-adjust: 100%; }
h1, h2 { text-wrap: balance; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--pigment); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

#app { max-width: 560px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; display: flex; flex-direction: column; }

/* Topp */
.topp { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 4px; padding: 8px 8px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); min-height: 64px; background: var(--grunn); border-bottom: 1px solid var(--linje); }
.sted { flex: 1; min-width: 0; text-align: center; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dempet); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ikonknapp { flex: none; min-width: 48px; min-height: 48px; border: 0; background: none; border-radius: 999px; display: inline-grid; place-items: center; transition: background var(--rask) var(--ease); }
.ikonknapp:hover { background: var(--pigment-svak); }
.ikonknapp svg { width: 24px; height: 24px; }
.ikonknapp[aria-pressed="true"] { background: var(--pigment); color: var(--pa-pigment); }
.aa { font-family: var(--display); font-size: 1.1rem; }
.aa small { font-size: .7em; }
.sprak { font-weight: 700; font-size: .8rem; letter-spacing: .06em; }
.usynlig { visibility: hidden; }

/* Skjermer */
main > section { flex: 1; padding: 24px 20px 28px; display: flex; flex-direction: column; gap: 20px; }
main > section:focus, [tabindex="-1"]:focus { outline: none; }
.midt { justify-content: center; text-align: center; color: var(--dempet); }
.skjermtittel { font-family: var(--display); font-weight: 400; font-size: 1.55rem; line-height: 1.15; margin: 0; letter-spacing: -.01em; }
.overlinje { margin: 0; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dempet); font-weight: 700; }
.ingress { margin: 0; color: var(--dempet); max-width: 34em; }
.liten { margin: 0; font-size: .78rem; color: var(--dempet); }
.utkast { margin: 0; background: var(--merknad); color: var(--pa-merknad); padding: 10px 14px; border-radius: 8px; font-size: .86rem; }

/* Skjermskifte: fremover fra høyre, tilbake fra venstre */
.inn { animation: innFraHoyre var(--vanlig) var(--ease); }
.inn.bak { animation-name: innFraVenstre; }
@keyframes innFraHoyre { from { opacity: 0; transform: translateX(28px); } }
@keyframes innFraVenstre { from { opacity: 0; transform: translateX(-28px); } }
.inn .stagger > * { animation: opp 420ms var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms + 80ms); }
@keyframes opp { from { opacity: 0; transform: translateY(10px); } }

/* Etiketten */
.etikett { background: var(--flate); border-radius: 4px; padding: 20px 20px 18px; box-shadow: var(--skygge); display: grid; gap: 4px; }
.verkstittel { font-family: var(--display); font-weight: 400; font-style: italic; font-size: 1.9rem; line-height: 1.1; margin: 4px 0 0; letter-spacing: -.015em; overflow-wrap: anywhere; }
.verkstittel.uten { font-style: normal; font-size: 1.45rem; color: var(--dempet); }
.kunstner { margin: 0; font-weight: 700; }
.etikett-data { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--linje); display: grid; grid-template-columns: repeat(auto-fit, minmax(7em, 1fr)); gap: 8px; font-size: .8rem; }
.etikett-data div { min-width: 0; }
.etikett-data dt { color: var(--dempet); font-size: .85em; }
.etikett-data dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Kort for konsepter og innganger */
.kortliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kort { position: relative; overflow: hidden; width: 100%; text-align: left; background: var(--flate); border: 1px solid var(--kant); border-radius: var(--radius); padding: 16px 52px 16px 16px; min-height: 64px; transition: transform var(--rask) var(--ease), border-color var(--rask) var(--ease); }
.kort:hover { border-color: var(--pigment); }
.kort:active { transform: scale(.985); }
.kort strong { display: block; font-family: var(--display); font-weight: 500; font-size: 1.12rem; line-height: 1.25; }
.kort span { display: block; margin-top: 4px; color: var(--dempet); font-size: .86rem; }
.kort .pil { position: absolute; right: 14px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: var(--pigment); transition: transform var(--rask) var(--ease); }
.kort:hover .pil { transform: translate(3px, -50%); }
.blom { position: absolute; border-radius: 50%; background: var(--pigment); opacity: .16; transform: scale(0); pointer-events: none; animation: blom var(--rolig) var(--ease) forwards; }
@keyframes blom { to { transform: scale(1); opacity: 0; } }

/* Samtale */
#samtale { padding: 0; gap: 0; }
.meldinger { list-style: none; margin: 0; padding: 20px 20px 12px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.meldinger li { max-width: 100%; overflow-wrap: anywhere; }
.m-bot { font-family: var(--display); font-size: 1.12rem; line-height: 1.5; padding-left: 14px; border-left: 2px solid var(--pigment); animation: opp var(--vanlig) var(--ease); }
.m-bot p { margin: 0; white-space: pre-wrap; max-width: 34em; }
.m-meg { align-self: flex-end; max-width: 85% !important; background: var(--pigment); color: var(--pa-pigment); padding: 10px 14px; border-radius: 18px 18px 4px 18px; white-space: pre-wrap; animation: opp var(--vanlig) var(--ease); }
.m-feil { align-self: center; text-align: center; color: var(--dempet); font-style: italic; }
.les { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--dempet); font: 500 .72rem var(--tekst); min-height: 44px; padding: 0 8px 0 0; }
.les svg { width: 18px; height: 18px; }
.les:hover, .les[aria-pressed="true"] { color: var(--blekk); }
/* Valgknapper under formidlerens svar */
.valg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -6px; padding-left: 16px; animation: opp var(--vanlig) var(--ease); }
.valg button { position: relative; overflow: hidden; min-height: 48px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--kant); background: var(--flate); font-weight: 500; font-size: .9rem; line-height: 1.3; text-align: left; transition: border-color var(--rask) var(--ease), transform var(--rask) var(--ease); }
.valg button:hover { border-color: var(--pigment); }
.valg button:active { transform: scale(.97); }
.skriver { display: inline-flex; gap: 5px; padding: 6px 0; }
.skriver i { width: 7px; height: 7px; border-radius: 50%; background: var(--dempet); animation: pust 1.2s ease-in-out infinite; }
.skriver i:nth-child(2) { animation-delay: .15s; } .skriver i:nth-child(3) { animation-delay: .3s; }
@keyframes pust { 50% { opacity: .25; transform: translateY(-2px); } }

.skriv { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--grunn); border-top: 1px solid var(--linje); }
.skriv textarea { flex: 1; min-width: 0; resize: none; font: inherit; font-size: .95rem; color: var(--blekk); background: var(--flate); border: 1px solid var(--kant); border-radius: 24px; padding: 11px 16px; min-height: 48px; max-height: 140px; }
.skriv textarea::placeholder { color: var(--dempet); opacity: 1; }
.send { flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--pigment); color: var(--pa-pigment); display: grid; place-items: center; transition: transform var(--rask) var(--ease), opacity var(--rask); }
.send:active { transform: scale(.92); }
.send:disabled { opacity: .4; cursor: default; }
.send svg { width: 22px; height: 22px; }
/* Fokusringen skal ikke skjules bak skrivefeltet. */
.meldinger :focus-visible { scroll-margin-bottom: 96px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .inn { animation: tone 160ms linear !important; }
  .skriver i { animation: none !important; opacity: .6; }
  .blom { display: none; }
}
@keyframes tone { from { opacity: 0; } }