/* =============================================================================
   AstroUtah Sites Registry — Frontend Styles
   ============================================================================= */

/* ---- Variables ---- */
:root {
    --au-primary:        #4f8ef7;
    --au-primary-dark:   #2e6fd9;
    --au-bg:             #0d1117;
    --au-bg-card:        #161b22;
    --au-bg-card-hover:  #1c2330;
    --au-border:         #30363d;
    --au-text:           #e6edf3;
    --au-text-muted:     #8b949e;
    --au-text-subtle:    #484f58;
    --au-success:        #3fb950;
    --au-warning:        #d29922;
    --au-danger:         #f85149;
    --au-radius:         8px;
    --au-radius-sm:      4px;
    --au-shadow:         0 4px 24px rgba(0,0,0,.4);
    --au-transition:     0.18s ease;
    --au-map-height:     400px;
    --au-picker-height:  240px;
}

/* ---- Wrap ---- */
.au-sites-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px 60px;
    color: var(--au-text);
    font-family: inherit;
}

/* ---- Page header ---- */
.au-sites-header { padding: 32px 0 20px; }
.au-sites-title  { font-size: 1.75rem; font-weight: 700; margin: 0 0 6px; }
.au-sites-subtitle { color: var(--au-text-muted); margin: 0; font-size: .95rem; }

/* ---- Tabs ---- */
.au-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--au-border);
    margin-bottom: 24px;
}
.au-tab {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--au-text-muted);
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--au-transition), border-color var(--au-transition);
}
.au-tab:hover          { color: var(--au-text); }
.au-tab--active        { color: var(--au-primary); border-bottom-color: var(--au-primary); }

/* ---- Tab panels ---- */
.au-tab-panel          { display: none; }
.au-tab-panel--active  { display: block; }

/* ---- Toolbar ---- */
.au-my-sites-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.au-my-sites-count {
    font-size: .85rem;
    color: var(--au-text-muted);
}
.au-discover-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

/* ---- Buttons ---- */
.au-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: var(--au-radius-sm);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--au-transition), color var(--au-transition);
    text-decoration: none;
}
.au-btn--primary {
    background: var(--au-primary);
    color: #fff;
    border-color: var(--au-primary);
}
.au-btn--primary:hover { background: var(--au-primary-dark); }
.au-btn--ghost {
    background: transparent;
    color: var(--au-text);
    border-color: var(--au-border);
}
.au-btn--ghost:hover   { background: var(--au-bg-card-hover); }
.au-btn--danger        { background: var(--au-danger); color: #fff; border-color: var(--au-danger); }
.au-btn--sm            { padding: 5px 12px; font-size: .8rem; }

/* ---- Site cards ---- */
.au-sites-list { display: flex; flex-direction: column; gap: 12px; }

.au-site-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    background: var(--au-bg-card);
    border: 1px solid var(--au-border);
    border-left: 3px solid transparent;
    border-radius: var(--au-radius);
    padding: 16px 18px;
    cursor: pointer;
    transition: background var(--au-transition), border-color var(--au-transition);
}
.au-site-card:hover {
    background: var(--au-bg-card-hover);
    border-color: var(--au-border);
    border-left-color: var(--au-text-subtle);
}
/* Active: left accent + very faint blue tint. Badge carries the meaning;
   the card treatment stays quiet so it doesn't compete with content. */
.au-site-card--active {
    border-left-color: var(--au-primary);
    background: rgba(79, 142, 247, 0.04);
}

.au-site-card__body     { min-width: 0; }
.au-site-card__name     { font-weight: 600; font-size: 1rem; margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-site-card__meta     { font-size: .8rem; color: var(--au-text-muted); display: flex; flex-wrap: wrap; gap: 10px; }
.au-site-card__actions  { display: flex; align-items: flex-start; gap: 6px; flex-shrink: 0; }

/* Active badge */
.au-active-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: .72rem;
    font-weight: 600;
    background: var(--au-primary);
    color: #fff;
    margin-left: 8px;
}

