/* Hyttebok — «Kveldslys på hytta»
   Granmalt panel, bjørkelyst papir, falurød og solveggoker.
   Display: Fraunces (selvhostet, variabel). Brødtekst: systemsans. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/fraunces-var.woff2) format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/fraunces-var-italic.woff2) format("woff2");
}

:root {
  --green: #35654a;
  --green-dark: #234a35;
  --topbar: #284e3a;
  --topbar-ink: #f1f4ec;
  --bg: #eceae0;
  --card: #fcfbf5;
  --surface-soft: #f4f2e8;
  --border: #dad6c5;
  --border-strong: #c2bda9;
  --text: #23281f;
  --muted: #6b7061;
  --danger: #a63d2a;
  --ochre: #916c1c;
  --ochre-soft: #f3e7c4;
  --rule: rgba(53, 101, 74, 0.16);
  --margin-red: rgba(166, 61, 42, 0.4);
  --shadow-soft: 0 1px 2px rgba(35, 40, 31, 0.05), 0 10px 28px rgba(35, 40, 31, 0.06);
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --green: #4c7860; --green-dark: #a5cbb2; --topbar: #1a241d; --topbar-ink: #e7ede4;
  --bg: #151913; --card: #1f241c; --surface-soft: #1a1f17; --border: #3a4135;
  --border-strong: #4c5546; --text: #eaede1; --muted: #a8af9c; --danger: #e58d77;
  --ochre: #d9ac52; --ochre-soft: #3b331a; --rule: rgba(165, 203, 178, 0.13);
  --margin-red: rgba(229, 141, 119, 0.35); --shadow-soft: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}

/* Lange filnavn, e-postadresser og URL-er skal brekke, ikke skyve hele siden
   sideveis på en telefon. `anywhere` og ikke `break-word`, fordi bare
   `anywhere` teller med når nettleseren regner ut hvor smal en grid- eller
   flexcelle har lov til å bli. */
p, li, dd, h1, h2, h3, .log-content, .comment-text, .member-row > :first-child {
  overflow-wrap: anywhere;
}

::selection { background: color-mix(in srgb, var(--green) 22%, transparent); }

h1, h2, h3, .stat-value, .expense-amount, .progress-ring strong {
  font-family: var(--font-display);
  font-weight: 580;
  letter-spacing: -0.01em;
}
h2 { font-size: 1.45rem; }
h3 { font-size: 1.12rem; }

a { color: var(--green-dark); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select {
  background:var(--card);color:var(--text);border:1px solid var(--border-strong);border-radius:9px;font:inherit;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus, textarea:focus, select:focus {
  outline:3px solid color-mix(in srgb, var(--green) 22%, transparent);border-color:var(--green);
}
button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid color-mix(in srgb, var(--green) 38%, transparent);outline-offset:2px }
input[type="checkbox"], input[type="radio"] { accent-color: var(--green); }

/* Topbar — granmalt panel */
.topbar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: calc(0.8rem + env(safe-area-inset-top)) 1rem 0.8rem;
  background: var(--topbar);
  color: var(--topbar-ink);
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.topbar a { color: var(--topbar-ink); }
.topbar .brand { display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:620;font-size:1.2rem;letter-spacing:-.01em }
.topbar .brand img { width:38px;height:38px;border-radius:50%;object-fit:contain;background:white;box-shadow:0 1px 4px rgba(0,0,0,.2); }
.cabin-nav { display: flex; gap: 1.05rem; flex-wrap: wrap; font-size:.95rem; }
.cabin-nav a, .nav-dropdown-toggle { opacity:.88 }
.cabin-nav a:hover, .nav-dropdown-toggle:hover { opacity:1 }
.cabin-nav a[aria-current="page"], .nav-dropdown-toggle.is-current { opacity:1;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px;text-decoration-color:color-mix(in srgb, var(--topbar-ink) 65%, transparent) }
.nav-dropdown-toggle { background:none;border:none;color:var(--topbar-ink);font:inherit;font-size:.95rem;cursor:pointer;padding:.2rem .45rem;margin:-.2rem -.45rem;border-radius:7px;display:inline-flex;align-items:center;gap:.3rem }
.nav-dropdown-toggle[aria-expanded="true"] { background:rgba(255,255,255,.12);opacity:1 }
.nav-dropdown-toggle .nav-caret { font-size:.65em;opacity:.8;transition:transform .15s }
.nav-dropdown-toggle[aria-expanded="true"] .nav-caret { transform:rotate(180deg) }
.nav-dropdown-menu { position:fixed;z-index:60;min-width:10.5rem;display:flex;flex-direction:column;background:var(--topbar);border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.3);padding:.4rem;margin-top:.35rem }
.nav-dropdown-menu[hidden] { display:none }
.nav-dropdown-menu a { color:var(--topbar-ink);padding:.55rem .75rem;border-radius:8px;white-space:nowrap }
.nav-dropdown-menu a:hover { background:rgba(255,255,255,.1);text-decoration:none }
.nav-dropdown-menu a[aria-current="page"] { background:rgba(255,255,255,.16);font-weight:650 }
.spacer { flex: 1; }
.user-name { opacity: 0.9; }
.topbar .link-btn { color: var(--topbar-ink); opacity:.85 }
.theme-toggle { width:38px;height:38px;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(255,255,255,.08);color:var(--topbar-ink);font-size:1.05rem;cursor:pointer }
.theme-toggle:hover { background:rgba(255,255,255,.16) }
.user-menu { display:flex;align-items:center;gap:.45rem;font-weight:650 }.user-menu img{width:32px;height:32px;object-fit:cover;border-radius:50%;border:2px solid rgba(255,255,255,.5)}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.4rem 1rem 3.5rem;
}

h1 { margin-top: 0.25rem; }

/* Sideintro */
.page-intro { margin: .6rem 0 1.9rem; }
.page-intro h1 { font-size: clamp(2.1rem, 6vw, 3.1rem); margin: .15rem 0 .3rem; font-weight: 540; letter-spacing: -.02em; line-height:1.08; }
.page-intro p { color: var(--muted); margin: 0; max-width: 56ch; }
.page-intro+.section-title-row,.page-intro+.card-grid { margin-top:1.25rem }
.eyebrow { color: var(--green); text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; font-weight: 800; }
:root[data-theme="dark"] .eyebrow { color: var(--green-dark); }

/* Kort */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
  margin: 1rem 0;
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.05rem 1.1rem;
  display: block;
  box-shadow: var(--shadow-soft);
}
a.card { transition: border-color .15s ease, transform .15s ease; }
a.card:hover { border-color: var(--green); transform: translateY(-2px); text-decoration: none; }
.card h3 { margin: 0 0 0.3rem; }
.card--soft { background: var(--surface-soft); box-shadow: none; }
.cabin-card { padding: 0; overflow: hidden; }
.cabin-card h3 { margin: .75rem 1rem .2rem; }
.cabin-card .badge { margin: 0 1rem .9rem; }
.cabin-card__photo {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
}
.cabin-card__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.95rem;
}
.cabin-hero {
  margin: 1rem 0 0.75rem;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
  max-width: 680px;
  box-shadow: var(--shadow-soft);
}
.cabin-hero img {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: cover;
}
.cabin-hero--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: var(--muted);
  padding: 1rem;
}

.badge {
  display: inline-block;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.12rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}

