:root {
    --bg: #F5F1E4;
    --surface: #FFFFFF;
    --ink: #1A1A1A;
    --muted: #6B6B63;
    --hairline: #DDD4BC;
    --p1: #0E8F5E;
    --p1-tint: #0E8F5E33;
    --p2: #E0492B;
    --p2-tint: #E0492B33;
    --ring: #F2B705;
    --request: #1D63C9;
    --solid-bg: #1A1A1A;
    --solid-fg: #FFFFFF;
}

/* "Kraftig" — endnu mere mættede, kontrastrige farver end standard, så det er nemt at se på afstand, hvem der har barnet. */
body[data-theme="vivid"] {
    --bg: #FAFAF6;
    --surface: #FFFFFF;
    --ink: #101010;
    --muted: #58584F;
    --hairline: #D6CCAE;
    --p1: #00A876;
    --p1-tint: #00A8764D;
    --p2: #FF4713;
    --p2-tint: #FF47134D;
    --ring: #FFC400;
    --request: #0062FF;
    --solid-bg: #101010;
    --solid-fg: #FFFFFF;
}

/* "Rum" — mørkt, neonfarvet tema. */
body[data-theme="space"] {
    --bg: #0B0B18;
    --surface: #14142A;
    --ink: #ECEAFF;
    --muted: #9490C4;
    --hairline: #2C2A4A;
    --p1: #39FF14;
    --p1-tint: #39FF14CC;
    --p2: #FF10F0;
    --p2-tint: #FF10F0CC;
    --ring: #FCEE4B;
    --request: #00D4FF;
    --solid-bg: #00F5D4;
    --solid-fg: #0B0B18;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    transition: background-color 0.2s, color 0.2s;
}

.page {
    max-width: 40rem;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.brand-name {
    font-family: Georgia, serif;
    font-size: 1.15rem;
}

.btn-ghost {
    font: inherit;
    font-size: 0.85rem;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.btn-ghost:hover { background: var(--surface); }
.btn-ghost.active {
    background: var(--solid-bg);
    color: var(--solid-fg);
    border-color: var(--solid-bg);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-dark {
    font: inherit;
    font-size: 0.75rem;
    color: var(--solid-fg);
    background: var(--solid-bg);
    border: none;
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    cursor: pointer;
}

.invite-panel {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 0.75rem;
    padding: 1.5rem;
}
.invite-panel h1 {
    font-family: Georgia, serif;
    font-size: 1.3rem;
    margin: 0 0 0.5rem;
}
.invite-panel p {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.invite-link-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg);
    border: 1px solid var(--hairline);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin: 1rem 0;
    font-size: 0.85rem;
}
.invite-link-row span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.regen-form { margin-top: 0.5rem; }

.you-are {
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 0.75rem;
}
.you-are span { font-weight: 600; }

.lock-status {
    text-align: center;
    font-size: 0.8rem;
    color: var(--request);
    margin: -0.5rem 0 1rem;
}

.toolbar-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.month-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.month-label {
    font-family: Georgia, serif;
    font-size: 1.4rem;
    min-width: 13rem;
    text-align: center;
}
.icon-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: none;
    background: transparent;
    font-size: 1.1rem;
    color: var(--ink);
    cursor: pointer;
}
.icon-btn:hover { background: var(--surface); }

.calendar-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 0.75rem;
    padding: 1.1rem;
}

.weekdays {
    display: grid;
    grid-template-columns: 1.6rem repeat(7, 1fr);
    margin-bottom: 0.4rem;
}
.weekdays span {
    text-align: center;
    font-size: 0.7rem;
    color: var(--muted);
    padding: 0.25rem 0;
}

.calendar-grid {
    display: grid;
    grid-template-columns: 1.6rem repeat(7, 1fr);
    gap: 0.25rem;
}

.week-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: var(--muted);
    writing-mode: vertical-rl;
    text-orientation: mixed;
}
.week-label.excluded {
    color: var(--request);
    font-weight: 600;
}

