/* ===== preview_modal_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html. Anvil's server strips a
   <style> block out of an HTML template, so the form's rules live here.

   ROOT RULE, and it keeps `position: fixed` - a deliberate deviation.
   The foundation bans a fixed root because a screen root is a flex item in the
   shared layout's scroller and fixed positioning stops the port scrolling. This
   root is not a screen: it is the persistent preview modal's backdrop, mounted
   per click into test_detail_html's td_preview slot (preview_panel), and it deliberately takes the
   viewport. Removing `position: fixed` deletes the modal. The root rule stays a
   bare class so it outranks the scoped reset; it takes no `position: relative`,
   no `flex` and no `min-height`.

   SCOPING. Every other rule is :where(.pm-backdrop)-prefixed, which adds zero
   specificity, so no rule can change which declaration wins. No rule names
   the root as an ancestor, and no rule's subject is the root itself.

   .pm-modal takes `position: relative` here, because inline attribute styles
   are banned in an HTML template and .pm-modal is the containing block for .pm-confirm-overlay (position:absolute; inset:0): drop
   it and the discard overlay escapes to the viewport.

   TIES AUDITED, none live. `pm-` appears in no other template or asset in this
   app (grepped across client_code and theme). The dependency's runtime theme
   injection declares only .px-* rules and this form applies no .px-* class.
   theme.css reaches a bare <button> only through `button.close` and the
   .anvil-role-*-button families, and `.ta-root select` - the one selector in
   this section with a bare element subject - has no <select> to reach here.
   So a head <link> position decides no tie.

   DESIGNER GATE: none. The one hiding rule, .pm-confirm-overlay
   { display: none }, is that block's base state. No @keyframes in this
   form. */

.pm-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: stretch; justify-content: center;
  z-index: 9000; padding: 24px 16px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1e293b;
}
:where(.pm-backdrop) .pm-modal {
  background: #ffffff; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,0.3);
  width: min(1080px, 100%); display: flex; flex-direction: column;
  max-height: calc(100vh - 48px); overflow: hidden;
  position: relative;
}

/* Persistent PREVIEW banner — sticky, not dismissible. */
:where(.pm-backdrop) .pm-banner {
  background: #fef3c7; color: #92400e;
  padding: 10px 18px; font-size: 0.85rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid #fde68a;
  display: flex; align-items: center; gap: 10px;
}
:where(.pm-backdrop) .pm-banner-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #d97706; flex: 0 0 8px;
}

/* Header: title + version chip + Close button */
:where(.pm-backdrop) .pm-header {
  padding: 16px 20px;
  display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid #e2e8f0;
}
:where(.pm-backdrop) .pm-title { font-size: 1.05rem; font-weight: 700; margin: 0; flex: 0 0 auto; }
:where(.pm-backdrop) .pm-version-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem; padding: 4px 10px; border-radius: 999px;
  background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0;
}
:where(.pm-backdrop) .pm-version-chip.dirty { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
:where(.pm-backdrop) .pm-spacer { flex: 1 1 auto; }
:where(.pm-backdrop) .pm-close {
  padding: 7px 14px; border: 1px solid #cbd5e1; border-radius: 8px;
  background: #ffffff; cursor: pointer; font-size: 0.9rem; font-weight: 600; color: #334155;
}
:where(.pm-backdrop) .pm-close:hover { background: #f1f5f9; border-color: #94a3b8; }

/* Tab strip */
:where(.pm-backdrop) .pm-tabs { display: flex; gap: 0; border-bottom: 1px solid #e2e8f0; padding: 0 20px; background: #f8fafc; }
:where(.pm-backdrop) .pm-tab {
  padding: 10px 20px; cursor: pointer; user-select: none;
  font-size: 0.95rem; font-weight: 600; color: #64748b;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  background: transparent; border-top: 0; border-left: 0; border-right: 0;
}
:where(.pm-backdrop) .pm-tab:hover:not(:disabled) { color: #334155; background: #f1f5f9; }
:where(.pm-backdrop) .pm-tab.active { color: #1d4ed8; border-bottom-color: #1d4ed8; }
:where(.pm-backdrop) .pm-tab:disabled { opacity: 0.5; cursor: not-allowed; }
:where(.pm-backdrop) .pm-tab-disabled-wrap {
  position: relative; display: inline-flex;
}
:where(.pm-backdrop) .pm-tab-tooltip {
  position: absolute; left: 0; top: 100%; margin-top: 6px;
  background: #0f172a; color: #ffffff; font-size: 0.78rem;
  padding: 6px 10px; border-radius: 6px; white-space: nowrap;
  font-weight: 500; opacity: 0; pointer-events: none; transition: opacity 0.1s;
  z-index: 10;
}
:where(.pm-backdrop) .pm-tab-disabled-wrap:hover .pm-tab-tooltip { opacity: 1; }

/* Body / mount point */
:where(.pm-backdrop) .pm-body { flex: 1 1 auto; overflow-y: auto; background: #ffffff; }
:where(.pm-backdrop) .pm-mount { min-height: 100%; }

/* Confirm-discard inline dialog (rendered inside the modal, not a separate modal) */
:where(.pm-backdrop) .pm-confirm-overlay {
  position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45);
  display: none; align-items: center; justify-content: center;
  padding: 20px; z-index: 50;
}
:where(.pm-backdrop) .pm-confirm-overlay.open { display: flex; }
:where(.pm-backdrop) .pm-confirm-card {
  background: #ffffff; border-radius: 12px; padding: 18px 20px;
  width: min(420px, 100%); box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
:where(.pm-backdrop) .pm-confirm-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; color: #0f172a; }
:where(.pm-backdrop) .pm-confirm-body { font-size: 0.9rem; color: #475569; line-height: 1.5; margin-bottom: 14px; }
:where(.pm-backdrop) .pm-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
:where(.pm-backdrop) .pm-confirm-cancel {
  padding: 7px 14px; border: 1px solid #cbd5e1; border-radius: 8px;
  background: #ffffff; cursor: pointer; font-size: 0.9rem; font-weight: 600; color: #334155;
}
:where(.pm-backdrop) .pm-confirm-cancel:hover { background: #f1f5f9; border-color: #94a3b8; }
:where(.pm-backdrop) .pm-confirm-discard {
  padding: 7px 14px; border: 1px solid #dc2626; border-radius: 8px;
  background: #dc2626; cursor: pointer; font-size: 0.9rem; font-weight: 600; color: #ffffff;
}
:where(.pm-backdrop) .pm-confirm-discard:hover { background: #b91c1c; border-color: #b91c1c; }