/* ==========================================================================
   Creator CRM — PRD-CRM-01
   Inbox and client records. Everything here is expressed in --mn-admin-*
   tokens, so it follows the dashboard's palette rather than pinning its own.
   ========================================================================== */

.mn-crm { display: flex; flex-direction: column; gap: 16px; min-height: 0; }

.mn-crm-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mn-crm-filters { display: flex; gap: 8px; flex-wrap: wrap; }

.mn-chip {
  height: 34px;
  padding: 0 15px;
  border-radius: 100px;
  border: 1px solid var(--mn-admin-border);
  background: var(--mn-admin-surface);
  color: var(--mn-admin-text-muted);
  font: inherit;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  text-transform: none;
}
.mn-chip:hover { border-color: var(--mn-admin-border-strong); color: var(--mn-admin-text); }
.mn-chip.is-on {
  background: var(--mn-admin-action);
  border-color: var(--mn-admin-action);
  color: #fff;
  font-weight: 600;
}
.mn-chip span { font-weight: 600; color: inherit; }

.mn-crm-search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  width: 300px;
  max-width: 100%;
  padding: 0 13px;
  border-radius: 8px;
  background: var(--mn-admin-surface);
  border: 1px solid var(--mn-admin-border);
  color: var(--mn-admin-text-dim);
}
.mn-crm-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--mn-admin-text);
  outline: none;
}

.mn-crm-body { display: flex; gap: 18px; align-items: flex-start; min-height: 0; }
.mn-crm-list { flex: 1; min-width: 0; background: var(--mn-admin-surface); border: 1px solid var(--mn-admin-border); border-radius: 14px; overflow: hidden; }

.mn-crm-loading, .mn-crm-empty { padding: 48px 30px; text-align: center; color: var(--mn-admin-text-dim); }
.mn-crm-empty h2 { font-size: 20px; color: var(--mn-admin-text); margin: 0 0 8px; }
.mn-crm-empty p { font-size: 14.5px; line-height: 1.6; max-width: 46ch; margin: 0 auto 14px; }

/* ── inbox rows ─────────────────────────────────────────────────────────── */

.mn-crm-row {
  display: flex;
  gap: 13px;
  width: 100%;
  padding: 16px 20px;
  border: 0;
  border-bottom: 1px solid var(--mn-admin-border);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mn-crm-row:last-child { border-bottom: 0; }
.mn-crm-row:hover { background: var(--mn-admin-surface-2); }
.mn-crm-row.is-read { opacity: .74; }
.mn-crm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mn-admin-action); margin-top: 6px; flex: none; }
.mn-crm-row-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.mn-crm-row-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mn-crm-name { font-size: 14.5px; font-weight: 600; color: var(--mn-admin-text); }
.mn-crm-cid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--mn-admin-text-dim); }
.mn-crm-when { margin-left: auto; font-size: 12px; color: var(--mn-admin-text-dim); }
.mn-crm-preview {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--mn-admin-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mn-tag {
  height: 19px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--mn-admin-surface-2);
  color: var(--mn-admin-text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  display: inline-flex;
  align-items: center;
}
.mn-tag-warn { background: var(--mn-admin-warning-soft); color: var(--mn-admin-warning); }
.mn-tag-ok   { background: var(--mn-admin-success-soft); color: var(--mn-admin-success); }
.mn-tag-flag { background: var(--mn-admin-danger-soft); color: var(--mn-admin-danger); }
/* Her flag note in the Flagged list — the line that jogs her memory. Quoted,
   muted, wraps to a couple of lines rather than stretching the row. */
.mn-crm-flagnote {
  color: var(--mn-admin-text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── client table rows ──────────────────────────────────────────────────── */

.mn-crm-thead, .mn-crm-crow {
  display: grid;
  grid-template-columns: 2.2fr 1.4fr .8fr 1fr;
  gap: 16px;
  align-items: center;
  padding: 13px 20px;
}
.mn-crm-thead {
  background: var(--mn-admin-surface-2);
  border-bottom: 1px solid var(--mn-admin-border);
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mn-admin-text-muted);
}
.mn-crm-crow {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--mn-admin-border);
  background: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--mn-admin-text-muted);
  text-align: left;
  cursor: pointer;
}
.mn-crm-crow:last-child { border-bottom: 0; }
.mn-crm-crow:hover { background: var(--mn-admin-surface-2); }
.mn-crm-person { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mn-crm-person strong { font-size: 14px; color: var(--mn-admin-text); }
.mn-crm-person em { font-style: normal; font-size: 12.5px; color: var(--mn-admin-text-dim); }

/* ── detail panel ───────────────────────────────────────────────────────── */

.mn-crm-detail {
  width: 420px;
  flex: none;
  background: var(--mn-admin-surface);
  border: 1px solid var(--mn-admin-border);
  border-radius: 14px;
  overflow: hidden;
  align-self: stretch;
}
.mn-crm-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--mn-admin-border);
}
.mn-crm-detail-head h2 { font-size: 17px; margin: 0 0 3px; color: var(--mn-admin-text); }
.mn-crm-close {
  margin-left: auto;
  width: 32px; height: 32px;
  border-radius: 7px;
  border: 1px solid var(--mn-admin-border);
  background: none;
  color: var(--mn-admin-text-muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.mn-crm-close:hover { border-color: var(--mn-admin-border-strong); color: var(--mn-admin-text); }
.mn-crm-detail-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 18px; }
.mn-crm-message { font-size: 14.5px; line-height: 1.65; color: var(--mn-admin-text); margin: 0; white-space: pre-line; }

/* ── Inquiry detail as a modal card ─────────────────────────────────────────
   The detail was a fixed right rail; it now opens centered over a scrim on
   desktop and full-screen on mobile — the same pattern as the Clients record —
   so the message, screening and decision get room instead of a narrow column. */
.mn-crm-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  background: rgba(27, 22, 19, .42);
}
body.mn-modal-open { overflow: hidden; }
.mn-crm-detail--modal {
  width: min(780px, 94vw);
  flex: none;
  align-self: center;
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 30px 80px -20px rgba(20, 15, 10, .5);
}
.mn-crm-detail--modal .mn-crm-detail-head { flex: none; }
/* Two columns share the width; each scrolls on its own so the card never grows
   past the viewport. */
.mn-crm-mbody {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  min-height: 0;
  overflow: hidden;
}
.mn-crm-detail--modal .mn-crm-col-main,
.mn-crm-detail--modal .mn-crm-col-side { overflow: auto; min-height: 0; }
.mn-crm-detail--modal .mn-crm-col-side {
  border-left: 1px solid var(--mn-admin-border);
  background: linear-gradient(180deg, var(--mn-admin-surface), #FDFBF8);
}
@media (max-width: 720px) {
  .mn-crm-overlay { padding: 0; }
  .mn-crm-detail--modal {
    width: 100vw; height: 100dvh; max-height: none; border: 0; border-radius: 0;
  }
  /* Full-screen sheet: the head pins to the top and everything below scrolls as
     one column. */
  .mn-crm-mbody { grid-template-columns: 1fr; overflow: auto; }
  .mn-crm-detail--modal .mn-crm-col-main,
  .mn-crm-detail--modal .mn-crm-col-side { overflow: visible; }
  .mn-crm-detail--modal .mn-crm-col-side {
    border-left: none; border-top: 1px solid var(--mn-admin-border);
  }
}

.mn-crm-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
.mn-crm-meta dt { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--mn-admin-text-dim); font-weight: 700; margin-bottom: 4px; }
.mn-crm-meta dd { margin: 0; font-size: 13.5px; color: var(--mn-admin-text); }

.mn-crm-block { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--mn-admin-border); }
.mn-crm-block h3 { font-size: 13px; font-weight: 600; color: var(--mn-admin-text); margin: 0; display: flex; align-items: baseline; gap: 8px; }
.mn-crm-saved { margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--mn-admin-success); }
.mn-crm-hint { font-size: 11.5px; line-height: 1.5; color: var(--mn-admin-text-dim); margin: 0; }

