/* Light mode is calm navy on slate; dark mode is warm, with gold for buttons and links. Red is kept for the logo and
   for errors, so an error message never looks like a button. Text colours meet WCAG AA against --surface and
   --surface-2 in both modes, because many visitors are older and read on a phone. */
:root {
    color-scheme: light dark;
    --bg: #eef1f5;
    --surface: #ffffff;
    --surface-2: #f4f6f9;
    --text: #1b2430;
    --muted: #556070;
    --border: #d5dbe3;
    --rule: #c3cbd6;
    --accent: #1f3a63;
    --accent-text: #ffffff;
    --danger: #b3261e;
    --notice-bg: #fff6e0;
    --notice-border: #e8c46a;
    --info-bg: #e3edf8;
    --info-border: #a9c3e2;
    /* Sequential scale for the map: 0 = no reports. */
    --bin-0: #dce1e8;
    --bin-1: #fbc595;
    --bin-2: #f59a5e;
    --bin-3: #e8703c;
    --bin-4: #c9482a;
    --bin-5: #962317;
    --map-stroke: #ffffff;
    --field-bg: #ffffff;
    --verified-bg: #e3f4e8;
    --verified-border: #8cc8a0;
    /* The logo: red pulse and short bars on pale pink, the tallest bar in navy. */
    --logo-tile: #fbe3e7;
    --logo-line: #c8102e;
    --logo-short: #c8102e;
    --logo-tall: #13233f;
    --logo-puls: #c8102e;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1c1615;
        --surface: #292120;
        --surface-2: #322826;
        --text: #f0e9e7;
        --muted: #b8aaa7;
        --border: #443734;
        --rule: #57463f;
        --accent: #ffc94a;
        --accent-text: #2a1a05;
        --danger: #f2877e;
        --notice-bg: #3a3020;
        --notice-border: #8a6d2a;
        --info-bg: #2f2725;
        --info-border: #5a4842;
        --bin-0: #3d3330;
        --bin-1: #5c3a26;
        --bin-2: #8a4a2a;
        --bin-3: #bb5a2f;
        --bin-4: #e2733e;
        --bin-5: #ffa06b;
        --map-stroke: #1c1615;
        --field-bg: #221b1a;
        --verified-bg: #1f3a2a;
        --verified-border: #3f7a55;
        /* The logo after dark: white on flag red, the tallest bar in gold. */
        --logo-tile: #c8102e;
        --logo-line: #ffffff;
        --logo-short: #ffffff;
        --logo-tall: #ffc94a;
        --logo-puls: #ff6b7f;
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; }

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

a { color: var(--accent); }

.container {
    max-width: 1100px;
    margin-inline: auto;
    padding-inline: 16px;
}

main { padding-block: 1.5rem; }

h1 { font-size: 1.9rem; line-height: 1.2; margin-block: 0 .5rem; }
h2 { font-size: 1.3rem; margin-block: 2rem .75rem; }

.lead { font-size: 1.1rem; color: var(--muted); max-width: 70ch; }
.muted { color: var(--muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--surface); padding: .5rem; z-index: 10; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.button {
    display: inline-block;
    padding: .5rem 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}
.button { background: var(--surface-2); }
.button:hover { border-color: var(--accent); }
.button-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.button-primary:hover { filter: brightness(1.08); }

input, select, textarea {
    font: inherit;
    color: var(--text);
    background: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .45rem .6rem;
    width: 100%;
}
input[type="radio"], input[type="checkbox"] { width: auto; accent-color: var(--accent); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
::placeholder { color: var(--muted); opacity: 1; }

/* Filters */
.filters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
    gap: .75rem;
    align-items: end;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    margin-block: 1rem;
}
.filters label { display: grid; gap: .25rem; font-size: .9rem; color: var(--muted); }
.filter-actions { display: flex; gap: .5rem; }

/* Incident list: the main filters and the buttons on one row, the rest folded away under "Flere filtre". */
.filters-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.filters-more { grid-column: 1 / -1; }
.filters-more > summary {
    cursor: pointer;
    width: fit-content;
    font-size: .9rem;
    color: var(--accent);
}
.filters-more-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
    gap: .75rem;
    margin-top: .75rem;
}

@media (max-width: 560px) {
    .filters { padding: .75rem; gap: .6rem; }
    .filters-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    /* On a phone the buttons go last, below "Flere filtre", so they submit everything above them. */
    .filters-split .filter-actions { order: 1; grid-column: 1 / -1; }
    .filters-split .filter-actions .button-primary { flex: 1; }
}

/* Quick switch between care in the citizen's own home and care where they live. */
.place-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.place-tabs a {
    padding: .35rem .9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-size: .95rem;
}
.place-tabs a:hover { border-color: var(--accent); }
.place-tabs a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }

.result-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-block: .75rem;
}
.result-bar .result-count { margin: 0; }
.sort { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--muted); }
.sort select { width: auto; }

/* Incident list */
.result-count { font-weight: 600; }
.incident-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.incident {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: 8px;
    padding: .9rem 1rem;
}
.incident.severity-minor { border-left-color: var(--bin-3); }
.incident.severity-serious { border-left-color: var(--bin-5); }
/* The municipality always opens the card at the same spot, so a list can be skimmed down the left edge;
   the tags whose length varies come on the line below. */
.incident-head { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; justify-content: space-between; }
.incident-municipality { font-weight: 600; font-size: 1.05rem; }
a.incident-municipality { text-decoration: none; }
a.incident-municipality:hover, a.incident-municipality:focus-visible { text-decoration: underline; }
.incident-date { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.incident-sub { display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: center; margin-top: .4rem; }
.incident-meta { color: var(--muted); font-size: .9rem; }
.incident-text { margin: .5rem 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.tag {
    display: inline-block;
    font-size: .8rem;
    font-weight: 600;
    padding: .1rem .55rem;
    border-radius: 999px;
    background: var(--info-bg);
    border: 1px solid var(--info-border);
}
.tag-verified { background: var(--verified-bg); border-color: var(--verified-border); }
.incident-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: start; margin-top: .75rem; }
.incident-actions form { margin: 0; }
.button-danger { background: var(--danger); border-color: var(--danger); color: var(--accent-text); }
/* A delete button that asks first, without JavaScript: the confirmation is folded away under the button. */
.confirm > summary { list-style: none; }
.confirm > summary::-webkit-details-marker { display: none; }
.confirm[open] > form { margin-top: .5rem; }
.passkeys { list-style: none; padding: 0; margin: 0 0 .75rem; display: grid; gap: .5rem; }
.passkeys li { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; }
.passkeys form { margin: 0; }
.recovery-code { font-family: ui-monospace, Consolas, monospace; font-size: 1.25rem; font-weight: 700; letter-spacing: .05em; overflow-wrap: anywhere; }
.pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1.5rem; }
.empty { color: var(--muted); }

/* Report form */
.notice {
    position: relative;
    background: var(--notice-bg);
    border: 1px solid var(--notice-border);
    border-radius: 8px;
    padding: .75rem 1rem .75rem 2.9rem;
    margin-block: 1rem;
    max-width: 720px;
}
.notice::before {
    background: var(--notice-border);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 0 0 20 10 10 0 1 0 0-20ZM9 4.3h2v7.9H9ZM10 13.4a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 1 0 0-2.8Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 0 0 20 10 10 0 1 0 0-20ZM9 4.3h2v7.9H9ZM10 13.4a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 1 0 0-2.8Z'/%3E%3C/svg%3E");
}

/* A card that groups content, like the game's panels. */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.25rem 1.25rem;
}
.panel > .section-title:first-child { margin-top: 0; }

.form { display: grid; gap: 1.25rem; max-width: 720px; }
.form .panel { display: grid; gap: 1.25rem; }
.form .panel > .section-title { margin-bottom: -.25rem; }
.form > button { justify-self: start; }
.field { display: grid; align-content: start; gap: .35rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > label, .field > legend { font-weight: 600; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .35rem 1rem; }
.choice { display: flex; gap: .5rem; align-items: baseline; font-weight: 400; }
.choice[hidden] { display: none; }
.hint { font-size: .85rem; color: var(--muted); }
.field-error, .validation-summary { color: var(--danger); font-size: .9rem; }
.validation-summary ul { margin: 0; padding-left: 1.2rem; }
.validation-summary-valid { display: none; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Section heading with a thin rule running out to the right. */
.section-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: 1.15rem;
    font-weight: 600;
    margin-block: 2rem .75rem;
}
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* Information box with an "i" badge. */
.info {
    position: relative;
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    border-radius: 8px;
    padding: .75rem 1rem .75rem 2.9rem;
    margin-block: 1rem;
}
/* The badge sits in the left padding, so any content (text, <strong>, paragraphs) flows normally. */
/* The icon is an SVG mask: a filled circle with the mark cut out, painted in the box's own colour. */
.info::before, .notice::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: .85rem;
    width: 1.4rem;
    height: 1.4rem;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.info::before {
    background: var(--accent);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 0 0 20 10 10 0 1 0 0-20ZM10 3.9a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 1 0 0-2.8ZM9 8.3h2v7.4H9Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 0 0 20 10 10 0 1 0 0-20ZM10 3.9a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 1 0 0-2.8ZM9 8.3h2v7.4H9Z'/%3E%3C/svg%3E");
}
.info p { margin: 0; }
.info p + p { margin-top: .5rem; }

/* Big number tiles. */
.stat-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-block: .75rem; }
.stat {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: .15rem;
    min-height: 5.5rem;
    padding: .6rem .4rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-align: center;
}
.stat-value { font-size: 1.45rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-label { font-size: .8rem; color: var(--muted); line-height: 1.25; }

/* Map */
.map-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 800px) { .map-layout { grid-template-columns: minmax(0, 1fr); } }

