/* stats.css — sunburst + continent heatmap. Reads only var(--info-*). */

.info-stats-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--info-space-lg);
    align-items: start;
}

@media (max-width: 880px) {
    .info-stats-layout { grid-template-columns: 1fr; }
}

.info-sunburst-panel,
.info-heatmap-panel {
    background: var(--info-bg-raised);
    border: 1px solid var(--info-border);
    border-radius: var(--info-radius-lg);
    padding: var(--info-space-md);
}

.info-panel-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--info-space-sm);
    margin-bottom: var(--info-space-sm);
}

.info-panel-heading h2 {
    margin: 0;
    font-size: var(--info-size-md);
}

.info-panel-hint {
    font-family: var(--info-font-ui);
    font-size: var(--info-size-xs);
    color: var(--info-text-faint);
}

/* Breadcrumb */
.info-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3em;
    font-family: var(--info-font-ui);
    font-size: var(--info-size-sm);
    color: var(--info-text-muted);
    min-height: 1.6em;
    margin-bottom: var(--info-space-xs);
}
.info-breadcrumb button {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--info-link);
    cursor: pointer;
}
.info-breadcrumb button:hover { text-decoration: underline; }
.info-breadcrumb__sep { color: var(--info-text-faint); }
.info-breadcrumb__current { color: var(--info-text); font-weight: 600; }

/* Sunburst SVG */
.info-sunburst-wrap { position: relative; }
.info-sunburst {
    width: 100%;
    height: auto;
    /* Let a finger scrub across the wedges without the page scrolling underneath. */
    touch-action: none;
    /* Don't let a scrub select the hub labels as text. */
    -webkit-user-select: none;
    user-select: none;
}

.info-sunburst-arc {
    cursor: pointer;
    stroke: var(--info-bg-raised);
    stroke-width: 1;
    /* Kill the mobile grey box that flashes on tap/drag-start. */
    -webkit-tap-highlight-color: transparent;
    transition: opacity var(--info-duration) var(--info-easing);
}
.info-sunburst-arc:hover { opacity: 0.82; }
/* Browsers draw the focus ring as the path's bounding box (a rectangle). Hide it
   for pointer/touch, but keep it for keyboard navigation. */
.info-sunburst-arc:focus { outline: none; }
.info-sunburst-arc:focus-visible {
    outline: 2px solid var(--info-accent);
    outline-offset: -1px;
}

.info-sunburst-hub {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.info-sunburst-hub circle {
    fill: var(--info-bg-sunken);
    stroke: var(--info-border);
}
.info-sunburst-hub:hover circle { stroke: var(--info-accent); }
.info-sunburst-hub:focus { outline: none; }
.info-sunburst-hub:focus-visible circle {
    stroke: var(--info-accent);
    stroke-width: 2;
}

.info-sunburst-hub-label {
    font-family: var(--info-font-ui);
    font-size: 0.98rem;
    font-weight: 700;
    fill: var(--info-text);
    text-anchor: middle;
    pointer-events: none;
}
.info-sunburst-hub-sub {
    font-family: var(--info-font-ui);
    font-size: 0.74rem;
    fill: var(--info-text-faint);
    text-anchor: middle;
    pointer-events: none;
}

/* Readout sits under the diagram (not a floating tooltip) so it never covers the
   wedges — important on touch, where a finger and its label would otherwise
   obscure exactly what you're pointing at. */
.info-sunburst-readout {
    margin-top: var(--info-space-sm);
    padding: 0.5rem 0.7rem;
    background: var(--info-bg-raised);
    border: 1px solid var(--info-border);
    border-radius: var(--info-radius-sm);
    font-family: var(--info-font-ui);
    font-size: var(--info-size-xs);
    /* Reserve room for two lines so the layout doesn't jump as the label changes. */
    min-height: 2.6em;
}
.info-sunburst-readout strong { display: block; color: var(--info-text); }
.info-sunburst-readout span { color: var(--info-text-faint); }

/* Heatmap */
.info-heatmap-target {
    font-family: var(--info-font-ui);
    font-size: var(--info-size-sm);
    color: var(--info-text-muted);
    margin-bottom: var(--info-space-md);
}
.info-heatmap-target strong { color: var(--info-text); }

.info-heatmap-map {
    width: 100%;
}

.info-heatmap-map .info-worldmap {
    width: 100%;
    height: auto;
    display: block;
}

/* Continent fill color is set inline per-render (var(--info-heat-N)); this just
   handles the outline/transition and the ocean/graticule background the source
   map ships with. */
.info-heatmap-map .info-worldmap path {
    stroke: var(--info-bg-raised);
    stroke-width: 0.5;
    transition: fill var(--info-duration) var(--info-easing);
}

.info-heatmap-legend {
    display: flex;
    align-items: center;
    gap: var(--info-space-xxs);
    margin-top: var(--info-space-md);
    font-family: var(--info-font-ui);
    font-size: var(--info-size-xs);
    color: var(--info-text-faint);
}
.info-heatmap-legend__swatch {
    width: 1.1rem; height: 0.7rem;
    border-radius: 3px;
    display: inline-block;
}

.info-stats-loading,
.info-stats-error {
    font-family: var(--info-font-ui);
    color: var(--info-text-faint);
    padding: var(--info-space-lg) 0;
    text-align: center;
}