/* ============================================================================
   hw-verdict — the verdict tile: one island, one plain-language answer.
   Owned by: answer (js/answer.js).  See CONTRACTS.md §2, §6; REDESIGN-SPEC §4.2.

   The tile itself (radius, padding, surface, shadow, head row) is the shared
   hw-tile primitive from css/app.css. This file adds only what makes it the
   verdict: the severity rail, the display-size sentence, the countdown well.

   Colour budget (P3): of the three places severity colour is allowed, this
   file spends two — the 8px rail and the countdown number — and the status dot
   comes from the shared hw-dot. Everything else is neutral ink. A Category 4
   day is one loud rail and one loud sentence, not a red box.

   Colour comes only from the :root tokens in css/app.css. Shell's redesign
   tokens (--font-display, --fs-display, …) carry fallbacks to the pre-redesign
   tokens so the tile stays readable if it paints before they land.

   Contents
     01  Root + the severity rail
     02  Status row (row 1)
     03  Verdict + detail (rows 2–3, the aria-live region)
     04  Countdown well, notices (row 4)
     05  Narrow widths
   ========================================================================= */

/* ============================================================================
   01  ROOT + RAIL
   ========================================================================= */

/*
   No rail at all for `none` and `unknown` (§4.2, §5). The rail is the claim
   "the NWS has issued something for this island"; a faint or grey rail on a
   calm day would read as a weak version of that claim.

   8px (spec) is wide enough to survive greyscale, a bad screen and a photo of
   a screen — the rail is the redundant channel beside the glyph and the words.
   Every --sev-* token clears 3:1 against --tile in both themes (app.css).
*/
.hw-verdict--extreme  { border-inline-start: 8px solid var(--sev-extreme); }
.hw-verdict--severe   { border-inline-start: 8px solid var(--sev-severe); }
.hw-verdict--moderate { border-inline-start: 8px solid var(--sev-moderate); }

/* The tile is never collapsible, so the head is a plain status line, not a
   control row: let it wrap rather than squeeze the issued stamp on a phone. */
.hw-verdict .hw-tile__head {
  flex-wrap: wrap;
  row-gap: var(--s-1);
}

/* ============================================================================
   02  STATUS ROW — "Kauai · ◆ Hurricane Warning"  ·  "issued 2:02 PM · NWS Honolulu"
   ========================================================================= */

/* The h2 of the tile, demoted to a 12/700 status line: the sentence below is
   the headline, and a 15px title above it would compete with it. */
.hw-verdict .hw-tile__title {
  margin: 0;
  font-family: var(--font-display, var(--font-ui));
  font-size: var(--fs-meta, 0.75rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-faint);
}

/* The spec's calm row shows "○ All clear" in the ok colour (screen 4b); the
   shared hw-glyph--none is faint for the switcher's calm row, which is a
   different job — six neutral glyphs, not one answer. */
.hw-verdict__status .hw-glyph--none { color: var(--ok); }

