/* ===== pe_side_panel_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html. Every rule is scoped :where(.pe-panel),
   which adds zero specificity and so cannot change which rule wins inside the panel.

   .pe-panel itself stays a BARE class rule so it outranks the scoped reset. It is
   the form root, and the root is a plain block child of the slide panel's body,
   which owns the overlay's own box: no position, flex or overflow declaration is
   added here.

   THREE rules carry a second class, and they have to. As a head asset they lose
   document-order ties to the dependency's injected px-theme-chrome block, so
   .px-card { border-radius: var(--px-radius); box-shadow:
   var(--px-shadow) }, .px-card-header { padding: 1rem 1.25rem; font-size: .95rem }
   and .px-card-body { padding: 1.25rem } would win instead: the three flat blocks
   would become raised dashboard cards and every block header and body would grow.
   Doubling the class wins on specificity instead, which no file order can undo.

   .pe-panel-error stays a single private class: no .px-* rule ties with it, and its
   .has-error reveal below keeps the same one-point gap it has today. */

.pe-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-family: var(--px-font);
}
:where(.pe-panel) .pe-panel-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--px-text-muted);
}
:where(.pe-panel) .pe-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--px-radius-pill);
  border: 1px solid var(--px-border);
  background: var(--px-bg-elevated);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--px-text-secondary);
  white-space: nowrap;
}
:where(.pe-panel) .pe-badge.at_risk { color: var(--px-danger-ink); border-color: var(--px-danger-edge); background: var(--px-danger-wash); }
:where(.pe-panel) .pe-badge.dormant { color: var(--px-warning-text); border-color: var(--px-warning-edge); background: var(--px-warning-wash); }
:where(.pe-panel) .pe-badge.healthy { color: var(--px-success-text); border-color: var(--px-success-edge); background: var(--px-success-wash); }

:where(.pe-panel) .pe-panel-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
:where(.pe-panel) .pe-figure {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
  background: var(--px-bg-elevated);
}
:where(.pe-panel) .pe-figure-label {
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--px-text-muted);
  display: flex;
  align-items: center;
}
:where(.pe-panel) .pe-figure-value {
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--px-text-primary);
  line-height: 1.2;
  margin-top: 0.15rem;
}
:where(.pe-panel) .pe-figure-value.improving { color: var(--pe-improving); }
:where(.pe-panel) .pe-figure-value.declining { color: var(--pe-declining); }
/* Recency bands reuse the trend palette so green and red keep meaning
   the same thing when the 30-day window swaps the measure. */
:where(.pe-panel) .pe-figure-value.recent { color: var(--pe-improving); }
:where(.pe-panel) .pe-figure-value.stale { color: var(--pe-declining); }
:where(.pe-panel) .pe-figure-sub {
  font-size: 0.68rem;
  color: var(--px-text-muted);
}

/* px-card / px-card-header / px-card-body carry the frame; a block
   inside a slide panel is tighter than a card on a dashboard, and it
   sits flat rather than raised. */
:where(.pe-panel) .px-card.pe-panel-block {
  border-radius: var(--px-radius-sm);
  box-shadow: none;
}
:where(.pe-panel) .px-card-header.pe-panel-block-head {
  padding: 0.6rem 0.85rem;
  font-size: 0.78rem;
  gap: 0.5rem;
}
:where(.pe-panel) .pe-panel-block-head span.title {
  display: inline-flex;
  align-items: center;
}
:where(.pe-panel) .px-card-body.pe-panel-block-body { padding: 0.75rem 0.85rem; }

:where(.pe-panel) .pe-panel-spark { min-height: 78px; }

:where(.pe-panel) .pe-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
:where(.pe-panel) .pe-check li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--px-text-secondary);
}
/* Colour and shape come from .pe-status-glyph in the shell's own asset. */
:where(.pe-panel) .pe-check-glyph {
  width: 20px;
  height: 20px;
  font-size: 0.75rem;
}
:where(.pe-panel) .pe-check-glyph.awaiting { font-size: 0.66rem; }
:where(.pe-panel) .pe-check-actual {
  margin-left: auto;
  font-family: var(--px-mono);
  font-size: 0.68rem;
  color: var(--px-text-muted);
  white-space: nowrap;
}

:where(.pe-panel) .pe-users { display: flex; flex-direction: column; gap: 0.55rem; }
:where(.pe-panel) .pe-user {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 0.5rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px dotted var(--px-border);
}
:where(.pe-panel) .pe-user:last-child { border-bottom: none; padding-bottom: 0; }
:where(.pe-panel) .pe-user-email {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--px-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(.pe-panel) .pe-user-volume {
  font-family: var(--px-mono);
  font-size: 0.7rem;
  color: var(--px-text-secondary);
  white-space: nowrap;
}
:where(.pe-panel) .pe-user-meta {
  grid-column: 1 / -1;
  font-size: 0.68rem;
  color: var(--px-text-muted);
}
:where(.pe-panel) .pe-user-strip {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 18px;
  margin-top: 0.2rem;
}
:where(.pe-panel) .pe-user-strip i {
  flex: 1;
  min-width: 1px;
  background: var(--px-text-muted);
  opacity: 0.45;
  border-radius: 1px 1px 0 0;
  display: block;
}

:where(.pe-panel) .pe-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
:where(.pe-panel) .pe-panel-actions .px-btn { flex: 1 1 auto; }

:where(.pe-panel) .pe-panel-loading {
  font-size: 0.76rem;
  color: var(--px-text-muted);
  padding: 0.4rem 0;
}
:where(.pe-panel) .pe-panel-error {
  display: none;
  padding: 0.7rem 0.85rem;
  border-radius: var(--px-radius-sm);
  border: 1px solid var(--px-danger-edge);
  background: var(--px-danger-wash);
  font-family: var(--px-mono);
  font-size: 0.7rem;
  color: var(--px-danger);
  white-space: pre-wrap;
  word-break: break-word;
}
:where(.pe-panel).has-error .pe-panel-error { display: block; }