.mn-crm-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.mn-crm-photo {
  padding: 8px 12px;
  border-radius: 7px;
  border: 1px solid var(--mn-admin-border);
  background: var(--mn-admin-surface-2);
  font-size: 12.5px;
  color: var(--mn-admin-text-muted);
}
.mn-crm-photo:hover { border-color: var(--mn-admin-action); color: var(--mn-admin-action); }

.mn-crm-status { display: flex; gap: 7px; flex-wrap: wrap; }
.mn-crm-status .mn-chip { text-transform: capitalize; }

.mn-crm-detail textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--mn-admin-border);
  background: var(--mn-admin-input-bg, var(--mn-admin-surface));
  color: var(--mn-admin-text);
  padding: 11px 13px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  resize: vertical;
}
.mn-crm-detail textarea:focus {
  outline: none;
  border-color: var(--mn-admin-action);
  box-shadow: 0 0 0 3px var(--mn-admin-focus-ring);
}

.mn-crm-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mn-crm-history li { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--mn-admin-text-muted); }
.mn-crm-history em { font-style: normal; font-size: 11.5px; color: var(--mn-admin-text-dim); }

.mn-crm-actions { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 16px; border-top: 1px solid var(--mn-admin-border); }
.mn-btn-sm {
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--mn-admin-action);
  background: var(--mn-admin-action);
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: pointer;
}
.mn-btn-sm:hover { background: var(--mn-admin-action-hover); border-color: var(--mn-admin-action-hover); color: #fff; }
.mn-btn-ghost { background: none; color: var(--mn-admin-text-muted); border-color: var(--mn-admin-border); }
.mn-btn-ghost:hover { background: var(--mn-admin-surface-2); color: var(--mn-admin-text); border-color: var(--mn-admin-border-strong); }

.mn-crm-foot { font-size: 12.5px; color: var(--mn-admin-text-dim); margin: 0; }

@media (max-width: 1100px) {
  .mn-crm-body { flex-direction: column; }
  .mn-crm-detail { width: 100%; }
  .mn-crm-thead { display: none; }
  .mn-crm-crow { grid-template-columns: 1fr auto; row-gap: 6px; }
}

/* ── screening files ─────────────────────────────────────────────────────────
   Thumbnails rather than filenames: the point of screening is to look at it.
   .is-broken is set by the img's onerror — a format the server could not
   convert (HEIC where no decoder is installed). It stays clickable and opens
   the original, so the file is never simply unreachable.
   ────────────────────────────────────────────────────────────────────────── */

.mn-crm-photos { display: flex; flex-wrap: wrap; gap: 10px; }

.mn-crm-thumb {
  position: relative;
  width: 104px;
  height: 132px;
  padding: 0;
  border: 1px solid var(--mn-admin-border);
  border-radius: 9px;
  overflow: hidden;
  background: var(--mn-admin-surface-2);
  cursor: pointer;
  flex: none;
}
.mn-crm-thumb:hover { border-color: var(--mn-admin-action); }
.mn-crm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mn-crm-thumb-fallback {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px;
  text-align: center;
  font-size: 11px;
  line-height: 1.4;
  color: var(--mn-admin-text-dim);
}
.mn-crm-thumb.is-broken img { display: none; }
.mn-crm-thumb.is-broken .mn-crm-thumb-fallback { display: flex; }

.mn-crm-file-kind {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--mn-admin-warning-soft);
  color: var(--mn-admin-warning);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
}

.mn-crm-file {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border: 1px solid var(--mn-admin-border);
  border-radius: 9px;
  background: var(--mn-admin-surface-2);
  font-size: 12.5px;
  color: var(--mn-admin-text-muted);
}
.mn-crm-file:hover { border-color: var(--mn-admin-action); color: var(--mn-admin-action); }

/* ── lightbox ───────────────────────────────────────────────────────────── */

.mn-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(27, 22, 19, .82);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.mn-lightbox figure {
  margin: 0;
  max-width: min(1000px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.mn-lightbox img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: 10px;
  background: var(--mn-admin-surface);
  object-fit: contain;
}
.mn-lightbox figcaption { font-size: 13px; color: rgba(255, 255, 255, .82); }
.mn-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.mn-lightbox-close:hover { background: rgba(255, 255, 255, .12); }

/* ── client record: fields, stats, visits, blacklist ─────────────────────── */

.mn-fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 13px; }
.mn-fld-lab { font-size: 13px; font-weight: 600; color: var(--mn-admin-text); }
.mn-in {
  width: 100%;
  /* Not inherited from Bootstrap's reboot: this file has to stand on its own
     wherever it is loaded, and width:100% + padding without it overflows. */
  box-sizing: border-box;
  font: inherit;
  font-size: 14px;
  color: var(--mn-admin-text);
  background: var(--mn-admin-surface);
  border: 1px solid var(--mn-admin-border);
  border-radius: 7px;
  padding: 10px 12px;
}
.mn-in:focus {
  outline: none;
  border-color: var(--mn-admin-action);
  box-shadow: 0 0 0 3px var(--mn-admin-focus-ring);
}
.mn-in:disabled { background: var(--mn-admin-surface-2); color: var(--mn-admin-text-dim); }
textarea.mn-in { line-height: 1.6; resize: vertical; }

.mn-check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--mn-admin-text); margin: 4px 0 8px; }
.mn-check input { width: 17px; height: 17px; accent-color: var(--mn-admin-action); }

.mn-stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mn-stat-row > div {
  background: var(--mn-admin-surface-2);
  border: 1px solid var(--mn-admin-border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mn-stat-row span { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--mn-admin-text-dim); }
.mn-stat-row strong { font-size: 19px; color: var(--mn-admin-text); font-variant-numeric: tabular-nums; }

.mn-visits { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mn-visit { border: 1px solid var(--mn-admin-border); border-radius: 10px; padding: 12px 14px; background: var(--mn-admin-surface); }
.mn-visit-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 13px; color: var(--mn-admin-text-muted); }
.mn-visit-top strong { font-size: 14px; color: var(--mn-admin-text); }
.mn-visit-money { margin-left: auto; font-weight: 600; color: var(--mn-admin-text); font-variant-numeric: tabular-nums; }
.mn-visit p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--mn-admin-text-muted); white-space: pre-line; }
.mn-visit-del {
  border: 0; background: none; cursor: pointer;
  color: var(--mn-admin-text-dim); font-size: 17px; line-height: 1; padding: 0 4px;
}
.mn-visit-del:hover { color: var(--mn-admin-danger); }
.mn-tag-no { background: var(--mn-admin-danger-soft); color: var(--mn-admin-danger); }

.mn-add-visit { border: 1px dashed var(--mn-admin-border); border-radius: 10px; padding: 0; }
.mn-add-visit summary {
  cursor: pointer; padding: 11px 14px; font-size: 13.5px; font-weight: 600;
  color: var(--mn-admin-action); list-style: none;
}
.mn-add-visit summary::-webkit-details-marker { display: none; }
.mn-add-visit summary::before { content: '+ '; }
.mn-add-visit[open] summary { border-bottom: 1px solid var(--mn-admin-border); }
.mn-add-visit-body { padding: 14px; }

/* Blacklist warning. Deliberately loud: it is the one thing on this page a
   creator did not write themselves. */
.mn-flag {
  border: 1px solid #EBD2D2;
  background: var(--mn-admin-danger-soft);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mn-flag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--mn-admin-danger); }
.mn-flag-row strong { font-size: 14px; }
.mn-flag-row span { flex-basis: 100%; color: var(--mn-admin-text-muted); line-height: 1.55; }
.mn-flag-row .mn-btn-sm { margin-left: auto; }
/* When a flag row carries several actions, group them right-aligned and let the
   buttons sit side by side rather than each grabbing the auto-margin. */
.mn-flag-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.mn-flag-actions .mn-btn-sm { margin-left: 0; }
/* Neutral "off your working list" banner with a one-click way back. */
.mn-inactive-note {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--mn-admin-border);
  background: var(--mn-admin-surface-2);
  border-radius: 10px; padding: 12px 16px;
  font-size: 13.5px; color: var(--mn-admin-text-muted);
}
.mn-inactive-note .mn-btn-sm { margin-left: auto; }

