/* Thailand Weather pages (weather.php). The forecast itself reuses the modal's .tg-wxf styles in style.css;
   this file only adds the hub panels, place cards, page panels and the comparison. Loaded via $extraCss on those pages only. */

/* ── Cards ── */
.tg-wxh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: 0.75rem; margin: 0 0 1.75rem; padding: 0; list-style: none; }
.tg-wxh-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(0, 0, 0, 0.09); border-radius: 0.9rem; overflow: hidden; }
.tg-wxh-card__open {
    display: flex; flex-direction: column; gap: 0.35rem; flex: 1 1 auto; width: 100%; margin: 0; padding: 0.8rem 0.95rem 0.7rem;
    font: inherit; color: inherit; text-align: left; background: transparent; border: 0; cursor: pointer;
    transition: background-color 0.15s ease;
}
.tg-wxh-card__open:hover { background: rgba(0, 109, 119, 0.05); }
.tg-wxh-card__open:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 0.9rem 0.9rem 0 0; }
.tg-wxh-card__name { font-family: var(--font-headline); font-weight: 700; font-size: 1.02rem; color: var(--on-surface); }
.tg-wxh-sum { display: grid; grid-template-columns: 40px auto 1fr; align-items: center; column-gap: 0.6rem; row-gap: 0.15rem; min-height: 40px; }
.tg-wxh-sum__icon { grid-row: span 2; width: 40px; height: 40px; }
.tg-wxh-sum__temp { font-family: var(--font-headline); font-weight: 800; font-size: 1.45rem; line-height: 1; color: var(--on-surface); }
.tg-wxh-sum__cond { font-size: 0.9rem; font-weight: 600; color: #333; min-width: 0; }
.tg-wxh-sum__meta,
.tg-wxh-sum__stale { grid-column: 2 / -1; font-size: 0.8rem; color: var(--on-surface-variant); }
.tg-wxh-sum__stale { color: var(--on-secondary-fixed-variant); font-weight: 600; }
.tg-wxh-sum__none { grid-column: 1 / -1; font-size: 0.88rem; color: var(--on-surface-variant); }
.tg-wxh-card__link {
    display: block; padding: 0.5rem 0.95rem; font-size: 0.85rem; font-weight: 600; color: var(--primary);
    border-top: 1px solid rgba(0, 0, 0, 0.07); text-decoration: none;
}
.tg-wxh-card__link:hover { text-decoration: underline; background: var(--surface-container-low); }
.tg-wxh-card__link:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }


/* ── Panels, guide links ── */
.tg-wxh-panel { margin-top: 2.25rem; }
.tg-wxh-panel > p { color: var(--on-surface-variant); }
.tg-wxh-panel .btn { margin: 0.25rem 0.5rem 0.25rem 0; }
.tg-wxh-guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.5rem 1.25rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.tg-wxh-guides li { padding: 0.55rem 0.8rem; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 0.75rem; }
.tg-wxh-guides a { font-weight: 700; color: var(--primary); }
.tg-wxh-guides__main { grid-column: 1 / -1; }
.tg-wxh-guides__main p { margin: 0.3rem 0 0; font-size: 0.9rem; color: var(--on-surface-variant); }
.tg-wxh-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.tg-wxh-links a {
    display: inline-block; padding: 0.35rem 0.85rem; border-radius: 9999px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.12);
    font-size: 0.88rem; font-weight: 600; color: var(--on-surface);
}
.tg-wxh-links a:hover { border-color: var(--primary); color: var(--primary); }

/* ── Forecast page: the modal's body, on the page ── */

.tg-wxp .tg-wxf__hero-temp { font-size: 3rem; }

/* Desktop: the conditions block sits in the middle of the card (icon left, Night / Updated right). Equal 1fr side columns
   centre it on the card, not on the space left over. Below 901px the modal's own stacked layout applies. */