.chip { display:inline-block;background:var(--surface-soft);border:1px solid var(--border);border-radius:999px;padding:.18rem .7rem;font-size:.8rem;color:var(--muted) }
a.chip:hover { text-decoration:none;border-color:var(--green);color:var(--green-dark) }
a.chip.active, .chip.active { background:var(--green);border-color:var(--green);color:white }
.filter-chips { display:flex;gap:.45rem;flex-wrap:wrap;margin:.5rem 0 .9rem }
.task-meta { display:flex;gap:.4rem;flex-wrap:wrap;margin:.25rem 0 }
.task-edit { margin-top:.5rem }
.task-edit summary { cursor:pointer;color:var(--muted);font-size:.85rem;list-style:none }
.task-edit[open] summary { margin-bottom:.5rem }

/* Knapper */
.btn-row { display: flex; gap: 0.75rem; margin: 1rem 0; flex-wrap: wrap; }

.btn-primary, .btn-secondary {
  display: inline-block;
  border: none;
  border-radius: 10px;
  padding: 0.68rem 1.15rem;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--green); color: white; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.btn-primary:hover { background: var(--green-dark); text-decoration: none; }
:root[data-theme="dark"] .btn-primary:hover { background: color-mix(in srgb, var(--green) 82%, white); }
.btn-secondary { background: var(--card); color: var(--text); border: 1px solid var(--border-strong); box-shadow: none; }
.btn-secondary:hover { text-decoration: none; border-color: var(--green); color: var(--green-dark); }
:root[data-theme="dark"] .btn-secondary:hover { color: var(--green-dark); }

.link-btn {
  background: none;
  border: none;
  color: var(--green-dark);
  cursor: pointer;
  padding: 0;
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-btn.danger { color: var(--danger); }

/* Skjema */
.stack-form { display: flex; flex-direction: column; gap: 0.85rem; max-width: 480px; }
.stack-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.88rem; font-weight: 600; color: var(--muted); }
.stack-form input, .stack-form textarea, .stack-form select {
  font-size: 1rem;
  font-weight: 400;
  padding: 0.55rem 0.65rem;
}
.stack-form fieldset { border:1px solid var(--border);border-radius:10px;color:var(--muted);font-size:.88rem }

/* Passordfelt med «Vis»-knapp inni. Knappen ligger oppå feltet, så teksten må
   ha plass til å slutte før den. */
.password-field { position: relative; display: flex; }
.password-field input { flex: 1; min-width: 0; padding-right: 3.6rem; }
.password-toggle {
  position: absolute;
  right: .3rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: .3rem .45rem;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.password-toggle:hover { color: var(--text); }

.inline-fields { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: flex-end; margin: 0.75rem 0; }
.inline-fields label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--muted); }
.inline-fields input { padding: 0.5rem; }
.inline-form { display: inline; }

.auth-box {
  max-width: 410px;
  margin: 3rem auto;
  background: var(--card);
  padding: 1.9rem 1.7rem;
  border-radius: 18px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--green);
  box-shadow: var(--shadow-soft);
}
.auth-box h1 { font-size: 2.1rem; margin: .2rem 0 .8rem; font-weight: 540; }

.error { color: var(--danger); }
.muted { color: var(--muted); font-size: 0.9rem; }

.list { list-style: none; padding: 0; margin: 0.5rem 0; }
.list li { padding: 0.65rem 0; border-bottom: 1px solid var(--border); }
.list li:last-child { border-bottom: none; }

