/* ===== pe_scoring_drawer_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html.

   Two shapes of rule, and the difference matters. A rule on a PRIVATE class is
   scoped :where(.pe-drawer), which adds zero specificity and so cannot change
   which rule wins. A rule that reaches a .px-* class was already written as a
   descendant of .pe-drawer, so it already outranks theme.css's single-class
   .px-table rules on specificity; those keep their descendant form exactly as
   they are. Wrapping THEM in :where() would drop them from two classes to one,
   tie them with .px-table, and hand the tie to document order — which a head
   link loses to the theme. No rule here needs a second class:
   the drawer root carries no .px-card, and no private class collides.

   One rule starts the renormalisation note hidden, because a template may not
   carry an inline style="display:none;". peScoringDrawerRender
   writes renorm.style.display on every render and an inline style beats a
   stylesheet, so this rule only covers the moment before the first render.

   Designer limit: --px-* and --accent are declared by the shared theme on the
   app shell, so on the canvas of this form alone the colours fall back. Tree,
   names and drag all work. Same limitation the RotaCloud children carry. */

.pe-drawer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-family: var(--px-font);
}
:where(.pe-drawer) .pe-drawer-lede {
  font-size: 0.8rem;
  color: var(--px-text-secondary);
  line-height: 1.6;
  margin: 0;
}
:where(.pe-drawer) .pe-drawer-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--px-text-muted);
  margin: 0 0 0.4rem;
}
:where(.pe-drawer) .pe-drawer-note {
  padding: 0.65rem 0.85rem;
  border-radius: var(--px-radius-sm);
  background: var(--accent-subtle);
  border-left: 3px solid var(--accent, var(--px-info));
  font-size: 0.76rem;
  color: var(--px-text-secondary);
  line-height: 1.55;
}
:where(.pe-drawer) .pe-drawer-renorm {
  display: none;
}
/* px-table carries the table; the drawer is a narrower surface, so its
   rows are tighter and the family column stays the emphasised one. */
.pe-drawer .px-table { font-size: 0.75rem; }
.pe-drawer .px-table th,
.pe-drawer .px-table td { padding: 0.4rem; }
.pe-drawer .px-table th { font-size: 0.65rem; }
.pe-drawer .px-table tbody td { color: var(--px-text-secondary); }
.pe-drawer .px-table tbody td:first-child {
  color: var(--px-text-primary);
  font-weight: 600;
  white-space: normal;
}
.pe-drawer .px-table tbody tr.is-dropped td {
  color: var(--px-text-muted);
  font-style: italic;
}
.pe-drawer .px-table tfoot td {
  padding: 0.5rem 0.4rem;
  font-weight: 700;
  color: var(--px-text-primary);
  border-bottom: none;
}
:where(.pe-drawer) .pe-drawer-formula {
  background: var(--px-bg-elevated);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
  padding: 0.75rem 0.9rem;
  font-family: var(--px-mono);
  font-size: 0.7rem;
  line-height: 1.85;
  color: var(--px-text-secondary);
  white-space: pre-wrap;
  overflow-x: auto;
}
:where(.pe-drawer) .pe-drawer-targets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.74rem;
  color: var(--px-text-secondary);
}
:where(.pe-drawer) .pe-drawer-targets b { color: var(--px-text-primary); font-weight: 600; }