.day-cell {
    position: relative;
    aspect-ratio: 1 / 1;
}
.day-cell.outside { opacity: 0.3; }

.day-halves {
    position: absolute;
    inset: 0;
    display: flex;
    border-radius: 0.375rem;
    overflow: hidden;
}
.half-btn {
    width: 50%;
    height: 100%;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: transform 0.1s;
}
.half-btn:active { transform: scale(0.95); }
.half-btn:disabled { cursor: default; }

.day-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    line-height: 1.1;
    gap: 1px;
}

.day-number {
    font-size: 0.85rem;
    color: var(--ink);
}
.day-number.owned { font-weight: 600; }

.day-swap-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--request);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
}
.day-swap-icon.left { left: 0; }
.day-swap-icon.right { right: 0; }

.day-envelope {
    font-size: 1.5rem;
    pointer-events: auto;
    cursor: pointer;
    background: none;
    border: none;
    padding: 1px;
    line-height: 1;
}

.day-note-snippet {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 96%;
}
.day-note-line {
    font-size: 0.65rem;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--muted);
}

/* Private noter: blå konvolut med lås (kun synlig for den, der har skrevet noten). */
.day-note-icons {
    display: flex;
    align-items: center;
    gap: 1px;
}
.day-note-icons.both .day-envelope {
    font-size: 1.1rem;
}
.day-envelope-private {
    position: relative;
    color: #1D63C9;
}
.day-envelope-lock {
    position: absolute;
    right: -0.15em;
    bottom: -0.1em;
    font-size: 0.5em;
}
.day-note-line.private {
    color: #1D63C9;
}
.note-private-label {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: #1D63C9;
}
.modal-card textarea.note-private-text {
    margin-top: 0.25rem;
    border-color: #1D63C933;
    border-style: dashed;
}

.today-ring {
    position: absolute;
    inset: 0;
    border-radius: 0.375rem;
    box-shadow: inset 0 0 0 1.5px var(--ink);
    pointer-events: none;
}

.legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.25rem;
    margin-top: 1rem;
    font-size: 0.75rem;
    color: var(--muted);
}
.legend .dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    margin-right: 0.35rem;
    vertical-align: middle;
}
.legend .ring-dot {
    box-shadow: inset 0 0 0 1.5px var(--ring);
}

.theme-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
}
.theme-label {
    font-size: 0.75rem;
    color: var(--muted);
    margin-right: 0.25rem;
}
.theme-btn {
    font: inherit;
    font-size: 0.75rem;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    cursor: pointer;
}
.theme-btn.active {
    background: var(--solid-bg);
    color: var(--solid-fg);
    border-color: var(--solid-bg);
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 50;
}
.modal-overlay[hidden] { display: none; }
.modal-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 0.75rem;
    padding: 1.25rem;
    width: 100%;
    max-width: 22rem;
}
.lock-choice {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--hairline);
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
}
.lock-choice:hover {
    border-color: var(--ring);
}
.lock-choice strong {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.15rem;
}
.lock-choice span {
    display: block;
    font-size: 0.78rem;
    color: var(--muted);
}

