/* Graphite Grid
   Flat operational layout for the complete MSG4wrd workspace. The layer is
   intentionally last in the cascade so legacy components share one geometry. */

/* Outgoing call preparation follows the portal's operational form language. */
.graphite-grid .call-compose-form { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); padding: 24px; gap: 28px; }
.graphite-grid .call-compose-fields { display: grid; gap: 16px; min-width: 0; }
.graphite-grid .call-compose-fields label { display: grid; gap: 8px; min-width: 0; }
.graphite-grid .call-compose-fields :is(input,select,textarea) { width: 100%; min-width: 0; }
.graphite-grid .call-compose-fields textarea { min-height: 130px; resize: vertical; }
.graphite-grid .call-compose-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.graphite-grid .call-contact-picker { display: grid; gap: 12px; }
.graphite-grid .call-contact-picker select { min-height: 130px; }
.graphite-grid .call-preview-toolbar, .graphite-grid .call-compose-actions { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.graphite-grid .call-compose-form button:disabled { opacity: .45; cursor: not-allowed; }
.graphite-grid #callAutomationAudio { width: 100%; height: 44px; }
.graphite-grid .call-dispatch-modes { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border); }
.graphite-grid .call-dispatch-modes > span { color: var(--text-soft); }
.graphite-grid .call-dispatch-toggle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; padding: 4px; border: 1px solid var(--border); background: var(--surface); }
.graphite-grid .call-dispatch-toggle button.secondary { min-height: 44px; justify-content: center; margin: 0; padding: 10px 12px; border: 1px solid transparent; background: transparent; color: var(--muted); }
.graphite-grid .call-dispatch-toggle button.secondary[aria-pressed="true"] { border-color: var(--cyan); background: var(--cyan); color: var(--bg); }
.graphite-grid .call-dispatch-toggle button.secondary[aria-pressed="false"]:hover { color: var(--text); border-color: var(--border); }
.graphite-grid #callAutomationTimezone { padding-right: 44px; }
.graphite-grid .call-playback-review { border-left: 1px solid var(--border); padding-left: 24px; min-width: 0; }
.graphite-grid .call-playback-review h3 { font-size: 18px; margin: 0 0 12px; }
.graphite-grid .call-playback-review p { line-height: 1.6; }
.graphite-grid .call-playback-review dl { margin: 20px 0; }
.graphite-grid .call-playback-review dl > div { padding: 12px 0; border-bottom: 1px solid var(--border); }
.graphite-grid .call-playback-review dt { color: var(--muted); font-size: 12px; }
.graphite-grid .call-playback-review dd { margin: 5px 0 0; color: var(--text); overflow-wrap: anywhere; }
.graphite-grid .call-playback-review .is-ready { color: var(--lime); }
.graphite-grid .call-playback-review .is-error { color: var(--red); }
.graphite-grid .call-automation-history { margin-top: 24px; }
.graphite-grid .call-automation-history :is(th, td) { text-align: left; }
.graphite-grid .call-automation-history td { vertical-align: top; }
.graphite-grid .call-automation-history td small { display: block; margin-top: 5px; color: var(--muted); max-width: 280px; white-space: normal; overflow-wrap: anywhere; }
.graphite-grid .call-message-cell { max-width: 280px; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 1000px) {
  .graphite-grid .call-compose-form { grid-template-columns: minmax(0, 1fr); }
  .graphite-grid .call-playback-review { border-left: 0; border-top: 1px solid var(--border); padding: 20px 0 0; }
}
@media (max-width: 600px) {
  .graphite-grid .call-compose-form { padding: 16px; gap: 20px; }
  .graphite-grid .call-compose-pair { grid-template-columns: minmax(0, 1fr); }
}

@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/static/fonts/fredoka-latin.woff2") format("woff2");
}

html { --sans: "Fredoka", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }

html[data-theme="dark"] {
  color-scheme: dark;
  --sans: "Fredoka", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: #0b0f14;
  --rail: #080c10;
  --surface: #11171e;
  --surface-2: #151c24;
  --surface-3: #1a222c;
  --border: #28323d;
  --border-strong: #3c4957;
  --text: #edf4fa;
  --text-soft: #c6d2de;
  --muted: #8292a5;
  --muted-2: #617184;
  --cyan: #44dff5;
  --lime: #99f57e;
  --amber: #ffc05d;
  --red: #ff7d7d;
  --accent-soft: #10242d;
  --success-soft: #14271d;
  --warning-soft: #2b2417;
  --danger-soft: #2b1a1d;
  --overlay: #02070cc7;
  --shadow: none;
  --graphite-grid: rgba(68, 223, 245, .018);
}

html[data-theme="light"] {
  color-scheme: light;
  --sans: "Fredoka", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: #edf1f4;
  --rail: #e3e9ee;
  --surface: #f7f9fb;
  --surface-2: #eef2f5;
  --surface-3: #e4eaf0;
  --border: #c7d0d9;
  --border-strong: #98a7b5;
  --text: #17212b;
  --text-soft: #344250;
  --muted: #667687;
  --muted-2: #7b8996;
  --cyan: #006f86;
  --lime: #257644;
  --amber: #9b6200;
  --red: #b93b49;
  --accent-soft: #dceef2;
  --success-soft: #deede3;
  --warning-soft: #f3e8d1;
  --danger-soft: #f1dfe2;
  --overlay: #1b293799;
  --shadow: none;
  --graphite-grid: rgba(0, 111, 134, .025);
}

.graphite-grid,
.graphite-grid *,
.graphite-grid *::before,
.graphite-grid *::after {
  box-shadow: none !important;
  text-shadow: none !important;
  border-radius: 0 !important;
}

.graphite-grid {
  min-width: 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--graphite-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--graphite-grid) 1px, transparent 1px);
  background-size: 40px 40px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
}

.graphite-grid::before { display: none; }
.graphite-grid :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.graphite-grid ::selection { color: var(--bg); background: var(--cyan); }
.graphite-grid ::-webkit-scrollbar { width: 9px; height: 9px; }
.graphite-grid ::-webkit-scrollbar-track { background: var(--bg); }
.graphite-grid ::-webkit-scrollbar-thumb { background: var(--border-strong); border: 2px solid var(--bg); }

/* Shell ------------------------------------------------------------------- */
.graphite-grid .shell {
  grid-template-columns: 178px minmax(0, 1fr);
  min-height: 100dvh;
  overflow-x: clip;
}

.graphite-grid .rail {
  width: 178px;
  padding: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--rail) 98%, transparent);
  border-right: 1px solid var(--border);
}

.graphite-grid .brand {
  flex: 0 0 74px;
  min-height: 74px;
  gap: 11px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
}

.graphite-grid .graphite-mark {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--cyan);
  background: transparent;
  border: 1px solid var(--cyan);
  border-radius: 2px !important;
  font: 500 11px/1 var(--mono);
  letter-spacing: .07em;
}

.graphite-grid .brand b {
  color: var(--text);
  font: 500 14px/1.05 var(--mono);
  letter-spacing: .09em;
}

.graphite-grid .brand small {
  margin-top: 5px;
  color: var(--muted);
  font: 400 8px/1 var(--mono);
  letter-spacing: .14em;
}

.graphite-grid .rail-site {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 9px;
  min-height: 64px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.graphite-grid .rail-site > i {
  width: 7px;
  height: 7px;
  background: var(--lime);
  animation: graphite-pulse 1.8s steps(2, end) infinite;
}

.graphite-grid .rail-site small,
.graphite-grid .rail-site strong { display: block; }
.graphite-grid .rail-site small { color: var(--muted); font: 400 8px/1 var(--mono); letter-spacing: .13em; }
.graphite-grid .rail-site strong { margin-top: 5px; color: var(--text-soft); font-size: 10px; font-weight: 500; }
.graphite-grid .rail-site [data-icon] { color: var(--muted); }
.graphite-grid .rail-site [data-icon] svg { width: 12px; height: 12px; }

@keyframes graphite-pulse { 50% { opacity: .3; } }

.graphite-grid .nav {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 12px 0;
  overflow-y: auto;
}

.graphite-grid .nav a {
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 9px;
  width: 100%;
  min-height: 46px;
  padding: 0 14px 0 12px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0 !important;
  font-size: 11px;
  font-weight: 400;
  transition: color .14s ease, background-color .14s ease;
}

.graphite-grid .nav a::after {
  content: attr(data-index);
  color: var(--muted-2);
  font: 400 8px/1 var(--mono);
  letter-spacing: .05em;
}

.graphite-grid .nav a:hover { color: var(--text); background: var(--surface); }
.graphite-grid .nav a.active {
  color: var(--cyan);
  background: linear-gradient(90deg, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 85%);
  border-color: var(--cyan);
}
.graphite-grid .nav a.active::after { color: var(--cyan); }
.graphite-grid .nav-icon { width: 18px; color: inherit; }
.graphite-grid .nav-icon svg { width: 16px; height: 16px; stroke-width: 1.8; }
.graphite-grid .rail .nav a .nav-text { font-size: 11px; font-weight: 400; line-height: 1.25; }
.graphite-grid .nav-text small { display: none; }
.graphite-grid .nav-count {
  position: absolute;
  right: 27px;
  min-width: 16px;
  height: 16px;
  color: var(--rail);
  background: var(--amber);
  border: 1px solid var(--rail);
  border-radius: 2px !important;
  font: 500 8px/1 var(--mono);
}

.graphite-grid .rail-bottom {
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.graphite-grid .rail-pulse,
.graphite-grid .operator-identity,
.graphite-grid .logout { padding: 11px 13px; border-bottom: 1px solid var(--border); }
.graphite-grid .rail-pulse { min-height: 51px; font: 400 8px/1.45 var(--mono); letter-spacing: .05em; }
.graphite-grid .rail-pulse [data-icon] { display: none; }
.graphite-grid .rail-pulse strong { color: var(--lime); font: 500 10px/1.4 var(--mono); }
.graphite-grid .rail-pulse small { font-size: 8px; }
.graphite-grid .operator-identity { min-height: 50px; gap: 9px; background: transparent; border: 0; border-bottom: 1px solid var(--border); text-align: left; }
.graphite-grid .operator-avatar {
  width: 28px;
  height: 28px;
  color: var(--cyan);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 2px !important;
  font: 500 8px/1 var(--mono);
}
.graphite-grid .operator-identity b { font-size: 9px; font-weight: 500; }
.graphite-grid .operator-identity small { margin-top: 2px; font-size: 8px; }
.graphite-grid .logout { min-height: 37px; margin: 0; color: var(--muted); font: 400 9px/1 var(--mono); letter-spacing: .08em; }
.graphite-grid .logout:hover { color: var(--red); background: var(--danger-soft); }

/* Top command bar --------------------------------------------------------- */
.graphite-grid .main { min-width: 0; padding: 0; }
.graphite-grid .topbar {
  justify-content: flex-start;
  gap: 14px;
  height: 74px;
  padding: 0 20px;
  background: color-mix(in srgb, var(--bg) 98%, transparent);
  border-bottom: 1px solid var(--border);
}

.graphite-grid .command-location { flex: 0 1 220px; min-width: 170px; }
.graphite-grid .command-location span,
.graphite-grid .command-location strong { display: block; }
.graphite-grid .command-location span { color: var(--muted); font: 400 8px/1 var(--mono); letter-spacing: .15em; }
.graphite-grid .command-location strong { margin-top: 6px; overflow: hidden; color: var(--text); font-size: 17px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

.graphite-grid .gateway-status {
  gap: 7px;
  min-height: 31px;
  margin-left: 2px;
  padding-left: 14px;
  border-left: 1px solid var(--border);
  font: 400 8px/1 var(--mono);
  letter-spacing: .07em;
}
.graphite-grid .gateway-status > i { width: 6px; height: 6px; background: var(--lime); border-radius: 0 !important; }
.graphite-grid .gateway-status > span { color: var(--lime); text-transform: uppercase; }
.graphite-grid .gateway-status > b { margin-left: 5px; padding-left: 11px; font-size: 8px; }
.graphite-grid .command-search {
  width: min(330px, 32%);
  height: 34px;
  margin-left: auto;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px !important;
}
.graphite-grid .command-search:focus-within { border-color: var(--cyan); outline: 1px solid var(--cyan); outline-offset: -1px; }
.graphite-grid .command-search input { height: 32px; font: 400 10px/1 var(--mono); }
.graphite-grid .command-search kbd { border-radius: 2px !important; font: 400 8px/1 var(--mono); }
.graphite-grid .command-search-results,
.graphite-grid .notify-panel {
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 3px !important;
}
.graphite-grid .command-search-results > p { padding: 10px 12px 0; }
.graphite-grid .command-search-results > a,
.graphite-grid .command-search-results > button { min-height: 45px; padding: 9px 12px; border-bottom: 1px solid var(--border); border-radius: 0 !important; font-size: 11px; }
.graphite-grid .command-search-results > :is(a, button):hover { background: var(--accent-soft); }
.graphite-grid .topbar-right { gap: 6px; }
.graphite-grid .theme-toggle,
.graphite-grid .notify-btn,
.graphite-grid .icon-btn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  color: var(--muted);
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 3px !important;
}
.graphite-grid .theme-toggle:hover,
.graphite-grid .notify-btn:hover,
.graphite-grid .icon-btn:hover { color: var(--cyan); border-color: var(--cyan) !important; }
.graphite-grid .notify-badge { top: -4px; right: -4px; min-width: 14px; height: 14px; padding: 0 3px; color: var(--rail); background: var(--amber); border: 1px solid var(--bg); border-radius: 2px !important; font: 500 7px/12px var(--mono); }
.graphite-grid .notify-head { padding: 13px 14px; }
.graphite-grid .notify-item { padding: 11px 14px; }
.graphite-grid .notify-foot { padding: 11px 14px; background: var(--surface-2); }

/* Page rhythm ------------------------------------------------------------- */
.graphite-grid .page { min-height: calc(100vh - 74px); padding: 0 20px 26px; }
.graphite-grid .page-heading,
.graphite-grid .overview-heading,
.graphite-grid .page:not([data-page="overview"]) .page-heading {
  min-height: 88px;
  margin: 0;
  padding: 17px 0 15px;
  border-bottom: 0;
}
.graphite-grid .page-heading h1 {
  margin: 0 0 5px;
  color: var(--text);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.graphite-grid .page-heading p { max-width: 760px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.graphite-grid .page-heading .eyebrow { display: flex; margin-bottom: 7px; color: var(--cyan); font: 400 8px/1 var(--mono); letter-spacing: .12em; }
.graphite-grid .tiny-line { width: 15px; background: var(--cyan); }
.graphite-grid .heading-actions { gap: 7px; }
.graphite-grid .overview-heading .heading-actions .secondary { display: inline-flex; }

.graphite-grid :is(.primary, .secondary, .danger, .button-link) {
  min-height: 34px;
  padding: 8px 11px;
  border-radius: 3px !important;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .04em;
}
.graphite-grid .primary { color: var(--rail); background: var(--cyan); border: 1px solid var(--cyan); }
.graphite-grid .primary:hover { color: var(--rail); background: color-mix(in srgb, var(--cyan) 86%, white); border-color: color-mix(in srgb, var(--cyan) 86%, white); }
.graphite-grid .secondary { color: var(--text-soft); background: transparent; border: 1px solid var(--border-strong); }
.graphite-grid .secondary:hover { color: var(--cyan); background: var(--accent-soft); border-color: var(--cyan); }
.graphite-grid .danger { color: var(--red); background: transparent; border: 1px solid color-mix(in srgb, var(--red) 48%, var(--border)); }
.graphite-grid .danger:hover { background: var(--danger-soft); border-color: var(--red); }

.graphite-grid :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 36px;
  padding: 8px 10px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 3px !important;
  outline: 0;
  font-size: 11px;
}
.graphite-grid textarea { min-height: 92px; line-height: 1.5; }
.graphite-grid :is(input, select, textarea):focus { border-color: var(--cyan) !important; outline: 1px solid var(--cyan); outline-offset: -1px; }
.graphite-grid label { color: var(--muted); }
.graphite-grid .section-kicker,
.graphite-grid .picker-label { color: var(--cyan); font: 400 8px/1 var(--mono); letter-spacing: .12em; }
.graphite-grid .form-note { color: var(--muted); font-size: 10px; line-height: 1.5; }

/* Flat regions: no card inside card -------------------------------------- */
.graphite-grid .card,
.graphite-grid .messages-ledger,
.graphite-grid .message-workspace-inspector,
.graphite-grid .worker-stage,
.graphite-grid .reports-stage,
.graphite-grid .integration-card,
.graphite-grid .settings-stage .settings-panel > .card,
.graphite-grid .device-aux-grid > .card {
  margin: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0 !important;
}
.graphite-grid .card + .card,
.graphite-grid .device-aux-grid > .card + .card { border-top: 0; }
.graphite-grid .card-head,
.graphite-grid .content-head,
.graphite-grid .settings-stage .card-head {
  min-height: 58px;
  padding: 12px 0;
  background: transparent;
  border-bottom: 1px solid var(--border);
}
.graphite-grid .card-head h2,
.graphite-grid .content-head h2,
.graphite-grid .settings-toolbar h2 { margin: 4px 0 0; font-size: 14px; font-weight: 500; letter-spacing: 0; }
.graphite-grid .card-head p { margin-top: 4px; font-size: 10px; }
.graphite-grid .status-chip,
.graphite-grid .scanning-label,
.graphite-grid .direction-chip,
.graphite-grid .actor-badge,
.graphite-grid .assign-badge,
.graphite-grid .pool-state,
.graphite-grid .method,
.graphite-grid .segment-chip,
.graphite-grid .modem-status-badge {
  min-height: 21px;
  padding: 4px 7px;
  color: var(--lime);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--lime) 42%, var(--border));
  border-radius: 2px !important;
  font: 400 8px/1.2 var(--mono);
  letter-spacing: .06em;
}
.graphite-grid .empty-state {
  margin: 0;
  padding: 20px 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--border);
  border-radius: 0 !important;
  font: 400 10px/1.6 var(--mono);
  text-align: left;
}

