:root {
  --bakgrund: #f6f3ee;
  --papper: #fffdf9;
  --text: #2a2622;
  --dampad: #6f675f;
  --linje: #e2dbd1;
  --accent: #8a2d2d;
  --accent-ljus: #f3e4e4;
  --tagg: #e9e3d9;
  font-size: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--text);
  background: var(--bakgrund);
  line-height: 1.5;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-weight: normal; line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .06em; color: var(--dampad); border-bottom: 1px solid var(--linje); padding-bottom: .25rem; margin-top: 1.5rem; }
h3 { font-size: 1rem; color: var(--dampad); margin-top: 1rem; }
small { color: var(--dampad); }

.topp {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center;
  padding: .75rem 1rem; background: var(--papper); border-bottom: 1px solid var(--linje);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.topp .logo { font-family: Georgia, serif; font-size: 1.3rem; color: var(--text); }
.topp .sok { display: flex; gap: .4rem; flex: 1 1 14rem; max-width: 28rem; }
.topp .sok input { flex: 1; padding: .45rem .6rem; border: 1px solid var(--linje); border-radius: 4px; font-size: 1rem; min-width: 0; }
.topp .meny { margin-left: auto; }
button, .knapp {
  font: inherit; padding: .45rem .9rem; border: 1px solid var(--accent); background: var(--accent); color: #fff;
  border-radius: 4px; cursor: pointer;
}
button.sekundar, .knapp.sekundar { background: transparent; color: var(--accent); }
button:disabled { opacity: .5; cursor: default; }

main { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.kort { background: var(--papper); border: 1px solid var(--linje); border-radius: 6px; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }

.ansedel { background: var(--papper); border: 1px solid var(--linje); border-radius: 6px; padding: 1.5rem; margin-bottom: 1.5rem; }
.ansedel-huvud .under { margin: 0; color: var(--dampad); display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.ansedel-huvud .id { margin-left: auto; font-family: monospace; font-size: .85rem; }
.namnvarianter { margin: .3rem 0 0; color: var(--dampad); display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.efternamn { font-weight: bold; }
.ansedel-kropp { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 1.5rem; margin-top: 1rem; }
.ansedel-karta { position: sticky; top: 1rem; align-self: start; }
.karta { height: 420px; border: 1px solid var(--linje); border-radius: 6px; background: #eee; }
.tom-karta { display: flex; align-items: center; justify-content: center; color: var(--dampad); font-style: italic; padding: 1rem; text-align: center; }
.kartnot { font-size: .85rem; color: var(--dampad); margin: .4rem 0 0; }
@media (max-width: 820px) {
  .ansedel-kropp { grid-template-columns: 1fr; }
  .ansedel-karta { position: static; order: -1; }
  .karta { height: 300px; }
}

.block { margin-bottom: .5rem; }
.familj + .familj { margin-top: .75rem; }
dl.relationer { display: grid; grid-template-columns: max-content 1fr; gap: .15rem 1rem; margin: .25rem 0; }
dl.relationer dt { color: var(--dampad); }
dl.relationer dd { margin: 0; }
.ar { color: var(--dampad); font-size: .9em; white-space: nowrap; }
.okand { color: var(--dampad); font-style: italic; }
.personlank.levande::after { content: " ·"; color: var(--dampad); }
.tagg { display: inline-block; background: var(--tagg); color: var(--dampad); font-size: .75rem; padding: .05rem .45rem; border-radius: 3px; vertical-align: middle; font-family: system-ui, sans-serif; }
.tomt { color: var(--dampad); font-style: italic; margin: .25rem 0; }
.notis { background: var(--accent-ljus); padding: .5rem .75rem; border-radius: 4px; color: var(--accent); }
.not { white-space: normal; color: #4a443e; font-size: .95rem; margin: .25rem 0 .5rem; padding-left: .75rem; border-left: 2px solid var(--linje); }
.detalj { color: var(--dampad); margin-left: .4rem; }
.detalj::before { content: "· "; }
ul.enkel { margin: .25rem 0; padding-left: 1.2rem; }

table.livslinje { width: 100%; border-collapse: collapse; margin-top: .25rem; }
table.livslinje td { vertical-align: top; padding: .35rem .5rem .35rem 0; border-bottom: 1px solid var(--linje); }
table.livslinje td.datum { white-space: nowrap; width: 9rem; color: var(--dampad); }
table.livslinje td.plats { width: 30%; }
@media (max-width: 600px) {
  table.livslinje td.datum { width: auto; white-space: normal; }
  table.livslinje tr { display: grid; grid-template-columns: 1fr; }
  table.livslinje td { border: 0; padding: .1rem 0; }
  table.livslinje tr { border-bottom: 1px solid var(--linje); padding: .4rem 0; }
}
sup.fotnot { font-size: .7em; margin-left: .15rem; }
sup.fotnot a { color: var(--dampad); }
.kallor ol { padding-left: 1.4rem; font-size: .9rem; color: #4a443e; }
.kallor li:target { background: var(--accent-ljus); }
.kallor-rad { font-size: .85rem; color: var(--dampad); margin: .2rem 0; }
.andrad { font-size: .8rem; color: var(--dampad); margin-top: 1.5rem; }

.markor { background: var(--accent); color: #fff; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); text-align: center; font: bold 12px/22px system-ui, sans-serif; }
.markor.ungefarlig { background: #b7b0a7; color: #fff; border-style: dashed; }

.bokstaver { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0 1rem; font-family: system-ui, sans-serif; }
.bokstaver a { display: inline-block; min-width: 2rem; text-align: center; padding: .2rem .4rem; border: 1px solid var(--linje); border-radius: 4px; background: #fff; }
.bokstaver a.aktiv { background: var(--accent); color: #fff; border-color: var(--accent); }
table.namnlista { width: 100%; border-collapse: collapse; }
table.namnlista th { text-align: left; font-weight: normal; color: var(--dampad); border-bottom: 1px solid var(--linje); padding: .3rem .5rem .3rem 0; }
table.namnlista td { padding: .3rem .5rem .3rem 0; border-bottom: 1px solid var(--linje); vertical-align: top; }
.antal { color: var(--dampad); margin: 0 0 .5rem; }

.fot { max-width: 1200px; margin: 0 auto; padding: 1rem; color: var(--dampad); font-size: .85rem; font-family: system-ui, sans-serif; }
.fot .agare { display: block; color: var(--accent); }

/* Admin */
.admin form { margin: .75rem 0 1.25rem; }
.admin label { display: block; margin: .5rem 0 .2rem; color: var(--dampad); }
.admin input[type=text], .admin input[type=password], .admin input[type=number], .admin input[type=file], .admin select {
  font: inherit; padding: .4rem .5rem; border: 1px solid var(--linje); border-radius: 4px; max-width: 100%;
}
.admin .rad { display: flex; gap: .5rem; align-items: end; flex-wrap: wrap; }
.admin table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.admin th, .admin td { text-align: left; padding: .3rem .5rem .3rem 0; border-bottom: 1px solid var(--linje); vertical-align: top; }
.admin th { font-weight: normal; color: var(--dampad); }
.status-ok { color: #2d6a2d; }
.status-approx { color: #a0680b; }
.status-miss { color: var(--accent); }
.status-none { color: var(--dampad); }
.status-manual { color: #2d4f8a; }
.fel { background: #fbe9e7; color: #8a2d2d; padding: .6rem .8rem; border-radius: 4px; }
.ok { background: #e6f2e6; color: #2d6a2d; padding: .6rem .8rem; border-radius: 4px; }
.progress { height: 1rem; background: var(--tagg); border-radius: 4px; overflow: hidden; margin: .5rem 0; }
.progress > div { height: 100%; background: var(--accent); width: 0; transition: width .3s; }
.logg { font: .85rem/1.4 monospace; max-height: 20rem; overflow: auto; background: #fff; border: 1px solid var(--linje); padding: .5rem; }
.filter { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .5rem 0 1rem; font-family: system-ui, sans-serif; font-size: .9rem; }
.filter a.aktiv { font-weight: bold; }

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .topp, .fot, .bokstaver, .namnlista-intro, .ansedel-karta, .kartnot, .meny, .sok { display: none !important; }
  main { max-width: none; padding: 0; }
  .ansedel { border: 0; padding: 0; page-break-after: always; }
  .ansedel-kropp { grid-template-columns: 1fr; }
  a { color: #000; }
  .personlank::after { content: " (" attr(href) ")"; display: none; }
  .not { border-left-color: #999; }
  h2 { color: #000; border-color: #000; }
  @page { size: A4; margin: 18mm; }
}