/* ═══════════════════════════════════════════════════════
   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); }

/* 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);
}

/* ── 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; }
}

/* ── 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);
}