:root {
    --bg: #f4f7fb;
    --surface: #ffffff;
    --surface-2: #e8eff8;
    --text: #13243a;
    --muted: #4d5f78;
    --accent: #1f4e79;
    --accent-text: #ffffff;
    --link: #1a5da0;
    --border: #c9d6e6;
    --error: #b3261e;
    --focus: #f59e0b;
    --radius: 14px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b1524;
        --surface: #13213a;
        --surface-2: #1b2c4a;
        --text: #e8eefc;
        --muted: #aebbd4;
        --accent: #5aa7f0;
        --accent-text: #08111f;
        --link: #8cc4f5;
        --border: #2a3d5e;
        --error: #ffb4ab;
    }
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.55;
}

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

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

h1 { font-size: 1.9rem; line-height: 1.2; margin: 0.4em 0 0.5em; }
h2 { font-size: 1.3rem; margin: 1.6em 0 0.6em; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

.boot { padding: 48px 16px; text-align: center; color: var(--muted); }

/* Layout */
.top-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; min-height: 48px; color: var(--text); font-weight: 700; text-decoration: none; }
.top-nav { display: flex; align-items: center; gap: 4px; }
.top-nav a, .link-button {
    display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px;
    color: var(--link); background: none; border: 0; font: inherit; cursor: pointer; text-decoration: none; border-radius: 8px;
}
.top-nav a.active { font-weight: 700; text-decoration: underline; }
.content { width: min(960px, 100%); margin: 0 auto; padding: 8px 16px 48px; }
.footer { text-align: center; padding: 24px 16px; color: var(--muted); font-size: 0.9rem; }

/* Controls */
label { display: block; font-weight: 600; margin: 16px 0 6px; }
input, textarea {
    width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; color: var(--text);
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.button {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px;
    font: inherit; font-weight: 600; color: var(--text); background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
}
.button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.button.wide { width: 100%; margin-top: 20px; }
.button:disabled { opacity: 0.6; cursor: default; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-top: 24px; }
.narrow { max-width: 520px; margin-left: auto; margin-right: auto; }
.hint, .description, .location { color: var(--muted); }
.error { color: var(--error); font-weight: 600; }
.notice { background: var(--surface-2); border-radius: 10px; padding: 12px 16px; }
.badge { font-size: 0.8rem; color: var(--muted); }

.search-box { display: flex; gap: 8px; margin: 8px 0 20px; }
.search-box input { flex: 1; }

/* Places and areas */
.tiles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.tile {
    display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 10px; color: var(--text); text-decoration: none;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.tile:hover { border-color: var(--accent); }
.tile-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--surface-2); }
.tile-name { font-weight: 700; }

.hero-photo { display: block; width: 100%; max-height: 480px; object-fit: contain; border-radius: var(--radius); background: var(--surface-2); }
.photo-locked { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 0.85rem; background: var(--surface-2); min-height: 48px; }
.photo-loading { background: var(--surface-2); min-height: 48px; }
.hero-photo.photo-locked, .hero-photo.photo-loading { height: 200px; }

/* Floor plan with areas pinned on it */
.plan { position: relative; display: inline-block; max-width: 100%; }
.plan-image { display: block; max-width: 100%; border-radius: var(--radius); }
.plan-pin {
    position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center;
    min-width: 48px; min-height: 48px; justify-content: center; text-decoration: none; color: var(--text);
}
.plan-pin-dot { width: 22px; height: 22px; border-radius: 50%; background: #ffb703; border: 3px solid #1f4e79; }
.plan-pin-label { margin-top: 2px; padding: 0 6px; font-size: 0.8rem; font-weight: 700; background: var(--surface); border-radius: 6px; white-space: nowrap; }

/* Items and search results */
.item-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.item-row {
    display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 12px; color: var(--text); text-decoration: none;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.item-row:hover { border-color: var(--accent); }
.item-thumb { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--surface-2); }
.item-text { display: flex; flex-direction: column; min-width: 0; }
.item-name { font-weight: 700; }
.item-meta, .item-snippet { color: var(--muted); font-size: 0.95rem; }

.breadcrumbs ol { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; }
.breadcrumbs li + li::before { content: "›"; padding: 0 6px; color: var(--muted); }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 48px; }

.details { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 20px 0; }
.details dt { font-weight: 700; }
.details dd { margin: 0; }
.tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 999px; background: var(--surface-2); text-decoration: none; }

audio { width: 100%; }

#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 12px 16px; z-index: 1000;
    background: var(--error); color: #fff;
}
#blazor-error-ui a { color: #fff; font-weight: 700; }

@media (max-width: 520px) {
    .details { grid-template-columns: 1fr; }
    .details dd { margin-bottom: 8px; }
}