/* data-cards.css — frontend-data-views (SP8) — the phone card presentation
   (`.enr-card*`) AND the single published `@media` boundary that switches
   between it and `.enr-tablewrap` (data-table.css). Both presentations are
   ALWAYS server-rendered into the DOM (contract §2, "no JavaScript
   guarantee") — this sheet's job is only to show one and hide the other,
   never to build either.

   Slot in base.html: immediately after data-table.css.

   Tokens only. The switch uses CHEATSHEET §2b's `phone` boundary
   (640/641) — the one published width every width-based query in the tree
   must use. */

/* ---------------------------------------------------------------------
   .enr-card — the phone card shell (chrome only; a consumer's own
   row-content styling inside `row.card_html` is page-tier, spec §10
   anti-gaming rule's carve-out)
   --------------------------------------------------------------------- */
.enr-dataview__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.enr-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--bg-paper);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
/* The component-prepended checkbox is the card's first child (contract
   §3) — pin it to the top-right corner of the card, above the consumer's
   own content, rather than let it flow as its own full-width row. */
.enr-card > .enr-rowcb {
  align-self: flex-end;
  margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) calc(var(--space-2) * -1) 0;
}
/* The card carries `data-enr-row-href` from contract 1.3.0 — M4a raised
   "whether the card presentation should carry the hook too (so a phone row is
   navigable the way a desktop row is)" as a contract question and left the
   rule out; the answer is yes, and `row-navigate.js` reads it. Pointer only:
   the card's own title link stays the keyboard and assistive path. */
.enr-card[data-enr-row-href] {
  cursor: pointer;
}

/* The card's headline link to the record. Its siblings `__hd`, `__meta` and
   `__body` were given layout by the consuming pages; this one was emitted by
   `_order_cards.html` and by the price book with NO rule anywhere, so it
   rendered as unstyled body text on every card. It belongs in the framework,
   not in a page sheet, precisely because more than one page emits it —
   `tests/conformance/test_order_list_class_coverage.py` is the floor. */
.enr-card__title {
  color: var(--fg-1);
  font-size: var(--text-md);
  font-weight: 650;
  line-height: 1.3;
  text-decoration: none;
}
.enr-card__title:hover {
  text-decoration: underline;
}
.enr-card__title:focus-visible {
  outline: 2px solid var(--brand-press);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* JS toggles this on the checked card (selection-dom.js, "--selected
   classes" — architecture §3.3 module table). */
.enr-card--selected {
  box-shadow: var(--shadow-sm), inset 0 0 0 2px var(--brand);
}

/* ---------------------------------------------------------------------
   The @media boundary — mobile-first: the base rules below are the PHONE
   state (cards visible, table hidden); the `min-width` query below is the
   desktop override. Resizing across 640/641 flips visibility with no
   network request (both presentations are already in the DOM) — the e2e
   boundary test drives exactly this.
   --------------------------------------------------------------------- */
/* The phone state hides the table ONLY where a card list exists to replace it.
   The switch used to be unconditional, so a surface that declares no
   `card_template` — which S2 grants several ("table", not "table + cards"),
   and which `test_ac14_css_only_responsive_mechanisms_untouched` requires of
   the CSS-only-reflow surfaces — rendered BLANK on a phone: the table hidden,
   and nothing but an empty cards container in its place. Four separate lanes
   (M3a, M4a, M4b) each added a page-scoped override to undo it before the
   pattern was recognised as one framework defect. `_data_cards.html` now emits
   the container only when there are cards to put in it, and this rule keys on
   that. */
/* The `:where()` wrapper is LOAD-BEARING, not tidying. `:has()` takes the
   specificity of its most specific argument, so the bare form
   `.enr-dataview__results:has(.enr-dataview__cards) .enr-tablewrap` scores
   (0,3,0) and outranks BOTH the desktop override below (0,1,0) and the
   page-tier `body[data-page="…"] .enr-tablewrap` escapes (0,2,1) that
   several page sheets still carry — at every width, media query or not.
   Shipped that way it hid the desktop table (0x0, not merely narrow) on
   every surface that has a card_template and at least one row. `:where()`
   contributes zero, restoring exactly the (0,1,0) the pre-`:has()`
   unconditional rule had, so the boundary below decides the width and the
   page-tier escapes still outrank it. Do not unwrap it. */
:where(.enr-dataview__results:has(.enr-dataview__cards)) .enr-tablewrap {
  display: none;
}
/* (`.enr-dataview__cards` already declares `display: flex` in its shell rule
   above — the phone state needs no second copy here.) */
@media (min-width: 641px) {
  .enr-tablewrap {
    display: block;
  }
  .enr-dataview__cards {
    display: none;
  }
}

/* The card presentation's half of the reveal — see the matching block in
   `data-table.css`. The card's checkbox is a bare child of `.enr-card` with no
   cell to collapse, so the control itself is what hides. */
.enr-dataview--pickable:not(.enr-dataview--picking) .enr-card > .enr-rowcb {
  display: none;
}