/* Sharing badges */
.au-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: .72rem;
    font-weight: 500;
}
.au-badge--private     { background: rgba(248,81,73,.15); color: var(--au-danger); }
.au-badge--approximate { background: rgba(210,153,34,.15); color: var(--au-warning); }
.au-badge--exact       { background: rgba(63,185,80,.15);  color: var(--au-success); }

/* Weather source badge */
.au-wx-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .75rem;
    color: var(--au-text-muted);
}
.au-wx-badge--live  { color: var(--au-success); }
.au-wx-badge--live::before { content: '●'; margin-right: 2px; color: var(--au-success); }

/* ---- Map ---- */
.au-map {
    width: 100%;
    height: var(--au-map-height);
    border-radius: var(--au-radius);
    border: 1px solid var(--au-border);
    background: var(--au-bg-card);
    margin-bottom: 16px;
}
.au-map--picker { height: var(--au-picker-height); }

/* ---- Discover view toggle ---- */
.au-view-toggle    { display: flex; gap: 4px; }
.au-view-btn {
    width: 34px; height: 34px;
    background: var(--au-bg-card);
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius-sm);
    color: var(--au-text-muted);
    cursor: pointer;
    font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--au-transition);
}
.au-view-btn--active,
.au-view-btn:hover  { background: var(--au-bg-card-hover); color: var(--au-primary); }

/* ---- Filter select ---- */
.au-select {
    padding: 7px 12px;
    background: var(--au-bg-card);
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius-sm);
    color: var(--au-text);
    font-size: .875rem;
}
.au-select:focus { outline: 2px solid var(--au-primary); border-color: transparent; }

/* ---- Empty states ---- */
.au-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--au-text-muted);
}
.au-empty-state__icon { font-size: 3rem; margin-bottom: 16px; }
.au-empty-state h2    { font-size: 1.2rem; color: var(--au-text); margin-bottom: 8px; }
.au-empty-state p     { max-width: 400px; margin: 0 auto 20px; font-size: .9rem; }

/* ---- Spinner ---- */
.au-loading { position: relative; min-height: 80px; }
.au-spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--au-border);
    border-top-color: var(--au-primary);
    border-radius: 50%;
    animation: au-spin .7s linear infinite;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}
@keyframes au-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* ---- Detail panel ---- */
.au-detail-panel {
    position: fixed;
    top: 0; right: 0;
    width: 380px; max-width: 100vw;
    height: 100%;
    background: var(--au-bg-card);
    border-left: 1px solid var(--au-border);
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    box-shadow: var(--au-shadow);
}
.au-detail-panel.au-detail-panel--open { transform: translateX(0); }

.au-detail-panel__inner { padding: 24px; }
.au-detail-panel__close {
    position: absolute; top: 16px; right: 16px;
    background: none; border: none;
    color: var(--au-text-muted); font-size: 1.5rem;
    cursor: pointer; line-height: 1;
}
.au-detail-panel__close:hover { color: var(--au-text); }

.au-detail-content h2 { font-size: 1.1rem; margin: 0 0 8px; }
.au-detail-content .au-detail-meta { font-size: .82rem; color: var(--au-text-muted); margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 10px; }

/* Weather in detail panel */
.au-wx-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 16px 0;
}
.au-wx-item {
    background: var(--au-bg);
    border-radius: var(--au-radius-sm);
    padding: 10px 12px;
}
.au-wx-item__label { font-size: .72rem; color: var(--au-text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.au-wx-item__value { font-size: 1.05rem; font-weight: 600; color: var(--au-text); }

/* Source tag */
.au-source-tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .75rem; color: var(--au-text-muted);
    background: var(--au-bg); border: 1px solid var(--au-border);
    padding: 3px 8px; border-radius: 12px;
    margin-bottom: 16px;
}

/* ============================================================================
   PHASE 4 — SITE RESIDENT EQUIPMENT
   ============================================================================ */

/* ---- Section shell ---- */
.au-site-equip-section {
    margin-top: 24px;
    border-top: 1px solid var(--au-border);
    padding-top: 16px;
}

/* ---- Header row: title + Add button ---- */
.au-site-equip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 8px;
}

