/*
 * Design system of "Urk op de kaart": tokens, fonts and the shared components of every page
 * (landing, viewer, login/registration, account, beheer). Source: the design files in
 * urk-op-de-kaart-ontwerp.zip; the same class names are used on purpose.
 *
 * Theme: light by default, dark when the user chose it (html[data-theme=dark]) or, without a
 * choice, when the system asks for it.
 */

@import url("fonts-qyh8lK2.css");

:root {
    color-scheme: light;
    --bg: #F2F3F1; --surface: #FFFFFF; --ink: #12202B; --muted: #4A5863; --line: #D6DBDA; --line2: #B9C1C3; --hover: #E6E9E7;
    --accent: #B4471A; --accent-ink: #FFFFFF; --accent-soft: rgba(180, 71, 26, .08);
    --danger: #A1281F; --danger-ink: #FFFFFF; --danger-soft: rgba(161, 40, 31, .08);
    --land: #E6E1D3; --hatch: rgba(18, 32, 43, .16); --water: #D9E3E6; --dot: rgba(18, 32, 43, .22);
    --topo: #E9ECE4; --topoline: rgba(18, 32, 43, .14); --old: #E9DDBF; --oldline: rgba(92, 64, 24, .18);
    --ahn-lo: #2F5E73; --ahn-mid: #9CC3A0; --ahn-hi: #E8D9A8; --ahn-line: rgba(18, 32, 43, .18);
    --sat: #D5DDD0; --satline: rgba(18, 32, 43, .2);
    --shadow: 0 12px 32px rgba(18, 32, 43, .14);
    --serif: 'Newsreader', Georgia, serif;
    --sans: 'Instrument Sans', 'Helvetica Neue', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0D1318; --surface: #151D24; --ink: #E6ECEF; --muted: #9AA8B2; --line: #26323C; --line2: #3A4955; --hover: #1A242C;
    --accent: #E2733F; --accent-ink: #0D1318; --accent-soft: rgba(226, 115, 63, .12);
    --danger: #F08A7E; --danger-ink: #0D1318; --danger-soft: rgba(240, 138, 126, .1);
    --land: #1E2126; --hatch: rgba(230, 236, 239, .12); --water: #122029; --dot: rgba(230, 236, 239, .16);
    --topo: #171C1F; --topoline: rgba(230, 236, 239, .12); --old: #29241A; --oldline: rgba(233, 221, 191, .12);
    --ahn-lo: #16323F; --ahn-mid: #3E5E46; --ahn-hi: #6B6245; --ahn-line: rgba(230, 236, 239, .14);
    --sat: #1B2620; --satline: rgba(230, 236, 239, .16);
    --shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #0D1318; --surface: #151D24; --ink: #E6ECEF; --muted: #9AA8B2; --line: #26323C; --line2: #3A4955; --hover: #1A242C;
        --accent: #E2733F; --accent-ink: #0D1318; --accent-soft: rgba(226, 115, 63, .12);
        --danger: #F08A7E; --danger-ink: #0D1318; --danger-soft: rgba(240, 138, 126, .1);
        --land: #1E2126; --hatch: rgba(230, 236, 239, .12); --water: #122029; --dot: rgba(230, 236, 239, .16);
        --topo: #171C1F; --topoline: rgba(230, 236, 239, .12); --old: #29241A; --oldline: rgba(233, 221, 191, .12);
        --ahn-lo: #16323F; --ahn-mid: #3E5E46; --ahn-hi: #6B6245; --ahn-line: rgba(230, 236, 239, .14);
    --sat: #1B2620; --satline: rgba(230, 236, 239, .16);
        --shadow: 0 12px 32px rgba(0, 0, 0, .5);
    }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 13px; }
.wrap { max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }

/* --- header ------------------------------------------------------------------------------ */
.site-header { position: relative; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.site-header.sticky { position: sticky; top: 0; }
.nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 68px; display: flex; align-items: center; gap: 28px; }
.nav-inner.wide { max-width: none; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand span { font-family: var(--serif); font-size: 23px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.nav-main { display: flex; gap: 4px; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 6px; position: relative; }
.navlink { display: inline-flex; align-items: center; height: 44px; padding: 0 12px; border-radius: 8px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: 15px; }
.navlink:hover { color: var(--ink); background: var(--hover); }
.navlink.active { color: var(--ink); background: var(--hover); }
.settings-menu { position: absolute; top: calc(100% + 10px); right: 0; width: 264px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 30; }
.settings-menu[hidden] { display: none; }
.menu-title, .sidelabel { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.menu-title { padding: 10px 12px 6px; }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 6px 0 12px; font-size: 15px; }
@media (max-width: 560px) {
    .nav-inner { gap: 8px; padding: 0 12px 0 16px; }
    .brand-mark { display: none; }
    .brand span { font-size: 18px; }
    .nav-main { gap: 0; min-width: 0; }
    .navlink { padding: 0 8px; font-size: 14px; }
    .nav-right { gap: 0; }
    .iconbtn { width: 40px; }
    .wrap { padding-left: 16px; padding-right: 16px; }
    .settings-menu { right: -4px; width: min(264px, calc(100vw - 24px)); }
}

/* --- controls ---------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 8px; border: 1px solid transparent; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-ink:hover { color: var(--bg); opacity: .88; }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { color: var(--accent-ink); filter: brightness(1.06); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line2); }
.btn-ghost:hover { color: var(--ink); background: var(--hover); }
.btn-danger { background: var(--danger); color: var(--danger-ink); }
.btn-danger:hover { color: var(--danger-ink); filter: brightness(1.08); }
.btn-danger-ghost { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger-ghost:hover { color: var(--danger); background: var(--danger-soft); }
.btn-block { width: 100%; height: 48px; }
.iconbtn { width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); background: transparent; border: 1px solid transparent; cursor: pointer; padding: 0; text-decoration: none; }
.iconbtn:hover, .iconbtn.on { background: var(--hover); border-color: var(--line); color: var(--ink); }
.seg { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--hover); border: 1px solid var(--line); }
.seg button { min-width: 48px; height: 40px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .04em; cursor: pointer; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.switchrow { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; text-align: left; }
.switchrow:hover { background: var(--hover); }
.switch { position: relative; display: inline-block; width: 44px; height: 26px; border-radius: 999px; background: var(--line2); flex: none; transition: background .18s; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; transition: transform .18s; }
.switch.on { background: var(--accent); }
.switch.on .knob { transform: translateX(18px); }
.switchbtn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }

/* --- forms ------------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink); }
.field.small { font-size: 13px; color: var(--muted); }
.inp, .sel { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; font-weight: 400; }
.inp.compact, .sel.compact { height: 44px; font-size: 15px; }
.sel { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.inp:focus-visible, .sel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.inp.err { border-color: var(--danger); }
.selwrap { position: relative; }
.selwrap svg { position: absolute; right: 14px; top: 50%; margin-top: -8px; pointer-events: none; color: var(--ink); }
.hint { font-size: 13px; font-weight: 400; color: var(--muted); }
.hint.err { color: var(--danger); }
.bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.bar { height: 4px; border-radius: 2px; background: var(--line); }
.bar.on { background: var(--ink); }
.bar.on.strong { background: var(--accent); }
.peek-wrap { position: relative; }
.peek-wrap .inp { padding-right: 52px; }
.peek { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.peek:hover { color: var(--ink); }
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 8px; font-size: 14px; line-height: 1.45; }
.alert svg { flex: none; margin-top: 1px; }
.alert-danger { background: var(--danger-soft); color: var(--danger); }
.alert-success { background: var(--accent-soft); color: var(--ink); }
.form-stack { display: flex; flex-direction: column; gap: 18px; }

/* --- surfaces and tables ----------------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.card.pad { padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.card.pad h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 28px; letter-spacing: -.01em; }
.card .lede { margin: -12px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tbl td { padding: 8px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.on td { background: var(--accent-soft); }
.tab { height: 48px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; margin-bottom: -1px; text-decoration: none; display: inline-flex; align-items: center; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--accent); }
.chipbtn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none; }
.chipbtn:hover { border-color: var(--line2); color: var(--ink); }
.chipbtn.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chipbtn .count { font-family: var(--mono); font-size: 12px; opacity: .7; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok { background: var(--hover); color: var(--ink); }
.pill.warn { background: var(--accent-soft); color: var(--accent); }
.pill.off { background: transparent; color: var(--muted); border: 1px dashed var(--line2); }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--hover); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex: none; }
.swatch { display: inline-block; width: 28px; height: 28px; border-radius: 5px; flex: none; border: 1px solid var(--line); }

/* --- map placeholders / category patterns (also swatches in viewer and beheer) --------------- */
.pat-hist { background-color: var(--land); background-image: repeating-linear-gradient(45deg, var(--hatch) 0 1px, transparent 1px 9px); }
.pat-topo { background-color: var(--topo); background-image: linear-gradient(var(--topoline) 1px, transparent 1px), linear-gradient(90deg, var(--topoline) 1px, transparent 1px); background-size: 8px 8px; }
.pat-aerial { background-color: var(--water); background-image: radial-gradient(var(--dot) 1px, transparent 1.6px); background-size: 6px 6px; }
.pat-old { background-color: var(--old); background-image: repeating-linear-gradient(45deg, var(--oldline) 0 1px, transparent 1px 5px), repeating-linear-gradient(-45deg, var(--oldline) 0 1px, transparent 1px 5px); }
.pat-ahn { background-color: var(--ahn-lo); background-image: radial-gradient(circle at 35% 40%, var(--ahn-hi) 0, var(--ahn-mid) 30%, var(--ahn-lo) 75%); }
.pat-sat { background-color: var(--sat); background-image: repeating-linear-gradient(0deg, var(--satline) 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, var(--satline) 0 1px, transparent 1px 11px); }
.pat-aerial-lg { background-color: var(--water); background-image: radial-gradient(var(--dot) 1px, transparent 1.6px); background-size: 12px 12px; }
.pat-hist-lg { background-color: var(--land); background-image: repeating-linear-gradient(45deg, var(--hatch) 0 1px, transparent 1px 9px); }
.pat-ahn-lg { background-color: var(--ahn-lo); background-image: repeating-radial-gradient(circle at 32% 44%, transparent 0 17px, var(--ahn-line) 17px 18px), radial-gradient(circle at 32% 44%, var(--ahn-hi) 0, var(--ahn-mid) 22%, var(--ahn-lo) 60%); }

/* --- landing ----------------------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr)); gap: 56px; align-items: center; padding-top: 80px; padding-bottom: 88px; }
.hero h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(46px, 6vw, 84px); line-height: 1; letter-spacing: -.025em; text-wrap: balance; }
.hero h1 em { font-style: italic; color: var(--accent); }
.coords-line { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--muted); }
.lead { margin: 0; max-width: 34rem; font-size: 19px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.demo { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.demo > * { position: absolute; }
.demo .layer { inset: 0; }
.demo .tag.l { left: 14px; }
.demo .tag.r { right: 14px; }
.demo .tag { top: 14px; padding: 6px 10px; border-radius: 6px; background: var(--surface); font-family: var(--mono); font-size: 12px; color: var(--ink); }
.band { border-top: 1px solid var(--line); }
.band.surface { background: var(--surface); }
.band .wrap { padding-top: 88px; padding-bottom: 88px; }
.h2-big { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1.05; letter-spacing: -.02em; }
.srcrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; padding: 20px 0; border-top: 1px solid var(--line); }
.srcrow .k { flex: 0 0 220px; font-size: 18px; font-weight: 500; }
.srcrow .v { flex: 1 1 260px; font-family: var(--mono); font-size: 14px; color: var(--muted); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 40px; }
.steps li { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 2px solid var(--ink); }
.steps .n { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.steps h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.steps p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
.site-footer { border-top: 1px solid var(--line); margin-top: auto; }
.site-footer .wrap { padding-top: 40px; padding-bottom: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.site-footer .name { font-family: var(--serif); font-size: 20px; }
.site-footer .note { font-size: 14px; color: var(--muted); }

/* --- login / registration split -------------------------------------------------------------- */
.auth { flex: 1 1 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 56px 24px; }
.auth-form > div { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 28px; }
.auth h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1.05; letter-spacing: -.02em; }
.auth p { margin: 0; }
.auth .sub { font-size: 16px; line-height: 1.5; color: var(--muted); }
.auth-foot { padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.auth-foot a { font-weight: 600; }
.auth-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.auth-visual { position: relative; overflow: hidden; border-left: 1px solid var(--line); min-height: 640px; }
.auth-visual > * { position: absolute; }
.auth-visual .layer { inset: 0; }
.auth-visual .caption { pointer-events: none; z-index: 2; }
.auth-visual .tag.l { left: 24px; right: auto; }
.auth-visual .caption { left: 32px; right: 32px; bottom: 32px; max-width: 420px; display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.auth-visual .caption .k { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.auth-visual .caption .q { font-family: var(--serif); font-size: 26px; line-height: 1.15; letter-spacing: -.01em; }
.auth-visual .tag { top: 24px; right: 24px; padding: 6px 10px; border-radius: 6px; background: var(--surface); font-family: var(--mono); font-size: 12px; color: var(--muted); }
@media (max-width: 860px) { .auth-visual { display: none; } }

/* --- account ----------------------------------------------------------------------------- */
.page { max-width: 1120px; margin: 0 auto; padding: 36px 24px 72px; width: 100%; display: flex; flex-direction: column; gap: 28px; }
.page.wide { max-width: 1360px; }
.page h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1.05; letter-spacing: -.02em; }
.page .sub { margin: 0; font-size: 16px; color: var(--muted); }
.account-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px; }
.accside { flex: 1 1 200px; max-width: 220px; position: sticky; top: 24px; }
.subnav { display: flex; flex-direction: column; gap: 2px; }
.subnav a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500; }
.subnav a:hover { background: var(--hover); color: var(--ink); }
.subnav a.on { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.account-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.account-head { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.account-head .avatar { width: 64px; height: 64px; font-size: 24px; font-family: var(--serif); }
.account-head .who { display: flex; flex-direction: column; gap: 4px; }
.account-head .meta { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.card.pad.danger { border-color: var(--danger); }
@media (max-width: 860px) { .subnav { flex-direction: row; flex-wrap: wrap; } .accside { max-width: none; position: static; } }
@media (max-width: 560px) { .card.pad { padding: 20px; } }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; }

/* --- beheer ------------------------------------------------------------------------------ */
.toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.search { position: relative; flex: 1 1 240px; max-width: 320px; }
.search svg { position: absolute; left: 13px; top: 14px; color: var(--muted); }
.search .inp { padding-left: 38px; height: 44px; font-size: 15px; }
.beheer-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.beheer-grid .list { flex: 999 1 640px; min-width: 0; overflow: hidden; }
.beheer-grid .side { flex: 1 1 340px; min-width: 0; padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.beheer-grid .side h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: -.01em; }
.scroll-x { overflow-x: auto; }
.src-name { display: flex; align-items: center; gap: 12px; }
.src-name .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.src-name .t b { font-weight: 600; }
.src-name .t small { font-size: 13px; color: var(--muted); }
.row-link { color: inherit; text-decoration: none; }
.georef-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; border-radius: 10px; background: var(--bg); }
.georef-box .k { font-size: 13px; font-weight: 500; color: var(--muted); display: block; margin-bottom: 6px; }
.actions-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 6px; border-top: 1px solid var(--line); }
.empty-note { margin: 0; padding: 32px; text-align: center; color: var(--muted); }
.flash-stack { display: flex; flex-direction: column; gap: 10px; }
.inline-form { display: inline; }
.inline-form .iconbtn { vertical-align: middle; }

/* --- misc -------------------------------------------------------------------------------- */
.narrow { max-width: 640px; }
.card.pad.center { align-items: flex-start; }

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); color: var(--muted); }
.pager .btn { height: 40px; font-size: 14px; }

