/* 1. Spåret variables */
:root {
    --sp-orange: #F26A1B;
    --sp-dark: #1F2A1F;
    --sp-paper: #F7F3EA;
    --sp-contour: #8B693E;
    --sp-green: #2E9E5B;
    --sp-red: #B3261E;
    --sp-sand: #E4DDCF;
    --sp-radius: 12px;
    --sp-border: 2px;
    --sp-font: 'Bricolage Grotesque', system-ui, sans-serif;
    --sp-tight: -0.03em;
}

/* 2. Bootstrap variables set from the Spåret variables */
:root {
    --bs-primary: var(--sp-orange);
    --bs-primary-rgb: 242, 106, 27;
    --bs-dark: var(--sp-dark);
    --bs-dark-rgb: 31, 42, 31;
    --bs-body-bg: var(--sp-paper);
    --bs-body-bg-rgb: 247, 243, 234;
    --bs-body-color: var(--sp-dark);
    --bs-body-color-rgb: 31, 42, 31;
    --bs-body-font-family: var(--sp-font);
    --bs-border-radius: var(--sp-radius);
    --bs-border-width: var(--sp-border);
    --bs-border-color: var(--sp-dark);
    --bs-success: var(--sp-green);
    --bs-success-rgb: 46, 158, 91;
    --bs-danger: var(--sp-red);
    --bs-danger-rgb: 179, 38, 30;
    --bs-secondary-bg: var(--sp-sand);
    --bs-secondary-bg-rgb: 228, 221, 207;
    --bs-link-color: var(--sp-dark);
    --bs-link-color-rgb: 31, 42, 31;
    --bs-link-hover-color-rgb: 242, 106, 27;
}

/* Placeholders lighter than the help texts: Bootstrap uses --bs-secondary-color for both, so it is overridden on the fields only. */
.form-control {
    --bs-secondary-color: rgba(var(--bs-body-color-rgb), .4);
}

.btn-primary,
.btn-dark,
.btn-outline-dark {
    --bs-btn-padding-x: 16px;
    --bs-btn-padding-y: 14px;
    --bs-btn-font-size: 15px;
    --bs-btn-font-weight: 700;
    --bs-btn-border-width: var(--sp-border);
    --bs-btn-border-radius: var(--sp-radius);
}

.btn-primary {
    --bs-btn-color: white;
    --bs-btn-bg: var(--sp-orange);
    --bs-btn-border-color: var(--sp-dark);
    --bs-btn-hover-color: white;
    --bs-btn-hover-bg: color-mix(in srgb, var(--sp-orange) 85%, black);
    --bs-btn-hover-border-color: var(--sp-dark);
    --bs-btn-active-color: white;
    --bs-btn-active-bg: color-mix(in srgb, var(--sp-orange) 75%, black);
    --bs-btn-active-border-color: var(--sp-dark);
    --bs-btn-disabled-color: white;
    --bs-btn-disabled-bg: var(--sp-orange);
    --bs-btn-disabled-border-color: var(--sp-dark);
}

.btn-dark {
    --bs-btn-color: white;
    --bs-btn-bg: var(--sp-dark);
    --bs-btn-border-color: var(--sp-dark);
    --bs-btn-hover-color: white;
    --bs-btn-hover-bg: color-mix(in srgb, var(--sp-dark) 85%, white);
    --bs-btn-hover-border-color: var(--sp-dark);
    --bs-btn-active-color: white;
    --bs-btn-active-bg: color-mix(in srgb, var(--sp-dark) 75%, black);
    --bs-btn-active-border-color: var(--sp-dark);
    --bs-btn-disabled-color: white;
    --bs-btn-disabled-bg: var(--sp-dark);
    --bs-btn-disabled-border-color: var(--sp-dark);
}

