/* The team's email builder — the "Customize email" section of Team settings. Its own
   file, not a block in components.css, for the reason CSS/switch.css is: only the two
   pages that render `#adminModal` ever draw this section.

   Every selector carries the `eb-` prefix so it cannot reach the classic vocabulary,
   the Suite's `.a-*` vocabulary, or `CSS/alt/alt-team.css`'s `#adminModal` re-base
   sharing this page — and defines nothing that already exists (`.pref-row`, `.btn`,
   `.switch-check` + `.pref-switch`, `.rt-composer` + `.rt-input`): layout, plus the
   one surface with no application token, the email itself.

   Both dialogs — classic `#adminModal` and the Suite's re-based one — host identical
   markup, so this sheet is written once; font, control height and input background
   all come from the host's own dialog rules, which is exactly what differs. */

/* ---------- THE ONE PLACE THIS FILE DECLARES A COLOUR, AND WHY IT IS NOT A THEME TOKEN ----------

   The preview is a picture of an EMAIL, not a page of this application — mail clients
   render on a light ground and never consult `prefers-color-scheme`, so drawing it on
   `var(--panel)` would show an administrator a message no recipient actually receives.

   So the PAPER is fixed and the CHROME around it is not: everything outside
   `.eb-paper` uses the application's tokens and follows the theme. These four are the
   paper, measured, and named so nothing else reaches for a raw hex to mean "email" —
   declared on `:root` only, because the paper does not change with the room.

     --eb-paper  #ffffff  the sheet
     --eb-ink    #1f2933  body text on it            15.6:1
     --eb-dim    #5b6875  the footer and the eyebrow  5.4:1
     --eb-rule   #e3e8ee  a hairline on it           1.2:1, decorative only, never a control edge */
:root{
  --eb-paper:#ffffff;
  --eb-ink:#1f2933;
  --eb-dim:#5b6875;
  --eb-rule:#e3e8ee;
}

/* ---------- the section ----------
   Two columns where there is room, one below 880px. The dialog's active pane is the
   one scroller — nothing here sets a height, so the preview grows into it. */
.eb-grid{
  display:grid; grid-template-columns:minmax(0, 1fr); gap:16px; margin-top:10px;
}
@media (min-width:880px){
  .eb-grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 300px); }
}

/* A grid child is the width it is given only if it is allowed to shrink. */
.eb-col{ min-width:0; }

/* ---------- a labelled field ----------
   Stacked rather than in a label/control row: the fields here carry a hint under them, and a
   two-column field row puts the hint under the control where it reads as a validation message. */
.eb-field{ display:flex; flex-direction:column; gap:4px; margin-bottom:12px; min-width:0; }
.eb-field > label{ font-size:12px; font-weight:600; color:var(--text); }
.eb-hint{ font-size:11px; color:var(--text-faint); line-height:1.45; }
.eb-hint.eb-err{ color:var(--red-text); }

/* Width is layout, so it belongs on the instance; everything else about these inputs comes from
   the host dialog's own control rule, which is what makes the section look native in both. */
.eb-input{ width:100%; max-width:100%; min-width:0; }
.eb-input.eb-sm{ width:120px; max-width:100%; }

/* ---------- the token buttons ----------
   Each one inserts at the caret of whichever field was last focused. They are real buttons, so
   Tab reaches them and Enter and Space press them — the keyboard equivalent comes with the
   element rather than being added to a div. */