/* Browser autofill paints inputs yellow/blue; keep the surface colour of the design. */
.inp:-webkit-autofill,
.inp:-webkit-autofill:hover,
.inp:-webkit-autofill:focus,
.sel:-webkit-autofill {
    -webkit-text-fill-color: var(--ink);
    caret-color: var(--ink);
    -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
    box-shadow: 0 0 0 1000px var(--surface) inset;
    transition: background-color 600000s 0s, color 600000s 0s;
}
.inp:autofill { background-color: var(--surface); color: var(--ink); }


/* --- static before/after slider (landing, login, registration): the images stay put, only the bar moves --- */
[data-compare] { --pos: 50%; user-select: none; -webkit-user-select: none; }
[data-compare] img.layer { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
[data-compare] img.layer.before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 44px; margin-left: -22px; z-index: 3; cursor: ew-resize; touch-action: none; display: flex; align-items: center; justify-content: center; }
.compare-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 21px; width: 2px; background: var(--surface); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.compare-handle .grip-dot { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; }
.compare-handle:hover::before, .compare-handle.dragging::before { background: var(--accent); }
.compare-handle:focus-visible { outline: none; }
.compare-handle:focus-visible .grip-dot { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- statistics (/beheer) ------------------------------------------------------------------ */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 14px; }
.card.stat { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.card.stat .k { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.card.stat .v { font-family: var(--serif); font-size: 32px; line-height: 1.1; letter-spacing: -.01em; }