/* Gentagende noter: knap + valg i notedialogen og ↻ på konvolutten i kalenderen. */
.note-repeat {
    margin-top: 0.5rem;
}
.note-repeat-toggle {
    font: inherit;
    font-size: 0.85rem;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    cursor: pointer;
}
.note-repeat-toggle.active {
    border-color: var(--ring);
    background: var(--p1-tint);
}
.note-repeat-toggle:disabled {
    cursor: default;
    opacity: 1;
}
.note-repeat-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
}
.note-repeat-options[hidden] {
    display: none;
}
.note-repeat-until {
    flex-basis: 100%;
}
.note-repeat-until input {
    font: inherit;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--hairline);
    border-radius: 0.3rem;
    background: var(--bg);
    color: inherit;
}
.day-envelope-repeating {
    position: relative;
}
.day-envelope-repeat {
    position: absolute;
    right: -0.25em;
    top: -0.2em;
    font-size: 0.5em;
    font-weight: 700;
    color: var(--ring);
}
.modal-drag-handle {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0.35rem;
    color: var(--muted);
    cursor: move;
}
.modal-drag-handle:hover {
    background: var(--bg);
    color: var(--ink);
}
#requestModal .modal-card h2 {
    padding-right: 2rem;
}
.modal-card h2 {
    font-family: Georgia, serif;
    font-size: 1.05rem;
    margin: 0 0 0.75rem;
    color: var(--ink);
}
.modal-card textarea {
    width: 100%;
    font: inherit;
    font-size: 0.85rem;
    padding: 0.5rem;
    border: 1px solid var(--hairline);
    border-radius: 0.5rem;
    background: var(--bg);
    color: var(--ink);
    resize: vertical;
}
.modal-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--solid-bg);
    color: var(--solid-fg);
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Bruges på profil- og statistiksiden (formularfelter, fejl/succes-bokse) */
.field {
    margin-bottom: 1.25rem;
}
.field label {
    display: block;
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 0.4rem;
}
.field input {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--hairline);
    border-radius: 0.6rem;
    background: var(--bg);
    color: var(--ink);
}
.field input:focus {
    outline: none;
    border-color: var(--p1);
}

.auth-errors {
    background: #C0392B14;
    color: #9B2C1F;
    border-radius: 0.6rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    line-height: 1.4;
}
.auth-errors p { margin: 0; }
.auth-errors p + p { margin-top: 0.35rem; }

