/* Inbound Call Routing (it-32). The editor + tester form use ONLY the house standard
 * (.float-card / .card__header / .section-grid / .field-input + MD3 components / .checkbox-row /
 * .autocomplete) with inline styles for one-off spacing — no bespoke field/layout classes.
 *
 * The one genuinely-new surface is the tester RESULT fragment (_test_result.html): a list of the
 * handsets a rule would ring, with a reachability dot per row. No existing component renders that,
 * so it earns a small feature-scoped block. */

.rtr__heading { font-weight: 600; margin: .75rem 0 .5rem; }
.rtr__list { list-style: none; margin: 0 0 .75rem; padding: 0; }
.rtr__row { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; }
.rtr__row--dropped { opacity: .7; }
.rtr__icon { font-size: 1.1rem; color: var(--md-sys-color-on-surface-variant); }
/* The person, then what rings. The endpoint is no longer a wire address ("client:u1") — it is
 * "Softphone" or a phone number — so it stops being monospace; only a real number stays tabular. */
.rtr__who { font-weight: 600; }
.rtr__addr { color: var(--md-sys-color-on-surface-variant); }
.rtr__pred {
  font-size: .75rem; padding: .1rem .4rem; border-radius: 999px;
  background: var(--md-sys-color-surface-variant); color: var(--md-sys-color-on-surface-variant);
}
.rtr__assign { font-size: 1rem; color: var(--md-sys-color-primary); }
.rtr__reason { font-size: .8rem; color: var(--md-sys-color-on-surface-variant); }
.rtr__note { font-size: .85rem; margin: .25rem 0; }
.rtr__note--fallback { color: var(--md-sys-color-secondary); }
.rtr__empty { color: var(--md-sys-color-on-surface-variant); }
.rtr__dropped { margin-top: .5rem; }
.rtr__dropped summary { cursor: pointer; font-size: .85rem; color: var(--md-sys-color-on-surface-variant); }

/* Edit-number page (it-32.2): the number's fields beside a summary of what its routing rule is
 * configured to do. Two columns on a wide screen, stacked on a narrow one. The summary reads
 * slightly wider than the form — it is the thing you came to look at. */
.tn-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .tn-edit-grid { grid-template-columns: minmax(0, 1fr); }
}


/* Recipients are filled blocks inside the white panel; the last loses its margin so the card
 * doesn't end in dead space. */
.rule-summary__recipient { margin-bottom: 0.75rem; }
.rule-summary__recipient:last-child { margin-bottom: 0; }

/* Hazards sit INSIDE the panel, under the recipients they describe — separated by a hairline, not
 * floated outside the box as loose notes. */
.rule-summary__hazards {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.rule-summary__hazards .notice:last-child { margin-bottom: 0; }

/* The escape hatch to the rule itself, in the panel's header. Its own line-height so it sits on the
 * title's baseline rather than stretching the header. */
.tn-edit-rulelink {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  font-size: var(--md-sys-typescale-body-medium-size);
}

/* Both columns are page-level boxes of the same kind; the grid gap spaces them, so neither carries
 * the float-card's own bottom margin. */
.tn-edit-fields,
#tn-rule-summary { margin-bottom: 0; align-self: start; }

.tn-edit-fieldstack { display: flex; flex-direction: column; gap: 1.25rem; }