/* ═══════════════════════════════════════════════════════
   GladPote — sidespecifikt
   Én sektion pr. side. Hold generelt genbrug i components.css.
   ═══════════════════════════════════════════════════════ */

/* ── Login, opret konto, glemt kode ────────────────── */

.auth {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  padding-block: var(--sp-6);
}

.auth-head {
  text-align: center;
  margin-bottom: var(--sp-5);
}

.auth-head h1 {
  font-size: 1.625rem;
  margin-bottom: var(--sp-2);
}

.auth-head p {
  color: var(--text-soft);
}

.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}

.auth-card .btn-block { margin-top: var(--sp-5); }

/* Linje under kortet: "Har du ikke en konto? Opret en." */
.auth-foot {
  margin-top: var(--sp-5);
  text-align: center;
  font-size: .9375rem;
  color: var(--text-soft);
}

.auth-foot + .auth-foot { margin-top: var(--sp-2); }

/* Lille note om at prøveperioden følger med. */
.auth-note {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: .875rem;
  color: var(--text-soft);
  text-align: center;
}

/* Adgangskodefelt med "vis"-knap ved siden af. */
.password-wrap {
  display: flex;
  gap: var(--sp-2);
}

.password-wrap input { flex: 1; }

/* ═══════════════════════════════════════════════════════
   Landingsside (index.php) — præfiks .lp-

   Siden er den eneste der bryder ud af .container, og den eneste
   der maler en flade helt ud til kanten. Derfor står alt her under
   sit eget præfiks: intet af det må sive ind på de indloggede sider.

   Skærmbillederne (.lp-phone, .lp-due, .lp-paper) bruger med vilje
   de faste farvetrin og ikke de semantiske. Et skærmbillede skifter
   ikke tema med siden det ligger på.
   ═══════════════════════════════════════════════════════ */

body.landing {
  /* Den mørke grønne findes kun her. Den er brandets grøn kogt ned,
     ikke en ny farve — derfor står den ikke i variables.css. */
  --lp-deep:        #0B3A22;
  --lp-on-deep:     #F2FBF5;
  --lp-on-deep-dim: #A7D9BC;   /* 8:1 mod --lp-deep */
  --lp-line:        rgb(255 255 255 / .18);
}

/* Heroen skal ligge klods op ad topbaren, og de fladet der går til
   kanten rager et par pixels ud over scrollbaren. `clip` fanger dem
   uden at lave .main om til et scroll-område (som `hidden` ville). */
body.landing .main {
  padding-top: 0;
  overflow-x: clip;
}

/* Ud til kanten, men med indholdet på samme lodrette linje som
   resten af siden. --container er 1180 inkl. sine 2×16 px padding. */
.lp-bleed {
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--sp-4), calc(50vw - var(--container) / 2 + var(--sp-4)));
}

/* ── Knapper på mørk grund ─────────────────────────── */

.btn-light {
  background: var(--white);
  color: var(--green-700);
  border-color: var(--white);
}

.btn-light:hover {
  background: var(--green-50);
  color: var(--green-700);
}

.btn-outline-light {
  background: transparent;
  color: var(--lp-on-deep);
  border-color: rgb(255 255 255 / .45);
}

.btn-outline-light:hover {
  background: rgb(255 255 255 / .12);
  color: var(--lp-on-deep);
}

.btn-light:focus-visible,
.btn-outline-light:focus-visible {
  outline-color: var(--white);
}

/* ── Hero ──────────────────────────────────────────── */

.lp-hero {
  padding-block: clamp(var(--sp-6), 5vw, 72px) clamp(var(--sp-7), 7vw, 104px);
  background:
    radial-gradient(120% 90% at 78% 12%, rgb(34 197 94 / .30), transparent 62%),
    var(--lp-deep);
  color: var(--lp-on-deep);
}

.lp-hero-grid {
  display: grid;
  gap: clamp(var(--sp-6), 5vw, 64px);
  align-items: center;
}

@media (min-width: 900px) {
  .lp-hero-grid { grid-template-columns: 1.05fr .95fr; }
}

.lp-hero h1 {
  font-size: clamp(2.25rem, 1.35rem + 3.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin-bottom: var(--sp-4);
}

.lp-lead {
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  color: var(--lp-on-deep-dim);
  margin-bottom: var(--sp-5);
}

.lp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.lp-actions-center { justify-content: center; }

/* På en smal skærm brydes knapperne alligevel. Så er det pænere at de
   fylder linjen ud end at stå med hver sin bredde under hinanden. */
@media (max-width: 479px) {
  .lp-actions .btn { flex: 1 1 100%; }
}

.lp-note {
  margin-top: var(--sp-4);
  font-size: .9375rem;
  color: var(--lp-on-deep-dim);
}

.lp-note a { color: var(--lp-on-deep); }

/* ── Telefonen i heroen ────────────────────────────── */

.lp-phone-wrap {
  display: flex;
  justify-content: center;
}

.lp-phone {
  width: min(100%, 310px);
  padding: 9px;
  background: #071F12;
  border: 1px solid var(--lp-line);
  border-radius: 34px;
  box-shadow: 0 28px 60px rgb(0 0 0 / .45), inset 0 1px 0 rgb(255 255 255 / .12);
}

.lp-screen {
  position: relative;
  /* Plads i bunden til kvitteringen. Uden den lægger den sig oven på
     den sidste linje i feedet og ligner et afklippet skærmbillede. */
  padding: var(--sp-4) var(--sp-4) 76px;
  background: var(--sand-50);
  color: var(--ink-900);
  border-radius: 26px;
  font-size: .875rem;
  line-height: 1.4;
}

.lp-screen-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--ink-100);
}

.lp-screen-head strong { display: block; font-size: 1rem; }
.lp-screen-head em     { font-style: normal; color: var(--ink-500); font-size: .75rem; }

.lp-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  background: var(--green-100);
  border-radius: var(--radius-pill);
  font-size: 1.125rem;
}

.lp-screen-label {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: .6875rem;
  font-weight: 700;
  color: var(--ink-500);
}

/* Quick-baren. Samme form som den rigtige, bare uden funktion. */
.lp-qbar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}

.lp-qb {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3);
  background: var(--white);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .8125rem;
  color: var(--ink-900);
}

.lp-qb b { font-size: 1.125rem; font-weight: 400; }
.lp-qb i { font-style: normal; font-weight: 400; color: var(--ink-500); font-size: .75rem; }

/* Knappen der lige er trykket på. */
.lp-qb-tap {
  background: var(--green-500);
  border-color: var(--green-500);
  color: var(--white);
  animation: lp-tap 1.4s cubic-bezier(.4, 0, .2, 1) 1;
}

.lp-qb-tap i { color: rgb(255 255 255 / .78); }

@keyframes lp-tap {
  0%, 55% { transform: none; }
  70%     { transform: scale(.93); }
  100%    { transform: none; }
}

