:root {
    --surface: #2b2927;
    --surface-soft: #252321;
    --surface-raised: #36312e;
    --surface-hover: #403934;
    --line: #ffffff20;
    --line-strong: #ffffff36;
    --text: #f9f5ee;
    --muted: #c1b8ae;
    --quiet: #91877d;
    --accent: #ffad25;
    --accent-bright: #ffc45a;
    --accent-ink: #231503;
    --header: #36120b;
    --notice: #5f250f;
    --notice-border: #a94b1c;
    --radius: 0.45rem;
    --radius-large: 0.75rem;
    --shadow: 0 1rem 2.5rem #0006;
}

* {
    box-sizing: border-box;
}

a {
    color: var(--accent);
    text-decoration: none;
}
a:hover {
    color: var(--accent-bright);
    text-decoration: underline;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--accent-bright);
    outline-offset: 3px;
}
button,
input,
textarea {
    font: inherit;
}

.live-map-selection {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 1rem;
}
.live-field {
    display: grid;
    gap: 0.4rem;
    flex: 1 1 12rem;
}
.live-map-field {
    flex-grow: 2;
}
.live-field label {
    color: var(--muted);
    font-size: 0.85rem;
}
.live-map-selection input,
.live-map-selection select,
.live-toolbar select {
    padding: 0.6rem 0.75rem;
    color: var(--text);
    background: var(--surface-soft);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    min-width: 0;
    font: inherit;
}
.live-map-selection button,
.live-toolbar button,
.live-actions button {
    padding: 0.6rem 0.75rem;
    background: var(--surface-raised);
    color: var(--text);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    cursor: pointer;
}
.live-map-selection button:hover,
.live-toolbar button:hover,
.live-actions button:hover {
    color: var(--accent-bright);
    border-color: var(--accent);
}
.live-cache-controls {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 1rem;
    color: var(--muted);
    font-size: 0.8rem;
}
.live-viewer {
    position: relative;
    width: 100%;
    height: min(72vh, 54rem);
    min-height: 30rem;
    margin-block: 1rem;
    overflow: hidden;
    background: #181a1c;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow);
}
.live-viewer canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.live-welcome {
    position: absolute;
    inset: 35% 10%;
    text-align: center;
    pointer-events: none;
}
.live-welcome h2 {
    font-family: Jura, sans-serif;
    font-size: 2rem;
}
.live-welcome p {
    color: var(--muted);
}
.live-toolbar {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.6rem;
    background: #252321ed;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 0.75rem;
}
.live-toolbar strong {
    margin-right: auto;
}
.live-toolbar input {
    width: 5rem;
}
.live-status {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    max-width: 70%;
    padding: 0.6rem;
    background: #252321ed;
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 0.75rem;
}
.live-actions {
    position: absolute;
    bottom: 3.5rem;
    left: 0.75rem;
}
.live-diagnostics {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    max-width: 45%;
    padding: 0.6rem;
    background: #252321ed;
    border-radius: var(--radius);
    font-size: 0.75rem;
}
.live-diagnostics summary {
    cursor: pointer;
}
.live-diagnostics ul {
    max-height: 12rem;
    overflow: auto;
    overflow-wrap: anywhere;
    padding-left: 1rem;
}
.live-diagnostics span {
    color: var(--accent);
}
[hidden] {
    display: none !important;
}

.live-main {
    width: min(100% - 2rem, 80rem);
    margin-inline: auto;
    min-height: 60vh;
    padding-block: 1.75rem;
}
.live-map-selection {
    display: grid;
    gap: 0.5rem;
}
.live-combobox {
    position: relative;
}
.live-combobox input {
    width: 100%;
    padding-right: 3rem;
}
#clear-map {
    position: absolute;
    inset: 1px 1px 1px auto;
    width: 2rem;
    padding: 0;
    border: 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    background: #171615;
    color: var(--muted);
}
#clear-map:hover {
    color: var(--accent-bright);
    background: #292522;
}

#maps {
    position: absolute;
    z-index: 10;
    width: 100%;
    max-height: 18rem;
    overflow-y: auto;
    margin: 0.25rem 0 0;
    padding: 0.25rem;
    list-style: none;
    background: var(--surface-soft);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
#maps [role="option"] {
    padding: 0.65rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
#maps [role="option"]:hover,
#maps [aria-selected="true"] {
    background: var(--surface-hover);
    color: var(--accent);
}
.live-search-status {
    color: var(--muted);
    font-size: 0.8rem;
}
@media (max-width: 600px) {
    .live-main {
        width: min(100% - 1rem, 80rem);
        padding-block: 1rem;
    }
}

/* Shared cards clip their contents by default. The autocomplete must escape
   this card and stack above the canvas and its positioned toolbar. */
.live-selector-card {
    overflow: visible;
    position: relative;
    z-index: 100;
}
.live-viewer {
    z-index: 0;
}
.live-viewer canvas {
    touch-action: none;
    cursor: crosshair;
}
.live-viewer canvas:active {
    cursor: crosshair;
}