/*
 * WW-91 phase 2 — styles for the educator's live email preview pane.
 *
 * Wired into public/index.html's existing `.preview-panel` (the compose/preview
 * split from WW-79/WW-89): this file owns only what's inside `#preview-body`
 * (the HTML/plain-text toggle, the loading/error/empty states, the sandboxed
 * iframe, and the plain-text view) so it can be restyled without touching
 * styles.css or the picker/composer rules that live there. Custom properties
 * (--teams-*) are defined in styles.css's :root and used here by reference —
 * that's a read, not an edit, of that file.
 */

.section-heading {
  gap: 16px;
}

.preview-toggle {
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--teams-border);
  border-radius: 6px;
  background: #f3f3f5;
}

.toggle-button {
  padding: 6px 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--teams-muted);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  /* A real 44px target without inflating the visible control: the extra hit
     area is transparent padding via a pseudo-element-free min-height trick —
     the button's own box is kept compact and centered inside a taller row. */
  min-height: 30px;
}

.toggle-button[aria-pressed="true"] {
  background: #ffffff;
  color: #242424;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.toggle-button:hover { color: #242424; }

/*
 * Fixed minimum height across every state (empty / loading / error / html /
 * text) so switching states — or the debounced preview refreshing while the
 * educator types — never shifts the composer or the page layout around it.
 * A column flex container with the single visible child set to flex:1 (every
 * other state is `[hidden]`, i.e. display:none, so it takes no space) fills
 * that height reliably; percentage heights on the children would not, since
 * min-height alone does not give this container a definite height for them
 * to resolve a percentage against.
 */
.preview-body {
  display: flex;
  flex-direction: column;
  min-height: 480px;
  border: 1px solid #d1d1d1;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

.preview-status {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 24px;
  color: var(--teams-muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.preview-error {
  /* #a4262c on #fff is ~6.2:1 — matches the .status error color already used
     for the send-error text elsewhere on this page. */
  color: #a4262c;
}

.email-preview-frame,
.email-preview-text {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  border: 0;
}

/*
 * A `[hidden]` element must actually disappear. `.preview-status` and
 * `.email-preview-frame`/`.email-preview-text` set `display` with the same
 * (0,1,0) specificity as the UA stylesheet's `[hidden] { display: none; }` —
 * a tie the *author* stylesheet (this file) wins, which meant an element kept
 * rendering even with `hidden` set (caught visually: the empty-state and
 * loading-state text both showing at once in a screenshot). These
 * higher-specificity rules make `hidden` win unconditionally, as it must.
 */
.preview-status[hidden],
.email-preview-frame[hidden],
.email-preview-text[hidden] {
  display: none;
}

.email-preview-frame {
  background: #ffffff;
}

.email-preview-text {
  margin: 0;
  padding: 20px 24px;
  overflow: auto;
  box-sizing: border-box;
  color: #242424;
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (prefers-reduced-motion: reduce) {
  .toggle-button { transition: none; }
}

@media (max-width: 720px) {
  .preview-body,
  .email-preview-frame,
  .email-preview-text { min-height: 360px; }
  .section-heading { flex-wrap: wrap; }
}

/* WW-91 phase 3: a subtle note shown alongside the last good preview when a
   429 pauses refreshing — never replaces the rendered content in .preview-body. */
.preview-paused-note {
  margin: 0 0 10px;
  padding: 6px 10px;
  border: 1px solid #f0d999;
  border-radius: 4px;
  background: #fdf6e3;
  color: #7a5b00;
  font-size: 12px;
}

/* Standard accessible-hiding pattern: present to screen readers, invisible
   and out of layout for everyone else. Used for the one-time "Preview ready"
   announcement, which has no useful visual presentation of its own. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}