.auth-note {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 0.6rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

/* Chat-ikon med ulæst-lys */
.chat-icon-wrap {
    position: relative;
    display: inline-block;
}
.chat-unread-dot {
    position: absolute;
    top: -0.15rem;
    right: -0.15rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #E0492B;
    box-shadow: 0 0 0 2px var(--bg);
}

/* ---------- Ekstra farvetemaer (premium) ---------- */

/* "Rosa" — blødt, romantisk pink/lavendel. */
body[data-theme="rosa"] {
    --bg: #FCEEF3;
    --surface: #FFFFFF;
    --ink: #4A2436;
    --muted: #9C6B7A;
    --hairline: #F0D3DE;
    --p1: #D6558B;
    --p1-tint: #D6558B33;
    --p2: #7A4FA3;
    --p2-tint: #7A4FA333;
    --ring: #F2A6C4;
    --request: #B0559C;
    --solid-bg: #4A2436;
    --solid-fg: #FCEEF3;
}

/* "Alien" — giftgrøn/neonlilla sci-fi. */
body[data-theme="alien"] {
    --bg: #0C1A12;
    --surface: #132B1D;
    --ink: #D9FFE8;
    --muted: #7FA893;
    --hairline: #1F3D2C;
    --p1: #39FF14;
    --p1-tint: #39FF1440;
    --p2: #B026FF;
    --p2-tint: #B026FF40;
    --ring: #C6FF00;
    --request: #00E5C7;
    --solid-bg: #39FF14;
    --solid-fg: #0C1A12;
}

/* "C64" — Commodore 64s ikoniske blå skærm. */
/* "C64" — bruger udelukkende Commodore 64'ens rigtige 16-farvers palet
   (de officielle RGB-værdier: 0000AA blå, 0088FF lyseblå, osv.):
   mørkeblå baggrund, sort "skærm", lyseblå kant/detaljer — som den
   klassiske opstarts-skærm. */
body[data-theme="c64"] {
    --bg: #0088FF;
    --surface: #0000AA;
    --ink: #FFFFFF;
    --muted: #BBBBBB;
    --hairline: #0000AA;
    --p1: #CC44CC;
    --p1-tint: #CC44CC;
    --p2: #0088FF;
    --p2-tint: #0088FF;
    --ring: #EEEE77;
    --request: #AAFFEE;
    --solid-bg: #FFFFFF;
    --solid-fg: #0000AA;
}

/* "Amiga" — Amiga Workbenchs blå/orange. */
body[data-theme="amiga"] {
    --bg: #0055AA;
    --surface: #1166BB;
    --ink: #FFFFFF;
    --muted: #AACCEE;
    --hairline: #3377BB;
    --p1: #FF8800;
    --p1-tint: #FF880040;
    --p2: #FFFFFF;
    --p2-tint: #FFFFFF33;
    --ring: #FFCC00;
    --request: #FFCC00;
    --solid-bg: #FF8800;
    --solid-fg: #0055AA;
}

/* "Army" — militærgrøn/khaki. */
body[data-theme="army"] {
    --bg: #E8E4D0;
    --surface: #F3F0E2;
    --ink: #262410;
    --muted: #6B6852;
    --hairline: #C9C4A4;
    --p1: #333D14;
    --p1-tint: #333D1440;
    --p2: #C9A227;
    --p2-tint: #C9A22745;
    --ring: #8A6D1F;
    --request: #5A6B8C;
    --solid-bg: #262410;
    --solid-fg: #E8E4D0;
}

/* "Sky" — luftig himmelblå/solgul. */
body[data-theme="sky"] {
    --bg: #EAF6FC;
    --surface: #FFFFFF;
    --ink: #1E3A4A;
    --muted: #5C7A8A;
    --hairline: #CDE8F5;
    --p1: #2E9CCA;
    --p1-tint: #2E9CCA33;
    --p2: #F2B705;
    --p2-tint: #F2B70533;
    --ring: #7FD1EE;
    --request: #4A7FE0;
    --solid-bg: #1E3A4A;
    --solid-fg: #EAF6FC;
}

/* "Cyber" — hacker-terminal: sort baggrund, grøn skrift, neon-detaljer. */
body[data-theme="cyber"] {
    --bg: #0A0A0A;
    --surface: #121212;
    --ink: #00FF41;
    --muted: #1F8A3D;
    --hairline: #1A4D2E;
    --p1: #00FF41;
    --p1-tint: #00FF414D;
    --p2: #FF2E9A;
    --p2-tint: #FF2E9A4D;
    --ring: #FFB000;
    --request: #00E5FF;
    --solid-bg: #00FF41;
    --solid-fg: #0A0A0A;
}

/* "Nature" — skovgrøn/træbrun. */
body[data-theme="nature"] {
    --bg: #F1EEE2;
    --surface: #FAF8F0;
    --ink: #2A2E1F;
    --muted: #6E6A54;
    --hairline: #DCD6B8;
    --p1: #3D6B35;
    --p1-tint: #3D6B3533;
    --p2: #8A5A3B;
    --p2-tint: #8A5A3B33;
    --ring: #B5C99A;
    --request: #4A8A7A;
    --solid-bg: #2A2E1F;
    --solid-fg: #F1EEE2;
}

/* "Fashion" — magenta/guld, redaktionel stil. */
body[data-theme="fashion"] {
    --bg: #16141A;
    --surface: #211E27;
    --ink: #F5EFF0;
    --muted: #B7A9C0;
    --hairline: #322C3A;
    --p1: #E10098;
    --p1-tint: #E1009840;
    --p2: #D4AF37;
    --p2-tint: #D4AF3740;
    --ring: #D4AF37;
    --request: #7B5EA7;
    --solid-bg: #E10098;
    --solid-fg: #16141A;
}

/* "Sunset" — solnedgang: dyb lilla/orange/guld. */
body[data-theme="sunset"] {
    --bg: #2E1A2E;
    --surface: #3D2440;
    --ink: #FCEBE0;
    --muted: #C9A0B5;
    --hairline: #4A2C4A;
    --p1: #FF6B35;
    --p1-tint: #FF6B3540;
    --p2: #FFC93C;
    --p2-tint: #FFC93C40;
    --ring: #FF6B35;
    --request: #C74B7A;
    --solid-bg: #FF6B35;
    --solid-fg: #2E1A2E;
}

/* "Candy" — sødt pastel-slik. */
body[data-theme="candy"] {
    --bg: #FFF6FB;
    --surface: #FFFFFF;
    --ink: #4A3040;
    --muted: #A583A0;
    --hairline: #FBDDEF;
    --p1: #FF6FB5;
    --p1-tint: #FF6FB533;
    --p2: #6FD8FF;
    --p2-tint: #6FD8FF33;
    --ring: #FFD86F;
    --request: #B57FE0;
    --solid-bg: #4A3040;
    --solid-fg: #FFF6FB;
}

/* "Ocean" — dybhav: turkis/blå. */
body[data-theme="ocean"] {
    --bg: #08202E;
    --surface: #0F2E40;
    --ink: #DFF3F5;
    --muted: #7FA9BC;
    --hairline: #143C50;
    --p1: #1FA0A0;
    --p1-tint: #1FA0A040;
    --p2: #3D7CC9;
    --p2-tint: #3D7CC940;
    --ring: #4FD6D6;
    --request: #6BC7E8;
    --solid-bg: #1FA0A0;
    --solid-fg: #08202E;
}

/* "Donald D." (key donaldduck) — det klassiske ugeblad-omslag: gulnet avispapir, sort skrift, rødt og dæmpet okker. */
body[data-theme="donaldduck"] {
    --bg: #EFE3C6;
    --surface: #F6EDD6;
    --ink: #1E1E1E;
    --muted: #6B3B33;
    --hairline: #DDB49C;
    --p1: #E64E49;
    --p1-tint: #E64E4940;
    --p2: #E0B03A;
    --p2-tint: #E0B03A4D;
    --ring: #D13E38;
    --request: #D13E38;
    --solid-bg: #1E1E1E;
    --solid-fg: #EFE3C6;
}

/* "Wastelands" (key radlands) — neon-synthwave frem for den klassiske beige postapokalypse:
   dyb lilla nat, radioaktiv gulgrøn og magenta, lavendel og solnedgangsorange. */
body[data-theme="radlands"] {
    --bg: #0D0221;
    --surface: #1A0B3D;
    --ink: #F7EEFF;
    --muted: #B39DDB;
    --hairline: #3B1F78;
    --p1: #C6FF00;
    --p1-tint: #C6FF0059;
    --p2: #FF2BD6;
    --p2-tint: #FF2BD659;
    --ring: #D9B8FF;
    --request: #FF7A1A;
    --solid-bg: #FF2BD6;
    --solid-fg: #0D0221;
}

/* Nedtoning af (endnu) ikke-tilkøbte funktioner — sektionen forbliver synlig
   og læsbar, men fremstår tydeligt inaktiv, med et lille tilkøbs-mærkat. */
.premium-dimmed {
    opacity: 0.55;
    filter: grayscale(35%);
    position: relative;
}
.premium-dimmed::after {
    content: "";
    position: absolute;
    inset: 0;
    cursor: not-allowed;
    z-index: 5;
}
.premium-badge {
    display: inline-block;
    font-size: 0.72rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: #E2A63B33;
    border: 1px solid #E2A63B;
    color: #8A6414;
    margin-left: 0.5rem;
    white-space: nowrap;
}

/* Høj kontrast — kan slås til uafhængigt af hvilket af de 17 temaer, der
   er valgt. Selve farveboostet sættes direkte af JavaScript (som inline
   CSS-variabler på <body>), da det er mere pålideligt på tværs af
   browsere end at beregne det her i CSS'en. */
body.high-contrast .day-number {
    font-weight: 700;
}

/* ---------- Vejledning (guide.php) ---------- */
.guide-lang-switch {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0 1.5rem;
}
.guide-lang-switch a {
    font-size: 0.8rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--hairline);
    color: var(--muted);
    text-decoration: none;
}
.guide-lang-switch a.active {
    background: var(--solid-bg);
    color: var(--solid-fg);
    border-color: var(--solid-bg);
}
.guide-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.4rem 1rem;
}
.guide-toc-list a {
    font-size: 0.85rem;
    color: var(--p1);
    text-decoration: none;
}
.guide-toc-list a:hover {
    text-decoration: underline;
}
.guide-section {
    position: relative;
    scroll-margin-top: 1rem;
}
.guide-step-badge {
    position: absolute;
    top: -0.6rem;
    left: -0.6rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--p1);
    color: var(--solid-fg);
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px var(--surface);
}
.guide-example {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--p1-tint);
    border-left: 3px solid var(--p1);
    border-radius: 0 0.4rem 0.4rem 0;
    font-size: 0.85rem;
}
.guide-diagram {
    margin: 0.75rem 0;
}

