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

   SCOPING. Every other rule is `:where(.td-shell)`-prefixed, which adds zero
   specificity, so no rule can change which declaration wins on that account. No
   rule names the root as an ancestor, and the only rule whose subject IS the root is the `.td-shell`
   override inside the 768px media query, which therefore stays bare too.

   TIES AUDITED, none live. `td-` 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. `.ta-root select`
   - the one selector in this section whose subject carries no form prefix - has
   no <select> to reach in this form. theme.css reaches a bare <button> only
   through `button.close` and the `.anvil-role-*-button` families, and neither
   matches these buttons.

   DESIGNER GATE: none. The three hiding rules - `.td-lifecycle-popover
   { display: none }`, the toast's `opacity: 0` and the two `[hidden]` rules -
   are each their block's base state, and the form carries no live class to
   gate on. No @keyframes and no url() in this form. */

.td-shell {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #0f172a;
  background: #f8fafc;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
  position: relative;
}

:where(.td-shell) .td-sticky-top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: -24px -32px 0;
  padding: 24px 32px 12px;
  box-shadow: 0 2px 4px rgba(15,23,42,0.04);
}

:where(.td-shell) .td-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
:where(.td-shell) .td-state-chip-host { display: inline-flex; }
:where(.td-shell) .td-spacer { flex: 1; }

:where(.td-shell) .td-lifecycle-menu {
  position: relative;
  display: inline-flex;
}
:where(.td-shell) .td-lifecycle-toggle {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
:where(.td-shell) .td-lifecycle-toggle:hover { background: #f1f5f9; }
:where(.td-shell) .td-lifecycle-toggle:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
:where(.td-shell) .td-lifecycle-arrow { font-size: 11px; }

:where(.td-shell) .td-action-btn {
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 8px;
  cursor: pointer;
  min-height: 36px;
}
:where(.td-shell) .td-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
:where(.td-shell) .td-preview-btn {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
}
:where(.td-shell) .td-preview-btn:hover:not(:disabled) { background: #e2e8f0; }
:where(.td-shell) .td-save-btn {
  background: #e11d48;
  color: #ffffff;
  border: 1px solid #be123c;
}
:where(.td-shell) .td-save-btn:hover:not(:disabled) { background: #be123c; }
:where(.td-shell) .td-save-btn[hidden] { display: none; }
:where(.td-shell) .td-preview-btn[hidden] { display: none; }

:where(.td-shell) .td-lifecycle-popover {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.12);
  min-width: 200px;
  z-index: 20;
  padding: 4px 0;
}
:where(.td-shell) .td-lifecycle-popover.show { display: block; }
:where(.td-shell) .td-lifecycle-item {
  width: 100%;
  padding: 8px 16px;
  font-size: 14px;
  font-family: inherit;
  background: transparent;
  border: 0;
  color: #334155;
  text-align: left;
  cursor: pointer;
}
:where(.td-shell) .td-lifecycle-item:hover:not([disabled]) { background: #f1f5f9; }
:where(.td-shell) .td-lifecycle-item[disabled] { color: #94a3b8; cursor: not-allowed; }

:where(.td-shell) .td-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid #e2e8f0;
}
:where(.td-shell) .td-tab {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: #64748b;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  min-height: 36px;
  position: relative;
}
:where(.td-shell) .td-tab:hover:not([disabled]) { color: #334155; background: #f1f5f9; }
:where(.td-shell) .td-tab.active { color: #e11d48; border-bottom-color: #e11d48; }
:where(.td-shell) .td-tab[disabled] { color: #cbd5e1; cursor: not-allowed; }
:where(.td-shell) .td-tab:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }

:where(.td-shell) .td-tab-content {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  min-height: 320px;
  padding: 0;
}

@media (max-width: 768px) {
  .td-shell {
    padding: 16px 12px;
    gap: 12px;
  }
  :where(.td-shell) .td-sticky-top {
    margin: -16px -12px 0;
    padding: 16px 12px 8px;
    gap: 12px;
  }
  :where(.td-shell) .td-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  :where(.td-shell) .td-tabs::-webkit-scrollbar { display: none; }
  :where(.td-shell) .td-tab {
    flex-shrink: 0;
    white-space: nowrap;
  }
  :where(.td-shell) .td-header {
    row-gap: 8px;
  }
  :where(.td-shell) .td-spacer { display: none; }
  :where(.td-shell) .td-action-btn {
    flex: 1 1 0;
  }
}

:where(.td-shell) .td-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  background: #2563eb;
  box-shadow: 0 4px 12px rgba(15,23,42,0.18);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 10000;
}
:where(.td-shell) .td-toast.show { opacity: 1; transform: translateY(0); }
:where(.td-shell) .td-toast.success { background: #16a34a; }
:where(.td-shell) .td-toast.error { background: #dc2626; }
:where(.td-shell) .td-toast.info { background: #2563eb; }