.btn-outline-dark {
    --bs-btn-color: var(--sp-dark);
    --bs-btn-bg: white;
    --bs-btn-border-color: var(--sp-dark);
    --bs-btn-hover-color: var(--sp-dark);
    --bs-btn-hover-bg: var(--sp-sand);
    --bs-btn-hover-border-color: var(--sp-dark);
    --bs-btn-active-color: white;
    --bs-btn-active-bg: var(--sp-dark);
    --bs-btn-active-border-color: var(--sp-dark);
    --bs-btn-disabled-color: var(--sp-dark);
    --bs-btn-disabled-bg: white;
    --bs-btn-disabled-border-color: var(--sp-dark);
}

/* 3. What Bootstrap lacks */
body {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    overflow-x: hidden;
}

/* No zooming on phones and tablets (the owner's choice: zooming made the app hard to use). iOS Safari ignores
   user-scalable=no in the viewport, so: no pinch zoom anywhere (scrolling still works), and no double-tap zoom on
   what gets tapped. The map keeps its own pinch zoom further down. */
html {
    touch-action: pan-x pan-y;
}

button, a, input, select, textarea, summary, label, .btn {
    touch-action: manipulation;
}

/* iOS zooms into a focused field whose text is under 16 px: no field smaller than the body text. Bootstrap's own
   sizes (.form-control 16 px, -lg 20 px, the code field 28 px) are larger and win over these element rules. */
input, textarea, select {
    font-size: max(var(--bs-body-font-size), 1em);
}

.form-control-sm,
.form-select-sm {
    font-size: var(--bs-body-font-size);
}

/* Below 768 px one column with 16 px gutters; from 768 px centred, at most 720 px wide. */
.container {
    --bs-gutter-x: 32px;
    max-width: 720px;
}

h1, h2, h3, .display-6 {
    letter-spacing: var(--sp-tight);
}

.sp-contours {
    background-attachment: fixed;
    background-image:
        repeating-radial-gradient(circle at 15% 115%, transparent 0 30px, color-mix(in srgb, var(--sp-contour) 15%, transparent) 30px 31px),
        repeating-radial-gradient(circle at 115% 5%, transparent 0 38px, color-mix(in srgb, var(--sp-contour) 15%, transparent) 38px 39px);
}

.sp-progress {
    display: flex;
    gap: 4px;
}

.sp-progress .seg {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: var(--sp-sand);
}

.sp-progress .seg.done {
    background: var(--sp-orange);
}

.sp-progress .seg.current {
    background: var(--sp-dark);
}

/* The compass on the way to a stop: a white disc with ticks, N and the orange arrow; orange with a white arrow on arrival. */
.sp-compass {
    position: relative;
    flex: none;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: white;
    border: var(--sp-border) solid var(--sp-dark);
}

.sp-compass.arrived {
    background: var(--sp-orange);
}

