/* ==============================
   Token aliases
   Map --color-* (used here) to --colour-* (defined in tokens.css)
   ============================== */
:root {
    --color-bg-primary: var(--colour-bg, #ffffff);
    --color-bg-secondary: var(--colour-bg-secondary, #f8fafc);
    --color-text-primary: var(--colour-text, #1e293b);
    --color-text-secondary: var(--colour-text-muted, #64748b);
    --color-border: var(--colour-border, #e2e8f0);
    --color-shadow: var(--colour-card-shadow, rgba(0, 0, 0, 0.08));
    --color-accent: var(--colour-link, #0077c7);
}

/* ==============================
   Calendar cells
   ============================== */
.cal-cell {
    stroke: var(--color-bg-primary);
    stroke-width: 1;
    cursor: pointer;
}

.cal-cell:hover {
    stroke: var(--color-text-primary);
    stroke-width: 1.5;
}

/* SVG text labels */
.cal-year-label {
    font-size: 11px;
    fill: var(--color-text-secondary);
    font-weight: 600;
}

.cal-month-label {
    font-size: 10px;
    fill: var(--color-text-secondary);
    font-weight: 400;
}

.cal-dow-label {
    font-size: 9px;
    fill: var(--color-text-secondary);
    font-weight: 400;
}

/* ==============================
   Tooltip
   ============================== */
.cal-tooltip {
    position: absolute;
    pointer-events: none;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    box-shadow: 0 4px 12px var(--color-shadow);
    z-index: 100;
    line-height: 1.5;
    color: var(--color-text-primary);
    display: none;
}

.cal-tooltip strong {
    font-weight: 600;
}

.cal-tooltip .temp-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.cal-tooltip .temp-label {
    color: var(--color-text-secondary);
    font-size: 11px;
}

/* ==============================
   Control buttons
   ============================== */
.cal-metric-btn {
    padding: 4px 12px;
    border-radius: 16px;
    border: 1.5px solid var(--color-border);
    background: var(--color-bg-primary);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.15s;
    color: var(--color-text-secondary);
    font-family: inherit;
}

.cal-metric-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-text-primary);
}

.cal-metric-btn.active {
    background: var(--color-accent);
    color: var(--color-bg-primary);
    border-color: var(--color-accent);
}

.cal-select {
    padding: 4px 8px;
    border-radius: 6px;
    border: 1.5px solid var(--color-border);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}

.cal-select:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.cal-input {
    padding: 4px 8px;
    border-radius: 6px;
    border: 1.5px solid var(--color-border);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: 12px;
    font-family: inherit;
    width: 60px;
}

.cal-input:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

/* ==============================
   Layer / station buttons
   ============================== */
.layer-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1.5px solid var(--color-border);
    background: var(--color-bg-primary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s;
    color: var(--color-text-primary);
    font-family: inherit;
    line-height: 1.3;
}

.layer-btn:hover {
    border-color: var(--color-accent);
    background: var(--color-bg-secondary);
}

.layer-btn.active {
    background: var(--color-accent);
    color: var(--color-bg-primary);
    border-color: var(--color-accent);
}

.layer-btn-meta {
    font-size: 11px;
    opacity: 0.6;
}

.layer-btn.active .layer-btn-meta {
    opacity: 0.8;
}

/* ==============================
   Palette picker swatches
   ============================== */
.palette-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    border: 1px solid var(--color-border);
    vertical-align: middle;
}

.palette-swatch + .palette-swatch {
    margin-left: -1px;
}

#palette-preview {
    line-height: 0;
}

/* ==============================
   Comparison checkbox
   ============================== */
.layer-compare-cb {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--color-border);
    border-radius: 3px;
    background: var(--color-bg-secondary);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: all 0.15s;
}

.layer-compare-cb:checked {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.layer-compare-cb:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 1px;
    width: 4px;
    height: 7px;
    border: solid var(--color-bg-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.layer-compare-cb:disabled {
    opacity: 0.5;
    cursor: default;
}

.layer-btn.active .layer-compare-cb {
    border-color: var(--color-bg-primary);
    background: rgba(255, 255, 255, 0.3);
}

.layer-btn.active .layer-compare-cb:checked {
    background: var(--color-bg-primary);
    border-color: var(--color-bg-primary);
}

.layer-btn.active .layer-compare-cb:checked::after {
    border-color: var(--color-accent);
}

/* ==============================
   Tooltip comparison sections
   ============================== */
.tooltip-comparison-divider {
    border-top: 1px solid var(--color-border);
    margin: 6px 0 4px;
}

.tooltip-comparison-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 2px;
}

/* ==============================
   Reduced motion
   ============================== */
@media (prefers-reduced-motion: reduce) {
    .cal-cell,
    .cal-metric-btn,
    .layer-btn {
        transition: none;
    }
}