/* Command page ------------------------------------------------------------ */
.graphite-grid .command-telemetry,
.graphite-grid .metrics,
.graphite-grid .summary-strip,
.graphite-grid .msg4wrd-metrics,
.graphite-grid .kpi-row {
  display: grid;
  gap: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-block: 1px solid var(--border-strong);
  border-radius: 0 !important;
}
.graphite-grid .command-telemetry { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.graphite-grid .command-telemetry article {
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: center;
  gap: 5px 8px;
  min-height: 91px;
  padding: 13px 17px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border);
}
.graphite-grid .command-telemetry article:first-child { padding-left: 0; }
.graphite-grid .command-telemetry article:last-child { border-right: 0; }
.graphite-grid .command-telemetry article > [data-icon] { display: none; }
.graphite-grid .command-telemetry article > div { display: contents; }
.graphite-grid .command-telemetry strong {
  grid-row: 2;
  color: var(--text);
  font: 500 27px/1 var(--mono);
  letter-spacing: -.04em;
}
.graphite-grid .command-telemetry em { color: var(--muted); font-size: 13px; }
.graphite-grid .command-telemetry div > span {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
  color: var(--muted);
  font: 400 8px/1 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.graphite-grid .command-grid { padding-top: 18px; }
.graphite-grid .command-main {
  display: grid;
  grid-template-columns: minmax(430px, .82fr) minmax(540px, 1.18fr);
  align-items: start;
  gap: 0;
}
.graphite-grid .delivery-card { min-width: 0; padding: 0 19px 18px 0; border: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border-strong); }
.graphite-grid .command-traffic-card { min-width: 0; padding: 0 0 18px 19px; border-bottom: 1px solid var(--border-strong); }
.graphite-grid .delivery-heading,
.graphite-grid .command-traffic-head { min-height: 45px; padding: 0 0 10px; }
.graphite-grid .delivery-heading h2,
.graphite-grid .command-traffic-head h2 { font-size: 13px; font-weight: 500; }
.graphite-grid .delivery-heading p,
.graphite-grid .command-traffic-head p { margin-top: 4px; color: var(--muted); font-size: 9px; }
.graphite-grid .delivery-trace { padding: 18px 0 10px; }
.graphite-grid .delivery-node { width: 24px; height: 24px; border-radius: 2px !important; }
.graphite-grid .delivery-node > i { width: 5px; height: 5px; border-radius: 0 !important; }
.graphite-grid .delivery-step strong { font-size: 10px; font-weight: 500; }
.graphite-grid .delivery-step small { font-size: 8px; }
.graphite-grid .delivery-modem { margin: 8px 0 0; padding: 9px 0 0; background: transparent; border: 0; border-top: 1px solid var(--border); }
.graphite-grid .command-traffic-head { border: 0; }
.graphite-grid .command-traffic-controls { padding: 0; border-block: 0; }
.graphite-grid .traffic-filter-tabs { gap: 14px; min-height: 38px; border: 0; }
.graphite-grid .traffic-filter-tabs button { min-height: 38px; padding: 0 1px; font-size: 9px; font-weight: 400; }
.graphite-grid .traffic-search { min-width: 165px; }
.graphite-grid .traffic-search input { height: 29px; font-size: 9px; }
.graphite-grid .command-traffic-table th,
.graphite-grid .message-table th,
.graphite-grid .report-table th,
.graphite-grid .settings-data-table th,
.graphite-grid .contact-table th {
  height: 36px;
  padding: 8px 10px;
  color: var(--muted);
  background: transparent;
  border-bottom: 1px solid var(--border);
  font: 400 8px/1 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.graphite-grid .command-traffic-table td { height: 49px; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 9px; }
.graphite-grid .command-traffic-table tbody tr:hover,
.graphite-grid .message-table tbody tr:hover td,
.graphite-grid .report-table tbody tr:hover,
.graphite-grid .settings-data-table tbody tr:hover { background: color-mix(in srgb, var(--cyan) 6%, transparent); }
.graphite-grid .command-traffic-table tbody tr.selected,
.graphite-grid .message-table tbody tr.selected,
.graphite-grid .msg4wrd-history-table tbody tr.selected { background: color-mix(in srgb, var(--cyan) 8%, transparent); border-left: 0; box-shadow: inset 2px 0 0 var(--cyan); }
.graphite-grid .command-traffic-foot { min-height: 45px; padding: 10px 0 0; color: var(--muted); font: 400 8px/1 var(--mono); }

/* Tables, tabs and pagination -------------------------------------------- */
.graphite-grid .page .tabs[role="tablist"] {
  min-height: 45px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.graphite-grid .page .tabs[role="tablist"] > .tab {
  min-height: 45px;
  height: 45px;
  padding: 0 14px;
  color: var(--muted);
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  font-size: 10px;
  font-weight: 400;
}
.graphite-grid .page .tabs[role="tablist"] > .tab:first-child { padding-left: 2px; }
.graphite-grid .page .tabs[role="tablist"] > .tab.active { color: var(--cyan); border-bottom-color: var(--cyan) !important; }
.graphite-grid .tab-panel { padding: 0; }
.graphite-grid :is(.message-table, .report-table, .settings-data-table, .contact-table) { border-collapse: collapse; }
.graphite-grid .message-table td,
.graphite-grid .report-table td,
.graphite-grid .settings-data-table td,
.graphite-grid .contact-table td { padding: 11px 10px; border-bottom: 1px solid var(--border); font-size: 10px; line-height: 1.4; }
.graphite-grid .message-status,
.graphite-grid .job-state,
.graphite-grid .audit-kind,
.graphite-grid .call-state {
  width: max-content;
  padding: 4px 6px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 2px !important;
  font: 400 8px/1.1 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.graphite-grid .pager,
.graphite-grid .msg4wrd-pagination {
  min-height: 48px;
  padding: 8px 0;
  color: var(--muted);
  background: transparent;
  border-top: 1px solid var(--border);
  font: 400 8px/1 var(--mono);
}
.graphite-grid .pager-nav button,
.graphite-grid .msg4wrd-pagination-nav button {
  min-width: 28px;
  min-height: 28px;
  padding: 5px 7px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 2px !important;
  font: 400 8px/1 var(--mono);
}
.graphite-grid .pager-nav button:hover:not(:disabled),
.graphite-grid .msg4wrd-pagination-nav button:hover:not(:disabled) { color: var(--cyan); border-color: var(--cyan); }
.graphite-grid .pager-size select,
.graphite-grid .msg4wrd-pagination select { min-height: 28px; padding-block: 4px; font-size: 8px; }

/* Messages --------------------------------------------------------------- */
.graphite-grid .messages-workspace { display: block; min-height: 0; background: transparent; border: 0; }
.graphite-grid .messages-ledger { border-top: 0; }
.graphite-grid .messages-stream-tabs { margin-bottom: 0 !important; }
.graphite-grid .messages-ledger-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.graphite-grid .page .messages-ledger-head .messages-stream-tabs { flex: 1 1 auto; width: auto; }
.graphite-grid .messages-ledger-head .table-toolbar { flex: 0 0 auto; min-height: 60px; margin-left: auto; padding: 8px 0; border: 0; }
.graphite-grid .messages-ledger-head .table-toolbar label { white-space: nowrap; font-size: var(--gg-label); }
.graphite-grid .messages-ledger-head .table-toolbar select { width: 180px; min-height: var(--gg-control-height); font-size: var(--gg-support); }
.graphite-grid .messages-ledger .message-table { background: transparent; }
.graphite-grid .messages-ledger .message-table td { vertical-align: middle; }
.graphite-grid .messages-ledger .message-table .cell-sim .sim-number {
  color: var(--text);
  line-height: 1.35;
}
.graphite-grid .messages-ledger .message-table .cell-sim .sim-number.muted { color: var(--muted); }
.graphite-grid .messages-ledger .message-table .cell-status {
  align-content: center;
  justify-items: start;
}
.graphite-grid .messages-ledger .message-table .cell-status .message-status {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-height: 23px;
  line-height: 1;
  white-space: nowrap;
}
.graphite-grid .messages-ledger .message-table .cell-status .spinner {
  display: block;
  margin: 0;
}
.graphite-grid .row-actions,
.graphite-grid .row-buttons,
.graphite-grid .call-actions,
.graphite-grid .msg4wrd-actions { gap: 5px; }
.graphite-grid :is(button, a).command-icon-action,
.graphite-grid button.worker-action-icon,
.graphite-grid button.traffic-more,
.graphite-grid button.matrix-add {
  width: 31px;
  min-width: 31px;
  height: 31px;
  min-height: 31px;
  padding: 6px;
  color: var(--muted);
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 3px !important;
}
.graphite-grid :is(button, a).command-icon-action:hover,
.graphite-grid button.worker-action-icon:hover,
.graphite-grid button.traffic-more:hover { color: var(--cyan); border-color: var(--cyan) !important; }
.graphite-grid .command-tooltip { padding: 6px 8px; background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 3px !important; font-size: 9px; }

/* Settings, modems and routing ------------------------------------------ */
.graphite-grid .settings-workspace { display: block; overflow: visible; background: transparent; border: 0; }
.graphite-grid .settings-navigation {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 20px;
  min-height: 45px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.graphite-grid .settings-navigation .workspace-rail-head { align-self: center; padding: 8px 0; }
.graphite-grid .settings-navigation .workspace-rail-head h2 { margin: 4px 0 0; font-size: 13px; font-weight: 500; }
.graphite-grid .settings-navigation .workspace-rail-head p,
.graphite-grid .workspace-rail-status { display: none; }
.graphite-grid .settings-navigation .settings-tabs { width: auto; min-height: 44px; margin: 0; border: 0; }
.graphite-grid .settings-stage { padding: 16px 0 0; background: transparent; }
.graphite-grid .settings-stage .settings-toolbar {
  align-items: flex-end;
  min-height: 66px;
  margin: 0;
  padding: 0 0 14px;
  border-bottom: 0;
}
.graphite-grid .settings-stage .settings-toolbar p { margin-top: 4px; font-size: 10px; }
.graphite-grid .summary-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.graphite-grid .page .summary-strip > div {
  min-height: 69px;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border);
}
.graphite-grid .page .summary-strip > div:first-child { padding-left: 0; }
.graphite-grid .page .summary-strip > div:last-child { border-right: 0; }
.graphite-grid .summary-strip span { color: var(--muted); font: 400 8px/1 var(--mono); letter-spacing: .1em; }
.graphite-grid .summary-strip strong { color: var(--text); font: 500 15px/1 var(--mono); }
.graphite-grid .device-aux-grid { gap: 0; margin-top: 0; }
.graphite-grid .device-aux-grid .add-modem-form { padding: 15px 0; }
.graphite-grid .modem-row,
.graphite-grid .pool-row,
.graphite-grid .rule-row,
.graphite-grid .call-row,
.graphite-grid .contact-row { min-height: 59px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.graphite-grid .page[data-page="calls"] .call-row {
  grid-template-columns: 112px minmax(180px, 1.15fr) minmax(135px, .8fr) minmax(88px, .55fr) minmax(150px, 1fr);
  gap: 12px;
}
.graphite-grid .page[data-page="calls"] .call-row > * { min-width: 0; }
.graphite-grid .page[data-page="calls"] .call-actions { align-self: center; }
.graphite-grid .page[data-page="calls"] .call-caller strong,
.graphite-grid .page[data-page="calls"] .call-caller small,
.graphite-grid .page[data-page="calls"] .call-automation b,
.graphite-grid .page[data-page="calls"] .call-automation small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.graphite-grid .page[data-page="calls"] .call-pager { padding-inline: 0; }
.graphite-grid .edit-button { min-width: 31px; min-height: 31px; padding: 6px 8px; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 3px !important; font-size: 8px; }
.graphite-grid .discovered-list { gap: 0; padding: 0; }
.graphite-grid .discovered-row { min-height: 55px; padding: 10px 0; background: transparent; border: 0; border-bottom: 1px solid var(--border); }
.graphite-grid .routing-layout { display: block; }
.graphite-grid .automation-view { margin-top: 0; }
.graphite-grid .automation-view .card { border-top: 0; }

/* Workers: exact Graphite Grid table/log treatment ---------------------- */
.graphite-grid .msg4wrd-workspace .worker-summary { margin: 0; }
.graphite-grid .page .worker-summary .msg4wrd-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}
.graphite-grid .page .worker-summary .msg4wrd-metrics article {
  min-height: 85px;
  padding: 13px 17px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border);
}
.graphite-grid .page .worker-summary .msg4wrd-metrics article:first-child { padding-left: 0; }
.graphite-grid .page .worker-summary .msg4wrd-metrics article:last-child { border-right: 0; }
.graphite-grid .page .worker-summary .msg4wrd-metrics article > span { color: var(--muted); font: 400 8px/1 var(--mono); letter-spacing: .1em; }
.graphite-grid .page .worker-summary .msg4wrd-metrics strong { margin: 7px 0 4px; font: 500 23px/1 var(--mono); }
.graphite-grid .page .worker-summary .msg4wrd-metrics small { color: var(--muted); font: 400 8px/1 var(--mono); letter-spacing: .06em; }
.graphite-grid .msg4wrd-workspace .worker-stage { border-top: 0; }
.graphite-grid .msg4wrd-token-entry { display: flex; gap: 8px; margin-top: 6px; }
.graphite-grid .msg4wrd-token-entry input { flex: 1 1 auto; min-width: 0; }
.graphite-grid .msg4wrd-token-entry button { flex: 0 0 auto; }
.graphite-grid .msg4wrd-qr-scanner { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border); }
.graphite-grid .msg4wrd-qr-scanner[hidden] { display: none; }
.graphite-grid .msg4wrd-qr-scanner video { width: 100%; max-height: 230px; object-fit: cover; background: #000; }
.graphite-grid .msg4wrd-qr-scanner p { margin: 0; color: var(--muted); font-size: 12px; }
.graphite-grid .msg4wrd-qr-scanner button { justify-self: start; }
.graphite-grid .msg4wrd-stage-head {
  display: flex;
  align-items: stretch;
  min-width: 0;
  border-bottom: 0;
}
.graphite-grid .msg4wrd-stage-head > .tabs {
  flex: 0 0 auto;
  width: auto;
  min-height: 46px;
  padding: 0;
  border-bottom: 0;
}
.graphite-grid .msg4wrd-stage-head .msg4wrd-tab-toolbar {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
  min-height: 46px;
  margin-left: auto;
  padding: 5px 0;
  border-bottom: 0;
}
.graphite-grid .msg4wrd-stage-head .msg4wrd-search-field { flex: 0 1 220px; min-width: 150px; max-width: 220px; }
.graphite-grid .msg4wrd-stage-head .msg4wrd-tab-toolbar > label:not(.msg4wrd-search-field) { flex: 0 1 135px; min-width: 112px; }
.graphite-grid .msg4wrd-stage-head .msg4wrd-view-toggle { gap: 5px; border: 0; }
.graphite-grid .msg4wrd-stage-head :is(.msg4wrd-toolbar-icon, .msg4wrd-view-button) {
  display: inline-grid;
  flex: 0 0 var(--gg-control-height);
  width: var(--gg-control-height);
  min-width: var(--gg-control-height);
  height: var(--gg-control-height);
  min-height: var(--gg-control-height);
  padding: 8px;
  place-items: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px !important;
}
.graphite-grid .msg4wrd-stage-head .msg4wrd-view-button:last-child { border-right: 1px solid var(--border); }
.graphite-grid .msg4wrd-stage-head .msg4wrd-view-button.active { color: var(--rail); background: var(--cyan); border-color: var(--cyan); }
.graphite-grid .msg4wrd-stage-head :is(.msg4wrd-toolbar-icon, .msg4wrd-view-button) svg { width: 16px; height: 16px; }
.graphite-grid .msg4wrd-directory-toolbar {
  min-height: 54px;
  gap: 7px;
  padding: 9px 0;
  background: transparent;
  border-bottom: 1px solid var(--border);
}
.graphite-grid .msg4wrd-directory-toolbar input,
.graphite-grid .msg4wrd-directory-toolbar select,
.graphite-grid .msg4wrd-search-field { min-height: 33px; background: transparent; border-color: var(--border); border-radius: 3px !important; font: 400 9px/1 var(--mono); }
.graphite-grid .msg4wrd-search-field { height: 33px; padding: 0 9px; }
.graphite-grid .msg4wrd-search-field input { min-height: 31px; }
.graphite-grid .msg4wrd-view-toggle { gap: 1px; padding: 0; background: transparent; border: 1px solid var(--border); border-radius: 3px !important; }
.graphite-grid .msg4wrd-view-button { min-height: 31px; padding: 5px 8px; border-right: 1px solid var(--border); border-radius: 0 !important; font-size: 9px; font-weight: 400; }
.graphite-grid .msg4wrd-view-button:last-child { border-right: 0; }
.graphite-grid .msg4wrd-view-button.active { color: var(--rail); background: var(--cyan); }
.graphite-grid .msg4wrd-refresh-button { min-height: 33px; }
.graphite-grid .msg4wrd-directory-table thead th,
.graphite-grid .msg4wrd-history-table thead th { height: 36px; padding: 8px 10px; background: transparent; font: 400 8px/1 var(--mono); letter-spacing: .08em; }
.graphite-grid .msg4wrd-directory-table thead th { text-align: left; }
.graphite-grid .msg4wrd-directory-table td,
.graphite-grid .msg4wrd-history-table td { padding: 11px 10px; font-size: 10px; }
.graphite-grid .msg4wrd-worker-state { font: 400 9px/1 var(--mono); letter-spacing: .03em; }
.graphite-grid .msg4wrd-worker-state > i { width: 7px; height: 7px; border-radius: 0 !important; }
.graphite-grid .msg4wrd-worker-state.online > i::after,
.graphite-grid .msg4wrd-worker-state.syncing > i::after { inset: -3px; border-radius: 0 !important; }
.graphite-grid .msg4wrd-worker-main strong,
.graphite-grid .msg4wrd-worker-routing b,
.graphite-grid .msg4wrd-worker-bindings b,
.graphite-grid .msg4wrd-job-row strong,
.graphite-grid .msg4wrd-job-row b { font-size: 10px; font-weight: 500; }
.graphite-grid .msg4wrd-worker-main small,
.graphite-grid .msg4wrd-worker-status small,
.graphite-grid .msg4wrd-worker-routing small,
.graphite-grid .msg4wrd-worker-bindings small,
.graphite-grid .msg4wrd-traffic small,
.graphite-grid .msg4wrd-job-row small { font: 400 8px/1.4 var(--mono); }
.graphite-grid .msg4wrd-log-view { min-height: 340px; background: transparent; }
.graphite-grid .msg4wrd-log-head { min-height: 40px; padding: 9px 10px; background: var(--surface); font: 400 9px/1 var(--mono); }
.graphite-grid .msg4wrd-log-row { min-height: 35px; padding: 8px 10px; font-size: 9px; }
.graphite-grid .msg4wrd-log-row.latest { background: color-mix(in srgb, var(--cyan) 7%, transparent); border-left: 2px solid var(--cyan); }
.graphite-grid .msg4wrd-history-detail-drawer { padding: 12px 10px; background: transparent; }

/* Reports and integrations ---------------------------------------------- */
.graphite-grid .report-control-rail {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  min-height: 62px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
}
.graphite-grid .report-control-rail .workspace-rail-head { align-self: center; min-width: 150px; }
.graphite-grid .report-control-rail .workspace-rail-head h2 { margin: 4px 0 0; font-size: 13px; font-weight: 500; }
.graphite-grid .report-control-rail .workspace-rail-head p { display: none; }
.graphite-grid .report-filters { flex: 1; justify-content: flex-end; }
.graphite-grid .report-control-rail .preset-group { min-height: 39px; border: 0; }
.graphite-grid .report-control-rail .preset-group button { min-height: 39px; padding-inline: 9px; font-size: 9px; font-weight: 400; }
.graphite-grid .reports-stage { border-top: 0; }
.graphite-grid .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.graphite-grid .page .kpi-row > .kpi { min-height: 73px; padding: 12px 16px; background: transparent; border: 0; border-right: 1px solid var(--border); }
.graphite-grid .page .kpi-row > .kpi:last-child { border-right: 0; }
.graphite-grid .kpi strong { font: 500 21px/1 var(--mono); }
.graphite-grid .chart-card,
.graphite-grid .report-section,
.graphite-grid .report-item {
  padding: 15px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0 !important;
}
.graphite-grid .report-item { padding: 11px 0; border-bottom: 1px solid var(--border); }
.graphite-grid .integration-card { border-top: 0; }
.graphite-grid .integration-card > .integration-panel { padding: 16px 0; }
.graphite-grid .form-surface { gap: 14px; padding: 0 0 0 20px; background: transparent; border: 0; border-left: 1px solid var(--border); }
.graphite-grid .code-block { margin: 14px 0; background: transparent; border: 0; border-block: 1px solid var(--border); }

/* Boolean controls: every checkbox is represented as a compact toggle. */
.graphite-grid .check:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 9px 0;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.graphite-grid .check > input[type="checkbox"],
.graphite-grid .country-toggle > input[type="checkbox"],
.graphite-grid .country-chip > input[type="checkbox"],
.graphite-grid .modem-pick > input[type="checkbox"],
.graphite-grid .msg4wrd-binding input[type="checkbox"] {
  position: relative !important;
  display: inline-block !important;
  flex: 0 0 34px;
  order: 2;
  width: 34px !important;
  height: 18px !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  overflow: visible;
  appearance: none;
  opacity: 1 !important;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: 3px !important;
  cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease;
}

.graphite-grid .check > input[type="checkbox"]::after,
.graphite-grid .country-toggle > input[type="checkbox"]::after,
.graphite-grid .country-chip > input[type="checkbox"]::after,
.graphite-grid .modem-pick > input[type="checkbox"]::after,
.graphite-grid .msg4wrd-binding input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  background: var(--muted);
  border-radius: 2px !important;
  transition: transform .14s ease, background-color .14s ease;
}

.graphite-grid .check > input[type="checkbox"]:checked,
.graphite-grid .country-toggle > input[type="checkbox"]:checked,
.graphite-grid .country-chip > input[type="checkbox"]:checked,
.graphite-grid .modem-pick > input[type="checkbox"]:checked,
.graphite-grid .msg4wrd-binding input[type="checkbox"]:checked { background: var(--accent-soft); border-color: var(--cyan); }

.graphite-grid .check > input[type="checkbox"]:checked::after,
.graphite-grid .country-toggle > input[type="checkbox"]:checked::after,
.graphite-grid .country-chip > input[type="checkbox"]:checked::after,
.graphite-grid .modem-pick > input[type="checkbox"]:checked::after,
.graphite-grid .msg4wrd-binding input[type="checkbox"]:checked::after { background: var(--cyan); transform: translateX(16px); }

.graphite-grid .check > input[type="checkbox"]:disabled,
.graphite-grid .country-toggle > input[type="checkbox"]:disabled,
.graphite-grid .country-chip > input[type="checkbox"]:disabled,
.graphite-grid .modem-pick > input[type="checkbox"]:disabled,
.graphite-grid .msg4wrd-binding input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .45 !important; }