.lp-feed {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-feed li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--white);
  border-radius: var(--radius-sm);
  font-size: .8125rem;
}

.lp-feed time { margin-left: auto; color: var(--ink-500); font-size: .75rem; }

/* Kvitteringen med fortryd — pointen med hele skærmbilledet. */
.lp-toast {
  position: absolute;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--ink-900);
  color: var(--ink-100);
  border-radius: var(--radius-sm);
  font-size: .8125rem;
  box-shadow: 0 8px 20px rgb(0 0 0 / .28);
  animation: lp-toast-in 480ms cubic-bezier(.16, 1, .3, 1) 1.1s both;
}

.lp-toast b { color: var(--green-100); }

@keyframes lp-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-qb-tap { animation: none; }
  .lp-toast  { animation: none; opacity: 1; transform: none; }
}

/* ── Sektioner ─────────────────────────────────────── */

.lp-section { padding-block: clamp(var(--sp-7), 7vw, 96px); }
.lp-section-tight { padding-block: clamp(var(--sp-6), 5vw, 64px); }
.lp-section + .lp-section { border-top: 1px solid var(--border); }

.lp-split {
  display: grid;
  gap: clamp(var(--sp-5), 4vw, 56px);
  align-items: center;
}

@media (min-width: 900px) {
  .lp-split { grid-template-columns: 1fr 1fr; }
  /* Skiftevis tekst til venstre og højre, så siden får en rytme. */
  .lp-split-flip .lp-copy { order: 2; }
}

.lp-copy h2 {
  font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.375rem);
  letter-spacing: -0.025em;
  margin-bottom: var(--sp-3);
}

.lp-copy p {
  max-width: 38rem;
  color: var(--text-soft);
  font-size: 1.0625rem;
}

.lp-copy p + p { margin-top: var(--sp-3); }

.lp-copy-wide { margin-bottom: var(--sp-5); }

.lp-fine {
  font-size: .875rem;
  color: var(--text-soft);
}

.lp-fine-center { margin-top: var(--sp-4); text-align: center; }

.lp-kicker {
  margin: clamp(var(--sp-6), 5vw, 56px) 0 var(--sp-3);
  font-weight: 600;
  color: var(--text-soft);
}

/* Plinten under et skærmbillede, så det ikke svæver. */
.lp-shot {
  padding: clamp(var(--sp-4), 3vw, var(--sp-6));
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.lp-qbar-wide { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }

.lp-qb-add {
  background: transparent;
  border-style: dashed;
  color: var(--ink-500);
}

/* ── Kategorierne som pastiller ────────────────────── */

.lp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-pills li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: .9375rem;
  font-weight: 500;
}

/* ── Forfaldslisten ────────────────────────────────── */

.lp-due {
  background: var(--white);
  border-radius: var(--radius);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
  color: var(--ink-900);
}

.lp-due-head {
  font-size: .6875rem;
  font-weight: 700;
  color: var(--ink-500);
  margin-bottom: var(--sp-3);
}

.lp-due-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--ink-100);
}

.lp-due-row:first-of-type { border-top: 0; }

.lp-due-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  background: var(--green-50);
  border-radius: var(--radius-pill);
}

.lp-due-body { flex: 1; min-width: 0; }
.lp-due-body strong { display: block; font-size: .9375rem; }
.lp-due-body em     { font-style: normal; font-size: .8125rem; color: var(--ink-500); }

.lp-due-cta {
  flex: none;
  padding: var(--sp-2) var(--sp-3);
  background: var(--green-500);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-size: .75rem;
  font-weight: 600;
}

.lp-due-flag {
  flex: none;
  padding: var(--sp-1) var(--sp-3);
  background: #FEF2F2;
  color: #B91C1C;
  border-radius: var(--radius-pill);
  font-size: .75rem;
  font-weight: 700;
}

.is-late .lp-due-icon { background: #FEF2F2; }

/* ── Rapporten ─────────────────────────────────────── */

.lp-paper {
  background: var(--white);
  color: var(--ink-900);
  border-radius: var(--radius-sm);
  padding: clamp(var(--sp-4), 3vw, var(--sp-5));
  box-shadow: var(--shadow);
  font-size: .875rem;
}

.lp-paper-head {
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 2px solid var(--ink-900);
}

.lp-paper-head strong { display: block; font-size: 1.125rem; }
.lp-paper-head em     { font-style: normal; font-size: .75rem; color: var(--ink-500); }

.lp-paper-title {
  margin-top: var(--sp-4);
  font-size: .6875rem;
  font-weight: 700;
  color: var(--ink-500);
}

.lp-paper-list {
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
}

.lp-paper-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px dotted var(--ink-300);
}

.lp-paper-list b { white-space: nowrap; }
.lp-paper-note   { margin-top: var(--sp-1); }

/* ── Husstanden ────────────────────────────────────── */

.lp-rows {
  display: grid;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .lp-rows { grid-template-columns: repeat(3, 1fr); }
}

.lp-rows li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--border);
}

.lp-rows-icon {
  grid-row: span 2;
  font-size: 1.5rem;
}

.lp-rows strong { font-size: 1.0625rem; }
.lp-rows .text-soft { font-size: .9375rem; }

/* ── Priser ────────────────────────────────────────── */

.lp-plans {
  display: grid;
  gap: var(--sp-4);
  align-items: start;
}

@media (min-width: 800px) {
  .lp-plans { grid-template-columns: 1fr 1.08fr; }
}

.lp-plan {
  display: flex;
  flex-direction: column;
  padding: clamp(var(--sp-5), 3vw, var(--sp-6));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.lp-plan-name {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: 700;
  font-size: 1.0625rem;
}

.lp-plan-price {
  margin-top: var(--sp-2);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.lp-plan-price em {
  font-style: normal;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}

.lp-plan-sub {
  color: var(--text-soft);
  font-size: .9375rem;
}

.lp-plan-list {
  margin: var(--sp-5) 0;
  padding: 0;
  list-style: none;
  flex: 1;
}

.lp-plan-list li {
  position: relative;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
}

.lp-plan-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--primary);
}

/* Pro-kortet er det anbefalede valg, og det siger farven. */
.lp-plan-pro {
  background: var(--lp-deep);
  border-color: var(--lp-deep);
  color: var(--lp-on-deep);
  box-shadow: var(--shadow-lg);
}

.lp-plan-pro .lp-plan-sub { color: var(--lp-on-deep-dim); }
.lp-plan-pro .lp-plan-list li::before { color: var(--green-100); }

.lp-plan-tag {
  padding: var(--sp-1) var(--sp-3);
  background: var(--green-100);
  color: var(--green-700);
  border-radius: var(--radius-pill);
  font-size: .75rem;
  font-weight: 700;
}

/* ── Spørgsmål ─────────────────────────────────────── */

.lp-faq {
  max-width: 46rem;
  border-top: 1px solid var(--border);
}

