/* Streets — parchment / old-map design system. */
:root {
    --navy: #1B2838;
    --cobalt: #2D5F8A;
    --parchment: #F5F0E6;
    --ink: #2C2416;
    --ink-muted: #7A6F5F;
    --white: #FFFFFF;
    --radius: 10px;
    --street-person: #C0392B;
    --street-topography: #27AE60;
    --street-trade: #D4A017;
    --street-event: #8E44AD;
    --street-saint: #2980B9;
    --street-other: #7F8C8D;
    --street-unknown: #BDC3C7;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--parchment);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .serif {
    font-family: Georgia, 'Times New Roman', serif;
}

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

button {
    font: inherit;
    cursor: pointer;
    border: none;
    border-radius: var(--radius);
    background: var(--cobalt);
    color: var(--white);
    padding: 12px 18px;
    min-height: 48px;
    transition: filter .15s ease;
}
button:hover { filter: brightness(1.08); }
button:disabled { opacity: .5; cursor: default; }

button.secondary {
    background: transparent;
    color: var(--cobalt);
    border: 1px solid var(--cobalt);
}
button.ghost {
    background: transparent;
    color: var(--ink-muted);
    min-height: auto;
    padding: 6px 10px;
}
button.icon {
    min-width: 48px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

input, select {
    font-size: 16px;
    padding: 12px 14px;
    border: 1px solid #d8cfbe;
    border-radius: var(--radius);
    background: var(--white);
    color: var(--ink);
    min-height: 48px;
}

/* --- Category badges / dots --- */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--white);
    text-transform: capitalize;
    letter-spacing: .02em;
}
.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    vertical-align: middle;
}
.cat-person     { background: var(--street-person); }
.cat-topography { background: var(--street-topography); }
.cat-trade      { background: var(--street-trade); }
.cat-event      { background: var(--street-event); }
.cat-saint      { background: var(--street-saint); }
.cat-other      { background: var(--street-other); }
.cat-unknown    { background: var(--street-unknown); color: var(--ink); }

/* --- Floating header (map / walk) --- */
.app-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px;
    background: rgba(245, 240, 230, .92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(0,0,0,.08);
}
.app-header .brand {
    font-family: Georgia, serif;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--navy);
    margin-right: 4px;
}
.app-header input[type="search"] { flex: 1; min-width: 0; }

/* --- Category filter row --- */
.cat-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.cat-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--white);
    border: 1px solid #d8cfbe;
    font-size: 12px;
    min-height: 36px;
    color: var(--ink);
}
.cat-toggle.off { opacity: .35; }

/* --- Search results dropdown --- */
.search-results {
    position: absolute;
    top: 56px; left: 10px; right: 10px;
    z-index: 1100;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: 0 6px 24px rgba(0,0,0,.18);
    max-height: 50vh;
    overflow-y: auto;
}
.search-results .item {
    padding: 12px 14px;
    border-bottom: 1px solid #f0e9da;
    display: flex;
    align-items: center;
    gap: 8px;
}
.search-results .item:last-child { border-bottom: none; }
.search-results .item:hover { background: #faf6ec; cursor: pointer; }

/* --- Stats bar --- */
.stats-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 8px 12px;
    text-align: center;
    font-size: 13px;
    color: var(--ink-muted);
    background: rgba(245, 240, 230, .9);
    border-top: 1px solid rgba(0,0,0,.06);
}

/* --- Leaflet popup --- */
.leaflet-popup-content { margin: 12px 14px; }
.popup-name { font-family: Georgia, serif; font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.popup-summary { font-size: 13px; color: var(--ink-muted); margin: 6px 0; }
.popup-actions { display: flex; gap: 8px; margin-top: 8px; }
.popup-actions button { min-height: 38px; padding: 8px 12px; font-size: 13px; }

/* --- Map containers --- */
#map, #walkmap { position: absolute; inset: 0; }
#minimap { height: 200px; border-radius: var(--radius); overflow: hidden; }

/* --- Bottom sheet (street card on walk) --- */
.bottom-sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    background: var(--parchment);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -6px 24px rgba(0,0,0,.18);
    padding: 16px;
    max-height: 60vh;
    overflow-y: auto;
}

/* --- Centred page layouts (login / detail) --- */
.page {
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 16px 60px;
}
.centre {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    gap: 14px;
}
.wordmark {
    font-family: Georgia, serif;
    font-size: 44px;
    letter-spacing: .2em;
    color: var(--navy);
    margin: 0;
}
.tagline { color: var(--ink-muted); font-style: italic; margin: 0 0 12px; }

/* --- Detail page --- */
.detail-name { font-size: 30px; margin: 8px 0; color: var(--navy); }
.detail-meta { color: var(--ink-muted); margin: 4px 0 16px; }
.narrative p { line-height: 1.7; font-size: 17px; }
.person-card {
    background: var(--white);
    border-left: 4px solid var(--street-person);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin: 16px 0;
}
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0; }
.lang-toggle { display: inline-flex; border: 1px solid var(--cobalt); border-radius: var(--radius); overflow: hidden; }
.lang-toggle button { background: var(--white); color: var(--cobalt); border-radius: 0; min-height: 44px; }
.lang-toggle button.active { background: var(--cobalt); color: var(--white); }

.confidence { font-size: 13px; color: var(--ink-muted); }

/* --- Admin --- */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid #d8cfbe; margin-bottom: 16px; }
.tabs button {
    background: transparent;
    color: var(--ink-muted);
    border-radius: 0;
    border-bottom: 3px solid transparent;
    min-height: 44px;
}
.tabs button.active { color: var(--navy); border-bottom-color: var(--cobalt); font-weight: 600; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.card-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; cursor: pointer; }
.card-body { margin-top: 12px; display: none; }
.card.open .card-body { display: block; }
.cost-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.cost-table th { text-align: left; color: var(--ink-muted); font-weight: 600; border-bottom: 1px solid #d8cfbe; padding: 6px 8px; }
.cost-table td { padding: 6px 8px; border-bottom: 1px solid #eee4d2; }
.cost-table tbody tr:last-child td { border-bottom: none; }

/* --- Generation progress bar --- */
.progress-track { width: 100%; height: 10px; background: #eee4d2; border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--cobalt); border-radius: 999px; transition: width .25s ease; }
.progress-label { font-size: 13px; }
.field { margin: 10px 0; }
.field label { display: block; font-size: 12px; color: var(--ink-muted); margin-bottom: 4px; }
.field input, .field select, .field textarea { width: 100%; }
textarea {
    font: inherit;
    font-size: 16px;
    padding: 12px 14px;
    border: 1px solid #d8cfbe;
    border-radius: var(--radius);
    min-height: 120px;
    resize: vertical;
    width: 100%;
}
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.muted { color: var(--ink-muted); }
.status-msg { padding: 10px 14px; border-radius: var(--radius); margin: 10px 0; }
.status-msg.error { background: #fdecea; color: #a33; }
.status-msg.ok { background: #eafaf0; color: #258; }

.spinner { color: var(--ink-muted); padding: 20px; text-align: center; }

@media (min-width: 768px) {
    .app-header { padding: 12px 16px; }
}