/* ===== training_authoring (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. `.ta-root` stays a bare class so it outranks the scoped reset. It
   declares `min-height: 100vh` and `position: relative`. It takes no `flex: 1 0 auto`: this shell is a section
   mounted into a classic HtmlTemplate panel inside email_management, not a
   screen root in the shared layout's scroller. It declares no `height` and no
   `overflow`.

   SCOPING. Every rule whose selector does NOT already name the root is
   `:where(.ta-root)`-prefixed, which adds zero specificity, so no rule can
   change which declaration wins on that account. The rules that DO name the
   root as an ancestor stay bare: wrapped as `:where(.ta-root) .ta-root ...`
   they would require the root to have a `.ta-root` ancestor and would never
   match. That is `.ta-root.ta-preview-active .ta-topbar` and the five
   `select` rules.

   THE ONE LIVE TIE, and it is decided by specificity rather than by link order.
   `.ta-root select` is the one selector in this section whose subject carries
   no form prefix, so it reaches every native <select> in every descendant form,
   and it exists to beat the Anvil theme's `.anvil-component select` Material
   chrome (the comment below says so). As a head link a single-class rule TIES
   `.anvil-component select` at (0,1,1) and the winner would be whichever sheet
   the runtime happens to put later. The base rule is therefore written
   `.ta-root.ta-root select`, a repeated class, which lifts it to (0,2,1) and
   wins on weight. The four state rules carry `!important` on every declaration
   that matters.

   WHAT THAT BUMP REACHES, audited. Three <select> elements exist under this
   root. `#et-f-cooldown-unit` in edit_tab_html is styled by
   `:where(.et-shell) .et-field.et-field.et-field select` at (0,3,1), tripled
   for exactly this reason, so it wins. `.qe-select` and `.mt-select` are
   (0,1,0) and lose to `.ta-root select` either way.

   OTHER TIES, none live. `ta-` appears in no other template and no other asset
   in this app (grepped across client_code and theme/assets), so no other rule
   that matches them can win on link order.
   This form applies no `.px-*` class, so the dependency's runtime theme
   injection reaches nothing here. theme.css reaches a bare <button> only
   through `button.close` and the `.anvil-role-*-button` families, and neither
   matches the crumb or modal buttons.

   DESIGNER GATE: none needed. The three hiding rules — `.ta-topbar.ta-at-root`,
   `.ta-global-banner:empty` and `.ta-modal-backdrop[hidden]` — each hide a block
   whose markup carries that class, that emptiness or that attribute statically,
   so the canvas shows each block's initial state, and this form carries no live
   class to gate on.

   @KEYFRAMES are form-prefixed (`ta-modal-fade`, `ta-modal-pop`) and unique
   across this section. The one url() is a
   data URI, so it needs no rewrite against the asset's own location. */