.lp-faq details { border-bottom: 1px solid var(--border); }

.lp-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  font-weight: 600;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
}

.lp-faq summary::-webkit-details-marker { display: none; }

.lp-faq summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--text-soft);
  border-bottom: 2px solid var(--text-soft);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition);
}

.lp-faq details[open] summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.lp-faq p {
  padding: 0 var(--sp-6) var(--sp-4) 0;
  max-width: 42rem;
  color: var(--text-soft);
}

/* ── Sidste kald ───────────────────────────────────── */

.lp-cta {
  padding-block: clamp(var(--sp-7), 8vw, 112px);
  text-align: center;
  background:
    radial-gradient(90% 120% at 50% 110%, rgb(34 197 94 / .30), transparent 60%),
    var(--lp-deep);
  color: var(--lp-on-deep);
}

.lp-cta h2 {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-3);
}

.lp-cta > p {
  max-width: 34rem;
  margin: 0 auto var(--sp-5);
  color: var(--lp-on-deep-dim);
  font-size: 1.0625rem;
}

/* ── Vilkår og privatliv ───────────────────────────── */

.legal {
  max-width: 44rem;
  margin-inline: auto;
  padding-block: var(--sp-5);
}

.legal h1 { margin-bottom: var(--sp-3); }
.legal h2 { font-size: 1.25rem; margin: var(--sp-6) 0 var(--sp-2); }
.legal h3 { font-size: 1rem; margin: var(--sp-4) 0 var(--sp-2); }
.legal p  { margin-bottom: var(--sp-3); }

.legal ul {
  margin: 0 0 var(--sp-4) var(--sp-5);
  color: var(--text-soft);
}

.legal li { margin-bottom: var(--sp-2); }

.legal-lead {
  font-size: 1.0625rem;
  color: var(--text-soft);
}

/* Det man skal læse, også når man skimmer. Hel ramme frem for en
   farvet kant i siden — den skal skille sig ud, ikke råbe. */
.legal-flag {
  padding: var(--sp-4);
  border: 1px solid var(--warning);
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
}

.legal-contact {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}

.legal-updated {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: .875rem;
  color: var(--text-soft);
}

/* ── Salgsside for Pro (opgrader.php) ──────────────── */

.upgrade {
  max-width: 56rem;
  margin-inline: auto;
}

.upgrade-hero {
  text-align: center;
  margin-bottom: var(--sp-6);
}

.upgrade-hero p {
  max-width: 34rem;
  margin: var(--sp-3) auto 0;
  color: var(--text-soft);
  font-size: 1.0625rem;
}

.upgrade-section {
  margin-top: var(--sp-7);
}

.upgrade-section > h2 {
  margin-bottom: var(--sp-4);
}

/* Priskort */

.price-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
  margin-bottom: var(--sp-4);
}

.price-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.price-card h2 { margin: 0; font-size: 1.25rem; }

.price-card > p { margin: 0; }

.price-card .btn,
.price-current {
  margin-top: auto;
}

/* Det anbefalede kort skiller sig ud med lidt mere vægt, ikke med farve. */
.price-card-featured {
  border-color: var(--primary);
  box-shadow: var(--shadow);
}

.price-card-featured .badge { align-self: flex-start; }

.price {
  font-size: 1.0625rem;
  color: var(--text-soft);
}

.price-amount {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

.price-note {
  font-size: .875rem;
  color: var(--text-soft);
}

.price-current {
  padding-top: var(--sp-3);
  font-weight: 600;
  color: var(--primary-dark);
}

/* Sammenligningstabel */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.compare {
  min-width: 32rem;
  font-size: .9375rem;
}

.compare th,
.compare td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.compare thead th {
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-soft);
}

.compare td { text-align: center; width: 8rem; }

.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }

.compare-group th {
  background: var(--surface-alt);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-soft);
}

.cell-yes { color: var(--primary-dark); font-weight: 700; }
.cell-no  { color: var(--text-soft); }

/* Spørgsmål og svar */

.faq {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: var(--sp-2);
}

.faq summary {
  padding: var(--sp-3) var(--sp-4);
  font-weight: 600;
  cursor: pointer;
}

.faq summary::marker { color: var(--text-soft); }

.faq p {
  padding: 0 var(--sp-4) var(--sp-4);
  color: var(--text-soft);
  margin: 0;
}

@media (min-width: 720px) {
  .price-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Låst funktion (render_upgrade_page) ───────────── */

.locked {
  max-width: 32rem;
  margin: var(--sp-7) auto;
  text-align: center;
}

.locked h1 {
  margin: var(--sp-3) 0 var(--sp-3);
  font-size: 1.75rem;
}

.locked-text {
  color: var(--text-soft);
  margin-bottom: var(--sp-5);
}

.locked-note {
  margin-top: var(--sp-5);
  font-size: .875rem;
  color: var(--text-soft);
}

/* ── Stopklods nederst i afkortet historik ─────────── */

.history-wall {
  padding: var(--sp-5);
  margin-top: var(--sp-4);
  text-align: center;
  background: var(--surface-alt);
  border-radius: var(--radius);
}

.history-wall p { margin-bottom: var(--sp-2); }
.history-wall .btn { margin-top: var(--sp-3); }

/* ── Dyr: liste og kort (dyr.php) ──────────────────── */

.pet-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition);
}

.pet-card:hover { box-shadow: var(--shadow); }

.pet-card-paused { opacity: .72; }

.pet-card-main {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  color: inherit;
  text-decoration: none;
}

.pet-card-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pet-card-text strong { font-size: 1.125rem; }

.pet-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
}

/* Rediger-knappen skubbes ud til højre. */
.pet-card-foot > :last-child { margin-left: auto; }

.pet-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  font-size: 1.75rem;
  line-height: 1;
}

.pet-avatar-lg {
  width: 72px;
  height: 72px;
  font-size: 2.5rem;
}

/* Er der et profilbillede, fylder det hele cirklen ud. */
.pet-avatar { overflow: hidden; }

.pet-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Dyr: profil (dyr-profil.php) ──────────────────── */

.pet-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.pet-head h1 { margin-bottom: var(--sp-1); }
.pet-head p  { color: var(--text-soft); }

.facts {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
}

.fact {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--sp-3);
  align-items: baseline;
}

.fact dt {
  color: var(--text-soft);
  font-size: .9375rem;
}

.fact dd {
  margin: 0;
  font-weight: 500;
}

.card h3 {
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-1);
  font-size: .9375rem;
  color: var(--text-soft);
}

.card h3:first-of-type { margin-top: 0; }

/* Sletning står for sig selv, nederst, uden at råbe. */
.danger-zone {
  margin-top: var(--sp-6);
}

.danger-zone h2 {
  font-size: 1.125rem;
  margin-bottom: var(--sp-2);
}

