/* Meeting Reports — two persistent panes, detail takes the right pane over.
 *
 * Everything is namespaced .mr-* so nothing leaks into the rest of the CRM.
 *
 * .dashboard-content is height:100%/overflow:hidden (styles.css:704-712), so
 * this page MUST own its own scroll or it simply cannot scroll. Above 900px the
 * rail and the main pane each scroll independently and the page itself does not;
 * below 900px the panes go static and the page scrolls as one column, which is
 * what a phone expects.
 *
 * Colour comes from local --mr-* tokens set on .mr-page and re-pointed wholesale
 * under html[data-theme="dark"], the same mechanism the old file used. Semantic
 * chips (interest, status, focus, AI, missing) carry their own dark overrides
 * further down because they are not derived from a surface token.
 */

.mr-page {
  /* surfaces */
  --mr-bg: transparent;
  --mr-card: var(--card-bg, #fff);
  --mr-card-2: #f8fafc;
  --mr-border: var(--border-color, #e2e8f0);
  --mr-border-soft: #eef2f6;
  /* ink */
  --mr-ink: var(--text-primary, #1e293b);
  --mr-ink-2: var(--text-secondary, #475569);
  --mr-ink-3: var(--text-muted, #64748b);
  --mr-ink-4: #94a3b8;
  /* accents */
  --mr-accent: #2563eb;
  --mr-accent-soft: #eff6ff;
  --mr-violet: #7c3aed;
  --mr-violet-soft: #f3f0fe;
  --mr-amber: #b45309;
  --mr-amber-soft: #fef3c7;

  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  position: relative;
  color: var(--mr-ink-2);
}

/* ── header ───────────────────────────────────────────────────────────────── */
.mr-header { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.mr-head-texts { min-width: 0; flex: 1; }
.mr-title-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mr-title { font-size: 24px; font-weight: 700; margin: 0; color: var(--mr-ink); letter-spacing: -0.01em; }
.mr-count-badge {
  display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 600; color: var(--mr-ink-3);
  background: var(--mr-card-2); border: 1px solid var(--mr-border);
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.mr-count-badge:empty { display: none; }
.mr-sub { color: var(--mr-ink-3); font-size: 13px; margin: 6px 0 0; }

/* ── buttons ──────────────────────────────────────────────────────────────── */
.mr-btn {
  border: 1px solid var(--mr-border); background: var(--mr-card);
  border-radius: 8px; padding: 8px 14px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; color: var(--mr-ink-2); white-space: nowrap; flex-shrink: 0;
  transition: background .12s ease, border-color .12s ease;
}
.mr-btn:hover { background: var(--mr-card-2); border-color: #cbd5e1; }
.mr-btn-primary { background: var(--mr-accent); border-color: var(--mr-accent); color: #fff; }
.mr-btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.mr-btn-danger { color: #b91c1c; border-color: #fecaca; background: var(--mr-card); }
.mr-btn-danger:hover { background: #fef2f2; border-color: #fca5a5; }
.mr-mini {
  border: 1px solid var(--mr-border); background: var(--mr-card); border-radius: 7px;
  padding: 4px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer;
  color: var(--mr-ink-2); white-space: nowrap;
}
.mr-mini:hover { background: var(--mr-card-2); border-color: #cbd5e1; }
.mr-mini:disabled { opacity: .6; cursor: default; }
.mr-back {
  border: 1px solid var(--mr-border); background: var(--mr-card); border-radius: 8px;
  padding: 7px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--mr-ink-2); white-space: nowrap; flex-shrink: 0;
}
.mr-back:hover { background: var(--mr-card-2); }
/* The reps back-button only exists when the rail is hidden. The list one is
   always visible: on desktop it is the only escape from the detail takeover. */
.mr-back-reps { display: none; }

/* ── job bar ──────────────────────────────────────────────────────────────── */
.mr-jobbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--mr-violet-soft); border: 1px solid #e7e3fb;
  border-radius: 10px; padding: 9px 14px; font-size: 12.5px; color: #5b21b6;
}
.mr-jobbar-txt { font-weight: 600; }
.mr-jobchip {
  background: #ede9fe; color: #6d28d9; border-radius: 999px;
  padding: 2px 9px; font-size: 11px; font-weight: 600;
}

/* ── tiles ────────────────────────────────────────────────────────────────── */
.mr-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mr-tile {
  text-align: left; background: var(--mr-card); border: 1px solid var(--mr-border);
  border-radius: 12px; padding: 14px 16px; cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.mr-tile:hover { border-color: #cbd5e1; }
.mr-tile.active { border-color: var(--mr-accent); box-shadow: 0 0 0 1px var(--mr-accent); }
.mr-tile-value { font-size: 26px; font-weight: 700; color: var(--mr-ink); line-height: 1.1; font-feature-settings: "tnum"; }
.mr-tile-label { font-size: 12.5px; color: var(--mr-ink-3); margin-top: 3px; font-weight: 600; }
.mr-tile-hint { font-size: 10.5px; color: var(--mr-ink-4); margin-top: 1px; }
.mr-tile-amber .mr-tile-value { color: var(--mr-amber); }

/* ── the two panes ────────────────────────────────────────────────────────── */
.mr-two {
  display: grid; grid-template-columns: 288px 1fr; gap: 16px;
  align-items: stretch; flex: 1; min-height: 0;
}
.mr-rail {
  display: flex; flex-direction: column; gap: 8px;
  min-height: 0; overflow-y: auto; padding-right: 4px;
}
.mr-main {
  min-width: 0; min-height: 0; overflow-y: auto;
  background: var(--mr-card); border: 1px solid var(--mr-border);
  border-radius: 14px; padding: 18px;
}

/* ── rail ─────────────────────────────────────────────────────────────────── */
.mr-rail-search, .mr-filter-search {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--mr-border); border-radius: 9px;
  padding: 8px 11px; font-size: 12.5px; font: inherit; font-size: 12.5px;
  background: var(--mr-card); color: var(--mr-ink);
}
.mr-rail-search::placeholder, .mr-filter-search::placeholder { color: var(--mr-ink-4); }
.mr-rail-search:focus, .mr-filter-search:focus { outline: 2px solid var(--mr-accent); outline-offset: -1px; }

.mr-rail-sorts { display: flex; gap: 6px; }
.mr-sortchip {
  flex: 1; border: 1px solid var(--mr-border); background: var(--mr-card);
  border-radius: 7px; padding: 4px 6px; font-size: 11px; font-weight: 600;
  cursor: pointer; color: var(--mr-ink-3);
}
.mr-sortchip:hover { background: var(--mr-card-2); }
.mr-sortchip.active { background: var(--mr-accent); border-color: var(--mr-accent); color: #fff; }

.mr-rail-list { display: flex; flex-direction: column; gap: 7px; }
.mr-rail-empty { font-size: 12px; color: var(--mr-ink-3); padding: 10px 2px; }

.mr-rep-item {
  display: flex; align-items: center; gap: 10px; text-align: left;
  border: 1px solid var(--mr-border); background: var(--mr-card);
  border-radius: 11px; padding: 9px 11px; cursor: pointer; width: 100%;
  box-sizing: border-box; transition: border-color .12s ease, box-shadow .12s ease;
}
.mr-rep-item:hover { border-color: #cbd5e1; }
.mr-rep-item.active { border-color: var(--mr-accent); box-shadow: 0 0 0 1px var(--mr-accent); }
.mr-rep-item:focus-visible { outline: 2px solid var(--mr-accent); outline-offset: 1px; }
.mr-rep-all { background: var(--mr-card-2); }

.mr-rep-av { flex-shrink: 0; width: 32px; height: 32px; }
.mr-rep-photo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; }
.mr-rep-initials {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  background: #e2e8f0; color: #475569;
}
.mr-rep-txt { min-width: 0; flex: 1; }
.mr-rep-top { display: flex; align-items: center; gap: 6px; }
.mr-rep-name {
  font-size: 13px; font-weight: 700; color: var(--mr-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mr-rep-unlinked {
  flex-shrink: 0; font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .03em; padding: 2px 6px; border-radius: 999px;
  background: var(--mr-amber-soft); color: #92600e; cursor: help;
}
.mr-rep-meta { font-size: 11px; color: var(--mr-ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── list header ──────────────────────────────────────────────────────────── */
.mr-list-hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.mr-list-titles { min-width: 0; }
.mr-list-title { font-size: 17px; font-weight: 700; color: var(--mr-ink); }
.mr-list-sub { font-size: 12px; color: var(--mr-ink-3); margin-top: 1px; }

/* ── filters ──────────────────────────────────────────────────────────────── */
.mr-filters {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--mr-border-soft);
}
.mr-filter-search { flex: 1 1 220px; min-width: 160px; width: auto; }
.mr-fchips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.mr-fchip {
  border: 1px solid var(--mr-border); background: var(--mr-card); border-radius: 999px;
  padding: 5px 11px; font-size: 11.5px; font-weight: 600; cursor: pointer; color: var(--mr-ink-3);
  white-space: nowrap;
}
.mr-fchip:hover { background: var(--mr-card-2); }
.mr-fchip.active { background: var(--mr-accent); border-color: var(--mr-accent); color: #fff; }
.mr-ftoggle.active { background: #d97706; border-color: #d97706; }

.mr-fselect-wrap { display: inline-flex; align-items: center; gap: 5px; }
.mr-fselect-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--mr-ink-4); }
.mr-fselect {
  border: 1px solid var(--mr-border); border-radius: 8px; padding: 5px 8px;
  font-size: 12px; font-weight: 600; background: var(--mr-card); color: var(--mr-ink-2);
  cursor: pointer; max-width: 170px;
}

/* ── meeting cards ────────────────────────────────────────────────────────── */
.mr-cards { display: flex; flex-direction: column; gap: 10px; }
.mr-meeting-card {
  display: flex; flex-direction: column; gap: 7px; text-align: left; width: 100%;
  box-sizing: border-box; border: 1px solid var(--mr-border); background: var(--mr-card);
  border-radius: 12px; padding: 13px 15px; cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.mr-meeting-card:hover { border-color: #cbd5e1; }
.mr-meeting-card.active { border-color: var(--mr-accent); box-shadow: 0 0 0 1px var(--mr-accent); }
.mr-meeting-card:focus-visible { outline: 2px solid var(--mr-accent); outline-offset: 1px; }

.mr-card-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mr-card-date { font-size: 11.5px; font-weight: 700; color: var(--mr-ink-3); font-feature-settings: "tnum"; }
.mr-card-client { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mr-card-name { font-size: 14.5px; font-weight: 700; color: var(--mr-ink); }
.mr-card-company { font-size: 11.5px; color: var(--mr-ink-4); }
.mr-card-focus { display: flex; gap: 5px; flex-wrap: wrap; }
.mr-card-snip { font-size: 12.5px; color: var(--mr-ink-2); line-height: 1.5; }
.mr-card-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 1px; }
.mr-card-steps { font-size: 11.5px; color: var(--mr-ink-3); }

/* ── chips, statuses, flags ───────────────────────────────────────────────── */
.mr-chip {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  background: var(--mr-card-2); color: var(--mr-ink-2);
}
/* A focus area is FREE TEXT off the sheet's "Other:" row, not a short enum
   value, so a single chip can carry a whole sentence. One real sheet reads
   "Transmission Poles, Building & Fencing Poles, Vineyard & Fruit Trellising,
   Guardrails and Signage Poles", which with white-space:nowrap and no max-width
   pushed the card ~330px past a 390px viewport. Truncate instead of overflowing,
   and keep the full value reachable via the title attribute and the detail view. */
.mr-card-focus, .mr-chiprow { min-width: 0; }
.mr-card-focus .mr-chip, .mr-chiprow .mr-chip {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  display: inline-block; line-height: 17px;
}
.mr-chip-type { background: #eef2ff; color: #3730a3; }
.mr-chip-rep { background: #f1f5f9; color: #475569; }
.mr-chip-more { background: #e2e8f0; color: #475569; font-weight: 700; }
.mr-chip-step { background: var(--mr-accent-soft); color: #1d4ed8; }

.mr-chip-focus { font-weight: 600; }
.mr-fa-machinery  { background: #e0e7ff; color: #3730a3; }
.mr-fa-crop       { background: #dcfce7; color: #15803d; }
.mr-fa-livestock  { background: #ffedd5; color: #9a3412; }
.mr-fa-irrigation { background: #cffafe; color: #0e7490; }
.mr-fa-other      { background: #f1f5f9; color: #475569; }

.mr-status {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 6px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.mr-status-filed { background: #dcfce7; color: #15803d; }
.mr-status-awaiting_info { background: var(--mr-amber-soft); color: #b45309; }
.mr-status-draft { background: #f1f5f9; color: #475569; }
.mr-status-sent { background: #dbeafe; color: #1d4ed8; }

.mr-interest-high { background: #dcfce7; color: #15803d; }
.mr-interest-mid  { background: var(--mr-amber-soft); color: #b45309; }
.mr-interest-low  { background: #fee2e2; color: #b91c1c; }
.mr-interest-conflict {
  background: #fdeaea; color: #c0392b; font-weight: 700;
  border: 1px dashed #f3a5a5;
}

.mr-flag {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px;
  font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap;
}
.mr-flag-ai { background: #ede9fe; color: #6d28d9; }
.mr-flag-missing { background: var(--mr-amber-soft); color: #92600e; }

/* ── empty / zero / loading / error ───────────────────────────────────────── */
.mr-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 46px 20px; text-align: center; }
.mr-empty-t { font-size: 14.5px; font-weight: 700; color: var(--mr-ink); }
.mr-empty-s { font-size: 12.5px; color: var(--mr-ink-3); max-width: 380px; line-height: 1.5; }
.mr-empty .mr-btn { margin-top: 6px; }

.mr-zero { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; text-align: center; }
.mr-zero-t { font-size: 18px; font-weight: 700; color: var(--mr-ink); }
.mr-zero-s { font-size: 13px; color: var(--mr-ink-3); max-width: 420px; line-height: 1.5; }
.mr-zero-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; width: 100%; max-width: 660px; }
.mr-zero-tile {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  border: 1px solid var(--mr-border); background: var(--mr-card); border-radius: 12px;
  padding: 18px 12px; cursor: pointer; transition: border-color .12s ease;
}
.mr-zero-tile:hover { border-color: var(--mr-accent); }
.mr-zero-ic { font-size: 22px; line-height: 1; color: var(--mr-accent); }
.mr-zero-tt { font-size: 12.5px; font-weight: 700; color: var(--mr-ink); }
.mr-zero-ts { font-size: 11px; color: var(--mr-ink-4); line-height: 1.4; }

.mr-loading { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 40px 20px; color: var(--mr-ink-3); font-size: 12.5px; }
.mr-spin {
  width: 14px; height: 14px; border-radius: 999px; flex-shrink: 0;
  border: 2px solid #ddd6fe; border-top-color: var(--mr-violet);
  display: inline-block; animation: mr-spin .7s linear infinite;
}
@keyframes mr-spin { to { transform: rotate(360deg); } }

.mr-error { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px; text-align: center; }
.mr-error-msg { font-size: 13px; color: #b91c1c; max-width: 420px; line-height: 1.5; }

.mr-warn {
  background: var(--mr-amber-soft); border: 1px solid #fcd9a0; color: #92600e;
  border-radius: 9px; padding: 8px 12px; font-size: 12px; margin-bottom: 12px;
}
.mr-review {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  background: var(--mr-amber-soft); border: 1px solid #fcd9a0;
  border-radius: 9px; padding: 9px 13px; margin-bottom: 12px;
}
.mr-review-list { margin: 0; padding-left: 18px; font-size: 12px; color: #92600e; line-height: 1.55; }
.mr-review-note { font-size: 12px; color: #92600e; line-height: 1.55; }
.mr-prov-err {
  background: #fef2f2; border: 1px solid #fecaca; border-radius: 9px;
  padding: 8px 11px; width: 100%; box-sizing: border-box;
}
.mr-prov-err-t { font-size: 12px; font-weight: 700; color: #b91c1c; }
.mr-prov-err-s { font-size: 11.5px; color: #9f1239; margin-top: 2px; line-height: 1.45; word-break: break-word; }

.mr-flash {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: #10141b; color: #fff; border-radius: 9px; padding: 9px 16px;
  font-size: 12.5px; font-weight: 600; z-index: 60; box-shadow: 0 8px 24px rgba(0,0,0,.22);
}

/* ── detail chrome ────────────────────────────────────────────────────────── */
.mr-detail-hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.mr-detail-titles { min-width: 0; flex: 1; }
.mr-detail-title { font-size: 18px; font-weight: 700; color: var(--mr-ink); letter-spacing: -0.01em; }
.mr-detail-sub { font-size: 12.5px; color: var(--mr-ink-3); margin-top: 2px; }
.mr-detail-acts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mr-save-state { font-size: 11.5px; color: var(--mr-ink-4); min-height: 16px; margin-bottom: 10px; }

.mr-detail-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 20px; align-items: start; }
.mr-detail-col { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* ── the field grid (shared with the upload preview) ──────────────────────── */
.mr-fieldgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.mr-fieldgrid.is-single { display: flex; flex-direction: column; gap: 14px; }
.mr-fg-col { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* ── one field ────────────────────────────────────────────────────────────── */
.mr-sec, .mr-field {
  border-left: 3px solid transparent; padding-left: 10px;
  border-radius: 0 8px 8px 0; transition: background .2s ease, border-color .2s ease;
  /* Flex and grid items default to min-width:auto, so ONE long unbroken value
     (a free-text focus area, a two-person contact line, an email pair) stops the
     whole column shrinking and every sibling field inherits the blown-out width.
     Measured at 390px: each .mr-field was 566px inside a 257px column. */
  min-width: 0; max-width: 100%;
}
.mr-fieldgrid > *, .mr-fieldgrid.is-single > *, .mr-fg-col > * { min-width: 0; max-width: 100%; }
.mr-field-val, .mr-longtext, .mr-block-val { overflow-wrap: anywhere; }
.mr-field-head { display: flex; align-items: center; gap: 8px; min-height: 18px; }
.mr-field-labrow { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mr-field-lab, .mr-block-lab {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 700; color: var(--mr-ink-4);
}
.mr-field-actions { margin-left: auto; display: flex; gap: 6px; }
.mr-field-body { margin-top: 4px; }

.mr-field-viewrow { display: flex; align-items: flex-start; gap: 6px; }
.mr-field-view {
  flex: 1; min-width: 0; cursor: text; border-radius: 6px;
  padding: 2px 4px; margin: -2px -4px;
}
.mr-field-view:hover { background: var(--mr-card-2); }
.mr-field-view:focus-visible { outline: 2px solid var(--mr-accent); outline-offset: 0; }

/* The pencil only appears on hover or keyboard focus, so a long read-only pass
   over the detail is not littered with twenty icons. */
.mr-field-edit {
  flex-shrink: 0; opacity: 0; border: 0; background: none; cursor: pointer;
  color: var(--mr-ink-4); font-size: 12px; padding: 2px 5px; border-radius: 6px;
  transition: opacity .12s ease;
}
.mr-field:hover .mr-field-edit,
.mr-field:focus-within .mr-field-edit { opacity: 1; }
.mr-field-edit:hover { background: var(--mr-card-2); color: var(--mr-accent); }
.mr-field-edit:focus-visible { opacity: 1; outline: 2px solid var(--mr-accent); }

.mr-val { font-size: 13px; color: var(--mr-ink); }
.mr-val-empty { color: var(--mr-ink-4); font-style: italic; }
.mr-chiprow { display: flex; gap: 5px; flex-wrap: wrap; }

/* field marks. is-ai and is-missing are mutually exclusive by construction. */
.mr-field.is-ai, .mr-sec.is-ai { border-left-color: var(--mr-violet); background: rgba(124, 58, 237, .04); }
.mr-field.is-missing, .mr-sec.is-missing {
  border-left-color: transparent; border: 1px dashed #f0b775;
  background: rgba(217, 119, 6, .05); padding: 8px 10px; border-radius: 8px;
}
.mr-field.is-saving { opacity: .65; }
.mr-field.is-saved { background: rgba(22, 163, 74, .09); }
.mr-field.is-edited { border-left-color: var(--mr-accent); }
.mr-sec.is-flash { background: rgba(37, 99, 235, .12); }

.mr-tag {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 5px; white-space: nowrap;
}
.mr-tag-ai { background: #ede9fe; color: #6d28d9; }
.mr-tag-missing { background: var(--mr-amber-soft); color: #92600e; }
.mr-ai-confirm {
  border: 1px solid #ddd6fe; background: #f5f3ff; color: #6d28d9;
  border-radius: 6px; padding: 2px 8px; font-size: 10.5px; font-weight: 700; cursor: pointer;
}
.mr-ai-confirm:hover { background: #ede9fe; }

.mr-field-err {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  font-size: 11.5px; color: #b91c1c;
}
.mr-field-retry {
  border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c;
  border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 700; cursor: pointer;
}

/* ── long text ────────────────────────────────────────────────────────────── */
.mr-longtext { white-space: pre-wrap; line-height: 1.55; font-size: 13px; color: var(--mr-ink); word-break: break-word; }
.mr-longtext.is-clamped {
  display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical;
  overflow: hidden; max-height: calc(1.55em * 8);
}
.mr-seemore {
  border: 0; background: none; padding: 2px 0 0; font-size: 11.5px; font-weight: 700;
  color: var(--mr-accent); cursor: pointer;
}
.mr-seemore:hover { text-decoration: underline; }

/* ── contacts ─────────────────────────────────────────────────────────────── */
.mr-contacts { display: flex; flex-direction: column; gap: 8px; }
.mr-contact-person {
  border: 1px solid var(--mr-border-soft); border-radius: 9px;
  padding: 7px 10px; background: var(--mr-card-2);
}
.mr-contact-top { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.mr-contact-name { font-size: 13px; font-weight: 700; color: var(--mr-ink); }
.mr-contact-pos { font-size: 11px; color: var(--mr-ink-4); }
.mr-contact-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 3px; }
.mr-contact-link { font-size: 12px; color: var(--mr-accent); text-decoration: none; word-break: break-all; }
.mr-contact-link:hover { text-decoration: underline; }

.mr-ascaptured { font-size: 11.5px; color: var(--mr-ink-3); }
.mr-ascaptured > summary { cursor: pointer; font-weight: 600; color: var(--mr-ink-4); padding: 2px 0; }
.mr-ascaptured-line { display: flex; gap: 8px; padding: 2px 0 2px 12px; }
.mr-ascaptured-k { flex-shrink: 0; min-width: 104px; color: var(--mr-ink-4); }
.mr-ascaptured-v { color: var(--mr-ink-2); word-break: break-word; }

/* ── edit controls ────────────────────────────────────────────────────────── */
.mr-input {
  width: 100%; box-sizing: border-box; border: 1px solid var(--mr-accent);
  border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px;
  background: var(--mr-card); color: var(--mr-ink);
}
.mr-input:focus { outline: 2px solid rgba(37, 99, 235, .28); outline-offset: 0; }
.mr-input-area { resize: vertical; min-height: 64px; line-height: 1.5; }
.mr-input-select { cursor: pointer; }
.mr-chip-picker { display: flex; gap: 5px; flex-wrap: wrap; padding: 7px; }
.mr-pick {
  border: 1px solid var(--mr-border); background: var(--mr-card); border-radius: 999px;
  padding: 4px 11px; font-size: 11.5px; font-weight: 600; cursor: pointer; color: var(--mr-ink-3);
}
.mr-pick:hover { background: var(--mr-card-2); }
.mr-pick.active { background: var(--mr-accent); border-color: var(--mr-accent); color: #fff; }

.mr-edit-acts { display: flex; align-items: center; gap: 7px; margin-top: 7px; flex-wrap: wrap; }
.mr-edit-save {
  border: 1px solid var(--mr-accent); background: var(--mr-accent); color: #fff;
  border-radius: 7px; padding: 4px 12px; font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.mr-edit-cancel {
  border: 1px solid var(--mr-border); background: var(--mr-card); color: var(--mr-ink-2);
  border-radius: 7px; padding: 4px 12px; font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.mr-edit-hint { font-size: 10.5px; color: var(--mr-ink-4); }

/* ── interest block + conflict resolver ───────────────────────────────────── */
.mr-interest-block { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.mr-interest-block.is-conflict {
  border: 1px solid #f3c6c6; background: #fffafa; border-radius: 11px; padding: 12px 14px; width: 100%;
  box-sizing: border-box;
}
.mr-interest-block.is-saving { opacity: .65; }
.mr-conflict-marks { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.mr-conflict-mark { display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
.mr-conflict-l { font-weight: 700; color: var(--mr-ink); }
.mr-conflict-note { color: var(--mr-ink-3); }
.mr-conflict-help { font-size: 11.5px; color: var(--mr-ink-3); line-height: 1.45; }
.mr-resolved-note { font-size: 10.5px; color: var(--mr-ink-4); }

.mr-seg { display: inline-flex; border: 1px solid var(--mr-border); border-radius: 8px; overflow: hidden; }
.mr-seg-btn {
  border: 0; background: var(--mr-card); padding: 5px 12px; font-size: 11.5px;
  font-weight: 700; cursor: pointer; color: var(--mr-ink-2);
}
.mr-seg-btn + .mr-seg-btn { border-left: 1px solid var(--mr-border); }
/* The resolver lives in the narrow left column, where the options never fit
   side by side. Stack them deliberately (full width, dividers on top) rather
   than letting flex-wrap drop a button onto a second row with no left border,
   which reads as a broken control. */
.mr-interest-block.is-conflict .mr-seg { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
.mr-interest-block.is-conflict .mr-seg-btn { text-align: left; padding: 7px 12px; }
.mr-interest-block.is-conflict .mr-seg-btn + .mr-seg-btn {
  border-left: 0; border-top: 1px solid var(--mr-border);
}
.mr-seg-btn:hover { background: var(--mr-card-2); }
.mr-seg-btn:disabled { opacity: .5; cursor: default; }

/* ── provenance ───────────────────────────────────────────────────────────── */
.mr-prov {
  border: 1px solid var(--mr-border); border-radius: 12px; padding: 13px 15px;
  background: var(--mr-card-2); display: flex; flex-direction: column; gap: 8px;
}
.mr-prov-body { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.mr-prov-row { display: flex; gap: 10px; align-items: baseline; width: 100%; font-size: 12px; }
.mr-prov-k { flex-shrink: 0; min-width: 96px; color: var(--mr-ink-4); font-size: 11px; }
.mr-prov-v { color: var(--mr-ink-2); min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mr-prov-file { word-break: break-all; font-weight: 600; color: var(--mr-ink); }
.mr-prov-chips { gap: 5px; }
.mr-prov-processing { font-size: 12.5px; color: var(--mr-violet); font-weight: 600; }
.mr-provchip {
  border: 0; border-radius: 999px; padding: 2px 9px; font-size: 10.5px;
  font-weight: 700; cursor: pointer; white-space: nowrap;
}
.mr-provchip-ai { background: #ede9fe; color: #6d28d9; }
.mr-provchip-missing { background: var(--mr-amber-soft); color: #92600e; }
.mr-provchip:hover { filter: brightness(.95); }
.mr-ai-spark {
  display: inline-flex; align-items: center; background: #ede9fe; color: #6d28d9;
  border-radius: 6px; padding: 2px 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}

.mr-transcript { border: 1px solid var(--mr-border); border-radius: 11px; padding: 11px 14px; background: var(--mr-card-2); }
.mr-transcript > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--mr-ink-2); }
.mr-transcript .mr-longtext { margin-top: 9px; max-height: 340px; overflow-y: auto; font-size: 12.5px; }

.mr-modal-ok { background: var(--mr-accent); color: #fff; }
.mr-modal-ok:hover { background: #1d4ed8; }
.confirm-modal .mr-input { margin-bottom: 16px; }

/* ══ responsive ═══════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .mr-two { grid-template-columns: 248px 1fr; }
}
@media (max-width: 1100px) {
  .mr-detail-grid { grid-template-columns: 1fr; }
  .mr-fieldgrid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  /* One pane at a time. The page becomes the single scroller so the phone gets
     one continuous column instead of two nested scroll areas. */
  .mr-two { grid-template-columns: 1fr; }
  .mr-page[data-level="1"] .mr-main { display: none; }
  .mr-page[data-level="2"] .mr-rail,
  .mr-page[data-level="3"] .mr-rail { display: none; }
  .mr-page[data-level="2"] .mr-tiles,
  .mr-page[data-level="3"] .mr-tiles { display: none; }
  .mr-page { overflow-y: auto; overflow-x: hidden; }
  .mr-rail, .mr-main { overflow: visible; }
  /* The panes stop owning their scroll here, so .mr-two must stop being
     height-constrained too. Left at flex:1 it keeps the viewport-height box it
     had on desktop and the cards render OUTSIDE the pane's own border. */
  .mr-two { flex: 0 0 auto; align-items: start; }
  .mr-back-reps { display: inline-flex; }
  .mr-tiles { grid-template-columns: repeat(2, 1fr); }
  .mr-zero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mr-header { gap: 10px; }
  .mr-filters { gap: 7px; }
  .mr-filter-search { flex: 1 1 100%; }
  .mr-fselect-wrap { flex: 1 1 45%; }
  .mr-fselect { max-width: none; width: 100%; }
  .mr-detail-acts { margin-left: 0; }
  /* The back label is long ("Quintus's meetings"), so side by side it squeezes
     the client name into a three-line column. Give each its own row. */
  .mr-detail-hd { flex-wrap: wrap; }
  .mr-detail-hd .mr-back { order: -1; }
  .mr-detail-titles { flex: 1 1 100%; }
  .mr-list-hd .mr-list-titles { flex: 1 1 100%; }
  .mr-ascaptured-k { min-width: 84px; }
  .mr-prov-row { flex-direction: column; gap: 2px; }
  .mr-prov-k { min-width: 0; }
}
@media (max-width: 520px) {
  .mr-page { padding: 12px; gap: 12px; }
  .mr-title { font-size: 20px; }
  .mr-main { padding: 14px; border-radius: 12px; }
  .mr-tile { padding: 11px 13px; }
  .mr-tile-value { font-size: 22px; }
  .mr-zero-grid { grid-template-columns: 1fr; }
  .mr-fselect-wrap { flex: 1 1 100%; }
}

/* ══ dark mode ════════════════════════════════════════════════════════════ */
/* Re-point the local tokens once, which carries every surface, border and ink
   above. Everything below is a semantic colour that is NOT token-derived. */
html[data-theme="dark"] .mr-page {
  --mr-card: #1e293b;
  --mr-card-2: #172033;
  --mr-border: #334155;
  --mr-border-soft: rgba(148, 163, 184, 0.16);
  --mr-ink: #e2e8f0;
  --mr-ink-2: #cbd5e1;
  --mr-ink-3: #94a3b8;
  --mr-ink-4: #64748b;
  --mr-accent: #3b82f6;
  --mr-accent-soft: rgba(59, 130, 246, 0.16);
  --mr-violet: #a78bfa;
  --mr-violet-soft: rgba(124, 58, 237, 0.14);
  --mr-amber: #fcd34d;
  --mr-amber-soft: rgba(245, 158, 11, 0.18);
}

html[data-theme="dark"] .mr-btn:hover,
html[data-theme="dark"] .mr-mini:hover,
html[data-theme="dark"] .mr-back:hover,
html[data-theme="dark"] .mr-sortchip:hover,
html[data-theme="dark"] .mr-fchip:hover,
html[data-theme="dark"] .mr-pick:hover,
html[data-theme="dark"] .mr-seg-btn:hover,
html[data-theme="dark"] .mr-rep-item:hover,
html[data-theme="dark"] .mr-meeting-card:hover,
html[data-theme="dark"] .mr-tile:hover,
html[data-theme="dark"] .mr-zero-tile:hover { border-color: #475569; }
html[data-theme="dark"] .mr-field-view:hover,
html[data-theme="dark"] .mr-field-edit:hover { background: rgba(148, 163, 184, 0.12); }

html[data-theme="dark"] .mr-btn-primary { color: #fff; }
html[data-theme="dark"] .mr-btn-danger { color: #fca5a5; border-color: rgba(239, 68, 68, 0.4); }
html[data-theme="dark"] .mr-btn-danger:hover { background: rgba(239, 68, 68, 0.14); border-color: #ef4444; }

html[data-theme="dark"] .mr-jobbar { background: rgba(124, 58, 237, 0.14); border-color: rgba(167, 139, 250, 0.32); color: #c4b5fd; }
html[data-theme="dark"] .mr-jobchip { background: rgba(167, 139, 250, 0.2); color: #ddd6fe; }

html[data-theme="dark"] .mr-rep-initials { background: #334155; color: #cbd5e1; }
html[data-theme="dark"] .mr-rep-unlinked { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }

html[data-theme="dark"] .mr-chip { background: rgba(148, 163, 184, 0.14); color: #cbd5e1; }
html[data-theme="dark"] .mr-chip-type { background: rgba(99, 102, 241, 0.2); color: #c7d2fe; }
html[data-theme="dark"] .mr-chip-rep { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }
html[data-theme="dark"] .mr-chip-more { background: rgba(148, 163, 184, 0.24); color: #e2e8f0; }
html[data-theme="dark"] .mr-chip-step { background: rgba(59, 130, 246, 0.18); color: #93c5fd; }

html[data-theme="dark"] .mr-fa-machinery  { background: rgba(99, 102, 241, 0.2);  color: #c7d2fe; }
html[data-theme="dark"] .mr-fa-crop       { background: rgba(34, 197, 94, 0.18);  color: #86efac; }
html[data-theme="dark"] .mr-fa-livestock  { background: rgba(249, 115, 22, 0.2);  color: #fdba74; }
html[data-theme="dark"] .mr-fa-irrigation { background: rgba(6, 182, 212, 0.2);   color: #67e8f9; }
html[data-theme="dark"] .mr-fa-other      { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }

html[data-theme="dark"] .mr-status-filed         { background: rgba(34, 197, 94, 0.16); color: #86efac; }
html[data-theme="dark"] .mr-status-awaiting_info { background: rgba(245, 158, 11, 0.16); color: #fcd34d; }
html[data-theme="dark"] .mr-status-draft         { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }
html[data-theme="dark"] .mr-status-sent          { background: rgba(59, 130, 246, 0.18); color: #93c5fd; }

html[data-theme="dark"] .mr-interest-high { background: rgba(34, 197, 94, 0.16); color: #86efac; }
html[data-theme="dark"] .mr-interest-mid  { background: rgba(245, 158, 11, 0.16); color: #fcd34d; }
html[data-theme="dark"] .mr-interest-low  { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }
html[data-theme="dark"] .mr-interest-conflict { background: rgba(239, 68, 68, 0.16); color: #fca5a5; border-color: rgba(252, 165, 165, 0.55); }

html[data-theme="dark"] .mr-flag-ai { background: rgba(167, 139, 250, 0.2); color: #ddd6fe; }
html[data-theme="dark"] .mr-flag-missing { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }

html[data-theme="dark"] .mr-tag-ai { background: rgba(167, 139, 250, 0.2); color: #ddd6fe; }
html[data-theme="dark"] .mr-tag-missing { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }
html[data-theme="dark"] .mr-ai-confirm { background: rgba(124, 58, 237, 0.18); border-color: rgba(167, 139, 250, 0.4); color: #ddd6fe; }
html[data-theme="dark"] .mr-ai-confirm:hover { background: rgba(124, 58, 237, 0.3); }

html[data-theme="dark"] .mr-field.is-ai,
html[data-theme="dark"] .mr-sec.is-ai { border-left-color: #a78bfa; background: rgba(124, 58, 237, 0.12); }
html[data-theme="dark"] .mr-field.is-missing,
html[data-theme="dark"] .mr-sec.is-missing { border-color: rgba(245, 158, 11, 0.5); background: rgba(217, 119, 6, 0.12); }
html[data-theme="dark"] .mr-field.is-saved { background: rgba(34, 197, 94, 0.16); }
html[data-theme="dark"] .mr-sec.is-flash { background: rgba(59, 130, 246, 0.22); }

html[data-theme="dark"] .mr-error-msg { color: #fca5a5; }
html[data-theme="dark"] .mr-field-err { color: #fca5a5; }
html[data-theme="dark"] .mr-field-retry { background: rgba(239, 68, 68, 0.16); border-color: rgba(252, 165, 165, 0.45); color: #fca5a5; }
html[data-theme="dark"] .mr-warn { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.4); color: #fcd34d; }
html[data-theme="dark"] .mr-review { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.4); }
html[data-theme="dark"] .mr-review-list,
html[data-theme="dark"] .mr-review-note { color: #fcd34d; }
html[data-theme="dark"] .mr-prov-err { background: rgba(239, 68, 68, 0.14); border-color: rgba(252, 165, 165, 0.4); }
html[data-theme="dark"] .mr-prov-err-t { color: #fca5a5; }
html[data-theme="dark"] .mr-prov-err-s { color: #fda4af; }
html[data-theme="dark"] .mr-flash { background: #0f172a; border: 1px solid #334155; }

html[data-theme="dark"] .mr-interest-block.is-conflict { background: rgba(239, 68, 68, 0.08); border-color: rgba(252, 165, 165, 0.35); }

html[data-theme="dark"] .mr-provchip-ai { background: rgba(167, 139, 250, 0.2); color: #ddd6fe; }
html[data-theme="dark"] .mr-provchip-missing { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }
html[data-theme="dark"] .mr-ai-spark { background: rgba(167, 139, 250, 0.2); color: #ddd6fe; }
html[data-theme="dark"] .mr-provchip:hover { filter: brightness(1.15); }

html[data-theme="dark"] .mr-spin { border-color: rgba(167, 139, 250, 0.3); border-top-color: #a78bfa; }
html[data-theme="dark"] .mr-contact-link { color: #93c5fd; }
html[data-theme="dark"] .mr-seemore { color: #93c5fd; }
html[data-theme="dark"] .mr-zero-ic { color: #93c5fd; }