.ta-root {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  color: #1e293b;
  background: #f8fafc;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Top bar with back/home + breadcrumb chrome. Hidden at stack
   depth 1 (root view) since Back is unusable and the home button
   navigates to where the user already is — redundant chrome. */
:where(.ta-root) .ta-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 10;
}
:where(.ta-root) .ta-topbar.ta-at-root { display: none; }
:where(.ta-root) .ta-crumb-btn {
  padding: 6px 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
:where(.ta-root) .ta-crumb-btn:hover:not(:disabled) { background: #e2e8f0; }
:where(.ta-root) .ta-crumb-btn:disabled { opacity: 0.45; cursor: not-allowed; }
:where(.ta-root) .ta-crumb-btn:focus-visible { outline: 2px solid #e11d48; outline-offset: 2px; }

:where(.ta-root) .ta-trail {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  flex-wrap: wrap;
  font-size: 0.95rem;
  color: #64748b;
}
:where(.ta-root) .ta-crumb-sep { color: #cbd5e1; }
:where(.ta-root) .ta-crumb-label { padding: 2px 6px; }
:where(.ta-root) .ta-crumb-label.ta-crumb-current { color: #0f172a; font-weight: 600; }

/* Preview-active dim. Subject is a descendant, but the selector already names
   the root as its own ancestor, so it stays bare (see SCOPING above). */
.ta-root.ta-preview-active .ta-topbar { opacity: 0.4; pointer-events: none; }

/* Global banner */
:where(.ta-root) .ta-global-banner:empty { display: none; }
:where(.ta-root) .ta-global-banner {
  padding: 12px 24px;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid transparent;
}
:where(.ta-root) .ta-global-banner.kind-error { background: #fef2f2; color: #991b1b; border-bottom-color: #fecaca; }
:where(.ta-root) .ta-global-banner.kind-warning { background: #fffbeb; color: #92400e; border-bottom-color: #fde68a; }
:where(.ta-root) .ta-global-banner.kind-info { background: #eff6ff; color: #1e40af; border-bottom-color: #bfdbfe; }
:where(.ta-root) .ta-global-banner.kind-success { background: #f0fdf4; color: #166534; border-bottom-color: #bbf7d0; }
:where(.ta-root) .ta-global-banner-msg { flex: 1; }
:where(.ta-root) .ta-global-banner-dismiss {
  background: transparent; border: 0; color: inherit; cursor: pointer;
  font-size: 1.2rem; padding: 0 4px; opacity: 0.7;
}
:where(.ta-root) .ta-global-banner-dismiss:hover { opacity: 1; }

/* Content slot — children mount here */
:where(.ta-root) .ta-content-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Centered confirm modal — used for the unsaved-changes prompt on Back.
   Fixed-position overlay so it works at any scroll depth; z-index higher
   than the preview modal (9000) so it can sit above an open preview if
   ever stacked. Backdrop has a subtle blur to focus attention. */
:where(.ta-root) .ta-modal-backdrop[hidden] { display: none; }
:where(.ta-root) .ta-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 24px 16px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1e293b;
  animation: ta-modal-fade 120ms ease-out;
}
@keyframes ta-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
:where(.ta-root) .ta-modal-card {
  background: #ffffff;
  border-radius: 12px;
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: ta-modal-pop 140ms ease-out;
}
@keyframes ta-modal-pop {
  from { transform: translateY(8px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
:where(.ta-root) .ta-modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
:where(.ta-root) .ta-modal-message {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #334155;
  margin: 0;
}
:where(.ta-root) .ta-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}
:where(.ta-root) .ta-modal-btn {
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 8px;
  cursor: pointer;
  min-height: 36px;
  border: 1px solid transparent;
}
:where(.ta-root) .ta-modal-btn-secondary {
  background: #f1f5f9;
  color: #334155;
  border-color: #cbd5e1;
}
:where(.ta-root) .ta-modal-btn-secondary:hover { background: #e2e8f0; }
:where(.ta-root) .ta-modal-btn-primary {
  background: #e11d48;
  color: #ffffff;
  border-color: #e11d48;
}
:where(.ta-root) .ta-modal-btn-primary:hover { background: #be123c; border-color: #be123c; }
:where(.ta-root) .ta-modal-btn:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

/* Force PCS look on every native <select> in this tree.
   Overrides Anvil theme bleed (.anvil-component select rules in
   theme.css that paint Material chrome: pink fill, underline border,
   focus border-width shift that causes vertical layout shift).
   Scoped to .ta-root so it covers content + preview slots without
   touching siblings. Border-width is locked at 1px on EVERY state
   so hover/focus never resizes the row.
   The class is repeated in the base rule only, for the head-link tie
   documented at the top of this file; the state rules win on !important. */
.ta-root.ta-root select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 8 10 12 14 8'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 32px 8px 12px;
  font: inherit;
  color: #1e293b;
  /* override Anvil theme bleed — never let layout shift on hover/focus */
  box-shadow: none !important;
  transform: none !important;
  transition: border-color 120ms ease;
  margin-bottom: 0;
}
.ta-root select:hover {
  border: 1px solid #94a3b8 !important;
  border-bottom-width: 1px !important;
  padding: 8px 32px 8px 12px !important;
  box-shadow: none !important;
  transform: none !important;
}
.ta-root select:focus,
.ta-root select:focus-visible,
.ta-root select:active {
  border: 1px solid #cbd5e1 !important;
  border-bottom-width: 1px !important;
  padding: 8px 32px 8px 12px !important;
  outline: 2px solid #e11d48;
  outline-offset: 2px;
  box-shadow: none !important;
  transform: none !important;
}
.ta-root select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #f1f5f9;
  border: 1px solid #cbd5e1 !important;
  border-bottom-width: 1px !important;
  padding: 8px 32px 8px 12px !important;
}