@media (min-width: 901px) {
    .tg-wxp .tg-wxf__hero { grid-template-columns: 1fr auto 1fr; }
    .tg-wxp .tg-wxf__hero-icon { justify-self: start; }
    .tg-wxp .tg-wxf__hero-main { text-align: center; }
    .tg-wxp .tg-wxf__hero-meta { justify-self: end; }
}

@media (max-width: 640px) {
    .tg-wxh-grid { grid-template-columns: 1fr; }
    .tg-wxp .tg-wxf__hero-temp { font-size: 2.6rem; }
}

/* H3s use the site index-page heading (.loc-index-province-heading, purple). On a forecast page the forecast's own
   section headings (.tg-wxf__h, small text in the modal) take the same look; the modal itself is unchanged. */
.tg-wxp .tg-wxf__h {
    font-family: var(--font-headline); font-weight: 700; font-size: 1.15rem; width: fit-content; background-color: var(--secondary);
    color: #fff; text-transform: none; letter-spacing: 0.05em; padding: 0.4rem 1rem; margin: 0 0 1.25rem 0;
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15); border-radius: 4px;
}
.tg-wxp .tg-wxf__sec-head .tg-wxf__h { margin: 0; }
/* Province names (H4 under the "Weather by province" H3): the same purple heading, one size down. */

/* ── Hub panels: Bangkok + two the visitor chooses (tg_weather_hub_pane()). The top uses the forecast modal hero's own
   day/night classes (.tg-wxf__hero--day / --night, style.css), so the colours always match the modal. ── */
.tg-wxh-intro { margin: 0 0 1.25rem; color: var(--on-surface-variant); }
.tg-wxpanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0 0 2rem; transition: opacity 0.15s ease; }
.tg-wxpanes--busy { opacity: 0.55; pointer-events: none; }
.tg-wxpanes__note { margin: -1.25rem 0 2rem; font-size: 0.82rem; color: var(--on-surface-variant); }
.tg-wxpanes__note[hidden] { display: none; }

/* Each panel = three rows (conditions / metrics / actions) on a shared subgrid, so the metric rows and buttons line up
   across all three panels whatever the name or condition length. */
.tg-wxpane {
    display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; min-width: 0; background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.09); border-radius: 1rem; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.tg-wxpane:not(:has(.tg-wxpane__metrics)) .tg-wxpane__now { grid-row: span 2; }   /* no data yet: no metrics row */
.tg-wxpane__now { display: flex; flex-direction: column; padding: 1rem 1.25rem 1.15rem; border-bottom: 1px solid rgba(0, 0, 0, 0.07); }
.tg-wxpane__head { display: flex; align-items: center; gap: 0.75rem; min-height: 2.6rem; }
.tg-wxpane__name { margin: 0; font-family: var(--font-headline); font-size: 1.2rem; font-weight: 800; line-height: 1.2; }
.tg-wxpane--pick .tg-wxpane__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tg-wxpane__pick { flex: 1 1 auto; min-width: 0; }

