/* ==========================================================================
   css/tiles.css — Simple-view tiles (js/tiles.js). Owner: tiles.
   REDESIGN-SPEC §4.3, §4.4, §4.6, §4.7, §4.8, §4.12.

   Roots: hw-approach, hw-gauge, hw-hourly, hw-mini, hw-minis, hw-ring,
   hw-elsewhere, hw-ladder, hw-sources. Tile chrome (head, dot, toggle, body,
   radius, padding, shadow) is shell's `.hw-tile` in app.css — never restated.

   Colour budget (P3): every fill here is neutral (`--text-faint` on
   `--tile-track`). Hue appears only on threshold marks (the gust gauge's
   threshold, the 39 mph line, bars at or above it) and on the approach bands
   when the island has an alert posted. Tokens only; each `var()` carries a
   fallback to the pre-redesign token so the tiles stay legible while
   shell's new tokens land.
   ========================================================================== */

/* ---- placement (own mounts, by id — CONTRACTS §6 rule 4) ---------------- */

#tiles-simple-a[data-count="2"] {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tile-gap, 12px);
	/* start, not stretch: a collapsed tile must stay one row tall instead of
	   matching its expanded neighbour (shell's audit measured 223 px). */
	align-items: start;
}
#tiles-simple-a[data-count="2"] > * { margin: 0; min-width: 0; }

@media (max-width: 767.98px) {
	#tiles-simple-a[data-count="2"] { grid-template-columns: minmax(0, 1fr); }
}

/* ---- §4.3 Closest approach --------------------------------------------- */

.hw-approach {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-variant-numeric: tabular-nums;
}
.hw-approach__num { line-height: 1; }
.hw-approach__when {
	margin: 0;
	font-size: var(--fs-meta, 0.75rem);
	color: var(--text-faint);
}
/* Room above the bar for the "NHC track · n mi" label. */
.hw-approach__scale { padding-top: 18px; margin-top: 2px; }
.hw-approach__bar {
	position: relative;
	height: 22px;
	border-radius: var(--r-pill, 999px);
	background: var(--tile-track, var(--surface-3));
}
.hw-approach__seg {
	position: absolute;
	top: 0;
	bottom: 0;
	background: var(--tile-track, var(--surface-3));
}
.hw-approach__seg--direct { border-radius: var(--r-pill, 999px) 0 0 var(--r-pill, 999px); }
.hw-approach__seg--clear { border-radius: 0 var(--r-pill, 999px) var(--r-pill, 999px) 0; }
/* Neutral separators so the four bands still read as four without hue. */
.hw-approach__seg + .hw-approach__seg { box-shadow: inset 1px 0 0 var(--tile, var(--surface)); }
/* §2.2 odds-band tints — only when the island has an active alert. */
.hw-approach__seg--tint.hw-approach__seg--direct { background: color-mix(in srgb, var(--sev-extreme) 12%, var(--tile, var(--surface))); }
.hw-approach__seg--tint.hw-approach__seg--warning { background: color-mix(in srgb, var(--sev-severe) 16%, var(--tile, var(--surface))); }
.hw-approach__seg--tint.hw-approach__seg--watch { background: color-mix(in srgb, var(--sev-moderate) 14%, var(--tile, var(--surface))); }
.hw-approach__seg--tint.hw-approach__seg--clear { background: var(--tile-2, var(--surface-2)); }

.hw-approach__tick {
	position: absolute;
	top: -4px;
	bottom: -4px;
	width: 3px;
	margin-left: -1.5px;
	border-radius: 2px;
	background: var(--accent);
}
.hw-approach__label {
	position: absolute;
	bottom: calc(100% + 4px);
	font-size: var(--fs-micro, 0.6875rem);
	font-weight: 800;
	line-height: 1.2;
	color: var(--accent);
	white-space: nowrap;
}
.hw-approach__label--mid { transform: translateX(-50%); }
.hw-approach__label--start { transform: translateX(-2px); }
.hw-approach__label--end { transform: translateX(calc(-100% + 2px)); }