.graphite-grid .country-toggle,
.graphite-grid .country-chip,
.graphite-grid .modem-pick,
.graphite-grid .msg4wrd-binding > label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0 !important;
}
.graphite-grid .country-toggle > span,
.graphite-grid .country-chip > span,
.graphite-grid .modem-pick > span,
.graphite-grid .msg4wrd-binding label > span { order: 1; min-width: 0; }
.graphite-grid .country-toggle:has(input:checked),
.graphite-grid .country-chip:has(input:checked),
.graphite-grid .modem-pick:has(input:checked) { background: color-mix(in srgb, var(--cyan) 5%, transparent); }

.graphite-grid .switch,
.graphite-grid .modem-toggle {
  position: relative;
  display: block;
  flex: 0 0 36px;
  width: 36px;
  height: 20px;
}
.graphite-grid .switch > input,
.graphite-grid .modem-toggle > input { position: absolute; width: 1px !important; height: 1px !important; margin: 0 !important; opacity: 0; }
.graphite-grid .switch > span,
.graphite-grid .modem-toggle > span {
  position: absolute;
  inset: 0;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: 3px !important;
}
.graphite-grid .switch > span::after,
.graphite-grid .modem-toggle > span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  background: var(--muted);
  border-radius: 2px !important;
  transition: transform .14s ease, background-color .14s ease;
}
.graphite-grid .switch > input:checked + span,
.graphite-grid .modem-toggle > input:checked + span { background: var(--accent-soft); border-color: var(--cyan); }
.graphite-grid .switch > input:checked + span::after,
.graphite-grid .modem-toggle > input:checked + span::after {
  left: 3px;
  background: var(--cyan);
  transform: translateX(16px);
}
.graphite-grid .switch > input:focus-visible + span,
.graphite-grid .modem-toggle > input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* Dialogs and forms ------------------------------------------------------- */
.graphite-grid dialog,
.graphite-grid .channel-dialog,
.graphite-grid #confirmDialog,
.graphite-grid #msg4wrdWorkerDialog,
.graphite-grid .call-dialog,
.graphite-grid .login-card {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 4px !important;
}
.graphite-grid dialog::backdrop { background: var(--overlay); backdrop-filter: none; }
.graphite-grid .dialog-form { padding: 0; }
.graphite-grid .dialog-head {
  min-height: 68px;
  margin: 0;
  padding: 16px 20px;
  background: transparent;
  border-bottom: 1px solid var(--border);
}
.graphite-grid .dialog-head h3 { margin: 5px 0 0; font-size: 18px; font-weight: 500; }
.graphite-grid .dialog-head p { margin-top: 5px; color: var(--muted); font-size: 10px; }
.graphite-grid .dialog-form > :not(.dialog-head):not(.dialog-actions):not(.rule-wizard-grid):not(.msg4wrd-wizard-grid):not(.compose-command-layout):not(input[type="hidden"]) { margin-inline: 20px; }
.graphite-grid .dialog-actions {
  min-height: 58px;
  margin: 0;
  padding: 11px 20px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.graphite-grid .two-col,
.graphite-grid .three-col { gap: 12px; }
.graphite-grid .detail-item,
.graphite-grid .call-settings,
.graphite-grid .rule-review-item,
.graphite-grid .rule-test,
.graphite-grid .msg4wrd-review-box,
.graphite-grid .msg4wrd-target-card,
.graphite-grid .msg4wrd-choice-fieldset,
.graphite-grid .msg4wrd-binding,
.graphite-grid .modem-info-note,
.graphite-grid .modem-nested-fields,
.graphite-grid .message-full,
.graphite-grid .compose-context {
  padding: 12px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0 !important;
}
.graphite-grid .rule-step-rail,
.graphite-grid .msg4wrd-step-rail,
.graphite-grid .modem-editor-nav { background: var(--surface-2); border-right: 1px solid var(--border); }
.graphite-grid .rule-step,
.graphite-grid .msg4wrd-step,
.graphite-grid .modem-editor-nav button { border-radius: 0 !important; }
.graphite-grid .rule-step.active,
.graphite-grid .msg4wrd-step.active,
.graphite-grid .modem-editor-nav button[aria-selected="true"] { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 7%, transparent); border-left: 2px solid var(--cyan); }
.graphite-grid .rule-step > span,
.graphite-grid .msg4wrd-step > span { border-radius: 2px !important; }
.graphite-grid .rule-wizard-panel,
.graphite-grid .msg4wrd-wizard-panel { padding: 18px 20px; }
.graphite-grid .modem-dialog-head { padding: 16px 20px; }
.graphite-grid .modem-dialog-head h3 { font-size: 18px; }
.graphite-grid .modem-dialog-section { padding: 18px 20px; }
.graphite-grid .modem-discovered-list .discovered-row { background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0 !important; }
.graphite-grid .detected-device-icon { background: transparent; border-radius: 3px !important; }
.graphite-grid .modem-editor-layout { grid-template-columns: 176px minmax(0, 1fr); }
.graphite-grid .modem-editor-nav { gap: 0; padding: 11px 0; }
.graphite-grid .modem-editor-nav button { min-height: 39px; padding: 8px 12px; border-left: 2px solid transparent; font-size: 10px; font-weight: 400; }
.graphite-grid .modem-editor-panel { padding: 18px 20px 23px; }
.graphite-grid .modem-panel-heading { margin-bottom: 14px; }
.graphite-grid .modem-panel-heading h4 { font-size: 13px; font-weight: 500; }
.graphite-grid .modem-toggle-row { min-height: 58px; padding: 11px 0; }
.graphite-grid .modem-toggle-copy strong { font-size: 10px; font-weight: 500; }
.graphite-grid .modem-toggle-copy small { font-size: 9px; }
.graphite-grid .modem-diagnostics-grid { gap: 0; background: transparent; border: 0; border-top: 1px solid var(--border); }
.graphite-grid .modem-diagnostics-grid .detail-item { border-bottom: 1px solid var(--border); }
.graphite-grid .compose-command-layout { gap: 0; }
.graphite-grid .compose-command-fields { padding: 18px 20px; }
.graphite-grid .compose-preview { padding: 18px 20px; background: var(--surface-2); border-left: 1px solid var(--border); }
.graphite-grid .login-card { padding: 32px; }
.graphite-grid .login-mark { width: 50px; height: 50px; border-radius: 3px !important; }

/* Unified type, spacing and control scale --------------------------------
   The older component layers used several unrelated 8–11px values. Keep
   one readable hierarchy across every route and reserve monospace for data. */
.graphite-grid {
  --gg-micro: 11px;
  --gg-label: 12px;
  --gg-support: 13px;
  --gg-body: 14px;
  --gg-section: 17px;
  --gg-page-title: 26px;
  --gg-control-height: 40px;
  --gg-icon-control: 36px;
  --gg-page-gutter: 24px;
  font-size: var(--gg-body);
  line-height: 1.5;
}

.graphite-grid .rail .nav a .nav-text,
.graphite-grid .nav a { font-size: var(--gg-body); }
.graphite-grid .nav-icon { width: 19px; }
.graphite-grid .nav-icon svg { width: 17px; height: 17px; }
.graphite-grid .nav a::after,
.graphite-grid .brand small,
.graphite-grid .rail-site small,
.graphite-grid .command-location span,
.graphite-grid .section-kicker,
.graphite-grid .picker-label,
.graphite-grid .page-heading .eyebrow,
.graphite-grid .command-telemetry div > span,
.graphite-grid .summary-strip span,
.graphite-grid .page .worker-summary .msg4wrd-metrics article > span,
.graphite-grid :is(.command-traffic-table,.messages-ledger .message-table,.report-table,.settings-data-table,.contact-table) th,
.graphite-grid .msg4wrd-directory-table thead th,
.graphite-grid .msg4wrd-history-table thead th,
.graphite-grid .kpi small { font-size: var(--gg-micro); }
.graphite-grid .rail-site strong,
.graphite-grid .rail-pulse,
.graphite-grid .rail-pulse small,
.graphite-grid .operator-identity small,
.graphite-grid .gateway-status,
.graphite-grid .gateway-status > b { font-size: var(--gg-label); }
.graphite-grid .operator-identity b { font-size: var(--gg-support); }
.graphite-grid .rail-pulse strong,
.graphite-grid .logout { font-size: var(--gg-label); }
.graphite-grid .logout { min-height: var(--gg-control-height); }

.graphite-grid .command-location strong { font-size: 19px; }
.graphite-grid .page { padding: 0 var(--gg-page-gutter) 32px; }
.graphite-grid .page-heading,
.graphite-grid .overview-heading,
.graphite-grid .page:not([data-page="overview"]) .page-heading {
  min-height: 96px;
  padding: 20px 0 17px;
}
.graphite-grid .page-heading h1 { font-size: var(--gg-page-title); line-height: 1.15; }
.graphite-grid .page-heading p,
.graphite-grid .card-head p,
.graphite-grid .settings-stage .settings-toolbar p,
.graphite-grid .form-note,
.graphite-grid .dialog-head p,
.graphite-grid .modem-toggle-copy small { font-size: var(--gg-support); line-height: 1.5; }
.graphite-grid .card-head h2,
.graphite-grid .content-head h2,
.graphite-grid .settings-toolbar h2,
.graphite-grid .delivery-heading h2,
.graphite-grid .command-traffic-head h2,
.graphite-grid .email-intro h2,
.graphite-grid .docs-intro h2 { font-size: var(--gg-section); }