/* Kalender */
.calendar-header { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; }
.calendar-header h2 { text-transform: capitalize; }
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin: 1rem 0;
}
.calendar-weekday { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); text-align: center; padding-bottom: 0.3rem; }
.calendar-day {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 64px;
  padding: 0.3rem;
  font-size: 0.8rem;
  /* Uten disse to setter innholdet i cellen — helligdagsmerket og navnene på
     bookingene — bunnbredden på alle sju kolonnene, og rutenettet blir bredere
     enn skjermen på en telefon. */
  min-width: 0;
  overflow: hidden;
}
.calendar-day.clickable { cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; }
.calendar-day.clickable:hover { border-color: var(--green); }
.calendar-day.out-of-month { opacity: 0.38; }
.calendar-day.today { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.calendar-day.booked {
  background: repeating-linear-gradient(-45deg,
    color-mix(in srgb, var(--danger) 10%, var(--card)) 0 6px,
    color-mix(in srgb, var(--danger) 3%, var(--card)) 6px 12px);
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
}
.calendar-day.holiday { border-style: dashed; border-color: color-mix(in srgb, var(--ochre) 55%, var(--border)); }
/* Låst av en administrator. Med vilje gråere og flatere enn en booking: dette
   er ikke noen som er der, det er en dag som ikke finnes å booke. */
.calendar-day.blocked {
  background: repeating-linear-gradient(-45deg,
    color-mix(in srgb, var(--muted) 16%, var(--surface-soft)) 0 5px,
    var(--surface-soft) 5px 10px);
  border-color: var(--border-strong);
  cursor: not-allowed;
}
.calendar-day.blocked .day-num { color: var(--muted); }
.block-chip {
  display: block;
  max-width: 100%;
  margin-top: .15rem;
  padding: .1rem .3rem;
  border-radius: 5px;
  background: color-mix(in srgb, var(--muted) 22%, transparent);
  color: var(--text);
  font-size: .68rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.block-confirm {
  margin: 1rem 0;
  padding: 1.1rem 1.2rem;
  background: var(--ochre-soft);
  border: 1px solid color-mix(in srgb, var(--ochre) 45%, var(--border));
  border-radius: 14px;
}
.block-confirm h3 { margin: 0 0 .5rem; color: var(--ochre); }
.block-confirm .list li { border-color: color-mix(in srgb, var(--ochre) 25%, var(--border)); }
.cancelled-notice {
  margin: 1rem 0;
  padding: .9rem 1.1rem;
  border-left: 4px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border-radius: 0 10px 10px 0;
}
.cancelled-notice strong { color: var(--danger); }
.calendar-day.in-range { background: color-mix(in srgb, var(--green) 14%, var(--card)); border-color: var(--green); }
.calendar-day.range-start, .calendar-day.range-end { box-shadow: inset 0 0 0 1px var(--green-dark); }
.calendar-day.selected {
  background: var(--green);
  color: white;
  border-color: var(--green-dark);
}
.calendar-day.selected .day-num { color: white; }
.day-num { display: block; font-weight: 650; margin-bottom: 0.2rem; }
.holiday-badge {
  display: block;
  max-width: 100%;
  margin-bottom: 0.25rem;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--ochre);
  background: var(--ochre-soft);
  padding: 0.12rem 0.35rem;
  border-radius: 999px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* På telefon er dagcellen for smal til at navnet kan leses. Da bærer den
   stiplede kanten informasjonen, og navnene listes under kalenderen. */
.calendar-holidays { display: none; margin: 0 0 1.25rem; padding: .8rem 1rem; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 12px; }
.calendar-holidays h2 { margin: 0 0 .4rem; font-size: .95rem; }
.calendar-holidays ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.calendar-holidays li { display: flex; gap: .5rem; font-size: .88rem; }
.calendar-holidays li b { font-weight: 650; min-width: 2.2rem; }
.booking-chip-stack { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.15rem; }
.booking-chip {
  display: block;
  background: var(--green);
  color: white;
  border-radius: 5px;
  padding: 0.12rem 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Andres opphold. Dempet, men fortsatt en lenke: alle på hytta kan åpne den og
   se hvem som kommer — de kan bare ikke endre noe der inne. */
.booking-chip--busy { background: var(--muted); }
.booking-card--busy { opacity: 0.85; }
.booking-extend-form { display: flex; gap: 0.25rem; }
.booking-extend-form input { width: 100%; font-size: 0.7rem; padding: 0.2rem; }
.mini-btn {
  border: none;
  border-radius: 5px;
  background: var(--green-dark);
  color: white;
  font-size: 0.68rem;
  padding: 0.2rem 0.35rem;
  cursor: pointer;
}

/* Sjekklister */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1rem 0; }
.checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.checklist li { border-bottom: none; padding: 0; }
.checklist-btn {
  background: var(--card);
  border: 1px solid var(--border);
  text-align: left;
  font-size: 1rem;
  cursor: pointer;
  padding: 0.8rem 0.95rem;
  min-height: 46px;
  width: 100%;
  color: var(--text);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.checklist-btn:hover { border-color: var(--green); }
.checklist-btn.checked { color: var(--muted); text-decoration: line-through; background: color-mix(in srgb, var(--green) 8%, var(--card)); }
.checklist-mark { font-size: 1.05rem; }
.checklist-page { display: flex; flex-direction: column; gap: 1.25rem; }
.checklist-card { padding: 1.2rem; }
.checklist-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.checklist-summary-badge { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; min-width: 120px; }
.progress-track { width: 100%; height: 0.45rem; background: color-mix(in srgb, var(--green) 14%, var(--bg)); border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--green); border-radius: inherit; }
.checklist-panel { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 12px; padding: 0.95rem; }
.checklist-panel h3 { margin-top: 0; }

/* Bookingkort */
.section-title-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.section-title-row h2 { margin: .2rem 0; }
.booking-list { display: flex; flex-direction: column; gap: 0.75rem; }
.booking-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.95rem 1.05rem;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.booking-card:hover { border-color: var(--green); transform: translateY(-1px); text-decoration: none; }
.booking-card__header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.booking-card__label { margin: 0 0 0.2rem; color: var(--green); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; }
:root[data-theme="dark"] .booking-card__label { color: var(--green-dark); }
.booking-card h3 { margin: 0; font-size: 1.2rem; }
.booking-card__note { margin: 0.45rem 0 0.15rem; color: var(--muted); }
.booking-card__link { display: inline-block; margin-top: 0.35rem; font-weight: 650; font-size: .92rem; }

/* Vedlikehold */
.maintenance-plans-section { margin-bottom:2.5rem }
.maintenance-plan-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem }
.maintenance-plan-card { background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.15rem;box-shadow:var(--shadow-soft) }
.maintenance-plan-card.is-overdue { border-color:color-mix(in srgb, var(--danger) 55%, var(--border)) }
.maintenance-plan-card>header { display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:start }
.maintenance-plan-card h3 { margin:.1rem 0 }
.maintenance-plan-card time { font-family:var(--font-display);font-weight:650;font-size:1.05rem;color:var(--green-dark);white-space:nowrap }
.maintenance-plan-card.is-overdue time { color:var(--danger) }
.maintenance-plan-card.is-overdue .eyebrow { color:var(--danger) }
.maintenance-plan-icon { display:grid;place-content:center;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb, var(--green) 13%, var(--card));color:var(--green);font-size:1.25rem;font-weight:800 }
:root[data-theme="dark"] .maintenance-plan-icon { color:var(--green-dark) }
.plan-frequency { display:inline-block;padding:.25rem .6rem;background:var(--surface-soft);border:1px solid var(--border);border-radius:999px;font-size:.8rem;color:var(--muted) }
.complete-plan { margin:.8rem 0 }
.complete-plan summary,.new-plan summary { cursor:pointer;list-style:none }
.complete-plan form,.plan-form { margin-top:.8rem }
.new-plan { margin-top:1rem }
.plan-form { padding:1.2rem;background:var(--card);border:1px solid var(--border);border-radius:14px;max-width:650px }
.recurrence-fields { display:grid;grid-template-columns:1fr 1.2fr 1.5fr;gap:.7rem }
.recurrence-fields label { display:flex;flex-direction:column;gap:.3rem;color:var(--muted);font-size:.9rem }
.recurrence-fields input,.recurrence-fields select { padding:.55rem }
.empty-state.compact { padding:1.5rem }.empty-state.compact p{margin:.25rem}
.task-item { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.task-item.done { opacity: 0.65; }
.task-item__content { display: flex; flex-direction: column; gap: 0.4rem; }
.task-actions { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-end; }
.resolve-form { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }
.cost-input { width: 8.5rem; padding: 0.4rem 0.6rem; }
.checklist-edit-form { display: flex; gap: 0.4rem; flex: 1; align-items: center; }
.checklist-edit-form input { flex: 1; padding: 0.4rem 0.6rem; background: transparent; color: inherit; }

.due-maintenance { background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--ochre); border-radius: 12px; padding: 0.9rem 1.1rem; margin: 1rem 0; }
.due-maintenance h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.due-maintenance ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.due-maintenance li { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.due-label { color: var(--muted); font-size: 0.85rem; }
.due-label.overdue { color: var(--danger); font-weight: 650; }

/* Handleliste */
.supply-status { display: inline-block; padding: 0.15rem 0.65rem; border: 1px solid transparent; border-radius: 999px; font-size: 0.8rem; font-weight: 650; }
.supply-status.ok { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
:root[data-theme="dark"] .supply-status.ok { color: var(--green-dark); }
.supply-status.low { background: var(--ochre-soft); color: var(--ochre); }
.supply-status.empty { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
button.supply-status { cursor: pointer; }
button.supply-status.inactive { background: transparent; border-color: var(--border); color: var(--muted); font-weight: 400; }
.supply-actions { display: flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; }

/* Statistikk */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.8rem; margin: 0.8rem 0; }
.stat-tile { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.15rem; }
.stat-value { font-size: 1.75rem; font-weight: 600; color: var(--green-dark); }
.stat-label { font-size: 0.85rem; color: var(--muted); }
.task-item-full { display: flex; flex-direction: column; gap: 0.6rem; }
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 0.5rem;
}
.photo-thumb { position: relative; aspect-ratio: 1; }
.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--surface-soft);
  border-radius: 8px;
  border: 1px solid var(--border);
  display: block;
}
.photo-thumb form { position: absolute; top: 2px; right: 2px; }
.photo-delete-btn {
  background: rgba(0,0,0,0.6);
  color: white;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  line-height: 1;
  cursor: pointer;
  font-size: 0.75rem;
}
.add-photo-form { align-self: flex-start; }
.photo-uploader { min-width: 240px; }
.drop-zone { display: block; padding: .8rem 1rem; border: 2px dashed var(--border-strong); border-radius: 10px; cursor: pointer; text-align: center; color: var(--muted); }
.drop-zone.is-dragging { border-color: var(--green); background: color-mix(in srgb, var(--green) 8%, transparent); }
.upload-status { min-height: 1.3em; margin-top: .25rem; font-size: .9rem; }
.comments { margin-top: 1.1rem; padding: .8rem .9rem; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 10px; }
.comments p { margin: .4rem 0; }
.comment-form { display: flex; gap: .5rem; margin-top: .8rem; }
.comment-form input { flex: 1; padding: .5rem .65rem; }
.edit-entry-form { margin-top: .5rem; }
.edit-note-page { max-width: 760px; }
.edit-note-form { max-width: none; }
.edit-note-form textarea { min-height: 420px; resize: vertical; line-height: 1.6; padding: 1rem; }
.edit-note-photos { margin: 2rem 0; padding: 1.25rem; background: var(--card); border: 1px solid var(--border); border-radius: 14px; }
.comment-item { padding: .65rem 0; border-bottom: 1px solid var(--border); }
.comment-item:last-child { border-bottom: 0; }
.comment-actions { display: flex; gap: .75rem; margin-top: .35rem; align-items: flex-start; }
.comment-edit-form { display: flex; gap: .4rem; margin-top: .4rem; }
.comment-edit-form input { min-width: min(420px, 60vw); }
.inline-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.small-btn { font-size: 0.85rem; padding: 0.4rem 0.8rem; min-height: 0; cursor: pointer; }