.hw-approach__edges {
	position: relative;
	height: 1.4em;
	margin-top: 4px;
	font-size: var(--fs-micro, 0.6875rem);
	font-weight: 700;
	color: var(--text-faint);
}
.hw-approach__edge {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	white-space: nowrap;
}
.hw-approach__edge:first-child { transform: none; }
.hw-approach__edge--end { transform: translateX(-100%); }

/* ---- §4.4 Strongest gust ----------------------------------------------- */

.hw-gauge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-variant-numeric: tabular-nums;
}
.hw-gauge__arc {
	position: relative;
	width: 150px;
	height: 78px;
	margin-top: 4px;
	overflow: hidden;
	border-radius: 150px 150px 0 0;
	background: conic-gradient(from -90deg at 50% 100%,
		var(--text-faint) 0deg var(--fill, 0deg),
		var(--tile-track, var(--surface-3)) var(--fill, 0deg) 180deg,
		transparent 180deg);
}
/* The threshold mark: a radial tick across the ring at 39 (or 74). */
.hw-gauge__mark {
	position: absolute;
	left: calc(50% - 1.5px);
	bottom: 0;
	width: 3px;
	height: 100%;
	transform-origin: 50% 100%;
	transform: rotate(var(--mark, 0deg));
	background: linear-gradient(to bottom, var(--sev-severe) 0 22px, transparent 22px);
}
.hw-gauge--hurricane .hw-gauge__mark {
	background: linear-gradient(to bottom, var(--sev-extreme) 0 22px, transparent 22px);
}
.hw-gauge__hole {
	position: absolute;
	left: 22px;
	right: 22px;
	top: 22px;
	bottom: 0;
	border-radius: 150px 150px 0 0;
	background: var(--tile, var(--surface));
}
.hw-gauge__num {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	line-height: 1;
}
.hw-gauge__num .hw-num { font-size: 1.875rem; font-weight: 800; }
.hw-gauge__scale {
	display: flex;
	justify-content: space-between;
	gap: 6px;
	width: 100%;
	max-width: 190px;
	font-size: var(--fs-micro, 0.6875rem);
	font-weight: 700;
	color: var(--text-faint);
}
.hw-gauge__thr { color: var(--sev-severe); }
.hw-gauge--hurricane .hw-gauge__thr { color: var(--sev-extreme); }
.hw-gauge__caption {
	margin: 0;
	text-align: center;
	font-size: var(--fs-meta, 0.75rem);
	color: var(--text-faint);
}

/* ---- §4.6 Gusts tonight ------------------------------------------------ */

.hw-hourly { display: flex; flex-direction: column; gap: 6px; font-variant-numeric: tabular-nums; }
.hw-hourly__plot {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 88px;
	margin-top: 16px; /* the line label can sit above the plot on a calm night */
}
/*
 * Below-threshold bars: the spec names `--border`, but --border on --tile
 * measures ~1.4:1 in both themes and fails the 3:1 non-text rule (CONTRACTS
 * §8). `--border-control` is the lightest existing token that clears it
 * (3.98:1 dark, 3.31:1 light) and still reads as neutral.
 */
.hw-hourly__bar {
	flex: 1;
	min-width: 0;
	border-radius: 6px 6px 3px 3px;
	background: var(--border-control);
}
.hw-hourly__bar--low { background: var(--border-control); }
.hw-hourly__bar--ts { background: var(--sev-severe); }
.hw-hourly__bar--hu { background: var(--sev-extreme); }
.hw-hourly__line {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--line, 50%);
	border-top: 2px dashed var(--sev-severe);
	z-index: 1;
	pointer-events: none;
}
.hw-hourly__linelabel {
	position: absolute;
	right: 0;
	bottom: calc(var(--line, 50%) + 4px);
	z-index: 1;
	padding: 0 4px;
	border-radius: 4px;
	background: var(--tile, var(--surface));
	font-size: var(--fs-micro, 0.6875rem);
	font-weight: 700;
	color: var(--sev-severe);
	white-space: nowrap;
}
.hw-hourly__xs { display: flex; gap: 6px; }
.hw-hourly__x {
	flex: 1;
	min-width: 0;
	display: flex;
	justify-content: center;
	overflow: visible;
	white-space: nowrap;
	font-size: var(--fs-micro, 0.6875rem);
	font-weight: 700;
	color: var(--text-faint);
}
.hw-hourly__x--closest { font-weight: 800; color: var(--text); }
.hw-hourly__x--extreme { color: var(--sev-extreme); }
.hw-hourly__x--severe { color: var(--sev-severe); }
.hw-hourly__x--moderate { color: var(--sev-moderate); }
.hw-hourly__x:first-child { justify-content: flex-start; }
.hw-hourly__x:last-child { justify-content: flex-end; }