.graphite-grid :is(.primary,.secondary,.danger,.button-link),
.graphite-grid .edit-button,
.graphite-grid .copy-code,
.graphite-grid .preset-group button,
.graphite-grid .traffic-filter-tabs button,
.graphite-grid .msg4wrd-view-button,
.graphite-grid .tabs .tab {
  min-height: var(--gg-control-height);
  padding: 8px 13px;
  font-size: var(--gg-support);
  line-height: 1.25;
}
.graphite-grid .page .tabs[role="tablist"] > .tab {
  min-height: var(--gg-control-height);
  padding: 8px 13px;
  font-size: var(--gg-support);
  line-height: 1.25;
}
.graphite-grid .sort-button { min-height: var(--gg-icon-control); }
.graphite-grid .action-icon,
.graphite-grid :is(.primary,.secondary,.danger,.button-link) [data-icon] { width: 16px; height: 16px; }
.graphite-grid .action-icon svg,
.graphite-grid :is(.primary,.secondary,.danger,.button-link) [data-icon] svg { width: 16px; height: 16px; }
.graphite-grid .theme-toggle,
.graphite-grid .notify-btn,
.graphite-grid .icon-btn {
  width: var(--gg-icon-control);
  min-width: var(--gg-icon-control);
  height: var(--gg-icon-control);
  min-height: var(--gg-icon-control);
}
.graphite-grid :is(button,a).command-icon-action,
.graphite-grid button.worker-action-icon,
.graphite-grid button.traffic-more,
.graphite-grid button.matrix-add {
  width: var(--gg-icon-control);
  min-width: var(--gg-icon-control);
  height: var(--gg-icon-control);
  min-height: var(--gg-icon-control);
  padding: 8px;
}

.graphite-grid :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
  min-height: 40px;
  padding: 9px 11px;
  font-size: var(--gg-body);
  line-height: 1.35;
}
.graphite-grid label { font-size: var(--gg-label); }
.graphite-grid .command-search { height: 38px; }
.graphite-grid .command-search input { height: 36px; font-size: var(--gg-support); }
.graphite-grid .command-search-results > a,
.graphite-grid .command-search-results > button { min-height: 50px; padding: 11px 13px; font-size: var(--gg-body); }
.graphite-grid .command-tooltip { padding: 7px 9px; font-size: var(--gg-label); }

.graphite-grid .card-head,
.graphite-grid .content-head,
.graphite-grid .settings-stage .card-head { min-height: 66px; padding: 14px 0; }
.graphite-grid .status-chip,
.graphite-grid .scanning-label,
.graphite-grid .direction-chip,
.graphite-grid .actor-badge,
.graphite-grid .assign-badge,
.graphite-grid .pool-state,
.graphite-grid .method,
.graphite-grid .segment-chip,
.graphite-grid .modem-status-badge { min-height: 24px; padding: 5px 8px; font-size: var(--gg-micro); }
.graphite-grid .empty-state { padding: 22px 0; font-size: var(--gg-support); line-height: 1.6; }

.graphite-grid .command-telemetry article { min-height: 106px; padding: 16px 20px; }
.graphite-grid .command-telemetry strong { font-size: 30px; }
.graphite-grid .page .summary-strip > div { min-height: 82px; padding: 15px 18px; }
.graphite-grid .summary-strip strong { font-size: 18px; }
.graphite-grid .page .worker-summary .msg4wrd-metrics article { min-height: 96px; padding: 16px 20px; }
.graphite-grid .page .worker-summary .msg4wrd-metrics strong { font-size: 27px; }
.graphite-grid .page .worker-summary .msg4wrd-metrics small { font-size: var(--gg-micro); }

/* Dashboard is always one centered delivery lane followed by live traffic. */
.graphite-grid .command-main { grid-template-columns: minmax(0, 1fr); gap: 0; }
.graphite-grid .delivery-card {
  width: 100%;
  padding: 2px 0 24px;
  border-right: 0;
  border-bottom: 1px solid var(--border-strong);
}
.graphite-grid .delivery-heading { min-height: 58px; padding: 0 0 13px; }
.graphite-grid .delivery-heading p,
.graphite-grid .command-traffic-head p { font-size: var(--gg-support); }
.graphite-grid .delivery-trace {
  width: min(100%, 860px);
  margin: 0 auto;
  padding: 30px 22px 18px;
}
.graphite-grid .delivery-trace > .empty-state { text-align: center; }
.graphite-grid .delivery-step strong { font-size: var(--gg-body); }
.graphite-grid .delivery-step small { max-width: 180px; font-size: var(--gg-label); line-height: 1.45; }
.graphite-grid .delivery-node { width: 30px; height: 30px; }
.graphite-grid .delivery-modem { width: min(100%, 860px); margin: 12px auto 0; padding-top: 12px; }
.graphite-grid .command-traffic-card { width: 100%; padding: 24px 0 20px; }
.graphite-grid .command-traffic-head { min-height: 58px; padding-bottom: 13px; }
.graphite-grid .command-traffic-controls { min-height: 48px; }
.graphite-grid .traffic-filter-tabs { min-height: 46px; gap: 18px; }
.graphite-grid .traffic-filter-tabs button { min-height: 46px; padding-inline: 2px; }
.graphite-grid .traffic-search { min-width: 210px; }
.graphite-grid .traffic-search input { height: 36px; font-size: var(--gg-support); }

.graphite-grid :is(.command-traffic-table,.messages-ledger .message-table,.report-table,.settings-data-table,.contact-table) th,
.graphite-grid .msg4wrd-directory-table thead th,
.graphite-grid .msg4wrd-history-table thead th { height: 42px; padding: 10px 12px; }
.graphite-grid .command-traffic-table td { height: 58px; padding: 10px 12px; font-size: var(--gg-support); }
.graphite-grid .message-table td,
.graphite-grid .report-table td,
.graphite-grid .settings-data-table td,
.graphite-grid .contact-table td,
.graphite-grid .msg4wrd-directory-table td,
.graphite-grid .msg4wrd-history-table td { padding: 13px 12px; font-size: var(--gg-support); line-height: 1.45; }
.graphite-grid .command-traffic-foot,
.graphite-grid .pager,
.graphite-grid .msg4wrd-pagination { min-height: 52px; font-size: var(--gg-label); }
.graphite-grid .pager-nav button,
.graphite-grid .msg4wrd-pagination-nav button { min-width: var(--gg-icon-control); min-height: var(--gg-icon-control); padding: 6px 8px; font-size: var(--gg-label); }
.graphite-grid .pager-size select,
.graphite-grid .msg4wrd-pagination select { min-height: var(--gg-icon-control); font-size: var(--gg-label); }

.graphite-grid .settings-navigation { min-height: 50px; gap: 24px; }
.graphite-grid .settings-navigation .settings-tabs,
.graphite-grid .msg4wrd-workspace .worker-stage > .tabs { min-height: 49px; }
.graphite-grid .settings-stage { padding-top: 20px; }
.graphite-grid .settings-stage .settings-toolbar { min-height: 76px; padding-bottom: 16px; }
.graphite-grid .edit-button { min-width: var(--gg-icon-control); min-height: var(--gg-icon-control); font-size: var(--gg-label); }
.graphite-grid .modem-row,
.graphite-grid .pool-row,
.graphite-grid .rule-row,
.graphite-grid .call-row,
.graphite-grid .contact-row { min-height: 64px; padding: 12px 0; }

.graphite-grid .msg4wrd-directory-toolbar { min-height: 62px; gap: 9px; padding: 11px 0; }
.graphite-grid .msg4wrd-directory-toolbar input,
.graphite-grid .msg4wrd-directory-toolbar select,
.graphite-grid .msg4wrd-search-field { min-height: var(--gg-control-height); font-size: var(--gg-support); }
.graphite-grid .msg4wrd-search-field { height: var(--gg-control-height); padding-inline: 11px; }
.graphite-grid .msg4wrd-search-field input { min-height: 36px; }
.graphite-grid .msg4wrd-view-button,
.graphite-grid .msg4wrd-refresh-button { min-height: var(--gg-control-height); }
.graphite-grid .msg4wrd-worker-state { font-size: var(--gg-label); }
.graphite-grid .msg4wrd-worker-main strong,
.graphite-grid .msg4wrd-worker-routing b,
.graphite-grid .msg4wrd-worker-bindings b,
.graphite-grid .msg4wrd-job-row strong,
.graphite-grid .msg4wrd-job-row b { font-size: var(--gg-body); }
.graphite-grid .msg4wrd-worker-main small,
.graphite-grid .msg4wrd-worker-status small,
.graphite-grid .msg4wrd-worker-routing small,
.graphite-grid .msg4wrd-worker-bindings small,
.graphite-grid .msg4wrd-traffic small,
.graphite-grid .msg4wrd-job-row small { font-size: var(--gg-micro); }
.graphite-grid .msg4wrd-log-head { min-height: 46px; padding: 11px 12px; font-size: var(--gg-label); }
.graphite-grid .msg4wrd-log-row { min-height: 40px; padding: 9px 12px; font-size: var(--gg-label); }

.graphite-grid .report-control-rail { min-height: 70px; }
.graphite-grid .report-control-rail .preset-group,
.graphite-grid .report-control-rail .preset-group button { min-height: var(--gg-control-height); }
.graphite-grid .report-control-rail .preset-group button { font-size: var(--gg-support); }
.graphite-grid .page .kpi-row > .kpi { min-height: 84px; padding: 15px 18px; }
.graphite-grid .kpi strong { font-size: 24px; }
.graphite-grid .dialog-head { min-height: 76px; padding: 18px 22px; }
.graphite-grid .dialog-head h3 { font-size: 20px; }
.graphite-grid .dialog-actions { min-height: 64px; padding: 13px 22px; }
.graphite-grid .modem-editor-nav button { min-height: 44px; padding: 10px 13px; font-size: var(--gg-support); }
.graphite-grid .modem-toggle-copy strong { font-size: var(--gg-body); }

/* Only functional loaders remain circular; all visible containers are 0–5px. */
.graphite-grid :is(.spinner, .msg4wrd-job-spinner) { border-radius: 50% !important; }
.graphite-grid :is(.status-light, .unread-dot, .dot, .gateway-status > i, .msg4wrd-worker-state > i, .modem-status-badge i) { border-radius: 0 !important; }

/* Responsive geometry ---------------------------------------------------- */
@media (max-width: 1250px) {
  .graphite-grid .shell { grid-template-columns: 178px minmax(0, 1fr); }
  .graphite-grid .rail { width: 178px; }
  .graphite-grid .command-main { grid-template-columns: minmax(0, 1fr); }
  .graphite-grid .delivery-card { padding-right: 0; border-right: 0; }
  .graphite-grid .command-traffic-card { padding: 18px 0 0; }
  .graphite-grid .gateway-status > b { display: none; }
  .graphite-grid .command-location { flex-basis: 205px; }
  .graphite-grid .report-control-rail { align-items: stretch; flex-direction: column; gap: 0; padding: 11px 0 0; }
  .graphite-grid .report-filters { justify-content: flex-start; }
}

@media (max-width: 980px) and (min-width: 901px) {
  .graphite-grid .shell { grid-template-columns: 150px minmax(0, 1fr); }
  .graphite-grid .rail { width: 150px; }
  .graphite-grid .nav a { padding-inline: 10px; }
  .graphite-grid .command-location { flex-basis: 180px; min-width: 150px; }
}

@media (max-width: 900px) {
  .graphite-grid .shell { display: block; }
  .graphite-grid .rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: 210px;
    height: 100dvh;
    visibility: hidden;
    transform: translateX(-101%);
    transition: transform .18s ease, visibility .18s;
  }
  .graphite-grid.navigation-open .rail { visibility: visible; transform: translateX(0); }
  .graphite-grid .navigation-scrim { background: var(--overlay); }
  .graphite-grid .mobile-menu { display: grid; }
  .graphite-grid .command-location { flex: 0 1 160px; min-width: 120px; }
  .graphite-grid .gateway-status { margin-left: 0; padding-left: 0; border-left: 0; }
  .graphite-grid .gateway-status > span { display: none; }
  .graphite-grid .command-telemetry,
  .graphite-grid .page .worker-summary .msg4wrd-metrics,
  .graphite-grid .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .graphite-grid .page .kpi-row > .kpi:nth-child(n) { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .graphite-grid .command-telemetry article:nth-child(2n),
  .graphite-grid .page .worker-summary .msg4wrd-metrics article:nth-child(2n),
  .graphite-grid .page .kpi-row > .kpi:nth-child(2n) { border-right: 0; }
  .graphite-grid .command-telemetry article:nth-child(-n+2),
  .graphite-grid .page .worker-summary .msg4wrd-metrics article:nth-child(-n+2),
  .graphite-grid .page .kpi-row > .kpi:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .graphite-grid .page .kpi-row > .kpi:nth-last-child(-n+2) { border-bottom: 0; }
  .graphite-grid .settings-navigation { align-items: stretch; flex-direction: column; gap: 0; padding-top: 10px; }
  .graphite-grid .settings-navigation .settings-tabs { width: 100%; }
  .graphite-grid .form-surface { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--border); }
}