.eb-tokens{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.eb-token{ font-variant-numeric:tabular-nums; }
.eb-token-legend{
  display:grid; grid-template-columns:auto minmax(0, 1fr); gap:2px 8px;
  margin-top:6px; font-size:11px; line-height:1.45; color:var(--text-faint);
}
.eb-token-legend b{ color:var(--text-dim); font-weight:600; white-space:nowrap; }

/* ---------- images ----------
   A row per image: the address, what it is called, and where it sits. Below 640px it stacks,
   because three controls and a Remove button on one line inside a dialog is where the 320px
   width starts pushing a right edge past the viewport. */
.eb-img-row{
  display:grid; gap:6px; align-items:start; margin-bottom:8px;
  grid-template-columns:minmax(0, 1fr);
}
@media (min-width:640px){
  .eb-img-row{ grid-template-columns:minmax(0, 2fr) minmax(0, 1fr) auto auto; align-items:center; }
}

/* ---------- accent and font ----------
   The swatch is 28px square with no padding — the size the design system gives a colour swatch,
   and it clears the 24px pointer floor. Colour is never the only cue: the hex field beside it
   says the same thing in characters, for anyone who cannot judge the square. */
.eb-brand-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.eb-swatch{
  width:28px; height:28px; flex:0 0 auto; padding:0;
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  background:var(--panel-2); cursor:pointer;
}
.eb-swatch:focus-visible{
  outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:inherit;
}

/* ---------- the preview ----------
   `position:sticky` only where there is a second column to be sticky beside; in the stacked
   layout it would pin the email over the form it belongs to. */
.eb-preview{ min-width:0; }
@media (min-width:880px){
  .eb-preview{ position:sticky; top:0; }
}

/* The tab pair over the preview. Two states, and the current one is not signalled by colour
   alone — it carries `aria-pressed`, and it is the only one with a filled ground. */
.eb-tabs{ display:flex; gap:4px; margin-bottom:8px; }
.eb-tab[aria-pressed="true"]{
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent-text);
}

.eb-frame{
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--panel-2); padding:10px; min-width:0; overflow:hidden;
}
.eb-frame-note{ font-size:11px; color:var(--text-faint); line-height:1.45; margin-bottom:8px; }

/* THE PAPER. A fixed light sheet, deliberately — see the token block at the top of this file.
   Its own type stack is set inline by the renderer from the chosen font, which is why no
   font-family appears here: two answers to "what face is this" is exactly the drift this
   section exists to show the administrator. */
.eb-paper{
  background:var(--eb-paper); color:var(--eb-ink);
  border:1px solid var(--eb-rule); border-radius:var(--radius-sm);
  padding:16px; min-width:0; overflow-wrap:anywhere; font-size:13px; line-height:1.6;
}
.eb-paper-head{
  display:flex; align-items:center; gap:8px;
  padding-bottom:10px; margin-bottom:12px; border-bottom:1px solid var(--eb-rule);
}
.eb-paper-mark{ width:30px; height:28px; flex:0 0 auto; }
.eb-paper-team{ font-size:14px; font-weight:600; color:var(--eb-ink); min-width:0; }
.eb-paper-meta{ font-size:11px; color:var(--eb-dim); line-height:1.45; margin-bottom:10px; }
.eb-paper-subject{ font-size:16px; font-weight:600; line-height:1.25; margin-bottom:10px; }
.eb-paper-body p{ margin:0 0 10px 0; }
.eb-paper-body p:last-child{ margin-bottom:0; }
.eb-paper-body a{ color:inherit; }
.eb-paper-img{ display:block; max-width:100%; height:auto; margin:0 0 12px 0; }
.eb-paper-foot{
  margin-top:14px; padding-top:10px; border-top:1px solid var(--eb-rule);
  font-size:11px; line-height:1.45; color:var(--eb-dim);
}

/* A remote image, not the image: `img-src 'self' data: blob:` would refuse it and
   log a CSP violation here, though it arrives fine in the mail client. A labelled
   stand-in says the image is in the email and why it is not on this screen. */
.eb-paper-remote{
  display:flex; align-items:center; gap:8px;
  padding:10px; margin:0 0 12px 0;
  border:1px dashed var(--eb-rule); border-radius:var(--radius-sm);
  font-size:11px; line-height:1.45; color:var(--eb-dim); word-break:break-all;
}

/* The stand-in for wording nobody has customised. The standard invitation text lives in exactly
   one place — MESSAGES in the Edge Function — so this section never carries a copy of it to
   preview; it says what will be there instead. */
.eb-paper-standard{
  padding:10px; border:1px dashed var(--eb-rule); border-radius:var(--radius-sm);
  font-size:12px; line-height:1.5; color:var(--eb-dim);
}

/* ---------- the actions ---------- */
.eb-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; }