/* Weighted warning banner — the anonymous aggregate of other creators' flags.
   Level colour signals severity; copy makes clear it is a warning, not a verdict. */
.mn-warn { border-radius: 10px; padding: 12px 16px; margin-bottom: 10px; }
.mn-warn-head { font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.mn-warn-body { font-size: 12.5px; line-height: 1.55; }
.mn-warn-strong  { background: #FDE7E7; border: 1px solid #F3B4B4; }
.mn-warn-strong  .mn-warn-head { color: #B42318; }
.mn-warn-strong  .mn-warn-body { color: #7A271A; }
.mn-warn-warning { background: #FEF3E2; border: 1px solid #F5D08A; }
.mn-warn-warning .mn-warn-head { color: #B54708; }
.mn-warn-warning .mn-warn-body { color: #7A4A0A; }
.mn-warn-note    { background: #F1F5F9; border: 1px solid #D8E0E8; }
.mn-warn-note    .mn-warn-head { color: #334155; }
.mn-warn-note    .mn-warn-body { color: #475569; }

.mn-btn-danger { background: var(--mn-admin-danger) !important; border-color: var(--mn-admin-danger) !important; color: #fff !important; }
.mn-btn-danger:hover { filter: brightness(.92); }

@media (max-width: 1100px) { .mn-stat-row { grid-template-columns: 1fr; } }

/* ==========================================================================
   Client record modal — docs/crm/design/modal, direction A ("review-first")
   The record is read far more often than it is edited: she opens it to decide
   whether to see someone again. So the default view is evidence — stats,
   screening, visit history on the left; notes, contact and safety on the
   right — and every write (edit, record a visit, blacklist) is a deliberate
   step behind a button, rendered as its own view inside the same dialog.
   ========================================================================== */

.mn-dlg-open { overflow: hidden; }

.mn-dlg {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: rgba(27, 22, 19, .42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.mn-dlg-panel {
  box-sizing: border-box;
  width: min(1000px, 100%);
  max-height: 100%;
  height: 720px;
  background: var(--mn-admin-bg, #FCFAF7);
  border-radius: 16px;
  box-shadow: 0 40px 90px -30px rgba(27, 22, 19, .5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Forms don't need the review layout's width, and a 1000px-wide form is worse
   than a narrow one. */
.mn-dlg-panel.is-form { width: min(620px, 100%); height: auto; }

/* ── header ─────────────────────────────────────────────────────────────── */

.mn-dlg-head {
  flex: none;
  padding: 18px 22px;
  background: var(--mn-admin-surface);
  border-bottom: 1px solid var(--mn-admin-border);
  display: flex;
  align-items: center;
  gap: 15px;
}
.mn-dlg-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--mn-admin-surface-2);
  color: var(--mn-admin-text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600;
  flex: none;
}
.mn-dlg-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mn-dlg-who-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mn-dlg-who h2 {
  font-size: 21px; font-weight: 600; margin: 0;
  color: var(--mn-admin-text); letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mn-dlg-sub { font-size: 12.5px; color: var(--mn-admin-text-dim); }
.mn-dlg-sub code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.mn-dlg-acts { margin-left: auto; display: flex; align-items: center; gap: 9px; flex: none; }
.mn-dlg-x {
  width: 38px; height: 38px;
  border-radius: 8px;
  border: 1px solid var(--mn-admin-border);
  background: none;
  color: var(--mn-admin-text-muted);
  font-size: 19px; line-height: 1;
  cursor: pointer;
}
.mn-dlg-x:hover { border-color: var(--mn-admin-border-strong); color: var(--mn-admin-text); }

/* ── two-column review body ─────────────────────────────────────────────── */

.mn-dlg-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  min-height: 0;
}
.mn-dlg-main {
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 20px;
  border-right: 1px solid var(--mn-admin-border);
  overflow-y: auto;
}
.mn-dlg-side {
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 18px;
  background: var(--mn-admin-surface);
  overflow-y: auto;
}
.mn-dlg-sec { display: flex; flex-direction: column; gap: 11px; }
.mn-dlg-sec-head { display: flex; align-items: baseline; gap: 9px; }
.mn-dlg-sec-head h3 { font-size: 13px; font-weight: 600; color: var(--mn-admin-text); margin: 0; }
.mn-dlg-sec-head span { font-size: 12px; color: var(--mn-admin-text-dim); }
.mn-dlg-link {
  margin-left: auto;
  border: 0; background: none; padding: 0;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--mn-admin-action);
  cursor: pointer;
}
.mn-dlg-link:hover { text-decoration: underline; }

/* Notes fill the side column so the box is worth typing into. */
.mn-dlg-notes { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 9px; }
.mn-dlg-notes textarea { flex: 1; min-height: 150px; resize: none; background: var(--mn-admin-bg, var(--mn-admin-surface-2)); }

.mn-dlg-kv { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; }
.mn-dlg-kv > div { display: flex; gap: 10px; }
.mn-dlg-kv dt, .mn-dlg-kv > div > span:first-child { width: 54px; flex: none; color: var(--mn-admin-text-dim); }
.mn-dlg-kv > div > span:last-child { color: var(--mn-admin-text); overflow: hidden; text-overflow: ellipsis; }

.mn-dlg-safety { padding-top: 16px; border-top: 1px solid var(--mn-admin-border); }

/* ── visit history + pager ──────────────────────────────────────────────── */

/* Fixed footprint: three rows' worth, whatever the page actually holds. A
   short last page must not shrink the list, or paging makes the dialog jump. */
.mn-visit-page { display: flex; flex-direction: column; gap: 8px; min-height: 246px; }
.mn-visit-page .mn-visit { margin: 0; }

.mn-pager { display: flex; align-items: center; gap: 10px; padding-top: 2px; }
.mn-pager-count { font-size: 12.5px; color: var(--mn-admin-text-dim); font-variant-numeric: tabular-nums; }
.mn-pager-btns { margin-left: auto; display: flex; gap: 6px; }
.mn-pager-btns button {
  width: 30px; height: 30px;
  border-radius: 7px;
  border: 1px solid var(--mn-admin-border);
  background: var(--mn-admin-surface);
  color: var(--mn-admin-text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.mn-pager-btns button:hover:not(:disabled) { border-color: var(--mn-admin-border-strong); color: var(--mn-admin-text); }
.mn-pager-btns button:disabled { background: var(--mn-admin-bg, var(--mn-admin-surface-2)); color: var(--mn-admin-border-strong); cursor: default; }

/* ── form views inside the dialog ───────────────────────────────────────── */

.mn-dlg-form { padding: 20px 22px 22px; overflow-y: auto; }
.mn-dlg-form .mn-fld:last-of-type { margin-bottom: 0; }
.mn-dlg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.mn-dlg-foot {
  flex: none;
  padding: 14px 22px;
  border-top: 1px solid var(--mn-admin-border);
  background: var(--mn-admin-surface);
  display: flex; align-items: center; gap: 10px;
}
.mn-dlg-foot .mn-crm-hint { margin-left: 4px; }
.mn-dlg-foot .mn-btn-danger { margin-left: auto; }

.mn-dlg-back {
  border: 0; background: none; padding: 0;
  font: inherit; font-size: 13px; color: var(--mn-admin-text-muted);
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.mn-dlg-back:hover { color: var(--mn-admin-text); }

.mn-dlg-add {
  width: 104px; height: 132px;
  border: 1px dashed var(--mn-admin-border-strong);
  border-radius: 9px;
  background: none;
  color: var(--mn-admin-text-dim);
  font: inherit; font-size: 11.5px;
  line-height: 1.4; text-align: center;
  padding: 8px;
  cursor: pointer;
  flex: none;
}
.mn-dlg-add:hover { border-color: var(--mn-admin-action); color: var(--mn-admin-action); }

.mn-dlg-none { font-size: 13px; color: var(--mn-admin-text-dim); margin: 0; }

/* ── narrow screens: one column, dialog fills the viewport ──────────────── */

@media (max-width: 900px) {
  .mn-dlg { padding: 0; }
  .mn-dlg-panel, .mn-dlg-panel.is-form { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .mn-dlg-body { grid-template-columns: 1fr; overflow-y: auto; }
  .mn-dlg-main { border-right: 0; border-bottom: 1px solid var(--mn-admin-border); overflow: visible; }
  .mn-dlg-side { overflow: visible; }
  .mn-dlg-head { flex-wrap: wrap; }
  .mn-dlg-acts { width: 100%; margin-left: 0; }
  .mn-dlg-acts .mn-dlg-x { margin-left: auto; }
  .mn-dlg-notes textarea { min-height: 120px; }
}

/* A blacklist flag spans the dialog rather than living in a scrolling column:
   it is the one thing here she did not write herself, and it must not be
   something you can scroll past. */
.mn-dlg-alert { flex: none; padding: 14px 22px 0; }
.mn-dlg-alert .mn-flag { margin: 0; }

/* ── person state, visit tools ───────────────────────────────────────────── */

/* Scope note above a search: a search deliberately ignores the state chips, so
   the list has to say so — otherwise finding a declined person reads as a bug
   in the filter rather than the safety behaviour it is. */
.mn-crm-scope {
  margin: 0;
  padding: 10px 20px;
  border-bottom: 1px solid var(--mn-admin-border);
  background: var(--mn-admin-surface-2);
  font-size: 12.5px;
  color: var(--mn-admin-text-dim);
}

/* Small square icon buttons on a visit row. They sit at the end of the meta
   line and only ink up on hover, so a row of visits reads as history rather
   than as a row of controls. */
.mn-visit-tools { display: inline-flex; gap: 2px; margin-left: 4px; }
.mn-icon-btn {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px;
  background: none;
  color: var(--mn-admin-text-dim);
  cursor: pointer;
  opacity: .6;
  transition: opacity .12s ease, background-color .12s ease, color .12s ease;
}
.mn-visit:hover .mn-icon-btn { opacity: 1; }
.mn-icon-btn:hover { background: var(--mn-admin-surface-2); color: var(--mn-admin-text); }
.mn-icon-btn:focus-visible { opacity: 1; outline: 2px solid var(--mn-admin-action); outline-offset: 1px; }
.mn-icon-danger:hover { background: var(--mn-admin-danger-soft); color: var(--mn-admin-danger); }

/* A visit card is double-clickable, so say so on hover rather than leaving it
   to be discovered. */
.mn-visit { cursor: default; }
.mn-visit:hover { border-color: var(--mn-admin-border-strong); }

/* A destructive action that is not the primary button: reads as available,
   not as the thing to press. */
.mn-btn-danger-ghost {
  margin-left: auto;
  border-color: #EBD2D2 !important;
  color: var(--mn-admin-danger) !important;
  background: none !important;
}
.mn-btn-danger-ghost:hover { background: var(--mn-admin-danger-soft) !important; }

/* An inactive person still opens, and should look retired rather than broken. */
.mn-crm-crow .mn-tag { font-size: 9.5px; }

/* ── screening files are covered until asked for ──────────────────────────
   These are photo IDs on a screen in a room other people walk through, so the
   safe default is not showing them. The blur is a privacy screen, not a
   security control — the file is still fetched, and anyone with the device can
   click. It defends against the actual threat, which is a person standing
   behind her.
   ───────────────────────────────────────────────────────────────────────── */

.mn-crm-shot { position: relative; width: 104px; height: 132px; flex: none; }
.mn-crm-shot .mn-crm-thumb { width: 100%; height: 100%; }

/* Scaled up under the blur so the softened edges do not show the tile's
   background as a pale frame. */
.mn-crm-shot.is-hidden .mn-crm-thumb img {
  filter: blur(14px);
  transform: scale(1.25);
}
.mn-crm-thumb img { transition: filter .18s ease, transform .18s ease; }

.mn-crm-veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(27, 22, 19, .30);
  color: #fff;
  pointer-events: none;   /* the tile behind it is the button */
}
.mn-crm-veil em {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mn-crm-shot:not(.is-hidden) .mn-crm-veil { display: none; }
.mn-crm-shot.is-hidden .mn-crm-thumb:hover .mn-crm-veil { background: rgba(27, 22, 19, .42); }

/* Put it away again. Only on a revealed tile, where it is the one thing she
   wants within reach if someone walks up. */
.mn-crm-peek {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: rgba(27, 22, 19, .55);
  color: #fff;
  cursor: pointer;
}
.mn-crm-peek:hover { background: rgba(27, 22, 19, .78); }
.mn-crm-shot.is-hidden .mn-crm-peek { display: none; }

/* A file that could not be previewed carries no image to blur, and its
   fallback says only the file type — nothing to cover. */
.mn-crm-shot .mn-crm-thumb.is-broken ~ .mn-crm-peek,
.mn-crm-thumb.is-broken .mn-crm-veil { display: none; }

/* An accepted inquiry says where that person went. Without it the inbox looks
   like it lost him. */
.mn-crm-moved {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--mn-admin-success-soft);
  border: 1px solid #CFE2D8;
  color: var(--mn-admin-text-muted);
  font-size: 13px;
  line-height: 1.55;
}
.mn-crm-moved a { color: var(--mn-admin-success); font-weight: 600; }

/* ══ Client messages ══════════════════════════════════════════════════════
   Threads from people she already sees. The list reuses the inbox row so the
   two read as siblings; only the parts that carry new meaning — the avatar,
   the unread count, the conversation itself — are new here.
   ═════════════════════════════════════════════════════════════════════════ */

.mn-thread-av {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--mn-admin-surface-2);
  color: var(--mn-admin-text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  flex: none;
}
.mn-thread.is-read .mn-thread-av { opacity: .8; }
.mn-thread.is-unread { background: var(--mn-admin-focus-ring); }
.mn-thread.is-unread:hover { background: var(--mn-admin-focus-ring); }
.mn-thread-right { margin-left: auto; display: flex; align-items: center; gap: 9px; flex: none; }
.mn-thread-right .mn-crm-when { margin-left: 0; }

/* Same red as the nav badge, and only ever a count of people waiting. */
.mn-unread {
  min-width: 20px;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--mn-admin-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── the conversation ───────────────────────────────────────────────────── */

.mn-thread-panel { width: min(860px, 100%); }
.mn-thread-panel .mn-dlg-head { align-items: center; gap: 14px; }
.mn-thread-panel .mn-dlg-back { flex: none; padding-right: 4px; }

.mn-thread-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

/* Date rules rather than timestamps on every line: she reads a thread for the
   run of it, and a date every few messages is enough to place them. */
.mn-thread-day { display: flex; align-items: center; gap: 12px; }
.mn-thread-day::before, .mn-thread-day::after {
  content: ''; flex: 1; height: 1px; background: var(--mn-admin-border);
}
.mn-thread-day span {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--mn-admin-border-strong);
}

.mn-msg {
  background: var(--mn-admin-surface);
  border: 1px solid var(--mn-admin-border);
  border-radius: 12px;
  padding: 15px 17px;
}
.mn-msg p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--mn-admin-text); white-space: pre-line; }
.mn-msg-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; }
.mn-msg-head strong { font-size: 12.5px; font-weight: 600; color: var(--mn-admin-text); }
.mn-msg-head span { font-size: 12px; color: var(--mn-admin-text-dim); }
.mn-msg-head .mn-tag { margin-left: auto; }

/* Unread messages are ringed rather than tinted: a colour wash over the
   message body would fight the screening thumbnails sitting inside it. */
.mn-msg.is-new {
  border-color: var(--mn-admin-action);
  box-shadow: 0 0 0 3px var(--mn-admin-focus-ring);
}

/* Her own note rides at the foot of the thread, visibly not part of it. */
.mn-thread-note {
  background: var(--mn-admin-surface-2);
  border: 1px solid var(--mn-admin-border);
  border-radius: 12px;
  padding: 14px 16px;
}
.mn-thread-note p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--mn-admin-text-muted); white-space: pre-line; }

.mn-dlg-foot .mn-crm-hint { margin-left: 6px; }

@media (max-width: 900px) {
  .mn-thread-panel { width: 100%; }
  .mn-thread-right { width: 100%; margin-left: 0; }
}

/* ── units that live in the field ─────────────────────────────────────────
   A placeholder that is a plausible VALUE rather than an instruction gets read
   as one. "400" in the Revenue field had creators skipping it, because a grey
   number in a box looks like a number in a box — the colour difference reads
   as styling, not as emptiness.

   So the unit is chrome instead: rendered inside the field, never removed,
   click-through, and impossible to mistake for something she typed. The field
   then needs no placeholder at all.
   ───────────────────────────────────────────────────────────────────────── */

.mn-affix { position: relative; display: block; }
.mn-affix > i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-size: 13.5px;
  color: var(--mn-admin-text-dim);
  pointer-events: none;      /* the click lands on the input underneath */
  user-select: none;
}

.mn-affix-pre > i { left: 12px; }
.mn-affix-pre .mn-in { padding-left: 26px; }

.mn-affix-suf > i { right: 13px; }
.mn-affix-suf .mn-in { padding-right: 42px; }

/* A number input's spinner sits exactly where a suffix goes. She types the
   figure; the arrows are worth less than the unit being readable. */
.mn-affix-suf .mn-in[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.mn-affix-suf .mn-in[type="number"]::-webkit-outer-spin-button,
.mn-affix-suf .mn-in[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Amounts line up when there is more than one on screen. */
.mn-affix-pre .mn-in { font-variant-numeric: tabular-nums; }

/* ══ Log a visit — the same form, opened from the header ═══════════════════
   Deliberately built from the shared dialog vocabulary rather than its own:
   .mn-dlg-panel.is-form, .mn-fld, .mn-in, .mn-dlg-grid2, .mn-dlg-foot — the
   same pieces the client record's version uses. Only three things are new
   here, and each earns it: the people chips, the Today/Yesterday shortcuts,
   and the disclosure that holds the rest of the fields.
   ═════════════════════════════════════════════════════════════════════════ */

.mn-qv-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 15px;
  border-radius: 8px;
  border: 1px solid var(--mn-admin-action);
  background: var(--mn-admin-action);
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.mn-qv-open:hover { background: var(--mn-admin-action-hover); border-color: var(--mn-admin-action-hover); color: #fff; }

.mn-qv-grip { display: none; }
.mn-qv-search { width: 100%; margin-left: 0; }

/* Her last few people, one tap each. On most nights this is the whole
   interaction and she never types a name. */
.mn-qv-people { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.mn-qv-person {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 13px 0 5px;
  border-radius: 100px;
  border: 1px solid var(--mn-admin-border);
  background: var(--mn-admin-surface);
  font: inherit;
  font-size: 13.5px;
  color: var(--mn-admin-text);
  cursor: pointer;
}
.mn-qv-person:hover { border-color: var(--mn-admin-border-strong); }
.mn-qv-person.is-on { border-color: var(--mn-admin-action); background: var(--mn-admin-focus-ring); }
.mn-qv-person em { font-style: normal; font-size: 12px; color: var(--mn-admin-text-dim); }
.mn-qv-av {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--mn-admin-surface-2);
  color: var(--mn-admin-text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  flex: none;
}
.mn-qv-person.is-on .mn-qv-av { background: var(--mn-admin-action); color: #fff; }
.mn-qv-new { font-size: 12.5px; line-height: 1.55; color: var(--mn-admin-text-dim); padding: 4px 2px; }
.mn-qv-new strong { color: var(--mn-admin-text); }

/* Under the date field, not crowding it. */
.mn-qv-when { display: flex; gap: 6px; margin-top: 7px; }
.mn-qv-day {
  height: 30px;
  padding: 0 11px;
  border-radius: 100px;
  border: 1px solid var(--mn-admin-border);
  background: var(--mn-admin-surface);
  font: inherit;
  font-size: 12.5px;
  color: var(--mn-admin-text-muted);
  cursor: pointer;
}
.mn-qv-day:hover { border-color: var(--mn-admin-border-strong); color: var(--mn-admin-text); }
.mn-qv-day.is-on { background: var(--mn-admin-action); border-color: var(--mn-admin-action); color: #fff; font-weight: 600; }

/* Everything the client record asks for, one click away rather than absent. */
.mn-qv-more { display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 0; }
.mn-qv-more svg { transition: transform .15s ease; }
.mn-qv-more.is-open svg { transform: rotate(45deg); }
.mn-qv-extra { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--mn-admin-border); }
.mn-qv-extra .mn-fld:last-of-type { margin-bottom: 6px; }

/* On a phone it is a sheet at the bottom, in reach of a thumb, rather than a
   dialog floating in the middle of a screen she is holding one-handed. */
@media (max-width: 640px) {
  .mn-qv-open-label { display: none; }
  .mn-qv-open { padding: 0 11px; }
  .mn-qv { align-items: flex-end; padding: 0; }
  .mn-qv-panel { width: 100%; border-radius: 18px 18px 0 0; max-height: 92%; }
  .mn-qv-panel .mn-dlg-head { padding-top: 10px; flex-wrap: wrap; }
  .mn-qv-grip {
    display: block;
    width: 38px; height: 4px;
    border-radius: 2px;
    background: var(--mn-admin-border-strong);
    margin: 0 auto 10px;
    flex-basis: 100%;
  }
  .mn-qv-panel .mn-dlg-grid2 { grid-template-columns: 1fr; }
  .mn-qv-panel .mn-in, .mn-qv-panel .mn-crm-search input { height: 48px; font-size: 16px; }  /* 16px: iOS will not zoom */
  .mn-qv-panel .mn-btn-sm { height: 48px; flex: 1; justify-content: center; }
}

/* ── Export ───────────────────────────────────────────────────────────────
   Presented as a plain shelf of files rather than something to be negotiated
   with. No spinner, no "we'll email you a link", no confirmation step.
   ───────────────────────────────────────────────────────────────────────── */

.mn-export-intro h2 { font-size: 20px; font-weight: 600; color: var(--mn-admin-text); margin: 0 0 6px; }
.mn-export-intro p { font-size: 14.5px; line-height: 1.6; color: var(--mn-admin-text-muted); margin: 0; max-width: 68ch; }

.mn-export-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.mn-export-card, .mn-export-all {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--mn-admin-border);
  border-radius: 14px;
  background: var(--mn-admin-surface);
  text-decoration: none;
  color: inherit;
}
.mn-export-card:hover, .mn-export-all:hover {
  border-color: var(--mn-admin-action);
  background: var(--mn-admin-focus-ring);
}
/* A file with nothing in it still downloads — headers and no rows is a valid
   answer, and greying it out would read as broken. */
.mn-export-card.is-empty { opacity: .62; }

.mn-export-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--mn-admin-surface-2);
  color: var(--mn-admin-text-muted);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.mn-export-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.mn-export-main strong { font-size: 15px; font-weight: 600; color: var(--mn-admin-text); }
.mn-export-main em {
  font-style: normal; font-size: 12px; color: var(--mn-admin-text-dim);
  font-variant-numeric: tabular-nums;
}
.mn-export-main span { font-size: 13px; line-height: 1.55; color: var(--mn-admin-text-muted); }
.mn-export-main span strong { font-size: inherit; }

.mn-export-fmt {
  flex: none;
  height: 21px;
  padding: 0 9px;
  border-radius: 5px;
  background: var(--mn-admin-surface-2);
  color: var(--mn-admin-text-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  display: inline-flex;
  align-items: center;
}
.mn-export-all { align-items: center; }

@media (max-width: 900px) { .mn-export-grid { grid-template-columns: 1fr; } }

/* ══ Earnings & seasonality ════════════════════════════════════════════════
   What she has recorded against the shape a month like this usually takes. The
   page shows only what its data supports — a weekday finding from a handful of
   visits, the whole week after a month, the six-year grid after a second year.
   ═════════════════════════════════════════════════════════════════════════ */

.mn-earn { gap: 20px; }

.mn-earn-head { display: flex; align-items: flex-start; gap: 16px; }
.mn-earn-title h2 { font-size: 20px; font-weight: 600; color: var(--mn-admin-text); margin: 0 0 4px; }
.mn-earn-title p { font-size: 14px; line-height: 1.55; color: var(--mn-admin-text-muted); margin: 0; }

/* Header actions on Earnings. The calendar link sits beside Hide amounts
   because the calendar is what decides whether a quiet day counts as a real
   zero — but it lives under Website Development in the sidebar, so from here
   there was no way to reach it. */
.mn-earn-head-actions {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
}
.mn-earn-cal {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 13px;
  border-radius: 100px;
  border: 1px solid var(--mn-admin-border);
  background: var(--mn-admin-surface);
  color: var(--mn-admin-text-muted);
  font: inherit; font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.mn-earn-cal:hover {
  color: var(--mn-admin-text);
  border-color: var(--mn-admin-text-muted);
}

.mn-earn-hide {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 13px;
  border-radius: 100px;
  border: 1px solid var(--mn-admin-border);
  background: var(--mn-admin-surface);
  color: var(--mn-admin-text-muted);
  font: inherit; font-size: 13px;
  cursor: pointer;
}
.mn-earn-hide:hover { border-color: var(--mn-admin-border-strong); color: var(--mn-admin-text); }
/* The eye swaps to a struck-through eye once amounts are hidden. */
.mn-earn .mn-earn-eye-off { display: none; }
.mn-earn.is-masked .mn-earn-eye { display: none; }
.mn-earn.is-masked .mn-earn-eye-off { display: inline; }

/* One class on every figure, so hiding is a single toggle. The blur is a
   privacy screen — the number is still in the DOM — which is all it needs to
   be against the actual threat: a person reading over her shoulder. */
.mn-earn.is-masked .mn-money {
  filter: blur(7px);
  user-select: none;
  transition: filter .12s ease;
}
.mn-money { font-variant-numeric: tabular-nums; }

.mn-earn-card {
  background: var(--mn-admin-surface);
  border: 1px solid var(--mn-admin-border);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.mn-earn-stage { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--mn-admin-text-dim); }
.mn-earn-lede { font-size: 16px; font-weight: 600; color: var(--mn-admin-text); margin: 0; line-height: 1.4; }
.mn-earn-fine { font-size: 12.5px; line-height: 1.6; color: var(--mn-admin-text-dim); margin: 0; }
.mn-earn-monthline { font-size: 14px; line-height: 1.6; color: var(--mn-admin-text-muted); margin: 0; }
.mn-earn-monthline strong, .mn-earn-monthline .mn-money { color: var(--mn-admin-text); }

.mn-earn-note {
  background: var(--mn-admin-surface-2);
  border-radius: 10px;
  padding: 13px 15px;
  font-size: 12.5px; line-height: 1.55; color: var(--mn-admin-text-muted);
}
.mn-earn-note strong { color: var(--mn-admin-text); }
.mn-earn-note a { display: inline-block; margin-top: 8px; font-weight: 600; color: var(--mn-admin-action); }

/* ── nothing yet ──────────────────────────────────────────────────────────── */
.mn-earn-empty {
  background: var(--mn-admin-surface);
  border: 1px solid var(--mn-admin-border);
  border-radius: 14px;
  padding: 28px 26px;
  display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap;
}
.mn-earn-empty-main { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.mn-earn-empty-main h3 { font-size: 18px; font-weight: 600; color: var(--mn-admin-text); margin: 0; }
.mn-earn-empty-main p { font-size: 14px; line-height: 1.6; color: var(--mn-admin-text-muted); margin: 0; max-width: 52ch; }
.mn-earn-empty .mn-earn-note { width: 300px; flex: none; align-self: stretch; }
@media (max-width: 760px) { .mn-earn-empty .mn-earn-note { width: 100%; } }

/* ── weekday bars (list) ──────────────────────────────────────────────────── */
.mn-earn-bars { display: flex; flex-direction: column; gap: 9px; }
.mn-earn-brow { display: flex; align-items: center; gap: 11px; }
.mn-earn-bday { width: 32px; font-size: 12.5px; color: var(--mn-admin-text-muted); }
.mn-earn-btrack { flex: 1; height: 12px; border-radius: 3px; background: var(--mn-admin-surface-2); overflow: hidden; }
.mn-earn-bfill { display: block; height: 100%; border-radius: 3px; background: var(--mn-admin-action); }
.mn-earn-bval { width: 62px; text-align: right; font-size: 12.5px; color: var(--mn-admin-text); }

/* ── weekday columns (this-month stage) ───────────────────────────────────── */
.mn-earn-week { display: flex; align-items: flex-end; gap: 6px; height: 104px; }
.mn-earn-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.mn-earn-col-bar { width: 100%; min-height: 3px; border-radius: 3px 3px 0 0; background: var(--mn-admin-action); }
.mn-earn-col-lab { font-size: 10.5px; color: var(--mn-admin-text-dim); }

/* ── seasonal hero ────────────────────────────────────────────────────────── */
.mn-earn-hero {
  background: var(--mn-admin-surface);
  border: 1px solid var(--mn-admin-border);
  border-radius: 14px;
  padding: 22px 24px;
  display: flex; gap: 32px; align-items: flex-start;
}
.mn-earn-hero-main { flex: 1; min-width: 0; }
.mn-earn-hero-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.mn-earn-hero-h { font-size: 17px; font-weight: 600; color: var(--mn-admin-text); }
.mn-earn-hero-sub { font-size: 12.5px; color: var(--mn-admin-text-dim); }
.mn-earn-hero-fig { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.mn-earn-big { font-size: 32px; font-weight: 600; color: var(--mn-admin-text); letter-spacing: -.02em; }
.mn-earn-hero-band { font-size: 14px; line-height: 1.6; color: var(--mn-admin-text-muted); margin: 0 0 14px; }
.mn-earn-hero-band .mn-money { color: var(--mn-admin-text); font-weight: 600; }

.mn-earn-badge {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 11px; border-radius: 100px;
  font-size: 12px; font-weight: 600;
}
.mn-earn-badge.is-ok   { background: var(--mn-admin-success-soft); color: var(--mn-admin-success); }
.mn-earn-badge.is-low  { background: var(--mn-admin-warning-soft); color: var(--mn-admin-warning); }
.mn-earn-badge.is-high { background: var(--mn-admin-success-soft); color: var(--mn-admin-success); }

.mn-earn-stats { display: flex; gap: 24px; padding-top: 14px; border-top: 1px solid var(--mn-admin-border); flex-wrap: wrap; }
.mn-earn-stat { display: flex; flex-direction: column; gap: 3px; }
.mn-earn-stat-lab { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--mn-admin-text-dim); }
.mn-earn-stat-val { font-size: 14px; color: var(--mn-admin-text); font-weight: 600; }
.mn-earn-stat-val em { font-style: normal; font-weight: 400; font-size: 12.5px; color: var(--mn-admin-text-dim); }

.mn-earn-hero-side { width: 320px; flex: none; }
.mn-earn-side-lab { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--mn-admin-text-dim); margin-bottom: 11px; }
.mn-earn-yrow { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.mn-earn-yrow.is-cur { padding-top: 7px; margin-top: 3px; border-top: 1px solid var(--mn-admin-border); }
.mn-earn-yr { width: 34px; font-size: 12.5px; color: var(--mn-admin-text-dim); }
.mn-earn-yrow.is-cur .mn-earn-yr { color: var(--mn-admin-text); font-weight: 600; }
.mn-earn-ytrack { flex: 1; height: 12px; border-radius: 3px; background: var(--mn-admin-surface-2); overflow: hidden; }
.mn-earn-yfill { display: block; height: 100%; border-radius: 3px; background: #E3C6CD; }
.mn-earn-yrow.is-cur .mn-earn-yfill { background: var(--mn-admin-action); }
.mn-earn-yval { width: 60px; text-align: right; font-size: 12.5px; color: var(--mn-admin-text-dim); }
.mn-earn-yrow.is-cur .mn-earn-yval { color: var(--mn-admin-text); font-weight: 600; }

@media (max-width: 1000px) {
  .mn-earn-hero { flex-direction: column; gap: 22px; }
  .mn-earn-hero-side { width: 100%; }
}

/* ── six-year grid ────────────────────────────────────────────────────────── */
.mn-earn-gridcard { gap: 16px; }
.mn-earn-gridhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mn-earn-gridtitle { font-size: 15px; font-weight: 600; color: var(--mn-admin-text); }
.mn-earn-gridnote { font-size: 12.5px; color: var(--mn-admin-text-dim); }
/* The grid is 13 columns wide; on a narrow viewport it scrolls in its own box
   rather than forcing the page sideways. */
.mn-earn-gridscroll { overflow-x: auto; }
.mn-earn-grid {
  display: grid;
  grid-template-columns: 54px repeat(12, minmax(46px, 1fr));
  gap: 3px;
  min-width: 620px;
}
.mn-earn-grid + .mn-earn-grid { margin-top: 3px; }
.mn-earn-mo { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--mn-admin-text-dim); text-align: center; padding-bottom: 6px; }
.mn-earn-gy { font-size: 12.5px; color: var(--mn-admin-text-dim); display: flex; align-items: center; height: 34px; }
.mn-earn-gy.is-cur { color: var(--mn-admin-text); font-weight: 600; }
.mn-earn-cell {
  height: 34px;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 9px; border-radius: 5px;
  font-size: 12px; color: #1B1613;
  font-variant-numeric: tabular-nums;
}
.mn-earn-cell.is-current { outline: 2px solid var(--mn-admin-action); outline-offset: -2px; }
.mn-earn-cell.is-empty, .mn-earn-cell.is-future {
  background: var(--mn-admin-bg, var(--mn-admin-surface-2));
  color: var(--mn-admin-text-dim);
  border: 1px dashed var(--mn-admin-border);
  justify-content: center;
}
.mn-earn-usual { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--mn-admin-border); }
.mn-earn-cell.is-usual { background: none; color: var(--mn-admin-text-dim); }
.mn-earn-usual .mn-earn-gy { font-size: 11px; }

/* ══ Capture prompt ════════════════════════════════════════════════════════
   "You were in Loveland yesterday. Anything to log?" — the ask that turns
   recording from something she must remember into a question she answers in
   four seconds. The middle button is the point: "Nothing happened" is the one
   datum the earnings work cannot get any other way.
   ═════════════════════════════════════════════════════════════════════════ */

.mn-cap { margin-bottom: 18px; }
.mn-cap[hidden] { display: none; }

.mn-cap-card {
  display: flex; gap: 15px; align-items: flex-start;
  background: var(--mn-admin-surface);
  border: 1px solid var(--mn-admin-border);
  border-radius: 14px;
  padding: 16px 18px;
}
.mn-cap-icon {
  width: 40px; height: 40px; flex: none;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mn-admin-focus-ring);
  color: var(--mn-admin-action);
}
.mn-cap-body { flex: 1; min-width: 0; }
.mn-cap-ask { font-size: 15px; font-weight: 600; color: var(--mn-admin-text); margin-bottom: 5px; }
.mn-cap-src { font-size: 12.5px; line-height: 1.5; color: var(--mn-admin-text-dim); margin-bottom: 13px; }

.mn-cap-acts { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.mn-cap-acts.is-busy { opacity: .5; pointer-events: none; }
.mn-cap-btn {
  height: 36px; padding: 0 15px;
  border-radius: 8px;
  font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center;
}
/* Log a visit is the expected answer; it leads. */
.mn-cap-log {
  background: var(--mn-admin-action); border: 1px solid var(--mn-admin-action); color: #fff;
}
.mn-cap-log:hover { background: var(--mn-admin-action-hover); border-color: var(--mn-admin-action-hover); }
/* Nothing happened is the IMPORTANT answer, but a quieter one — it must read as
   an equal, honest choice, never as a chore or a mistake. */
.mn-cap-none {
  background: var(--mn-admin-surface); border: 1px solid var(--mn-admin-border); color: var(--mn-admin-text-muted);
}
.mn-cap-none:hover { border-color: var(--mn-admin-border-strong); color: var(--mn-admin-text); }
/* Not now is the lightest thing on the card: available, not inviting. */
.mn-cap-not {
  background: none; border: 0; color: var(--mn-admin-text-dim); padding-left: 6px;
}
.mn-cap-not:hover { color: var(--mn-admin-text-muted); }

@media (max-width: 640px) {
  .mn-cap-btn { flex: 1; justify-content: center; }
  .mn-cap-not { flex-basis: 100%; }
}

/* ══ Earnings drill-down — a month, and then a day ═════════════════════════
   Progressive: the grid opens a month, the month opens a day, the day names
   the people. Each level shows how much is behind what it says.
   ═════════════════════════════════════════════════════════════════════════ */

/* The grid cell became a button; it must still look like a heat cell. */
button.mn-earn-cell { border: 0; font: inherit; cursor: pointer; padding: 0; }
button.mn-earn-cell:hover { outline: 2px solid var(--mn-admin-action); outline-offset: -2px; }
button.mn-earn-cell:focus-visible { outline: 2px solid var(--mn-admin-action); outline-offset: 1px; }

.mn-earn-panel { width: min(1180px, 100%); height: auto; max-height: 100%; }
.mn-earn-daypanel { width: min(660px, 100%); height: auto; max-height: 100%; }
.mn-earn-total { font-size: 19px; font-weight: 600; color: var(--mn-admin-text); font-variant-numeric: tabular-nums; }

.mn-earn-monthbody {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 22px;
  padding: 20px 22px 22px;
  overflow-y: auto;
  min-height: 0;
}
.mn-earn-calside { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.mn-earn-panels  { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* ── the calendar ───────────────────────────────────────────────────────── */

.mn-cal-head, .mn-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mn-cal-dow {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: var(--mn-admin-border-strong); text-align: center; padding-bottom: 2px;
}
.mn-cal-pad { }
.mn-cal-day {
  height: 58px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.mn-cal-day em { font-style: normal; font-size: 10.5px; color: var(--mn-admin-text-dim); font-variant-numeric: tabular-nums; }
.mn-cal-day span { font-size: 12px; font-weight: 600; color: var(--mn-admin-text); text-align: right; font-variant-numeric: tabular-nums; }
.mn-cal-day:hover { outline: 2px solid var(--mn-admin-action); outline-offset: -2px; }

/* Three states, and only one of them is a number. A day we know nothing about
   is blank; a day she confirmed she took nothing says so. Neither is $0. */
.mn-cal-day.is-unknown { background: var(--mn-admin-bg); border-color: var(--mn-admin-border); }
.mn-cal-day.is-zero    { background: var(--mn-admin-surface-2); border-color: var(--mn-admin-border); }
.mn-cal-day.is-zero span { color: var(--mn-admin-text-dim); font-weight: 500; font-size: 11px; }
.mn-cal-day.is-future  { background: none; border: 1px dashed var(--mn-admin-border); cursor: default; }
.mn-cal-day.is-future em { color: var(--mn-admin-border-strong); }

/* ── "a date is not a pattern" ──────────────────────────────────────────── */

.mn-earn-confound {
  margin-top: auto;
  background: var(--mn-admin-surface-2);
  border: 1px solid var(--mn-admin-border);
  border-radius: 11px;
  padding: 13px 15px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--mn-admin-text-muted);
}
.mn-earn-confound strong { color: var(--mn-admin-text); }
.mn-cf {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin: 4px 6px 0 0;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--mn-admin-surface);
  border: 1px solid var(--mn-admin-border);
  font-variant-numeric: tabular-nums;
}
.mn-cf em { font-style: normal; font-weight: 600; color: var(--mn-admin-text); }
.mn-cf i  { font-style: normal; color: var(--mn-admin-text-dim); }
.mn-earn-confound-tail { display: block; margin-top: 9px; color: var(--mn-admin-text-dim); }

/* ── the panels beside it ───────────────────────────────────────────────── */

.mn-earn-sub h4 { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--mn-admin-text); }
.mn-earn-sub p  { margin: 0 0 11px; font-size: 12px; line-height: 1.55; color: var(--mn-admin-text-dim); }

.mn-wk { display: flex; flex-direction: column; gap: 7px; }
.mn-wk-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.mn-wk-d { width: 32px; color: var(--mn-admin-text-dim); flex: none; }
.mn-wk-n { width: 40px; font-size: 10.5px; color: var(--mn-admin-border-strong); flex: none; font-variant-numeric: tabular-nums; }
.mn-wk-bars { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mn-wk-bar { height: 9px; border-radius: 3px; min-width: 2px; }
.mn-wk-bar.is-month { background: var(--mn-admin-action); }
.mn-wk-bar.is-usual { background: var(--mn-admin-border-strong); }
.mn-wk-v { width: 62px; text-align: right; color: var(--mn-admin-text); flex: none; font-variant-numeric: tabular-nums; }
.mn-wk-row.is-untested .mn-wk-v { color: var(--mn-admin-text-dim); font-size: 11.5px; }

.mn-wk-key { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; }
.mn-wk-key i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.mn-wk-key i.is-month { background: var(--mn-admin-action); }
.mn-wk-key i.is-usual { background: var(--mn-admin-border-strong); margin-left: 7px; }

.mn-ord { display: flex; gap: 8px; align-items: flex-end; }
.mn-ord-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 108px; justify-content: flex-end; }
.mn-ord-bar { width: 100%; background: var(--mn-admin-action); border-radius: 3px 3px 0 0; min-height: 3px; }
.mn-ord-col em { font-style: normal; font-size: 10.5px; color: var(--mn-admin-text-dim); }
.mn-ord-col span { font-size: 11.5px; font-weight: 600; color: var(--mn-admin-text); font-variant-numeric: tabular-nums; }
.mn-ord-col i { font-style: normal; font-size: 10px; color: var(--mn-admin-border-strong); font-variant-numeric: tabular-nums; }

/* ── the day ────────────────────────────────────────────────────────────── */

.mn-day-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.mn-day-visit { display: flex; gap: 12px; align-items: flex-start; }
.mn-day-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mn-day-top { display: flex; align-items: baseline; gap: 10px; }
.mn-day-top strong { font-size: 14.5px; font-weight: 600; color: var(--mn-admin-text); }
.mn-day-top .mn-money { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--mn-admin-text); font-variant-numeric: tabular-nums; }
.mn-day-meta { font-size: 12.5px; color: var(--mn-admin-text-dim); }
.mn-day-meta b { font-weight: 600; color: var(--mn-admin-success); }
.mn-day-main p { margin: 5px 0 0; font-size: 13px; line-height: 1.55; color: var(--mn-admin-text-muted); white-space: pre-line; }
.mn-day-link { flex: none; font-size: 12.5px; font-weight: 600; color: var(--mn-admin-action); text-decoration: none; }
.mn-day-link:hover { text-decoration: underline; }
.mn-day-none { margin: 0; font-size: 14px; line-height: 1.65; color: var(--mn-admin-text-muted); }
.mn-day-none strong { color: var(--mn-admin-text); }

@media (max-width: 980px) {
  .mn-earn-monthbody { grid-template-columns: 1fr; }
  .mn-cal-day { height: 50px; }
}

/* "Nothing recorded" and "hasn't happened yet" shared one style, so December
   read the same as a January she never logged. They are different claims —
   one is a gap in the record, the other is the future — and everywhere else in
   this feature they are drawn apart. A month still to come carries no border
   at all: nothing is missing from it. */
.mn-earn-cell.is-future {
  border: 1px solid transparent;
  background: none;
  color: var(--mn-admin-border-strong);
}

/* What she wrote while screening someone lives on the inquiry, not the person
   — they answer different questions, and merging them would lose which check
   belonged to which approach. Shown with the inquiry it belongs to, marked as
   hers so it is not mistaken for something they sent. */
.mn-hist-note {
  display: block;
  margin: 6px 0 2px;
  padding: 9px 11px;
  border-left: 2px solid var(--mn-admin-border-strong);
  background: var(--mn-admin-surface-2);
  border-radius: 0 7px 7px 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--mn-admin-text-muted);
  white-space: pre-line;
  overflow-wrap: anywhere;      /* a pasted BeenVerified URL must not widen the panel */
}
.mn-hist-note em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mn-admin-text-dim);
  margin-bottom: 3px;
}

/* ══ A filter is not a decision ═══════════════════════════════════════════
   The list's chips and the record's status control were the same component,
   so a view and a choice looked like one kind of thing. The rule marks where
   "still needs me" stops and "already answered" starts.
   ═════════════════════════════════════════════════════════════════════════ */

.mn-crm-filters-split { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--mn-admin-border); }

.mn-decide-ask { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.mn-decide-ask .mn-btn-sm { flex: 1; justify-content: center; white-space: nowrap; }

/* "Waiting on them" needs to know what for — "asked 11 days ago" does not tell
   her whether to care; "asked for a deposit" does. */
.mn-decide-for {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin: 0 0 11px;
  padding: 11px 13px;
  background: var(--mn-admin-surface-2);
  border-radius: 10px;
}
.mn-decide-for > span { font-size: 12.5px; color: var(--mn-admin-text-muted); margin-right: 2px; }
.mn-decide-for .mn-chip { height: 30px; font-size: 12.5px; }

.mn-decide-made {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0; padding: 13px 15px;
  border-radius: 10px;
  font-size: 13.5px; line-height: 1.6;
}
.mn-decide-made span { flex: 1; min-width: 0; }
.mn-decide-made strong { font-weight: 600; color: var(--mn-admin-text); }
/* Screened is deliberately its own colour — not the green of a client, because
   that is the distinction the whole change exists to draw. */
.mn-decide-made.is-screened { background: #F0F6FA; border: 1px solid #C8DCEA; color: var(--mn-admin-text-muted); }
.mn-decide-made.is-ok       { background: var(--mn-admin-success-soft); border: 1px solid var(--mn-admin-success); color: var(--mn-admin-success); }
.mn-crm-reply { margin-top: 10px; }
.mn-crm-reply textarea { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; padding: 9px 11px; border: 1px solid var(--mn-admin-border); border-radius: 8px; }
.mn-crm-reply-acts { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.mn-decide-made.is-wait     { background: var(--mn-admin-surface-2); border: 1px solid var(--mn-admin-border); color: var(--mn-admin-text-muted); }
.mn-decide-made.is-no       { background: var(--mn-admin-surface-2); border: 1px solid var(--mn-admin-border); color: var(--mn-admin-text-muted); }

.mn-decide-undo {
  flex: none; border: 0; background: none; padding: 0;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--mn-admin-action); cursor: pointer;
}
.mn-decide-undo:hover { text-decoration: underline; }

/* ══ A booking is not a visit ═════════════════════════════════════════════
   Both are rows in the same history, and they were drawn identically, which
   made the past look busier than it was and the future look like income.
   ═════════════════════════════════════════════════════════════════════════ */

/* Deliberately not the green of a client: passing a check and being a
   customer are the distinction this whole vocabulary exists to draw. */
.mn-tag-screened { background: #EAF2F8; color: #2F5C7A; }
/* The brand rose, so a night on the calendar reads as hers and forthcoming —
   distinct from the green of money already earned. */
.mn-tag-booked   { background: #F7EAEC; color: var(--mn-admin-action-hover); }

.mn-visit.is-booked { border-style: dashed; background: var(--mn-admin-surface-2); }
.mn-visit.is-void   { opacity: .62; }
.mn-visit.is-void .mn-visit-money { text-decoration: line-through; }

.mn-visit-ask {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--mn-admin-border);
}
.mn-visit-ask > span { font-size: 12.5px; color: var(--mn-admin-text-muted); }
.mn-visit-ask .mn-chip { height: 28px; font-size: 12px; }

/* ══ The empty visit history is where she learns how to book ══════════════
   For someone who is not a client yet, "no visits" is not a fact to report —
   it is the exact moment she needs telling what moves them across.
   ═════════════════════════════════════════════════════════════════════════ */
.mn-next {
  padding: 16px 18px;
  border: 1px dashed var(--mn-admin-border-strong);
  border-radius: 11px;
  background: var(--mn-admin-surface-2);
}
.mn-next p { margin: 0 0 13px; font-size: 13.5px; line-height: 1.6; color: var(--mn-admin-text-muted); }
.mn-next strong { color: var(--mn-admin-text); font-weight: 600; }
.mn-next-acts { display: flex; gap: 9px; flex-wrap: wrap; }