/* Lesarkontoen: same drakt som Tips oss (modules/tips/public/tips.css), med
   avisa sine fargar frå profilen (--brand, --bg, --text i sida). Kvitt ark,
   tittel med kort strek i avisfargen og firkanta felt. Spalta er 720 px
   (lesespalta i husstandarden): kontoen er eitt skjema og ein tekst. */
:root {
  color-scheme: light;
  --brand: #800b09; --bg: #f7f3e9; --text: #1a1a1a;
  --brand-dark: color-mix(in srgb, var(--brand) 74%, #000);
  --surface: #fff; --muted: #6b645c; --border: #e3ddd4; --felt: #cfc8bd;
  --danger: #b3261e; --ok: #1f6b3f; --merkt: color-mix(in srgb, var(--brand) 6%, #fff);
  --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --side-gutter: 16px;
  --tittel: "Lato", sans-serif; --brod: "Lato", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
body { background: var(--bg); color: var(--text); font: 16px/1.5 var(--brod); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--brand); }
fieldset { border: 0; padding: 0; min-width: 0; }
p, li, label, legend, dd, dt, summary, .konto-hint { text-wrap: pretty; }
h1, h2 { text-wrap: balance; }
.konto-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.konto-topp, .konto-shell, .konto-fot { width: 100%; max-width: calc(720px + 2 * var(--side-gutter)); margin: 0 auto; padding-left: var(--side-gutter); padding-right: var(--side-gutter); }
.konto-topp { padding-top: var(--space-5); padding-bottom: var(--space-4); }
.konto-heim { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; }
/* Logoen i éin dimensjon, aldri vriden, farga om eller animert (docs/brand.md). */
.konto-logo { height: 40px; width: auto; max-width: 240px; object-fit: contain; }
.konto-avisnamn { font-family: var(--tittel); font-weight: 900; font-size: 1.35rem; color: var(--brand); }
.konto-shell { flex: 1; }
.konto-fot { padding-top: var(--space-6); padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); font-size: 0.9rem; }
.konto-fot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }

.konto-ark { background: var(--surface); border: 1px solid var(--border); padding: var(--space-5) var(--space-4); }
@media (min-width: 560px) { .konto-ark { padding: var(--space-5); } }
@media (min-width: 760px) { .konto-ark { padding: var(--space-7); } }
.konto-tittel { font-family: var(--tittel); font-weight: 900; font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1.1; }
.konto-strek { position: relative; height: 1px; background: var(--border); margin: var(--space-3) 0 var(--space-5); }
.konto-strek::before { content: ''; position: absolute; left: 0; top: -1px; width: 46px; height: 3px; background: var(--brand); }
.konto-inngang { font-size: 1.05rem; color: var(--muted); max-width: 62ch; }
.konto-hint { font-size: 0.85rem; color: var(--muted); line-height: 1.45; }
.konto-melding { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--merkt); border-left: 4px solid var(--brand); }
.konto-inn { display: grid; gap: var(--space-3); margin-top: var(--space-6); max-width: 360px; }
.konto-merknad { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--merkt); border-left: 4px solid var(--brand); }
.konto-merknad svg { flex: none; width: 22px; height: 22px; color: var(--ok); margin-top: 1px; }

/* Knappane: fylt i avisfargen, sekundær med kant, fare i raudt. */
.konto-knapp {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: 900 0.95rem var(--tittel); letter-spacing: 0.02em; text-decoration: none; white-space: nowrap;
  min-height: 48px; padding: 0 var(--space-5); border: 1px solid var(--brand); background: var(--brand); color: #fff; cursor: pointer;
}
.konto-knapp svg { width: 20px; height: 20px; flex: none; }
.konto-knapp-sekundar { background: var(--surface); color: var(--text); border-color: var(--felt); font-weight: 700; }
.konto-knapp-fare { background: var(--surface); color: var(--danger); border-color: var(--danger); font-weight: 700; }
.konto-knapp-liten { min-height: 40px; padding: 0 var(--space-4); font-size: 0.9rem; }
/* Den vesle knappen er teikna 40 px høg, men lyttar på 48 px. */
.konto-knapp-liten::after { content: ''; position: absolute; inset: -4px 0; }
@media (hover: hover) {
  .konto-knapp:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
  .konto-knapp-sekundar:hover { background: var(--merkt); border-color: var(--brand); color: var(--text); }
  .konto-knapp-fare:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
}
.konto-knapp:focus-visible, .konto-brytar:focus-visible, .konto-meir summary:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.konto-knapp:disabled { opacity: .6; cursor: progress; }