/* Hyttebok — signaturen: innlegg som sider fra en innbundet bok */
.new-entry { margin: 1rem 0; }
.new-entry summary { cursor: pointer; }
.logbook-list { list-style:none;padding:0;margin:1.25rem 0;display:flex;flex-direction:column;gap:1.25rem }
.logbook-list>li { background:var(--card);border:1px solid var(--border);border-radius:4px 16px 16px 4px;padding:1.35rem 1.5rem;box-shadow:var(--shadow-soft) }
.logbook-list>li.log-entry { position:relative;padding-left:2.9rem }
.logbook-list>li.log-entry::before { content:"";position:absolute;left:1.9rem;top:.9rem;bottom:.9rem;width:1px;background:var(--margin-red) }
.logbook-list>li.log-entry::after { content:"";position:absolute;left:0;top:0;bottom:0;width:7px;border-radius:4px 0 0 4px;background:linear-gradient(180deg, var(--green), var(--green-dark)) }
.log-entry-header { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.log-entry-header strong { font-family:var(--font-display);font-style:italic;font-weight:560;font-size:1.5rem;letter-spacing:-.01em }
.logbook-list .log-content {
  font-size: 1.02rem;
  line-height: 1.95rem;
  background-image: repeating-linear-gradient(to bottom,
    transparent 0, transparent calc(1.95rem - 1px),
    var(--rule) calc(1.95rem - 1px), var(--rule) 1.95rem);
  margin: .6rem 0 1rem;
}
.log-content { white-space: pre-wrap; }
.logbook-list .photo-grid { margin: .9rem 0; }

.maintenance-create-form { max-width:680px;padding:1.2rem;background:var(--card);border:1px solid var(--border);border-radius:16px;margin-bottom:1.5rem }
.settings-photo-form { max-width:420px }
.calendar-booking-section { margin-top:1.25rem }
.settings-section { margin-bottom:1rem }
.settings-section>.cabin-hero { margin-top:.5rem }

/* Oppholdssjekklister */
.stay-checklist { background: var(--card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-soft); }
.stay-checklist__header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.5rem; }
.stay-checklist__header h2 { margin:.2rem 0; font-size:clamp(1.3rem,4vw,1.75rem); }
.stay-checklist__header p { margin:.2rem 0 0; color:var(--muted); }
.progress-ring { width:74px; height:74px; flex:0 0 74px; border-radius:50%; display:grid; place-content:center; text-align:center; background:conic-gradient(var(--green) calc(var(--progress)*1%), color-mix(in srgb, var(--green) 12%, var(--bg)) 0); position:relative; }
.progress-ring::before { content:""; position:absolute; inset:7px; background:var(--card); border-radius:50%; }
.progress-ring strong,.progress-ring span { position:relative; line-height:1.1; }.progress-ring strong{font-size:1.1rem}.progress-ring span{font-size:.7rem;color:var(--muted)}
.stay-progress { height:4px; background:color-mix(in srgb, var(--green) 12%, var(--bg)); }.stay-progress span{display:block;height:100%;background:var(--green);transition:width .2s}
.checklist-columns { display:grid; grid-template-columns:1fr 1fr; }
.checklist-group { padding:1.5rem; }.checklist-group+ .checklist-group{border-left:1px solid var(--border)}
.checklist-group>header { display:flex; gap:.8rem; align-items:flex-start; margin-bottom:1rem; }.checklist-group h3{margin:0;font-size:1.25rem}.checklist-group header p{margin:.1rem 0;color:var(--muted);font-size:.85rem}
.checklist-group__number { font-family:var(--font-display);font-size:.8rem;font-weight:700;color:var(--green);background:color-mix(in srgb, var(--green) 11%, var(--card));padding:.3rem .5rem;border-radius:7px }
:root[data-theme="dark"] .checklist-group__number { color:var(--green-dark) }
.checklist-modern { list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem }
.checklist-modern button { width:100%;border:1px solid var(--border);background:var(--surface-soft);border-radius:12px;padding:.8rem;display:flex;gap:.75rem;align-items:center;text-align:left;color:var(--text);font:inherit;cursor:pointer;transition:border-color .15s ease, background-color .15s ease }
.checklist-modern button:hover { border-color:var(--green) }
.custom-check { width:26px;height:26px;flex:0 0 26px;border:2px solid var(--border-strong);border-radius:8px;display:grid;place-content:center;color:white;font-weight:800;transition:background-color .15s ease, border-color .15s ease }
.item-copy { display:flex;flex-direction:column;line-height:1.3 }.item-copy small{font-size:.67rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.checklist-modern .is-done button { background:color-mix(in srgb, var(--green) 7%, var(--card));color:var(--muted) }.checklist-modern .is-done .custom-check{background:var(--green);border-color:var(--green)}.checklist-modern .is-done .item-copy{text-decoration:line-through}
.checklist-empty { color:var(--muted);padding:1rem;text-align:center }
.stay-group-title { margin:1.5rem 0 0;font-size:1.15rem;color:var(--muted);font-weight:600 }
.stay-group-title:first-child { margin-top:0 }
/* Tidligere opphold: år og måned lukket som standard. Trekanten fra nettleseren
   skjules til fordel for en egen, så den peker riktig vei i begge temaer. */
.stay-year, .stay-month { border:1px solid var(--border);border-radius:14px;background:var(--card);overflow:hidden }
.stay-year { margin-bottom:.6rem }
.stay-year>summary, .stay-month>summary {
  display:flex;align-items:center;gap:.7rem;cursor:pointer;list-style:none;
  padding:.9rem 1.1rem;font-family:var(--font-display);font-weight:600;
}
.stay-year>summary::-webkit-details-marker, .stay-month>summary::-webkit-details-marker { display:none }
.stay-year>summary::before, .stay-month>summary::before {
  content:"▸";color:var(--green);font-family:var(--font-display);transition:transform .15s ease;flex:0 0 auto;
}
:root[data-theme="dark"] .stay-year>summary::before, :root[data-theme="dark"] .stay-month>summary::before { color:var(--green-dark) }
.stay-year[open]>summary::before, .stay-month[open]>summary::before { transform:rotate(90deg) }
.stay-year>summary:hover, .stay-month>summary:hover { background:var(--surface-soft) }
.stay-year__label { font-size:1.4rem;letter-spacing:-.01em }
.stay-month__label { font-size:1.05rem;text-transform:capitalize }
.stay-year__count, .stay-month__count {
  margin-left:auto;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:.8rem;font-weight:600;color:var(--muted);background:var(--surface-soft);
  border:1px solid var(--border);border-radius:999px;padding:.1rem .6rem;
}
.stay-year>.stay-month { margin:0 1rem 1rem;background:var(--surface-soft) }
.stay-year>.stay-month:first-of-type { margin-top:.2rem }
.stay-month>.stay-checklist { margin:0 .9rem .9rem }
.stay-month>.stay-checklist:first-of-type { margin-top:.2rem }
.empty-state{text-align:center;background:var(--surface-soft);padding:3rem 1rem;border:1px dashed var(--border-strong);border-radius:18px}.empty-state>span{font-size:2rem;color:var(--green)}

/* Siste fra hytteboka */
.recent-log-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:1rem }
.recent-log-card { background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-soft) }
.recent-log-card>a { display:block;background:var(--surface-soft) }.recent-log-card img{display:block;width:100%;height:160px;object-fit:cover}.recent-log-card__body{padding:1rem}.recent-log-card strong{font-family:var(--font-display);font-style:italic;font-weight:560;font-size:1.1rem}.recent-log-card h3{margin:.25rem 0}.recent-log-card p{margin:.35rem 0;color:var(--muted)}
.image-dialog { width:min(96vw,1100px);height:min(92vh,900px);padding:2.8rem 1rem 1rem;border:0;border-radius:16px;background:rgba(14,17,13,.96);overflow:hidden }
.image-dialog::backdrop { background:rgba(0,0,0,.82);backdrop-filter:blur(3px) }.image-dialog img{width:100%;height:100%;object-fit:contain}.image-dialog__close{position:absolute;right:.65rem;top:.45rem;border:0;background:transparent;color:white;font-size:2rem;cursor:pointer}

