/* Weather Widget — Client base styles. */
.tmb-weather { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 14px; color: inherit; line-height: 1.2; }
.tmb-weather__icon { width: 36px; height: 36px; vertical-align: middle; }
.tmb-weather__ficon { width: 32px; height: 32px; }
.tmb-weather__temp { font-weight: 700; font-size: 1.2em; }
.tmb-weather__loc { color: #555; }
.tmb-weather__desc { text-transform: capitalize; }
.tmb-weather__error { color: #b32d2e; font-size: 0.9em; }

.tmb-weather--full { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-radius: 8px; background: #f6f8fa; max-width: 480px; }
.tmb-weather--full .tmb-weather__head h3 { margin: 0; font-size: 14px; color: #555; }
.tmb-weather--full .tmb-weather__current { display: flex; gap: 16px; align-items: center; }
.tmb-weather--full .tmb-weather__icon { width: 64px; height: 64px; }
.tmb-weather--full .tmb-weather__temp { font-size: 28px; }
.tmb-weather--full .tmb-weather__meta { display: grid; grid-template-columns: auto auto; gap: 2px 12px; margin: 4px 0 0; font-size: 12px; color: #555; }
.tmb-weather--full .tmb-weather__meta dt { font-weight: 600; }
.tmb-weather--full .tmb-weather__meta dd { margin: 0; }
.tmb-weather--full .tmb-weather__forecast { display: flex; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
.tmb-weather--full .tmb-weather__forecast li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 8px; background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 12px; }

/* ── New SVG icon sizing (Family A/B/D condition icons + per-template variants).
   Authoritative width/height attributes are emitted server-side by
   TMB_Client_Weather_Icon_Map::img() — the rules below just lock the
   default behavior (single-line baseline, no fluid scaling) and add
   the format-specific overrides the renderer emits. */
.tmb-weather__icon-svg { width: 1.4em; height: 1.4em; vertical-align: -0.25em; flex-shrink: 0; }

/* Family A — card lead-in (`format="card"`). Two-column layout: the
   condition icon owns a 35%-wide left column and stretches across every
   row of text on the right (temp, feels-like, condition, humidity,
   wind, UV). The renderer emits the icon as the first child followed by
   plain text rows in document order, so we use `grid-row: 1 / -1` on
   the icon cell to span however many rows the right column produces.
   The right-column rows are placed into column 2 with the universal
   `:not(.tmb-weather__card-icon)` selector so no PHP-side wrapper is
   needed. */
.tmb-weather--format-card .tmb-weather__card {
    display: grid;
    grid-template-columns: 35% 1fr;
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #f6f8fa;
}
.tmb-weather--format-card .tmb-weather__card-icon {
    grid-column: 1;
    grid-row: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
    aspect-ratio: 1 / 1;
}
/* The renderer wraps the icon img inside `<span class="tmb-weather__icon">`,
   which is inline by default and won't expand to fill the grid cell. Force
   the span to behave like a flex box so the inner img can size against it. */
.tmb-weather--format-card .tmb-weather__card-icon .tmb-weather__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.tmb-weather--format-card .tmb-weather__card-icon .tmb-weather__icon-svg,
.tmb-weather--format-card .tmb-weather__card-icon img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
}
.tmb-weather--format-card .tmb-weather__card > :not(.tmb-weather__card-icon) {
    grid-column: 2;
}

/* Fallback for any non-format-card consumer that may still render the
   stacked `.tmb-weather__card` markup (legacy or transitional). */
.tmb-weather__card { display: inline-flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 8px; background: #f6f8fa; }
.tmb-weather__card-icon { display: flex; justify-content: center; margin-bottom: 4px; }
.tmb-weather__card-icon .tmb-weather__icon-svg { width: 56px; height: 56px; }

/* Family A — temp+icon (`format="temp-icon"`). Inline-flex row that
   sizes the icon relative to whatever font-size the host slot sets on
   the wrapper, so a tile that styles `.tmb-weather__temp` at 48px gets
   a matched ~48px icon without needing separate overrides. */
.tmb-weather__temp-icon { display: inline-flex; align-items: center; gap: .35em; line-height: 1; }
.tmb-weather__temp-icon .tmb-weather__icon-svg,
.tmb-weather__temp-icon img { width: 1em; height: 1em; }
.tmb-weather__temp-icon .tmb-weather__temp { font-weight: 700; }

/* Family A — mini (`format="mini"` and `zip-status`). */
.tmb-weather__mini { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #f1f5f9; font-size: 13px; }
.tmb-weather__mini .tmb-weather__icon-svg { width: 24px; height: 24px; }
.tmb-weather__mini-temp { font-weight: 700; }

/* Family B — strip (`format="forecast-strip"`). */
.tmb-weather__strip { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.tmb-weather__strip-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px; background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 12px; min-width: 64px; }
.tmb-weather__strip-icon-svg { width: 36px; height: 36px; }
.tmb-weather__strip-date { color: #555; }

/* Family B — table (`format="forecast"`). */
.tmb-weather__forecast { width: 100%; border-collapse: collapse; font-size: 13px; }
.tmb-weather__forecast th, .tmb-weather__forecast td { padding: 6px 8px; border-bottom: 1px solid #e9e9eb; text-align: left; vertical-align: middle; }
.tmb-weather__forecast th { font-weight: 600; color: #555; }
.tmb-weather__forecast-icon-cell { width: 36px; }
.tmb-weather__forecast-icon { width: 32px; height: 32px; }

/* Family B — single-day (`format="forecast-today"` / `forecast-tomorrow`). */
.tmb-weather__forecast-day { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; background: #f6f8fa; }
.tmb-weather__forecast-day-icon { width: 40px; height: 40px; }

/* Family B — hourly (`format="forecast-hourly"`). */
.tmb-weather__forecast-hourly { display: flex; gap: 6px; flex-wrap: wrap; }
.tmb-weather__hour { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 56px; padding: 6px 4px; background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 12px; }
.tmb-weather__hour-icon { width: 28px; height: 28px; }
.tmb-weather__hour-temp { font-weight: 600; }
.tmb-weather__hour-precip { color: #2563eb; font-size: 11px; }
/* NOW row — emitted as the first child when the shortcode is rendered
   with `show_now="1"`. Slightly tinted background + bolder time label
   so it reads as the anchor of the list, not just another hour. */
.tmb-weather__hour--now { background: #eff6ff; border-color: #93c5fd; }
.tmb-weather__hour--now .tmb-weather__hour-time { font-weight: 800; letter-spacing: .04em; color: #1e3a8a; }

/* Family B — rich single-day (`format="forecast-today"` /
   `format="forecast-tomorrow"`). Two-part layout: an optional hero
   band with the current icon + temp (Today only) above a 4-cell
   stat grid (High / Low / Condition / Precip). The previous
   comma-separated text emit read as a run-on sentence; the rich
   layout lets visitors scan top-down in under a second. */
.tmb-weather__forecast-day--rich {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.tmb-weather__forecast-day__hero {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 8px;
}
.tmb-weather__forecast-day__hero-icon {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.tmb-weather__forecast-day__hero-icon-svg,
.tmb-weather__forecast-day__hero-icon img {
    width: 100%; height: 100%; object-fit: contain;
}
.tmb-weather__forecast-day__hero-body { display: flex; flex-direction: column; gap: 0; line-height: 1.1; }
.tmb-weather__forecast-day__hero-temp { font-size: 32px; font-weight: 800; color: #1a2954; letter-spacing: -.02em; }
.tmb-weather__forecast-day__hero-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6b7280; }
.tmb-weather__forecast-day__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}
.tmb-weather__forecast-day__stat {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 8px 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    text-align: center;
    min-height: 56px;
}
.tmb-weather__forecast-day__stat-label {
    font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7280;
}
.tmb-weather__forecast-day__stat-value {
    font-size: 15px; font-weight: 700; color: #1a2954; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}

/* Family D — heat-week-outlook (`format="heat-week-outlook"`). Amber-toned
   hero (peak high + weekday) over a 2-cell stat grid (breach count +
   threshold) over a one-line operational action. Forward-looking
   complement to the binary `heat-advisory` emit. */
.tmb-weather__heat-week-outlook {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.tmb-weather__heat-week-outlook__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 12px;
    background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 8px;
}
.tmb-weather__heat-week-outlook__hero-label {
    font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #92400e;
}
.tmb-weather__heat-week-outlook__hero-temp {
    font-size: 42px; font-weight: 800; color: #92400e; letter-spacing: -.02em; line-height: 1;
}
.tmb-weather__heat-week-outlook__hero-day {
    font-size: 13px; font-weight: 700; color: #b45309; text-transform: uppercase; letter-spacing: .04em; margin-top: 4px;
}
.tmb-weather__heat-week-outlook__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.tmb-weather__heat-week-outlook__stat {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 10px 6px;
    background: #fff;
    border: 1px solid #fde68a;
    border-radius: 6px;
    text-align: center;
}
.tmb-weather__heat-week-outlook__stat-label {
    font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #92400e;
}
.tmb-weather__heat-week-outlook__stat-value {
    font-size: 22px; font-weight: 800; color: #1a2954; margin-top: 2px;
}
.tmb-weather__heat-week-outlook__action {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    color: #6b7280;
    padding: 6px 8px;
    line-height: 1.35;
}

/* Family D — shared week-outlook (`format="rain-week-outlook"`,
   `cold-week-outlook`, `severe-week-outlook`, `forecast-week-outlook`).
   Same hero + 2-cell stat grid + action line shape as the heat outlook,
   themed per category via `--rain` / `--cold` / `--severe` / `--forecast`
   modifiers on the outer wrapper. */
.tmb-weather__week-outlook {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.tmb-weather__week-outlook__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 12px;
    border-radius: 8px;
}
.tmb-weather__week-outlook__hero-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.tmb-weather__week-outlook__hero-value {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
    margin-top: 2px;
}
.tmb-weather__week-outlook__hero-day {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 4px;
}
.tmb-weather__week-outlook__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.tmb-weather__week-outlook__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    background: #fff;
    border-radius: 6px;
    text-align: center;
}
.tmb-weather__week-outlook__stat-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.tmb-weather__week-outlook__stat-value {
    font-size: 22px;
    font-weight: 800;
    color: #1a2954;
    margin-top: 2px;
}
.tmb-weather__week-outlook__action {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    color: #6b7280;
    padding: 6px 8px;
    line-height: 1.35;
}

/* Theme — rain (sky blue) */
.tmb-weather__week-outlook--rain .tmb-weather__week-outlook__hero {
    background: linear-gradient(180deg, #DBEAFE 0%, #BFDBFE 100%);
}
.tmb-weather__week-outlook--rain .tmb-weather__week-outlook__hero-label,
.tmb-weather__week-outlook--rain .tmb-weather__week-outlook__hero-value { color: #1E3A8A; }
.tmb-weather__week-outlook--rain .tmb-weather__week-outlook__hero-day { color: #1D4ED8; }
.tmb-weather__week-outlook--rain .tmb-weather__week-outlook__stat { border: 1px solid #BFDBFE; }
.tmb-weather__week-outlook--rain .tmb-weather__week-outlook__stat-label { color: #1E3A8A; }

/* Theme — cold (ice blue) */
.tmb-weather__week-outlook--cold .tmb-weather__week-outlook__hero {
    background: linear-gradient(180deg, #E0F2FE 0%, #BAE6FD 100%);
}
.tmb-weather__week-outlook--cold .tmb-weather__week-outlook__hero-label,
.tmb-weather__week-outlook--cold .tmb-weather__week-outlook__hero-value { color: #075985; }
.tmb-weather__week-outlook--cold .tmb-weather__week-outlook__hero-day { color: #0284C7; }
.tmb-weather__week-outlook--cold .tmb-weather__week-outlook__stat { border: 1px solid #BAE6FD; }
.tmb-weather__week-outlook--cold .tmb-weather__week-outlook__stat-label { color: #075985; }

/* Theme — severe (red) */
.tmb-weather__week-outlook--severe .tmb-weather__week-outlook__hero {
    background: linear-gradient(180deg, #FEE2E2 0%, #FECACA 100%);
}
.tmb-weather__week-outlook--severe .tmb-weather__week-outlook__hero-label,
.tmb-weather__week-outlook--severe .tmb-weather__week-outlook__hero-value { color: #7F1D1D; }
.tmb-weather__week-outlook--severe .tmb-weather__week-outlook__hero-value { font-size: 28px; }
.tmb-weather__week-outlook--severe .tmb-weather__week-outlook__hero-day { color: #991B1B; }
.tmb-weather__week-outlook--severe .tmb-weather__week-outlook__stat { border: 1px solid #FECACA; }
.tmb-weather__week-outlook--severe .tmb-weather__week-outlook__stat-label { color: #7F1D1D; }

/* Theme — forecast (teal) */
.tmb-weather__week-outlook--forecast .tmb-weather__week-outlook__hero {
    background: linear-gradient(180deg, #CCFBF1 0%, #99F6E4 100%);
}
.tmb-weather__week-outlook--forecast .tmb-weather__week-outlook__hero-label,
.tmb-weather__week-outlook--forecast .tmb-weather__week-outlook__hero-value { color: #134E4A; }
.tmb-weather__week-outlook--forecast .tmb-weather__week-outlook__hero-value { font-size: 28px; }
.tmb-weather__week-outlook--forecast .tmb-weather__week-outlook__hero-day { color: #0F766E; }
.tmb-weather__week-outlook--forecast .tmb-weather__week-outlook__stat { border: 1px solid #99F6E4; }
.tmb-weather__week-outlook--forecast .tmb-weather__week-outlook__stat-label { color: #134E4A; }

/* Theme — service (amber, matches the briefing-page service-planning
   section header bar). Used by best-day / weekend / UV / wind outlook. */
.tmb-weather__week-outlook--service .tmb-weather__week-outlook__hero {
    background: linear-gradient(180deg, #FFEDD5 0%, #FED7AA 100%);
}
.tmb-weather__week-outlook--service .tmb-weather__week-outlook__hero-label,
.tmb-weather__week-outlook--service .tmb-weather__week-outlook__hero-value { color: #9A3412; }
.tmb-weather__week-outlook--service .tmb-weather__week-outlook__hero-value { font-size: 28px; }
.tmb-weather__week-outlook--service .tmb-weather__week-outlook__hero-day { color: #C2410C; }
.tmb-weather__week-outlook--service .tmb-weather__week-outlook__stat { border: 1px solid #FED7AA; }
.tmb-weather__week-outlook--service .tmb-weather__week-outlook__stat-label { color: #9A3412; }

/* Theme — service-warn (amber+red blend, used by Day-to-Avoid). */
.tmb-weather__week-outlook--service-warn .tmb-weather__week-outlook__hero {
    background: linear-gradient(180deg, #FEE2E2 0%, #FECACA 100%);
}
.tmb-weather__week-outlook--service-warn .tmb-weather__week-outlook__hero-label,
.tmb-weather__week-outlook--service-warn .tmb-weather__week-outlook__hero-value { color: #7F1D1D; }
.tmb-weather__week-outlook--service-warn .tmb-weather__week-outlook__hero-value { font-size: 28px; }
.tmb-weather__week-outlook--service-warn .tmb-weather__week-outlook__hero-day { color: #991B1B; }
.tmb-weather__week-outlook--service-warn .tmb-weather__week-outlook__stat { border: 1px solid #FECACA; }
.tmb-weather__week-outlook--service-warn .tmb-weather__week-outlook__stat-label { color: #7F1D1D; }

/* History-section theme — teal palette for yesterday's recap, rainfall
   totals, vs-normal, and temperature-trend cards. */
.tmb-weather__week-outlook--history .tmb-weather__week-outlook__hero {
	background: linear-gradient(135deg, #F0FDFA 0%, #CCFBF1 100%);
}
.tmb-weather__week-outlook--history .tmb-weather__week-outlook__hero-label,
.tmb-weather__week-outlook--history .tmb-weather__week-outlook__hero-value { color: #134E4A; }
.tmb-weather__week-outlook--history .tmb-weather__week-outlook__hero-value { font-size: 28px; }
.tmb-weather__week-outlook--history .tmb-weather__week-outlook__hero-day { color: #0F766E; }
.tmb-weather__week-outlook--history .tmb-weather__week-outlook__stat { border: 1px solid #99F6E4; }
.tmb-weather__week-outlook--history .tmb-weather__week-outlook__stat-label { color: #134E4A; }

/* Health-section theme — green palette for lawn-health / pest-pressure /
   disease-risk / soil-window cards. */
.tmb-weather__week-outlook--health .tmb-weather__week-outlook__hero {
	background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
}
.tmb-weather__week-outlook--health .tmb-weather__week-outlook__hero-label,
.tmb-weather__week-outlook--health .tmb-weather__week-outlook__hero-value { color: #064E3B; }
.tmb-weather__week-outlook--health .tmb-weather__week-outlook__hero-value { font-size: 28px; }
.tmb-weather__week-outlook--health .tmb-weather__week-outlook__hero-day { color: #047857; }
.tmb-weather__week-outlook--health .tmb-weather__week-outlook__stat { border: 1px solid #A7F3D0; }
.tmb-weather__week-outlook--health .tmb-weather__week-outlook__stat-label { color: #064E3B; }

/* Inline layout (`layout="inline"`). Smaller icon, baseline-aligned. */
.tmb-weather__icon--inline { width: 20px; height: 20px; vertical-align: -0.3em; }

/* ── Family B — forecast-rain list with water-drop SVG bullets ──────
   Reset default <ul> bullets/padding and emit each day as a
   horizontal row with our own drop glyph + date + probability. */
.tmb-weather__rain { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tmb-weather__rain-item {
	display: flex; align-items: center; gap: 10px;
	padding: 8px 12px;
	background: #F0F7FF;
	border: 1px solid #BFDBFE;
	border-radius: 8px;
	font-size: 13px;
	color: #1A2954;
}
.tmb-weather__rain-drop {
	flex-shrink: 0;
	width: 18px; height: 18px;
	color: #2563EB;
	display: inline-block;
}
.tmb-weather__rain-date { flex: 1 1 auto; font-weight: 600; }
.tmb-weather__rain-prob { font-weight: 700; color: #2563EB; }

/* ── Family C — rainfall gauge (`history-rainfall-7d` / `-30d`) ─────
   A modern gauge-card with a water-drop icon, big rainfall value,
   visual fill bar, and a foot line showing % of the baseline target.  */
.tmb-weather__rain-gauge {
	display: flex; flex-direction: column; gap: 8px;
	padding: 14px 16px;
	background: linear-gradient(180deg, #F0F7FF 0%, #FFFFFF 100%);
	border: 1px solid #BFDBFE;
	border-radius: 12px;
	font-family: inherit;
}
.tmb-weather__rain-gauge-head { display: flex; align-items: center; gap: 8px; }
.tmb-weather__rain-gauge-head .tmb-weather__rain-drop { width: 20px; height: 20px; color: #2563EB; }
.tmb-weather__rain-gauge-label {
	font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: #4B5563;
}
.tmb-weather__rain-gauge-value {
	font-size: 32px; font-weight: 800; line-height: 1;
	color: #1A2954;
	display: flex; align-items: baseline; gap: 6px;
}
.tmb-weather__rain-gauge-unit { font-size: 14px; font-weight: 600; color: #6B7280; }
.tmb-weather__rain-gauge-bar {
	position: relative;
	height: 8px;
	background: #DBEAFE;
	border-radius: 999px;
	overflow: hidden;
}
.tmb-weather__rain-gauge-bar > span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #60A5FA 0%, #2563EB 100%);
	border-radius: 999px;
	transition: width .35s ease;
}
.tmb-weather__rain-gauge-foot { font-size: 12px; color: #4B5563; }
.tmb-weather__rain-gauge.tmb-weather--empty { color: #6B7280; font-style: italic; font-size: 13px; }

/* ── Family A — wind card (`format="wind"`) ───────────────────────
   Self-contained card with a directional arrow icon, speed, and the
   cardinal direction label. Replaces the prior `Wind: NW 8 mph` bare
   text that produced "Wind: Wind: …" double prints when authors
   added their own label above the shortcode.                       */
.tmb-weather__wind-card {
	display: inline-flex; align-items: center; gap: 12px;
	padding: 12px 16px;
	background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	color: #1A2954;
}
.tmb-weather__wind-icon {
	flex-shrink: 0;
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	background: #DBEAFE;
	color: #1A2954;
	border-radius: 999px;
}
.tmb-weather__wind-icon svg { width: 22px; height: 22px; }
.tmb-weather__wind-body { display: flex; flex-direction: column; line-height: 1.1; }
.tmb-weather__wind-speed {
	font-size: 22px; font-weight: 800;
	display: flex; align-items: baseline; gap: 4px;
}
.tmb-weather__wind-unit { font-size: 12px; font-weight: 600; color: #6B7280; }
.tmb-weather__wind-dir { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #4B5563; }
.tmb-weather__wind-card.tmb-weather--empty { color: #6B7280; font-style: italic; }

/* ── Family D — condition-message card (`format="condition-message"`) ──
   Replaces the previous bare-text rendering with a structured "verdict"
   card: tinted left rail, circular icon badge, bold keyword label, and
   the operator-authored message in body copy. The colour theme cascades
   from the family modifier class (`--sunny`, `--rainy`, …) so the icon,
   keyword, and rail all read as a single weather-appropriate accent. */
.tmb-weather__condition-message {
	--cm-accent: #1A2954;
	--cm-accent-soft: #DBEAFE;
	--cm-ink: #1F2937;
	display: flex; align-items: flex-start; gap: 14px;
	padding: 14px 16px 14px 18px;
	background: var(--cm-accent-soft);
	border-radius: 12px;
	border-left: 4px solid var(--cm-accent);
	font-family: inherit;
}
.tmb-weather__cm-icon {
	flex-shrink: 0;
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	background: #FFFFFF;
	color: var(--cm-accent);
	border-radius: 999px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
.tmb-weather__cm-icon svg { width: 24px; height: 24px; }
.tmb-weather__cm-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tmb-weather__cm-keyword {
	font-size: 11px; font-weight: 800; letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cm-accent);
}
.tmb-weather__cm-text {
	font-size: 14px; font-weight: 500; line-height: 1.4;
	color: var(--cm-ink);
}

/* Family colour themes — each sets the same two custom properties the
   base rules read, so re-skinning a family is a one-place change. */
.tmb-weather__cm--sunny  { --cm-accent: #B45309; --cm-accent-soft: #FEF3C7; }
.tmb-weather__cm--cloudy { --cm-accent: #475569; --cm-accent-soft: #F1F5F9; }
.tmb-weather__cm--rainy  { --cm-accent: #1D4ED8; --cm-accent-soft: #DBEAFE; }
.tmb-weather__cm--snowy  { --cm-accent: #0284C7; --cm-accent-soft: #E0F2FE; }
.tmb-weather__cm--cold   { --cm-accent: #0E7490; --cm-accent-soft: #CFFAFE; }
.tmb-weather__cm--stormy { --cm-accent: #7C2D12; --cm-accent-soft: #FEE2E2; }
.tmb-weather__cm--foggy  { --cm-accent: #475569; --cm-accent-soft: #E2E8F0; }
.tmb-weather__cm--windy  { --cm-accent: #047857; --cm-accent-soft: #D1FAE5; }
.tmb-weather__cm--neutral{ --cm-accent: #1A2954; --cm-accent-soft: #E0E7FF; }