/* ==========================================================================================
   Troostplek - one stylesheet for the whole site.
   Colour schemes: <html data-theme="..."> (chosen in admin/instellingen.php, list in inc/layout.php themes()).
   Each scheme sets the same variables; dark mode follows the device. --soft is the light line/highlight
   colour of the scheme, --link-dark the link colour on dark backgrounds.
   Fonts: the fonts already on the device (no requests to Google): a classic serif for headings,
   the system sans-serif for text.
   ========================================================================================== */
:root {
    --surface: #ffffff;
    --ink: #2b2f33;         /* charcoal text */
    --ink-soft: #5d6368;
    --primary-ink: #ffffff;
    --err: #a3402e;
    --ok: #3f7a52;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(43, 47, 51, .06), 0 8px 24px rgba(43, 47, 51, .06);
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color-scheme: light dark;
    /* Avondblauw (default): deep evening blue, warm sand and brass */
    --bg: #f6f4ef; --surface-2: #ece8e0; --line: #dcd6cb; --primary: #2f4058; --primary-dark: #233147; --soft: #a9b6c8; --accent: #a8834a; --link-dark: #b9c8de;
}
[data-theme="avondblauw"] { --bg: #f6f4ef; --surface-2: #ece8e0; --line: #dcd6cb; --primary: #2f4058; --primary-dark: #233147; --soft: #a9b6c8; --accent: #a8834a; --link-dark: #b9c8de; }
[data-theme="lavendel"] { --bg: #f7f5f8; --surface-2: #ede8f0; --line: #ddd6e2; --primary: #4f4566; --primary-dark: #3d3550; --soft: #c4b8d4; --accent: #a8834a; --link-dark: #cbbfe0; }
[data-theme="roos"]     { --bg: #f8f4f1; --surface-2: #efe7e2; --line: #e2d7d0; --primary: #5b4a46; --primary-dark: #46393a; --soft: #d4bcb6; --accent: #a86f6c; --link-dark: #e3c3bf; }
[data-theme="kaarslicht"] { --bg: #f5f3ef; --surface-2: #ebe7df; --line: #dcd7ce; --primary: #2e3035; --primary-dark: #1f2125; --soft: #c9c3b8; --accent: #b07a22; --link-dark: #e6c58a; }
[data-theme="salie"]    { --bg: #f6f3ee; --surface-2: #efeae1; --line: #ddd6ca; --primary: #3e5c58; --primary-dark: #2f4744; --soft: #a9bdb2; --accent: #a8834a; --link-dark: #b9d1c7; }
:root, [data-theme] { --info: var(--primary); --sage: var(--soft); }
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #15181b; --surface: #1d2124; --surface-2: #262a2e; --ink: #ebe6dd; --ink-soft: #a9a399; --line: #353a3f;
        --err: #e08a78; --ok: #84c39a; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
        --primary: #4a6185; --primary-dark: #3a4d6b; --soft: #3f4d63; --accent: #cfa76a; --info: #a9b6c8;
    }
    [data-theme="avondblauw"] { --primary: #4a6185; --primary-dark: #3a4d6b; --soft: #3f4d63; --accent: #cfa76a; --info: #a9b6c8; }
    [data-theme="lavendel"]   { --primary: #6d5f8c; --primary-dark: #574b72; --soft: #4b4260; --accent: #d0ab74; --info: #c4b8d4; }
    [data-theme="roos"]       { --primary: #7a6460; --primary-dark: #634f4c; --soft: #5a4846; --accent: #d29a97; --info: #d4bcb6; }
    [data-theme="kaarslicht"] { --primary: #4a4d55; --primary-dark: #35373d; --soft: #45474e; --accent: #e0a845; --info: #c9c3b8; }
    [data-theme="salie"]      { --primary: #4f716c; --primary-dark: #3e5c58; --soft: #47605a; --accent: #c9a46a; --info: #a9bdb2; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--sans); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.25; margin: 0 0 .6rem; letter-spacing: .005em; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; margin-top: 1.2rem; }
p { margin: 0 0 .9rem; }
a { color: var(--primary); text-underline-offset: 3px; }
@media (prefers-color-scheme: dark) { a { color: var(--link-dark); } }
a:hover { color: var(--accent); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.muted { color: var(--ink-soft); }
.small { font-size: .85rem; }
.lead { font-size: 1.1rem; color: var(--ink-soft); max-width: 62ch; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kbd { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--primary); color: var(--primary-ink); font-weight: 700; font-size: .85em; }

/* ---------- header ---------- */
.site-head { background: var(--primary); color: var(--primary-ink); }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; }
.brand:hover { color: inherit; }
.brand strong { display: block; font: 600 1.45rem/1.1 var(--serif); letter-spacing: .02em; }
.brand small { display: block; font-size: .78rem; opacity: .8; letter-spacing: .06em; text-transform: uppercase; }
.b-ring { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.5; }
.b-flame { fill: #e7c88e; }
.b-candle { fill: #f6f3ee; }
.main-nav { display: flex; align-items: center; flex-wrap: wrap; gap: .15rem .3rem; }
.main-nav a, .main-nav .linkbtn { color: var(--primary-ink); text-decoration: none; padding: .35rem .6rem; border-radius: 6px; font-size: .95rem; }
.main-nav a:hover, .main-nav .linkbtn:hover, .main-nav a[aria-current] { background: rgba(255, 255, 255, .14); color: #fff; }
.nav-account { display: flex; align-items: center; gap: .3rem; margin-left: .6rem; padding-left: .6rem; border-left: 1px solid rgba(255, 255, 255, .25); }
.main-nav .nav-cta { background: #f6f3ee; color: var(--primary-dark); font-weight: 600; }
.main-nav .nav-cta:hover { background: #fff; color: var(--primary-dark); }
.main-nav .lang { font-size: .8rem; font-weight: 700; letter-spacing: .05em; opacity: .85; }
.nav-toggle { display: none; background: none; border: 1px solid rgba(255, 255, 255, .4); color: inherit; border-radius: 6px; padding: .35rem .7rem; font: inherit; cursor: pointer; }
.inline { display: inline; margin: 0; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--primary); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.main-nav .linkbtn { text-decoration: none; }

.sub-head { background: var(--primary-dark); border-top: 1px solid rgba(255, 255, 255, .08); }
.sub-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1.2rem; padding: .5rem 0; flex-wrap: wrap; }
.places { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.places-label { color: rgba(255, 255, 255, .7); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; margin-right: .3rem; }
.places a { color: #fff; text-decoration: none; font-size: .9rem; padding: .2rem .65rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); }
.places a:hover, .places a[aria-current] { background: #f6f3ee; color: var(--primary-dark); border-color: #f6f3ee; }
.quick-search { display: flex; align-items: center; gap: .4rem; }
.quick-search input { width: 12rem; padding: .4rem .7rem; border-radius: 6px; border: 1px solid transparent; font: inherit; font-size: .95rem; background: #fff; color: #2b2f33; }
.quick-search button { padding: .4rem .8rem; border-radius: 6px; border: 0; background: var(--accent); color: #fff; font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; }
.quick-search button:hover { filter: brightness(1.08); }
.quick-search a { color: #fff; font-size: .88rem; }

@media (max-width: 860px) {
    .nav-toggle { display: inline-block; }
    .main-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: .4rem; }
    .main-nav.is-open { display: flex; }
    .nav-account { margin: .3rem 0 0; padding: .4rem 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .25); flex-wrap: wrap; }
    .quick-search { width: 100%; }
    .quick-search input { flex: 1; width: auto; min-width: 0; }
    .places { overflow-x: auto; flex-wrap: nowrap; width: 100%; padding-bottom: .2rem; scrollbar-width: thin; }
    .places a { white-space: nowrap; }
}

/* ---------- page ---------- */
main { padding: 1.6rem 0 3rem; min-height: 60vh; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.3rem 1.4rem; margin-bottom: 1.2rem; }
.card > h2:first-child { border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
.narrow { max-width: 640px; margin-inline: auto; }
.cols2, .cols3 { display: grid; gap: 1.2rem; align-items: start; }
.cols2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.cols3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.cols2 > .card, .cols3 > .card { margin-bottom: 0; }
.crumbs { font-size: .9rem; color: var(--ink-soft); margin-bottom: .8rem; }
.count { display: inline-block; min-width: 1.7em; padding: 0 .45em; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); font: 600 .8rem/1.7 var(--sans); text-align: center; vertical-align: middle; }

.hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2rem; align-items: center; padding: 1.6rem 0 1.8rem; border-bottom: 1px solid var(--line); margin-bottom: 1.6rem; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } }
.today { margin: 0; border-top: 4px solid var(--accent); }
.today h2 { border: 0 !important; padding: 0 !important; margin-bottom: .4rem; }
.today .mem-cards { grid-template-columns: 1fr; }
.hero h1 { max-width: 22ch; }
.hero p:not(.lead):not(.actions) { max-width: 62ch; color: var(--ink-soft); }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .62rem 1.15rem; border-radius: 8px; border: 1px solid var(--primary);
       background: var(--primary); color: var(--primary-ink); font: 600 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--primary-ink); }
.btn.outline { background: transparent; color: var(--primary); }
.btn.outline:hover { background: var(--surface-2); color: var(--primary); }
@media (prefers-color-scheme: dark) { .btn.outline, .btn.outline:hover { color: var(--ink); border-color: var(--sage); } }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn.small { padding: .4rem .8rem; font-size: .9rem; }

/* messages */
.msg { padding: .7rem .9rem; border-radius: 8px; border-left: 4px solid; background: var(--surface); margin: 0 0 1rem; }
.msg-error { border-color: var(--err); background: color-mix(in srgb, var(--err) 9%, var(--surface)); }
.msg-ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.msg-info { border-color: var(--info); background: color-mix(in srgb, var(--info) 9%, var(--surface)); }

/* lists of registers */
.mem-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.mem-card { display: flex; gap: .8rem; align-items: center; padding: .45rem; border-radius: 8px; text-decoration: none; color: var(--ink); }
.mem-card:hover { background: var(--surface-2); color: var(--ink); }
.mem-card img { width: 48px; height: 62px; object-fit: cover; border-radius: 6px; flex: none; background: var(--surface-2); filter: saturate(.85); }
.mc-body { display: grid; min-width: 0; }
.mc-body strong { font-family: var(--serif); font-size: 1.04rem; font-weight: 600; }
.mc-years { font-size: .85rem; color: var(--accent); font-weight: 600; letter-spacing: .03em; }
.mc-note { font-size: .88rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
section .mem-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.cols3 .mem-cards { grid-template-columns: 1fr; }

.place-list { list-style: none; padding: 0; margin: 0; columns: 2 260px; column-gap: 2rem; }
.place-list li { break-inside: avoid; display: flex; align-items: baseline; gap: .5rem; padding: .35rem 0; border-bottom: 1px dotted var(--line); }
.place-list li a { font-weight: 600; }
.place-list .count { margin-left: auto; }
.sort { font-size: .9rem; color: var(--ink-soft); }
.sort a, .sort strong { margin-left: .3rem; }

.pager { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; margin-top: 1.2rem; }
.pager a, .pager span { padding: .3rem .7rem; border-radius: 6px; border: 1px solid var(--line); text-decoration: none; }
.pager span[aria-current] { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }

/* ---------- a register ---------- */
.mem-banner { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--radius); margin-bottom: 1.2rem; filter: saturate(.8); }
.mem-head { display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: start; border-top: 4px solid var(--accent); }
.mem-photos { display: grid; gap: .8rem; }
.mem-photo { width: 190px; border-radius: 8px; border: 6px solid var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow); background: var(--surface-2); }
.eyebrow { margin: 0; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1.2rem; margin: .8rem 0; }
.facts dt { color: var(--ink-soft); }
.facts dd { margin: 0; }
blockquote { margin: 1rem 0 0; padding: .6rem 1rem; border-left: 3px solid var(--accent); font: italic 1.12rem/1.5 var(--serif); color: var(--ink-soft); background: var(--surface-2); border-radius: 0 8px 8px 0; }
.mem-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; align-items: flex-start; }
.share { position: relative; }
.share summary { list-style: none; }
.share summary::-webkit-details-marker { display: none; }
.share-menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; display: grid; gap: .4rem; min-width: 200px; padding: .7rem .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.bio { max-width: 70ch; font-size: 1.05rem; }
.family dd a { font-weight: 600; }
.flowers { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .8rem; }
.flower { display: grid; gap: .35rem; width: 100%; padding: .4rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; color: var(--ink); font: .85rem/1.3 var(--sans); text-align: center; }
.flower:hover { border-color: var(--accent); }
.flower img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.messages { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.messages li { padding: .8rem 1rem; border-radius: 8px; background: var(--surface-2); }
.messages li p:last-child { margin: 0; }
.msg-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .3rem; }
.msg-head time { color: var(--ink-soft); font-size: .88rem; }
.from-us { border: 1px dashed var(--sage); background: transparent !important; font-style: italic; }
.flower-view { max-width: min(560px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); padding: 1.2rem; box-shadow: var(--shadow); }
.flower-view::backdrop { background: rgba(20, 24, 25, .7); }
.flower-view img { display: block; width: 100%; max-height: 60vh; object-fit: contain; border-radius: 8px; margin-bottom: .8rem; }
.fv-text { white-space: pre-line; }
@media (max-width: 640px) {
    .mem-head { grid-template-columns: 1fr; }
    .mem-photos { grid-template-columns: repeat(2, minmax(0, 160px)); }
    .mem-photo { width: 100%; }
}

/* ---------- forms ---------- */
.form p { margin: 0 0 .9rem; }
.form label, .filter-grid > fieldset > label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
.form input[type=text], .form input[type=email], .form input[type=password], .form input[type=date], .form input[type=number], .form input[type=search],
.form select, .form textarea {
    width: 100%; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px;
}
.form textarea { resize: vertical; min-height: 7rem; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--sage); border-color: var(--primary); }
.form input[readonly] { background: var(--surface-2); color: var(--ink-soft); }
.form fieldset { border: 0; border-top: 1px solid var(--line); margin: 0 0 1rem; padding: 1rem 0 0; min-width: 0; }
.form fieldset:first-of-type { border-top: 0; padding-top: 0; }
.form legend { font: 600 1.15rem var(--serif); padding: 0 .4rem 0 0; }
.field-note { display: block; font-size: .85rem; color: var(--ink-soft); margin-top: .3rem; font-weight: 400; }
.row2, .row3 { display: grid; gap: 0 1rem; }
.row2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.row3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.form-foot { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.form-foot label { margin: 0; }
.form-foot select { width: auto; }
.check { display: flex !important; gap: .6rem; align-items: flex-start; font-weight: 400 !important; margin-bottom: .8rem; }
.check input { margin-top: .35rem; }
.seg { display: flex; flex-wrap: wrap; gap: .5rem; border: 0 !important; padding: 0 !important; }
.seg label { display: flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-weight: 600; margin: 0; }
.seg label:has(input:checked) { border-color: var(--primary); background: var(--surface-2); }
.flower-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: .5rem; }
.flower-pick legend { margin-bottom: .5rem; }
.flower-pick label { position: relative; margin: 0; cursor: pointer; }
.flower-pick input { position: absolute; opacity: 0; }
.flower-pick img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 3px solid transparent; }
.flower-pick input:checked + img { border-color: var(--accent); }
.flower-pick input:focus-visible + img { outline: 3px solid var(--accent); outline-offset: 2px; }
.flower-pick[hidden] { display: none; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem 1.4rem; margin-bottom: .8rem; }
.media-item { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: .4rem; min-width: 0; padding: .8rem; border: 1px dashed var(--line); border-radius: 8px; }
.media-item > label:first-child { margin: 0; }
.media-preview { max-width: 140px; max-height: 140px; object-fit: contain; border-radius: 6px; border: 1px solid var(--line); }
.media-item audio { width: 100%; }
.media-item input[type=file] { font-size: .9rem; width: 100%; min-width: 0; }
.media-item .check { margin: 0; }
.form details summary, .filters > summary { cursor: pointer; color: var(--primary); font-weight: 600; margin-bottom: .8rem; }
.auth h1 { margin-bottom: .4rem; }
.auth-links { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .3rem; }
.auth .btn[type=submit], .auth form .btn { margin-top: .3rem; }

/* search */
.filters > summary { font: 600 1.15rem var(--serif); }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1rem 1.4rem; }
.filter-grid fieldset { border: 0 !important; padding: 0 !important; margin: 0 !important; }
.filter-grid fieldset > label { margin-top: .5rem; }
.range { display: flex; align-items: center; gap: .4rem; }
.range input { width: 100%; }
.table-wrap { overflow-x: auto; }
.results { width: 100%; border-collapse: collapse; }
.results th { text-align: left; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); border-bottom: 2px solid var(--line); padding: .4rem .6rem; }
.results td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.results tr:hover td { background: var(--surface-2); }
.results td:first-child a { font-weight: 600; }

/* mijn troostplek */
.my-list { list-style: none; padding: 0; margin: 0; }
.my-list li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.my-actions { display: flex; gap: 1rem; }

/* register, uitleg, info */
.ticks { padding-left: 1.2rem; }
.ticks li::marker { color: var(--accent); }
.steps { padding-left: 1.3rem; }
.steps li { margin-bottom: .5rem; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: .7rem 0; font-weight: 600; list-style-position: outside; }
.faq summary::marker { color: var(--accent); }
.faq[open] summary { color: var(--primary); }
.faq p { color: var(--ink-soft); }
.tour-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.tour-list a { display: grid; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); }
.tour-list a:hover { border-color: var(--accent); background: var(--surface-2); }
.tour-list span { font-size: .9rem; color: var(--ink-soft); }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .4rem; }
.link-list { list-style: none; padding: 0 !important; }

/* ---------- beheer (admin/) ---------- */
.admin main h1 { margin-bottom: 1rem; }
.badge { display: inline-block; min-width: 1.4em; padding: 0 .4em; border-radius: 999px; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 700; text-align: center; line-height: 1.5; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.stat { display: grid; padding: .9rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); }
.stat:hover { border-color: var(--accent); color: var(--ink); }
.stat strong { font: 600 1.8rem/1.15 var(--serif); }
.stat span { color: var(--ink-soft); font-size: .88rem; }
.stat.warn { border-left: 4px solid var(--accent); }
.stat.warn strong { color: var(--accent); }
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .8rem; }
.tabs a { padding: .25rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: .9rem; }
.tabs a.is-active { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); }
.tag { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; border: 1px solid; }
.tag-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.tag-wait { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.tag-blocked { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.tag-admin { color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, transparent); }
.form-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin: 0 0 .8rem; }
.form-row label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; font-size: .88rem; }
.form-row label.check { flex-direction: row; align-items: center; margin: 0; }
.form-row input[type=text], .form-row input[type=search], .form-row input[type=email], .form-row select {
    padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: .95rem; max-width: 100%;
}
.form-row .grow, .form-row label.grow { flex: 1; min-width: 12rem; }
.form-row.tight { margin: 0; }
.btn.danger { background: var(--err); border-color: var(--err); color: #fff; }
.btn.danger:hover { filter: brightness(.92); }
.danger-zone { border-color: color-mix(in srgb, var(--err) 40%, var(--line)); }
.bulk { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.bulk .check { margin: 0 !important; }
.condo-list { list-style: none; padding: 0; margin: 0; }
.condo { display: grid; grid-template-columns: auto auto 1fr auto; gap: .8rem; align-items: start; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.condo.is-open { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%); }
.condo > img { border-radius: 6px; object-fit: cover; }
.condo .check { margin: .2rem 0 0 !important; }
.condo-body { min-width: 0; grid-column: span 1; }
.condo:not(:has(> img)) .condo-body { grid-column: span 2; }
.condo-head { margin: 0 0 .2rem; }
.condo-text { margin: 0 0 .3rem; white-space: normal; overflow-wrap: anywhere; }
.condo-actions { display: flex; flex-direction: column; gap: .3rem; }
.reg-admin-head { display: flex; gap: 1rem; align-items: flex-start; }
.reg-admin-head img { border-radius: 6px; border: 1px solid var(--line); }
.place-admin { list-style: none; padding: 0; margin: 0; }
.place-admin li { padding: .55rem 0; border-bottom: 1px solid var(--line); }
.pa-head { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline; }
.place-admin details summary { font-size: .85rem; color: var(--ink-soft); cursor: pointer; margin: .3rem 0; }
.place-admin details form { margin-top: .5rem; }
@media (max-width: 640px) { .condo { grid-template-columns: auto 1fr; } .condo > img { display: none; } .condo-actions { grid-column: 2; flex-direction: row; } }
/* system check (admin/controle.php) */
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { padding: .35rem 0; border-bottom: 1px solid var(--line); }
.checks .is-ok > span:first-child { color: var(--ok); font-weight: 700; }
.checks .is-bad { color: var(--err); }
.checks .is-bad > span:first-child, .checks .is-warn > span:first-child, .checks .is-info > span:first-child { font-weight: 700; }
.checks .is-warn > span:first-child { color: var(--accent); }
.checks .is-info > span:first-child { color: var(--info); }
pre.log { margin: 0; padding: .7rem; max-height: 22rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: .8rem/1.5 ui-monospace, Consolas, monospace; background: var(--surface-2); border-radius: 8px; }
textarea.sql { width: 100%; font: .85rem/1.5 ui-monospace, Consolas, monospace; padding: .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink); }
/* colour scheme picker (admin/instellingen.php): each preview carries its own data-theme */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 1rem; }
.theme-card, .form .theme-card { position: relative; display: grid; align-content: start; margin: 0; gap: .35rem; padding: .7rem; border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; font-weight: 400 !important; }
.theme-card:has(input:checked) { border-color: var(--accent); }
.theme-card input { position: absolute; top: .9rem; right: .9rem; }
.theme-preview { display: grid; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); }
.tp-head { display: flex; align-items: center; gap: .4rem; padding: .45rem .6rem; background: var(--primary); color: #fff; font: 600 .95rem var(--serif); }
.tp-dot { width: .7rem; height: .7rem; border-radius: 50%; background: #e7c88e; }
.tp-body { display: grid; gap: .35rem; padding: .7rem .6rem; border-top: 3px solid var(--accent); }
.tp-title { font: 600 .9rem var(--serif); color: var(--ink); }
.tp-line { height: .4rem; border-radius: 4px; background: var(--surface-2); }
.tp-line.short { width: 60%; }
.tp-btn { justify-self: start; padding: .2rem .6rem; border-radius: 6px; background: var(--primary); color: #fff; font-size: .75rem; font-weight: 600; }
.theme-name { font-weight: 700; }
.theme-text { font-size: .88rem; color: var(--ink-soft); }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line); background: var(--surface-2); padding: 1.4rem 0 4.5rem; font-size: .92rem; }
.foot-row { display: flex; flex-wrap: wrap; gap: .4rem 2rem; justify-content: space-between; }
.foot-row p { margin: 0; }

/* ---------- built-in help (inc/help.php) and the guided tour (assets/tour.js), as in Studio OQWhy ---------- */
.help-fab { position: fixed; z-index: 60; left: 1.2rem; bottom: 1.2rem; width: 46px; height: 46px; padding: 0; border-radius: 50%;
            border: 2px solid var(--surface); background: var(--primary); color: var(--primary-ink); font: 700 21px/1 var(--serif); cursor: pointer;
            box-shadow: 0 4px 16px rgba(0, 0, 0, .25); transition: background .15s, transform .15s; }
.help-fab:hover, .help-fab:focus-visible, .help-fab[aria-expanded="true"] { background: var(--accent); outline: none; }
.help-fab:hover { transform: translateY(-2px); }
.help-fab.is-new::after { content: ''; position: absolute; top: 0; right: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
@media (prefers-reduced-motion: no-preference) {
    .help-fab.is-new { animation: help-pulse 2.4s ease-in-out 3; }
    @keyframes help-pulse { 0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, .25), 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
                            50% { box-shadow: 0 4px 16px rgba(0, 0, 0, .25), 0 0 0 12px transparent; } }
}
.help-panel { position: fixed; z-index: 61; left: 1.2rem; bottom: calc(1.2rem + 56px); width: min(400px, calc(100vw - 2.4rem));
              max-height: calc(100vh - 7rem); max-height: calc(100dvh - 7rem); overflow-y: auto; overscroll-behavior: contain;
              background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius);
              box-shadow: 0 12px 40px rgba(0, 0, 0, .22); padding: 1rem 1.1rem 1.1rem; }
.help-panel[hidden] { display: none; }
.help-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.help-head h2 { margin: 0; font-size: 1.15rem; border: 0 !important; padding: 0 !important; }
.help-close, .tour-x { width: 30px; height: 30px; flex: none; padding: 0; background: none; border: 1px solid var(--line); border-radius: 50%; color: var(--ink);
                       font-size: 18px; line-height: 1; cursor: pointer; }
.help-close:hover, .tour-x:hover { border-color: var(--accent); color: var(--accent); }
.help-intro { margin: .5rem 0 .8rem; color: var(--ink-soft); font-size: .92rem; }
.help-steps { list-style: none; counter-reset: help; margin: 0; padding: 0; display: grid; gap: .3rem; }
.help-steps li { counter-increment: help; }
.help-step { display: grid; grid-template-columns: 1.7rem 1fr; gap: .1rem .55rem; width: 100%; padding: .5rem .55rem; text-align: left;
             background: none; border: 1px solid transparent; border-radius: 8px; color: var(--ink-soft); font: .88rem/1.45 var(--sans); cursor: pointer; }
.help-step::before { content: counter(help); grid-row: span 2; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line);
                     display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: .78rem; font-weight: 700; }
