.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:var(--control-height);
  padding:10px 18px;
  border-radius:var(--control-radius);
  border:1px solid transparent;
  font-size:var(--type-control);
  font-weight:400;
  line-height:1.3;
  transition:
    background var(--motion-quick) var(--ease-standard),
    border-color var(--motion-quick) var(--ease-standard);
  white-space:nowrap
}

.button-primary {
  background:var(--ink);
  color:var(--surface);
  border-color:var(--ink)
}

.button-primary:hover:not(:disabled) {
  background:#302a20
}

.button-secondary {
  background:transparent;
  border-color:var(--line);
  color:var(--ink)
}

.button-secondary:hover:not(:disabled) {
  background:#fff;
  border-color:var(--line-strong)
}

.button:disabled {
  opacity:.42
}

.text-action {
  display:inline-flex;
  align-items:center;
  min-height:24px;
  font-size:var(--type-small);
  color:var(--ink-soft);
  text-decoration:underline;
  text-decoration-color:var(--line-strong);
  text-underline-offset:4px
}

.text-action:hover {
  color:var(--accent)
}

.icon-button {
  min-width:36px;
  width:36px;
  height:36px;
  border:1px solid var(--line);
  border-radius:var(--control-radius);
  font-size:18px;
  background:var(--surface)
}

.icon-button:disabled {
  opacity:.35
}

.status-pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:var(--type-caption);
  white-space:nowrap;
  border:1px solid var(--line);
  border-radius:0;
  padding:4px 9px;
  color:var(--muted);
  background:var(--surface-softer)
}

.status-pill.is-ready,.status-pill.is-complete {
  color:var(--success);
  border-color:#c9decd;
  background:var(--success-soft)
}

.status-pill.is-blocked,.status-pill.is-failed {
  color:var(--danger);
  border-color:#e3c4bf;
  background:var(--danger-soft)
}

.status-pill.is-warning {
  color:var(--warning);
  background:var(--warning-soft);
  border-color:#e2d3b5
}

.app-dialog {
  border:1px solid var(--line);
  border-radius:0;
  background:var(--surface);
  color:var(--ink);
  padding:28px;
  width:min(520px,calc(100vw - 28px));
  max-height:88dvh;
  overflow:auto;
  box-shadow:0 22px 70px #0003
}

.app-dialog::backdrop {
  background:#17150e60;
  backdrop-filter:blur(2px)
}

.app-dialog h2 {
  font-size:1.65rem;
  font-weight:var(--type-display-weight);
  letter-spacing:-.025em;
  margin:0 0 16px
}

.dialog-actions {
  display:flex;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
  margin-top:24px
}

.dialog-delete {
  margin-right:auto;
  color:var(--danger)
}

.dialog-error {
  font-size:14px;
  color:var(--danger);
  line-height:1.5
}

.app-dialog p { color:var(--muted); font-size:.92rem; line-height:1.55 }
.app-dialog .field-stack { margin-top:18px }
.app-dialog .dialog-error { color:var(--danger); font-size:.875rem; margin-top:12px }

.app-dialog form {
  margin:0
}

.field-caption {
  font-size:14px;
  color:var(--muted)
}

.required-marker {
  color:var(--accent)
}

