/* Fleet and Send board screens (fleet-view.js). Brand tokens and base components live in
   /styles.css; follow ../DESIGN.md. Tokens only: no hex, rgb or named colors in this file.
   Spacing is the 4/8px scale (--space-*). Single column under 720px. */

/* ============================== Screen rhythm ============================== */
#fleet-view, #send-view { display: grid; gap: var(--space-4); align-content: start; }
#fleet-view > .panel, #send-view > .panel, #fleet-view > .panel + .panel, #send-view > .panel + .panel { margin-top: 0; }
.panel-title-side { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: flex-end; }

/* ============================== Fleet: summary ============================== */
.fleet-kpis { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.fleet-kpi { min-width: 0; display: flex; }
.fleet-kpi .metric-tile { flex: 1; padding: var(--space-4); }
.fleet-kpi .metric-tile.attention { padding-left: 13px; }
.fleet-kpi .metric-value { font-size: var(--fs-h1); }

/* The warmup engine line: a quiet sunken strip, not a banner. */
.fleet-strip { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-sunken); border: 1px solid var(--border-hair); border-radius: var(--radius-md); font-size: var(--fs-small); line-height: 1.55; color: var(--text-2); }
.fleet-strip-label { flex: none; font: 700 var(--fs-micro)/1.4 var(--font-heading); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--accent); }
.fleet-strip p { min-width: 0; overflow-wrap: anywhere; }
.fleet-summary .notice { margin: 0 0 var(--space-3); }
.fleet-summary > .hint { margin-top: var(--space-3); }

/* ============================== Fleet: mailbox cards ============================== */
.mbx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: var(--space-4); }
.mbx-card { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.mbx-card.is-quiet { background: var(--surface-sunken); }
.mbx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.mbx-id { min-width: 0; }
/* The address never wraps mid-word: local part on line 1, "@domain" muted on line 2 (UI.addr). */
.mbx-id h3 { font-size: var(--fs-lead); line-height: 1.35; }
.mbx-id .addr-domain { margin-top: 2px; font: 400 var(--fs-small)/1.4 var(--font-body); color: var(--text-2); }
.mbx-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

.mbx-label, .mbx-stat dt { font: 700 var(--fs-micro)/1.3 var(--font-heading); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.mbx-num { font: 700 var(--fs-h2)/1.1 var(--font-heading); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--text); }
.mbx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); margin: 0; padding: var(--space-3) 0; border-top: 1px solid var(--border-hair); border-bottom: 1px solid var(--border-hair); }
.mbx-stat { min-width: 0; }
.mbx-stat dd { margin: 6px 0 0; }
.mbx-stat dd small { display: block; margin-top: 2px; font-size: var(--fs-caption); color: var(--text-2); }

.mbx-bounce { display: grid; gap: var(--space-2); }
.mbx-bounce-top { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.mbx-bounce-top .pill { margin-left: auto; align-self: center; }
.mbx-note { font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); }
.bounce-meter { display: block; width: 100%; height: 8px; overflow: visible; }
.bounce-meter .track { fill: var(--navy-100); }
/* Navy at every level; the level pill says warn or pause. Only past the kill line does it turn danger. */
.bounce-meter .fill { fill: var(--navy-600); }
.bounce-meter.danger .fill { fill: var(--status-danger-dot); }
.bounce-meter .tick { stroke: var(--navy-400); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bounce-meter .tick.kill-line { stroke: var(--navy-900); stroke-width: 1.5; }

.mbx-warmup { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-2); }
.mbx-warmup-day { font: 700 var(--fs-body)/1.3 var(--font-heading); color: var(--text); }
.mbx-warmup small { flex-basis: 100%; font-size: var(--fs-caption); color: var(--text-2); }
.mbx-state-note { padding: var(--space-2) var(--space-3); background: var(--surface-sunken); border: 1px solid var(--border-hair); border-radius: var(--radius-sm); font-size: var(--fs-small); color: var(--text-2); overflow-wrap: anywhere; white-space: pre-wrap; }
.mbx-foot { font-size: var(--fs-caption); line-height: 1.5; color: var(--text-2); overflow-wrap: anywhere; }

