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

   Two instances of this card exist — the aggregate in the shell's cycle slot and
   the single-home one in the side panel — so the scope is .pe-cycle alone and no
   rule here names either parent.

   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-header { display: flex }, .px-card-body
   { padding: 1.25rem } and .px-empty-state { display: flex } would win instead:
   the title and subtitle would sit side by side, the body would lose its tighter
   padding, and the empty state would show permanently under the grid. Doubling the
   class wins on specificity instead, which no file order can undo. The empty-state
   reveal at the bottom is doubled to match, so the base and the reveal keep a
   one-point gap. */

:where(.pe-cycle) .px-card-header.pe-cycle-header {
  display: block;
}
:where(.pe-cycle) .pe-cycle-title {
  font-family: var(--px-font);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--px-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
}
:where(.pe-cycle) .pe-cycle-subtitle {
  font-family: var(--px-font);
  font-size: 0.75rem;
  color: var(--px-text-muted);
  margin: 0.2rem 0 0;
  line-height: 1.5;
}
:where(.pe-cycle) .px-card-body.pe-cycle-body {
  padding: 1rem 1.25rem 1.25rem;
}
:where(.pe-cycle) .pe-cycle-grid {
  display: grid;
  grid-template-columns: auto repeat(7, minmax(0, 1fr));
  gap: 4px;
  align-items: center;
}
:where(.pe-cycle) .pe-cycle-axis {
  font-family: var(--px-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--px-text-muted);
  text-align: center;
  text-transform: uppercase;
}
:where(.pe-cycle) .pe-cycle-axis.row {
  text-align: right;
  padding-right: 0.4rem;
}
:where(.pe-cycle) .pe-cycle-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--px-radius-sm);
  cursor: help;
  transition: background-color 0.15s ease;
}
:where(.pe-cycle) .pe-cycle-cell:hover {
  background: var(--px-bg-elevated);
}
:where(.pe-cycle) .pe-cycle-dot {
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--pe-surface);
}
:where(.pe-cycle) .pe-cycle-dot.is-zero {
  background: transparent;
  border: 1px dashed var(--px-border-strong);
  box-shadow: none;
}
:where(.pe-cycle) .pe-cycle-dot.is-void {
  background: transparent;
  border: none;
  box-shadow: none;
}
:where(.pe-cycle) .pe-cycle-value {
  position: absolute;
  font-family: var(--px-mono);
  font-size: 0.58rem;
  color: var(--px-text-primary);
  background: var(--pe-surface);
  border-radius: 3px;
  padding: 0 2px;
  pointer-events: none;
}
:where(.pe-cycle):not(.show-values) .pe-cycle-value { display: none; }
:where(.pe-cycle) .pe-cycle-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.9rem;
}
:where(.pe-cycle) .pe-cycle-scale {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--px-font);
  font-size: 0.68rem;
  color: var(--px-text-muted);
}
:where(.pe-cycle) .pe-cycle-ramp {
  width: 84px;
  height: 8px;
  border-radius: var(--px-radius-pill);
}
:where(.pe-cycle) .pe-cycle-values-toggle {
  font-family: var(--px-font);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--accent, var(--px-info));
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
:where(.pe-cycle) .pe-cycle-values-toggle:hover { text-decoration: underline; }
:where(.pe-cycle) .pe-cycle-note {
  margin-top: 0.6rem;
  font-family: var(--px-font);
  font-size: 0.7rem;
  color: var(--px-text-muted);
  line-height: 1.5;
}
:where(.pe-cycle) .px-empty-state.pe-cycle-empty { display: none; }
:where(.pe-cycle).is-empty .pe-cycle-grid,
:where(.pe-cycle).is-empty .pe-cycle-footer { display: none; }
:where(.pe-cycle).is-empty .px-empty-state.pe-cycle-empty { display: flex; }