.au-site-equip-title {
    font-size: .78rem;
    font-weight: 700;
    color: var(--au-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ---- Equipment list ---- */
.au-site-equip-list {
    list-style: none !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Reset li — theme may add padding/margin/list-style to bare li elements */
.au-site-equip-list li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.au-site-equip-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--au-bg);
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius-sm);
    transition: background var(--au-transition);
}

.au-site-equip-item:hover { background: var(--au-bg-card-hover); }

.au-site-equip-icon {
    font-size: 1rem;
    flex-shrink: 0;
    line-height: 1;
}

.au-site-equip-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.au-site-equip-name {
    font-size: .875rem;
    font-weight: 500;
    color: var(--au-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.au-site-equip-sub {
    font-size: .75rem;
    color: var(--au-text-muted);
}

/* Remove button — hidden until row is hovered.
   !important needed to beat theme button base styles. */
.au-site-equip-remove-btn {
    flex-shrink: 0;
    background: transparent !important;
    border: none !important;
    color: var(--au-text-subtle) !important;
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
    padding: 3px 6px !important;
    border-radius: var(--au-radius-sm);
    box-shadow: none !important;
    opacity: 0;
    transition: opacity var(--au-transition), color var(--au-transition), background var(--au-transition);
    min-height: 0;
    min-width: 0;
    width: auto;
}

.au-site-equip-item:hover .au-site-equip-remove-btn { opacity: 1; }

.au-site-equip-remove-btn:hover {
    color: var(--au-danger) !important;
    background: rgba(248, 81, 73, .1) !important;
}

/* Empty state */
.au-site-equip-empty {
    font-size: .82rem;
    color: var(--au-text-subtle);
    font-style: italic;
    padding: 6px 0;
}

/* ---- Gear picker dropdown ---- */
.au-gear-picker {
    background: var(--au-bg);
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius-sm);
    overflow: hidden;
    margin-top: 4px;
}

.au-gear-picker-inner {
    max-height: 240px;
    overflow-y: auto;
    padding: 8px 0;
}

/* Scrollbar matches the left panel */
.au-gear-picker-inner::-webkit-scrollbar { width: 6px; }
.au-gear-picker-inner::-webkit-scrollbar-track  { background: var(--au-bg); }
.au-gear-picker-inner::-webkit-scrollbar-thumb  { background: var(--au-border); border-radius: 3px; }
.au-gear-picker-inner::-webkit-scrollbar-thumb:hover { background: var(--au-primary); }

/* Loading spinner row */
.au-gear-picker-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: .82rem;
    color: var(--au-text-muted);
}

/* Type group label */
.au-gear-picker-group-label {
    list-style: none;
    font-size: .7rem;
    font-weight: 700;
    color: var(--au-text-subtle);
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 8px 14px 4px;
}

/* Individual gear item button */
.au-gear-picker-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    padding: 7px 14px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: left;
    cursor: pointer;
    transition: background var(--au-transition);
    min-height: 0;
}

.au-gear-picker-item:hover  { background: var(--au-bg-card-hover); }
.au-gear-picker-item:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.au-gear-picker-item-name {
    font-size: .875rem;
    color: var(--au-text);
    font-weight: 500;
}

.au-gear-picker-item-sub {
    font-size: .75rem;
    color: var(--au-text-muted);
}

/* Empty / error message inside picker */
.au-gear-picker-empty {
    font-size: .82rem;
    color: var(--au-text-muted);
    padding: 10px 14px;
    font-style: italic;
}

.au-gear-picker-empty a {
    color: var(--au-primary);
    text-decoration: none;
}

.au-gear-picker-empty a:hover { text-decoration: underline; }

/* Cancel button at the bottom of the picker */
.au-gear-picker-cancel {
    display: block;
    width: 100%;
    padding: 8px !important;
    background: transparent !important;
    border: none !important;
    border-top: 1px solid var(--au-border) !important;
    box-shadow: none !important;
    color: var(--au-text-muted) !important;
    font-size: .8rem;
    cursor: pointer;
    transition: background var(--au-transition), color var(--au-transition);
    border-radius: 0 !important;
    min-height: 0;
}