.guide-demo {
    border: 1px dashed var(--p1);
    border-radius: 0.6rem;
    padding: 1rem;
    margin-top: 1.5rem;
    background: var(--bg);
}
.guide-demo-modes {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.75rem 0 1.25rem;
}
.guide-demo-cells {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.guide-demo-cells .day-cell {
    width: 5.5rem;
    border: 1px solid var(--hairline);
    border-radius: 0.375rem;
}
.guide-demo-cells .day-number {
    pointer-events: auto;
    cursor: pointer;
}
.guide-demo-highlight {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    animation: guide-demo-pulse 1.4s ease-in-out infinite;
}
@keyframes guide-demo-pulse {
    0%, 100% { outline-color: var(--ring); }
    50% { outline-color: transparent; }
}
.half-btn.guide-demo-highlight {
    outline: none;
    animation: guide-demo-pulse-inset 1.4s ease-in-out infinite;
}
@keyframes guide-demo-pulse-inset {
    0%, 100% { box-shadow: inset 0 0 0 3px var(--ring); }
    50% { box-shadow: inset 0 0 0 3px transparent; }
}
.guide-demo-note-input {
    width: 90%;
    font-size: 0.6rem;
    padding: 1px 3px;
    border: 1px solid var(--hairline);
    border-radius: 0.2rem;
    text-align: center;
    pointer-events: auto;
}
.guide-demo-steps {
    border-top: 1px solid var(--hairline);
    padding-top: 0.9rem;
}
.guide-demo-step-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}
.guide-demo-step-indicator {
    font-size: 0.78rem;
    color: var(--muted);
}
.guide-demo-offer-confirm {
    margin-top: 0.75rem;
}

