/* Madplan — én stilfil. Mobilen først: den bruges stående ved fryseren. */

:root {
  --bg: #fbfaf7;
  --kort: #ffffff;
  --tekst: #1c1b18;
  --daempet: #6b6862;
  --kant: #e2ded6;
  --accent: #17603a;
  --accent-blod: #e8f2ec;
  --advarsel: #8a4b12;
  --advarsel-blod: #fbf0e4;
  --fejl: #9c2c22;
  --fejl-blod: #fbeceb;
  --graf-streg: #17603a;
  --graf-fyld: #e8f2ec;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16171a;
    --kort: #1e2024;
    --tekst: #e9e7e2;
    --daempet: #9b978f;
    --kant: #313439;
    --accent: #6fc79a;
    --accent-blod: #1c2f26;
    --advarsel: #d99a5c;
    --advarsel-blod: #2d2419;
    --fejl: #e08880;
    --fejl-blod: #2f1e1d;
    --graf-streg: #6fc79a;
    --graf-fyld: #1c2f26;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main { max-width: 62rem; margin: 0 auto; padding: 1.25rem 1rem 4rem; }

/* ------------------------------------------------------------- topbjælke */
.top {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .7rem 1rem; background: var(--kort);
  border-bottom: 1px solid var(--kant); position: sticky; top: 0; z-index: 10;
}
.maerke { font-weight: 650; color: var(--tekst); text-decoration: none; letter-spacing: -.01em; }
.top nav { display: flex; gap: .35rem; flex: 1; flex-wrap: wrap; }
.top nav a {
  color: var(--daempet); text-decoration: none; padding: .3rem .6rem;
  border-radius: 999px; font-size: .93rem;
}
.top nav a:hover { background: var(--accent-blod); color: var(--accent); }
.ud { margin: 0; }

/* -------------------------------------------------------------- typografi */
h1 { font-size: 1.5rem; margin: 0 0 .2rem; letter-spacing: -.015em; }
h2 { font-size: 1.13rem; margin: 1.8rem 0 .6rem; letter-spacing: -.01em; }
h3 { font-size: 1rem; margin: 1.1rem 0 .4rem; }
.daempet { color: var(--daempet); font-size: .9rem; }
.lille { font-size: .85rem; }

/* ------------------------------------------------------------------ kort */
.kort {
  background: var(--kort); border: 1px solid var(--kant);
  border-radius: var(--radius); padding: 1rem; margin-bottom: .8rem;
}
.gitter { display: grid; gap: .8rem; }
@media (min-width: 40rem) { .gitter.to { grid-template-columns: 1fr 1fr; } }

/* -------------------------------------------------------------- formular */
label { display: block; font-size: .87rem; color: var(--daempet); margin-bottom: .25rem; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], textarea, select {
  width: 100%; padding: .55rem .7rem; font: inherit;
  background: var(--bg); color: var(--tekst);
  border: 1px solid var(--kant); border-radius: 8px;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}
textarea { min-height: 5.5rem; resize: vertical; }
.felt { margin-bottom: .8rem; }
.raekke { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.raekke > * { flex: 1 1 8rem; }

button, .knap {
  font: inherit; padding: .55rem 1rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  text-decoration: none; display: inline-block; text-align: center;
}
button.sekundaer, .knap.sekundaer {
  background: var(--kort); color: var(--tekst); border-color: var(--kant);
}
button.fare { background: var(--kort); color: var(--fejl); border-color: var(--kant); }
button.link {
  background: none; border: none; color: var(--daempet); padding: .3rem .4rem;
  font-size: .93rem;
}
button.link:hover { color: var(--accent); }

/* --------------------------------------------------------------- beskeder */
.fejl { background: var(--fejl-blod); color: var(--fejl); padding: .7rem .9rem;
        border-radius: 8px; margin: 0 0 1rem; }
.note { background: var(--advarsel-blod); color: var(--advarsel); padding: .7rem .9rem;
        border-radius: 8px; }
.info { background: var(--accent-blod); color: var(--accent); padding: .7rem .9rem;
        border-radius: 8px; }

/* ------------------------------------------------------------------ mærker */
.maerkat {
  display: inline-block; font-size: .74rem; padding: .12rem .45rem;
  border-radius: 999px; background: var(--accent-blod); color: var(--accent);
  white-space: nowrap;
}
.maerkat.advarsel { background: var(--advarsel-blod); color: var(--advarsel); }
.maerkat.neutral { background: var(--kant); color: var(--daempet); }

/* ------------------------------------------------------------------ dage */
.dag {
  display: flex; gap: .8rem; align-items: center; padding: .6rem 0;
  border-bottom: 1px solid var(--kant); flex-wrap: wrap;
}
.dag:last-child { border-bottom: none; }
.dag .dato { width: 5.5rem; color: var(--daempet); font-size: .87rem; flex: none; }
.dag .ret { flex: 1 1 12rem; font-weight: 520; }
.dag form { display: flex; gap: .4rem; flex: 1 1 14rem; }
.dag select { flex: 1; }

/* ---------------------------------------------------------- indkøbsliste */
.vare {
  display: flex; gap: .7rem; align-items: baseline; padding: .45rem 0;
  border-bottom: 1px solid var(--kant);
}
.vare:last-child { border-bottom: none; }
.vare input[type=checkbox] { width: 1.15rem; height: 1.15rem; flex: none; }
.vare .navn { flex: 1 1 12rem; }
.vare .pris { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vare.klaret .navn { text-decoration: line-through; color: var(--daempet); }
.haandtering { font-size: .82rem; color: var(--advarsel); margin: .15rem 0 0 1.9rem; }
.begrundelse { font-size: .82rem; color: var(--accent); margin: .15rem 0 0 1.9rem; }

/* ------------------------------------------------------------------ graf */
.graf { width: 100%; height: auto; background: var(--kort);
        border: 1px solid var(--kant); border-radius: var(--radius); }
.graf-tekst { fill: var(--daempet); font-size: 11px; font-family: inherit; }
.kurve { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: -1px; }

/* ----------------------------------------------------------------- lister */
.liste { list-style: none; padding: 0; margin: 0; }
.liste li { padding: .5rem 0; border-bottom: 1px solid var(--kant); }
.liste li:last-child { border-bottom: none; }
.liste a { color: var(--tekst); text-decoration: none; }
.liste a:hover { color: var(--accent); }

.tal { font-variant-numeric: tabular-nums; }
.stjerner { color: var(--advarsel); letter-spacing: -1px; }