.sp-compass-dial {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.sp-compass-arrow {
    position: absolute;
    inset: 0;
    width: 112px;
    height: 112px;
    margin: auto;
}

/* In CSS, not as an SVG attribute: var() in presentation attributes is not reliable in Safari. */
.sp-compass-arrow path {
    stroke: var(--sp-dark);
}

.sp-distance,
.sp-arrived-title {
    font-weight: 800;
    line-height: 1;
    letter-spacing: var(--sp-tight);
}

.sp-distance {
    font-size: 46px;
}

.sp-arrived-title {
    font-size: 40px;
}

/* The map to the next stop: 260 px under the clue on a phone, the full column height beside it from 768 px. */
.sp-map {
    height: 260px;
    border: var(--sp-border) solid var(--sp-dark);
    border-radius: var(--sp-radius);
    isolation: isolate;
    /* Every gesture to Leaflet, which pans and pinch-zooms the map itself (as its own .leaflet-touch-drag does). */
    touch-action: none;
}

@media (min-width: 768px) {
    .sp-map {
        flex: 1 1 auto;
        height: auto;
        min-height: 260px;
    }
}

.sp-hero-number {
    font-size: 60px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: var(--sp-tight);
    color: var(--sp-orange);
}

/* The question and the finish: one column, at most 560 px wide, centred on wider screens. */
.sp-narrow {
    max-width: 560px;
    margin-inline: auto;
}

/* Answer options: a white row with the label 1, X, 2 … in a square; orange when chosen, red after a wrong answer.
   The answer that completed a stop is shown dark. */
.sp-option {
    --bs-btn-padding-x: 12px;
    --bs-btn-padding-y: 9px;
    --bs-btn-font-size: 16px;
    --bs-btn-font-weight: 600;
    --bs-btn-active-color: var(--sp-dark);
    --bs-btn-active-bg: color-mix(in srgb, var(--sp-orange) 15%, white);
    --bs-btn-active-border-color: var(--sp-orange);
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    text-align: start;
}

.sp-option.sp-wrong {
    --bs-btn-border-color: var(--sp-red);
    --bs-btn-hover-border-color: var(--sp-red);
}

.sp-answer {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 9px 12px;
    border: var(--sp-border) solid var(--sp-dark);
    border-radius: var(--sp-radius);
    background: var(--sp-dark);
    color: white;
    font-weight: 600;
}

.sp-option-label {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--sp-sand);
    font-size: 14px;
    font-weight: 800;
}

.sp-option.active .sp-option-label,
.sp-answer .sp-option-label {
    background: var(--sp-orange);
    color: white;
}

.sp-option.sp-wrong .sp-option-label {
    background: var(--sp-red);
    color: white;
}

.sp-option-text {
    overflow-wrap: anywhere;
}

/* The question's image: full width, but never so tall that the options drop out of sight; the whole image stays visible. */
.sp-question-image {
    max-height: 45vh;
    object-fit: contain;
}

/* "Rätt!": the Spåret green instead of Bootstrap's compiled success tints (the 2 px border comes from --bs-border-width). */
.sp-correct {
    --bs-alert-color: color-mix(in srgb, var(--sp-green) 70%, black);
    --bs-alert-bg: color-mix(in srgb, var(--sp-green) 15%, white);
    --bs-alert-border-color: var(--sp-green);
}

/* Information, not an error (the team was removed and can start over): sand with the dark text. */
.alert-secondary {
    --bs-alert-color: var(--sp-dark);
    --bs-alert-bg: var(--sp-sand);
    --bs-alert-border-color: var(--sp-dark);
}

/* The join code: large, spaced like the printed code. */
.sp-code-input {
    height: 64px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.sp-code {
    letter-spacing: 0.06em;
}

/* Numbered steps on the start page and the waiting dots on the not-open page. */
.sp-step {
    width: 36px;
    height: 36px;
}

.sp-step-sm {
    width: 28px;
    height: 28px;
}

.sp-dot {
    width: 10px;
    height: 10px;
}

/* The QR code on the computer hand-off; the SVG scales to the box. */
.sp-qr {
    max-width: 240px;
}

.sp-qr svg {
    display: block;
    width: 100%;
    height: auto;
}

/* The finish: a green disc with a white tick on a dark offset shadow; sand with a dash when the round ended on the way.
   Fill and stroke in CSS, not as SVG attributes: var() in presentation attributes is not reliable in Safari. */
.sp-finish-mark {
    color: var(--sp-green);
}

.sp-finish-mark.ended {
    color: var(--sp-sand);
}

.sp-finish-mark .drop {
    fill: var(--sp-dark);
}

.sp-finish-mark .disc {
    stroke: var(--sp-dark);
    stroke-width: 2px;
}

.sp-finish-mark .sign {
    fill: none;
    stroke: white;
    stroke-width: 7px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sp-finish-mark.ended .sign {
    stroke: var(--sp-dark);
}

/* The creator's final message has a green border. */
.sp-final {
    --bs-card-border-color: var(--sp-green);
}

/* The standings and the facit on the finish page: white rows with a sand border; the team's own row has a dark
   left edge. The number of a stop sits in a small sand square, like the labels of the answer options. */
.sp-standing,
.sp-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: var(--sp-border) solid var(--sp-sand);
    border-radius: var(--sp-radius);
    background: white;
}

.sp-standing.own {
    border-inline-start: 6px solid var(--sp-dark);
}

.sp-result {
    align-items: flex-start;
}

.sp-result-number {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--sp-sand);
    font-size: 14px;
    font-weight: 800;
}

