/* Speed-dial numbers (pages/admin/speed-dial.js).
 *
 * The grid answers one question per cell: what would a patient in this
 * province be offered for this kind of emergency? Its own number reads in
 * full ink, an inherited nationwide one in muted ink, and nothing at all is a
 * dashed "add" — the gap is the thing to notice.
 */
.speed__grid th[scope="row"] { font-weight: 600; white-space: nowrap; }
.speed__grid td { vertical-align: middle; }
.speed__national th, .speed__national td { background: var(--surface-sunken); }

.speed__cell {
  display: grid; gap: var(--sp-1); justify-items: start;
  inline-size: 100%; min-block-size: var(--target); padding: var(--sp-3) var(--sp-4);
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--text); font: inherit; text-align: start; cursor: pointer;
  transition: background var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease);
}
.speed__cell:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.speed__cell:focus-visible, .speed__phone:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.speed__cell .data { font-size: var(--fs-body-m); font-weight: 600; color: inherit; }
.speed__cell--inherited { color: var(--text-muted); }
.speed__hint { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-subtle); white-space: nowrap; }
.speed__hint--warn { color: var(--warning); font-weight: 600; }

.speed__add { min-block-size: var(--target); border-style: dashed; color: var(--text-muted); background: transparent; box-shadow: none; }
.speed__add:hover { color: var(--brand-text); border-color: var(--brand); background: var(--brand-soft); }

/* A number someone will dial: big enough to read back over the phone. */
.speed__phone {
  display: inline-flex; align-items: center; min-block-size: var(--target);
  font-size: var(--fs-body-m); font-weight: 600; color: var(--text); text-decoration: none;
}
.speed__phone:hover { color: var(--brand-text); text-decoration: underline; }
.table .speed__phone.data { font-size: var(--fs-body-m); color: var(--text); }