.mbx-actions { display: grid; gap: var(--space-2); margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--border-hair); }
.mbx-actions input { margin: 0; padding: 7px 10px; font-size: var(--fs-small); }
.mbx-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mbx-more summary, .add-mailbox summary, .send-capacity summary { cursor: pointer; font: 600 var(--fs-small)/1.4 var(--font-body); color: var(--accent); }
.mbx-more .inline-form { margin: var(--space-3) 0 0; }
.add-mailbox { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-hair); }
.add-mailbox summary { font-size: var(--fs-body); }
.add-mailbox .inline-form { margin-top: var(--space-4); }

/* ============================== Fleet: domain health ============================== */
.table-wrap .dom-table td, .table-wrap .dom-table th { vertical-align: middle; }
.table-wrap .dom-table tbody th { background: var(--surface); border-bottom: 1px solid var(--border-hair); font: 600 var(--fs-small)/1.4 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text); white-space: nowrap; }
.table-wrap .dom-table tbody tr:last-child th { border-bottom: 0; }
.table-wrap .dom-table tbody tr:hover th { background: var(--surface-sunken); }
.dom-name small { display: block; margin-top: 2px; font: 400 var(--fs-caption)/1.4 var(--font-body); color: var(--text-2); }
.dom-name code { font: 500 var(--fs-caption) var(--font-body); color: var(--text-2); }
.dom-when { font-size: var(--fs-small); color: var(--text-2); white-space: nowrap; }
.dom-action { text-align: right; }
.dom-details { margin-top: var(--space-4); border-top: 1px solid var(--border-hair); }
.dom-detail { border-bottom: 1px solid var(--border-hair); }
.dom-detail:last-child { border-bottom: 0; }
.dom-detail summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; cursor: pointer; list-style: none; }
.dom-detail summary::-webkit-details-marker { display: none; }
.dom-detail summary::before { content: ''; flex: none; width: 6px; height: 6px; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg); }
.dom-detail[open] summary::before { transform: rotate(45deg); }
.dom-detail-name { font: 700 var(--fs-body)/1.3 var(--font-heading); color: var(--text); }
.dom-detail-hint { margin-left: auto; font-size: var(--fs-small); font-weight: 600; color: var(--accent); }
.dom-detail-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); padding: 0 0 var(--space-5) var(--space-5); }
.dom-col { min-width: 0; }
.dom-col h4 { margin-bottom: var(--space-1); }
.dom-col .check-row { grid-template-columns: 120px 140px minmax(0, 1fr); align-items: center; }

/* ============================== Fleet: history ============================== */
.fleet-history .activity-row { grid-template-columns: 140px minmax(160px, 1fr) 2fr; }
.fleet-history .activity-row strong { font-weight: 600; text-transform: capitalize; }

/* ============================== Send board: header ============================== */
.send-head .notice { margin-bottom: var(--space-4); }
.send-kpis { margin-bottom: var(--space-4); }
.send-actions { margin-bottom: var(--space-4); }
.send-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; counter-reset: send-step; }
.send-steps li { counter-increment: send-step; display: flex; gap: var(--space-3); align-items: flex-start; min-width: 0; padding: var(--space-3) var(--space-4); background: var(--surface-sunken); border: 1px solid var(--border-hair); border-radius: var(--radius-md); font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); overflow-wrap: anywhere; }
.send-steps li::before { content: counter(send-step); flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--border-cool); border-radius: 50%; background: var(--surface); font: 700 var(--fs-micro)/1 var(--font-heading); color: var(--accent); }
.send-head > .hint { margin-top: var(--space-3); }
.send-capacity { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-hair); }
.send-capacity summary small { margin-left: var(--space-2); font-weight: 500; color: var(--text-2); }
.send-capacity .table-wrap { margin-top: var(--space-3); }
.cap-table td, .cap-table th { white-space: nowrap; }
.cap-table .pill + .pill { margin-left: 4px; }
.table-wrap .cap-table tr.cap-total td { background: var(--surface-sunken); font-weight: 600; border-top: 1px solid var(--border); }

