/* ===== sp_exception_tiles_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html, which is also the only
   route that styles the Anvil designer canvas.

   Four selectors are doubled — see SECOND CLASS below.

   SCOPE. The private root class is .sp-tiles. Rules that already name it or a
   shared .px-* class stay as written; .sp-tile-note is wrapped
   :where(.sp-tiles), which adds no specificity and so cannot change which rule
   wins.

   SECOND CLASS. Moving these rules from a body <style> into a head <link> puts
   them BEFORE theme.css and before the dependency's runtime-injected sheet, so
   any rule that won only on document order now loses. Four declarations did,
   across two selectors, and each is written with one more class than it needs
   to match — a class the element already carries — so it wins on specificity
   instead of on order.
     - margin-bottom: 0 ties with theme.css's .px-kpi-grid { margin-bottom:
       1.5rem }, both (0,1,0).
     - the 640px single column ties with theme.css's
       @media (max-width: 768px) { .px-kpi-grid { grid-template-columns:
       repeat(2, 1fr); gap: 0.75rem } }, both (0,1,0) and both matching at
       640px and narrower. Lose that tie and the four tiles come back as two
       columns on a phone, silently, on a page whose responsive block exists
       because it is used on phones.
     - .sp-tile-on and .sp-tile-static were .px-kpi-card.sp-tile-on and
       .px-kpi-card.sp-tile-static at (0,2,0), an exact tie with theme.css's
       .px-kpi-card:hover (0,2,0) on border-color and box-shadow, won today
       only because the form's <style> sat after theme.css. Both now name
       .sp-tile as well — all three classes are on the element — so at (0,3,0)
       they beat :hover wherever theme.css sits. Lose that tie and hovering
       the tile that is currently filtering the ledger drops its accent border
       and 1px ring, and hovering the static tile greys its green left edge.
   The other two .px-kpi-card.sp-tile rules are left as written: the base rule
   shares no property with :hover and beats .px-kpi-card (0,1,0), and
   :focus-visible is (0,3,0) already.

   DESIGNER GATE: none. No rule here hides content until JavaScript runs — the
   grid is empty on the canvas because the template is a bare mount point, not
   because a rule hides it.

   The tiles ARE the estate's KPI cards — .px-kpi-grid, .px-kpi-card
   and the label / value / sub trio come from theme.css. What is left here is
   only what those cards do not know: that each one is a button, and that this
   page adds a quiet fourth line. */

.px-kpi-grid.sp-tiles {
  margin-bottom: 0;
}

.px-kpi-card.sp-tile {
  width: 100%;
  text-align: left;
  font-family: var(--px-font);
  font-size: 1rem;
  min-height: 44px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.px-kpi-card.sp-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.px-kpi-card.sp-tile.sp-tile-on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.px-kpi-card.sp-tile.sp-tile-static {
  cursor: default;
  border-left: 3px solid var(--px-success);
}

/* The quiet second line: a sub-group inside the tile that does not
   behave like the rest of it. Deliberately lighter than .px-kpi-sub —
   it explains, it is not the headline. */
:where(.sp-tiles) .sp-tile-note {
  font-size: 0.68rem;
  color: var(--px-text-muted);
  font-style: italic;
}

@media (max-width: 640px) {
  /* One tile per row from 640px rather than the shared grid's 480px:
     each tile carries a sentence under its figure, and two of those
     side by side on a phone are two unreadable columns. */
  .px-kpi-grid.sp-tiles { grid-template-columns: 1fr; gap: 0.6rem; }
}