/* ========================================
   Map foundation — warm ivory
   ======================================== */

   #gaia-view {
    color-scheme: light;

    --gaia-background: #F5F1E8;
    --gaia-surface: #FFFCF5;
    --gaia-border: #A89A87;

    /* Shared with the notebook */
    --gaia-paper: #FFF8EB;
    --gaia-ink: #5B4636;
    --gaia-ink-soft: #806955;
    --gaia-paper-border: #D8C5AF;
    --gaia-font: "Nunito", "Trebuchet MS", sans-serif;

    --gaia-text: var(--gaia-ink);
    --gaia-inactive: #D8D2C8;
    --gaia-unknown: #B7AEA0;
    --gaia-stale: #C9C1B5;

    --gaia-status-alive: #A9D993;
    --gaia-status-down: #EEA096;
    --gaia-status-unknown: #DED3C3;

    background: var(--gaia-background);
    color: var(--gaia-text);
    font-family: var(--gaia-font);
}

/* ========================================
   Services — map colour, pastel, ink accent
   ======================================== */

/* Web portal — bright blue */
#gaia-view .gaia-web-portal {
    --service-color: #2196FF;
    --service-paper: #E0F0FF;
    --service-accent: #155C9E;
}

/* Knowledge — bright green */
#gaia-view .gaia-knowledge {
    --service-color: #35D657;
    --service-paper: #E2FADF;
    --service-accent: #246B32;
}

/* Hub — bright purple */
#gaia-view .gaia-hub {
    --service-color: #B45CFF;
    --service-paper: #F1E2FF;
    --service-accent: #7135A0;
}

/* Router — pure yellow */
/* Router — bright orange */
#gaia-view .gaia-router {
    --service-color: #FF9A2E;
    --service-paper: #FFE8CC;
    --service-accent: #934A12;
}

/* Client — bright pink */
#gaia-view .gaia-client {
    --service-color: #FF5295;
    --service-paper: #FFE1ED;
    --service-accent: #A02D59;
}

/* ========================================
   Geographic sectors
   ======================================== */

#gaia-view .gaia-sector {
    fill: var(--service-color, var(--gaia-unknown));
    fill-opacity: 0.72;
    stroke: none;

    filter: drop-shadow(
        0 2px 3px oklch(0.10 0.015 65 / 0.45)
    );

    transition:
        fill 180ms ease,
        fill-opacity 180ms ease;
}

#gaia-view .gaia-sector:hover {
    fill-opacity: 0.88;
}

#gaia-view .gaia-sector.is-inactive {
    fill: var(--gaia-inactive);
}

#gaia-view .gaia-sector.is-unknown {
    fill: var(--gaia-unknown);
}

#gaia-view .gaia-sector.is-stale {
    fill: var(--gaia-stale);
    fill-opacity: 0.3;
}

#gaia-view .gaia-outline {
    fill: none;
    stroke: var(--gaia-border);
    stroke-width: 1;
    stroke-opacity: 0.65;
    pointer-events: none;
}

/* ========================================
   Popups — notebook paper
   ======================================== */

#gaia-view .leaflet-popup-content-wrapper {
    color-scheme: light;
    background: var(--gaia-paper);
    color: var(--gaia-ink);

    border: 1.5px solid var(--gaia-paper-border);
    border-radius: 16px;

    box-shadow:
        0 3px 0 rgb(91 70 54 / 18%),
        0 10px 24px rgb(0 0 0 / 18%);
}

#gaia-view .leaflet-popup-tip {
    background: var(--gaia-paper);
    box-shadow: 2px 2px 3px rgb(0 0 0 / 10%);
}

#gaia-view .leaflet-popup-content {
    margin: 18px 20px;
    font-family: var(--gaia-font);
    line-height: 1.5;
}

#gaia-view .leaflet-popup-close-button {
    top: 5px;
    right: 5px;
    color: var(--gaia-ink-soft);
}

#gaia-view .leaflet-popup-close-button:hover {
    color: var(--gaia-ink);
}

#gaia-view .gaia-service-popup {
    min-width: 220px;
    color: var(--gaia-ink);
}

#gaia-view .gaia-service-popup__header {
    display: flex;
    align-items: center;
    gap: 12px;

    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px dashed var(--gaia-paper-border);
}

#gaia-view .gaia-service-popup__header strong {
    color: var(--service-accent, var(--gaia-ink));
    font-size: 14px;
    font-weight: 800;
}

#gaia-view .gaia-service-popup__location {
    margin-top: 3px;
    color: var(--gaia-ink-soft);
    font-size: 12px;
}

#gaia-view .gaia-service-popup dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    margin: 0;
    font-size: 12px;
}

#gaia-view .gaia-service-popup dt {
    color: var(--gaia-ink-soft);
}

#gaia-view .gaia-service-popup dd {
    margin: 0;
    text-align: right;
    font-weight: 700;
}

/* ========================================
   Icons — pastel stickers with brown ink
   ======================================== */

#gaia-view .gaia-service-icon {
    display: inline-block;
    width: 40px;
    height: 46px;
    flex: none;
    overflow: visible;
    vertical-align: middle;
}

/* Bodies inherit these shared drawing properties. */
#gaia-view .gaia-service-icon .gaia-silhouette {
    fill: var(--service-paper, var(--gaia-paper));
    stroke: var(--gaia-ink);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Colourful centres */
#gaia-view .gaia-service-icon .gaia-web-portal__center,
#gaia-view .gaia-service-icon .gaia-hub__center {
    fill: var(--service-color, var(--gaia-paper));
    stroke: var(--gaia-ink);
    stroke-width: 1.8;
}

/* Database lid */
#gaia-view .gaia-service-icon .gaia-knowledge__top {
    fill: var(--gaia-paper);
    stroke: var(--gaia-ink);
    stroke-width: 2;
}

/* Drawn line details */
#gaia-view .gaia-service-icon .gaia-knowledge__lines,
#gaia-view .gaia-service-icon .gaia-router__arrows {
    fill: none;
    stroke: var(--gaia-ink);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Person */
#gaia-view .gaia-service-icon .gaia-client__head,
#gaia-view .gaia-service-icon .gaia-client__person {
    fill: var(--service-color, var(--gaia-paper));
    stroke: var(--gaia-ink);
    stroke-width: 1.6;
}

/* Status dots */
#gaia-view .gaia-service-icon .gaia-badge__background {
    r: 5px;
    stroke: var(--gaia-ink);
    stroke-width: 1.8;
}

#gaia-view .gaia-service-icon .gaia-badge--alive {
    fill: var(--gaia-status-alive);
}

#gaia-view .gaia-service-icon .gaia-badge--down {
    fill: var(--gaia-status-down);
}

#gaia-view .gaia-service-icon .gaia-badge--unknown {
    fill: var(--gaia-status-unknown);
}

/* ========================================
   Reduced motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    #gaia-view .gaia-sector {
        transition: none;
    }
}