/* Profil */
.profile-layout { display:grid;grid-template-columns:240px 1fr;gap:1.5rem;align-items:start }
.profile-card,.settings-section{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.25rem;box-shadow:var(--shadow-soft)}
.profile-card{text-align:center;position:sticky;top:1rem}
.profile-avatar{display:grid;place-content:center;width:150px;height:150px;margin:0 auto 1rem;border-radius:50%;object-fit:cover;background:var(--green);color:white;font-family:var(--font-display);font-size:3.5rem;font-weight:600}
.profile-card h2{margin:.5rem 0}.profile-card p{overflow-wrap:anywhere}
.profile-settings{display:flex;flex-direction:column;gap:1rem}.settings-section h2{margin-top:0}
.success-message{padding:.8rem 1rem;background:color-mix(in srgb, var(--green) 14%, transparent);border-radius:10px;color:var(--green-dark)}

/* Økonomi og dokumenter */
.balance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin:1rem 0}
.balance-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1rem}
.balance-card strong{font-family:var(--font-display);font-size:1.35rem;font-weight:600}.balance-card small{color:var(--muted)}
.expense-form,.document-form{margin:1rem 0;padding:1.2rem;background:var(--card);border:1px solid var(--border);border-radius:14px;max-width:680px}
.member-checks{display:flex;flex-wrap:wrap;gap:.5rem 1rem}
.expense-list{display:flex;flex-direction:column;gap:1rem;margin-top:1.25rem}
.expense-card{display:grid;grid-template-columns:1fr auto;gap:.8rem;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.15rem;box-shadow:var(--shadow-soft)}
.expense-card>div{min-width:0}
.expense-card h2{margin:.15rem 0;font-size:1.3rem}.expense-card p{margin:.2rem 0}
.expense-amount{font-size:1.45rem;font-weight:600;color:var(--green-dark)}
.receipt-thumb{width:100px;height:100px;object-fit:cover;background:var(--surface-soft);border-radius:10px;border:1px solid var(--border)}
.expense-shares{grid-column:1/-1;display:flex;gap:.4rem;flex-wrap:wrap}
.share-pill{border:1px solid var(--border-strong);border-radius:999px;padding:.4rem .7rem;background:var(--surface-soft);color:var(--text);cursor:pointer;font-size:.88rem}
.share-pill.is-paid{background:color-mix(in srgb, var(--green) 14%, transparent);border-color:var(--green);color:var(--green-dark)}
.share-pill[disabled]{cursor:default;opacity:.75}
.document-list{display:flex;flex-direction:column;gap:.7rem;margin-top:1rem}
.document-card{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1rem}
.document-card>div{min-width:0}
.document-card h3,.document-card p{margin:.1rem 0}
.document-icon{display:grid;place-content:center;width:42px;height:42px;background:color-mix(in srgb, var(--green) 12%, var(--card));color:var(--green);border-radius:10px;font-size:1.3rem}
:root[data-theme="dark"] .document-icon{color:var(--green-dark)}

/* Status og varsler */
.status-badge{display:inline-block;padding:.3rem .7rem;border-radius:999px;font-weight:700;font-size:.82rem}
.status-approved{background:color-mix(in srgb, var(--green) 15%, transparent);color:var(--green-dark)}
.status-pending{background:var(--ochre-soft);color:var(--ochre)}
.status-rejected{background:color-mix(in srgb, var(--danger) 13%, transparent);color:var(--danger)}
.admin-booking-panel{padding:1.1rem;background:var(--card);border:1px solid var(--border);border-radius:14px;margin:1rem 0}
.admin-booking-panel details form{margin-top:.8rem}
.notice{padding:.7rem 1rem;border-left:4px solid var(--ochre);background:var(--ochre-soft);color:var(--ochre);border-radius:0 8px 8px 0}
.calendar-subscription{margin-top:1.5rem}
.feed-url{display:flex;gap:.5rem;margin:.7rem 0;flex-wrap:wrap}
.feed-url input{flex:1;min-width:220px;padding:.6rem;background:var(--surface-soft)}
.toggle-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem}

.booking-dialog{width:min(92vw,520px);border:1px solid var(--border);border-radius:18px;padding:1.5rem;background:var(--card);color:var(--text);box-shadow:0 24px 70px rgba(0,0,0,.35)}
.booking-dialog::backdrop{background:rgba(10,14,10,.6);backdrop-filter:blur(3px)}
.booking-dialog h2{margin:.25rem 0}.booking-dialog form{max-width:none}
.dialog-close{position:absolute;right:.8rem;top:.6rem;border:0;background:transparent;color:var(--muted);font-size:1.8rem;cursor:pointer}
.booking-checklist{margin:1.5rem 0}
.booking-logbook{margin-top:2rem;padding:1.25rem;background:var(--card);border:1px solid var(--border);border-radius:16px}

/* Innstillinger */
.member-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.member-row > :first-child { min-width: 0; }
.member-actions { display: flex; gap: 0.75rem; align-items: center; }

/* Sjekklister i innstillingene — rekkefølgen dras med håndtaket til venstre.
   touch-action:none er det som gjør det mulig på telefon: uten den tolker
   nettleseren draget som at man vil bla i siden, og pointermove uteblir. */
.checklist-sortable { list-style: none; }
.checklist-row { align-items: center; }
.drag-handle {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  padding: .3rem .3rem;
  border-radius: 7px;
  cursor: grab;
  touch-action: none;
}
.drag-handle:hover { color: var(--text); background: var(--surface-soft); }
.checklist-row.is-dragging {
  position: relative;
  z-index: 2;
  background: var(--card);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  cursor: grabbing;
  user-select: none;
}
.checklist-row.is-dragging .drag-handle { cursor: grabbing; }
.checklist-order-status { min-height: 1.35em; margin: .1rem 0 .6rem; font-size: .85rem; color: var(--muted); }
.checklist-order-status.is-error { color: var(--danger); }

