/* MaverickWX: the alert card, one list of alerts for the Live map and Storm Mode (UR-02, plan §4.2).

   The markup is made once, on the server, by worker/severe/alert-card.ts; this sheet is its only
   style. The regions are a product name, what raises it, the places, what tells it from a
   look-alike, the one time, and an essential exception. The places have the row's full width and
   wrap: nothing in the row is cut to one line, nothing depends on hover, and a threat badge never
   shares the line the places are on. A row is as tall as what it says.

   Each surface supplies the colours it already has under the --ac-* roles (severe-live.css,
   event-tracking.css), so the card reads the same on the Live map's room and on Storm Mode's
   workspace, in both themes. The surface also owns the edge of its row (the Live map's hazard
   accent, Storm Mode's level bar); what is here is what is inside it. */

.ac-list,
.ac-items {
  min-width: 0;
}

.ac-list {
  margin-top: 8px;
}

.ac-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ac-items[hidden],
.ac-item[hidden],
.ac-group[hidden] {
  display: none;
}

/* ---- The card's link --------------------------------------------------------------------- */

.ac-pick,
.ac-items .ac-item a.ac-pick,
.ac-items .ac-item a.ac-pick:hover {
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 44px;
  padding: 10px 14px 10px 12px;
  color: var(--ac-ink);
  text-decoration: none;
  overflow-wrap: break-word;
}

.ac-pick > span {
  min-width: 0;
}

.ac-pick:hover {
  background: var(--ac-hover);
}

.ac-pick:hover .ac-where {
  text-decoration: underline;
}

.ac-pick:focus-visible {
  outline: 3px solid var(--ac-focus);
  outline-offset: -3px;
}

/* The selected row: a lifted ground and a doubled edge. The row's link also carries aria-current and the word "selected" in
   its name, so the selection is never told by colour alone. */
.ac-pick[aria-current] {
  background: var(--ac-selected);
  box-shadow: inset 0 0 0 2px var(--ac-action);
}

.ac-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ac-swatch {
  flex: none;
  width: 11px;
  height: 11px;
  /* The hazard's colour is fixed hazard vocabulary; a light fill still needs an edge on a light ground. */
  filter: drop-shadow(0 0 0.5px var(--ac-muted));
}

/* 1. The official product name: 15px semibold. It wraps; a long name is never cut. */
.ac-name {
  min-width: 0;
  font-size: var(--fs-bulletin);
  font-weight: 650;
  line-height: 1.3;
  color: var(--ac-ink);
}

/* A word a refresh brought: placed by script after the name, and gone with the next render. */
.ac-change {
  flex: none;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--ac-action);
  color: var(--ac-action-text);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1.5;
}

/* 2. What raises it above its name, on a line of its own: an emergency reverses, the rest are outlined. */
.ac-esc {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ac-flag {
  padding: 0 7px;
  border: 1px solid var(--ac-ink);
  border-radius: 4px;
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ac-ink);
}

.ac-flag--emergency {
  border-color: var(--ac-emergency);
  background: var(--ac-emergency);
  color: var(--ac-emergency-text);
}

/* 3. The places: the row's own full width, 16px semibold, free to wrap. */
.ac-where {
  font-size: var(--fs-remarks);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ac-ink);
}

/* 4. What tells it from a look-alike: the towns its outline holds, where it lies, or when it was issued. */
.ac-sub,
.ac-time,
.ac-note {
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--ac-muted);
}

.ac-sub {
  overflow-wrap: anywhere;
}

/* 5. The one time the row is about. Tabular, so a column of them lines up. */
.ac-time {
  font-variant-numeric: tabular-nums;
}

.ac-time--later {
  font-weight: 600;
  color: var(--ac-ink);
}

/* 6. An essential exception, never behind a generic detail. */
.ac-note {
  font-style: italic;
}

/* "View all N areas": a sibling of the link, so it is its own control and keeps the whole list beside the warning. */
.ac-areas {
  padding: 0 14px 8px 12px;
  font-size: var(--fs-small);
}

.ac-areas > summary {
  display: flex;
  align-items: center;
  min-height: 32px;
  color: var(--ac-link);
  cursor: pointer;
}

.ac-areas > p {
  margin: 2px 0 0;
  font-size: var(--fs-bulletin);
  line-height: 1.45;
  color: var(--ac-ink);
  overflow-wrap: anywhere;
}

/* ---- Groups ------------------------------------------------------------------------------ */

.ac-group {
  margin: 0 0 8px;
}

.ac-group-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 4px;
  padding-inline: var(--ac-gutter, 0);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ac-muted);
}

.ac-group-n {
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ac-ink);
}

.ac-group-detail {
  font-family: var(--font-body, inherit);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ac-muted);
}

/* The control to put a group away: shown by script, remembered for the view, never on an emergency. */
.ac-group-toggle {
  margin-left: auto;
  min-height: 32px;
  padding: 2px 12px;
  border: 1px solid var(--ac-edge);
  border-radius: 999px;
  background: transparent;
  color: var(--ac-ink);
  font: inherit;
  font-size: var(--fs-small);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.ac-group-toggle:hover {
  background: var(--ac-hover);
}

.ac-group-toggle:focus-visible,
.ac-search-in:focus-visible,
.ac-select select:focus-visible,
.ac-clear:focus-visible {
  outline: 3px solid var(--ac-focus);
  outline-offset: 2px;
}

/* An emergency that a filter left out, apart from the results and named for what it is. */
.ac-group--aside {
  margin: 8px 0 12px;
  padding: 8px 10px;
  border: 1px dashed var(--ac-edge);
  border-radius: 8px;
}

.ac-group--aside .ac-group-h {
  margin-top: 0;
}

.ac-aside-note {
  margin: 0 0 4px;
  font-size: var(--fs-small);
  color: var(--ac-muted);
}

.ac-group--aside .ac-pick {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.ac-group--aside .ac-pick > span {
  grid-column: 1;
}

.ac-group--aside .ac-pick::after {
  content: "Open";
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  padding: 1px 10px;
  border: 1px solid var(--ac-action);
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ac-action-ink);
}

/* An emergency a search did not match is still listed, and says so in words (alert-list.mjs). */
.ac-unmatched {
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ac-emergency-ink);
}