.konto-hvem { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); color: var(--muted); }
.konto-hvem b { color: var(--text); }
.konto-hvem-knappar { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Eitt kort per formål, med brytaren i toppen av kortet. */
.konto-kort { border: 1px solid var(--border); padding: var(--space-4); }
@media (min-width: 560px) { .konto-kort { padding: var(--space-5); } }
.konto-kort + .konto-kort { margin-top: var(--space-4); }
.konto-korttopp { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 48px; }
.konto-korttopp h2 { font-family: var(--tittel); font-weight: 900; font-size: 1.2rem; line-height: 1.25; }
.konto-tekst { margin-top: var(--space-2); font-size: 0.95rem; color: var(--muted); max-width: 60ch; }

/* Brytaren: spor og knott, i avisfargen når han er på. */
.konto-brytar { position: relative; flex: none; padding: 0; border: 0; background: none; cursor: pointer; width: 52px; height: 32px; }
.konto-brytar::after { content: ''; position: absolute; inset: -8px -4px; }
.konto-brytar-spor { display: block; width: 52px; height: 32px; border-radius: 999px; background: var(--felt); transition: background-color .2s ease-out; }
.konto-brytar-knott { display: block; width: 26px; height: 26px; margin: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .2s ease-out; }
.konto-brytar[aria-checked="true"] .konto-brytar-spor { background: var(--brand); }
.konto-brytar[aria-checked="true"] .konto-brytar-knott { transform: translateX(20px); }
.konto-brytar:disabled { cursor: progress; opacity: .7; }

.konto-skjema { display: grid; gap: var(--space-5); margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.konto-to { display: grid; gap: var(--space-4); }
@media (min-width: 560px) { .konto-to { grid-template-columns: 1fr 1fr; } }
.konto-felt { display: grid; gap: 5px; align-content: start; min-width: 0; }
.konto-felt > label, .konto-felt > legend, .konto-etikett { font-family: var(--tittel); font-weight: 700; font-size: 0.9rem; padding: 0; }
.konto-felt > legend { margin-bottom: 5px; }
.konto-felt input[type="text"], .konto-felt select {
  font: inherit; width: 100%; min-width: 0; min-height: 48px; background: var(--surface); color: var(--text); border: 1px solid var(--felt); padding: 10px var(--space-3); border-radius: 0;
}
.konto-felt select { -webkit-appearance: none; appearance: none; padding-right: 40px;
  background: var(--surface) url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%236b645c%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 9 6 6 6-6%22/%3E%3C/svg%3E') no-repeat right 12px center / 18px; }
.konto-felt option { background: var(--surface); color: var(--text); }
.konto-felt :focus-visible { outline: 2px solid var(--brand); outline-offset: -1px; }
.konto-felt [aria-invalid="true"], .konto-felt-feil input, .konto-felt-feil select { border-color: var(--danger); outline: 1px solid var(--danger); }
.konto-feil { color: var(--danger); font-size: 0.9rem; padding: var(--space-3) var(--space-4); background: color-mix(in srgb, var(--danger) 7%, #fff); border-left: 3px solid var(--danger); }
.konto-kort > .konto-feil { margin-top: var(--space-3); }

/* Kjønn: fire korte val som delar kant. */
/* Éi kolonne på telefon, så «Vil ikkje seie» aldri bryt; fire i rad på breiare skjermar. */
.konto-val { display: grid; }
@media (min-width: 560px) { .konto-val { grid-template-columns: repeat(4, 1fr); } }
.konto-val label { display: flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-3); border: 1px solid var(--border); margin: 0 -1px -1px 0; cursor: pointer; font-size: 0.95rem; white-space: nowrap; }
.konto-val input { accent-color: var(--brand); width: 18px; height: 18px; flex: none; }
.konto-val label:has(:checked) { border-color: var(--brand); position: relative; z-index: 1; }
.konto-val label:has(:focus-visible) { outline: 2px solid var(--brand); outline-offset: -2px; }

.konto-meir { border-top: 1px solid var(--border); padding-top: var(--space-4); }
.konto-meir summary { display: flex; align-items: center; gap: var(--space-2); min-height: 48px; cursor: pointer; font-family: var(--tittel); font-weight: 700; list-style: none; }
.konto-meir summary::-webkit-details-marker { display: none; }
.konto-meir summary::before { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); transition: transform .2s ease-out; margin-right: 4px; }
.konto-meir[open] summary::before { transform: rotate(45deg); }
.konto-meir > .konto-to { margin-top: var(--space-3); }

.konto-posisjon { border-top: 1px solid var(--border); padding-top: var(--space-4); gap: var(--space-2); }
.konto-posisjon-verdi { font-size: 1rem; }
.konto-rad { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.konto-kort > .konto-rad { margin-top: var(--space-5); }
.konto-handling { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-4); }
.konto-lagra { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--muted); }
.konto-lagra svg { width: 18px; height: 18px; color: var(--ok); }

.konto-liste { display: grid; margin-top: var(--space-4); }
/* Namnet til venstre og verdien til høgre; er det ikkje plass, kjem verdien under. */
.konto-liste > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.konto-liste dt { color: var(--muted); }
.konto-liste dd { margin-left: auto; text-align: right; }

.konto-dialog { margin: auto; max-width: min(440px, calc(100vw - 2 * var(--side-gutter))); border: 0; padding: var(--space-5); background: var(--surface); color: var(--text); }
.konto-dialog::backdrop { background: rgb(0 0 0 / .45); }
.konto-dialog h2 { font-family: var(--tittel); font-weight: 900; font-size: 1.3rem; line-height: 1.2; }
.konto-dialog p { margin: var(--space-3) 0 var(--space-5); color: var(--muted); }

/* Personvernerklæringa: ein lesetekst. */
.konto-les .konto-bolk { margin-top: var(--space-6); }
.konto-les h2 { font-family: var(--tittel); font-weight: 900; font-size: 1.15rem; line-height: 1.3; }
.konto-les .konto-bolk p { margin-top: var(--space-2); max-width: 66ch; }
.konto-les > .konto-hint { margin-top: var(--space-6); }

@media (prefers-reduced-motion: reduce) {
  .konto-brytar-spor, .konto-brytar-knott, .konto-meir summary::before { transition: none; }
}