/* ============================== Send board: mailbox cards (the landing FlowCard) ============================== */
.send-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: var(--space-4); align-items: start; }
.send-card { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.send-card-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font: 700 var(--fs-micro)/1.3 var(--font-heading); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.send-card-eyebrow > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.send-card-node { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: linear-gradient(100deg, var(--navy-900), var(--navy-800)); color: var(--warm-white); }
.send-card-id { min-width: 0; }
.send-card-id h3 { font-size: var(--fs-body); line-height: 1.35; color: var(--warm-white); }
.send-card-id .addr-domain { color: var(--on-navy-muted); font-weight: 500; }
.send-card-id p { margin-top: 2px; font-size: var(--fs-caption); line-height: 1.45; color: var(--on-navy-muted); font-variant-numeric: tabular-nums; }
.send-card-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.cap-dots { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.cap-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--navy-400); }
.cap-dot.used { background: var(--warm-white); border-color: var(--warm-white); }
.cap-dot.ready { background: var(--navy-400); }
.send-card-hold { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--fs-small); line-height: 1.5; color: var(--status-warn-text); }
.send-card-hold::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--status-warn-dot); box-shadow: var(--status-dot-ring); transform: translateY(1px); }

/* Pale contact rows with a navy left accent per slot. */
.send-rows { display: flex; flex-direction: column; gap: var(--space-2); }
.send-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: 10px var(--space-3); background: var(--surface-tint); border-left: 3px solid var(--navy-600); border-radius: var(--radius-md); }
.send-row.slot-later { border-left-color: var(--navy-400); }
.send-row.slot-exported { border-left-color: var(--navy-700); }
.send-row:is(.slot-awaiting_approval, .slot-unassigned) { border-left-color: var(--navy-200); }
.send-row:is(.slot-blocked, .slot-rejected) { border-left-color: var(--status-danger-dot); }
.send-row-main { min-width: 0; }
.text-button.send-row-name { display: block; font: 700 var(--fs-small)/1.35 var(--font-heading); color: var(--text); text-align: left; overflow-wrap: anywhere; }
.text-button.send-row-name:hover { color: var(--accent); opacity: 1; }
.send-row-meta { display: block; margin-top: 2px; font-size: var(--fs-caption); line-height: 1.4; color: var(--text-2); overflow-wrap: anywhere; }
.send-row-notes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.send-row .blocker { display: block; margin-top: 4px; font-size: var(--fs-caption); line-height: 1.45; }
.send-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.send-row-side small { font-size: var(--fs-caption); color: var(--text-2); }
.send-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-hair); }
.send-card-counts { font-size: var(--fs-caption); color: var(--text-2); font-variant-numeric: tabular-nums; }
.send-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ============================== Send board: exports waiting for Apollo ============================== */
.export-list { margin: 0; padding: 0; list-style: none; }
.export-item { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-6); padding: var(--space-4) 0; border-bottom: 1px solid var(--border-hair); }
.export-item:first-child { padding-top: 0; }
.export-item:last-child { padding-bottom: 0; border-bottom: 0; }
.export-main { min-width: 0; }
.export-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.export-title strong { font: 700 var(--fs-body)/1.3 var(--font-heading); color: var(--text); }
.export-main small { display: block; margin-top: 4px; font-size: var(--fs-caption); color: var(--text-2); overflow-wrap: anywhere; }
.enroll-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); }
.enroll-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-caption); }
.enroll-form input { width: auto; margin: 0; padding: 6px 10px; font-size: var(--fs-small); }
/* Rows outside a mailbox card: plain white rows with hairline dividers inside the one card;
   the tinted FlowCard rows belong to the mailbox cards only. */
.send-unassigned .send-rows { margin-top: var(--space-4); }
.send-list { gap: 0; }
.send-list .send-row { padding: var(--space-3) 0; background: var(--surface); border-left: 0; border-top: 1px solid var(--border-hair); border-radius: 0; }
.send-list .send-row:first-child { border-top: 0; padding-top: 0; }
.send-list .send-row:last-child { padding-bottom: 0; }

/* ============================== Responsive ============================== */
@media (max-width: 1150px) {
  .fleet-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .send-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dom-detail-body { grid-template-columns: 1fr; gap: var(--space-4); }
}
@media (max-width: 720px) {
  .fleet-kpis, .send-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fleet-strip { flex-direction: column; gap: 4px; }
  .mbx-card, .send-card { padding: var(--space-4); }
  .mbx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .send-steps { grid-template-columns: 1fr; }
  .dom-detail-body { padding-left: 0; }
  .dom-detail-hint { display: none; }
  .dom-col .check-row { grid-template-columns: 90px 110px minmax(0, 1fr); }
  .fleet-history .activity-row { grid-template-columns: 1fr; gap: 4px; }
  .send-card-node { grid-template-columns: 1fr; }
  .send-card-pills { justify-content: flex-start; }
  .send-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .send-row-side { flex-direction: row; align-items: center; }
  .export-item { align-items: flex-start; }
}