.map-wrap {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
#map { display: block; width: 100%; height: min(70vh, 640px); touch-action: none; cursor: grab; }
#map:active { cursor: grabbing; }

.municipality { stroke: var(--map-stroke); stroke-width: .8; vector-effect: non-scaling-stroke; cursor: pointer; }
.municipality:hover { stroke: var(--text); stroke-width: 1.5; }
/* Focus and selection are drawn as outlines on top of the map (see map.js), so neighbours never cover them. */
.municipality:focus, .municipality:focus-visible { outline: none; }
.outline-selected, .outline-focus { fill: none; pointer-events: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.outline-selected { stroke: var(--accent); stroke-width: 2.5; }
.outline-focus { stroke: var(--text); stroke-width: 3; stroke-dasharray: 5 3; }

.bin-0 { fill: var(--bin-0); background: var(--bin-0); }
.bin-1 { fill: var(--bin-1); background: var(--bin-1); }
.bin-2 { fill: var(--bin-2); background: var(--bin-2); }
.bin-3 { fill: var(--bin-3); background: var(--bin-3); }
.bin-4 { fill: var(--bin-4); background: var(--bin-4); }
.bin-5 { fill: var(--bin-5); background: var(--bin-5); }

.map-controls { position: absolute; top: .5rem; right: .5rem; display: flex; gap: .25rem; }
.map-controls .button { padding: .25rem .6rem; }
.button-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2.25rem; }
.map-keys { grid-column: 1 / -1; order: 1; margin: 0; color: var(--muted); font-size: .85rem; }

.map-tooltip {
    position: absolute;
    pointer-events: none;
    background: var(--text);
    color: var(--bg);
    padding: .2rem .5rem;
    border-radius: 4px;
    font-size: .85rem;
    white-space: nowrap;
}

.map-legend {
    position: absolute;
    left: .5rem;
    bottom: .5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    background: var(--surface);
    padding: .25rem .5rem;
    border-radius: 4px;
    font-size: .8rem;
}
.legend-item { display: inline-flex; align-items: center; gap: .25rem; }
.swatch { display: inline-block; width: .9rem; height: .9rem; border-radius: 2px; }

.map-details {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
}
.map-details h2 { margin-top: 0; font-size: 1.2rem; }
.map-details .section-title { font-size: 1rem; margin-block: 1.25rem .5rem; }
.category-bars { list-style: none; padding: 0; display: grid; gap: .4rem; }
.category-bars li { display: grid; grid-template-columns: 1fr 80px 2.5rem; gap: .5rem; align-items: center; font-size: .9rem; }
.bar { display: block; height: .6rem; background: var(--bin-0); border-radius: 3px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--bin-4); }

.ranking {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.ranking th, .ranking td { padding: .6rem .9rem; text-align: left; }
.ranking th { font-weight: 600; font-size: .9rem; color: var(--muted); border-bottom: 1px solid var(--border); }
.ranking tbody tr:nth-child(even) { background: var(--surface-2); }
.ranking tbody tr:hover { background: var(--info-bg); }
.ranking th.num, .ranking td.num { text-align: right; }

/* Moderation */
.moderation-item { display: grid; gap: .6rem; }
.moderation-item form { margin: 0; display: grid; gap: .35rem; }
.moderation-item label { font-weight: 600; font-size: .9rem; }
.moderation-facts { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; margin: 0; font-size: .9rem; }
.moderation-facts dt { color: var(--muted); }
.moderation-facts dd { margin: 0; }
.moderation-warning { color: var(--danger); font-weight: 600; }
.moderation-label { margin: 0; color: var(--muted); font-size: .85rem; }
.moderation-current { margin: 0; padding: .5rem .75rem; background: var(--surface-2); border-radius: 6px; }
/* Wide tables scroll sideways on a phone instead of widening the page. */
.table-scroll { overflow-x: auto; }
.log-table td, .log-table th { white-space: nowrap; }

.prose { max-width: 72ch; }
.prose li + li { margin-top: .35rem; }
.site-header {
    position: relative;
    z-index: 1;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 3px rgb(0 0 0 / .06), 0 4px 12px rgb(0 0 0 / .04);
}

/* Logo, menu and the report button on one row; on a phone the menu drops to its own row below. */
.header-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand nav report";
    align-items: center;
    gap: .75rem 1.5rem;
    padding-block: .75rem;
}
.brand { grid-area: brand; }
.header-nav { grid-area: nav; justify-self: end; }
.header-report { grid-area: report; }