/* Faresone — sletting av konto og hytte */
.danger-section { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.danger-section h2 { color: var(--danger); }
.btn-secondary.danger-btn { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border-strong)); }
.btn-secondary.danger-btn:hover, :root[data-theme="dark"] .btn-secondary.danger-btn:hover { color: var(--danger); border-color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--card)); }

/* Bare for skjermlesere. Brukes der en farge eller et ikon bærer mening som
   ellers ville gått tapt. */
.sr-only { position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0 }

/* Varselbjelle i toppen */
.bell { position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(255,255,255,.08);font-size:1.05rem;text-decoration:none;flex:0 0 auto }
.bell:hover { background:rgba(255,255,255,.16);text-decoration:none }
.bell.has-unread { border-color:color-mix(in srgb, var(--ochre) 70%, transparent) }
.bell__count {
  position:absolute;top:-4px;right:-4px;min-width:1.15rem;height:1.15rem;padding:0 .25rem;
  display:grid;place-content:center;border-radius:999px;background:var(--danger);color:#fff;
  font-size:.68rem;font-weight:700;line-height:1;border:2px solid var(--topbar);
}

/* Varselliste */
.notification-list { list-style:none;margin:1rem 0;padding:0;display:flex;flex-direction:column;gap:.5rem }
.notification { display:flex;align-items:flex-start;gap:.75rem;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:.85rem 1rem }
.notification.is-unread { border-color:color-mix(in srgb, var(--green) 45%, var(--border));background:color-mix(in srgb, var(--green) 5%, var(--card)) }
.notification__body { display:flex;align-items:flex-start;gap:.6rem;flex:1;min-width:0;color:inherit }
.notification__body:hover { text-decoration:none }
.notification__body:hover strong { text-decoration:underline;text-underline-offset:3px }
.notification__dot { width:.5rem;height:.5rem;flex:0 0 auto;margin-top:.5rem;border-radius:50%;background:var(--green) }
:root[data-theme="dark"] .notification__dot { background:var(--green-dark) }
.notification__text { display:flex;flex-direction:column;gap:.15rem;min-width:0 }
.notification__text strong { font-family:var(--font-display);font-weight:600 }
.notification__detail { overflow-wrap:anywhere }

/* Værvarsel */
.weather { background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.1rem 1.2rem;margin:1rem 0;box-shadow:var(--shadow-soft) }
.weather__now { display:flex;align-items:center;gap:.9rem }
.weather__icon { font-size:2.4rem;line-height:1 }
.weather__now h2 { margin:0;font-size:1.15rem }
.weather__temp { margin:.1rem 0 0;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap }
.weather__temp strong { font-family:var(--font-display);font-size:1.8rem;font-weight:600;color:var(--green-dark) }
.weather__temp span { color:var(--muted) }
.weather__days { list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:.5rem }
.weather__days li { display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.6rem .3rem;background:var(--surface-soft);border:1px solid var(--border);border-radius:11px;text-align:center }
.weather__day { font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted) }
.weather__symbol { font-size:1.5rem;line-height:1.2 }
.weather__range { font-size:.9rem }.weather__range b { font-weight:700 }
.weather__rain { font-size:.75rem;color:var(--green-dark) }
.weather__rain.is-dry { color:var(--muted) }
.weather__source { margin:.7rem 0 0;font-size:.78rem }

/* Bookinger som venter på svar */
.approval-queue { background:var(--card);border:1px solid var(--border);border-left:4px solid var(--ochre);border-radius:12px;padding:.9rem 1.1rem;margin:1rem 0 }
.approval-queue h2 { margin:0 0 .4rem;font-size:1.1rem }
.approval-queue .list li:last-child { padding-bottom:0 }

/* Hjerte på hyttebokinnlegg */
.log-entry-actions { display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:.8rem 0 .2rem }
.like-btn { display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--border-strong);background:var(--card);color:var(--text);border-radius:999px;padding:.4rem .85rem;font:inherit;font-size:.88rem;cursor:pointer;transition:border-color .15s ease,background-color .15s ease }
.like-btn:hover { border-color:var(--green) }
.like-btn.is-liked { background:color-mix(in srgb, var(--danger) 10%, var(--card));border-color:color-mix(in srgb, var(--danger) 45%, var(--border-strong));font-weight:650 }

/* Forklaring og bilde på et sjekkpunkt */
.checklist-help { margin:.3rem 0 0 2.1rem }
.checklist-help > summary { cursor:pointer;list-style:none;font-size:.82rem;color:var(--muted);display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .1rem }
.checklist-help > summary::-webkit-details-marker { display:none }
.checklist-help > summary:hover { color:var(--green-dark) }
.checklist-help__body { margin-top:.45rem;padding:.7rem .85rem;background:var(--surface-soft);border:1px solid var(--border);border-radius:10px }
.checklist-help__body p { margin:0 0 .5rem;font-size:.92rem }
.checklist-help__body p:last-child { margin-bottom:0 }
.checklist-help__body img { display:block;width:100%;max-width:260px;border-radius:8px;border:1px solid var(--border) }

/* Sjekkpunkt-innhold i innstillingene */
.checklist-extra { width:100%;margin-top:.4rem }
.checklist-extra > summary { cursor:pointer;list-style:none;font-size:.83rem;color:var(--muted);padding:.2rem 0 }
.checklist-extra > summary::-webkit-details-marker { display:none }
.checklist-extra > summary:hover { color:var(--green-dark) }
.checklist-extra__body { display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1rem;margin-top:.5rem;padding:.85rem;background:var(--surface-soft);border:1px solid var(--border);border-radius:10px }
.checklist-extra__body .stack-form { max-width:none }
.checklist-extra__photo { display:flex;flex-direction:column;gap:.5rem }
.checklist-extra__photo img { display:block;width:100%;max-width:180px;border-radius:8px;border:1px solid var(--border) }