.danger-zone p {
  color: var(--text-soft);
  margin-bottom: var(--sp-4);
  max-width: 44rem;
}

/* ── Formularen til et dyr ─────────────────────────── */

.pet-form {
  max-width: 44rem;
}

.pet-form fieldset { margin-bottom: var(--sp-5); }

.pet-form .field-hint {
  margin-bottom: var(--sp-4);
}

@media (max-width: 560px) {
  .fact { grid-template-columns: 1fr; gap: 0; }
  .fact dt { font-size: .8125rem; }
}

/* ── Quick-log (hverdag.php) ───────────────────────── */

.quick-card { margin-bottom: var(--sp-5); }

.quick-bar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: var(--sp-3);
}

/* Samme form som fliserne på landingssiden (.lp-qb): ikonet øverst,
   etiketten venstrestillet under, mængden nedenunder i småt. Venstre
   kant giver øjet én linje at følge ned gennem baren, hvor centreret
   tekst får hver flise til at ligge for sig selv.

   Ændres den her, skal .lp-qb i landing-blokken følge med — det er
   den samme knap, brugeren møder to steder. */
.quick-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 76px;
  padding: var(--sp-3);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  /* Andet og Tilpas er <a>, ikke <button>. Uden den her får de
     understreget etiket og ligner links midt i en række knapper. */
  text-decoration: none;
  transition: border-color var(--transition), transform var(--transition),
              background var(--transition);
}

.quick-btn:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--text);
}

.quick-btn:active { transform: translateY(1px); }

.quick-btn[aria-busy="true"] { opacity: .6; }

.quick-icon { font-size: 1.25rem; line-height: 1.2; }

.quick-label {
  font-weight: 600;
  font-size: .8125rem;
  overflow-wrap: anywhere;
}

.quick-sub { font-size: .75rem; color: var(--text-soft); }

.quick-btn-more {
  border-style: dashed;
  color: var(--text-soft);
}

.quick-btn-more:hover { color: var(--text); }

/* Tilpas-knappen skal kunne ses, men aldrig konkurrere med logningen. */
.quick-btn-edit .quick-icon { font-size: 1.125rem; }

/* Én linje pr. plads i baren. Rækkefølgen i formularen er rækkefølgen
   på knapperne — derfor ingen træk-og-slip, og derfor virker det uden JS. */
.quick-edit {
  list-style: none;
  margin: var(--sp-4) 0;
  padding: 0;
  counter-reset: quick-slot;
}

.quick-edit-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 7rem;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
}

.quick-edit-row:last-child { border-bottom: 0; }

.quick-edit-row .field { margin-bottom: 0; }

@media (max-width: 560px) {
  .quick-edit-row {
    grid-template-columns: 1fr 7rem;
    counter-increment: quick-slot;
  }
  /* Kategorien fylder hele bredden, tekst og mængde deler linjen under. */
  .quick-edit-row .field:first-child { grid-column: 1 / -1; }
}

/* ── Forsiden ──────────────────────────────────────── */

.dash { align-items: start; }

/* Dagens tal — en vandret stribe med små tællere. */
.today-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

/* Rækken står i HTML'en også når der ikke er logget noget i dag,
   så JS'en kan lægge det første tal ind. Tom fylder den ingenting. */
.today-strip:empty {
  display: none;
}

.today-chip {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: .875rem;
}

.today-icon { font-size: 1rem; }
.today-count { font-weight: 700; }
.today-label { color: var(--text-soft); }

/* Næste aftale */

.next-appointment {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}

.next-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  font-size: 1.375rem;
}

.next-when {
  font-weight: 700;
  font-size: 1.0625rem;
}

.next-title { color: var(--text-soft); }

/* Vægt-widget */

.weight-widget {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}

.weight-value {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.weight-unit {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-soft);
}

.weight-diff {
  margin-top: var(--sp-2);
  font-size: .875rem;
  font-weight: 600;
}

/* Op og ned er hverken godt eller skidt i sig selv — derfor
   samme neutrale farve, kun pilen skiller dem ad. */
.weight-diff.is-up,
.weight-diff.is-down { color: var(--text-soft); }

.sparkline {
  flex: none;
  width: 9rem;
  height: 3rem;
  overflow: visible;
}

.sparkline-line {
  fill: none;
  stroke: var(--primary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.sparkline-area {
  fill: var(--primary);
  opacity: .12;
  stroke: none;
}

/* ── Tidslinje ─────────────────────────────────────── */

.timeline-wrap { margin-top: var(--sp-5); }

.day-heading {
  margin: var(--sp-6) 0 var(--sp-3);
  font-size: 1rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.day-heading:first-child { margin-top: 0; }

.day-empty { margin-bottom: var(--sp-4); }

.timeline {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
}

.timeline:empty { display: none; }

/* Tidslinjen på forsiden står inde i et kort og skal ikke have sin egen
   ramme. Skal stå EFTER .timeline — samme specificitet, sidste vinder. */
.timeline-flat {
  border: 0;
  border-radius: 0;
  background: transparent;
  gap: 0;
}

.timeline-flat .event {
  padding-inline: 0;
  border-bottom: 1px solid var(--border);
}

.timeline-flat .event:last-child { border-bottom: 0; }

.event {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
}

.event-icon {
  flex: none;
  width: 2rem;
  font-size: 1.25rem;
  line-height: 1.4;
  text-align: center;
}

.event-body { flex: 1; min-width: 0; }

.event-summary { font-weight: 500; }

.event-note {
  color: var(--text-soft);
  font-size: .9375rem;
  overflow-wrap: anywhere;
}

.event-time {
  flex: none;
  color: var(--text-soft);
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.event-delete { flex: none; }

/* Sletteknappen træder først frem når man er ved rækken. */
.event-delete .btn-icon {
  opacity: 0;
  min-height: 28px;
  width: 28px;
  font-size: 1.125rem;
}

.event:hover .event-delete .btn-icon,
.event-delete .btn-icon:focus-visible { opacity: 1; }

@media (hover: none) {
  .event-delete .btn-icon { opacity: .5; }
}

/* ── Logmodalens kategorivalg ──────────────────────── */

.cat-group {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-soft);
}

.cat-group:first-child { margin-top: 0; }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: var(--sp-2);
}

.cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-2);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.cat-btn:hover { border-color: var(--primary); background: var(--primary-soft); }

.cat-icon { font-size: 1.375rem; line-height: 1; }

/* ── Skala 1-5 (humør, alvorlighed) ────────────────── */

.label-like {
  font-weight: 600;
  font-size: .9375rem;
}

.scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-2);
}

.scale-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--sp-2) var(--sp-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  font-weight: 700;
  transition: border-color var(--transition), background var(--transition);
}

.scale-item input { position: absolute; opacity: 0; pointer-events: none; }

.scale-item small {
  font-size: .6875rem;
  font-weight: 400;
  color: var(--text-soft);
  line-height: 1.2;
}