/* Line icons drawn in SVG; they take the colour of the text around them. */
.icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.header-report {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.625rem;
    padding-block: 0;
    white-space: nowrap;
}
/* Trim the text to its cap height and baseline, so it centres against the icon by the letters
   themselves rather than by the font's uneven space above and below. */
.button-label { text-box: trim-both cap alphabetic; }
.header-report .icon { stroke-width: 2.4; }

.brand {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text);
    text-decoration: none;
}

.logo { display: inline-flex; align-items: center; gap: .5rem; }
.logo-mark { width: 1.6em; height: 1.6em; flex: none; }
.logo-tile { fill: var(--logo-tile); }
.logo-line, .logo-short, .logo-tall { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.logo-line { stroke: var(--logo-line); stroke-width: 4.8; }
.logo-short { stroke: var(--logo-short); stroke-width: 5.2; }
.logo-tall { stroke: var(--logo-tall); stroke-width: 5.2; }
.logo-name { letter-spacing: -.01em; }
.logo-accent { color: var(--logo-puls); }
.beta {
    display: inline-block;
    vertical-align: middle;
    margin-left: .3rem;
    padding: .05rem .45rem;
    border-radius: 999px;
    border: 1px solid var(--notice-border);
    background: var(--notice-bg);
    color: var(--text);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    padding-block: .25rem;
    border-bottom: 2px solid transparent;
}
.nav-link:hover { border-bottom-color: var(--rule); }
/* Signing in is not a place on the site, so it sits apart from the pages. */
.nav-account { padding-left: 1.25rem; border-left: 1px solid var(--border); }
.nav-account .nav-link { color: var(--muted); }
.nav-account .nav-link:hover, .nav-account .nav-link[aria-current="page"] { color: var(--text); }

@media (max-width: 640px) {
    .header-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "brand report" "nav nav";
        padding-bottom: 0;
    }
    .header-report { min-height: 2.5rem; padding-inline: .8rem; }
    .hide-narrow { display: none; }
    /* The menu scrolls sideways rather than wrapping, should it ever outgrow the screen. */
    .header-nav {
        justify-self: stretch;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: -16px;
        padding-inline: 16px;
        border-top: 1px solid var(--border);
    }
    .nav { gap: 1.1rem; padding-block: .35rem; }
    .nav-account { margin-left: auto; padding-left: 1.1rem; }
}
.nav-link[aria-current="page"] { border-bottom-color: var(--accent); font-weight: 600; }

.site-footer {
    margin-top: 3rem;
    padding-block: 2.5rem 1.25rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: .9rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem 3rem;
}
.footer-about p { margin: .5rem 0 0; max-width: 46ch; }
.footer-brand {
    display: inline-block;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text);
    text-decoration: none;
}
.footer-note {
    padding-left: .75rem;
    border-left: 3px solid var(--rule);
    font-size: .85rem;
}
.footer-heading {
    margin: 0 0 .6rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text);
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li + li { margin-top: .4rem; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--accent); text-decoration: underline; }
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: .8rem;
}
.footer-bottom a { color: inherit; }

@media (max-width: 700px) {
    .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .ranking:not(.log-table) th:nth-child(3), .ranking:not(.log-table) td:nth-child(3) { display: none; }
    .ranking th, .ranking td { padding: .45rem .5rem; }
}

/* "Hent som app": the banner under the header on phones, and the guides on /app. */
.install-banner {
    background: var(--info-bg);
    border-bottom: 1px solid var(--info-border);
}
.install-banner-inner {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-block: .6rem;
}
.install-banner-mark { width: 2.25rem; height: 2.25rem; flex: none; }
.install-banner-mark .logo-mark { width: 100%; height: 100%; display: block; }
.install-banner-text { flex: 1; margin: 0; font-size: .95rem; line-height: 1.35; }
.install-banner-action { flex: none; white-space: nowrap; }
.install-banner-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 2.25rem;
    min-height: 2.25rem;
    margin-right: -.5rem;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--muted);
    cursor: pointer;
}
.install-banner-close:hover { color: var(--text); }
.install-banner [hidden], .install-direct[hidden] { display: none; }

.install-direct { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-block: 1.25rem; }
.install-direct .button { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.625rem; }
.install-guides { display: grid; gap: 1rem; margin-block: 1.5rem; }
.install-guide .hint { margin-bottom: 0; }
.install-steps { padding-left: 1.4rem; }
.install-steps li { padding-left: .2rem; }
.install-steps li + li { margin-top: .6rem; }
/* A button as it looks on the phone, so people recognise what to tap. */
.install-key {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .05rem .45rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-2);
    font-weight: 600;
    white-space: nowrap;
}