/* QR-kode for å bli med */
.join-qr { display:flex;flex-wrap:wrap;gap:1.4rem;align-items:flex-start;margin-top:.8rem }
.join-qr__code { background:#fff;padding:.6rem;border-radius:12px;border:1px solid var(--border);line-height:0;flex:0 0 auto }
.join-qr__code svg { width:170px;height:170px;display:block }
.join-qr__side { flex:1;min-width:min(260px,100%);display:flex;flex-direction:column;gap:.6rem }
.join-qr__link { display:flex;flex-direction:column;gap:.3rem;font-size:.88rem;font-weight:600;color:var(--muted) }
.join-qr__link input { padding:.55rem .65rem;background:var(--surface-soft);font-weight:400 }

/* Husregler og fakta */
.info-columns { display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin:1rem 0 }
.info-group { background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.2rem;box-shadow:var(--shadow-soft) }
.info-group__header h2 { margin:0 0 .15rem }
.info-group__header p { margin:0 0 .8rem }
.info-list { list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.7rem }
.info-item { padding:.8rem .9rem;background:var(--surface-soft);border:1px solid var(--border);border-radius:11px }
.info-item h3 { margin:0;font-size:1.02rem }
.info-item__body { margin:.3rem 0 0;white-space:pre-wrap;overflow-wrap:anywhere }
.info-item__edit { margin-top:.5rem }
.info-item__edit > summary { cursor:pointer;list-style:none;font-size:.85rem }
.info-item__edit > summary::-webkit-details-marker { display:none }
.info-add > summary { cursor:pointer;list-style:none;display:inline-flex;align-items:center }
.info-add > summary::-webkit-details-marker { display:none }
.info-add .stack-form { margin-top:.8rem }

/* Statistikk: budsjett og tabell */
.budget-bar { margin:.4rem 0 .3rem }
.stat-value.is-over { color:var(--danger) }
.data-table .num { text-align:right;white-space:nowrap }
.guest-count { margin:1rem 0 }
.guest-count .inline-fields { margin:0 }

/* Nedlasting av originalbildet fra lysbordet */
.image-dialog__download { position:absolute;left:.9rem;top:.75rem;color:#fff;font-size:.85rem;opacity:.85;text-decoration:underline;text-underline-offset:3px }
.image-dialog__download:hover { opacity:1;color:#fff }

/* Nettbrett og små bærbare. Todelte oppsett som er behagelige på en stor skjerm
   blir trange lenge før telefonbredden — de deles her i stedet. */
@media (max-width: 900px) {
  .two-col { grid-template-columns:1fr }
  .checklist-extra__body { grid-template-columns:1fr }
  .profile-layout { grid-template-columns:200px 1fr }
}

@media (max-width: 760px) {
  .checklist-columns { grid-template-columns:1fr }
  .checklist-group + .checklist-group { border-left:0;border-top:1px solid var(--border) }
  .expense-card { grid-template-columns:1fr }
  .document-card { grid-template-columns:auto 1fr;row-gap:.5rem }
  .document-card > :last-child { grid-column:1/-1 }
}

@media (max-width: 600px) {
  .calendar-day { min-height: 48px; font-size: 0.7rem; }
  .profile-layout { grid-template-columns:1fr }.profile-card{position:static}
  .topbar{gap:.7rem}.cabin-nav{order:3;width:100%;flex-wrap:wrap;gap:.35rem .95rem}.cabin-nav a{white-space:nowrap}
  /* Toppraden har fått en bjelle i tillegg. Navnet er det som kan gå — avataren
     står igjen og sier hvem man er logget inn som. */
  .user-menu span { display:none }
  .user-menu img { width:34px;height:34px }
  .weather__now h2 { font-size:1.05rem }
  .weather__days { grid-template-columns:repeat(4,1fr);gap:.35rem }
  .weather__days li { padding:.5rem .15rem }
  .weather__symbol { font-size:1.25rem }
  .weather__range { font-size:.82rem }
  .weather__rain { font-size:.68rem }
  .join-qr__code svg { width:150px;height:150px }
  .notification { padding:.75rem .85rem }
  /* Sletteknappen legger seg under teksten framfor å presse den sammen. */
  .notification { flex-wrap:wrap }
  .notification > form { margin-left:auto }
  .checklist-help { margin-left:0 }
  .recurrence-fields { grid-template-columns:1fr }.maintenance-plan-card>header{grid-template-columns:auto 1fr}.maintenance-plan-card time{grid-column:2}
  .logbook-list>li.log-entry { padding-left:2rem }
  .logbook-list>li.log-entry::before { left:1.25rem }
  .page-intro { margin-bottom:1.4rem }
  /* Måneden på egen linje over to like brede blaknapper. */
  .calendar-header h2 { order:-1;width:100%;text-align:center;margin:.2rem 0 .3rem }
  .calendar-header .btn-secondary { flex:1;text-align:center }
  .holiday-badge { display:none }
  .calendar-holidays { display:block }
}

/* Fingertupper trenger mer å treffe enn en musepeker. Gjelder bare enheter som
   faktisk pekes på med fingeren — mus og styreflate berøres ikke. */
@media (pointer: coarse) {
  .cabin-nav { row-gap: 0; }
  .cabin-nav a, .nav-dropdown-toggle { min-height: 44px; display: inline-flex; align-items: center; }
  .nav-dropdown-menu a { min-height: 44px; display: flex; align-items: center; }
  .theme-toggle { width: 44px; height: 44px; }
  .bell { width: 44px; height: 44px; }
  .link-btn { min-height: 44px; }
  .like-btn { min-height: 40px; }
  .checklist-help > summary, .checklist-extra > summary, .info-item__edit > summary, .info-add > summary { min-height: 40px; display: inline-flex; align-items: center; }
  .small-btn { min-height: 40px; }
  .mini-btn { min-height: 36px; padding: .35rem .6rem; }
  .share-pill { min-height: 40px; }
  button.supply-status { min-height: 38px; padding: .35rem .8rem; }
  .photo-delete-btn { width: 34px; height: 34px; font-size: .95rem; }
  .drag-handle { min-width: 44px; min-height: 44px; font-size: 1.35rem; }
  .dialog-close, .changelog-dialog__close, .image-dialog__close { min-width: 44px; min-height: 44px; }
  /* inline-flex, ikke flex: flere av disse er stylet som knapper og skal ikke
     strekke seg over hele bredden. */
  .complete-plan summary, .new-plan summary, .new-entry summary, .task-edit summary { min-height: 40px; display: inline-flex; align-items: center; }
  .stay-year>summary, .stay-month>summary { min-height: 48px; }
  .version-btn { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  a.card:hover, .booking-card:hover { transform: none; }
}

/* Versjon og endringslogg */
/* Bunnpolstringen tar høyde for hjemindikatoren på iPhone når appen er lagt
   til på hjemskjermen — motstykket til safe-area-inset-top i topbaren. */
.appfoot{display:flex;justify-content:center;padding:2rem 1rem calc(1.5rem + env(safe-area-inset-bottom))}
.version-btn{border:0;background:transparent;color:var(--muted);font:inherit;font-size:.82rem;cursor:pointer;padding:.35rem .6rem;border-radius:8px;display:inline-flex;align-items:center;gap:.4rem}
.version-btn:hover,.version-btn:focus-visible{color:var(--green);background:var(--surface-soft)}
/* Uleste endringer. Merket bæres av både en farget prikk og ordet «Nytt» —
   fargen alene ville vært usynlig for den som ikke skiller den fra grå. */
.version-btn.has-news{color:var(--green);font-weight:650}
:root[data-theme="dark"] .version-btn.has-news{color:var(--green-dark)}
.version-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--green);flex:0 0 auto}
:root[data-theme="dark"] .version-dot{background:var(--green-dark)}
.version-new{background:var(--green);color:#fff;border-radius:999px;padding:.05rem .45rem;font-size:.7rem;font-weight:700;letter-spacing:.02em}
:root[data-theme="dark"] .version-new{background:var(--green-dark);color:var(--bg)}
.changelog-dialog{width:min(94vw,560px);max-height:min(86vh,720px);padding:0;border:1px solid var(--border);border-radius:16px;background:var(--card);color:var(--text);overflow:hidden}
.changelog-dialog::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
.changelog-dialog__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border);background:var(--surface-soft)}
.changelog-dialog__head h2{margin:0;font-size:1.25rem}
.changelog-dialog__close{border:0;background:transparent;color:var(--muted);font-size:1.8rem;line-height:1;cursor:pointer;padding:0 .25rem}
.changelog-dialog__close:hover{color:var(--text)}
.changelog-dialog__body{padding:.5rem 1.25rem 1.25rem;overflow-y:auto;max-height:calc(min(86vh,720px) - 4rem)}
.changelog-dialog__body section{padding:1rem 0;border-bottom:1px solid var(--rule)}
.changelog-dialog__body section:last-child{border-bottom:0}
.changelog-dialog__body h3{margin:0 0 .5rem;font-size:1rem;font-family:var(--font-display);font-weight:600}
.changelog-dialog__body h3 span{color:var(--muted);font-family:inherit;font-size:.8rem;font-weight:400;margin-left:.4rem}
.changelog-dialog__body ul{margin:0;padding-left:1.15rem;display:flex;flex-direction:column;gap:.4rem}
.changelog-dialog__body li{line-height:1.45}

/* Fot med juridiske lenker */
.appfoot{flex-direction:column;align-items:center;gap:.5rem}
.appfoot__links{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem 1.1rem}
.appfoot__links a{color:var(--muted);font-size:.82rem}
.appfoot__links a:hover{color:var(--green-dark)}

/* Driftsmelding */
.maintenance-banner{margin:0;padding:.7rem 1rem;text-align:center;background:var(--ochre-soft);color:var(--text);border-bottom:1px solid var(--border);font-size:.92rem}

/* Landingsside */
.landing-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:2.5rem;align-items:start;margin:1rem 0 3rem}
.landing-hero h1{font-size:clamp(2.2rem,5.2vw,3.4rem);line-height:1.06;letter-spacing:-.025em;margin:.2rem 0 .8rem;font-weight:540}
.landing-lead{font-size:1.08rem;color:var(--muted);max-width:52ch;margin:0 0 1.5rem}
.landing-actions{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.landing-actions .btn-primary,.landing-actions .btn-secondary{display:inline-block;text-decoration:none}
.landing-actions__link{font-size:.92rem;padding:.2rem 0}
.landing-note{font-size:.85rem;margin-top:1rem}
.landing-highlights{list-style:none;margin:0;padding:1.4rem;display:flex;flex-direction:column;gap:.85rem;background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-soft)}
.landing-highlights li{padding-left:1.3rem;position:relative;line-height:1.5;font-size:.95rem}
.landing-highlights li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;border-radius:50%;background:var(--green)}
.landing-highlights strong{font-family:var(--font-display);font-weight:600}
.landing-counters{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin:0 0 2rem;padding:1.3rem 1.2rem;background:var(--card);border:1px solid var(--border);border-radius:16px;text-align:center}
.landing-counters div{display:flex;flex-direction:column;gap:.15rem}
.landing-counters strong{font-family:var(--font-display);font-size:1.9rem;line-height:1.1;color:var(--green)}
.landing-counters span{font-size:.88rem;color:var(--muted)}
.landing-section{border-top:1px solid var(--rule);padding-top:2rem;margin-bottom:2rem}
.landing-section h2{margin:0 0 1.2rem}
.landing-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-bottom:1.2rem}
.landing-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.2rem}
.landing-card h3{margin:0 0 .4rem}
.landing-card p{margin:0;color:var(--muted);font-size:.93rem}
.landing-steps{list-style:none;counter-reset:step;margin:0 0 1.2rem;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.landing-steps li{counter-increment:step;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.2rem 1.1rem 3.4rem;position:relative;color:var(--muted);font-size:.95rem;line-height:1.5}
.landing-steps li::before{content:counter(step);position:absolute;left:1.1rem;top:1rem;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--green);color:var(--topbar-ink);font-family:var(--font-display);font-size:.95rem;display:flex;align-items:center;justify-content:center}
.landing-steps strong{color:var(--text);font-family:var(--font-display);font-weight:600}
.landing-faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.4rem 2rem;margin-bottom:1.2rem}
.landing-faq__item h3{margin:0 0 .35rem;font-size:1.05rem}
.landing-faq__item p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.55;max-width:60ch}
@media (max-width:780px){.landing-hero{grid-template-columns:1fr;gap:1.8rem}}

