/* Mailroom — styled to live inside the Agent Office (dragonfly forest palette).
   Dark surface, forest greens, gold accents, serif headings. Reads as a native
   desk, not a bolted-on form. */

:root {
  --mr-black: #070a0f;
  --mr-deep: #0d1420;
  --mr-surface: #141d2b;
  --mr-surface-alt: #1a2536;
  --mr-raise: #202d40;
  --mr-border: #2a3a4f;
  --mr-border-lit: #3a4a63;
  --mr-green: #4a72a8;
  --mr-green-light: #6e97cf;
  --mr-green-pale: #b8cde8;
  --mr-green-dim: #34506f;
  --mr-text: #c9d4e2;
  --mr-muted: #7d8ba0;
  --mr-gold: #e0a545;
  --mr-gold-dim: #b8863a;
  --mr-danger: #c77b6b;
  --mr-serif: Georgia, "Times New Roman", serif;
  --mr-sans: system-ui, -apple-system, sans-serif;
}

.mr-root {
  background: var(--mr-surface);
  color: var(--mr-text);
  font-family: var(--mr-sans);
  min-height: 100%;
  box-sizing: border-box;
}
.mr-root * { box-sizing: border-box; }

/* ---- Header ---- */
.mr-head {
  display: flex; align-items: flex-end; gap: .75rem;
  padding: 1rem 1.25rem .85rem;
  border-bottom: 1px solid var(--mr-border);
  background: linear-gradient(180deg, var(--mr-surface-alt), var(--mr-surface));
}
.mr-head-titles { display: flex; flex-direction: column; gap: .1rem; }
.mr-kicker {
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mr-green); font-weight: 600;
}
.mr-title {
  font-family: var(--mr-serif); font-size: 1.4rem; font-weight: 400;
  color: var(--mr-green-pale); margin: 0; line-height: 1.1;
}
.mr-head-actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; }

/* ---- Stat strip ---- */
.mr-stats {
  display: flex; gap: 0; padding: 0 1.25rem;
  border-bottom: 1px solid var(--mr-border);
  background: var(--mr-deep);
}
.mr-stat {
  padding: .7rem 1.1rem .7rem 0; margin-right: 1.4rem;
  display: flex; flex-direction: column; gap: .05rem;
}
.mr-stat-n { font-family: var(--mr-serif); font-size: 1.25rem; color: var(--mr-gold); line-height: 1; }
.mr-stat-l { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--mr-muted); }

/* ---- Body / list ---- */
.mr-body { padding: 1rem 1.25rem 1.5rem; }
.mr-section-label {
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mr-muted); margin: 0 0 .6rem;
}
.mr-empty {
  color: var(--mr-muted); font-style: italic; font-family: var(--mr-serif);
  padding: 2rem 1rem; text-align: center; border: 1px dashed var(--mr-border);
  border-radius: 8px;
}
.mr-empty strong { color: var(--mr-green-pale); font-style: normal; display: block; margin-bottom: .3rem; font-size: 1.05rem; }

.mr-contact-list { display: flex; flex-direction: column; gap: 2px; }
.mr-contact-row {
  display: grid;
  grid-template-columns: auto 1.6fr 2fr auto auto;
  gap: .8rem; align-items: center;
  padding: .6rem .7rem; border-radius: 7px;
  background: var(--mr-surface-alt);
  border: 1px solid transparent;
  transition: border-color .12s, background .12s;
}
.mr-contact-row:hover { border-color: var(--mr-border-lit); background: var(--mr-raise); }