.au-gear-picker-cancel:hover {
    background: var(--au-bg-card-hover) !important;
    color: var(--au-text) !important;
}

/* ---- Overlay ---- */
.au-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 9998;
}
.au-overlay--visible { display: block; }

/* ---- Modal ---- */
.au-modal {
    display: none;
    position: fixed; inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}
.au-modal--open { display: flex; }

.au-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.6);
}
.au-modal__box {
    position: relative;
    background: var(--au-bg-card);
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius);
    width: 560px; max-width: calc(100vw - 32px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 28px;
    box-shadow: var(--au-shadow);
    z-index: 1;
}
.au-modal__close {
    position: absolute; top: 16px; right: 16px;
    background: none; border: none;
    color: var(--au-text-muted); font-size: 1.5rem;
    cursor: pointer; line-height: 1;
}
.au-modal__close:hover { color: var(--au-text); }
.au-modal__title { font-size: 1.15rem; font-weight: 700; margin: 0 0 20px; }

/* ---- Step indicator ---- */
.au-steps {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--au-border);
    padding-bottom: 16px;
}
.au-step {
    display: flex; align-items: center; gap: 8px;
    font-size: .8rem; color: var(--au-text-muted);
    flex: 1;
}
.au-step__num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--au-border);
    color: var(--au-text-muted);
    font-size: .75rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.au-step--active .au-step__num   { background: var(--au-primary); color: #fff; }
.au-step--active .au-step__label { color: var(--au-text); font-weight: 500; }
.au-step--done .au-step__num     { background: var(--au-success); color: #fff; }

/* ---- Form fields ---- */
.au-site-form  { }
.au-form-step  { }
.au-form-row   { display: flex; gap: 12px; }
.au-form-row--3col > .au-field { flex: 1; }
.au-field      { margin-bottom: 14px; }
.au-field label {
    display: block;
    font-size: .82rem;
    font-weight: 500;
    color: var(--au-text-muted);
    margin-bottom: 5px;
}
.au-field input[type="text"],
.au-field input[type="number"],
.au-field input[type="password"],
.au-field textarea,
.au-field select,
.au-horizon-table input[type="number"],
.au-select {
    width: 100%;
    padding: 8px 11px;
    background: var(--au-bg) !important;
    border: 1px solid var(--au-border) !important;
    border-radius: var(--au-radius-sm);
    color: var(--au-text) !important;
    -webkit-text-fill-color: var(--au-text) !important;
    font-size: .875rem;
    box-sizing: border-box;
    transition: border-color var(--au-transition);
    /* Prevent browser autofill from overriding background */
    -webkit-box-shadow: 0 0 0 1000px var(--au-bg) inset !important;
    box-shadow: none;
}
.au-field input::placeholder,
.au-field textarea::placeholder {
    color: var(--au-text-subtle) !important;
    -webkit-text-fill-color: var(--au-text-subtle) !important;
    opacity: 1;
}
.au-field input:focus,
.au-field textarea:focus,
.au-field select:focus {
    outline: none !important;
    border-color: var(--au-primary) !important;
    box-shadow: 0 0 0 2px rgba(79,142,247,.2) !important;
}
/* Ensure select options are readable in all browsers */
.au-field select option,
.au-select option {
    background: #1c2330;
    color: #e6edf3;
}
.au-field textarea  { resize: vertical; }
.au-required        { color: var(--au-danger); }
.au-form-hint       { font-size: .78rem; color: var(--au-text-subtle); margin: -8px 0 12px; }

/* Radio + checkbox */
.au-radio-group     { display: flex; flex-direction: column; gap: 10px; }
.au-radio-label,
.au-checkbox-label  { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .875rem; }
.au-radio-label input,
.au-checkbox-label input { margin-top: 2px; flex-shrink: 0; }

/* Form nav */
.au-form-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.au-form-error { color: var(--au-danger); font-size: .82rem; margin-top: 8px; padding: 8px 12px; background: rgba(248,81,73,.1); border-radius: var(--au-radius-sm); }

/* Station fields */
.au-station-fields { background: var(--au-bg); border: 1px solid var(--au-border); border-radius: var(--au-radius-sm); padding: 14px; margin-bottom: 14px; }

/* ---- Map pins (Leaflet divIcon) ---- */
.au-map-pin {
    width: 32px;
    height: 32px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--au-primary);
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--au-transition);
}
.au-map-pin span {
    transform: rotate(45deg);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}
