/* ops.css — page-specific only. Everything shared lives in /assets/app.css.
   Mirrored ops-portal pages. Fictional data only; nothing here reaches a
   network, real DNS, real hosting or real email. */

/* --- Client Requests ------------------------------------------------------ */

.needs-band {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-small); color: var(--ink-heading); font-weight: var(--fw-med);
}
.needs-band__count {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  border: 1px solid var(--rule); border-radius: var(--r-pill);
  padding: 0 var(--s-2); color: var(--ink-2); background: var(--surface-alt);
}
.shown-count { font-size: var(--fs-meta); color: var(--ink-2); margin-left: auto; }
.filter-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

.select--inline {
  width: auto; padding: 1px var(--s-2); min-height: 22px;
  font-size: var(--fs-meta); border-radius: var(--r-sm);
}
.cell-title { display: flex; flex-direction: column; gap: 3px; }
.cell-title a { color: var(--ink); }
.cell-flags { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* A proposed table row. Rows are not block containers, so they do not carry
   the shared dashed outline — they carry this marker plus a visible chip. */
.data-table tr.row--proposed td { background: var(--accent-quiet); }
.data-table tr.row--proposed td:first-child { box-shadow: inset 3px 0 0 var(--proposed-rule); }

/* --- Connection working view ---------------------------------------------- */

.compare { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.compare th {
  text-align: left; background: var(--surface-alt); color: var(--ink-2);
  font-size: var(--fs-meta); font-weight: var(--fw-med);
  padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--rule);
}
.compare td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--rule); vertical-align: top; }
.compare tr:last-child td { border-bottom: 0; }
.compare td.mono { font-family: var(--font-mono); font-size: var(--fs-meta); word-break: break-all; }
.compare .verdict--same { color: var(--ok); }
.compare .verdict--drift { color: var(--warn); font-weight: var(--fw-med); }

.step { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3) 0; }
.step + .step { border-top: 1px solid var(--rule); }
.step__n {
  width: 20px; height: 20px; border-radius: var(--r-pill);
  border: 1px solid var(--rule); background: var(--surface-alt);
  display: grid; place-items: center; color: var(--ink-2);
  font-size: 10px; font-weight: var(--fw-med); font-family: var(--font-mono);
}
.step--done .step__n { border-color: var(--ok); color: var(--ok); background: var(--ok-quiet); }
.step__title { font-size: var(--fs-body); font-weight: var(--fw-med); color: var(--ink-heading); }
.step__body { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.step__consequence { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-2); }

.hold-row { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: flex-start; }
.hold-row .input { max-width: 340px; }

/* --- Hostnames tab -------------------------------------------------------- */

.hostgroup + .hostgroup { margin-top: var(--s-5); }
.hostgroup__label {
  display: flex; align-items: center; gap: var(--s-1);
  font-size: var(--fs-meta); font-weight: var(--fw-med); color: var(--ink-2);
  padding-bottom: var(--s-2); border-bottom: 1px solid var(--rule);
}
.hostrow {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) 0; border-bottom: 1px solid var(--rule);
}
.hostrow:last-child { border-bottom: 0; }
.hostrow__name { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink); word-break: break-all; }
.hostrow__tls { font-size: var(--fs-meta); color: var(--ink-2); }
/* The one contrast failure in this file: ink-3 on white measures 3.02:1, and
   "read-only" is load-bearing — it is how an operator knows the row cannot be
   edited here. ink-2 on white is 5.01:1. Other ops.css text was measured and
   passes: ink-2 on surface-alt 4.63:1, ink-2 on canvas 4.83:1, ok and warn on
   white 5.02:1 each. */
.hostrow__ro { font-size: var(--fs-meta); color: var(--ink-2); margin-left: auto; }
.hostrow__note { flex: 1 0 100%; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-2); }

.serve-internal { display: flex; gap: var(--s-3); align-items: flex-start; }
.serve-internal input { margin: 2px 0 0; accent-color: var(--brand); }
.serve-internal__text { min-width: 0; }
.dns-target { font-size: var(--fs-meta); color: var(--ink-2); }
.dns-target .mono { font-family: var(--font-mono); color: var(--ink); }