/* POLISTAT — the police's own daily numbers, drawn in the board.

   Same rules as the rest of the site: nothing leaves the page, no library, the
   chart is an SVG built from the JSON the exporter writes, and every colour is a
   palette role so the white theme inverts with everything else. */

.brain-container.has-polistat {
    position: relative;
}

.polistat-view {
    position: absolute;
    inset: 0;
    /* above the cubes, which set z-index 50 on the BACK cube */
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.9rem 1rem 1rem;
    background: var(--page);
    border: 2px solid var(--rule);
    color: var(--ink);
    overflow-y: auto;
    /* NOT `contain`: the chart usually fits its box, and contain then swallows a
       one-finger drag that the reader needs for moving the page when the page itself
       is zoomed. Letting the scroll chain out means the view scrolls first (when it
       has something to scroll) and the page takes over at the end. */
    overscroll-behavior: auto;
    font-family: 'Courier New', monospace;
}

.polistat-view[hidden],
.polistat-view [hidden] {
    display: none !important;
}

.polistat-view__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.polistat-view__title {
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.06rem;
}

.polistat-view__sub {
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: var(--muted);
}

.polistat-view__close {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    background: var(--page);
    color: var(--ink);
    border: 2px solid var(--rule);
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.polistat-view__close:hover,
.polistat-view__close:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    outline: none;
}

/* Metric and range selectors: the same button language as the rest of the board. */
.polistat-view__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.polistat-view__ranges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.polistat-chip {
    background: var(--page);
    color: var(--ink);
    border: 1px solid var(--muted);
    padding: 0.25rem 0.5rem;
    font-family: inherit;
    font-size: 0.7rem;
    letter-spacing: 0.04rem;
    text-transform: uppercase;
    cursor: pointer;
}

.polistat-chip:hover,
.polistat-chip:focus-visible {
    border-color: var(--accent);
    color: var(--accent-text);
    outline: none;
}

/* Selected state is green, as D prefers for "active" anywhere on the board. */
.polistat-chip.is-active {
    border-color: var(--active);
    color: var(--active-text);
    font-weight: bold;
}

.polistat-view__trend {
    font-size: 0.75rem;
    color: var(--ink);
}

.polistat-view__trend b {
    color: var(--accent-text);
}

.polistat-view__chart {
    width: 100%;
    height: auto;
    border: 1px solid var(--surface-edge);
    background: var(--surface);
}

.polistat-grid {
    stroke: var(--surface-edge);
    stroke-width: 1;
}

.polistat-axis {
    fill: var(--muted);
    font-family: 'Courier New', monospace;
    font-size: 9px;
}

.polistat-daily {
    fill: none;
    stroke: var(--muted);
    stroke-width: 1.2;
}

.polistat-area {
    fill: var(--accent);
    opacity: 0.12;
}

.polistat-trend-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
}

.polistat-point {
    fill: var(--accent);
}

.polistat-view__note {
    font-size: 0.7rem;
    color: var(--muted);
}

@media (max-width: 768px) {
    .polistat-view {
        padding: 0.6rem 0.6rem 0.8rem;
        gap: 0.5rem;
    }

    .polistat-chip {
        font-size: 0.64rem;
        padding: 0.2rem 0.4rem;
    }
}

/* Lunine mene: the phase icon lives inside its bar, so the order of the cycle is
   readable at a glance — 🌑 new moon first, waxing to 🌕, waning back to 🌘. */
.polistat-view__moon {
    font-size: 0.72rem;
    color: var(--muted);
}

.polistat-view__moon-head {
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    font-weight: bold;
    color: var(--ink);
    font-size: 0.72rem;
    margin-bottom: 0.2rem;
}

.polistat-view__moon-line b {
    color: var(--accent-text);
}

.polistat-view__moon-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.3rem;
    height: 3.6rem;
    margin-top: 0.35rem;
}

.polistat-view__moon-bar {
    position: relative;
    flex: 1 1 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--surface-edge);
}

.polistat-view__moon-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--muted);
    opacity: 0.45;
}

.polistat-view__moon-bar.is-most .polistat-view__moon-fill {
    background: var(--active);
    opacity: 0.75;
}

/* the icon, large enough to read and sitting inside the bar it belongs to */
.polistat-view__moon-icon {
    position: relative;
    z-index: 1;
    font-size: 1.25rem;
    line-height: 1;
    padding-bottom: 0.15rem;
    filter: drop-shadow(0 0 2px var(--page));
}

.polistat-view__moon-bar.is-most {
    border-color: var(--active);
}

.polistat-view__moon-note {
    margin-top: 0.25rem;
    font-size: 0.68rem;
    color: var(--muted);
}

/* The window the readout compares against the period's average. */
.polistat-view__windows {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.polistat-view__windows-label {
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04rem;
}

/* Date range: two dates and a button that applies them. */
.polistat-view__custom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: var(--muted);
}

.polistat-view__custom label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.polistat-view__custom input[type="date"] {
    background: var(--page);
    color: var(--ink);
    border: 1px solid var(--muted);
    padding: 0.15rem 0.25rem;
    font-family: inherit;
    font-size: 0.72rem;
}

.polistat-view__custom input[type="date"]:focus-visible {
    border-color: var(--accent);
    outline: none;
}

/* The pressable target around each day: invisible, but big enough for a finger. */
.polistat-hit {
    fill: transparent;
    cursor: pointer;
}

.polistat-hit:hover,
.polistat-hit:focus-visible {
    fill: var(--accent);
    fill-opacity: 0.18;
    outline: none;
}

/* The day's report, over the chart. */
.polistat-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: var(--scrim);
}

.polistat-modal[hidden] {
    display: none !important;
}

.polistat-modal__box {
    position: relative;
    width: min(30rem, 100%);
    max-height: 80vh;
    overflow-y: auto;
    padding: 1rem 1.1rem 1.1rem;
    background: var(--page);
    color: var(--ink);
    border: 2px solid var(--accent);
    font-family: 'Courier New', monospace;
}

.polistat-modal__close {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    background: var(--page);
    color: var(--ink);
    border: 2px solid var(--rule);
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.polistat-modal__close:hover,
.polistat-modal__close:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    outline: none;
}

.polistat-modal__date {
    font-size: 0.95rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    padding-right: 2.4rem;
}

.polistat-modal__figures {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.15rem 0.8rem;
    margin: 0.7rem 0;
    font-size: 0.76rem;
}

.polistat-modal__figures dt {
    color: var(--ink);
}

.polistat-modal__figures dd {
    margin: 0;
    text-align: right;
    font-weight: bold;
    color: var(--accent-text);
}

.polistat-modal__figures .is-missing {
    color: var(--muted);
    font-weight: normal;
}

.polistat-modal__text {
    margin: 0.4rem 0 0.8rem;
    font-size: 0.78rem;
    line-height: 1.5;
}

.polistat-modal__source {
    font-size: 0.72rem;
    color: var(--accent-text);
}

@media (max-width: 768px) {
    .polistat-modal__box {
        max-height: 84vh;
    }

    .polistat-view__custom {
        font-size: 0.66rem;
    }
}