.scale-item:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.scale-item:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── Felt med enhed bagved ─────────────────────────── */

.input-suffix {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.input-suffix input { flex: 1; }

.suffix {
  flex: none;
  color: var(--text-soft);
  font-size: .9375rem;
}

/* ── Sundhed (sundhed.php) ─────────────────────────── */

/* Seneste vægt til venstre, feltet til den nye vejning til højre. */
.health-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

/* Den tomme tilstand står side om side med feltet her, ikke midt i kortet. */
.empty-inline {
  padding: 0;
  text-align: left;
}

.empty-inline .empty-icon { margin-bottom: var(--sp-2); }

.weigh-form {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
}

.weigh-form .field { margin-bottom: 0; }
.weigh-form input { max-width: 7rem; }

/* Vægtkurven. Tegnes af PHP; charts.js lægger kun boblen ovenpå. */

.chart-wrap {
  position: relative;
  margin: 0 0 var(--sp-3);
}

.chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart-grid {
  stroke: var(--border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.chart-axis {
  fill: var(--text-soft);
  font-size: 11px;
  font-family: var(--font);
}

/* Racenormen ligger bag kurven — den er baggrund, ikke data. */
.chart-band {
  fill: var(--primary);
  opacity: .10;
}

.chart-area {
  fill: var(--primary);
  opacity: .12;
  stroke: none;
}

.chart-line {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.chart-point {
  fill: var(--surface);
  stroke: var(--primary);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}

.chart-point:hover,
.chart-point:focus-visible {
  fill: var(--primary);
  outline: none;
}

.chart-tip {
  position: absolute;
  z-index: 2;
  transform: translateX(-50%);
  padding: var(--sp-2) var(--sp-3);
  background: var(--inverse);
  color: var(--on-inverse);
  border-radius: var(--radius-sm);
  font-size: .8125rem;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow);
}

.chart-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.legend-band {
  width: 22px;
  height: 10px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
}

.chart-data {
  margin-top: var(--sp-2);
  font-size: .875rem;
}

.chart-data summary {
  cursor: pointer;
  color: var(--text-soft);
}

.chart-data .fact-list { margin-top: var(--sp-3); }

/* Liste med to kolonner: tekst til venstre, tal til højre. */
.fact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fact-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}

.fact-list li:last-child { border-bottom: 0; }

/* Teaser for en Pro-funktion inde i et kort. Aldrig en blokade. */
.feature-teaser {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
}

.feature-teaser p { margin-bottom: var(--sp-2); }
.feature-teaser .badge { margin-bottom: var(--sp-2); }

/* Forfaldsliste: vaccination, ormekur, loppemiddel. */

.due-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.due-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}

.due-item:last-child { border-bottom: 0; }

.due-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  font-size: 1.125rem;
}

.due-body { flex: 1; min-width: 0; }
.due-name { font-weight: 600; }

.due-when {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.due-status { font-weight: 700; font-size: .9375rem; }

.due-item.is-overdue .due-status { color: var(--danger); }
.due-item.is-overdue .due-icon   { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); }
.due-item.is-soon .due-status    { color: var(--warning); }
.due-item.is-soon .due-icon      { background: color-mix(in srgb, var(--warning) 16%, var(--surface)); }
.due-item.is-ok .due-status      { color: var(--text-soft); }

/* "Læg i kalenderen" står yderst — det er en handling, ikke en oplysning. */
.due-action {
  flex: none;
  display: flex;
  align-items: center;
  min-width: 8rem;
  justify-content: flex-end;
}

@media (max-width: 560px) {
  .due-item { flex-wrap: wrap; }
  .due-action { min-width: 0; width: 100%; justify-content: flex-start; }
}

/* ── Kalender (kalender.php) ───────────────────────── */

.month-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.month-head h2 {
  margin: 0;
  font-size: 1.25rem;
  min-width: 11rem;
  text-align: center;
}

.month-head h2::first-letter { text-transform: uppercase; }

.month-today { margin-left: auto; }

.month {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.month th {
  padding: var(--sp-2) var(--sp-1);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-soft);
  text-align: left;
}

.day {
  position: relative;
  height: 6.5rem;
  padding: var(--sp-1);
  border: 1px solid var(--border);
  vertical-align: top;
  overflow: hidden;
}

/* Dage fra nabomånederne er med, så gitteret er firkantet — men de
   skal ikke stjæle opmærksomhed. */
.day.is-outside { background: var(--surface-alt); }
.day.is-outside .day-number { color: var(--text-soft); }

.day.is-today { outline: 2px solid var(--primary); outline-offset: -2px; }
.day.is-today .day-number {
  background: var(--primary);
  color: var(--on-primary);
}

.day-number {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-bottom: 2px;
  border-radius: var(--radius-pill);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

a.day-number:hover { background: var(--primary-soft); color: var(--primary-dark); }

/* Hele dagen er klikbar, ikke kun tallet: linket dækker cellen med en
   usynlig flade. Aftalerne ligger ovenpå, så de stadig kan rammes. */
a.day-number::after {
  content: '';
  position: absolute;
  inset: 0;
}

.day:has(a.day-number) { cursor: pointer; }
.day:has(a.day-number):hover { background: var(--primary-soft); }

/* En aftale i gitteret. */
.chip {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  margin-bottom: 2px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--text);
  font-size: .75rem;
  line-height: 1.3;
  text-decoration: none;
}

.chip:hover { background: var(--primary-soft); color: var(--text); }

.chip-icon { flex: none; }

.chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip-time { font-variant-numeric: tabular-nums; font-weight: 600; }

.chip.is-cancelled { text-decoration: line-through; opacity: .6; }
.chip.is-done { background: var(--surface-alt); opacity: .8; }

.chip-more {
  display: block;
  padding-left: 4px;
  font-size: .6875rem;
  color: var(--text-soft);
}

/* Listen med kommende aftaler. */

.appointment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.appointment {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}

.appointment:last-child { border-bottom: 0; }

.appointment-body { flex: 1; min-width: 12rem; }

.appointment-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
}