.au-map-pin--wx    { background: var(--au-success); }
.au-map-pin--approx { background: var(--au-warning); }
.au-map-pin:hover  { background: var(--au-primary-dark); filter: brightness(1.15); }

/* Leaflet popup dark theme */
.leaflet-popup-content-wrapper {
    background: var(--au-bg-card);
    border: 1px solid var(--au-border);
    color: var(--au-text);
    border-radius: var(--au-radius-sm);
    box-shadow: var(--au-shadow);
}
.leaflet-popup-tip { background: var(--au-bg-card); }
.au-map-popup      { font-size: .82rem; line-height: 1.5; min-width: 140px; }
.au-map-popup strong { font-size: .9rem; display: block; margin-bottom: 2px; }
.au-map-popup small  { color: var(--au-text-muted); }
.au-map-popup a      { color: var(--au-primary); display: block; margin-top: 6px; }

/* Leaflet control buttons dark theme */
.leaflet-bar a {
    background: var(--au-bg-card) !important;
    color: var(--au-text) !important;
    border-color: var(--au-border) !important;
}
.leaflet-bar a:hover { background: var(--au-bg-card-hover) !important; }

/* ---- Horizon editor ---- */
.au-horizon-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
    margin-bottom: 10px;
}
.au-horizon-table th {
    text-align: left;
    padding: 6px 8px;
    color: var(--au-text-muted);
    font-weight: 500;
    border-bottom: 1px solid var(--au-border);
}
.au-horizon-table td { padding: 4px 4px; }
.au-horizon-table input[type="number"] {
    width: 80px;
    padding: 5px 7px;
    background: var(--au-bg);
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius-sm);
    color: var(--au-text);
    font-size: .82rem;
}
.au-horizon-table input:focus { border-color: var(--au-primary); outline: none; }
.au-horizon-row-del {
    background: none;
    border: none;
    color: var(--au-text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 6px;
    border-radius: var(--au-radius-sm);
}
.au-horizon-row-del:hover { color: var(--au-danger); background: rgba(248,81,73,.1); }

.au-horizon-empty {
    color: var(--au-text-subtle);
    font-size: .82rem;
    font-style: italic;
    padding: 8px 0;
}

/* ---- Screen reader only ---- */
.au-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .au-modal__box   { padding: 20px 16px; }
    .au-detail-panel { width: 100%; }
    .au-form-row--3col { flex-direction: column; }
    .au-site-card    { grid-template-columns: 1fr; }
    .au-site-card__actions { flex-direction: row; justify-content: flex-end; }
    .au-wx-grid      { grid-template-columns: 1fr; }
}


/* =============================================================================
   BORTLE / SKY-DARKNESS BADGES & DETAIL ROW
   ============================================================================= */

/* ---- Bortle badge colours (used on site cards and detail panel) ---------- */
/* These map the Bortle 1–9 scale to the conventional astronomy community
   colour convention, independent of the overlay tile source.               */