/* Shared fields and exact-preview controls; feature surfaces retain their own shape. */
.envelope-label { font-size:var(--type-small); color:var(--muted); font-weight:400; }
.field-stack { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field-stack > span { font-size:var(--type-small); color:var(--muted); }
.field-description, .action-note { color:var(--muted); font-size:var(--type-small); line-height:1.5; }
.action-note:empty { display:none; }
.action-note[data-tone="error"] { color:var(--danger); }
.preview-toolbar { display:flex; align-items:center; gap:16px; padding:12px var(--surface-gutter); border-bottom:1px solid var(--line); font-size:var(--type-small); color:var(--muted); }
.preview-toolbar .text-action[aria-pressed="true"] { color:var(--danger); text-decoration-thickness:2px; }
.preview-toolbar > span { margin-left:auto; white-space:nowrap; }
.preview-navigation { display:flex; align-items:center; gap:6px; min-width:0; }
.preview-navigation select { width:min(230px,28vw); min-height:36px; font-size:var(--type-small); padding-block:5px; }

/* Native disclosure keeps controls reachable with keyboard and without scripts. */
.disclosure { position:relative; }
.disclosure > summary { min-height:24px; list-style:none; cursor:pointer; font-size:14px; color:var(--ink-soft); }
.disclosure > summary::-webkit-details-marker { display:none; }
.disclosure-menu { position:absolute; top:calc(100% + 6px); left:0; z-index:45; min-width:170px; max-width:min(320px,82vw); max-height:260px; overflow:auto; border:1px solid var(--line); background:var(--surface); padding:6px; box-shadow:var(--shadow); }
.disclosure[open] > .disclosure-menu { --motion-offset-y:3px; animation:interface-arrive var(--motion-quick) var(--ease-standard) both; }
.disclosure-menu > button, .merge-field-list > button:not([hidden]) { display:block; width:100%; text-align:left; white-space:normal; padding:10px 12px; font-size:14px; border:0; background:transparent; border-radius:0; text-decoration:none; }
.disclosure-menu > button:not(:disabled):hover, .disclosure-menu > button:focus-visible, .merge-field-list > button:hover, .merge-field-list > button:focus-visible { background:var(--surface-soft); }
.disclosure-menu > button:disabled { opacity:.45; }
/* Secondary explanation uses the existing disclosure and dismissal owner. */
.context-help > summary { display:grid; place-items:center; width:32px; min-height:32px; padding:4px; color:var(--muted); }
.context-help[open] > summary, .context-help > summary:hover { color:var(--accent-strong); }
.context-help > .disclosure-menu { right:0; left:auto; width:min(340px,calc(100vw - 48px)); white-space:normal; }
.context-help .disclosure-menu p { margin:0; padding:8px 12px; font-size:var(--type-small); line-height:1.5; }
/* File commands need a readable line and the available viewport, not the small
   generic help/field-picker cap. Positioning changes no native disclosure action. */
.file-commands > summary { display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:8px 0; }
.file-commands > .disclosure-menu {
  top:calc(100% + 6px); bottom:auto; right:auto; left:var(--file-menu-left,0px);
  width:max-content; min-width:min(288px,var(--file-menu-width,calc(100vw - 24px))); max-width:min(360px,var(--file-menu-width,calc(100vw - 24px)));
  max-height:var(--file-menu-height,calc(100dvh - 24px)); overscroll-behavior:contain;
}
.file-commands[data-placement="above"] > .disclosure-menu { top:auto; bottom:calc(100% + 6px); }
.file-commands > .disclosure-menu > button { min-height:40px; line-height:1.4; overflow-wrap:anywhere; }
.disclosure-divider { height:1px; margin:5px 8px; overflow:hidden; border:0; background:var(--line); }
.message-writing-tools { min-width:0; padding:6px 14px 8px; border-top:1px solid var(--line); background:var(--surface); color:var(--ink-soft); font-family:var(--font-ui); font-size:14px; font-weight:400; line-height:1.4; text-align:left; }
.message-writing-tools > .field-picker { min-width:0; width:100%; }
.field-picker > summary { display:inline-flex; align-items:center; min-height:28px; padding:6px 0; color:var(--accent-strong); }
.field-picker > summary[aria-disabled="true"] { color:var(--muted); cursor:default; }
.field-picker > summary span { margin-left:6px; }
.field-picker-backdrop { display:none; }
.field-picker-panel { display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.field-picker-panel > input { flex:none; min-width:0; width:100%; min-height:38px; padding:8px 10px; font-size:14px; background:var(--surface); }
.field-picker-panel > p { margin:6px; }
.field-picker-panel .merge-field-list { min-height:0; overflow:auto; overscroll-behavior:contain; }
.field-picker-popover {
  position:fixed;
  z-index:70;
  top:var(--field-picker-top,auto);
  right:auto;
  bottom:var(--field-picker-bottom,auto);
  left:var(--field-picker-left,12px);
  width:var(--field-picker-width,min(360px,calc(100vw - 24px)));
  max-width:calc(100vw - 24px);
  max-height:var(--field-picker-max-height,min(320px,calc(100dvh - 24px)));
  margin:0;
  padding:10px;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:var(--shadow);
  font-family:var(--font-ui);
}
.field-picker-header { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:32px; padding:0 2px 4px; border-bottom:1px solid var(--line); }
.field-picker-target { min-width:0; color:var(--ink); font-size:14px; font-weight:450; overflow-wrap:anywhere; }
.field-picker-close { display:grid; place-items:center; flex:none; width:32px; min-height:32px; padding:0; border:0; background:transparent; color:var(--muted); font:300 24px/1 var(--font-ui); cursor:pointer; }
.field-picker-close:hover, .field-picker-close:focus-visible { color:var(--accent-strong); background:var(--surface-soft); }
.field-picker-popover .merge-field-list { display:grid; align-content:start; gap:2px; }
.field-picker-popover .merge-field-list > button:not([hidden]) {
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px;
  width:100%; max-width:100%; min-height:40px; padding:7px 9px; color:var(--ink-soft); overflow-wrap:anywhere;
}
.field-picker-popover .merge-field-list > button[hidden] { display:none; }
.field-picker-popover .merge-field-list > button:hover,
.field-picker-popover .merge-field-list > button:focus-visible { color:var(--accent-strong); background:var(--surface-soft); }
.field-picker-name { min-width:0; font-weight:450; }
.field-picker-status { max-width:170px; color:var(--muted); font-size:12px; font-weight:400; line-height:1.25; text-align:right; overflow-wrap:anywhere; }
.field-picker-popover [data-field-state="needs-mapping"] .field-picker-status { color:var(--accent-strong); }
.field-picker-popover [data-field-state="unavailable"] { color:var(--muted); cursor:not-allowed; }
.field-picker-popover [data-field-state="unavailable"]:hover { background:transparent; }
.field-picker-popover [data-field-state="unavailable"] .field-picker-status { color:var(--muted-secondary); }
.field-picker-panel > .field-picker-note { flex:none; margin:0 2px 2px; padding:8px 4px 0; border-top:1px solid var(--line); font-size:12px; line-height:1.35; }
/* Keep the complete keyboard ring inside the bounded field list. */
.field-picker-popover .merge-field-list > button:focus-visible { outline-offset:-3px; }
@media(max-width:600px) {
  .field-picker-backdrop.is-open {
    display:block; position:fixed; z-index:68; inset:0; background:#17150e48;
  }
  .field-picker-popover {
    z-index:69;
    top:auto; right:max(8px,env(safe-area-inset-right));
    bottom:max(8px,env(safe-area-inset-bottom)); left:max(8px,env(safe-area-inset-left));
    width:auto; max-width:none; max-height:min(62dvh,420px);
    padding:10px 10px 12px;
  }
}

/* One organisation-scoped chooser; cards illustrate the current plain-text message structure. */
.template-dialog { width:min(1120px,calc(100vw - 40px)); max-height:calc(100dvh - 40px); margin:20px auto auto; overflow:hidden; }
.template-dialog form { max-height:calc(100dvh - 98px); display:flex; flex-direction:column; min-height:0; }
.template-header { flex:none; display:flex; align-items:flex-start; gap:24px; padding-bottom:22px; }
.template-header .text-action { margin-top:8px; white-space:nowrap; }
.template-header h2 { margin:0 0 5px; font-size:28px; font-weight:350; }
.template-header h2:focus { outline:none; }
.template-content { min-height:0; overflow:auto; overscroll-behavior:contain; padding:4px; }
.template-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.template-card { display:flex; flex-direction:column; min-width:0; padding:16px; text-align:left; background:var(--surface); border:1px solid var(--line); transition:border-color var(--motion-quick) var(--ease-standard),background var(--motion-quick) var(--ease-standard); }
.template-card:hover { border-color:var(--accent); background:var(--surface-softer); }
.template-card-title { display:block; margin-top:14px; font-size:18px; font-weight:450; overflow-wrap:anywhere; }
.template-sms-measure { margin:10px 0 0; color:var(--muted); font-size:13px; line-height:1.45; overflow-wrap:anywhere; }
.template-sms-measure[data-tone="error"] { color:var(--danger); }
.template-miniature-sms .template-miniature-page { display:flex; min-height:100%; align-items:flex-end; padding:72px 54px; background:var(--surface-softer); }
.template-miniature-sms .template-miniature-content { width:82%; margin-left:auto; padding:34px; border:1px solid var(--line); border-radius:18px; background:var(--surface); font-size:34px; line-height:1.45; white-space:pre-wrap; }
.template-dialog[data-kind="sms-template"] .template-paper { max-width:440px; margin-inline:auto; }
.template-card-purpose { display:block; margin-top:6px; font-size:14px; line-height:1.4; color:var(--muted); overflow-wrap:anywhere; }
.template-miniature { display:block; height:176px; overflow:hidden; width:100%; border:1px solid var(--line); background:#fff; pointer-events:none; }
.template-miniature-page { width:640px; transform-origin:top left; }
.template-miniature-page > .email-formatted-preview,.template-paper > .email-formatted-preview { width:100%; margin:0; }
.template-miniature-content { padding:24px 32px; white-space:pre-wrap; font:16px/1.65 Arial,sans-serif; color:#202020; }
.template-details { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:32px; }
.template-details[data-visual="true"] { grid-template-columns:minmax(0,1fr); }
.template-details[data-visual="true"] .template-outline { width:100%; max-width:680px; margin:auto; }
.template-details .field-stack:first-child { margin-top:0; }
.template-outline-heading { position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.template-outline h3 { margin:0; font-size:14px; font-weight:400; color:var(--muted); }
#messageTemplateHelp { position:static; }
#messageTemplateHelp > .disclosure-menu { width:min(320px,100%); max-width:100%; min-width:0; }
#messageTemplatePurpose { overflow-wrap:anywhere; }
#messageTemplatePurpose:empty { display:none; }
.template-paper { padding:24px; background:var(--surface-softer); border:1px solid var(--line); border-top:2px solid var(--accent-line); min-height:280px; }
.template-paper strong { display:block; padding-bottom:18px; font-weight:500; font-size:17px; overflow-wrap:anywhere; }
.template-paper > div { font-size:15px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.template-dialog .dialog-actions { flex:none; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.template-dialog .dialog-error:not(:empty) { padding:8px 4px; flex:none; }
.template-dialog .dialog-actions .text-action { margin-right:auto; }
@media(min-width:901px) and (max-height:850px) { .template-miniature { height:132px; } }
@media(max-width:900px) { .template-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) {
  .template-dialog { width:calc(100vw - 16px); max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); margin:8px auto auto; padding:20px 16px; }
  .template-dialog form { max-height:calc(100dvh - 58px); }
  .template-header { flex-direction:column; gap:10px; padding-bottom:14px; }
  .template-header .text-action { margin:0; }
  .template-header h2 { font-size:25px; }
  .template-gallery,.template-details { grid-template-columns:minmax(0,1fr); }
  .template-miniature { height:176px; }
  .template-paper { padding:18px; min-height:0; }
}

.preview-return-context { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px var(--surface-gutter); border-bottom:1px solid var(--line); background:var(--surface-soft); color:var(--muted); font-size:var(--type-small); }
.preview-return-context .text-action { flex:0 0 auto; }