/* Shared WSG weather graph canvas and interactive viewer. */
.tb-weather-graph-host {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: #789;
}

.tb-weather-graph-svg {
    display: block;
    width: auto;
    height: auto;
    min-width: 0;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1333 / 1000;
    background: #fff;
}

.tb-weather-graph-toolbar {
    z-index: 2;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, .25);
    background: var(--tb-surface-solid, var(--surface-glass-strong, #111b2b));
}

.tb-weather-graph-toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 30px;
    padding: 4px 8px;
    border: 1px solid var(--tb-border, var(--surface-border, rgba(166, 189, 227, .32)));
    border-radius: 7px;
    background: var(--tb-surface, var(--surface-glass, #1c2a40));
    color: var(--tb-text, var(--color-text, #f4f7fb));
    font: 700 11px var(--tb-font, "Roboto", sans-serif);
    cursor: pointer;
}

.tb-weather-graph-toolbar button:hover,
.tb-weather-graph-toolbar button:focus-visible {
    border-color: var(--tb-accent, var(--color-primary, #2f6fed));
    color: var(--tb-accent, var(--color-primary, #2f6fed));
}

.tb-weather-graph-toolbar output {
    min-width: 45px;
    color: var(--tb-text-secondary, var(--color-text-muted, #667085));
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.tb-weather-graph-viewport {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #789;
    touch-action: none;
    cursor: default;
}

.tb-weather-graph-viewport.is-pannable { cursor: grab; }
.tb-weather-graph-viewport.is-panning { cursor: grabbing; }

.tb-weather-graph-canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1333px;
    height: 1000px;
    transform-origin: 50% 50%;
    will-change: transform;
}

.tb-weather-graph-canvas .tb-weather-graph-svg {
    width: 1333px;
    height: 1000px;
    max-width: none;
    max-height: none;
    user-select: none;
    -webkit-user-drag: none;
}

.wsg-weather-graph-preview {
    display: grid;
    width: 100%;
    min-height: 180px;
    margin-top: 12px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--surface-border, rgba(166, 189, 227, .32));
    border-radius: 14px;
    background: #789;
    cursor: pointer;
}

.wsg-weather-graph-preview:hover,
.wsg-weather-graph-preview:focus-visible {
    border-color: var(--color-primary, #2f6fed);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #2f6fed) 32%, transparent);
}

.wsg-weather-graph-preview-host {
    display: grid;
    place-items: center;
    min-height: 180px;
    overflow: hidden;
}

.wsg-weather-graph-preview-host .tb-weather-graph-svg {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 420px;
}

.wsg-weather-graph-preview-status {
    margin: 8px 0 0;
    color: var(--color-text-muted, #667085);
    font-size: .86rem;
}

#wsgWeatherGraphModal[hidden] { display: none !important; }

#wsgWeatherGraphModal {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: grid;
    place-items: center;
    padding: 20px;
    background: var(--surface-overlay, rgba(2, 7, 15, .9));
    backdrop-filter: blur(10px) saturate(125%);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
}

.wsg-weather-graph-dialog-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(1180px, 96vw);
    height: min(900px, 94vh);
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--surface-border, rgba(166, 189, 227, .32));
    border-radius: 18px;
    background: var(--surface-glass-strong, #111b2b);
    box-shadow: var(--surface-shadow, 0 24px 70px rgba(0, 0, 0, .48));
}

.wsg-weather-graph-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--surface-border, rgba(166, 189, 227, .32));
}

.wsg-weather-graph-dialog-header h2 {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--color-text, #f4f7fb);
    font-size: 1rem;
}

.wsg-weather-graph-dialog-close {
    min-width: 38px;
    min-height: 34px;
    border: 1px solid var(--surface-border, rgba(166, 189, 227, .32));
    border-radius: 9px;
    background: var(--surface-glass, #1c2a40);
    color: var(--color-text, #f4f7fb);
    cursor: pointer;
    font: 700 1rem/1 "Roboto", sans-serif;
}

@media (max-width: 480px) {
    .tb-weather-graph-toolbar { padding: 5px 6px; }
    .tb-weather-graph-toolbar button { min-height: 28px; }
    #wsgWeatherGraphModal { padding: 8px; }
    .wsg-weather-graph-dialog-shell { width: 100%; height: 96vh; border-radius: 12px; }
}