/* data-feed.css — frontend-data-views (SP8) — the `feed` presentation
   (`.enr-feed*`), including the two tones `data_views.vocabulary.TONES`
   declares (`default`, `reject`).

   Slot in base.html: after data-selbar.css, last of the six.

   Tokens only. The feed is chrome only (`role="list"`/`role="listitem"`,
   the row shell and its selection checkbox); `row.feed_html` is the
   consumer's own content, page-tier per spec §10's anti-gaming carve-out. */

.enr-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.enr-feed__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-paper);
  border: 1px solid var(--border-1);
  border-left: 3px solid var(--border-2);
  border-radius: var(--radius-md);
}
.enr-feed__row[data-enr-row-href] {
  cursor: pointer;
}
.enr-feed__row:hover {
  background: var(--bg-sunken);
}
/* JS toggles this on the checked row (selection-dom.js, "--selected
   classes" — architecture §3.3 module table). */
.enr-feed__row--selected {
  background: var(--brand-soft);
}

.enr-feed__row--default {
  border-left-color: var(--border-2);
}
.enr-feed__row--reject {
  border-left-color: var(--enroute-rose-500);
  background: var(--enroute-rose-50);
}
.enr-feed__row--reject:hover {
  background: var(--enroute-rose-50);
}

/* ── The day-grouped feed (`feed_grouping="day"`, frontend-data-views 2.1.0,
   mobile-calendar-feed SP1 + orchestrator amendment A2; restyled to Claude
   Design's approved redesign, Scroll.dc.html, at JJ's review 2026-10-03) ────
   Framework chrome around the unchanged `.enr-feed__row`s (ADR 0085): each
   row becomes a card, each day a section with a sticky day mark beside its
   cards, each month a heading, each run of empty days one quiet line. The
   card's INNER layout is the consumer's (`feed_template`, page tier).

   The segments butt against each other (no feed gap): a day section carries
   its own vertical padding and a border-1 hairline at its foot, a month
   heading its hairline, and a gap row is a compact line between them.

   The section is a wrapping flex row, not a grid, on purpose: a sticky box is
   constrained by its containing block, which for a grid item is its own grid
   AREA (one track) but for a flex item is the whole section — so the day
   mark rides the full height of its day. Line 1 holds the mark and the first
   card; every later card wraps onto its own line and is pushed into the card
   column by `margin-left: auto`.

   Both anchors (`#enr-feed-day-*`, `#enr-feed-month-*`) carry scroll margins
   for the sticky top bar and the bottom action bar (D6), so a fragment
   scroll and `scrollIntoView` both land clear of them. */

.enr-feed--day-grouped {
  gap: 0;
}

.enr-feed__day {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-1);
  scroll-margin-top: var(--topbar-h);
  scroll-margin-bottom: var(--enr-bottombar-h, 0);
}
.enr-feed__day > :not(.enr-feed__daymark) {
  /* border-box so the basis is the whole card, padding and border included —
     the mark, the column gap and the first card must sum to exactly 100%. */
  box-sizing: border-box;
  flex: 0 0 calc(100% - var(--feed-daymark-w) - var(--space-2));
  min-width: 0;
  margin-left: auto;
}

/* A day-grouped row is a card. Background, hover, selected and tone come
   from the flat rules above; only the shape changes. */
.enr-feed--day-grouped .enr-feed__row {
  min-height: var(--space-8);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.enr-feed--day-grouped .enr-feed__row--reject {
  border-color: var(--enroute-rose-500);
}

/* The day mark: no tile behind it — an uppercase weekday over the day number
   in a --space-7 disc, transparent unless today (a brand-press disc). A
   weekend number (`--weekend`, set by the template from the date) is fg-3. */
.enr-feed__daymark {
  flex: 0 0 var(--feed-daymark-w);
  position: sticky;
  top: var(--topbar-h);
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--space-1) / 2);
  padding-top: calc(var(--space-1) / 2);
}
.enr-feed__daymark-weekday {
  font-size: var(--feed-daymark-weekday-size);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.enr-feed__daymark-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  height: var(--space-7);
  border-radius: var(--radius-pill);
  font-size: var(--feed-daymark-num-size);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}
.enr-feed__daymark--weekend > .enr-feed__daymark-num {
  color: var(--fg-3);
}
.enr-feed__daymark-num--today,
.enr-feed__daymark--weekend > .enr-feed__daymark-num--today {
  background: var(--brand-press);
  color: var(--fg-on-ink);
}
.enr-feed__daymark:has(> .enr-feed__daymark-num--today) > .enr-feed__daymark-weekday {
  color: var(--brand-press);
}

/* The month heading: the month in fg-1, the year (`-year`) lighter in fg-3,
   on the page canvas (no band of its own) over a border-1 hairline. It
   scrolls with the feed — deliberately NOT sticky (orchestrator ruling on SP1
   note 5, re-affirmed 2026-10-03): a stuck heading at the day marks' offset
   covered the top of an anchored day's first card, and the day mark cannot
   stack below it without leaving the top bar (T-75a/T-76 pin both at
   `--topbar-h`). */
.enr-feed__monthmark {
  margin: 0;
  padding: var(--space-3) var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--border-1);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  scroll-margin-top: var(--topbar-h);
  scroll-margin-bottom: var(--enr-bottombar-h, 0);
}
.enr-feed__monthmark-year {
  font-weight: 500;
  color: var(--fg-3);
}

/* A run of empty days: one compact line in the card column — the date span,
   a hairline that takes the free width, then "No orders". Nothing draws a
   rule above it (that read as a stray line under the top bar when the feed
   opened on a gap). Inside today's empty section only the "No orders" text
   stands in for the cards beside today's mark. */
.enr-feed__gap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0 var(--space-2) calc(var(--feed-daymark-w) + var(--space-2));
  font-size: var(--text-sm);
  color: var(--fg-3);
}
.enr-feed__gap-label {
  flex: none;
  font-weight: 600;
  white-space: nowrap;
}
.enr-feed__gap-rule {
  flex: 1 1 auto;
  min-width: var(--space-6);
  height: 1px;
  background: var(--border-1);
}
.enr-feed__gap-text {
  flex: none;
}
.enr-feed__day > .enr-feed__gap {
  align-self: center;
  padding: 0;
}