@media (max-width: 700px) {
  .graphite-grid .topbar { gap: 8px; height: 64px; padding: 0 12px; }
  .graphite-grid .command-location { display: none; }
  .graphite-grid .command-search { position: static; flex: 1; width: auto; }
  .graphite-grid .command-search-results { top: 65px; right: 12px; width: calc(100vw - 24px); }
  .graphite-grid .gateway-status { flex: 0 0 6px; }
  .graphite-grid .page { min-height: calc(100vh - 64px); padding: 0 12px 20px; }
  .graphite-grid .page-heading,
  .graphite-grid .overview-heading,
  .graphite-grid .page:not([data-page="overview"]) .page-heading { min-height: 75px; padding: 13px 0 12px; }
  .graphite-grid .page-heading h1 { font-size: 19px; }
  .graphite-grid .page-heading p { font-size: var(--gg-support); }
  .graphite-grid .heading-actions { align-self: flex-start; }
  .graphite-grid .heading-actions .secondary { display: none; }
  .graphite-grid .command-telemetry article { min-height: 76px; padding: 11px 10px; }
  .graphite-grid .command-telemetry article:first-child { padding-left: 10px; }
  .graphite-grid .command-telemetry strong { font-size: 22px; }
  .graphite-grid .delivery-card { padding-bottom: 15px; }
  .graphite-grid .command-traffic-card { padding-top: 15px; }
  .graphite-grid .command-traffic-controls { align-items: stretch; flex-direction: column; }
  .graphite-grid .traffic-search { width: 100%; }
  .graphite-grid .summary-strip { grid-template-columns: 1fr; }
  .graphite-grid .page .summary-strip > div { padding: 12px; border-right: 0; border-bottom: 1px solid var(--border); }
  .graphite-grid .page .summary-strip > div:first-child { padding-left: 12px; }
  .graphite-grid .page .summary-strip > div:last-child { border-bottom: 0; }
  .graphite-grid .settings-stage .settings-toolbar { align-items: flex-start; }
  .graphite-grid .settings-toolbar-actions {
    display: grid;
    align-self: stretch;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    width: 100%;
    margin-top: 9px;
  }
  .graphite-grid .settings-toolbar-actions > button { width: 100%; justify-content: flex-start; }
  .graphite-grid .settings-toolbar-actions { align-items: stretch; flex-direction: column; }
  .graphite-grid .report-filters { align-items: stretch; }
  .graphite-grid .report-control-rail .preset-group { width: 100%; overflow-x: auto; }
  .graphite-grid .msg4wrd-directory-toolbar { align-items: stretch; }
  .graphite-grid .msg4wrd-view-toggle { margin-left: 0; }
  .graphite-grid .msg4wrd-pagination { align-items: flex-start; flex-wrap: wrap; }
  .graphite-grid .modem-editor-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .graphite-grid .modem-editor-nav { flex-direction: row; padding: 0; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .graphite-grid .modem-editor-nav button { flex: 0 0 auto; width: auto; border-left: 0; border-bottom: 2px solid transparent; }
  .graphite-grid .modem-editor-nav button[aria-selected="true"] { border-bottom-color: var(--cyan); }
  .graphite-grid .rule-step-rail,
  .graphite-grid .msg4wrd-step-rail { border-right: 0; border-bottom: 1px solid var(--border); }
  .graphite-grid .compose-command-layout { grid-template-columns: 1fr; }
  .graphite-grid .compose-preview { border-left: 0; border-top: 1px solid var(--border); }
}

@media (max-width: 480px) {
  .graphite-grid .command-telemetry,
  .graphite-grid .page .worker-summary .msg4wrd-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .graphite-grid .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .graphite-grid .command-telemetry article,
  .graphite-grid .page .worker-summary .msg4wrd-metrics article { min-height: 96px; padding: 12px; }
  .graphite-grid .page .kpi-row > .kpi:nth-child(n) { min-height: 67px; padding: 12px; border-right: 0; border-bottom: 1px solid var(--border); }
  .graphite-grid .command-telemetry article:first-child,
  .graphite-grid .page .worker-summary .msg4wrd-metrics article:first-child { padding-left: 12px; }
  .graphite-grid .command-telemetry article:last-child,
  .graphite-grid .page .worker-summary .msg4wrd-metrics article:last-child,
  .graphite-grid .page .kpi-row > .kpi:last-child { border-bottom: 0; }
  .graphite-grid .page .tabs[role="tablist"] > .tab { padding-inline: 9px; font-size: var(--gg-label); }
  .graphite-grid .pager,
  .graphite-grid .msg4wrd-pagination { align-items: flex-start; flex-direction: column; }
  .graphite-grid .dialog-head,
  .graphite-grid .dialog-actions,
  .graphite-grid .compose-command-fields,
  .graphite-grid .compose-preview,
  .graphite-grid .rule-wizard-panel,
  .graphite-grid .msg4wrd-wizard-panel,
  .graphite-grid .modem-dialog-section,
  .graphite-grid .modem-editor-panel { padding-inline: 14px; }
  .graphite-grid .dialog-form > :not(.dialog-head):not(.dialog-actions):not(.rule-wizard-grid):not(.msg4wrd-wizard-grid):not(.compose-command-layout):not(input[type="hidden"]) { margin-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .graphite-grid *,
  .graphite-grid *::before,
  .graphite-grid *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Shared alignment contract: navigation and actions always begin on the left. */
.graphite-grid :is(b, strong, h1, h2, h3, h4, h5, h6) { font-weight: 550; }

.graphite-grid .page .tabs[role="tablist"] {
  align-items: stretch;
  justify-content: flex-start;
}
.graphite-grid .page .tabs[role="tablist"] > .tab {
  justify-content: flex-start;
  gap: 8px;
  font-weight: 500;
}
.graphite-grid .page .tabs[role="tablist"] > .tab > [data-icon] {
  display: inline-flex;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}
.graphite-grid .page .tabs[role="tablist"] > .tab > [data-icon] svg { width: 16px; height: 16px; }
.graphite-grid .settings-navigation {
  display: block;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
}
.graphite-grid .settings-navigation .workspace-rail-head { display: none; }
.graphite-grid .settings-navigation .settings-tabs { width: 100%; }

/* One frame per table, flush with its content lane. Cell gutters stay inside. */
.graphite-grid :is(.table-wrap, .settings-table-wrap, .command-traffic-scroll, .matrix-wrap, .msg4wrd-binding-table-wrap, .call-list) {
  margin: 0;
  padding: 0;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--border);
}
.graphite-grid :is(.table-wrap, .settings-table-wrap, .command-traffic-scroll, .matrix-wrap, .msg4wrd-binding-table-wrap) > table {
  margin: 0;
  border: 0;
}
.graphite-grid .msg4wrd-binding-table-wrap { overflow-x: auto; }
.graphite-grid .messages-ledger .message-table :is(th, td) { padding-inline: 12px; }
.graphite-grid :is(.table-wrap, .settings-table-wrap, .command-traffic-scroll, .matrix-wrap) > table > tbody > tr:last-child > :is(th, td),
.graphite-grid :is(.table-wrap, .settings-table-wrap, .command-traffic-scroll, .matrix-wrap) > table > tbody > tr:last-child,
.graphite-grid .call-list > :last-child { border-bottom: 0; }
.graphite-grid :is(.command-traffic-table, .message-table, .report-table, .settings-data-table) td:is(.empty-state, [colspan]),
.graphite-grid .call-list > .empty-state { padding: 16px 12px; border-top: 0; }
.graphite-grid :is(.command-traffic-table, .message-table, .report-table, .settings-data-table) td > .empty-state { margin: 0; padding: 0; border: 0; }
.graphite-grid :is(.messages-ledger, .worker-stage, .reports-stage, .card:has(> .settings-table-wrap), .call-history-card) { border-bottom: 0; }
.graphite-grid :is(.table-wrap, .settings-table-wrap, .command-traffic-scroll, .call-list) + :is(.pager, .settings-table-pager, .command-traffic-foot, .call-pager, .msg4wrd-directory-foot, .msg4wrd-pagination) { border-top: 0; border-bottom: 0; }
.graphite-grid :is(.table-toolbar, .msg4wrd-directory-toolbar, .card-head):has(+ :is(.table-wrap, .settings-table-wrap, .call-list)) { border-bottom: 0; }
.graphite-grid .page[data-page="calls"] .call-list > .call-row { padding-inline: 12px; }

/* Labeled mobile rows keep the same frame and gutter without nested cell padding. */
@media (max-width: 680px) {
  .graphite-grid .settings-data-table tbody tr,
  .graphite-grid .messages-ledger .message-table tbody tr:not(.empty-row) { padding-inline: 12px; }
  .graphite-grid .settings-data-table tbody tr td,
  .graphite-grid .messages-ledger .message-table tbody tr:not(.empty-row) td { padding: 0; border: 0; }
  .graphite-grid .settings-data-table tbody tr:has(td.empty-state) { padding: 0; }
  .graphite-grid .settings-data-table tbody tr:has(td.empty-state) td.empty-state { padding: 16px 12px; }
}
@media (max-width: 700px) {
  .graphite-grid .command-traffic-table tbody tr { padding-inline: 12px; }
  .graphite-grid .command-traffic-table tbody td { height: auto; padding: 0; border: 0; }
  .graphite-grid .command-traffic-table tbody tr:has(td[colspan]) { padding: 0; }
}
.graphite-grid .matrix-wrap + .matrix-note { padding-top: 12px; }
.graphite-grid .report-section:has(> .table-wrap) {
  margin: 0;
  padding: 0;
}
.graphite-grid .report-section:has(> .table-wrap) > .report-section-head { padding-top: 15px; }

.graphite-grid :is(.row-actions, .row-buttons, .call-actions, .msg4wrd-table-actions, .traffic-actions),
.graphite-grid .hook-row > .col-actions {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}
.graphite-grid :is(th, td).col-actions,
.graphite-grid .msg4wrd-directory-table .col-actions,
.graphite-grid .msg4wrd-job-row .col-actions { text-align: left !important; white-space: nowrap; }
.graphite-grid .msg4wrd-directory-table .col-actions { width: 164px; }
.graphite-grid .msg4wrd-table-actions { min-width: 0; }

.graphite-grid .page-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px 24px;
}
.graphite-grid .page-heading > :first-child { min-width: 0; }
.graphite-grid .page-heading > :not(:first-child) {
  grid-column: 2;
  justify-self: end;
}
.graphite-grid .heading-actions,
.graphite-grid .settings-toolbar-actions {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: auto;
  max-width: 100%;
  margin: 0 0 0 auto;
  overflow-x: auto;
}
.graphite-grid .settings-stage .settings-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 20px;
}
.graphite-grid .settings-stage .settings-toolbar > :first-child { min-width: 0; }
.graphite-grid .settings-stage .settings-toolbar > :is(button, .settings-toolbar-actions) {
  grid-column: 2;
  justify-self: end;
}
.graphite-grid .settings-stage .settings-toolbar > button { position: static; inset: auto; margin-left: auto; }

.graphite-grid .delivery-heading {
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.graphite-grid .delivery-heading > :first-child { flex: 1 0 100%; }

.graphite-grid .msg4wrd-directory-toolbar { justify-content: flex-start; }
.graphite-grid .msg4wrd-toolbar-spacer { display: none; }
.graphite-grid .msg4wrd-directory-toolbar .msg4wrd-refresh-button { order: -3; margin-left: 0 !important; }
.graphite-grid .msg4wrd-directory-toolbar .msg4wrd-view-toggle { order: -2; margin-left: 0; }
.graphite-grid .report-filters,
.graphite-grid .audit-filters { justify-content: flex-start; }
.graphite-grid .report-control-rail #reportRefresh {
  order: -1;
  width: auto;
  margin-left: 0;
}
.graphite-grid .report-section-head {
  align-items: center;
  justify-content: space-between;
}
.graphite-grid .report-section-head > :first-child { flex: 1 1 240px; min-width: 0; }
.graphite-grid .audit-filters #auditExport { order: -1; }
.graphite-grid .app-card > .app-panel { padding-top: 20px; }
.general-portal-form { display: grid; grid-template-columns: minmax(0,1fr) 120px; gap: 12px; align-items: end; max-width: 920px; }
.general-portal-form label, .port4wrd-form label, .port4wrd-add-domain label { display: grid; gap: 7px; min-width: 0; color: var(--muted); font: 550 11px var(--sans); letter-spacing: .3px; }
.general-portal-form input, .port4wrd-form input, .port4wrd-form select, .port4wrd-add-domain input { width: 100%; min-width: 0; height: 40px; padding: 9px 12px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 3px; font: 13px var(--sans); color-scheme: inherit; }
.general-portal-form button, .port4wrd-form button, .port4wrd-add-domain > button:not(.port4wrd-cancel) { height: 40px; min-height: 40px; width: 120px; padding-inline: 12px; }
.general-local-address { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; max-width: 920px; margin-top: 13px; color: var(--muted); font-size: 12px; }
.general-local-address a, .port4wrd-auto a { color: var(--cyan); overflow-wrap: anywhere; font-family: var(--mono); }
.port4wrd-settings { max-width: 920px; min-width: 0; margin-top: 26px; padding-top: 23px; border-top: 1px solid var(--border-strong); }
.port4wrd-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 23px; }
.port4wrd-heading h2 { margin: 0 0 5px; font-size: 20px; }
.port4wrd-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.port4wrd-status { display: inline-flex; align-items: center; gap: 7px; padding-top: 5px; color: var(--muted); font-size: 12px; }
.port4wrd-status::before { content: ''; width: 9px; height: 9px; border: 1px solid currentColor; border-radius: 50%; }
.port4wrd-status[data-status="connected"], .port4wrd-public .connected { color: var(--lime); }
.port4wrd-status[data-status="failed"] { color: var(--red); }
.port4wrd-status[data-status="connecting"], .port4wrd-status[data-status="reconnecting"] { color: var(--cyan); }
.port4wrd-form, .port4wrd-add-domain { display: grid; grid-template-columns: minmax(0,1fr) 260px 120px; gap: 12px; align-items: end; }
.port4wrd-add-domain { margin-top: 18px; }
.port4wrd-add-domain > span { padding-bottom: 10px; color: var(--muted); font-size: 13px; }
.port4wrd-add-domain .port4wrd-cancel { grid-column: 3; justify-self: end; background: transparent; border: 0; color: var(--muted); padding: 4px 0; min-height: 28px; }
.port4wrd-public { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 20px; padding-block: 16px; border-block: 1px solid var(--border); }
.port4wrd-public > div { display: grid; gap: 5px; min-width: 0; }
.port4wrd-label { color: var(--muted); font: 550 11px var(--sans); letter-spacing: .3px; }
.port4wrd-public a { color: var(--cyan); font: 13px/1.6 var(--mono); overflow-wrap: anywhere; }
.address-actions { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.address-actions a { min-width: 0; overflow-wrap: anywhere; }
.address-actions a[href]:hover { text-decoration: underline; }
.graphite-grid button.address-copy { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 5px; }
.graphite-grid button.address-copy svg { width: 14px; height: 14px; }
.graphite-grid button.address-copy:disabled { opacity: .4; cursor: default; }
.port4wrd-public > span { font-size: 12px; color: var(--muted); flex-shrink: 0; }
.port4wrd-auto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 18px; padding-top: 14px; font-size: 12px; color: var(--muted); }
.port4wrd-auto strong { color: var(--text); font-weight: 400; }
.port4wrd-dns { padding: 18px 0; border-bottom: 1px solid var(--border); }
.port4wrd-dns-heading h3 { margin: 0 0 4px; font-size: 14px; }
.port4wrd-dns-heading p, .port4wrd-dns-note { margin: 0; font-size: 12px; color: var(--muted); }
.port4wrd-dns dl, .port4wrd-details dl { display: grid; gap: 9px; margin: 16px 0; }
.port4wrd-dns dl > div, .port4wrd-details dl > div { display: grid; grid-template-columns: 140px minmax(0,1fr); align-items: baseline; gap: 16px; }
.port4wrd-dns dt, .port4wrd-details dt { color: var(--muted); font-size: 12px; }
.port4wrd-dns dd, .port4wrd-details dd { min-width: 0; margin: 0; font-size: 12px; overflow-wrap: anywhere; }
.port4wrd-dns dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-family: var(--mono); }
.port4wrd-dns code, .port4wrd-details code { color: var(--text); font: 12px var(--mono); overflow-wrap: anywhere; }
.port4wrd-dns dd button { min-height: 30px; padding: 4px 9px; font-size: 11px; }
.port4wrd-details { margin-top: 18px; padding-top: 13px; border-top: 1px solid var(--border); }
.port4wrd-details summary { width: fit-content; color: var(--muted); font-size: 12px; cursor: pointer; }
body[data-cap-settings="view"] :is(#port4wrdGenerate, #port4wrdDomainForm) { display: none !important; }
@media (max-width: 700px) {
  .port4wrd-form, .port4wrd-add-domain { grid-template-columns: minmax(0,1fr) 120px; }
  .port4wrd-subdomain, .port4wrd-add-domain > span { grid-column: 1 / -1; }
  .port4wrd-add-domain > span { padding-bottom: 0; }
  .port4wrd-add-domain .port4wrd-cancel { grid-column: 2; }
}
@media (max-width: 420px) {
  .port4wrd-form, .port4wrd-add-domain, .general-portal-form { grid-template-columns: minmax(0,1fr); }
  .port4wrd-form button, .port4wrd-add-domain > button, .general-portal-form button { justify-self: end; }
  .port4wrd-add-domain .port4wrd-cancel { grid-column: 1; }
  .port4wrd-dns dl > div, .port4wrd-details dl > div { grid-template-columns: minmax(0,1fr); gap: 3px; }
  .general-portal-form input, .port4wrd-form input, .port4wrd-form select, .port4wrd-add-domain input { font-size: 16px; }
}
@media (pointer: coarse) {
  .general-portal-form :is(input,button), .port4wrd-form :is(input,select,button), .port4wrd-add-domain :is(input,button), .port4wrd-dns dd button { min-height: 44px; }
  .port4wrd-details summary { padding-block: 8px; }
}
.graphite-grid .email-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 16px;
}
.graphite-grid .email-intro > h2 { grid-column: 1; grid-row: 1; }
.graphite-grid .email-intro > p { grid-column: 1; grid-row: 2; }
.graphite-grid .email-intro > :is(.primary, .status-chip) {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: end;
}
.graphite-grid .endpoint-row { padding-inline: 14px; }
.graphite-grid .code-block > div,
.graphite-grid .message-full-head { justify-content: flex-start; gap: 12px; }

.graphite-grid .dialog-actions,
.graphite-grid .dialog-actions.end,
.graphite-grid #messageDialog .dialog-actions,
.graphite-grid .modem-editor-actions { justify-content: flex-end !important; }
.graphite-grid .dialog-actions-end {
  display: inline-flex;
  flex: 0 0 auto;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  margin-left: auto !important;
}
.graphite-grid .modem-dialog-actions .dialog-actions-end { order: initial; }
.graphite-grid .dialog-actions > :is(#deleteChannel, #deletePool, #deleteUserButton, #deleteContactButton, #deleteMSG4wrdWorker, #deleteRule, [data-delete-message]) {
  order: 0;
  width: auto;
  margin-right: auto;
}
.graphite-grid .dialog-actions > .modem-dialog-footnote { margin-right: auto; }
.graphite-grid .dialog-actions,
.graphite-grid .dialog-actions-end { overflow-x: auto; }
.graphite-grid .command-labeled-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.graphite-grid button,
.graphite-grid th,
.graphite-grid label,
.graphite-grid legend,
.graphite-grid .gateway-status > span,
.graphite-grid .command-telemetry div > span,
.graphite-grid .eyebrow,
.graphite-grid .section-kicker,
.graphite-grid .heading-note,
.graphite-grid .status-chip,
.graphite-grid .health-strip,
.graphite-grid .message-status,
.graphite-grid .job-state,
.graphite-grid .audit-kind,
.graphite-grid .call-state,
.graphite-grid .kpi-label,
.graphite-grid .monitor-meta,
.graphite-grid .availability span,
.graphite-grid .modem-cell span,
.graphite-grid .route-member span:last-child { text-transform: none !important; }
.graphite-grid .message-status {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  white-space: nowrap;
}
.graphite-grid .message-status > .spinner { display: block; margin: 0; }

