.popup {
    /* popup.js reads these to keep the box clear of notches when it clamps to the screen. */
    --popup-safe-top: env(safe-area-inset-top, 0px);
    --popup-safe-right: env(safe-area-inset-right, 0px);
    --popup-safe-bottom: env(safe-area-inset-bottom, 0px);
    --popup-safe-left: env(safe-area-inset-left, 0px);
    display: none;
    /* Fixed, in px from popup.js. Percent of the 100vh canvas drifted from the pointer on phones. */
    position: fixed;
    z-index: 6;
    left: 0;
    top: 0;
    width: max-content;
    min-width: 12rem;
    max-width: min(36rem, calc(100vw - 24px));
    height: auto;
    /* A hover tooltip, nothing to click. Also keeps wheel zoom and drag reaching the canvas
       when the box opens under the cursor, and lets a tap on it land on the page. */
    pointer-events: none;
    font-family: inherit;
    font-size: 15px;
    color: var(--text);
}

.popup-content {
    background: var(--panel-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.popup-field {
    display: none;
}

.popup-title.is-shown {
    display: block;
    font-size: calc(1.05rem - 1px);
    font-weight: 600;
    line-height: 1.3;
}

.popup-spot-split {
    display: contents;
}

.popup-spot-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.popup-spot-group:not(:has(.popup-field.is-shown)) {
    display: none;
}

.popup-content:has(#groupName.is-shown) .popup-spot-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
}

.popup-content:has(#groupName.is-shown) .popup-spot-object {
    padding-left: 12px;
    border-left: 1px solid var(--chrome-line);
}

.popup-row.is-shown {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.popup-label {
    color: var(--text-muted);
}

.popup-value {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.popup-area .popup-value {
    font-size: calc(1.15rem - 1px);
    font-weight: 600;
}

.popup-coords {
    display: none;
}

.popup-coords:has(.popup-field.is-shown) {
    display: flex;
    align-items: stretch;
}

.popup-coord-col.is-shown {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
}

.popup-coord-size.is-shown {
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid var(--chrome-line);
}

.popup-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.popup-corona-wrap {
    display: none;
}

.popup-corona-wrap:has(.popup-field.is-shown) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 4px;
    align-items: baseline;
}

.popup-corona.is-shown,
.popup-corona-times.is-shown {
    display: contents;
}

.popup-corona-green,
.popup-corona-red {
    font-weight: 600;
    text-align: right;
}

.popup-corona-green {
    color: darkolivegreen;
}

.popup-corona-red {
    color: #993333;
}

.popup-corona-wrap .popup-value {
    color: var(--text);
}

.popup-corona-times .popup-value {
    font-size: calc(0.8rem - 1px);
    white-space: normal;
}

.popup-meta {
    display: none;
}

.popup-meta:has(.popup-field.is-shown) {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--chrome-line);
    color: var(--text-muted);
    font-size: 0.8rem;
}

.popup-meta-line.is-shown {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
}

.popup-meta .popup-label,
.popup-meta .popup-value {
    color: var(--text-muted);
}

.popup.show {
    display: block;
}