.au-bortle-b1 { background: #000033; color: #8899FF; }
.au-bortle-b2 { background: #00006E; color: #AABFFF; }
.au-bortle-b3 { background: #0000CC; color: #CCDDFF; }
.au-bortle-b4 { background: #006600; color: #99EE99; }
.au-bortle-b5 { background: #669900; color: #EEFFAA; }
.au-bortle-b6 { background: #999900; color: #FFFFAA; }
.au-bortle-b7 { background: #CC6600; color: #FFE0AA; }
.au-bortle-b8 { background: #CC0000; color: #FFAAAA; }
.au-bortle-b9 { background: #660000; color: #FF9999; }
.au-bortle-unknown { background: var(--au-bg-card-hover); color: var(--au-text-muted); }

/* ---- Lorenz atlas zone colours (used in the overlay map legend only) ---- */
/* Matched to the actual tile palette from djlorenz.github.io/astronomy/lp/
   Zone 0 = near-black (pristine) → Zone 7 = bright red (inner-city)        */

.au-lp-zone-0 { background: #000022; color: #6677CC; }
.au-lp-zone-1 { background: #000099; color: #AACCFF; }
.au-lp-zone-2 { background: #0055CC; color: #CCE4FF; }
.au-lp-zone-3 { background: #007700; color: #99EE99; }
.au-lp-zone-4 { background: #AAAA00; color: #FFFFAA; }
.au-lp-zone-5 { background: #CC7700; color: #FFE0AA; }
.au-lp-zone-6 { background: #CC2200; color: #FFBBAA; }
.au-lp-zone-7 { background: #FF5555; color: #330000; }

/* ---- Base badge ---------------------------------------------------------- */
.au-bortle-badge {
    display:        inline-flex;
    align-items:    center;
    padding:        2px 8px;
    border-radius:  var(--au-radius-sm);
    font-size:      .75rem;
    font-weight:    600;
    letter-spacing: .03em;
    white-space:    nowrap;
    vertical-align: middle;
}

/* Compact card variant */
.au-bortle-badge--sm {
    padding:   1px 6px;
    font-size: .7rem;
}

/* Manual-override indicator — subtle dashed border */
.au-bortle-badge--manual {
    outline: 1.5px dashed currentColor;
    outline-offset: 2px;
}

/* ---- Step-1 Bortle row in the Add/Edit modal ----------------------------- */
.au-bortle-row {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    gap:            12px;
    margin-top:     10px;
    padding:        10px 12px;
    background:     var(--au-bg-card);
    border:         1px solid var(--au-border);
    border-radius:  var(--au-radius-sm);
    min-height:     40px;
}

.au-bortle-row__left  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.au-bortle-row__right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.au-bortle-row__label {
    font-size:  .8rem;
    font-weight: 500;
    color:      var(--au-text-muted);
    white-space: nowrap;
}

.au-bortle-display {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
}

.au-bortle-display__hint {
    font-size:  .8rem;
    color:      var(--au-text-subtle);
    font-style: italic;
}

.au-bortle-display__hint--warn { color: var(--au-warning); font-style: normal; }

.au-bortle-display__desc {
    font-size: .8rem;
    color:     var(--au-text-muted);
}

.au-bortle-display__sqm {
    font-size:   .75rem;
    color:       var(--au-text-subtle);
    font-family: monospace;
}

.au-bortle-display__source {
    font-size:  .7rem;
    color:      var(--au-text-subtle);
    font-style: italic;
}

.au-bortle-display__source--manual {
    color:      var(--au-warning);
    font-style: normal;
    font-weight: 500;
}

/* Override select — compact inline dropdown */
.au-bortle-override-select {
    padding:       3px 6px;
    background:    var(--au-bg-card-hover);
    border:        1px solid var(--au-border);
    border-radius: var(--au-radius-sm);
    color:         var(--au-text);
    font-size:     .8rem;
    cursor:        pointer;
}

/* ---- Detail panel Bortle row -------------------------------------------- */
.au-bortle-detail-row {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
    padding:     10px 0;
    border-bottom: 1px solid var(--au-border);
    margin-bottom: 12px;
    font-size:   .875rem;
}

.au-bortle-detail-row__label {
    font-size:  .75rem;
    font-weight: 500;
    color:      var(--au-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    min-width:  80px;
}

.au-bortle-detail-row__sqm {
    font-size:   .8rem;
    color:       var(--au-text-muted);
    font-family: monospace;
}

.au-bortle-detail-row__manual {
    font-size:  .75rem;
    color:      var(--au-warning);
    margin-left: auto;
}


/* =============================================================================
   LIGHT POLLUTION OVERLAY — IN-MAP LEAFLET CONTROL
   ============================================================================= */

/* ---- Remove LP-specific overrides from the discover toolbar -------------- */
/* The LP button now lives inside the map — no toolbar overrides needed.     */
.au-discover-toolbar .au-view-toggle {
    margin-left: auto;
}

/* ---- Leaflet control container ------------------------------------------ */
.au-lp-control {
    background:   var(--au-bg-card, #161b22);
    border-color: var(--au-border, #30363d) !important;
    border-radius: var(--au-radius, 8px) !important;
    overflow:     visible !important;
    min-width:    148px;
}

/* ---- Toggle button -------------------------------------------------------- */
.au-lp-control__btn {
    display:      block;
    width:        100%;
    padding:      6px 10px;
    background:   transparent;
    border:       none;
    color:        var(--au-text, #e6edf3);
    font-size:    .78rem;
    font-weight:  500;
    text-align:   left;
    cursor:       pointer;
    white-space:  nowrap;
    border-radius: var(--au-radius, 8px);
    transition:   background var(--au-transition, 0.18s ease),
                  color var(--au-transition, 0.18s ease);
}

.au-lp-control__btn:hover {
    background: var(--au-bg-card-hover, #1c2330);
}

.au-lp-control__btn--on {
    background: #1B6B3A;
    color:      #A8ECC6;
}

.au-lp-control__btn--on:hover {
    background: #226040;
}

/* ---- Expanded panel (opacity row + legend) -------------------------------- */
.au-lp-control__panel {
    padding:       6px 8px 8px;
    border-top:    1px solid var(--au-border, #30363d);
}

.au-lp-control__opacity-row {
    display:     flex;
    align-items: center;
    gap:         6px;
    margin-bottom: 8px;
}

.au-lp-control__opacity-label {
    font-size:   .7rem;
    color:       var(--au-text-muted, #8b949e);
    white-space: nowrap;
}

.au-lp-control__opacity-val {
    font-size:   .7rem;
    color:       var(--au-text-muted, #8b949e);
    min-width:   28px;
    text-align:  right;
}

.au-lp-control__slider {
    flex:        1;
    accent-color: #2A9A55;
    height:      2px;
    cursor:      pointer;
}

/* ---- Legend strip (inside the control panel) ----------------------------- */
.au-lp-legend {
    display:      flex;
    align-items:  center;
    gap:          3px;
    flex-wrap:    nowrap;
}

.au-lp-legend__title {
    font-size:    .65rem;
    color:        var(--au-text-muted, #8b949e);
    margin-right: 2px;
    white-space:  nowrap;
}

.au-lp-legend__swatch {
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    flex:           1;
    height:         16px;
    border-radius:  2px;
    font-size:      .6rem;
    font-weight:    600;
    cursor:         default;
    min-width:      0;
    overflow:       hidden;
}

/* ---- LP overlay tile layer ----------------------------------------------- */
/* In Leaflet, className on a TileLayer is added to each <img> tile element.
   To blur ACROSS tile boundaries (eliminating seam lines), we target the
   leaflet-tile-pane or the specific container.  We wrap the blur on the
   entire pane so tiles blend together as a single image.
   The .au-lp-overlay-tile class is on each <img>; its parent container is
   the element we actually need to blur.                                     */
.leaflet-tile-pane .au-lp-overlay-tile {
    /* per-image: remove any rounding that might create hair-line gaps */
    display: block;
    image-rendering: auto;
}

/* Blur the container that wraps all LP tiles together — this crosses seams */
.leaflet-map-pane .leaflet-tile-container:has(.au-lp-overlay-tile) {
    filter: blur(0.6px);
}

/* Fallback for browsers without :has() — target by overlay layer order.
   The LP layer is always the second tile layer (index 1 in the pane).      */
@supports not selector(:has(*)) {
    .leaflet-overlay-pane {
        filter: blur(0.6px);
    }
}