/* 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 routing tabs (it-33): the Number card is one full-width card at the top, then a
 * .tabbar switches between the two inbound-routing modes. The tabbar owns the gap to its panels.
 * Inside a panel the cards stack full-width (the rule picker, then its configuration summary) —
 * each block is expected to grow its own controls as routing gets richer, so none is boxed into a
 * half-width column. */
.tn-routing .tabbar { margin-bottom: 1.5rem; }

/* 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);
}

/* The summary is the last card in its tab panel; drop its float-card bottom margin so the panel
 * doesn't end in dead space above the form actions. */
#tn-rule-summary { margin-bottom: 0; }

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