/* ================= THE SAVED INBOUND EMAIL — card and reader =================

   Two things only: the card JS/features/task-inbound-email.js mounts under a
   task's description, and the dialog that card opens. The dialog CHROME is not
   here — `.settings-modal-*`, the application's one dialog shell, already styled
   in CSS/components.css and re-skinned in CSS/alt/alt-shared-dialogs.css.

   One sheet, three surfaces (the drawer, the framed editor, the team board's task
   modal), all inside `.alt-app` — each declaration names a canonical fallback, so
   a host outside the suite degrades to the shared palette rather than `unset`.

   The button is not styled here either — each host passes its own class, so the
   control looks like its neighbours rather than like something this file invented
   (sys_design-system.md §21c: a capability must not announce itself by looking foreign). */

/* ---- THE MOUNT POINT --------------------------------------------------------

   Empty on almost every task, collapsing to nothing when it is — no margin, no
   padding. `min-width:0` is load-bearing: a flex item's default `min-width:auto`
   would stop the card's ellipsis rules ever taking effect on a narrow drawer. */
.tie-host{ min-width:0; }

/* ---- THE CARD ---------------------------------------------------------------

   A bordered block, not a disclosure — it says one thing and offers one action,
   not worth a collapsible state for three lines absent from almost every task. */
.tie-card{
  display:flex;
  flex-direction:column;
  gap:var(--a-2, 8px);
  /* No margin of its own: the host's PARENT already provides the gap on all three
     surfaces (e.g. `.a-drawer-b`'s own flex gap, CSS/alt/alt-tasks.css), so a margin
     here would add to it rather than replace it. */
  margin:0;
  padding:var(--a-3, 12px);
  border:1px solid var(--a-line, var(--border));
  border-radius:var(--a-r, 9px);
  /* Recessed (`--a-bg`), not raised (`--a-raised`) — raised matches `.a-btn`'s own
     background, so the control read as a bordered rectangle of the card's own colour.
     `--a-bg` is the surface `.a-input` already uses in this same drawer. */
  background:var(--a-bg, var(--bg));
  min-width:0;
}

.tie-head{
  display:flex;
  align-items:center;
  gap:var(--a-2, 8px);
  min-width:0;
}

.tie-icon{
  /* Decorative and aria-hidden in the markup. Sized so it aligns with the label's cap height
     rather than floating above it. */
  font-size:14px;
  line-height:1;
  color:var(--a-dim, var(--text-dim));
  flex:0 0 auto;
}

.tie-label{
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--a-dim, var(--text-dim));
  min-width:0;
}

/* The three facts, stacked rather than one line: each gets the full width and
   truncates on its own, where a single line let the address crowd out the subject. */
.tie-meta{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.tie-from,
.tie-subject,
.tie-when{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}

.tie-from{ color:var(--a-text, var(--text)); font-weight:500; }
.tie-subject{ color:var(--a-text, var(--text)); }
.tie-when{ color:var(--a-faint, var(--text-faint)); }

.tie-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--a-2, 8px);
  margin-top:2px;
}


/* ---- THE READER DIALOG ------------------------------------------------------ */

/* The shell is sized in JS from the viewport (sizeModalToViewport), the way every dialog in
   this application is. What this adds is the column behaviour: the message box grows and the
   three header fields do not. */
.tie-modal .settings-modal-body{
  display:flex;
  flex-direction:column;
  gap:var(--a-3, 12px);
  min-height:0;
}

.tie-fields{
  display:flex;
  flex-direction:column;
  gap:var(--a-1, 4px);
  min-width:0;
}

.tie-field{
  display:flex;
  gap:var(--a-2, 8px);
  align-items:baseline;
  min-width:0;
  font-size:13px;
}

.tie-field-label{
  flex:0 0 72px;
  color:var(--a-dim, var(--text-dim));
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.02em;
}

/* Wraps rather than truncates, unlike the card — there is room, and the dialog is
   built for reading. overflow-wrap is for a long address with no spaces in it. */
.tie-field-value{
  min-width:0;
  color:var(--a-text, var(--text));
  overflow-wrap:anywhere;
}

/* `pre-wrap` is the whole rule: the body is textContent, so the sender's own line
   breaks are real newline characters — nothing injected, nothing to sanitise. Its
   own scroll container, max-height set in JS from the dialog's measured height. */
.tie-body-text{
  flex:1 1 auto;
  min-height:120px;
  overflow-y:auto;
  padding:var(--a-3, 12px);
  border:1px solid var(--a-line-soft, var(--border-soft));
  border-radius:var(--a-r-sm, 6px);
  background:var(--a-bg, var(--bg));
  color:var(--a-text, var(--text));
  /* Inherited face, not `--a-mono` — a monospace box says "this is code," and an
     email is prose. `pre-wrap` already preserves the sender's line breaks. */
  font-size:13px;
  line-height:1.55;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

/* Focusable because it scrolls — a container the keyboard cannot reach is its own
   accessibility failure. CSS/alt/alt-focus.css owns the ring; this must not remove it. */
.tie-body-text:focus-visible{
  outline:2px solid var(--a-ring, var(--focus-ring));
  outline-offset:2px;
}

.tie-note{
  margin:0;
  font-size:12px;
  line-height:1.5;
  color:var(--a-dim, var(--text-dim));
}

/* Dimmer than the truncation note on purpose — a standing fact, not something to act on. */
.tie-retention{ color:var(--a-faint, var(--text-faint)); }

.tie-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:var(--a-2, 8px);
  flex-wrap:wrap;
}

/* ---- NARROW ----------------------------------------------------------------

   The label column stacks below 520px — a fixed 72px gutter would leave the value
   two words wide on a phone-width drawer (sys_design-system.md §16). */
@media (max-width: 520px){
  .tie-field{ flex-direction:column; gap:0; }
  .tie-field-label{ flex:0 0 auto; }
  .tie-modal-actions{ justify-content:stretch; }
  .tie-modal-actions > .btn{ flex:1 1 auto; }
}