/* ==========================================================================
   shared/page.css — the page-level primitives the family pages draw.

   Section headers, summary pills, item cards + badges, skeleton shapes, empty
   states. These were Pantry's; the home hub is the second consumer, and a
   third copy is how two pages stop feeling like one household's software
   (shared/ui.css's own lesson). The rules are byte-for-byte Pantry's — moving
   them here must not restyle anything.

   EVERYTHING HERE IS WRITTEN AGAINST TOKENS (ui.css's rule). Expected beyond
   ui.css's set: --danger-bg / --warn-bg / --good-bg (the time-axis tints the
   pills and badges wear), --surface, --line, --text-2, --muted, --radius.

   Load order: ui.css, then THIS file, then the app's stylesheet — the app
   overrides the deltas it wants instead of forking a block.
   ========================================================================== */

.msg { color: var(--muted); padding: 14px 4px; }

/* --- section headers ------------------------------------------------------ */

.section-head {
  display: flex; align-items: baseline; gap: 8px;
  margin: 22px 2px 10px;
}
.section-head h2 {
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.section-head .section-aside { margin-left: auto; font-size: 12px; color: var(--muted); }

/* --- summary strip: counts that are also filters -------------------------- */

.state-pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }

.state-pill {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-height: var(--tap); padding: 6px 2px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--surface); color: var(--text-2);
  cursor: pointer; touch-action: manipulation;
}
.state-pill b { font-size: 16px; font-weight: 750; line-height: 1.1; }
.state-pill span {
  font-size: 10.5px; font-weight: 650; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.state-pill:active { background: var(--surface-2); }

/* Each state's count wears its time color even unpressed — the strip IS the
   at-a-glance answer. Pressed = filled with that state's tint. */
.pill-past  b { color: var(--danger); }
.pill-soon  b { color: var(--warn); }
.pill-fine  b { color: var(--good); }
.pill-stable b { color: var(--text-2); }
.state-pill[aria-pressed="true"] { border-color: currentColor; }
.pill-past[aria-pressed="true"]   { background: var(--danger-bg); color: var(--danger); }
.pill-soon[aria-pressed="true"]   { background: var(--warn-bg);   color: var(--warn); }
.pill-fine[aria-pressed="true"]   { background: var(--good-bg);   color: var(--good); }
.pill-stable[aria-pressed="true"] { background: var(--surface-3); color: var(--text); }
.state-pill[aria-pressed="true"] span { color: inherit; }

/* --- item cards ----------------------------------------------------------- */

.items { display: flex; flex-direction: column; gap: 8px; }

.card {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 12px;
}

/* Days-left badge: a fixed-width column so names align down the list.
   Color + words, never color alone. */
.badge {
  flex: none; width: 52px; min-height: 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 10px; padding: 3px 2px;
  font-variant-numeric: tabular-nums;
}
.badge b { font-size: 15px; font-weight: 750; line-height: 1.15; }
.badge span { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.badge-past   { background: var(--danger-bg); color: var(--danger); }
.badge-soon   { background: var(--warn-bg);   color: var(--warn); }
.badge-fine   { background: var(--good-bg);   color: var(--good); }
.badge-stable { background: var(--surface-2); color: var(--muted); }

.card .main { flex: 1 1 auto; min-width: 0; }
/* The name is the primary scan target, so let it WRAP to two lines before it
   ever clips — a long grocery name ("Organic Strawberries") reads in full.
   Line-clamp keeps the card bounded: ellipsis only past line 2. */
.card .name {
  font-size: 15px; font-weight: 600;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
.card .meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 3px; font-size: 12px; color: var(--muted);
}

.card .actions { flex: none; display: flex; gap: 6px; }

/* --- skeleton shapes (the shimmer itself is ui.css's .skel) ---------------- */

.skel-pillrow { height: 52px; border-radius: 12px; margin-bottom: 16px; }
.skel-card {
  display: flex; align-items: center; gap: 11px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 11px 12px; margin-bottom: 8px;
}
.skel-badge { flex: none; width: 52px; height: 40px; border-radius: 10px; }
.skel-lines { flex: 1 1 auto; }
.skel-line { height: 12px; border-radius: 6px; }
.skel-line + .skel-line { margin-top: 8px; }
.w30 { width: 30%; } .w35 { width: 35%; } .w40 { width: 40%; } .w45 { width: 45%; }
.w50 { width: 50%; } .w60 { width: 60%; } .w65 { width: 65%; } .w70 { width: 70%; }

/* --- empty state ----------------------------------------------------------- */

.empty { text-align: center; padding: 44px 20px; }
.empty-mark { font-size: 34px; line-height: 1; opacity: .85; }
.empty h2 { margin-top: 12px; font-size: 17px; font-weight: 700; }
.empty p { margin-top: 6px; font-size: 14px; color: var(--muted); line-height: 1.5; }