/* The destination menu IS the panel title once the script adds it: a native <select>, restyled. */
.tg-wxpane__select {
    -webkit-appearance: none; appearance: none; display: block; width: calc(100% + 0.7rem); min-height: 2.6rem; margin: 0 0 0 -0.7rem;   /* text lines up with "Bangkok" */
    padding: 0.3rem 2.2rem 0.3rem 0.7rem; font-family: var(--font-headline); font-size: 1.2rem; font-weight: 800; line-height: 1.2;
    color: #203b4c; text-overflow: ellipsis; cursor: pointer; border: 1px solid rgba(32, 59, 76, 0.22); border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23203b4c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.tg-wxpane__select:hover { border-color: rgba(32, 59, 76, 0.45); }
.tg-wxpane__select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tg-wxpane__select option { color: #1a1a1a; background: #fff; font-family: inherit; font-size: 1rem; font-weight: 500; }
.tg-wxf__hero--night .tg-wxpane__select {
    color: #fff; border-color: rgba(255, 255, 255, 0.28); background-color: rgba(255, 255, 255, 0.08);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.tg-wxf__hero--night .tg-wxpane__select:hover { border-color: rgba(255, 255, 255, 0.55); }
.tg-wxf__hero--night .tg-wxpane__select:focus-visible { outline-color: #fff; }

.tg-wxpane__main { display: flex; align-items: center; gap: 1rem; margin-top: 0.6rem; }
.tg-wxpane__icon { flex: 0 0 auto; width: 88px; height: 88px; }
.tg-wxpane__main > div { min-width: 0; }
.tg-wxpane .tg-wxpane__temp { font-size: 2.75rem; line-height: 1; }
.tg-wxpane .tg-wxpane__cond { margin: 0.3rem 0 0.15rem; font-size: 1.05rem; line-height: 1.25; }
.tg-wxpane .tg-wxf__hero-sub { margin-top: 0.1rem; font-size: 0.9rem; line-height: 1.35; }
.tg-wxpane .tg-wxf__note { margin: 0.6rem 0 0; }
.tg-wxpane__none { margin: 0.75rem 0 0; }

.tg-wxpane__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; margin: 0; padding: 0.85rem 0.75rem; }
.tg-wxpane__metrics > div { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; min-width: 0; padding: 0 0.35rem; text-align: center; }
.tg-wxpane__metrics > div + div { border-left: 1px solid rgba(0, 0, 0, 0.07); }
.tg-wxpane__metrics dt { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-surface-variant); }
.tg-wxpane__metrics dd { margin: 0; font-weight: 700; font-size: 0.95rem; }

/* Primary: the forecast modal. Secondary: the place's page, a quiet link under it. */
.tg-wxpane__actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.45rem; padding: 0 1.25rem 1rem; align-self: end; }
.tg-wxpane__open { width: 100%; min-height: 2.75rem; padding: 0.6rem 1rem; font-size: 0.92rem; box-shadow: none; }
.tg-wxpane__open:focus-visible,
.tg-wxpane__link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tg-wxpane__link { align-self: center; padding: 0.2rem 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.tg-wxpane__link::after { content: " \2192"; }
.tg-wxpane__link:hover { text-decoration: underline; }

/* ── Compare: a feature panel under the three destination panels (same pale-sky tones as the modal's day hero) ── */
.tg-wxh-compare {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.75rem; margin: 0;
    padding: 1.4rem 1.75rem; background: linear-gradient(135deg, #e6f3fb 0%, #f8fcff 100%); border: 1px solid rgba(32, 59, 76, 0.12);
    border-radius: 1rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}
.tg-wxh-compare__art { display: flex; align-items: center; }
.tg-wxh-compare__art img { width: 72px; height: 72px; }
.tg-wxh-compare__art img + img { margin-left: -22px; }
.tg-wxh-compare__body .loc-index-province-heading { margin: 0 0 0.6rem; }
.tg-wxh-compare__body p { margin: 0; color: #476479; }
.tg-wxh-compare__cta { white-space: nowrap; min-height: 2.75rem; }
.tg-wxh-compare__cta:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tg-wxh-compare + .tg-wxh-panel { margin-top: 2.5rem; }

/* Tablet (incl. the 769-900px portrait gap; hub panels only, not the comparison cards): one panel per row, laid out sideways so it stays short and uses the width. */
@media (max-width: 1024px) {
    .tg-wxpanes { grid-template-columns: 1fr; }
    .tg-wxpanes .tg-wxpane { grid-row: auto; grid-template-rows: auto auto; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
    .tg-wxpanes .tg-wxpane__now { grid-row: span 2; border-bottom: 0; border-right: 1px solid rgba(0, 0, 0, 0.07); }
    .tg-wxpanes .tg-wxpane__metrics { align-self: center; padding-top: 1rem; }
    .tg-wxpanes .tg-wxpane__actions { padding-top: 0.25rem; }
}
@media (max-width: 640px) {
    .tg-wxpanes .tg-wxpane { grid-template-columns: 1fr; grid-template-rows: none; }
    .tg-wxpanes .tg-wxpane__now,
    .tg-wxpanes .tg-wxpane:not(:has(.tg-wxpane__metrics)) .tg-wxpane__now { grid-row: auto; border-right: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.07); }
    .tg-wxpane__now { padding: 0.9rem 1rem 1rem; }
    .tg-wxpane__icon { width: 76px; height: 76px; }
    .tg-wxpane .tg-wxpane__temp { font-size: 2.4rem; }
    .tg-wxpane__select { min-height: 2.75rem; font-size: 1.1rem; }
    .tg-wxpane__actions { padding: 0 1rem 1rem; }
    .tg-wxh-compare { grid-template-columns: 1fr; padding: 1.25rem; }
    .tg-wxh-compare__art img { width: 56px; height: 56px; }
    .tg-wxh-compare__art img + img { margin-left: -16px; }
    .tg-wxh-compare__cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .tg-wxpanes, .tg-wxpane__select, .tg-wxh-card__open { transition: none; }
}

/* ── Comparison (/weather/compare/: weather.php + tg_weather_hub_compare(); behaviour in static/js/weather-compare.js).
   One dashboard card: picker bar, then the hub's own panels (day/night hero look) and day cards with bars. ── */
.tg-wxc-picker { position: relative; margin: 0 0 1.75rem; }
.tg-wxc-picker__bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.6rem; padding: 0.7rem 0.9rem; background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.09); border-radius: 1rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}
.tg-wxc-picker__label { margin-right: 0.15rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secondary); }
.tg-wxc-picker__count { margin-left: auto; font-size: 0.82rem; font-weight: 600; color: var(--on-surface-variant); font-variant-numeric: tabular-nums; }
.tg-wxc-picker__status { margin: 0.5rem 0.25rem 0; font-size: 0.85rem; color: var(--on-surface-variant); }
.tg-wxc-picker__status:empty { display: none; }
.tg-wxc-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.tg-wxc-chips:empty { display: none; }
.tg-wxc-chip {
    display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.5rem; padding: 0.2rem 0.3rem 0.2rem 0.9rem; border-radius: 9999px;
    background: var(--primary-container); color: var(--on-primary-fixed-variant); font-weight: 700; font-size: 0.92rem;
}
.tg-wxc-chip__x {
    display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%;
    color: inherit; background: rgba(255, 255, 255, 0.6); cursor: pointer; text-decoration: none;
}
.tg-wxc-chip__x:hover { background: #fff; }
.tg-wxc-chip__x:focus-visible,
.tg-wxc-addbtn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tg-wxc-addbtn {
    display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.5rem; padding: 0.3rem 1rem; border-radius: 9999px; cursor: pointer;
    font: inherit; font-size: 0.92rem; font-weight: 700; color: var(--primary); background: #fff; border: 2px dashed rgba(0, 109, 119, 0.45);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.tg-wxc-addbtn:hover,
.tg-wxc-addbtn[aria-expanded="true"] { background: rgba(0, 109, 119, 0.06); border-color: var(--primary); }
.tg-wxc-addbtn[hidden],
.tg-wxc-add[hidden] { display: none; }
.tg-wxc-add { display: inline-flex; gap: 0.5rem; align-items: center; }   /* no-JS fallback */
.tg-wxc-add select { min-height: 2.5rem; padding: 0.3rem 0.6rem; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 0.6rem; background: #fff; font: inherit; }

/* Search popover (a combobox + listbox) */
.tg-wxc-pop {
    position: absolute; z-index: 40; top: calc(100% + 0.4rem); left: 0; width: min(26rem, 100%); padding: 0.6rem; background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 1rem; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}
.tg-wxc-pop[hidden] { display: none; }
.tg-wxc-pop__q {
    width: 100%; min-height: 2.75rem; padding: 0.5rem 0.85rem; font: inherit; font-size: 1rem; border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 0.7rem; background: var(--surface-container-low);
}
.tg-wxc-pop__q:focus { outline: 2px solid var(--primary); outline-offset: 0; background: #fff; }
.tg-wxc-pop__list { max-height: 18rem; margin: 0.5rem 0 0; padding: 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.tg-wxc-pop__list li {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 2.6rem; padding: 0.45rem 0.75rem;
    border-radius: 0.6rem; cursor: pointer;
}
.tg-wxc-pop__list li:hover,
.tg-wxc-pop__list li.is-active { background: var(--primary-container); color: var(--on-primary-fixed-variant); }
.tg-wxc-pop__list li[aria-disabled="true"] { cursor: default; color: var(--outline); background: none; }
.tg-wxc-pop__name { font-weight: 700; }
.tg-wxc-pop__area { font-size: 0.78rem; color: var(--on-surface-variant); text-align: right; }
.tg-wxc-pop__tag { padding: 0.1rem 0.55rem; border-radius: 9999px; font-size: 0.72rem; font-weight: 700; background: var(--surface-container-high); color: var(--on-surface-variant); }
.tg-wxc-pop__none { margin: 0.6rem 0.4rem 0.2rem; font-size: 0.88rem; color: var(--on-surface-variant); }

/* Results: dimmed with a thin running bar while a new selection loads (the previous one stays readable underneath) */
.tg-wxc { position: relative; transition: opacity 0.15s ease; }
.tg-wxc--busy { opacity: 0.55; pointer-events: none; }
.tg-wxc--busy::before {
    content: ""; position: absolute; z-index: 2; top: -0.85rem; left: 0; width: 30%; height: 3px; border-radius: 9999px; background: var(--primary);
    animation: tg-wxc-run 1s ease-in-out infinite alternate;
}
@keyframes tg-wxc-run { to { left: 70%; } }
.tg-wxc__sec + .tg-wxc__sec { margin-top: 2.25rem; }
.tg-wxc__note { padding: 0.75rem 1rem; border-radius: 0.75rem; background: var(--surface-container); color: var(--on-surface-variant); font-size: 0.92rem; }
.tg-wxc__fine { margin: 0.85rem 0 0; font-size: 0.82rem; color: var(--on-surface-variant); }

/* Right now: one column per destination (the hub panel, its three rows on a shared subgrid so everything lines up);
   when the columns would be narrower than a readable panel, the row scrolls sideways instead. */
.tg-wxc-now {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(12.5rem, 1fr); grid-template-rows: repeat(3, auto); gap: 1rem;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 0.15rem 0.15rem 0.6rem; scrollbar-width: thin;
}
.tg-wxc-now > * { scroll-snap-align: start; }
.tg-wxc-now .tg-wxpane { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); container: wxc-pane / inline-size; }
.tg-wxc-now .tg-wxpane__icon { width: 76px; height: 76px; }
.tg-wxc-now .tg-wxpane .tg-wxpane__temp { font-size: 2.4rem; }
.tg-wxc-now .tg-wxpane__metrics { padding: 0.75rem 0.4rem; }
.tg-wxc-now .tg-wxpane__metrics dd { font-size: 0.88rem; }
.tg-wxc-now .tg-wxpane__actions { align-self: start; padding-top: 0.15rem; }   /* buttons line up even when a page link wraps */
/* Narrow panels (4-5 destinations): icon beside the temperature, the rest full width under it; smaller metrics and button. */
@container wxc-pane (max-width: 16rem) {
    .tg-wxpane__now { padding: 0.85rem 0.9rem 0.95rem; }
    .tg-wxpane__main { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 0.6rem; }
    .tg-wxpane__main > div { display: contents; }
    .tg-wxpane__main > div > * { grid-column: 1 / -1; }
    .tg-wxpane__main > div > .tg-wxpane__temp { grid-column: 2; }
    .tg-wxpane__main .tg-wxpane__icon { width: 56px; height: 56px; }
    .tg-wxpane .tg-wxpane__temp { font-size: 2.1rem; }
    .tg-wxpane .tg-wxpane__cond { margin-top: 0.4rem; font-size: 0.98rem; }
    .tg-wxpane .tg-wxf__hero-sub { font-size: 0.82rem; }
    .tg-wxpane__metrics { padding: 0.7rem 0.2rem; }
    .tg-wxpane__metrics > div { padding: 0 0.2rem; }
    .tg-wxpane__metrics dt { font-size: 0.62rem; letter-spacing: 0.03em; }
    .tg-wxpane__metrics dd { font-size: 0.8rem; }
    .tg-wxpane__actions { padding: 0 0.8rem 0.9rem; }
    .tg-wxpane__open { min-height: 2.6rem; padding: 0.5rem 0.6rem; font-size: 0.8rem; }
    .tg-wxpane__link { font-size: 0.8rem; text-align: center; }
}
.tg-wxc-addcard {
    grid-row: span 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; padding: 1.5rem;
    text-align: center; color: var(--on-surface-variant); border: 2px dashed rgba(0, 109, 119, 0.35); border-radius: 1rem;
}
.tg-wxc-addcard p { margin: 0; max-width: 18rem; }

/* At a glance: neutral sentences on the modal hero's pale-sky panel */
.tg-wxc-glance {
    display: grid; gap: 0.55rem; margin: 0 0 1.25rem; padding: 0.9rem 1.1rem; list-style: none; color: #203b4c;
    background: linear-gradient(135deg, #e6f3fb 0%, #f8fcff 100%); border: 1px solid rgba(32, 59, 76, 0.12); border-radius: 1rem;
}
.tg-wxc-glance li { display: flex; align-items: center; gap: 0.7rem; font-size: 0.95rem; line-height: 1.4; }
.tg-wxc-glance__icon { flex: 0 0 auto; width: 28px; height: 28px; }

/* Metric switch: a segmented control (radios, so it works without JS); one row that scrolls on phones */
.tg-wxc__metrics {
    display: inline-flex; flex-wrap: wrap; gap: 0.25rem; max-width: 100%; margin: 0 0 0.9rem; padding: 0.3rem; border: 0;
    background: var(--surface-container); border-radius: 1rem;
}
.tg-wxc__metrics label {
    display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.6rem; padding: 0.35rem 0.9rem; border-radius: 0.75rem; cursor: pointer;
    font-size: 0.9rem; font-weight: 700; color: var(--on-surface-variant); white-space: nowrap; transition: background-color 0.15s ease;
}
.tg-wxc__metrics label:hover { background: rgba(255, 255, 255, 0.7); }
.tg-wxc__metrics input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.tg-wxc__metrics-icon { width: 22px; height: 22px; }
.tg-wxc__metrics label:has(input:checked) { background: #fff; color: var(--on-surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.tg-wxc__metrics label:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 1px; }

/* One panel per metric; the chosen radio shows its panel (CSS only). Without :has every panel shows. */
.tg-wxc-panel { display: none; }
.tg-wxc:has(#wxc-m-temp:checked) .tg-wxc-panel--temp,
.tg-wxc:has(#wxc-m-pop:checked) .tg-wxc-panel--pop,
.tg-wxc:has(#wxc-m-mm:checked) .tg-wxc-panel--mm,
.tg-wxc:has(#wxc-m-wind:checked) .tg-wxc-panel--wind,
.tg-wxc:has(#wxc-m-humidity:checked) .tg-wxc-panel--humidity,
.tg-wxc:has(#wxc-m-uv:checked) .tg-wxc-panel--uv { display: block; }
@supports not selector(:has(*)) {
    .tg-wxc-panel { display: block; margin-bottom: 1.5rem; }
    .tg-wxc__metrics { display: none; }
}
.tg-wxc-panel__cap { margin: 0 0 0.75rem; font-size: 0.85rem; color: var(--on-surface-variant); }

/* Day cards: one per date, one row per destination (same order as the chips) */
/* Columns from the day count (tg_weather_hub_compare(): 4 days = 2x2, 7 = 4+3, ...) so no lone card; narrower screens auto-fit. */
.tg-wxc-days { display: grid; grid-template-columns: repeat(var(--wxc-cols, 3), minmax(0, 1fr)); gap: 0.9rem; }
.tg-wxc-day { min-width: 0; padding: 0.8rem 1rem 0.45rem; background: #fff; border: 1px solid rgba(0, 0, 0, 0.09); border-radius: 1rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); }
.tg-wxc-day__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.2rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(0, 0, 0, 0.07); }
.tg-wxc-day__head strong { font-family: var(--font-headline); font-size: 1.05rem; font-weight: 800; color: var(--on-surface); }
.tg-wxc-day__head span { font-size: 0.82rem; color: var(--on-surface-variant); }
.tg-wxc-rows { margin: 0; padding: 0; list-style: none; }
.tg-wxc-row { display: grid; grid-template-columns: 32px minmax(0, 1.25fr) minmax(2.5rem, 1fr) auto; align-items: center; gap: 0.6rem; padding: 0.5rem 0; }
.tg-wxc-row + .tg-wxc-row { border-top: 1px solid rgba(0, 0, 0, 0.05); }
.tg-wxc-row__icon { width: 32px; height: 32px; }
.tg-wxc-row__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tg-wxc-row__cond { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-wxc-row__name { overflow-wrap: anywhere; font-weight: 700; font-size: 0.92rem; color: var(--on-surface); }
.tg-wxc-row__cond { font-size: 0.75rem; color: var(--on-surface-variant); }
.tg-wxc-row__track { position: relative; height: 0.5rem; border-radius: 9999px; background: var(--surface-container-high); }
.tg-wxc-row__bar { position: absolute; top: 0; bottom: 0; left: var(--a); width: var(--w); min-width: 0.5rem; border-radius: 9999px; background: var(--primary); }
.tg-wxc-panel--temp .tg-wxc-row__bar { background: var(--tertiary); }
.tg-wxc-row__val { min-width: 4rem; text-align: right; font-weight: 800; font-size: 0.98rem; color: var(--on-surface); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tg-wxc-row__val small { margin-left: 0.3rem; font-size: 0.9em; font-weight: 500; color: var(--on-surface-variant); }
.tg-wxc-panel--uv .tg-wxc-row__val small { display: block; margin: 0; font-size: 0.72rem; font-weight: 600; }
.tg-wxc-row__val--none { color: var(--outline); }

/* Nothing chosen yet / load failure */
.tg-wxc-empty {
    display: flex; flex-direction: column; align-items: center; gap: 0.65rem; padding: 2.25rem 1.5rem; text-align: center; color: #476479;
    background: linear-gradient(135deg, #e6f3fb 0%, #f8fcff 100%); border: 1px solid rgba(32, 59, 76, 0.12); border-radius: 1rem;
}
.tg-wxc-empty p { margin: 0; }
.tg-wxc-empty .btn { margin-top: 0.4rem; }
.tg-wxc-empty__art { display: flex; }
.tg-wxc-empty__art img { width: 64px; height: 64px; }
.tg-wxc-empty__art img + img { margin-left: -18px; }
.tg-wxc-empty__title { font-family: var(--font-headline); font-size: 1.2rem; font-weight: 800; color: #203b4c; }

@media (max-width: 1024px) {
    .tg-wxc-days { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
    .tg-wxc__metrics { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}
@media (max-width: 640px) {
    .tg-wxc-picker__bar { padding: 0.65rem; }
    .tg-wxc-pop { width: 100%; }
    .tg-wxc-now { grid-auto-columns: minmax(82%, 1fr); gap: 0.75rem; }
    .tg-wxc__metrics label { padding: 0.35rem 0.75rem; }
    .tg-wxc-day { padding: 0.7rem 0.8rem 0.35rem; }
    .tg-wxc-row { gap: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .tg-wxc, .tg-wxc-addbtn, .tg-wxc__metrics label { transition: none; }
    .tg-wxc--busy::before { animation: none; left: 0; width: 100%; opacity: 0.5; }
}