/* ---------- Listevisning (list.php) ---------- */
.list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.list-card {
    padding-top: 0.5rem;
}
.list-load-btn {
    display: block;
    width: 100%;
    margin: 0.5rem 0;
}
.list-status {
    text-align: center;
    color: var(--muted);
    font-size: 0.85rem;
}
.list-month-header {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0;
    padding: 0.6rem 0.25rem 0.4rem;
    font-family: Georgia, serif;
    font-size: 1.05rem;
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
}
.list-day {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--hairline);
}
.list-day.weekend .list-date {
    color: var(--ink);
    font-weight: 600;
}
.list-day.today .list-bar {
    box-shadow: inset 0 0 0 2px var(--ink);
}
.list-date {
    flex: 0 0 3.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    line-height: 1.15;
}
.list-weekday {
    font-size: 0.72rem;
    text-transform: capitalize;
}
.list-daynum {
    font-size: 1.15rem;
    color: var(--ink);
}
.list-week {
    font-size: 0.62rem;
    margin-top: 0.1rem;
}
.list-bar {
    flex: 1;
    min-width: 0;
    border-radius: 0.45rem;
    border: 1px solid var(--hairline);
    padding: 0.5rem 0.6rem 0.45rem;
    min-height: 2.6rem;
}
.list-bar.free {
    border-style: dashed;
}
.list-owners {
    display: flex;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
}
.list-owners span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.list-bar.free .list-owners {
    color: var(--muted);
    font-weight: 400;
}
.list-note {
    margin: 0.35rem 0 0;
    padding-left: 0.45rem;
    border-left: 3px solid transparent;
    font-size: 0.88rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--ink);
}
.list-note.private {
    color: #1D63C9;
}