/* ---- Controls ---------------------------------------------------------------------------- */

.ac-controls {
  display: grid;
  gap: 8px;
  flex: 1 1 100%;
  min-width: 0;
}

.ac-controls[hidden] {
  display: none;
}

.ac-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ac-muted, var(--ink-2));
}

.ac-order-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.ac-order {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 0;
}

/* A compact segmented choice: one row in a narrow list, still an address, still a 32px target. */
.ac-order .choice,
.ac-hazards .st-alert-chip {
  min-height: 32px;
  padding: 2px 10px;
  font-size: var(--fs-small);
}

.ac-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 8px 10px 0;
}

.ac-select {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ac-select select {
  min-width: 0;
  min-height: 38px;
  padding: 4px 8px;
  border: 1px solid var(--ac-edge);
  border-radius: 8px;
  background: var(--ac-field);
  color: var(--ac-ink);
  font: inherit;
  font-size: var(--fs-small);
}

.ac-hazards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 8px 10px 2px;
}

.ac-hazards .ac-label {
  margin-right: 2px;
}

.ac-search {
  display: grid;
  gap: 4px;
  padding: 8px 10px 0;
}

.ac-search[hidden] {
  display: none;
}

.ac-search-l {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ac-ink);
}

.ac-search-in {
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--ac-edge);
  border-radius: 8px;
  background: var(--ac-field);
  color: var(--ac-ink);
  font: inherit;
  font-size: var(--fs-remarks);
}

.ac-status {
  margin: 0;
  padding: 6px 10px 0;
  font-size: var(--fs-small);
  color: var(--ac-muted);
}

.ac-status[hidden] {
  display: none;
}

.ac-status [data-ac-count] {
  font-weight: 700;
  color: var(--ac-ink);
}

.ac-clear {
  margin-left: 4px;
  min-height: 32px;
  color: var(--ac-link);
  font-weight: 600;
}

/* What a refresh brought or changed, the end of the list's status line (worker/severe/alert-card.ts `changesSlot`): "1 new · 1 updated" with
   Show and Dismiss. It is in the page's flow above the cards, never laid over them, and it keeps one height whatever it says: what it says
   (`ac-changes-now`) and an invisible copy of the longest thing it can say (`ac-changes-room`) share one grid cell, so the cell is as tall as
   the longer of the two at any width, zoom or font, and writing into it or emptying it moves nothing (UR-02 review R4, F1; D24). */
.ac-changes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0 10px;
  font-size: var(--fs-small);
  color: var(--ac-ink);
}

.ac-changes-now,
.ac-changes-room {
  grid-area: 1 / 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  min-width: 0;
}

.ac-changes-room {
  visibility: hidden;
}

.ac-changes [data-ac-changes-text],
.ac-changes-words {
  font-weight: 700;
}

/* Show and Dismiss are drawn as the status line's own "Clear filters" is: words in the link colour, not boxes. */
.ac-changes button,
.ac-changes-act {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 24px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--ac-link);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.ac-changes button:hover {
  text-decoration-thickness: 2px;
}

.ac-changes button:focus-visible {
  outline: 3px solid var(--ac-focus);
  outline-offset: 2px;
}

@media (pointer: coarse) {
  .ac-changes button,
  .ac-changes-act {
    min-height: 36px;
  }
}

@media (forced-colors: active) {
  .ac-changes button {
    color: LinkText;
  }
}

@media (forced-colors: active) {
  .ac-pick[aria-current] {
    outline: 3px solid Highlight;
  }
  .ac-flag--emergency {
    border-color: CanvasText;
  }
}

/* Type, Hazard, Order and the search, folded behind one control where there is no room for them (alert-list.mjs). It is drawn as a
   control, not a caption: a border, a chevron that turns with the state, and the words of what is behind it (UR-02 review R1, F4).
   Storm Mode's is the summary of a native disclosure at the head of its list; the Live map's is a button in the list's head. */
.ac-tools > summary,
.ac-tools-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--ac-edge);
  border-radius: 8px;
  background: var(--ac-field);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ac-ink);
  cursor: pointer;
  list-style: none;
}

.ac-tools > summary {
  margin: 0 var(--ac-gutter, 0);
}

.ac-tools > summary::-webkit-details-marker {
  display: none;
}

.ac-tools > summary::after,
.ac-tools-toggle::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 2px 3px auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.ac-tools-toggle {
  flex: none;
}

.ac-tools-toggle::after {
  margin-left: 4px;
}

.ac-tools[open] > summary::after,
.ac-tools-toggle[aria-expanded="true"]::after {
  margin-bottom: -3px;
  transform: rotate(-135deg);
}

.ac-tools > summary:hover,
.ac-tools-toggle:hover {
  background: var(--ac-hover);
}

.ac-tools[open] > summary {
  margin-bottom: 4px;
}

.ac-tools-toggle[hidden] {
  display: none;
}

@media (pointer: coarse) {
  .ac-tools > summary,
  .ac-tools-toggle {
    min-height: 44px;
  }
}

.ac-tools > summary:focus-visible,
.ac-tools-toggle:focus-visible {
  outline: 3px solid var(--ac-focus);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  .ac-tools > summary,
  .ac-tools-toggle {
    border-color: ButtonText;
  }
}