/* ============================================================
   MAIL — Outlook module inside the Command Center.
   Uses the app's own tokens (theme.css). No new palette, no new
   typeface: navy --espresso for structure and selection, CCS red
   --gold spent in exactly two places (the unread dot and the
   primary Reply button) so it still means "look here".
   All classes prefixed .ml- to avoid collisions.
   ============================================================ */

.ml-grid {
  display: grid;
  /* The list was pinned at 372px, so on a wide monitor every extra pixel went to
     the reading pane — which is empty until you pick something. It may now grow
     with the window (to a limit, past which line length hurts more than it
     helps). The screen now spans the whole window — see .content-wide. */
  grid-template-columns: 232px minmax(380px, 520px) minmax(0, 1fr);
  gap: 14px;
  height: calc(100vh - 148px);
  min-height: 470px;
}

/* ---- outcome banner from the Microsoft round-trip ----------- */
/* Spans the whole grid: a refused connection must not be missable. */
.ml-flash {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; border-radius: 10px; font-size: 13px; line-height: 1.45;
  margin-bottom: 12px;
}
.ml-flash > span { flex: 1; min-width: 200px; }
.ml-flash.bad { background: var(--st-red-bg); border: 1px solid var(--st-red); color: var(--st-red); font-weight: 600; }
.ml-flash.good { background: var(--st-green-bg); border: 1px solid var(--st-green); color: var(--st-green); font-weight: 600; }

/* ---- shared surface ---------------------------------------- */
.ml-pane {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ---- folder rail ------------------------------------------- */
/* Deliberately NOT a card: the rail is navigation, so it sits on the
   page ground and lets the two content panes read as the surfaces. */
.ml-rail { display: flex; flex-direction: column; gap: 2px; overflow: auto; padding-right: 2px; min-width: 0; }

/* An email address is not a heading: no uppercase, no letter-spacing — those
   made it unreadable AND truncated it mid-word. The label carries that job. */
.ml-rail-hd { padding: 2px 10px 10px; min-width: 0; }
.ml-rail-hd .lbl {
  display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px;
}
.ml-rail-hd .who {
  display: block; font-size: 12px; font-weight: 700; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ml-fold {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 9px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  border: 1px solid transparent;
  transition: background .13s ease, color .13s ease;
  user-select: none;
}
.ml-fold:hover { background: color-mix(in oklab, var(--espresso) 6%, transparent); color: var(--ink); }
.ml-fold .ml-fold-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-fold .ml-fold-ic { flex: none; display: inline-flex; color: var(--ink-3); }
.ml-fold.unread { font-weight: 700; color: var(--ink); }
.ml-fold.active {
  background: var(--espresso); color: #fff; font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.ml-fold.active .ml-fold-ic { color: var(--champagne); }
.ml-fold.active .ml-count { background: rgba(255,255,255,.18); color: #fff; }

.ml-count {
  flex: none; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: color-mix(in oklab, var(--espresso) 9%, transparent); color: var(--ink-2);
  border-radius: 999px; padding: 1px 7px; min-width: 20px; text-align: center;
}

.ml-twist {
  flex: none; width: 14px; text-align: center; font-size: 9px; color: currentColor; opacity: .55;
  cursor: pointer; line-height: 1;
}
.ml-twist:hover { opacity: 1; }

/* ---- search ------------------------------------------------- */
.ml-search-wrap { position: relative; display: flex; align-items: center; }
.ml-search-wrap > svg { position: absolute; left: 10px; color: var(--ink-3); pointer-events: none; }
.ml-search {
  width: 100%; height: 36px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--paper);
  padding: 0 11px 0 32px; font-family: inherit; font-size: 13px; color: var(--ink);
  transition: border-color .13s ease, background .13s ease, box-shadow .13s ease;
}
.ml-search::placeholder { color: var(--ink-3); }
.ml-search:focus {
  outline: none; background: var(--card); border-color: var(--espresso);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--espresso) 13%, transparent);
}

/* ---- message list ------------------------------------------ */
.ml-list-hd {
  padding: 10px 12px; border-bottom: 1px solid var(--line-soft);
  background: var(--card); flex: none;
}
.ml-list-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-top: 8px; font-size: 11px; color: var(--ink-3);
}
.ml-list-meta .ml-fold-live {
  font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ml-list-meta .ml-n { font-variant-numeric: tabular-nums; flex: none; }

.ml-scroll { flex: 1; overflow: auto; }

.ml-row {
  display: grid; grid-template-columns: 34px 1fr; gap: 11px;
  padding: 11px 13px 11px 10px;
  border-bottom: 1px solid var(--line-soft);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background .12s ease;
}
.ml-row:hover { background: color-mix(in oklab, var(--espresso) 4%, transparent); }
.ml-row.sel {
  background: color-mix(in oklab, var(--espresso) 8%, transparent);
  border-left-color: var(--espresso);
}
.ml-row.sel:hover { background: color-mix(in oklab, var(--espresso) 10%, transparent); }

.ml-av-wrap { position: relative; width: 34px; height: 34px; flex: none; }
.ml-av {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #fff;
}
/* the ONE red on this screen besides the Reply button: still unread */
.ml-dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--card);
}
.ml-row.sel .ml-dot { border-color: color-mix(in oklab, var(--espresso) 8%, var(--card)); }