.help-step strong { color: var(--ink); font-weight: 600; }
.help-step:hover, .help-step:focus-visible { border-color: var(--line); background: var(--surface-2); outline: none; }
.help-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-top: .9rem; }
.tour-shade { position: fixed; inset: 0; z-index: 900; background: transparent; }
.tour-shade.is-dark { background: rgba(20, 24, 25, .62); }
.tour-spot { position: fixed; z-index: 901; pointer-events: none; border: 2px solid var(--accent); border-radius: 8px;
             box-shadow: 0 0 0 9999px rgba(20, 24, 25, .62); transition: left .25s, top .25s, width .25s, height .25s; }
.tour-spot[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .tour-spot { transition: none; } }
.tour-card { position: fixed; z-index: 902; background: var(--surface); color: var(--ink-soft); border: 1px solid var(--line); border-top: 4px solid var(--accent);
             border-radius: var(--radius); padding: .9rem 1rem 1rem; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); outline: none; }
.tour-card .tour-x { position: absolute; top: .55rem; right: .55rem; }
.tour-count { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent); font-weight: 700; padding-right: 2rem; }
.tour-card h3 { margin: .25rem 2rem .35rem 0; color: var(--ink); font-size: 1.1rem; }
.tour-card p { margin: 0 0 .9rem; font-size: .93rem; line-height: 1.5; }
.tour-btns { display: flex; justify-content: space-between; gap: .5rem; }
@media (max-width: 720px) {
    .help-fab { left: .8rem; bottom: .8rem; width: 42px; height: 42px; font-size: 19px; }
    .help-panel { left: .8rem; right: .8rem; width: auto; bottom: calc(.8rem + 52px); }
}
@media print { .help-fab, .help-panel, .site-head, .mem-actions, #schrijf-blok { display: none !important; } }