/* Juridiske sider og annen løpende tekst */
.prose{max-width:70ch}
.prose.narrow{max-width:56ch}
.prose h2{margin:2.2rem 0 .6rem;font-size:1.3rem}
.prose h2:first-of-type{margin-top:1.6rem}
.prose p,.prose li{line-height:1.65}
.prose ul,.prose ol{padding-left:1.2rem;display:flex;flex-direction:column;gap:.5rem}
.prose code{background:var(--surface-soft);border:1px solid var(--border);border-radius:6px;padding:.1rem .35rem;font-size:.88em}
.contact-list dt{font-family:var(--font-display);font-weight:600;margin-top:1.2rem}
.contact-list dd{margin:.25rem 0 0;color:var(--muted)}
.table-scroll{overflow-x:auto;margin:1rem 0}
.data-table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.92rem}
/* Tabeller som bare består av et navn og noen tall skal få plass på en telefon
   framfor å måtte dras sidelengs. Må stå etter regelen over — begge har én
   klasse, så det er rekkefølgen som avgjør, ikke mediaspørringen. */
@media (max-width:600px){
  .data-table--compact{min-width:0;font-size:.85rem}
  .data-table--compact th,.data-table--compact td{padding:.45rem .3rem}
}
.data-table th,.data-table td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--rule);vertical-align:top}
.data-table th{font-family:var(--font-display);font-weight:600}
.small-print{font-size:.85rem}

/* Tofaktor */
.totp-setup{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;margin:1.2rem 0}
.totp-qr{background:#fff;padding:.6rem;border-radius:12px;border:1px solid var(--border);line-height:0}
.totp-qr svg{width:200px;height:200px;display:block}
.totp-secret{font-size:1.05rem;letter-spacing:.06em}
.steps{padding-left:1.2rem;display:flex;flex-direction:column;gap:.4rem;color:var(--muted)}
.recovery-codes{list-style:none;margin:1rem 0;padding:1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.5rem;background:var(--surface-soft);border:1px dashed var(--border-strong);border-radius:12px}
.recovery-codes code{font-size:1rem;letter-spacing:.04em;background:transparent;border:0;padding:0}
.status-pill{display:inline-block;margin:0 0 .6rem;padding:.15rem .7rem;border-radius:999px;font-size:.8rem;font-weight:600}
.status-pill--on{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green-dark)}
.status-pill--off{background:var(--ochre-soft);color:var(--ochre)}
.device-list{list-style:none;margin:0 0 .8rem;padding:0;display:flex;flex-direction:column;gap:.5rem}
.device-list li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem;padding:.5rem .7rem;background:var(--surface-soft);border-radius:10px;font-size:.92rem}

/* Lagringsplass */
.quota-figure{margin:0 0 .5rem}
.quota-bar{height:.55rem;border-radius:999px;background:var(--surface-soft);border:1px solid var(--border);overflow:hidden}
.quota-bar__fill{display:block;height:100%;background:var(--green);border-radius:999px}
.quota-bar__fill.is-full{background:var(--danger)}

/* Driftsstatistikk (/drift) */
.stats-page h2{margin-top:2rem}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin:1rem 0 1.4rem}
.stat{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:.85rem 1rem;display:flex;flex-direction:column;gap:.15rem}
.stat__value{font-family:var(--font-display);font-size:1.5rem;line-height:1.15;color:var(--green)}
.stat__label{font-size:.83rem;color:var(--muted)}
.stats-table{width:100%;border-collapse:collapse;margin:.6rem 0 1.4rem;font-size:.93rem}
.stats-table th,.stats-table td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid var(--rule)}
.stats-table .num{text-align:right;white-space:nowrap}
.stats-facts{list-style:none;padding:0;margin:1rem 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.5rem}
.stats-facts li{font-size:.93rem}
.stats-facts strong{display:block;font-size:.8rem;color:var(--muted);font-weight:600}