.mr-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mr-serif); font-size: .8rem; color: var(--mr-deep);
  background: var(--mr-green-light); font-weight: 700;
}
.mr-cmeta { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.mr-cname { color: var(--mr-green-pale); font-weight: 500; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-cemail { color: var(--mr-muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mr-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.mr-tag {
  font-size: .66rem; padding: .12rem .5rem; border-radius: 20px;
  background: rgba(74,114,168,.18); color: var(--mr-green-pale);
  border: 1px solid var(--mr-green-dim); white-space: nowrap;
}
.mr-tag-house { background: rgba(232,199,96,.12); color: var(--mr-gold); border-color: var(--mr-gold-dim); }

.mr-pill {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .05em;
  padding: .15rem .5rem; border-radius: 4px; font-weight: 600;
}
.mr-pill-subscribed { background: rgba(90,158,110,.18); color: #7bc48c; }
.mr-pill-pending { background: rgba(224,165,69,.16); color: var(--mr-gold); }
.mr-pill-unsubscribed, .mr-pill-suppressed { background: rgba(166,93,93,.18); color: var(--mr-danger); }

/* ---- Buttons ---- */
.mr-btn {
  font-family: var(--mr-sans); font-size: .82rem; cursor: pointer;
  padding: .5rem .9rem; border-radius: 6px;
  background: var(--mr-raise); color: var(--mr-text);
  border: 1px solid var(--mr-border-lit); transition: all .12s;
}
.mr-btn:hover { border-color: var(--mr-green); color: var(--mr-green-pale); }
.mr-btn-primary {
  background: var(--mr-green); color: #eafff0; border-color: var(--mr-green-light);
  font-weight: 600;
}
.mr-btn-primary:hover { background: var(--mr-green-light); color: var(--mr-deep); }
.mr-btn-gold { background: var(--mr-gold); color: var(--mr-deep); border-color: var(--mr-gold); font-weight: 600; }
.mr-btn-gold:hover { background: #f4d97a; }
.mr-mini {
  font-size: .72rem; cursor: pointer; padding: .28rem .6rem; border-radius: 5px;
  background: transparent; color: var(--mr-muted); border: 1px solid var(--mr-border);
}
.mr-mini:hover { color: var(--mr-green-pale); border-color: var(--mr-green-dim); }

/* ---- Footer utility row ---- */
.mr-util {
  margin-top: 1.25rem; padding-top: .9rem; border-top: 1px solid var(--mr-border);
  display: flex; align-items: center; gap: .75rem;
}
.mr-util-flash { font-size: .78rem; color: var(--mr-green-light); }

/* ---- Modal ---- */
.mr-modal {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(3,6,3,.66); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.mr-modal-card {
  background: var(--mr-surface); color: var(--mr-text);
  width: min(560px, 94vw); max-height: 88vh; overflow: auto;
  border: 1px solid var(--mr-border-lit); border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.mr-modal-head {
  font-family: var(--mr-serif); font-size: 1.15rem; color: var(--mr-green-pale);
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--mr-border);
  background: var(--mr-surface-alt);
}
.mr-modal-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .9rem; }
.mr-field { display: flex; flex-direction: column; gap: .35rem; }
.mr-field-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--mr-muted); }
.mr-in {
  padding: .6rem .7rem; font: inherit; font-size: .9rem;
  background: var(--mr-deep); color: var(--mr-text);
  border: 1px solid var(--mr-border-lit); border-radius: 6px;
}
.mr-in:focus { outline: none; border-color: var(--mr-green); box-shadow: 0 0 0 3px rgba(74,114,168,.25); }
.mr-textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
.mr-checks { display: flex; flex-direction: column; gap: .4rem; max-height: 12rem; overflow: auto; padding: .3rem; background: var(--mr-deep); border-radius: 6px; border: 1px solid var(--mr-border); }
.mr-check { display: flex; align-items: center; gap: .5rem; font-size: .86rem; color: var(--mr-text); cursor: pointer; padding: .2rem; }
.mr-check:hover { color: var(--mr-green-pale); }
.mr-editor-actions { display: flex; gap: .6rem; margin-top: .3rem; }
.mr-editor-flash { font-size: .8rem; min-height: 1.2em; color: var(--mr-green-light); }
.mr-boot-error { color: var(--mr-danger); font-size: .85rem; white-space: pre-wrap; padding: 1rem; }

/* Loading shimmer */
.mr-desk-loading { color: var(--mr-muted); font-family: var(--mr-serif); font-style: italic; padding: 2rem 1.25rem; }

/* ---- Public signup (Front Door) — lighter, inherits host page ---- */
/* Signup box and public pages: see the custom_714 section at the end. */

/* ---- One-to-one letter attachments ---- */
.mr-attach-wrap { display: flex; flex-direction: column; gap: .5rem; }
.mr-files { display: flex; flex-direction: column; gap: .35rem; }
.mr-files-none { font-size: .82rem; color: var(--mr-muted); font-style: italic; }
.mr-file {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem .55rem; border-radius: 6px;
  background: var(--mr-deep); border: 1px solid var(--mr-border-lit);
  font-size: .84rem; color: var(--mr-text);
}
.mr-file-heavy { border-color: var(--mr-danger); }
.mr-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-file-size { font-size: .76rem; color: var(--mr-muted); font-variant-numeric: tabular-nums; }
.mr-file-x {
  background: none; border: none; color: var(--mr-muted);
  font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 .2rem;
}
.mr-file-x:hover { color: var(--mr-danger); }
.mr-attach-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.mr-file-input { display: none; }
.mr-hint { font-size: .76rem; color: var(--mr-muted); margin: 0; line-height: 1.4; }
.mr-warn { color: var(--mr-danger); }

/* ═══════════════════════════════════════════════════════════════════════════
   NARROW SCREENS

   This sheet had no media queries, and Mailroom gets squeezed twice: it is a
   public page at /mailroom AND a desk inside the Agent Office. Since the Office
   went single-desk (custom_445), the desk case is now a phone-width iframe
   rather than a corner of a laptop screen.

   Breakpoint follows the jayguitar scale: 640px = --bp-narrow.
   ═══════════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 640px) {

  /* ---- Header: three buttons don't fit beside the title ----
     .mr-head-actions is pushed right by margin-left:auto, and its three buttons
     ("+ Add contact", "✉ Send a letter", "✎ Compose email") come to roughly
     340px on their own. Beside a title they force the whole header sideways.
     Title on its own line, buttons below at full tap size. */
  .mr-head {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    padding: .9rem 1rem .8rem;
  }
  .mr-head-actions {
    margin-left: 0;
    flex-wrap: wrap;
    gap: .45rem;
  }
  .mr-head-actions .mr-btn { flex: 1 1 auto; min-height: 44px; }

  /* ---- Stat strip: scroll rather than crush ----
     Three stats with a 1.4rem right margin each fit at 390px, but only just,
     and a longer label would break it. Let the strip scroll instead. */
  .mr-stats {
    padding: 0 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mr-stats::-webkit-scrollbar { display: none; }
  .mr-stat { flex: none; margin-right: 1.1rem; padding-right: .8rem; }

  .mr-body { padding: .9rem 1rem 1.25rem; }

  /* ---- Contact row: five columns become two rows ----
     The row is `auto 1.6fr 2fr auto auto` — avatar | meta | tags | pill | edit.
     At 390px the avatar, pill and edit button hold their widths and the two
     fr columns divide what's left, so the name and email (which are already
     ellipsised) truncate to nothing. That is exactly backwards: the name is the
     one thing you are reading the row to find.

     Two rows instead — identity and state on top, tags and the edit control
     below. Areas are used rather than nth-child so the mapping survives anyone
     reordering the children in desk.js. */
  .mr-contact-row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "avatar meta pill"
      "tags   tags edit";
    gap: .5rem .6rem;
    padding: .7rem;
  }
  .mr-contact-row .mr-avatar { grid-area: avatar; }
  .mr-contact-row .mr-cmeta  { grid-area: meta; }
  .mr-contact-row .mr-tags   { grid-area: tags; align-self: center; }
  .mr-contact-row .mr-pill   { grid-area: pill; justify-self: end; }
  .mr-contact-row .mr-mini   { grid-area: edit; justify-self: end; min-height: 44px; padding: .4rem .8rem; }

  /* Hover-only affordances don't exist on touch, so the row border that
     signalled "this is interactive" needs to be permanent. */
  .mr-contact-row { border-color: var(--mr-border); }

  /* ---- Footer utility row ---- */
  .mr-util { flex-wrap: wrap; }
  .mr-util .mr-btn { min-height: 44px; }

  /* ---- Modal ---- */
  .mr-modal { padding: .5rem; align-items: flex-end; }
  .mr-modal-card {
    width: 100%;
    /* dvh so iOS Safari's URL bar doesn't hide the bottom of the card, which is
       where the save button lives. */
    max-height: 88vh;
    max-height: 88dvh;
    border-radius: 12px 12px 0 0;
  }
  .mr-modal-head { padding: .85rem 1rem; font-size: 1.05rem; }
  .mr-modal-body { padding: 1rem; }
  .mr-editor-actions { flex-wrap: wrap; }
  .mr-editor-actions .mr-btn { flex: 1 1 auto; min-height: 44px; }
  .mr-check { padding: .45rem .2rem; min-height: 36px; }
  .mr-textarea { min-height: 7rem; }

  /* ---- Attachments ---- */
  .mr-file-x { min-width: 34px; min-height: 34px; }

  /* ---- Public signup ---- */
  .mr-signup { max-width: none; }
  .mr-signup-submit { min-height: 44px; }
}

/* iOS Safari zooms the page when a focused control is under 16px and never
   zooms back out. .mr-in is .9rem (14.4px); the signup inputs inherit from
   whatever host page they land on, so they are pinned here too. Desktop sizing
   above is unchanged — the value only has to be 16px at the moment of focus. */
@media screen and (max-width: 768px) {
  .mr-in, .mr-textarea, .mr-signup-form input { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════════════════
   INBOX (custom_630) — every form on the site, read and answered here.
   ════════════════════════════════════════════════════════════════════════ */

/* Tabs: Inbox | Audience */
.mr-tabs {
  display: flex; gap: .25rem; padding: .6rem 1.25rem 0;
  background: var(--mr-deep); border-bottom: 1px solid var(--mr-border);
}
.mr-tab {
  background: transparent; color: var(--mr-muted); border: 1px solid transparent;
  border-bottom: 0; border-radius: 6px 6px 0 0; padding: .5rem 1rem;
  font: 600 .8rem var(--mr-sans); letter-spacing: .04em; cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem;
}
.mr-tab:hover { color: var(--mr-green-pale); }
.mr-tab.is-on {
  color: var(--mr-green-pale); background: var(--mr-surface-alt);
  border-color: var(--mr-border);
}
.mr-tab-badge {
  background: var(--mr-gold); color: var(--mr-deep); border-radius: 999px;
  font-size: .7rem; line-height: 1; padding: .2rem .45rem; font-weight: 700;
}

/* Filters */
.mr-filters {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  padding: .7rem 1.25rem; border-bottom: 1px solid var(--mr-border); background: var(--mr-deep);
}
.mr-seg { display: inline-flex; border: 1px solid var(--mr-border); border-radius: 6px; overflow: hidden; }
.mr-seg-btn {
  background: transparent; color: var(--mr-muted); border: 0; border-right: 1px solid var(--mr-border);
  padding: .35rem .75rem; font: .78rem var(--mr-sans); cursor: pointer;
}
.mr-seg-btn:last-child { border-right: 0; }
.mr-seg-btn.is-on { background: var(--mr-raise); color: var(--mr-green-pale); }
.mr-in.mr-in-compact { width: auto; padding: .35rem .5rem; font-size: .8rem; }

/* Message list */
.mr-msg-list { display: flex; flex-direction: column; gap: 2px; }
.mr-msg {
  display: flex; align-items: flex-start; gap: .7rem; width: 100%; text-align: left;
  background: var(--mr-surface-alt); color: var(--mr-text); border: 1px solid transparent;
  border-radius: 6px; padding: .7rem .85rem; cursor: pointer; font: inherit;
}
.mr-msg:hover { border-color: var(--mr-border-lit); }
.mr-msg-dot { width: .55rem; height: .55rem; border-radius: 50%; margin-top: .4rem; flex: none; background: transparent; }
.mr-msg.is-unread .mr-msg-dot { background: var(--mr-gold); }
.mr-msg.is-unread .mr-msg-who { color: #fff; font-weight: 700; }
.mr-msg.is-done { opacity: .6; }
.mr-msg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.mr-msg-top { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.mr-msg-who { color: var(--mr-green-pale); }
.mr-msg-snip { color: var(--mr-muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-msg-when { color: var(--mr-muted); font-size: .75rem; white-space: nowrap; flex: none; }
.mr-msg-replied { color: var(--mr-green-light); font-size: .75rem; }

/* Reader */
.mr-head-reader { align-items: center; flex-wrap: wrap; }
.mr-reader { display: flex; flex-direction: column; gap: 1rem; max-width: 760px; }
.mr-fields {
  display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1rem; margin: 0;
  background: var(--mr-surface-alt); border: 1px solid var(--mr-border); border-radius: 8px; padding: 1rem;
}
.mr-fields dt { color: var(--mr-muted); font-size: .8rem; }
.mr-fields dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.mr-thread { display: flex; flex-direction: column; gap: .5rem; }
.mr-reply { border-left: 3px solid var(--mr-green); padding: .4rem .8rem; background: var(--mr-deep); border-radius: 0 6px 6px 0; }
.mr-reply-failed { border-left-color: var(--mr-danger); }
.mr-reply-head { display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem; color: var(--mr-green-pale); }
.mr-reply-body { white-space: pre-wrap; margin-top: .3rem; font-size: .9rem; }
.mr-compose { display: flex; flex-direction: column; gap: .6rem; border-top: 1px solid var(--mr-border); padding-top: 1rem; }

/* Form options */
.mr-inline { display: flex; gap: .5rem; align-items: center; }
.mr-form-rows { display: flex; flex-direction: column; gap: .6rem; }
.mr-form-row {
  display: grid; grid-template-columns: 1fr auto; gap: .5rem .9rem; align-items: center;
  border: 1px solid var(--mr-border); border-radius: 8px; padding: .75rem .9rem;
}
.mr-form-name { display: flex; flex-direction: column; gap: .1rem; }
.mr-form-opt { display: flex; align-items: center; gap: .5rem; }
.mr-form-row .mr-check { grid-column: 1 / -1; }
.mr-form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.mr-form-actions [hidden] { display: none; }

@media (max-width: 560px) {
  .mr-form-row { grid-template-columns: 1fr; }
  .mr-fields { grid-template-columns: 1fr; }
  .mr-fields dt { margin-top: .3rem; }
  .mr-head { flex-wrap: wrap; }
  .mr-head-actions { margin-left: 0; flex-wrap: wrap; }
}

/* The modal is appended to <body>, outside .mr-root, so it needs the desk's
   type and colour of its own (custom_630 — it was falling back to the
   browser's serif). */
.mr-modal { font-family: var(--mr-sans); color: var(--mr-text); }
.mr-modal .mr-modal-head { font-family: var(--mr-serif); }

/* ── custom_631: groups, junk, settings ─────────────────────────────── */
.mr-groups { display: flex; flex-direction: column; gap: 1rem; }
.mr-group-head {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  background: transparent; border: 0; border-bottom: 1px solid var(--mr-border);
  color: var(--mr-green-pale); padding: .3rem 0 .45rem; margin-bottom: .45rem;
  font: 600 .9rem var(--mr-sans); cursor: pointer; text-align: left;
}
.mr-group-caret { color: var(--mr-muted); width: .8rem; }
.mr-group-count { margin-left: auto; color: var(--mr-muted); font-weight: 400; font-size: .75rem; }
.mr-group .mr-msg-list[hidden] { display: none; }
.mr-tag-junk { border-color: var(--mr-danger); color: var(--mr-danger); }
.mr-junk-note { margin: 0; padding: .55rem 1.25rem; background: rgba(199,123,107,.12); color: var(--mr-danger); font-size: .85rem; }
.mr-util-top { margin: 0 0 .8rem; }
.mr-set-tabs { align-self: flex-start; }
.mr-set-body { display: flex; flex-direction: column; gap: .7rem; }
.mr-in.mr-in-num { width: 6rem; }
.mr-form-wide { grid-column: 1 / -1; }
.mr-modal-card { max-height: calc(100vh - 2rem); overflow: auto; }

/* ════════════════════════════════════════════════════════════════════════
   MAILING LIST and SENT (custom_632)
   ════════════════════════════════════════════════════════════════════════ */
.mr-explain { margin: 0; padding: .6rem 1.25rem; color: var(--mr-muted); font-size: .85rem; border-bottom: 1px solid var(--mr-border); background: var(--mr-deep); }
.mr-banner {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin: .8rem 1.25rem 0; padding: .7rem .9rem; border-radius: 8px;
  background: rgba(224,165,69,.12); border: 1px solid var(--mr-gold-dim); color: var(--mr-text); font-size: .88rem;
}
.mr-banner > span { flex: 1; min-width: 14rem; }
.ml-wrap { display: grid; grid-template-columns: 13.5rem 1fr; gap: 0; min-height: 60vh; }
.ml-side { border-right: 1px solid var(--mr-border); padding: .8rem .6rem; display: flex; flex-direction: column; gap: 2px; background: var(--mr-deep); }
.ml-side-head { margin: .7rem .4rem .2rem; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mr-muted); min-height: .3rem; }
.ml-side-item {
  display: flex; justify-content: space-between; gap: .5rem; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 5px; color: var(--mr-text);
  padding: .38rem .55rem; font: .84rem var(--mr-sans); cursor: pointer;
}
.ml-side-item:hover { background: var(--mr-surface-alt); }
.ml-side-item.is-on { background: var(--mr-raise); border-color: var(--mr-border-lit); color: var(--mr-green-pale); }
.ml-side-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-side-n { color: var(--mr-muted); font-size: .78rem; }
.ml-main { padding: .9rem 1.1rem 1.5rem; min-width: 0; }
.ml-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.ml-list-name { color: var(--mr-green-pale); font-family: var(--mr-serif); font-weight: 400; font-size: 1.1rem; }
.ml-search { flex: 1; min-width: 12rem; }
.ml-bulk {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: .7rem;
  padding: .55rem .7rem; border-radius: 8px; background: var(--mr-raise); border: 1px solid var(--mr-border-lit);
}
.ml-tag-in { width: 8rem; }
.mr-mini.mr-danger, .mr-danger { color: var(--mr-danger); border-color: var(--mr-danger); }
.ml-table { display: flex; flex-direction: column; gap: 2px; }
.ml-row {
  display: grid; grid-template-columns: 1.4rem minmax(11rem, 2fr) minmax(7rem, 1.4fr) minmax(6rem, 1.2fr) 7.5rem 5rem 5.5rem;
  gap: .7rem; align-items: center; width: 100%; text-align: left;
  background: var(--mr-surface-alt); border: 1px solid transparent; border-radius: 6px;
  color: var(--mr-text); padding: .55rem .7rem; font: .84rem var(--mr-sans); cursor: pointer;
}
.ml-row:hover { border-color: var(--mr-border-lit); }
.ml-row.is-sel { border-color: var(--mr-gold-dim); background: rgba(224,165,69,.07); }
.ml-row-head { background: transparent; cursor: default; color: var(--mr-muted); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
.ml-row-head:hover { border-color: transparent; }
.ml-who { display: flex; flex-direction: column; min-width: 0; }
.ml-name { color: var(--mr-green-pale); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-email, .ml-follows { color: var(--mr-muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-tags { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.ml-date { color: var(--mr-muted); font-size: .78rem; }
.mr-pill-bounced { background: rgba(166,93,93,.18); color: var(--mr-danger); }
.ml-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .8rem; }
.ml-band-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .25rem .8rem; }
.ml-history { display: flex; flex-direction: column; gap: .3rem; }
.ml-hist-row { display: flex; gap: .5rem; align-items: center; font-size: .82rem; }
.ml-hist-row > span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-aud { display: flex; flex-direction: column; gap: .35rem; }
.ml-count { color: var(--mr-gold); }
.ml-preview { background: #fff; color: #222; border-radius: 6px; padding: 1rem 1.2rem; max-height: 50vh; overflow: auto; font: 15px/1.5 system-ui, sans-serif; }

@media (max-width: 760px) {
  .ml-wrap { grid-template-columns: 1fr; }
  .ml-side { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--mr-border); padding: .5rem; }
  .ml-side-head { display: none; }
  .ml-side-item { width: auto; flex: none; white-space: nowrap; }
  .ml-row { grid-template-columns: 1.4rem 1fr auto; }
  .ml-row > :nth-child(3), .ml-row > :nth-child(4), .ml-row > :nth-child(6), .ml-row > :nth-child(7) { display: none; }
  .ml-row-head { display: none; }
  .ml-grid { grid-template-columns: 1fr; }
}

/* ── Automations tab (custom_636) ───────────────────────────────────────── */
.au-body { display: flex; flex-direction: column; gap: .7rem; }
.au-wait { margin-bottom: .6rem; }
.au-card { border: 1px solid var(--mr-border); border-radius: 8px; background: var(--mr-surface-alt); padding: .2rem .9rem .7rem; }
.au-card.is-on { border-color: var(--mr-green-dim); }
.au-card--wait { border-color: var(--mr-gold-dim); padding-top: .7rem; margin-bottom: .6rem; display: flex; flex-direction: column; gap: .45rem; }
.au-card__head { all: unset; cursor: pointer; display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem 0 .2rem; font-family: var(--mr-sans); color: var(--mr-text); }
.au-card__head:focus-visible { outline: 2px solid var(--mr-green-light); outline-offset: 2px; border-radius: 4px; }
.au-name { font-weight: 600; font-size: .98rem; color: var(--mr-green-pale); }
.au-caret { margin-left: auto; color: var(--mr-muted); }
.au-what { margin: 0 0 .3rem; font-size: .82rem; color: var(--mr-muted); line-height: 1.45; }
.au-form { display: flex; flex-direction: column; gap: .55rem; padding-top: .5rem; border-top: 1px solid var(--mr-border); margin-top: .4rem; }
.au-switch { font-weight: 600; }
.au-text { min-height: 9rem; font-family: var(--mr-sans); line-height: 1.45; }
.au-days { width: 5rem; }
.au-tokens { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.au-token { font: 500 .74rem ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--mr-raise); color: var(--mr-green-pale); border: 1px solid var(--mr-border); border-radius: 4px; padding: .12rem .4rem; cursor: pointer; }
.au-token:hover { border-color: var(--mr-green-light); }
.au-card__top { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline; }
.au-about { color: var(--mr-text); font-size: .86rem; }
.au-when { color: var(--mr-muted); font-size: .76rem; margin-left: auto; }
.au-to { font-size: .82rem; color: var(--mr-muted); }
.au-table-wrap { overflow-x: auto; }
.au-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.au-table th { text-align: left; color: var(--mr-muted); font-weight: 500; padding: .3rem .4rem; border-bottom: 1px solid var(--mr-border); }
.au-table td { padding: .35rem .4rem; border-bottom: 1px solid var(--mr-border); vertical-align: top; }
.au-table td:last-child { white-space: nowrap; }
@media (max-width: 600px) {
  .au-when { margin-left: 0; }
  .au-table th:nth-child(4), .au-table td:nth-child(4) { display: none; }
}
.mr-pill.au-off { background: var(--mr-raise); color: var(--mr-muted); }
/* Four tabs on a phone (custom_636): tighter, and never wider than the screen. */
@media (max-width: 520px) {
  .mr-tabs { padding: .5rem .5rem 0; gap: .1rem; overflow-x: auto; }
  .mr-tab { padding: .45rem .55rem; letter-spacing: 0; flex: 0 0 auto; }
}


/* ── Public pages: signup, Choose what you get, unsubscribe, votes (custom_714)
   These sit inside the site theme, so they use its tokens (dragonfly
   global.css) with the same values written out as fallbacks. Everything is
   scoped under .mr-pub so nothing leaks into the theme. */
.mr-pub {
  --mrp-surface: var(--surface, #111811);
  --mrp-surface-alt: var(--surface-alt, #161e16);
  --mrp-border: var(--border-light, #243424);
  --mrp-text: var(--text-soft, #b8ccb8);
  --mrp-bright: var(--white, #e6efe6);
  --mrp-muted: var(--muted, #82a38a);
  --mrp-green: var(--green-light, #5a9e6e);
  --mrp-gold: var(--accent-warm, #e8c760);
  --mrp-display: var(--font-display, Georgia, serif);
  --mrp-body: var(--font-body, system-ui, sans-serif);
  font-family: var(--mrp-body);
  color: var(--mrp-text);
  max-width: 34rem;
  margin: 0 auto;
}
.mr-pub *, .mr-pub *::before, .mr-pub *::after { box-sizing: border-box; }
.mr-pub a { color: var(--mrp-gold); }
.mr-pub-note, .mr-signup--page, .mr-prefs {
  background: var(--mrp-surface);
  border: 1px solid var(--mrp-border);
  border-radius: 6px;
  padding: clamp(1.1rem, 3vw, 1.6rem);
}
.mr-signup--box { max-width: 28rem; margin: 0; }
.mr-pub-title, .mr-signup-heading {
  font-family: var(--mrp-display);
  color: var(--mrp-bright);
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0 0 .5rem;
}
.mr-signup-blurb { margin: 0 0 .9rem; font-size: .92rem; color: var(--mrp-muted); }
.mr-signup-form, .mr-prefs-form { display: flex; flex-direction: column; gap: .85rem; }
.mr-pub-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.mr-signup--box .mr-pub-row { grid-template-columns: 1fr; }
.mr-pub-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.mr-pub-label {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mrp-green); font-weight: 600; padding: 0;
}
.mr-pub-label em { text-transform: none; letter-spacing: 0; font-style: normal; color: var(--mrp-muted); font-weight: 400; }
.mr-pub input[type="email"], .mr-pub input[type="text"] {
  width: 100%;
  font: inherit; font-size: 1rem;
  padding: .65rem .75rem;
  background: var(--mrp-surface-alt);
  color: var(--mrp-bright);
  border: 1px solid var(--mrp-border);
  border-radius: 4px;
}
.mr-pub input[type="email"]:focus, .mr-pub input[type="text"]:focus {
  outline: 2px solid var(--mrp-gold); outline-offset: 1px; border-color: transparent;
}
.mr-pub-choose { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.mr-pub-choose legend { margin-bottom: .35rem; }
.mr-pub-radio, .mr-pub-check {
  display: flex; align-items: flex-start; gap: .55rem;
  cursor: pointer; line-height: 1.4; font-size: .95rem;
}
.mr-pub-radio input, .mr-pub-check input { margin-top: .2rem; accent-color: var(--mrp-gold); width: 1.05rem; height: 1.05rem; flex: none; }
.mr-pub-radio strong { color: var(--mrp-bright); font-weight: 600; }
.mr-pub-bands {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: .4rem .9rem;
  padding: .7rem .8rem; margin-left: 1.6rem;
  background: var(--mrp-surface-alt);
  border: 1px solid var(--mrp-border); border-radius: 4px;
}
.mr-pub-bands[hidden] { display: none; }
/* The site's own button look (green, small capitals), so these match every
   other button on jayguitar.com. */
.mr-pub-btn {
  align-self: flex-start;
  font-family: var(--mrp-body); font-size: 11px; font-weight: 400;
  letter-spacing: 2px; text-transform: uppercase;
  padding: .85rem 1.6rem;
  background: var(--green, #499260); color: var(--mrp-bright);
  border: 1px solid var(--green, #499260); border-radius: 4px; cursor: pointer;
}
.mr-pub-btn:hover { background: var(--mrp-green); border-color: var(--mrp-green); }
.mr-pub-btn:disabled { opacity: .6; cursor: default; }
.mr-pub .mr-pub-link {
  background: none; border: 0; padding: 0;
  font-family: var(--mrp-body); font-size: .85rem; letter-spacing: normal; text-transform: none;
  color: var(--mrp-muted); text-decoration: underline; cursor: pointer;
}
.mr-pub .mr-pub-link:hover { background: none; color: var(--mrp-text); }
/* The theme captions every <label> in small capitals; these labels hold
   sentences and fields. */
.mr-pub label.mr-pub-radio, .mr-pub label.mr-pub-check, .mr-pub label.mr-pub-field {
  font-size: .95rem; letter-spacing: normal; text-transform: none; color: var(--mrp-text); margin: 0;
}
.mr-pub label.mr-pub-radio, .mr-pub label.mr-pub-check { display: flex; }
.mr-pub label.mr-pub-field { display: flex; }
.mr-pub-small { font-size: .82rem; color: var(--mrp-muted); margin: 0; }
.mr-pub-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mr-signup-flash { font-size: .92rem; min-height: 1.3em; }
.mr-signup-flash.is-good { color: var(--mrp-green); }
.mr-signup-flash.is-bad { color: #e0957f; }
.mr-pub-banner {
  border-left: 3px solid var(--mrp-gold);
  background: var(--mrp-surface-alt);
  padding: .8rem 1rem; margin: 0 0 1rem;
  display: flex; flex-direction: column; gap: .6rem; align-items: flex-start;
}
.mr-pub-banner p { margin: 0; }
.mr-prefs-who { margin-bottom: 1rem; }
.mr-prefs-leave { border-top: 1px solid var(--mrp-border); padding-top: .9rem; margin-top: .3rem; }
.mr-pub-note p { margin: 0 0 .8rem; line-height: 1.55; }
.mr-pub-note form { margin: 0 0 1rem; }
/* Votes */
.mr-vote-thanks { color: var(--mrp-green); font-weight: 600; }
.mr-vote-list { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.mr-vote-list li {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: .5rem;
  background: var(--mrp-surface-alt); border: 1px solid var(--mrp-border); border-radius: 4px;
}
.mr-vote-list li.is-mine { border-color: var(--mrp-gold); }
.mr-vote-bar { position: absolute; inset: 0 auto 0 0; background: rgba(232, 199, 96, .14); pointer-events: none; }
.mr-vote-label { position: relative; flex: 1; padding: .65rem .8rem; color: var(--mrp-bright) !important; text-decoration: none; }
.mr-vote-you { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mrp-gold); margin-left: .35rem; }
.mr-vote-pct { position: relative; padding-right: .8rem; font-variant-numeric: tabular-nums; color: var(--mrp-muted); }
@media (max-width: 560px) {
  .mr-pub-row { grid-template-columns: 1fr; }
  .mr-pub-bands { margin-left: 0; grid-template-columns: 1fr 1fr; }
  .mr-pub-btn { align-self: stretch; text-align: center; }
}

/* ── Desk: composer tools, Sent stats, signup links (custom_714) ─────────── */
.ml-tools-row { display: flex; gap: .4rem; flex-wrap: wrap; margin: -.2rem 0 .2rem; }
.ml-panel { border: 1px solid var(--mr-border); border-radius: 6px; background: var(--mr-deep); padding: .7rem; display: flex; flex-direction: column; gap: .5rem; }
.ml-panel[hidden] { display: none; }
.ml-shows { display: flex; flex-direction: column; gap: 2px; max-height: 18rem; overflow: auto; }
.ml-show-row { display: grid; grid-template-columns: 2.6rem 1fr auto auto auto; gap: .5rem; align-items: center; padding: .3rem .35rem; border-radius: 4px; background: var(--mr-surface); }
.ml-show-thumb { width: 2.6rem; height: 2.6rem; object-fit: cover; border-radius: 3px; display: block; background: var(--mr-raise); }
.ml-show-info { display: flex; flex-direction: column; min-width: 0; font-size: .82rem; }
.ml-show-info > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-show-info strong { color: var(--mr-green-pale); font-weight: 600; }
.ml-frame-wrap { display: flex; flex-direction: column; gap: .4rem; }
.ml-frame { width: 100%; height: 34rem; max-height: 62vh; border: 1px solid var(--mr-border); border-radius: 6px; background: #efece4; }
.ml-plain { white-space: pre-wrap; font: .78rem/1.5 ui-monospace, Menlo, Consolas, monospace; background: var(--mr-deep); color: var(--mr-text); padding: .6rem; border-radius: 4px; max-height: 16rem; overflow: auto; margin: .4rem 0 0; }
.ml-frame-wrap summary { cursor: pointer; font-size: .8rem; color: var(--mr-muted); }
.ml-sched { flex-wrap: wrap; gap: .4rem; }
.ml-near { width: 14rem; max-width: 100%; }
.ml-gap { margin: .5rem 0 1.1rem; }
.mr-tag.ml-monthly { margin-left: .3rem; }
.mr-tag.ml-tag-poll { background: rgba(224, 165, 69, .15); color: var(--mr-gold); }
.mr-msg.is-scheduled .mr-msg-snip { color: var(--mr-gold); }
.ml-polls { display: flex; flex-direction: column; gap: .6rem; }
.ml-poll-res { border: 1px solid var(--mr-border); border-radius: 6px; padding: .6rem .7rem; display: flex; flex-direction: column; gap: .3rem; }
.ml-poll-res > strong { color: var(--mr-green-pale); font-weight: 600; }
.ml-poll-row { position: relative; display: flex; justify-content: space-between; gap: .5rem; padding: .3rem .5rem; border-radius: 4px; background: var(--mr-surface-alt); overflow: hidden; font-size: .84rem; }
.ml-poll-bar { position: absolute; inset: 0 auto 0 0; background: rgba(224, 165, 69, .18); }
.ml-poll-label, .ml-poll-n { position: relative; }
.ml-poll-n { color: var(--mr-muted); font-variant-numeric: tabular-nums; }
.ml-qr { display: flex; justify-content: center; padding: .4rem 0; }
.ml-qr-img { width: 13rem; height: 13rem; image-rendering: pixelated; border-radius: 6px; }
.ml-link { flex-wrap: nowrap; }
.ml-link .mr-in { flex: 1; min-width: 0; }
.au-vip { display: flex; flex-direction: column; gap: .35rem; padding: .5rem .6rem; border: 1px dashed var(--mr-border); border-radius: 6px; }
.au-vip .mr-in-compact { width: 6rem; }
@media (max-width: 640px) {
  .ml-show-row { grid-template-columns: 2.4rem repeat(3, 1fr); }
  .ml-show-thumb { grid-row: span 2; }
  .ml-show-info { grid-column: 2 / -1; }
  .ml-frame { height: 28rem; }
}

/* ── Composer, shows first (custom_715) ───────────────────────────────────
   Wide card: the form on the left, the finished email beside it, so nothing
   needs scrolling back and forth. Stacks on narrow screens. */
.mr-modal-card.mr-modal-wide { width: min(1320px, 97vw); }
.ml-comp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.ml-comp-left { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.ml-comp-right { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
@media (min-width: 980px) {
  .ml-comp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .ml-comp-right { position: sticky; top: 0; }
  .ml-live-frame .ml-frame { height: calc(88vh - 9rem); max-height: none; }
}
.ml-step { border: 1px solid var(--mr-border); border-radius: 8px; background: var(--mr-deep); padding: .55rem .6rem; display: flex; flex-direction: column; gap: .45rem; }
.ml-step-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ml-step-head .mr-field-label { margin: 0; }
.ml-pick-find { margin-left: auto; width: 12rem; max-width: 100%; }
.ml-pick { display: flex; flex-direction: column; gap: 2px; max-height: 15.5rem; overflow: auto; }
.ml-pick-row {
  display: grid; grid-template-columns: 1.1rem 2.8rem minmax(0, 1fr); gap: .55rem; align-items: center;
  padding: .3rem .45rem; border-radius: 5px; background: var(--mr-surface); cursor: pointer;
  border: 1px solid transparent;
}
.ml-pick-row:hover { border-color: var(--mr-border-lit); }
.ml-pick-row.is-on { border-color: var(--mr-gold-dim); background: rgba(224, 165, 69, .08); }
.ml-pick-row input { accent-color: var(--mr-gold); width: 1rem; height: 1rem; margin: 0; }
.ml-pick-thumb { width: 2.8rem; height: 2.8rem; object-fit: cover; border-radius: 4px; display: flex; align-items: center; justify-content: center; background: var(--mr-raise); font-size: .55rem; color: var(--mr-muted); text-align: center; line-height: 1.1; }
.ml-pick-info { display: flex; flex-direction: column; min-width: 0; font-size: .82rem; line-height: 1.3; }
.ml-pick-info > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-pick-info strong { color: var(--mr-green-pale); font-weight: 600; }
.ml-pick-where { color: var(--mr-muted); }
.ml-layout[hidden] { display: none; }
.ml-layout { align-self: flex-start; }
.ml-aud-wrap { border: 1px solid var(--mr-border); border-radius: 8px; padding: .45rem .6rem; }
.ml-aud-wrap > summary { cursor: pointer; list-style: revert; font-size: .85rem; }
.ml-aud-wrap > summary .mr-field-label { display: inline; margin: 0; }
.ml-aud-wrap[open] > summary { margin-bottom: .5rem; }
.ml-aud-sum { color: var(--mr-text); }
.ml-aud-note { color: var(--mr-gold); margin: 0; }
.ml-subj { flex-wrap: nowrap; }
.ml-subj .mr-in { flex: 1; min-width: 0; }
.ml-above, .ml-below { min-height: 4.6rem; }
.ml-live-meta { margin: 0; }
.ml-live-frame .ml-frame { height: 32rem; }
.ml-live-plain summary { cursor: pointer; font-size: .8rem; color: var(--mr-muted); }
@media (max-width: 640px) {
  .ml-subj { flex-wrap: wrap; }
  .ml-subj .mr-in { flex-basis: 100%; }
  .ml-pick-find { margin-left: 0; width: 100%; }
}

/* ── Bands tab, Send as, new automation bits (custom_717) ────────────────── */
.bd-table { display: flex; flex-direction: column; gap: 3px; margin-bottom: .8rem; }
.bd-row { display: grid; grid-template-columns: minmax(9rem, 1.2fr) minmax(8rem, 1.1fr) minmax(7rem, 1fr) minmax(8rem, 1.1fr) minmax(11rem, 1.4fr) auto; gap: .45rem; align-items: center; padding: .4rem .55rem; border-radius: 6px; background: var(--mr-surface-alt); }
.bd-row-head { background: transparent; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mr-muted); padding-top: 0; padding-bottom: 0; }
.bd-row .mr-in { width: 100%; min-width: 0; }
.bd-name { display: flex; flex-direction: column; min-width: 0; }
.bd-name strong { color: var(--mr-green-pale); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-act { display: flex; align-items: center; gap: .35rem; }
.mr-mini.is-dirty { border-color: var(--mr-gold); color: var(--mr-gold); }
.ml-sendas { min-width: 14rem; }
.au-cad { margin: 0; color: var(--mr-gold); }
.au-now { flex-wrap: wrap; gap: .35rem; }
.au-opts { display: flex; flex-direction: column; gap: .7rem; }
.au-card__head--static { cursor: default; }
@media (max-width: 900px) {
  .bd-row { grid-template-columns: 1fr 1fr; }
  .bd-row-head { display: none; }
  .bd-name { grid-column: 1 / -1; }
}