.hw-verdict__issued {
  margin-inline-start: auto;
  font-size: var(--fs-meta, 0.75rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.hw-verdict__issued:empty { display: none; }

/* ============================================================================
   03  VERDICT + DETAIL
   ========================================================================= */

/* The aria-live region. Holds only the answer, so a refresh of some other
   source — or the countdown ticking — cannot make a screen reader re-read it. */
.hw-verdict__live {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/*
   The largest prose on the page: 28/800/1.15, −0.02em (§2.1). Neutral ink on
   purpose — the rail already says how bad it is, and --sev-extreme as 28px
   body text is the least readable red on the page.

   text-wrap: pretty (the design canvas uses it) rather than balance: balance
   evens every line and on a two-line sentence at 520px it pulls the first line
   short, leaving a ragged block that reads as broken; pretty only fixes the
   orphan.
*/
.hw-verdict__sentence {
  margin: 0;
  font-family: var(--font-display, var(--font-ui));
  font-size: var(--fs-display, 1.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: pretty;
  color: var(--text);
}

.hw-verdict__detail {
  margin: 0;
  max-width: 62ch;
  font-size: var(--fs-body, 0.875rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-dim);
}

/* ============================================================================
   04  COUNTDOWN WELL + NOTICES
   ========================================================================= */

.hw-verdict__extra {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.hw-verdict__extra:empty { display: none; }

/* Row 4. The well surface (--tile-2, --r-inner, --well-pad) is the shared
   hw-well; this only lays out the glyph and the sentence. */
.hw-verdict__count {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: 0.8125rem;   /* 13/600 per the design canvas; there is no 13px token */
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}
.hw-verdict__clock {
  flex: none;
  color: var(--text-faint);
}
/* The sentence is one flex item beside the clock. A flex item will not shrink
   below its longest unbreakable run by default, so an NWS instruction carrying
   a URL would push the well past the tile at 390; min-width: 0 plus
   overflow-wrap lets it wrap instead. */
.hw-verdict__count-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* The bold number takes the level colour (§4.2) — the second of this file's
   two severity spends. It is the level of the WIND alert the countdown
   describes, not the rail's (which follows the island's top alert, possibly a
   flood product): the number and the hazard word must tell the same story.
   Every --sev-* token is ≥ 4.7:1 on --tile-2 in both themes (app.css
   measurements), and the words beside it carry the meaning. */
.hw-verdict__n {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.hw-verdict__n--extreme  { color: var(--sev-extreme); }
.hw-verdict__n--severe   { color: var(--sev-severe); }
.hw-verdict__n--moderate { color: var(--sev-moderate); }

/*
   A source failed or is overdue. Warn-toned in every case, including an
   outright error, because the message is always the same instruction: what
   you are reading may not be current. The glyph, not the colour, is the
   signal. It does not touch the rail: a stale feed is a reason to distrust the
   number, never a reason to downgrade the warning it is reporting.
*/
.hw-verdict__notice,
.hw-verdict__out {
  margin: 0;
  font-size: var(--fs-meta, 0.75rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-dim);
}

/*
   Item 1 (panels-ux wave): the reader pinned a storm from Full. Same status-
   about-the-page treatment as notice/out above — this is not weather, it is
   what the page is currently pointed at, and every other Simple surface
   (closest-approach tile, odds tile, map) is already showing this storm.
*/
.hw-verdict__pinned {
  margin: 0;
  font-size: var(--fs-meta, 0.75rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-dim);
}
.hw-verdict__unpin {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.hw-verdict__unpin:hover { color: var(--text); }
/* Same 44px allowance as .hw-verdict__out > a above. */
@media (pointer: coarse) {
  .hw-verdict__unpin { min-height: 44px; display: inline-flex; align-items: center; }
}
.hw-verdict__notice::before {
  content: "⚠ ";
  color: var(--warn);
}

/*
   The way out in the failure states. "Official Hawaii warnings: weather.gov/hfo"
   is a label and one destination, not running prose, so the inline-link
   exception does not cover it — and it is the escape hatch exactly when this
   page cannot be trusted. qa measured the bare link at 96×17 at 390; it gets a
   real box on touch screens. Desktop (fine pointer) is left as plain prose, per
   the lead's ruling. Flex, not inline-flex on the anchor alone, so the label
   text (an anonymous flex item) stays centred against the taller link.
*/
@media (pointer: coarse) {
  .hw-verdict__out {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--s-1);
  }
  .hw-verdict__out > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ============================================================================
   05  NARROW WIDTHS
   ========================================================================= */

/* 24px on a phone (§2.1). min() rather than a second token so a shell change
   to --fs-display still governs the desktop size. */
@media (max-width: 767px) {
  .hw-verdict__sentence { font-size: min(var(--fs-display, 1.75rem), 1.5rem); }
}