.appointment-when {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.appointment-actions {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

/* Feedets adresse må gerne fylde — den skal kunne markeres. */
.feed-url code {
  display: block;
  padding: var(--sp-3);
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  font-size: .8125rem;
  overflow-wrap: anywhere;
}

/* På mobil er der ikke plads til titler i gitteret. Dagen viser en
   prik pr. aftale, og selve aftalerne står i listen nedenunder. */
@media (max-width: 640px) {
  .day { height: 3.75rem; padding: 2px; }
  .day-number { width: 22px; height: 22px; margin-inline: auto; }

  .chip {
    width: 8px;
    height: 8px;
    margin: 2px auto 0;
    padding: 0;
    border-radius: var(--radius-pill);
    background: var(--primary);
  }

  .chip-icon, .chip-text, .chip-more { display: none; }
  .month-head h2 { min-width: 0; flex: 1; font-size: 1.0625rem; }
  .appointment-when { align-items: flex-start; text-align: left; }
}

/* ── Billeder (dyr-profil.php) ─────────────────────── */

.photo-form {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding: var(--sp-4);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), background var(--transition);
}

.photo-form .field { margin-bottom: 0; }
.photo-form .btn { justify-self: start; }

/* Billeder trukket hen over formularen. */
.photo-form.is-dropping {
  border-color: var(--primary);
  background: var(--primary-soft);
}

/* Måned for måned, så galleriet læses som en tidslinje. */
.photo-month {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-3);
  font-size: .9375rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.photo-month:first-of-type { margin-top: 0; }
.photo-month span { text-transform: none; letter-spacing: 0; }

/* Kvadratiske felter der fylder bredden ud, uanset hvor mange der er. */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--sp-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.photo-grid:empty { display: none; }

.photo { position: relative; }

.photo-tile {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-alt);
}

.photo-tile img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  transition: transform var(--transition);
}

.photo-tile:hover img,
.photo-tile:focus-visible img { transform: scale(1.05); }

/* Billedteksten ligger på billedet, ikke under det — så står felterne
   lige høje uanset hvor lang teksten er. */
.photo-tile-text {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-4) var(--sp-2) var(--sp-2);
  background: linear-gradient(to top, rgb(17 24 39 / .75), transparent);
  color: #fff;
  font-size: .75rem;
  line-height: 1.35;
  overflow-wrap: anywhere;

  /* Højst to linjer. Resten står i lysbordet. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Profilbilledet får en ring, så man kan se hvilket et det er. */
.photo.is-avatar .photo-tile {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* Handlingerne ligger oven på billedet og træder frem når man er ved
   det. På touch, hvor der ikke findes hover, står de altid. */
.photo-actions {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  display: flex;
  gap: var(--sp-1);
}

.photo-action {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgb(17 24 39 / .55);
  color: #fff;
  font-size: .9375rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition);
}

.photo-action:hover { background: rgb(17 24 39 / .8); }

@media (hover: hover) {
  .photo-actions { opacity: 0; transition: opacity var(--transition); }

  .photo:hover .photo-actions,
  .photo:focus-within .photo-actions { opacity: 1; }
}

/* ── Lysbordet ─────────────────────────────────────── */

.lightbox {
  place-items: center;
  padding: var(--sp-4);
  background: rgb(17 24 39 / .92);
}

.lightbox-box {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  max-width: 72rem;
}

.lightbox-image {
  grid-column: 2;
  max-width: 100%;
  max-height: 82vh;
  margin: 0 auto;
  display: block;
  border-radius: var(--radius);
  background: rgb(255 255 255 / .06);
}

.lightbox-caption {
  grid-column: 1 / -1;
  margin-top: var(--sp-3);
  text-align: center;
  color: #fff;
  font-size: .875rem;
}

.lightbox-caption .text-soft { color: rgb(255 255 255 / .65); }
.lightbox-caption a { color: #fff; margin-left: var(--sp-2); }

.lightbox-nav,
.lightbox-close {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / .14);
  color: #fff;
  cursor: pointer;
  transition: background var(--transition);
}

.lightbox-nav { width: 44px; height: 44px; font-size: 1.75rem; line-height: 1; }

.lightbox-close {
  position: absolute;
  top: calc(var(--sp-4) * -1);
  right: 0;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  line-height: 1;
}

.lightbox-nav:hover,
.lightbox-close:hover { background: rgb(255 255 255 / .28); }

/* På telefonen er der ikke plads til pile ved siden af billedet —
   der swiper man i stedet. */
@media (max-width: 560px) {
  .lightbox-box { grid-template-columns: 1fr; }
  .lightbox-image { grid-column: 1; }
  .lightbox-nav { position: absolute; bottom: -3.5rem; }
  .lightbox-prev { left: 25%; }
  .lightbox-next { right: 25%; }
  .lightbox-caption { margin-bottom: 3.5rem; }
}

/* ── Idé-tavlen (ideer.php, admin-ideer.php) ───────── */

/* Et valgt filter i striben af tal. */
.today-chip.is-active {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.idea-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.idea {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
}

.idea:first-child { padding-top: 0; }
.idea:last-child { border-bottom: 0; }

.idea-body { flex: 1; min-width: 0; }
.idea-title { font-weight: 600; }

/* Stemmeknappen: pil og tal i én søjle, som man kender det. */
.vote-btn {
  flex: none;
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 3.25rem;
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-soft);
  font-size: .75rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition),
              background var(--transition);
}

.vote-btn:hover { border-color: var(--primary); color: var(--primary); }
.vote-btn.is-static { cursor: default; }