/* ---- §4.7 Surf / Rain / Surge / Storm cards --------------------------- */

.hw-minis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--tile-gap, 12px);
}
.hw-minis--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hw-minis--stack { grid-template-columns: minmax(0, 1fr); align-content: start; }

.hw-tile.hw-mini {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 14px 16px;
}
.hw-tile.hw-mini--storm { align-items: center; }
.hw-mini__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hw-mini__title {
	margin: 0;
	font-family: var(--font-display, var(--font-ui));
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--text);
}
.hw-mini__cap,
.hw-mini__alert {
	margin: 0;
	font-size: var(--fs-micro, 0.6875rem);
	line-height: 1.35;
	color: var(--text-faint);
}
.hw-mini__alert { font-weight: 700; color: var(--text); }

.hw-ring {
	position: relative;
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: conic-gradient(var(--text-faint) 0 var(--fill, 0%), var(--tile-track, var(--surface-3)) var(--fill, 0%) 100%);
}
.hw-ring::after {
	content: "";
	position: absolute;
	inset: 7px;
	border-radius: 50%;
	background: var(--tile, var(--surface));
}
.hw-ring__val {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8125rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--text);
}
/* Surge under a surge-bearing alert: the alert glyph sits on the ring so a
   near-zero observed reading never reads as "calm". The glyph is the only hue. */
.hw-ring__badge {
	position: absolute;
	top: -4px;
	right: -4px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--tile, var(--surface));
	box-shadow: 0 0 0 1px var(--border-control);
	font-size: 0.75rem;
	line-height: 1;
}
.hw-mini--alerted .hw-ring::after { box-shadow: inset 0 0 0 1px var(--border-control); }
.hw-ring__unit { margin-left: 1px; font-size: 0.5625rem; font-weight: 600; color: var(--text-faint); }

.hw-mini__cat {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	font-family: var(--font-display, var(--font-ui));
	font-size: 1.375rem;
	font-weight: 800;
	color: var(--cat-ink);
	background: var(--cat-ptc);
}
.hw-mini__cat--c1 { background: var(--cat-1); }
.hw-mini__cat--c2 { background: var(--cat-2); }
.hw-mini__cat--c3 { background: var(--cat-3); }
.hw-mini__cat--c4 { background: var(--cat-4); }
.hw-mini__cat--c5 { background: var(--cat-5); }
.hw-mini__cat--ts { background: var(--cat-ts); font-size: 1.125rem; }
.hw-mini__cat--td { background: var(--cat-td); font-size: 1.125rem; }
.hw-mini__cat--ptc { background: var(--cat-ptc); font-size: 0.9375rem; }