.graphite-grid .call-orbit > span {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--cyan);
  line-height: 0;
  transform: translate(-50%, -50%);
}
.graphite-grid .call-dialog .call-orbit {
  position: relative;
  display: grid;
  align-self: center;
  margin: 20px auto 0 !important;
  place-items: center;
}
.graphite-grid .call-orbit > span svg { display: block; width: 26px; height: 26px; }

.graphite-grid .active-call-chip {
  position: fixed;
  top: 86px;
  right: 20px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: min(270px, calc(100vw - 40px));
  min-height: 52px;
  padding: 8px 12px 8px 9px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 4px !important;
  box-shadow: var(--shadow);
  text-align: left;
  text-transform: none !important;
}
.graphite-grid .active-call-chip[hidden] { display: none !important; }
.graphite-grid .active-call-chip:hover { color: var(--text); background: var(--surface-2); border-color: var(--cyan); }
.graphite-grid .active-call-chip-icon {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--cyan);
  background: var(--accent-soft);
  border: 1px solid var(--cyan);
  border-radius: 50% !important;
}
.graphite-grid .active-call-chip-icon svg { display: block; width: 17px; height: 17px; }
.graphite-grid .active-call-chip-copy { min-width: 0; }
.graphite-grid .active-call-chip-copy strong,
.graphite-grid .active-call-chip-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.graphite-grid .active-call-chip-copy strong { font-size: 11px; font-weight: 500; }
.graphite-grid .active-call-chip-copy small { margin-top: 4px; color: var(--muted); font: 400 8px/1.2 var(--mono); letter-spacing: .05em; }

@media (max-width: 1240px) {
  .graphite-grid .page[data-page="calls"] .call-row {
    grid-template-columns: 112px minmax(180px, 1fr) minmax(135px, .8fr);
  }
}

@media (max-width: 1050px) {
  .graphite-grid .msg4wrd-stage-head { flex-wrap: wrap; }
  .graphite-grid .msg4wrd-stage-head > .tabs { flex: 1 0 100%; border-bottom: 1px solid var(--border); }
  .graphite-grid .msg4wrd-stage-head .msg4wrd-tab-toolbar { flex: 1 0 100%; justify-content: flex-start; margin-left: 0; padding-block: 8px; }
}

@media (max-width: 700px) {
  .graphite-grid .active-call-chip { top: 76px; right: 12px; width: min(260px, calc(100vw - 24px)); }
  .graphite-grid .page-heading { grid-template-columns: minmax(0, 1fr); }
  .graphite-grid .page-heading > :not(:first-child) {
    grid-column: 1;
    justify-self: end;
  }
  .graphite-grid .heading-actions .secondary { display: inline-flex; }
  .graphite-grid .heading-actions { justify-content: flex-end; flex-wrap: wrap; margin-left: auto; overflow: visible; }
  .graphite-grid .settings-stage .settings-toolbar { grid-template-columns: minmax(0, 1fr); }
  .graphite-grid .settings-stage .settings-toolbar > :is(button, .settings-toolbar-actions) {
    grid-column: 1;
    justify-self: end;
  }
  .graphite-grid .settings-toolbar-actions {
    align-self: flex-end;
    flex-flow: row wrap;
    width: auto;
    margin: 0 0 0 auto;
    overflow: visible;
  }
  .graphite-grid .settings-toolbar-actions > button { width: auto; }
  .graphite-grid .page[data-page="calls"] .call-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .graphite-grid .page[data-page="calls"] .call-row > .call-actions { grid-column: 1 / -1; grid-row: 1; justify-content: flex-start; max-width: none; }
  .graphite-grid .page[data-page="calls"] .call-row > .call-actions button { width: 34px; }
  .graphite-grid .page[data-page="calls"] .call-caller { grid-column: 1; grid-row: 2; }
  .graphite-grid .page[data-page="calls"] .call-status { grid-column: 2; grid-row: 2; justify-self: end; text-align: right; }
  .graphite-grid .page[data-page="calls"] .call-pager { align-items: flex-start; }
  .graphite-grid .msg4wrd-stage-head .msg4wrd-tab-toolbar { flex-wrap: wrap; }
  .graphite-grid .msg4wrd-stage-head .msg4wrd-search-field { flex: 1 1 190px; max-width: none; }
  .graphite-grid .msg4wrd-stage-head .msg4wrd-tab-toolbar > label:not(.msg4wrd-search-field) { flex: 1 1 130px; }
}

@media (min-width: 901px) {
  .graphite-grid .shell { position: relative; }
  .graphite-grid .rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 100;
    height: 100dvh;
    background: var(--rail);
  }
  .graphite-grid .main {
    position: relative;
    z-index: 1;
    grid-column: 2;
    min-width: 0;
  }
}

