/* Temperature History — kabdalis2 design system.
   Self-contained on purpose: it defines its own .sd-style frame + the pill /
   switch / chip controls so the widget renders correctly even on pages WITHOUT
   the snow-depth widget (whose stylesheet is the only other place .sd* lives,
   and it is enqueued only when that block is present).

   view.js adds .th .sd .b-card to the wrapper at runtime, builds the period
   pills into .sd__head, and injects the "Jämför år" switch + compare panel. */

/* ---- Frame (mirrors snow-depth .sd, scoped to .th so it is independent) ---- */
.th{
    padding: var(--card-pad);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.th.sd--bare{ padding: 0; background: none; border: 0; box-shadow: none; }

.th .sd__head{
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: flex-start;
    justify-content: space-between;
}

.th .temperature-history-widget-title,
.th .sd__title{
    font-family: var(--font-display);
    font-weight: var(--display-w);
    letter-spacing: var(--display-ls);
    font-size: 1.3rem;
    line-height: 1.1;
    margin: 2px 0 0;
    color: var(--ink);
}

.th .temperature-history-widget-container{
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.th .temperature-history-chart-container,
.th .sd__chart{
    position: relative;
    width: 100%;
    height: 260px;
}
.th .temperature-history-chart-container .temperature-history-chart{
    display: block;
    width: 100%;
    height: 100%;
}
/* B12: skeleton block over the chart while data + Chart.js load. */
.temperature-history-skel{ position: absolute; inset: 0; }
.temperature-history-skel .kab-skel-wrap,
.temperature-history-skel .kab-skel--block{ height: 100%; }

/* Controls wrapper (the legacy .temperature-history-chart-controls /
   [data-chart-controls] node) — stack the switch above the compare panel. */
.th .temperature-history-chart-controls{
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

/* ---- Pill group (period) + chips (series / years) — one shared look ---- */
.th__range,
.th__chips{
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: var(--surface2);
    border: 1px solid var(--line);
}
.th__rangebtn,
.th__chip{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.th__rangebtn:hover:not(.is-active),
.th__chip:hover:not(.is-active){
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--ink);
}
.th__rangebtn:focus-visible,
.th__chip:focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.th__rangebtn.is-active,
.th__chip.is-active{
    background: var(--accent);
    color: var(--on-accent);
}
.th__chip-now{
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .85;
}

/* ---- Compare switch ---- */
.th__bar{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.th__switch{
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 4px 12px 4px 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface2);
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.th__switch:hover{ color: var(--ink); }
.th__switch:focus-visible{ outline: 2px solid var(--accent); outline-offset: 1px; }
.th__switch-track{
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 19px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 20%, transparent);
    transition: background .18s ease;
}
.th__switch-thumb{
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform .18s var(--ease, ease);
}
.th__switch[aria-checked="true"]{
    color: var(--ink);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.th__switch[aria-checked="true"] .th__switch-track{ background: var(--accent); }
.th__switch[aria-checked="true"] .th__switch-thumb{ transform: translateX(15px); }

/* ---- Compare panel (series + years) ---- */
.th__compare{ display: none; }
.th__compare.is-open{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: var(--radius-sm);
    background: var(--surface2);
    border: 1px solid var(--line);
    animation: th-reveal .28s cubic-bezier(.22, .85, .35, 1) both;
}
@keyframes th-reveal{
    from{ opacity: 0; transform: translateY(-6px); }
    to{ opacity: 1; transform: none; }
}
.th__group{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}
.th__group-label{
    flex: 0 0 auto;
    min-width: 56px;
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}
.th__compare-empty{ font-size: .82rem; color: var(--muted); }

/* ---- Error states — view.js inserts on fetch failure ---- */
.temperature-history-error:empty{ display: none; }
.temperature-history-error{
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--no) 9%, var(--surface));
    border-left: 3px solid var(--no);
    color: var(--ink);
    font-size: .92rem;
    line-height: 1.5;
}
.temperature-history-yearline-error{
    font-size: .8rem;
    color: var(--no);
}

@media (max-width: 560px){
    .th{ padding: 14px; }
    .th .temperature-history-chart-container,
    .th .sd__chart{ height: 220px; }
    .th .sd__head{ gap: 10px; }
    .th__group-label{ min-width: 0; width: 100%; }
}