@layer components {
  /* Page shell */
  .coverage-map-page__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--inline-space-double);
    flex-wrap: wrap;
  }
  .coverage-map-page__head h1 {
    font-size: var(--text-x-large);
  }
  .metro-picker {
    background: var(--color-canvas);
    border: 1px solid var(--color-ink-light);
    border-radius: 99rem;
    padding: 0.5em 1em;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    box-shadow: var(--shadow);
  }

  /* Pill-shaped dropdown (used by metro picker + industry filter) */
  .coverage-pillselect { position: relative; }
  .coverage-pillselect[open] { z-index: 30; }
  .coverage-pillselect__trigger {
    --hover-size: 0;
    --hover-filter: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    list-style: none;
  }
  .coverage-pillselect__trigger::-webkit-details-marker { display: none; }
  .coverage-pillselect__trigger::marker { content: ""; }
  .coverage-pillselect__caret {
    width: 0.7em;
    height: 0.7em;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1.5 1.5l4.5 4.5 4.5-4.5' fill='none' stroke='%23808080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
    transition: transform 100ms ease-out;
  }
  .coverage-pillselect[open] .coverage-pillselect__caret { transform: rotate(180deg); }
  .coverage-pillselect__panel {
    position: absolute;
    inset-block-start: calc(100% + 0.4em);
    inset-inline-end: 0;
    min-inline-size: 14ch;
    background: var(--color-canvas);
    border: 1px solid var(--color-ink-lighter);
    border-radius: 0.8em;
    box-shadow: var(--shadow);
    padding: 0.4em;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .coverage-pillselect__opt {
    --hover-size: 0;
    --hover-filter: none;
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 0.5em 0.7em;
    border-radius: 0.4em;
    font-size: var(--text-small);
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
  }
  .coverage-pillselect__opt:hover,
  .coverage-pillselect__opt:focus {
    background: var(--color-selected);
  }
  .coverage-pillselect__opt.is-selected {
    background: var(--color-selected);
    font-weight: 600;
  }

  /* Hero stats */
  .coverage-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--inline-space);
  }
  @media (max-width: 720px) {
    .coverage-stats { grid-template-columns: repeat(2, 1fr); }
  }
  .coverage-stat {
    background: var(--color-canvas);
    border: 1px solid var(--color-ink-lighter);
    border-radius: 1em;
    padding: 1em 1.2em;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    text-decoration: none;
    color: inherit;
    transition: 100ms ease-out;
    transition-property: transform, border-color, box-shadow;
  }
  .coverage-stat:hover {
    border-color: var(--color-ink-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
  }
  .coverage-stat__label {
    font-size: var(--text-x-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-ink-medium);
  }
  .coverage-stat__num {
    font-size: var(--text-xx-large);
    font-weight: 700;
    line-height: 1;
  }
  .coverage-stat__delta {
    font-size: var(--text-x-small);
    color: var(--color-ink-medium);
  }
  .coverage-stat--alert { background: oklch(96% 0.04 38); border-color: oklch(85% 0.05 38); }
  .coverage-stat--alert .coverage-stat__num { color: var(--color-negative); }
  .coverage-stat--alert .coverage-stat__label { color: oklch(45% 0.15 38); }
  .coverage-stat--warn { background: oklch(96% 0.06 80); border-color: oklch(85% 0.08 80); }
  .coverage-stat--warn .coverage-stat__num { color: oklch(40% 0.15 80); }
  .coverage-stat--warn .coverage-stat__label { color: oklch(40% 0.15 80); }

  /* Filter bar */
  .coverage-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    flex-wrap: wrap;
    background: var(--color-canvas);
    border-block: 1px solid var(--color-ink-lighter);
  }
  .coverage-filter-bar__label {
    font-size: var(--text-x-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-ink-medium);
  }
  .coverage-filter-bar__industry {
    background: var(--color-canvas);
    border: 1px solid var(--color-ink-light);
    border-radius: 99rem;
    padding: 0.5em 1em;
    display: inline-flex;
    align-items: center;
    box-shadow: var(--shadow);
  }
  .seg {
    display: inline-flex;
    background: var(--color-ink-lightest);
    border-radius: 99rem;
    padding: 3px;
    gap: 2px;
  }
  .seg__opt {
    padding: 0.4em 1em;
    font-size: var(--text-small);
    border-radius: 99rem;
    color: var(--color-ink-dark);
    cursor: pointer;
    user-select: none;
  }
  .seg__opt:hover { color: var(--color-ink); }
  .seg__opt--active {
    background: var(--color-canvas);
    color: var(--color-ink);
    box-shadow: 0 1px 3px oklch(0% 0 0 / 8%);
    font-weight: 600;
  }
  .coverage-search { position: relative; flex: 1; min-inline-size: 24ch; }
  .coverage-search__panel {
    position: absolute;
    inset: calc(100% + 0.4em) 0 auto 0;
    background: var(--color-canvas);
    border: 1px solid var(--color-ink-lighter);
    border-radius: 0.8em;
    box-shadow: var(--shadow);
    padding: 0.5em;
    z-index: 20;
    max-height: 60vh;
    overflow-y: auto;
  }
  .coverage-search__group-label {
    font-size: var(--text-x-small);
    text-transform: uppercase;
    color: var(--color-ink-medium);
    padding: 0.4em 0.6em 0.2em;
    margin: 0;
    font-weight: 700;
  }
  .coverage-search__item { list-style: none; }
  .coverage-search__btn {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0.5em 0.7em;
    border-radius: 0.4em;
    font-size: var(--text-small);
    cursor: pointer;
    text-align: left;
  }
  .coverage-search__btn:hover { background: var(--color-selected); }
  .coverage-search__hint { color: var(--color-ink-medium); font-size: var(--text-x-small); }

  /* Main split layout */
  .coverage-map-page__main {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(0, 1.6fr);
    gap: var(--inline-space);
    align-items: stretch;
  }
  @media (max-width: 880px) {
    .coverage-map-page__main { grid-template-columns: 1fr; }
  }
  .coverage-map-canvas {
    height: 640px;
    border-radius: 0.8em;
    overflow: hidden;
    border: 1px solid var(--color-ink-lighter);
  }

  /* Feed */
  .coverage-feed {
    background: var(--color-canvas);
    border: 1px solid var(--color-ink-lighter);
    border-radius: 0.8em;
    padding: 0.8em;
    height: 640px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1em;
  }
  .coverage-feed__head {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    margin-bottom: 0.4em;
  }
  .coverage-feed__title {
    font-size: var(--text-small);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
  }
  .coverage-feed__count { font-size: var(--text-x-small); color: var(--color-ink-medium); }
  .coverage-feed__empty {
    background: var(--color-ink-lightest);
    border-radius: 0.6em;
    padding: 1em;
    text-align: center;
    color: var(--color-ink-medium);
    font-size: var(--text-small);
  }
  .coverage-feed-row {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    width: 100%;
    text-align: left;
    background: var(--color-canvas);
    border: 1px solid var(--color-ink-lighter);
    border-left-width: 4px;
    border-radius: 0.6em;
    padding: 0.7em 0.8em;
    margin-bottom: 0.3em;
    cursor: pointer;
    transition: 100ms ease-out;
    transition-property: transform, border-color, background;
  }
  .coverage-feed-row:hover { transform: translateX(2px); border-color: var(--color-ink-light); }
  .coverage-feed-row.is-selected { background: var(--color-selected); border-color: var(--color-link); }
  .coverage-feed-row--urgent { border-left-color: var(--color-negative); }
  .coverage-feed-row--gap { border-left-color: oklch(76% 0.16 80); }
  .coverage-feed-row__top { display: flex; justify-content: space-between; align-items: center; gap: 0.5em; }
  .coverage-feed-row__name { font-weight: 600; }
  .coverage-feed-row__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-x-small);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.35em 0.7em;
    border-radius: 99rem;
  }
  .coverage-feed-row--urgent .coverage-feed-row__badge { background: var(--color-negative); color: var(--color-ink-inverted); }
  .coverage-feed-row--gap .coverage-feed-row__badge { background: oklch(96% 0.06 80); color: oklch(40% 0.16 80); }
  .coverage-feed-row__detail { font-size: var(--text-small); color: var(--color-ink-medium); }
  .coverage-feed-row__meta {
    font-size: var(--text-x-small);
    color: var(--color-ink-medium);
    display: flex;
    gap: 0.8em;
  }
  .coverage-feed-row__meta span:not(:first-child)::before { content: "·"; margin-right: 0.5em; color: var(--color-ink-light); }

  /* Map tooltip alert pill */
  .coverage-map-tooltip__alert { color: var(--color-negative); font-weight: 600; font-size: var(--text-x-small); }
}