/* Observed fleets (C4) — Stage 1 styling. Colors come ONLY from existing --col-* tokens
   (+ color-mix for translucency); no raw literals. Stage 1 stacks the windows in a fixed
   top-right column; Stage 2 anchors each to its fleet's on-map position. */

/* Eye toggle inside the extended fleet-hover rows. */
.c4_obs_eye {
    cursor: pointer;
    margin-left: 6px;
    opacity: 0.75;
    font-size: 12px;
    vertical-align: middle;
    user-select: none;
}
.c4_obs_eye:hover { opacity: 1; }
.c4_obs_eye_on { color: var(--col-postit-custom); opacity: 1; }

/* Full-viewport overlay; each window is fixed-positioned and moved via transform to stick to its
   fleet's on-map location (set every frame by c4ObservedPositionWindows). */
#c4_observed_windows {
    position: fixed;
    inset: 0;
    z-index: 1200;
    pointer-events: none; /* only the windows themselves are interactive */
    overflow: visible;
}

.c4_obs_window {
    position: fixed;
    top: 0;
    left: 0;
    will-change: transform;
    pointer-events: auto;
    min-width: 150px;
    max-width: 260px;
    background: color-mix(in srgb, var(--col-tab-bg) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--col-btn-drk-border) 70%, transparent);
    border-radius: 4px;
    padding: 4px 6px 6px 6px;
    color: var(--col-txt);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--col-btn-drk-border) 50%, transparent);
}

.c4_obs_ctrls {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 2px;
}
.c4_obs_expand,
.c4_obs_close {
    cursor: pointer;
    opacity: 0.7;
    font-size: 11px;
    user-select: none;
}
.c4_obs_expand:hover,
.c4_obs_close:hover { opacity: 1; }

.c4_obs_section { margin-top: 2px; }
.c4_obs_fleettable { width: 100%; }

/* Expanded state hook — Stage 1 no-op beyond a subtle accent; Stage 3 fills with extra sections. */
.c4_obs_expanded { border-color: color-mix(in srgb, var(--col-postit-custom) 55%, transparent); }