.sp-result-mark {
    flex: none;
    line-height: 0;
}

/* The pin on the location-denied page, and its how-to cards: numbered steps in small sand squares. */
.sp-location-mark {
    stroke: var(--sp-orange);
    stroke-width: 2.2px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* At least 44 px to tap (12 px above and below a 21 px line), like the TOC links on the privacy page. The summary
   keeps its list-item display and native marker: Safari has not always honoured display: flex on a summary. */
.sp-howto summary {
    min-height: 44px;
    padding-block: 12px;
    cursor: pointer;
    border-radius: var(--sp-radius);
}

/* The browser's ring would sit on the card's dark border and disappear; an orange ring inside it stays visible. */
.sp-howto summary:focus-visible {
    outline: var(--sp-border) solid var(--sp-orange);
    outline-offset: -4px;
}

.sp-howto-steps {
    list-style: none;
    counter-reset: step;
}

.sp-howto-steps li {
    display: flex;
    gap: 10px;
    counter-increment: step;
}

.sp-howto-steps li::before {
    content: counter(step);
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--sp-sand);
    font-size: 11px;
    font-weight: 800;
}

/* "No connection" over every view of the round: a dark line that stays at the top while the page scrolls. */
.sp-offline {
    --bs-alert-color: white;
    --bs-alert-bg: var(--sp-dark);
    --bs-alert-border-color: var(--sp-dark);
    position: sticky;
    top: env(safe-area-inset-top, 0);
    z-index: 1020;
}

/* The privacy page: orange bullets, the retention table with thin sand lines, and the contents kept in view. */
.sp-dots {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-dots li {
    position: relative;
    padding-left: 20px;
}

.sp-dots li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sp-orange);
}

.sp-keep {
    --bs-table-bg: white;
    --bs-border-width: 1px;
    --bs-table-border-color: var(--sp-sand);
}

.sp-keep tr:last-child > * {
    border-bottom-width: 0;
}

.sp-keep th,
.sp-keep td {
    padding: 12px 16px;
    width: 50%;
}

/* Each contents link is a 44 px tap target; the height gives the spacing, so the list has no gap. */
.sp-toc a {
    display: flex;
    align-items: center;
    min-height: 44px;
}

@media (min-width: 768px) {
    .sp-toc {
        position: sticky;
        top: 24px;
    }
}

/* The boot screen in index.html until .NET has loaded. blazor.webassembly.js sets --blazor-load-percentage and
   --blazor-load-percentage-text on the root element; the box has a fixed width and "0%" before the first update,
   so nothing moves while the bar fills. */
.sp-boot {
    width: 100%;
    max-width: 320px;
}

.sp-boot .progress {
    --bs-progress-height: 10px;
    --bs-progress-border-radius: 5px;
}

.sp-boot-fill {
    width: var(--blazor-load-percentage, 0%);
}

.sp-boot-text {
    font-variant-numeric: tabular-nums;
}

.sp-boot-text::after {
    content: var(--blazor-load-percentage-text, "0%");
}

/* Blazor's error bar in index.html: hidden until Blazor sets display: block on it after an unhandled exception.
   Dark like the offline line, fixed to the bottom above the home indicator; the reload link is a 44 px target. */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080;
    padding: 0 16px env(safe-area-inset-bottom, 0);
    background: var(--sp-dark);
    color: white;
    font-weight: 600;
}

#blazor-error-ui .reload {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-left: 8px;
    color: white;
    font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}