/* THE MARKET PANELS (the Card Designer, COO hands 2026-10-15; the role:
   COO/roles/card-designer.md, the table: app/services/card_faces.py).

   Steven, with Amazon's phone home page as the reference: each card sits on
   a solid colored panel, one big bold headline, one short subline, the
   price, and the OUTCOME as the picture. Brand colors here and there
   (yellow, purple, green, midnight) among friendly non-brand ones (sand,
   sage, sky, coral, plum, cream), so a row reads as a market, never one
   brand color on everything; two neighbours never share a color
   (card_faces.market_panels picks them, the cards only wear the class).

   The palette is defined here once as tokens (--panel-<name>, and its ink,
   --panel-<name>-ink, the words' color on it); every rule below reads
   tokens only. A card wears .mk-panel--<name>, which sets --panel-bg and
   --panel-ink for everything inside it.

   One surface wears it (behind LAYOUT_CARDS; off, the cards are as before):
     .need-tile--panel   the Need ideas tiles (feed/_need_ideas_card.html)

   THE SHOP SHELF ROWS NEVER WEAR IT (Steven 2026-10-19, two shots of
   prod's /shop: "They were NOT supposed to have color" on the Toll Bench
   Certified / Free Assistance rows): .rt-row--panel used to put the Want
   Market's shelf rows (agent_row, panel=) on this palette; no template
   passes `panel=` to agent_row any more and the rule is removed, so every
   shelf row keeps the one neutral card surface. */

:root {
  --panel-yellow: var(--highlight-yellow, #f2e841);
  --panel-yellow-ink: #141414;
  --panel-purple: var(--tb-brand-purple, #5534a5);
  --panel-purple-ink: #ffffff;
  --panel-green: #33e658;
  --panel-green-ink: #0b2412;
  --panel-midnight: #1e2a3e;
  --panel-midnight-ink: #ffffff;
  --panel-sand: #e8d5b5;
  --panel-sand-ink: #2a2118;
  --panel-sage: #b7c9a8;
  --panel-sage-ink: #1d2a1a;
  --panel-sky: #a8d1ec;
  --panel-sky-ink: #10283a;
  --panel-coral: #f08a6c;
  --panel-coral-ink: #2b120b;
  --panel-plum: #5e2750;
  --panel-plum-ink: #ffffff;
  --panel-cream: #f5eddc;
  --panel-cream-ink: #2a2118;
}

.mk-panel--yellow   { --panel-bg: var(--panel-yellow);   --panel-ink: var(--panel-yellow-ink); }
.mk-panel--purple   { --panel-bg: var(--panel-purple);   --panel-ink: var(--panel-purple-ink); }
.mk-panel--green    { --panel-bg: var(--panel-green);    --panel-ink: var(--panel-green-ink); }
.mk-panel--midnight { --panel-bg: var(--panel-midnight); --panel-ink: var(--panel-midnight-ink); }
.mk-panel--sand     { --panel-bg: var(--panel-sand);     --panel-ink: var(--panel-sand-ink); }
.mk-panel--sage     { --panel-bg: var(--panel-sage);     --panel-ink: var(--panel-sage-ink); }
.mk-panel--sky      { --panel-bg: var(--panel-sky);      --panel-ink: var(--panel-sky-ink); }
.mk-panel--coral    { --panel-bg: var(--panel-coral);    --panel-ink: var(--panel-coral-ink); }
.mk-panel--plum     { --panel-bg: var(--panel-plum);     --panel-ink: var(--panel-plum-ink); }
.mk-panel--cream    { --panel-bg: var(--panel-cream);    --panel-ink: var(--panel-cream-ink); }

/* ── NEED IDEAS: four to a row as before, the tile is the panel, the
   picture inset on it, then the headline (three lines at most), the
   subline (two) and the price, "+ fees" free to drop under it.
   Steven 2026-10-19 ("they need to look clean"): one even inset all round
   (--space-2), the picture's corners concentric with the panel's (--radius-lg
   less the inset is --radius-sm), the headline a step under the picture,
   the price at the foot. Its size and line count are the row's to set
   (need-tiles.css: --need-title-size, --need-title-lines; the phone row
   reads --text-sm over two lines, the grid of four --text-xs over three). ── */
.need-tiles--panel .need-tiles__page { gap: var(--space-2); }
.need-tile--panel .need-tile__link {
  height: 100%;
  gap: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
  color: var(--panel-ink);
}
.need-tile--panel .need-tile__pic {
  border-radius: var(--radius-sm);
  background: var(--panel-bg);
  color: var(--panel-ink);
}
.need-tile--panel .need-tile__title,
.need-tile--panel .need-tile__sub,
.need-tile--panel .need-tile__price { padding: 0; color: var(--panel-ink); }
.need-tile--panel .need-tile__title {
  display: -webkit-box;
  margin-top: var(--space-1);
  font-size: var(--need-title-size, var(--text-xs));
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  white-space: normal;
  -webkit-line-clamp: var(--need-title-lines, 3);
  line-clamp: var(--need-title-lines, 3);
  -webkit-box-orient: vertical;
}
.need-tile__sub {
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  text-wrap: balance;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.need-tile--panel .need-tile__price { margin-top: auto; font-weight: var(--font-bold); white-space: normal; }
.need-tile--panel .need-tile__price .rt-fees { font-weight: var(--font-normal); }
.need-tile--panel .need-tile__price .rt-fees { color: inherit; }