/* Phone (3c): three cards across, ring above the words. */
@media (max-width: 767.98px) {
	.hw-minis:not(.hw-minis--stack) { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
	/* Four cards: 2 × 2, not three and an orphan. */
	.hw-minis--n4:not(.hw-minis--stack) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hw-minis:not(.hw-minis--stack) .hw-tile.hw-mini {
		flex-direction: column;
		text-align: center;
		gap: 6px;
		padding: 12px 8px;
	}
	.hw-minis:not(.hw-minis--stack) .hw-mini__text { align-items: center; }
}

/* ---- §4.8 Elsewhere in Hawaii ------------------------------------------ */

.hw-elsewhere { display: block; }
.hw-elsewhere__chips {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hw-elsewhere__chip {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 6px;
	align-items: baseline;
	width: 100%;
	min-height: 36px;
	padding: 6px 10px;
	border: 1px solid transparent;
	border-radius: var(--r-inner, 12px);
	background: var(--tile-2, var(--surface-2));
	color: var(--text);
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.hw-elsewhere__chip:hover { border-color: var(--border-control); }
.hw-elsewhere__chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hw-elsewhere__chip--on { border-color: var(--text); cursor: default; }
.hw-elsewhere__name { font-size: 0.8125rem; font-weight: 700; }
.hw-elsewhere__alert {
	grid-column: 2;
	font-size: var(--fs-micro, 0.6875rem);
	line-height: 1.3;
	color: var(--text-faint);
}

/* ---- Where this data comes from --------------------------------------- */

.hw-sources { display: block; }
.hw-sources__list { margin: 0; padding: 0; list-style: none; }
.hw-sources__row {
	display: grid;
	grid-template-columns: auto 4.5rem minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	border-top: 1px solid var(--border);
	font-size: var(--fs-meta, 0.75rem);
}
.hw-sources__row:first-child { border-top: 0; }
.hw-sources__status { font-weight: 700; color: var(--text-dim); white-space: nowrap; }
.hw-sources__label { min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.hw-sources__err { display: block; font-size: var(--fs-micro, 0.6875rem); color: var(--text-faint); }
.hw-sources__age {
	font-family: var(--font-mono);
	font-size: var(--fs-mono, 0.71875rem);
	font-variant-numeric: tabular-nums;
	color: var(--text-faint);
	white-space: nowrap;
}
.hw-sources__link { font-weight: 700; white-space: nowrap; }
.hw-sources__note {
	margin: 10px 0 0;
	font-size: var(--fs-micro, 0.6875rem);
	line-height: 1.45;
	color: var(--text-faint);
}
/* Phone: label gets the width; age and link share a second line under it. */
@media (max-width: 479.98px) {
	.hw-sources__row {
		grid-template-columns: auto 4.5rem minmax(0, 1fr) auto;
		grid-template-areas: "dot status label label" ". . age link";
		row-gap: 0;
	}
	.hw-sources__row > .hw-dot { grid-area: dot; }
	.hw-sources__status { grid-area: status; }
	.hw-sources__label { grid-area: label; }
	.hw-sources__age { grid-area: age; }
	.hw-sources__link { grid-area: link; }
}

/* ---- §4.12 Dig deeper -------------------------------------------------- */

.hw-tile.hw-ladder { overflow: visible; }
.hw-ladder__rows { display: flex; flex-direction: column; gap: 6px; }
/* Nested rows: a well, not a second floating card. */
.hw-tile.hw-ladder__row {
	border-radius: var(--r-inner, 12px);
	background: var(--tile-2, var(--surface-2));
	box-shadow: none;
}
.hw-ladder__text {
	margin: 0 0 8px;
	max-width: 62ch;
	font-size: var(--fs-body, 0.875rem);
	line-height: 1.5;
	color: var(--text-dim);
}
.hw-ladder__list,
.hw-ladder__alerts {
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
	font-size: var(--fs-body, 0.875rem);
	line-height: 1.6;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}
.hw-ladder__alert + .hw-ladder__alert { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.hw-ladder__alertname { margin: 0 0 2px; font-weight: 700; color: var(--text); }
.hw-ladder__sub {
	margin: 4px 0 6px;
	font-size: var(--fs-meta, 0.75rem);
	font-weight: 700;
	color: var(--text-faint);
}
.hw-ladder__open { margin-top: 4px; }

/* ---- touch: 44 px targets (CONTRACTS §8) -------------------------------- */

@media (pointer: coarse) {
	.hw-elsewhere__chip { min-height: 44px; }
	.hw-sources__link { display: inline-flex; align-items: center; justify-content: flex-end; min-height: 44px; min-width: 44px; }
	.hw-ladder__open { min-height: 44px; }
}