.ml-row-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ml-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ml-from {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 500; color: var(--ink-2);
}
.ml-when {
  flex: none; font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ml-subj {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13.5px; font-weight: 500; color: var(--ink-2); line-height: 1.35;
}
.ml-prev {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--ink-3); line-height: 1.35;
}
.ml-row.unread .ml-from { font-weight: 800; color: var(--ink); }
.ml-row.unread .ml-subj { font-weight: 700; color: var(--espresso); }
.ml-row.unread .ml-when { color: var(--ink-2); font-weight: 700; }

.ml-clip { flex: none; display: inline-flex; color: var(--ink-3); vertical-align: -2px; margin-left: 5px; }

/* ---- reading pane ------------------------------------------ */
.ml-read-hd { padding: 14px 16px 12px; border-bottom: 1px solid var(--line-soft); flex: none; }
.ml-read-subj {
  font-family: 'Sora', Georgia, serif; font-size: 20px; font-weight: 600; line-height: 1.28;
  color: var(--espresso); text-wrap: balance; margin: 0 0 11px;
}
.ml-read-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ml-read-who .ml-av { width: 38px; height: 38px; font-size: 13px; }
.ml-read-id { min-width: 0; flex: 1; }
.ml-read-nm { font-size: 13.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-read-sub { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-read-when { flex: none; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.ml-bar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 12px; }

.ml-body { flex: 1; overflow: auto; background: #fff; }
.ml-body iframe { display: block; width: 100%; height: 100%; min-height: 260px; border: 0; background: #fff; }

/* ---- composer ---------------------------------------------- */
/* Collapsed to one line so the message keeps the vertical space;
   grows on focus or as soon as there is something written. */
.ml-composer { border-top: 1px solid var(--line-soft); padding: 11px 13px; flex: none; background: var(--card); }
.ml-composer textarea {
  width: 100%; height: 40px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--paper); padding: 10px 12px; font-family: inherit; font-size: 13px;
  line-height: 1.45; color: var(--ink); resize: none; display: block;
  transition: height .18s ease, border-color .13s ease, background .13s ease, box-shadow .13s ease;
}
.ml-composer textarea::placeholder { color: var(--ink-3); }
.ml-composer textarea:focus {
  outline: none; background: var(--card); border-color: var(--espresso);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--espresso) 13%, transparent);
}
.ml-composer:focus-within textarea, .ml-composer.open textarea { height: 116px; resize: vertical; }

.ml-send-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.ml-warn { font-size: 11.5px; color: var(--ink-3); }

/* ---- empty / loading --------------------------------------- */
.ml-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; padding: 30px 22px; text-align: center; color: var(--ink-3);
}
.ml-empty .ml-empty-ic {
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--ink-3);
}
.ml-empty-t { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.ml-empty-s { font-size: 12px; max-width: 280px; line-height: 1.5; }

/* skeleton shimmer while the first page loads */
.ml-skel { padding: 11px 13px 11px 10px; border-bottom: 1px solid var(--line-soft); display: grid; grid-template-columns: 34px 1fr; gap: 11px; }
.ml-skel i { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--line-soft) 25%, var(--paper) 37%, var(--line-soft) 63%); background-size: 400% 100%; animation: mlShine 1.3s ease infinite; }
.ml-skel .s-av { width: 34px; height: 34px; border-radius: 50%; }
.ml-skel .s-l { height: 9px; margin-bottom: 7px; }
@keyframes mlShine { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .ml-skel i { animation: none; } .ml-composer textarea { transition: none; } }

/* ---- narrow-screen folder picker (hidden on desktop) -------- */
.ml-fold-sel { display: none; }

/* ---- back button (narrow only) ----------------------------- */
.ml-back { display: none; }

/* ============================================================
   Responsive. The Command Center also ships as a phone app, so
   the three panes have to survive down to a handset.
   ============================================================ */
@media (max-width: 1240px) {
  .ml-grid { grid-template-columns: 196px 322px 1fr; gap: 11px; }
}

@media (max-width: 1000px) {
  /* rail folds away into a select above the list */
  .ml-grid { grid-template-columns: 300px 1fr; }
  .ml-rail { display: none; }
  .ml-fold-sel {
    display: block; width: 100%; height: 36px; margin-bottom: 8px;
    border-radius: 9px; border: 1px solid var(--line); background: var(--paper);
    padding: 0 9px; font-family: inherit; font-size: 13px; color: var(--ink);
  }
}

@media (max-width: 760px) {
  /* one pane at a time: the list, or the message you opened */
  .ml-grid { grid-template-columns: 1fr; height: calc(100vh - 130px); }
  .ml-grid[data-sel="1"] .ml-list { display: none; }
  .ml-grid[data-sel="0"] .ml-read { display: none; }
  .ml-back { display: inline-flex; }
  .ml-read-subj { font-size: 17px; }
}