/* MSG4wrd worker: tabbed sections with shared right-aligned controls. */
.graphite-grid #msg4wrdWorkerDialog.msg4wrd-inline-dialog { width: min(840px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; --msg4wrd-select-width: 300px; --msg4wrd-routing-width: 186px; }
#msg4wrdWorkerDialog .msg4wrd-worker-form { height: min(720px, calc(100dvh - 34px)); max-height: calc(100dvh - 34px); display: flex; flex-direction: column; gap: 0; overflow: hidden; }
#msg4wrdWorkerDialog .msg4wrd-inline-head { flex: 0 0 auto; align-items: flex-start; padding: 20px 26px; }
#msg4wrdWorkerDialog .msg4wrd-inline-head h3 { margin: 8px 0 4px; font: 500 24px/1.2 var(--sans); }
#msg4wrdWorkerDialog .msg4wrd-inline-head p { margin: 0; font: 400 13px/1.4 var(--sans); color: var(--muted); }
#msg4wrdWorkerDialog .msg4wrd-inline-head .section-kicker { font-size: 10px; }
#msg4wrdWorkerDialog .msg4wrd-settings-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 0 0 auto; margin: 0; padding: 0 26px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
#msg4wrdWorkerDialog .msg4wrd-settings-tabs [role=tab] { min-width: 0; min-height: 46px; padding: 10px 8px; border: 0; border-bottom: 2px solid transparent; border-radius: 0 !important; background: transparent; color: var(--muted); font: 400 13px/1.4 var(--sans); }
#msg4wrdWorkerDialog .msg4wrd-settings-tabs [aria-selected=true] { border-bottom-color: var(--cyan); color: var(--cyan); background: var(--accent-soft); }
#msg4wrdWorkerDialog .msg4wrd-settings-tabs [role=tab]:focus-visible { outline: 2px solid var(--cyan); outline-offset: -4px; }
#msg4wrdWorkerDialog .msg4wrd-inline-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; }
#msg4wrdWorkerDialog .msg4wrd-inline-section { padding: 22px 26px; }
#msg4wrdWorkerDialog .msg4wrd-inline-section h4 { margin: 0 0 10px; font: 500 15px/1.3 var(--sans); color: var(--text); }
#msg4wrdWorkerDialog .msg4wrd-inline-row { display: grid; grid-template-columns: 151px minmax(0, 1fr); align-items: center; gap: 20px; padding: 9px 0; }
#msg4wrdWorkerDialog .msg4wrd-inline-row > label:not(.msg4wrd-routing-control), #msg4wrdWorkerDialog .msg4wrd-inline-label { display: block; margin: 0; font: 400 13px/1.4 var(--sans); color: var(--text-soft); letter-spacing: 0; text-transform: none; }
#msg4wrdWorkerDialog .msg4wrd-inline-row > label small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
#msg4wrdWorkerDialog .msg4wrd-inline-controls { display: flex; align-items: center; gap: 8px; min-width: 0; }
#msg4wrdWorkerDialog .msg4wrd-control-stack { display: grid; min-width: 0; gap: 6px; }
#msg4wrdWorkerDialog .form-note { margin: 0; font: 400 11px/1.45 var(--sans); color: var(--muted); letter-spacing: 0; }
#msg4wrdWorkerDialog :where(input:not([type=checkbox]):not([type=hidden]),select) { min-width: 0; width: 100%; height: 38px; min-height: 38px; padding: 8px 11px; margin: 0; border: 1px solid var(--border-strong); border-radius: 3px; background: var(--surface-2); font: 400 13px/1.4 var(--sans); color: var(--text); }
#msg4wrdWorkerDialog .msg4wrd-inline-controls > :is(input,select) { flex: 1 1 0; }
#msg4wrdWorkerDialog button { text-transform: none; letter-spacing: 0; font-family: var(--sans); }
#msg4wrdWorkerDialog :is(.secondary,.primary) { min-height: 38px; padding: 8px 14px; flex: 0 0 auto; border-radius: 3px; font-size: 13px; }
#msg4wrdWorkerDialog .msg4wrd-inline-segment { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--border-strong); border-radius: 3px; overflow: hidden; }
#msg4wrdWorkerDialog .msg4wrd-inline-segment button { min-height: 36px; border: 0; border-radius: 0; padding: 6px 11px; background: var(--surface-2); color: var(--muted); font-size: 12px; }
#msg4wrdWorkerDialog .msg4wrd-inline-segment button + button { border-left: 1px solid var(--border-strong); }
#msg4wrdWorkerDialog .msg4wrd-inline-segment button[aria-pressed=true] { background: var(--accent-soft); color: var(--cyan); }
#msg4wrdWorkerDialog .msg4wrd-inline-segment button:disabled { opacity: .5; cursor: not-allowed; }
#msg4wrdWorkerDialog #msg4wrdDeviceUID { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; font: 400 12px/1.6 var(--mono); color: var(--text-soft); }
#msg4wrdWorkerDialog .msg4wrd-auto-badge { padding: 3px 7px; border: 1px solid var(--border); border-radius: 3px; color: var(--muted); font-size: 10px; }
#msg4wrdWorkerDialog .copy-code { padding: 4px 6px; font-size: 10px; flex: 0 0 auto; }
#msg4wrdWorkerDialog .msg4wrd-inline-row > select { width: var(--msg4wrd-select-width); max-width: 100%; justify-self: end; }
#msg4wrdWorkerDialog .msg4wrd-destination-controls { display: grid; grid-template-columns: minmax(0, var(--msg4wrd-routing-width)) var(--msg4wrd-select-width); width: calc(var(--msg4wrd-routing-width) + 8px + var(--msg4wrd-select-width)); max-width: 100%; justify-self: end; }
#msg4wrdWorkerDialog .msg4wrd-destination-controls > select { width: var(--msg4wrd-select-width); }
#msg4wrdWorkerDialog .msg4wrd-destination-controls > .msg4wrd-routing-control { min-width: 0; min-height: 38px; }
#msg4wrdWorkerDialog :is(.msg4wrd-routing-control,.msg4wrd-binding-action) { position: relative; display: flex; align-items: center; gap: 8px; margin: 0; font: 400 13px/1.4 var(--sans); color: var(--text-soft); letter-spacing: 0; text-transform: none; cursor: pointer; }
#msg4wrdWorkerDialog .msg4wrd-inline-controls > .msg4wrd-routing-control { flex: 0 0 186px; }
#msg4wrdWorkerDialog :is(.msg4wrd-routing-control,.msg4wrd-binding-action) input[type=checkbox] { position: absolute; left: 0; width: 36px; height: 38px; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
#msg4wrdWorkerDialog .msg4wrd-switch-track { position: relative; display: inline-block; width: 34px; height: 19px; flex: 0 0 34px; border: 1px solid var(--border-strong); border-radius: 20px !important; background: var(--surface-3); }
#msg4wrdWorkerDialog .msg4wrd-switch-track::after { content: ''; position: absolute; width: 13px; height: 13px; top: 2px; left: 2px; border-radius: 50% !important; background: var(--muted); transition: transform .15s ease; }
#msg4wrdWorkerDialog input:checked + .msg4wrd-switch-track { background: var(--cyan); border-color: var(--cyan); }
#msg4wrdWorkerDialog input:checked + .msg4wrd-switch-track::after { transform: translateX(15px); background: var(--bg); }
#msg4wrdWorkerDialog input:focus-visible + .msg4wrd-switch-track { outline: 2px solid var(--cyan); outline-offset: 3px; }
#msg4wrdWorkerDialog .msg4wrd-inbound-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#msg4wrdWorkerDialog #msg4wrdBindingCount { font-size: 12px; color: var(--muted); }
#msg4wrdWorkerDialog .msg4wrd-binding-table { width: 100%; border-collapse: collapse; table-layout: auto; text-align: left; }
#msg4wrdWorkerDialog .msg4wrd-binding-table th { padding: 10px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); color: var(--muted); font: 400 12px/1.4 var(--sans); letter-spacing: 0; text-transform: none; white-space: nowrap; }
#msg4wrdWorkerDialog .msg4wrd-binding-table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 12px; }
#msg4wrdWorkerDialog .msg4wrd-binding-table tbody tr:last-child td { border-bottom: 0; }
#msg4wrdWorkerDialog .msg4wrd-binding-action { gap: 6px; font-size: 11px; white-space: nowrap; }
#msg4wrdWorkerDialog .msg4wrd-table-country button { padding: 4px 8px; font-size: 11px; min-height: 28px; }
#msg4wrdWorkerDialog .msg4wrd-table-modem { max-width: 220px; overflow-wrap: anywhere; }
#msg4wrdWorkerDialog .msg4wrd-table-modem b { font-weight: 500; }
#msg4wrdWorkerDialog .msg4wrd-table-modem small { display: block; color: var(--muted); font-size: 10px; }
#msg4wrdWorkerDialog .msg4wrd-table-number { font: 400 11px/1.4 var(--mono); overflow-wrap: anywhere; }
#msg4wrdWorkerDialog .msg4wrd-table-status { display: inline-flex; align-items: center; gap: 5px; color: var(--lime); white-space: nowrap; }
#msg4wrdWorkerDialog .msg4wrd-table-status::before { content: ''; width: 5px; height: 5px; border-radius: 50% !important; background: currentColor; }
#msg4wrdWorkerDialog .msg4wrd-table-status.offline { color: var(--muted); }
#msg4wrdWorkerDialog .msg4wrd-binding-empty { color: var(--muted); line-height: 1.5; }
#msg4wrdWorkerDialog .msg4wrd-inline-inbound > .form-note { margin-top: 9px; }
#msg4wrdWorkerDialog .msg4wrd-inline-footer { flex: 0 0 auto; padding: 16px 26px; gap: 16px; justify-content: space-between; background: var(--surface-2); }
#msg4wrdWorkerDialog #msg4wrdFooterStatus { font: 400 12px/1.4 var(--sans); color: var(--muted); }
#msg4wrdWorkerDialog .msg4wrd-inline-error { margin: 0; padding: 10px 26px; flex: 0 0 auto; font-size: 12px; }
#msg4wrdWorkerDialog [hidden] { display: none !important; }
@media (max-width: 800px) {
  .graphite-grid #msg4wrdWorkerDialog.msg4wrd-inline-dialog { --msg4wrd-select-width: 240px; --msg4wrd-routing-width: 160px; }
}
@media (max-width: 700px) {
  #msg4wrdWorkerDialog .msg4wrd-inline-row { grid-template-columns: 126px minmax(0, 1fr); gap: 12px; }
  #msg4wrdWorkerDialog :is(.msg4wrd-inline-head,.msg4wrd-inline-section,.msg4wrd-inline-footer,.msg4wrd-inline-error) { padding-inline: 18px; }
  #msg4wrdWorkerDialog .msg4wrd-settings-tabs { padding-inline: 18px; }
  #msg4wrdWorkerDialog .msg4wrd-inline-controls > .msg4wrd-routing-control { flex-basis: 157px; font-size: 12px; }
  #msg4wrdWorkerDialog .msg4wrd-binding-label { display: none; }
}
@media (max-width: 650px) {
  #msg4wrdWorkerDialog .msg4wrd-inline-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #msg4wrdWorkerDialog .msg4wrd-inline-row > label:has(+ .msg4wrd-control-stack) { padding-top: 0; }
}
@media (max-width: 540px) {
  .graphite-grid #msg4wrdWorkerDialog.msg4wrd-inline-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); --msg4wrd-select-width: clamp(140px, calc(100vw - 194px), 240px); }
  #msg4wrdWorkerDialog .msg4wrd-worker-form { height: min(720px, calc(100dvh - 18px)); max-height: calc(100dvh - 18px); }
  #msg4wrdWorkerDialog .msg4wrd-inline-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #msg4wrdWorkerDialog .msg4wrd-inline-row > label small { display: inline; margin-left: 6px; }
  #msg4wrdWorkerDialog .msg4wrd-inline-controls { flex-wrap: wrap; }
  #msg4wrdWorkerDialog .msg4wrd-inline-controls > .msg4wrd-routing-control { flex: 1 1 100%; }
  #msg4wrdWorkerDialog :where(input:not([type=checkbox]):not([type=hidden]),select) { font-size: 16px; }
  #msg4wrdWorkerDialog .msg4wrd-destination-controls { width: 100%; grid-template-columns: minmax(0, 1fr) var(--msg4wrd-select-width); }
  #msg4wrdWorkerDialog .msg4wrd-destination-controls > .msg4wrd-routing-control { font-size: 11px; min-height: 44px; }
  #msg4wrdWorkerDialog .msg4wrd-settings-tabs { padding-inline: 10px; }
  #msg4wrdWorkerDialog .msg4wrd-settings-tabs [role=tab] { font-size: 12px; padding-inline: 4px; }
  #msg4wrdWorkerDialog .msg4wrd-inline-footer { flex-direction: column; align-items: stretch; gap: 8px; }
  #msg4wrdWorkerDialog .dialog-actions-end { justify-content: flex-end; }
  #msg4wrdWorkerDialog .msg4wrd-binding-table, #msg4wrdWorkerDialog .msg4wrd-binding-table tbody { display: block; }
  #msg4wrdWorkerDialog .msg4wrd-binding-table thead { display: none; }
  #msg4wrdWorkerDialog .msg4wrd-binding-table tr { display: grid; grid-template-columns: 1fr 1fr; padding: 12px; border-bottom: 1px solid var(--border); }
  #msg4wrdWorkerDialog .msg4wrd-binding-table tbody tr:last-child { border-bottom: 0; }
  #msg4wrdWorkerDialog .msg4wrd-binding-table td { padding: 6px 0; border: 0; }
  #msg4wrdWorkerDialog .msg4wrd-binding-table td:nth-child(3) { grid-column: 1 / -1; grid-row: 1; max-width: none; }
  #msg4wrdWorkerDialog .msg4wrd-binding-table td:nth-child(5) { text-align: right; }
  #msg4wrdWorkerDialog .msg4wrd-binding-table td:nth-child(2) { justify-self: end; }
  #msg4wrdWorkerDialog .msg4wrd-binding-table td[colspan] { grid-column: 1 / -1; }
  #msg4wrdWorkerDialog .msg4wrd-binding-label { display: inline; }
}
@media (pointer: coarse) {
  #msg4wrdWorkerDialog :is(.msg4wrd-inline-segment button,.secondary,.primary) { min-height: 44px; }
  #msg4wrdWorkerDialog :is(.msg4wrd-binding-action,.msg4wrd-routing-control) { min-height: 44px; }
  #msg4wrdWorkerDialog :is(.msg4wrd-routing-control,.msg4wrd-binding-action) input[type=checkbox] { height: 44px; }
}
@media (prefers-reduced-motion: reduce) { #msg4wrdWorkerDialog .msg4wrd-switch-track::after { transition: none; } }

#msg4wrdWorkerDialog .msg4wrd-inline-row > label:has(+ .msg4wrd-control-stack) { align-self: start; padding-top: 10px; }
#msg4wrdWorkerDialog .copy-code { min-height: 38px; }
@media (max-width: 540px) { #msg4wrdWorkerDialog .msg4wrd-inline-row > label:has(+ .msg4wrd-control-stack) { padding-top: 0; } }

/* Account access is a standalone document, with no dashboard or modal layer. */
.graphite-grid.auth-page { min-width: 0; }
.auth-page .auth-page-main { display: grid; place-items: center; min-height: 100dvh; width: 100%; padding: 40px 24px; }
.auth-page .auth-card { width: min(100%, 420px); padding: 0; background: transparent; border: 0; box-shadow: none; }
.auth-page .auth-brand { padding-bottom: 24px; border-bottom: 1px solid var(--border); margin-bottom: 28px; }
.auth-page .auth-form h2 { font-size: 28px; font-weight: 500; }
.auth-page .auth-form label { font: 400 13px/1.4 var(--sans); color: var(--text-soft); letter-spacing: 0; }
.auth-page .auth-form input { min-height: 44px; font-size: 16px; }
.auth-page .auth-form :is(.primary,.link-button) { text-transform: none; letter-spacing: 0; }
.auth-page .auth-form .link-button { text-align: center; }
.auth-page .auth-notice { margin: 0 0 22px; color: var(--text-soft); font-size: 13px; line-height: 1.5; }
.auth-page [hidden] { display: none !important; }
@media (max-width: 480px) {
  .auth-page .auth-page-main { padding: 28px 20px; }
  .auth-page .auth-form .two-col { grid-template-columns: minmax(0, 1fr); }
}

/* Shared page geometry: summaries, forms, and controls use the same gutters. */
.graphite-grid .page .summary-strip > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 8px;
  min-width: 0;
  min-height: 96px;
  padding: 16px;
}
.graphite-grid .page .summary-strip > div:first-child { padding-left: 16px; }
.graphite-grid .command-telemetry article,
.graphite-grid .page .worker-summary .msg4wrd-metrics article { min-width: 0; min-height: 106px; padding: 16px; }
.graphite-grid .command-telemetry article:first-child,
.graphite-grid .page .worker-summary .msg4wrd-metrics article:first-child { padding-left: 16px; }
.graphite-grid .command-telemetry div > span,
.graphite-grid .summary-strip span,
.graphite-grid .page .worker-summary .msg4wrd-metrics article > span {
  line-height: 1.4;
  letter-spacing: .06em;
  overflow-wrap: anywhere;
}
.graphite-grid .summary-strip strong { font-size: 24px; line-height: 1.2; overflow-wrap: anywhere; }
.graphite-grid .page .kpi-row > .kpi { min-width: 0; border-top: 1px solid var(--border); }
.graphite-grid .page .kpi-row > .kpi:nth-child(-n+3) { border-top: 0; }
.graphite-grid .page .kpi-row > .kpi:nth-child(3n) { border-right: 0; }
.graphite-grid .page > .card + .card { margin-top: 24px; }
.graphite-grid .page .card-head > div { flex: 1 1 auto; min-width: 0; }
.graphite-grid .page .card-head > :is([data-icon], .status-chip) { flex: 0 0 auto; }
.graphite-grid .page :is(.voice-engine-list, .voice-form, .personalization-note) { padding-inline: 0; }
.graphite-grid .voice-form > label:not(.check) { flex: 1 1 220px; min-width: 0; }
.graphite-grid .voice-form > label.check { flex: 1 1 300px; }
/* First-name personalization is one switch and one Save. With no field beside it
   the label must not stretch, or the switch drifts away from its own wording. */
.graphite-grid #personalizationForm > label.check { flex: 0 1 auto; }
.graphite-grid .voice-form > button { flex: 0 0 auto; width: auto; margin-left: auto; }
.graphite-grid .contact-search { flex: 0 1 300px; min-width: 0; }
.graphite-grid .contact-search input { width: 100%; }

/* Search fields have one shared frame, with focus on the whole control. */
.graphite-grid :is(.command-search, .traffic-search, .msg4wrd-search-field) { min-width: 0; }
.graphite-grid .traffic-search { height: var(--gg-control-height); padding: 0 10px; border: 1px solid var(--border); }
.graphite-grid :is(.command-search, .traffic-search, .msg4wrd-search-field) input[type="search"] {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.graphite-grid :is(.command-search, .traffic-search, .msg4wrd-search-field):focus-within {
  border-color: var(--cyan);
  outline: 1px solid var(--cyan);
  outline-offset: -1px;
}
.graphite-grid :is(.command-search, .traffic-search, .msg4wrd-search-field) input[type="search"]:focus { outline: 0; }
.graphite-grid .command-search input::placeholder { color: var(--muted); }
.graphite-grid .heading-actions { flex-wrap: wrap; overflow: visible; }
.graphite-grid .settings-toolbar-actions { flex-wrap: wrap; overflow: visible; }
.graphite-grid .page :is(.pager-nav, .msg4wrd-pagination-nav) { flex-wrap: wrap; gap: 6px; }
.graphite-grid .page :is(.integration-grid, .chart-grid, .report-columns) > * { min-width: 0; }
.graphite-grid .email-intro > p { max-width: 80ch; }
.graphite-grid .docs-intro > div { min-width: 0; }
.graphite-grid .endpoint-row > code { min-width: 0; overflow-wrap: anywhere; }
.graphite-grid .integration-grid .content-head { align-items: flex-start; padding-top: 0; }
.graphite-grid .form-surface h2 { margin: 4px 0 0; font-size: var(--gg-section); }

@media (max-width: 1100px) {
  .graphite-grid .messages-ledger-head .campaign-toolbar { flex-basis: 100%; flex-wrap: wrap; }
  .graphite-grid .settings-stage .automation-toolbar { grid-template-columns: minmax(0, 1fr); }
  .graphite-grid .settings-stage .automation-toolbar > .settings-toolbar-actions { grid-column: 1; justify-self: end; }
}
@media (max-width: 900px) {
  .graphite-grid .page .kpi-row > .kpi:nth-child(n) { border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 0; }
  .graphite-grid .page .kpi-row > .kpi:nth-child(-n+2) { border-top: 0; }
  .graphite-grid .page .kpi-row > .kpi:nth-child(2n) { border-right: 0; }
}
@media (max-width: 700px) {
  .graphite-grid .page .summary-strip > div {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    align-content: center;
    min-height: 64px;
    padding: 12px;
  }
  .graphite-grid .page .summary-strip > div:first-child { padding-left: 12px; }
  .graphite-grid .summary-strip strong { font-size: 20px; text-align: right; }
  .graphite-grid .command-telemetry article,
  .graphite-grid .page .worker-summary .msg4wrd-metrics article { min-height: 100px; padding: 12px; }
  .graphite-grid .command-telemetry article:first-child,
  .graphite-grid .page .worker-summary .msg4wrd-metrics article:first-child { padding-left: 12px; }
  .graphite-grid .command-telemetry article:nth-child(n+3),
  .graphite-grid .page .worker-summary .msg4wrd-metrics article:nth-child(n+3) { border-bottom: 0; }
  .graphite-grid .contact-card .card-head { flex-wrap: wrap; gap: 12px; }
  .graphite-grid .contact-card .card-head > div,
  .graphite-grid .contact-card .contact-search { flex-basis: 100%; }
  .graphite-grid .page .messages-ledger-head .messages-stream-tabs { flex: 1 1 100%; width: 100%; }
  .graphite-grid .page .messages-stream-tabs > .tab {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    padding: 10px 4px;
    gap: 5px;
    font-size: 12px;
    white-space: nowrap;
  }
  .graphite-grid .page .messages-stream-tabs > .tab:first-child { padding-left: 4px; }
  .graphite-grid .page .messages-stream-tabs > .tab > span:last-child { flex: 0 0 auto; min-width: 0; margin-left: 0; padding: 2px 4px; }
  .graphite-grid .page .tabs.messages-stream-tabs[role="tablist"] > .tab > [data-icon] { display: none; }
  .graphite-grid .report-control-rail .report-filters { gap: 12px; }
  .graphite-grid .report-control-rail .custom-range { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .graphite-grid .report-control-rail .custom-range label { min-width: 0; }
  .graphite-grid .report-control-rail .custom-range input { width: 100%; min-width: 0; }
  .graphite-grid .page .card-head { align-items: flex-start; }
}
@media (max-width: 480px) {
  .graphite-grid .topbar-right .theme-toggle { display: grid; }
  .graphite-grid .command-search kbd { display: none; }
  .graphite-grid .page .email-intro { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .graphite-grid .email-intro > :is(.primary, .status-chip) { grid-column: 1; grid-row: auto; }
  .graphite-grid .report-control-rail .custom-range { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) {
  .graphite-grid .page .tabs[role="tablist"]:has(> .tab:nth-child(3):last-child) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
  .graphite-grid .page .tabs[role="tablist"]:has(> .tab:nth-child(3):last-child) > .tab { min-width: 0; padding-inline: 4px; font-size: 11px; }
  .graphite-grid .page .tabs[role="tablist"]:has(> .tab:nth-child(3):last-child) > .tab > [data-icon] { display: none; }
  .graphite-grid .page .tabs.messages-stream-tabs[role="tablist"] > .tab { display: grid; justify-items: center; gap: 3px; }
  .graphite-grid .page .tabs.messages-stream-tabs[role="tablist"] > .tab > span:last-child { justify-self: center; }
}

/* Campaigns share the message ledger's frames, gutters, and control sizes. */

.graphite-grid .messages-ledger-head .campaign-toolbar { flex: 0 1 auto; flex-wrap: nowrap; max-width: 100%; align-items: center; justify-content: flex-end; gap: 8px; }
.graphite-grid .campaign-toolbar label { margin: 0; }
.graphite-grid .campaign-toolbar .primary { min-height: var(--gg-control-height); padding: 0 14px; }
.graphite-grid .messages-ledger-head .campaign-toolbar select { width: 130px; }
.graphite-grid .campaign-search-field { position: relative; flex: 1 1 200px; min-width: 0; max-width: 240px; }
.graphite-grid .campaign-search-field input { width: 100%; min-height: var(--gg-control-height); }

.graphite-grid .campaign-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 16px;
  border-block: 1px solid var(--border-strong);
}
.graphite-grid .campaign-metrics article { min-width: 0; min-height: 106px; padding: 16px; border-right: 1px solid var(--border); }
.graphite-grid .campaign-metrics article:first-child { padding-left: 16px; }
.graphite-grid .campaign-metrics article:last-child { border-right: 0; }
.graphite-grid .campaign-metrics span { display: block; color: var(--muted); font: 400 var(--gg-label)/1.4 var(--mono); }
.graphite-grid .campaign-metrics strong { display: block; margin: 8px 0 5px; color: var(--text); font: 550 22px/1.2 var(--mono); overflow-wrap: anywhere; }
.graphite-grid .campaign-metrics small { display: block; color: var(--muted); font: 11px/1.5 var(--sans); }

.graphite-grid .campaign-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.graphite-grid .campaign-status.running { color: var(--cyan); }
.graphite-grid .campaign-status.scheduled { color: var(--amber); }
.graphite-grid .campaign-status.completed { color: var(--lime); }
.graphite-grid .campaign-status.cancelled { color: var(--red); }
.graphite-grid .campaign-status.draft { color: var(--muted); }
.graphite-grid .campaign-status > .spinner { display: block; margin: 0; }

.graphite-grid .campaign-progress { width: 100%; max-width: 200px; height: 6px; margin-bottom: 7px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.graphite-grid .campaign-progress > i { display: block; height: 100%; background: var(--cyan); transition: width .3s ease; }
.graphite-grid .campaign-table .cell-progress small { display: block; color: var(--muted); font: 11px/1.6 var(--sans); }
/* Three icon buttons fit on one line; without a width the column shrinks to its
   header and the last action wraps over the campaign name. */
.graphite-grid .campaign-table :is(th, td).col-actions { width: 138px; }
.graphite-grid .messages-ledger .campaign-table { min-width: 1080px; }
.graphite-grid .messages-ledger .campaign-table th:nth-child(2) { width: auto; }
.graphite-grid .messages-ledger .campaign-table th:nth-child(3) { width: 110px; }
.graphite-grid .messages-ledger .campaign-table th:nth-child(4) { width: 90px; }
.graphite-grid .messages-ledger .campaign-table th:nth-child(5) { width: 180px; }
.graphite-grid .messages-ledger .campaign-table th:nth-child(6) { width: 120px; }
.graphite-grid .messages-ledger .campaign-table th:nth-child(7) { width: 180px; }
.graphite-grid .campaign-table .missing { color: var(--red); }

/* New-campaign dialog */
#campaignDialog.campaign-command-dialog { width: min(980px, calc(100vw - 48px)); }
.graphite-grid :is(#campaignDialog, #campaignDetailDialog) { max-height: calc(100dvh - 48px); overflow: hidden; }
.graphite-grid :is(#campaignDialog, #campaignDetailDialog) .dialog-form { max-height: calc(100dvh - 50px); }
.graphite-grid #campaignDialog .dialog-form > .campaign-command-layout,
.graphite-grid #campaignDetailDialog .dialog-form > :is(.campaign-detail-tabs, .campaign-detail-pane) { margin: 0; }
.graphite-grid :is(#campaignDialog, #campaignDetailDialog) .dialog-head { flex: 0 0 auto; }
#campaignDialog .dialog-form { display: flex; flex-direction: column; gap: 0; min-height: 0; padding: 0; }
#campaignDialog .dialog-head { margin: 0; padding: 20px 24px 18px; border-bottom: 1px solid var(--border); }
#campaignDialog .dialog-head h3 { font-size: 22px; line-height: 1.3; }
#campaignDialog .dialog-head p { max-width: 560px; margin: 9px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.graphite-grid .campaign-command-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 0; overflow: auto; }
.graphite-grid .campaign-command-fields { display: grid; align-content: start; gap: 14px; min-width: 0; padding: 20px 24px; }
#campaignDialog .campaign-command-fields label { gap: 8px; color: var(--text-soft); font-size: 12px; font-weight: 550; letter-spacing: 0; }
#campaignDialog .campaign-command-fields :is(input:not([type="checkbox"]), select) { height: 44px; min-height: 44px; padding: 10px 12px; font-size: 13px; }
#campaignDialog #campaignTemplateBlock { display: grid; gap: 12px; }
#campaignDialog .campaign-command-fields textarea { min-height: 120px; padding: 12px 13px; font-size: 14px; line-height: 1.6; }
#campaignDialog .character-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; margin: 0; }
#campaignDialog .character-meter > div { min-width: 0; }
#campaignDialog .form-note { margin: -3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

.graphite-grid .campaign-upload {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px;
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
}
.graphite-grid .campaign-upload.dragging { background: var(--accent-soft); border-color: var(--cyan); }
.graphite-grid .campaign-recipient-source, .graphite-grid .campaign-source-panel, .graphite-grid .campaign-example-content { display: grid; gap: 12px; min-width: 0; }
.graphite-grid .campaign-inline-setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#campaignDialog .campaign-inline-setting select { width: min(260px, 60%); flex: 0 0 auto; }
.graphite-grid .campaign-file-examples summary { cursor: pointer; color: var(--cyan); font-size: 12px; line-height: 1.5; }
.graphite-grid .campaign-example-content { padding-top: 12px; }
.graphite-grid .campaign-example-downloads { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.graphite-grid .campaign-example-downloads a { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; min-height: 40px; padding: 0 12px; text-decoration: none; font-size: 12px; }
.graphite-grid .campaign-example-table { min-width: 360px; }
.graphite-grid .campaign-example-table :is(th, td) { padding: 10px 12px; text-align: left; }
.graphite-grid .campaign-contact-selection { display: flex; align-items: center; gap: 12px; }
.graphite-grid .campaign-contact-selection > span { flex: 1; color: var(--muted); font-size: 12px; }
.graphite-grid .campaign-contacts-wrap { max-height: 260px; overflow: auto; }
.graphite-grid .campaign-contact-table { min-width: 380px; }
.graphite-grid .campaign-contact-table th:first-child { width: 64px; }
.graphite-grid .campaign-contact-table :is(th, td) { padding: 10px 12px; text-align: left; }
#campaignDialog :is(.campaign-contact-selection, .campaign-contact-table) .switch { flex: 0 0 44px; width: 44px; height: 40px; }
#campaignDialog :is(.campaign-contact-selection, .campaign-contact-table) .switch > span { inset: 10px 4px; }
#campaignDialog :is(.campaign-contact-selection, .campaign-contact-table) .switch > input { width: 100% !important; height: 100% !important; padding: 0; }
.graphite-grid .campaign-contact-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.graphite-grid .campaign-contact-pager > div { display: flex; gap: 8px; }
.graphite-grid .campaign-contact-pager button { min-width: 36px; min-height: 32px; padding: 0 8px; }
.graphite-grid .campaign-upload-copy { display: flex; align-items: center; gap: 12px; min-width: 0; }
.graphite-grid .campaign-upload-copy > span { display: grid; place-items: center; color: var(--cyan); }
.graphite-grid .campaign-upload-copy svg { width: 20px; height: 20px; }
.graphite-grid .campaign-upload-copy strong { display: block; color: var(--text); font-size: 14px; font-weight: 550; }
.graphite-grid .campaign-upload-copy small { display: block; margin-top: 4px; color: var(--muted); font: 11px/1.5 var(--sans); }

.graphite-grid .campaign-import-summary { display: grid; gap: 12px; padding: 0; background: transparent; border: 0; }
.graphite-grid .campaign-import-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 12px; }
.graphite-grid .campaign-layout-badge { padding: 4px 10px; color: var(--cyan); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--cyan) 35%, var(--border)); border-radius: 999px; font-size: 11px; font-weight: 550; }
.graphite-grid .campaign-preview-wrap { max-height: 220px; overflow: auto; }
.graphite-grid .campaign-preview-table td { font-size: 12px; }
.graphite-grid .campaign-rejects summary { cursor: pointer; color: var(--amber); font-size: 12px; }
.graphite-grid .campaign-rejects .table-wrap { max-height: 200px; margin-top: 10px; overflow: auto; }

.graphite-grid .campaign-placeholders { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.graphite-grid .campaign-placeholders .chip {
  min-height: 30px;
  padding: 0 11px;
  color: var(--cyan);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--cyan) 30%, var(--border));
  border-radius: 999px;
  font: 500 11px var(--mono);
  cursor: pointer;
}
.graphite-grid .campaign-placeholders .chip:hover { background: var(--surface-3); }

.graphite-grid .campaign-dispatch { display: grid; gap: 16px; margin: 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--border); }
.graphite-grid .campaign-dispatch-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#campaignDialog .campaign-dispatch-head > label:first-child { gap: 4px; }
#campaignDialog .campaign-dispatch-head small { font-size: 12px; font-weight: 400; color: var(--muted); }
#campaignDialog .campaign-dispatch-head .switch { flex: 0 0 44px; width: 44px; height: 44px; }
#campaignDialog .campaign-dispatch-head .switch > span { inset: 12px 4px; }
#campaignDialog .campaign-dispatch-head .switch > input { width: 100% !important; height: 100% !important; padding: 0; }
.graphite-grid .campaign-schedule { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.6fr); gap: 12px; }
.graphite-grid .campaign-schedule .form-note { grid-column: 1 / -1; }
.graphite-grid .campaign-timezone { position: relative; display: grid; align-content: start; gap: 8px; min-width: 0; }
.graphite-grid .campaign-timezone-control { position: relative; }
#campaignDialog .campaign-timezone-control input { width: 100%; padding-right: 44px; }
.graphite-grid .campaign-timezone-control button { position: absolute; inset: 0 0 0 auto; width: 44px; padding: 0; color: var(--muted); background: transparent; border: 0; font-size: 20px; }
.graphite-grid .campaign-timezone-options { position: fixed; inset: auto; margin: 0; box-sizing: border-box; max-height: 200px; overflow: auto; padding: 4px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 4px; box-shadow: 0 8px 24px #0003; }
.graphite-grid .campaign-timezone-options button { display: block; width: 100%; min-height: 40px; padding: 10px 8px; text-align: left; color: var(--text); background: transparent; border: 0; font-size: 13px; overflow-wrap: anywhere; }
.graphite-grid .campaign-timezone-options button:is(:hover, [aria-selected="true"]) { color: var(--cyan); background: var(--accent-soft); }
.graphite-grid .campaign-timezone-options p { margin: 0; padding: 10px 8px; color: var(--muted); font-size: 12px; }

.graphite-grid .campaign-preview { display: flex; flex-direction: column; min-width: 0; padding: 20px 24px; border-left: 1px solid var(--border); }
.graphite-grid .campaign-preview-heading { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.graphite-grid .campaign-preview-heading > span { display: grid; place-items: center; width: 24px; color: var(--cyan); }
.graphite-grid .campaign-preview-heading svg { width: 18px; height: 18px; }
.graphite-grid .campaign-preview-heading strong { display: block; color: var(--text); font-size: 14px; font-weight: 550; }
.graphite-grid .campaign-preview-heading small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.graphite-grid .campaign-preview-facts { display: grid; gap: 12px; padding: 15px 0; }
.graphite-grid .campaign-preview-facts > div { display: grid; gap: 5px; }
.graphite-grid .campaign-preview-facts small { color: var(--muted); font-size: 11px; }
.graphite-grid .campaign-preview-facts strong { color: var(--text-soft); font-size: 12px; font-weight: 550; overflow-wrap: anywhere; }
.graphite-grid .campaign-preview-message { min-height: 110px; padding: 4px 0 4px 16px; color: var(--text); border-left: 2px solid var(--cyan); font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.graphite-grid .campaign-preview-message.empty { color: var(--muted-2); }
.graphite-grid .campaign-preview > p { margin: auto 0 0; padding-top: 14px; color: var(--muted); border-top: 1px solid var(--border); font-size: 11px; line-height: 1.55; }
#campaignDialog .dialog-actions { flex: 0 0 auto; margin: 0; padding: 12px 24px; background: var(--surface); border-top: 1px solid var(--border); }
#campaignDialog .dialog-actions .primary { min-width: 160px; }

/* Campaign detail and audit report */
#campaignDetailDialog.campaign-detail-dialog { width: min(1040px, calc(100vw - 48px)); }
#campaignDetailDialog .dialog-form { display: flex; flex-direction: column; gap: 0; min-height: 0; padding: 0; }
#campaignDetailDialog .dialog-head { margin: 0; padding: 20px 24px 18px; border-bottom: 1px solid var(--border); }
#campaignDetailDialog .dialog-head h3 { font-size: 24px; line-height: 1.2; overflow-wrap: anywhere; }
#campaignDetailDialog .dialog-head p { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.graphite-grid .campaign-detail-tabs { min-height: 52px; padding: 0 20px; border-bottom: 1px solid var(--border); }
.graphite-grid .campaign-detail-pane { min-height: 0; padding: 18px 24px; overflow: auto; }
/* .kpi carries a hard-coded dark panel colour from the base stylesheet that only
   the page-level rules neutralize. This row lives in a dialog, so it restates the
   surface itself; without it the numbers are dark on dark in the light theme. */
.graphite-grid .campaign-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 18px;
  border: 0;
  border-bottom: 1px solid var(--border);
}
.graphite-grid .campaign-kpis > .kpi {
  min-height: 78px;
  padding: 14px 16px;
  color: var(--text);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border);
}
.graphite-grid .campaign-kpis > .kpi:last-child { border-right: 0; }
.graphite-grid .campaign-kpis .kpi-label { color: var(--muted); }
.graphite-grid .campaign-kpis .kpi small { color: var(--muted); }
.graphite-grid .campaign-progress-block { display: grid; gap: 8px; padding: 0; margin-bottom: 18px; background: transparent; border: 0; }
.graphite-grid .campaign-progress-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.graphite-grid .campaign-progress-head strong { color: var(--text); font-size: 13px; font-weight: 550; }
.graphite-grid .campaign-progress-head span { color: var(--muted); font-size: 12px; }
.graphite-grid .campaign-progress-block .campaign-progress { max-width: none; margin: 0; height: 8px; }
.graphite-grid .campaign-recipient-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; padding: 0; border: 0; }
.graphite-grid .campaign-recipient-toolbar > label:last-child { margin-left: auto; }
.graphite-grid .campaign-detail-tabs { flex: 0 0 auto; }
.graphite-grid .campaign-detail-pane .report-table { min-width: 760px; }
.graphite-grid .campaign-recipient-table .cell-body span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
#campaignDetailDialog .dialog-actions { flex: 0 0 auto; margin: 0; padding: 12px 24px; background: var(--surface); border-top: 1px solid var(--border); }

@media (max-width: 900px) {
  .graphite-grid .campaign-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .graphite-grid .campaign-metrics article { padding: 12px; border-bottom: 1px solid var(--border); }
  .graphite-grid .campaign-metrics article:first-child { padding-left: 12px; }
  .graphite-grid .campaign-metrics article:nth-child(2n) { border-right: 0; }
  .graphite-grid .campaign-metrics article:last-child { grid-column: 1 / -1; border-bottom: 0; }
}
@media (max-width: 960px) {
  .graphite-grid .campaign-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .graphite-grid .campaign-kpis > .kpi { border-bottom: 1px solid var(--border); }
  .graphite-grid .campaign-kpis > .kpi:nth-child(2n) { border-right: 0; }
  .graphite-grid .campaign-kpis > .kpi:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .graphite-grid .campaign-command-layout { grid-template-columns: minmax(0, 1fr); }
  .graphite-grid .campaign-preview { border-top: 1px solid var(--border); border-left: 0; }
  .graphite-grid .campaign-schedule { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .graphite-grid .messages-ledger-head .campaign-toolbar { flex-basis: 100%; flex-wrap: wrap; padding: 10px 0 14px; }
  .graphite-grid :is(.campaign-toolbar, .campaign-recipient-toolbar) .campaign-search-field { flex-basis: 100%; max-width: none; }
}
@media (max-width: 680px) {
  .graphite-grid .messages-ledger .campaign-table { min-width: 0; }
  .graphite-grid .messages-ledger .campaign-table tbody tr:not(.empty-row) td:nth-child(n) { grid-column: auto; grid-row: auto; justify-self: stretch; text-align: left; }
  .graphite-grid .messages-ledger .campaign-table tbody tr:not(.empty-row) td:nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
  .graphite-grid .messages-ledger .campaign-table tbody tr:not(.empty-row) td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .graphite-grid .messages-ledger .campaign-table tbody tr:not(.empty-row) td:nth-child(3) { grid-column: 1; grid-row: 3; }
  .graphite-grid .messages-ledger .campaign-table tbody tr:not(.empty-row) td:nth-child(4) { grid-column: 2; grid-row: 3; justify-self: end; text-align: right; }
  .graphite-grid .messages-ledger .campaign-table tbody tr:not(.empty-row) td:nth-child(5) { grid-column: 1 / -1; grid-row: 4; }
  .graphite-grid .messages-ledger .campaign-table tbody tr:not(.empty-row) td:nth-child(6) { grid-column: 1 / -1; grid-row: 5; }
  .graphite-grid .messages-ledger .campaign-table tbody tr:not(.empty-row) td:nth-child(7) { grid-column: 1 / -1; grid-row: 6; }
}
@media (max-width: 600px) {
  #campaignDialog.campaign-command-dialog,
  #campaignDetailDialog.campaign-detail-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  #campaignDialog .dialog-head,
  #campaignDetailDialog .dialog-head { padding: 16px 18px; }
  .graphite-grid .campaign-command-fields,
  .graphite-grid .campaign-preview,
  .graphite-grid .campaign-detail-pane { padding: 16px 18px; }
  .graphite-grid .campaign-upload .secondary { margin-left: auto; }
  .graphite-grid :is(#campaignDialog, #campaignDetailDialog) .dialog-form { max-height: calc(100dvh - 22px); }
  #campaignDialog .campaign-command-fields :is(input:not([type="checkbox"]), select, textarea) { font-size: 16px; }
  #campaignDialog .dialog-actions,
  #campaignDetailDialog .dialog-actions { padding: 11px 18px; }
}
@media (prefers-reduced-motion: reduce) { .graphite-grid .campaign-progress > i { transition: none; } }
@media (max-width: 360px) {
  #campaignDialog .dialog-actions { gap: 8px; }
  #campaignDialog .dialog-actions :is(.primary, .secondary) { min-width: 0; padding-right: 10px; padding-left: 10px; font-size: 12px; }
}

/* Copy, work-in-progress, voice and signal, maintenance ------------------- */

/* The copy action beside a number is a glyph on the number's line, not another
   row control, so it keeps its own compact size inside this theme's icon rules. */
.graphite-grid :is(button, a).number-copy.command-icon-action,
.graphite-grid button.number-copy {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 5px;
  color: var(--muted);
  border: 1px solid transparent !important;
  border-radius: 3px !important;
}
.graphite-grid button.number-copy svg { width: 13px; height: 13px; }
.graphite-grid button.number-copy:hover,
.graphite-grid button.number-copy:focus-visible {
  color: var(--cyan);
  border-color: var(--cyan) !important;
}
.graphite-grid .settings-data-table td .number-with-copy > .number-text,
.graphite-grid .messages-ledger .message-table .cell-number .number-text { color: inherit; font: inherit; }
.graphite-grid .message-card .number-with-copy { max-width: 100%; }
.graphite-grid .traffic-party.number-with-copy,
.graphite-grid .traffic-party > .number-with-copy { overflow: visible; }

.graphite-grid button.is-busy { gap: 7px; }
.graphite-grid button.is-busy > .spinner { width: 11px; height: 11px; }

.graphite-grid .modem-data-table .col-voice small,
.graphite-grid .modem-data-table .col-signal small { color: var(--muted); }
.graphite-grid .modem-data-table .col-signal .signal-bars i { background: var(--border-strong); }
.graphite-grid .modem-data-table .col-signal .signal-bars i.on { background: var(--lime); }

.graphite-grid .maintenance-action { background: var(--surface-2); }
.graphite-grid .maintenance-panel .email-intro .status-chip.off {
  color: var(--amber);
  border-color: var(--amber);
  background: transparent;
}
.graphite-grid .call-voicemail-panel { padding: 16px; border: 1px solid var(--border); display: grid; gap: 12px; }
.graphite-grid .call-voicemail-panel[hidden] { display: none; }
.graphite-grid .call-voicemail-panel p { margin: 0; }
.graphite-grid .call-voicemail-panel audio { width: 100%; }
.graphite-grid .call-voicemail-panel a { justify-self: start; }
.graphite-grid .voicemail-play { margin-top: 8px; }