.vote-btn.is-voted {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.vote-count { font-size: 1rem; font-weight: 700; color: var(--text); }
.vote-btn.is-voted .vote-count { color: var(--primary-dark); }

/* Moderationens knapper: statusvælger og Gem på linje, Fjern ved siden af.
   Uden en bredde på select'en fylder den hele linjen — formularfelter er
   fuld bredde som standard — og knapperne bliver spredt ud over tre linjer. */
.idea-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.idea-tools form {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.idea-tools select {
  width: auto;
  min-width: 11rem;
  padding-block: var(--sp-2);
}

/* Status står yderst — det er svaret brugeren leder efter. */
.idea-status {
  flex: none;
  align-self: flex-start;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  color: var(--text-soft);
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}

.idea-status.is-planlagt  { background: var(--primary-soft); color: var(--primary-dark); }
.idea-status.is-overvejes { background: color-mix(in srgb, var(--info) 14%, var(--surface)); color: var(--info); }
.idea-status.is-lavet     { background: var(--primary); color: var(--on-primary); }
.idea-status.is-afvist    { text-decoration: line-through; }

@media (max-width: 560px) {
  .idea { flex-wrap: wrap; }
  .idea-status { order: -1; }
}

/* ── Tabeller (økonomi, rapport) ───────────────────── */

.table {
  font-size: .9375rem;
  margin-top: var(--sp-3);
}

.table th,
.table td {
  padding: var(--sp-3) var(--sp-2);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.table thead th {
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-soft);
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tfoot th, .table tfoot td { border-top: 2px solid var(--border); border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-compact th, .table-compact td { padding: var(--sp-2); }

/* Noten under en post står på sin egen linje, ikke som en hale. */
.table td .text-soft { display: block; }

/* ── Økonomi (oekonomi.php) ────────────────────────── */

/* Tolv søjler. Almindelige div'er — et årsoverblik behøver ikke SVG. */
.bars {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-1);
  align-items: end;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bar-item {
  display: grid;
  grid-template-rows: 8rem auto auto;
  gap: var(--sp-1);
  justify-items: center;
  text-align: center;
}

.bar-track {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.bar-fill {
  width: 100%;
  min-height: 2px;
  background: var(--primary);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.bar-label { font-size: .75rem; color: var(--text-soft); }

/* Beløbet under søjlen er for langt på tolv kolonner — det står i
   tabellen nedenfor og vises kun når der er plads. */
.bar-value { display: none; }

@media (min-width: 900px) {
  .bar-value {
    display: block;
    font-size: .6875rem;
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
  }
}

/* ── Rapport (rapport.php) ─────────────────────────── */

.report {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-6);
  margin-top: var(--sp-4);
}

.report-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 2px solid var(--border);
}

.report-head h2 { margin: 0; }
.report-meta { text-align: right; font-size: .8125rem; color: var(--text-soft); }

.report-section { margin-top: var(--sp-6); }
.report-section h3 { margin-bottom: var(--sp-2); }
.report-section h4 { margin: var(--sp-4) 0 var(--sp-2); }

/* Allergier og kroniske lidelser skal ses først. */
.report-flag {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border-left: 4px solid var(--warning);
  background: var(--surface-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.report-list { margin: var(--sp-2) 0 0 var(--sp-5); }
.report-list li { margin-bottom: var(--sp-2); }

.report-columns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin-top: var(--sp-3);
}

.report-foot {
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: .8125rem;
  color: var(--text-soft);
}

.facts-tight .fact { padding: var(--sp-2) 0; }

/* ── Deling (deling.php) ───────────────────────────── */

.share-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.share {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}

.share:last-child { border-bottom: 0; }

.share-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  font-size: 1.125rem;
}

.share-body { flex: 1; min-width: 0; }
.share-who { font-weight: 600; }

.share-status {
  flex: none;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--text-soft);
}

.share.is-active .share-status  { color: var(--primary); }
.share.is-pending .share-status { color: var(--warning); }
.share.is-expired .share-status { color: var(--danger); }

/* "Ret adgangen" ligger foldet sammen under navnet og fylder én linje
   indtil man har brug for den. <details> kan det selv — ingen JS.
   base.css slår overgangen fra ved prefers-reduced-motion. */
.share-edit { margin-top: var(--sp-2); }

.share-edit > summary {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  list-style: none;
}

.share-edit > summary::-webkit-details-marker { display: none; }
.share-edit > summary:hover { text-decoration: underline; }

.share-edit > summary::before {
  content: '›';
  display: inline-block;
  margin-right: var(--sp-1);
  transition: transform var(--transition);
}

.share-edit[open] > summary::before { transform: rotate(90deg); }

.share-edit > form {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
}

/* Invitationslinket skal kunne markeres og kopieres. */
.share-link code {
  display: block;
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  font-size: .75rem;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .share { flex-wrap: wrap; }
  .share-status { width: 100%; }
}

/* ── Historik (historik.php) ───────────────────────── */

/* Filtrene står på én linje på desktop og stables på mobil.
   Søgefeltet får mest plads — det er dét man bruger.

   Etiketterne står på linje foroven, ikke bundet af mod knappen. Ét af
   felterne har en hjælpetekst under sig, og bundes felterne af, løfter
   den teksten sit eget felt en linje op over naboerne. */
.filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--sp-3) var(--sp-4);
  align-items: start;
}

.filter-bar .field { margin-bottom: 0; }

/* Søgefeltet må gerne være bredest når der er plads til det.
   :first-of-type, ikke :first-child — formularen begynder med et skjult
   felt, så .field er aldrig det første element. */
@media (min-width: 900px) {
  .filter-bar .field:first-of-type { grid-column: span 2; }
}

/* Knapperne på egen række i fuld bredde. Ellers bliver de klemt ud i et
   hjørne så snart felterne ombrydes. Samme som .form-actions. */
.filter-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* Kort filterbar — to felter og ingen hjælpetekst, som på
   aktivitetsfeedet. Her er der plads til knappen ved siden af felterne,
   og en egen række til den ville bare være et hul.

   Felterne deler pladsen ligeligt, knappen tager kun sin egen bredde.
   Under 560 px falder den tilbage til den almindelige stabling, hvor
   .filter-actions selv går i fuld bredde. */
@media (min-width: 561px) {
  .filter-bar-short {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
  }
  .filter-bar-short .field:first-of-type { grid-column: auto; }
  .filter-bar-short .filter-actions { grid-column: auto; }
}

/* ── Formular i flere kolonner ─────────────────────── */
/*
   Til rigtige formularer inde i et kort — deling, admin.
   Filterbaren ovenfor bunder felterne af mod knappen; her står
   etiketterne i stedet på linje foroven, så en hjælpetekst under ét
   felt ikke skubber naboen ned.
*/
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-3) var(--sp-4);
  align-items: start;
}

.form-grid .field { margin-bottom: 0; }

/* Knapperne står på deres egen linje i fuld bredde. Ellers bliver de
   klemt ud i et hjørne når felterne ombrydes. */
.form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* Handlinger der hører til formularen, men ikke er den: "Gør til
   admin", "Luk kontoen". Egen linje, tydelig afstand. */
.form-extra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

/* Fordelingen i perioden er klikbar: hvert tal er et filter. */
.filter-bar + .today-strip {
  margin: var(--sp-4) 0 0;
}

a.today-chip {
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--transition);
}

a.today-chip:hover { border-color: var(--primary); color: var(--text); }

/* Dagens overskrift kan bære et antal i højre side. */
.day-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.day-heading span { text-transform: none; letter-spacing: 0; }

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

@media (max-width: 560px) {
  .filter-actions { width: 100%; }
  .filter-actions .btn { flex: 1; }
}

/* ── Årsopsummering (aar.php og aar-offentlig.php) ──── */

.year-lead {
  margin-bottom: var(--sp-4);
  color: var(--text-soft);
}

/* Kortet på forsiden i december og januar. */
.year-teaser {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.year-teaser h2 { margin-bottom: var(--sp-1); }

/* Kortet med de store tal må gerne have lidt mere luft end de andre —
   det er sidens ansigt. */
.year-card { padding: var(--sp-6) var(--sp-5); }

/* Tallene lægger sig selv om efter hvor mange der er: fire på en
   skærm, to på en telefon. Ingen faste kolonner, for antallet
   afhænger af hvad der er logget. */
.year-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--sp-5) var(--sp-4);
}

.year-stat { text-align: center; }

.year-stat-icon {
  display: block;
  font-size: 1.75rem;
  line-height: 1;
  margin-bottom: var(--sp-2);
}

.year-stat-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.year-stat-label {
  display: block;
  margin-top: var(--sp-1);
  font-size: .8125rem;
  color: var(--text-soft);
}

.year-milestones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.year-milestones li {
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
}

.year-milestone-date {
  flex: none;
  width: 5.5rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-soft);
}

/* Den delte side står for sig selv: smallere spalte, alt centreret.
   Den skal kunne læses af en der aldrig har set GladPote før. */
.year-public {
  max-width: 42rem;
  margin: 0 auto;
}

.year-public-head {
  text-align: center;
  margin-bottom: var(--sp-5);
}

.year-public-head .pet-avatar-lg { margin-bottom: var(--sp-3); }
.year-public-head h1 { margin-bottom: var(--sp-1); }

.year-public-foot { text-align: center; }

/* Overskriften over eksportknapperne i "Dine data". Mindre end kortets
   egen h2 — det er et afsnit inde i kortet, ikke et nyt kort. */
.export-heading {
  margin: var(--sp-5) 0 var(--sp-1);
  font-size: 1rem;
}

/* ── Foder (sundhed.php og hverdag.php) ────────────── */

.feed-heading {
  margin: var(--sp-5) 0 var(--sp-2);
  font-size: 1rem;
}

/* Afvigelsen står bag tallet, ikke som sit eget felt — det er en
   bemærkning til vægten, ikke et tal man aflæser for sig selv. */
.feed-dev {
  margin-left: var(--sp-2);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-soft);
}

.feed-dev.is-over  { color: var(--warning); }
.feed-dev.is-under { color: var(--info); }

/* Dagens ration som én søjle. Gul over, blå under, grøn indenfor —
   aldrig rød: at have fodret 15 % for meget er ikke en fejl. */
.feed-bar {
  position: relative;
  height: 10px;
  margin-top: var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  overflow: hidden;
}

/* Bredden sættes af PHP og ændrer sig aldrig i browseren, så der er
   ingen overgang at animere. */
.feed-bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--primary);
}

.feed-bar-fill.is-over  { background: var(--warning); }
.feed-bar-fill.is-under { background: var(--info); }

/* Er målet overskredet, står stregen ved 100 % så man kan se hvor
   grænsen gik. */
.feed-bar-over {
  position: absolute;
  inset: 0 0 0 auto;
  width: 2px;
  background: var(--surface);
}

/* Linjen på hverdag.php: under quick-baren, over tidslinjen. */
.feed-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: .9375rem;
}

.feed-line-icon { font-size: 1.125rem; }
.feed-line a { margin-left: auto; }

/* ── Medicin (medicin.php) ─────────────────────────── */

/* Kortet med doser der er løbet fra brugeren. Gult, ikke rødt:
   en glemt dosis er noget man skal se, ikke noget man skal skamme sig over. */
.card-warning {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
}

.dose-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dose {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}

.dose:last-child { border-bottom: 0; }

.dose-form, .dose-skip { display: flex; }

/* Fluebenet. Stort nok til en tommelfinger klokken syv om morgenen. */
.dose-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: transparent;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition);
}

.dose-check:hover { border-color: var(--primary); color: var(--ink-300); }
.dose-check.is-static { cursor: default; }

.dose.is-given .dose-check {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.dose.is-skipped .dose-check { border-style: dashed; }

/* Forfalden og ikke krydset af: den skal kunne ses uden at læse. */
.dose.is-due .dose-check { border-color: var(--warning); }

.dose-time {
  flex: none;
  min-width: 3.25rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-soft);
}

.dose-body { flex: 1; min-width: 0; }
.dose-name { font-weight: 600; }

.dose.is-given .dose-name,
.dose.is-skipped .dose-name { color: var(--text-soft); }
.dose.is-skipped .dose-name { text-decoration: line-through; }

/* Kurene */

.med-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.med {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
}

.med:first-child { padding-top: 0; }
.med:last-child { border-bottom: 0; padding-bottom: 0; }
.med.is-waiting { opacity: .75; }

.med-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.med-name { font-weight: 700; }
.med-actions { display: flex; gap: var(--sp-1); flex: none; }

.med-progress {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.med-bar {
  flex: 1;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  overflow: hidden;
}

.med-bar span {
  display: block;
  height: 100%;
  background: var(--primary);
}

/* En uge ad gangen: tre dage tilbage, i dag, tre dage frem. */
.med-strip {
  display: flex;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0 0;
  overflow-x: auto;
}

.strip-day {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 3rem;
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .75rem;
  color: var(--text-soft);
}

.strip-day.is-today { border-color: var(--primary); }
.strip-day.is-given { background: var(--primary-soft); color: var(--primary-dark); }
.strip-day.is-missed { border-style: dashed; }
.strip-count { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Klokkeslættene i kurformularen. */
.slot-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.slot.is-hidden { display: none; }
.slot input { width: 7.5rem; }

/* En lille formular der skal stå på linje med tekst — fx "Slet". */
.inline-form { display: inline-flex; margin-left: var(--sp-2); }

@media (max-width: 560px) {
  .dose { flex-wrap: wrap; }
  .dose-skip { width: 100%; justify-content: flex-end; }
  .med-head { flex-direction: column; }
}

/* ── Planlinjen øverst på forsiden ─────────────────── */

/* Erstatter plankortet der før stod i sidebarens fod. Én linje, ét
   sted, og kun når der er noget at sige — se render_plan_bar(). */
.plan-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .9375rem;
}

.plan-bar p { min-width: 0; }
.plan-bar span { color: var(--text-soft); }

/* Et udløb er tidsfølsomt. Free er bare en tilstand. */
.plan-bar-warn {
  background: color-mix(in srgb, var(--warning) 14%, var(--surface));
  border-color: var(--warning);
}

/* ═══════════════════════════════════════════════════════
   ADMIN-LOG — fejllog og sikkerhedskopier

   Loggen læses hurtigt eller ikke. Derfor en farvet kant pr.
   niveau, monospace på beskeden og stakspor foldet væk.
   ═══════════════════════════════════════════════════════ */

.log-list {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.log {
  padding: var(--sp-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-soft);
  border-radius: var(--radius-sm);
}

.log-fatal   { border-left-color: var(--danger); }
.log-warning { border-left-color: var(--warning); }
.log-notice  { border-left-color: var(--info); }
.log-info    { border-left-color: var(--text-soft); }

.log-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}

.log-level {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.log-fatal   .log-level { color: var(--danger); }
.log-warning .log-level { color: var(--warning); }
.log-notice  .log-level { color: var(--info); }
.log-info    .log-level { color: var(--text-soft); }

.log-when { font-size: .8125rem; color: var(--text-soft); }

/* Beskeden er kode, ikke prosa. Den må gerne bryde midt i en sti. */
.log-text {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .875rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.log-source { margin: var(--sp-1) 0 0; font-size: .8125rem; }
.log-source code { overflow-wrap: anywhere; }

.log-trace summary {
  margin-top: var(--sp-2);
  font-size: .8125rem;
  color: var(--text-soft);
  cursor: pointer;
}

.log-trace pre {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .8125rem;
  line-height: 1.5;
  overflow-x: auto;
}

/* Cron-linjen skal kunne markeres og kopieres i ét træk. */
.code-block {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .8125rem;
  line-height: 1.5;
  overflow-x: auto;
  user-select: all;
}