/* =========================================================
   Top Tried — warm editorial layer (2026-10, preview)
   Food-magazine feel: cream paper, terracotta ink, deep green.
   Light by default; a re-toned warm dark variant. All text
   pairs >= 4.5:1 (see PR for the contrast table).
   ========================================================= */
:root, [data-theme='light'] {
  --color-bg: #faf4ea;
  --color-surface: #fffcf6;
  --color-surface-2: #f3eadc;
  --color-surface-offset: #efe4d3;
  --color-divider: #e8dccb;
  --color-border: #dccdb8;
  --color-text: #2b2118;           /* 14.4:1 on bg */
  --color-text-muted: #67594b;     /* 6.2:1 */
  --color-text-faint: #6f6152;     /* 5.5:1 */
  --color-accent: #b0442a;         /* terracotta 5.2:1 on bg, white on it 5.7:1 */
  --color-accent-soft: #f6dfd3;
  --color-green: #2f5d46;          /* deep green 6.9:1 */
  --color-green-soft: #dfeae2;
  --row-top-tint: #f9ebe1;
  --ember-grad: linear-gradient(135deg, #d9673f 0%, #b0442a 60%, #8c3a2a 100%);
  --glass: rgba(250, 244, 234, 0.82);
  --shadow-sm: 0 1px 2px rgba(74, 44, 20, 0.06), 0 1px 1px rgba(74, 44, 20, 0.04);
  --shadow-md: 0 2px 6px rgba(74, 44, 20, 0.05), 0 12px 30px rgba(74, 44, 20, 0.09);
  --shadow-lg: 0 8px 16px rgba(74, 44, 20, 0.07), 0 30px 70px rgba(74, 44, 20, 0.16);
}
[data-theme='dark'] {
  --color-bg: #1d1713;
  --color-surface: #271f1a;
  --color-surface-2: #312720;
  --color-surface-offset: #392e26;
  --color-divider: #3b3029;
  --color-border: #4a3d33;
  --color-text: #f4ebdd;
  --color-text-muted: #c4b5a3;
  --color-text-faint: #b3a491;
  --color-accent: #ef916d;
  --color-accent-soft: #432a20;
  --color-green: #8fc7a6;
  --color-green-soft: #23332a;
  --row-top-tint: #33241d;
  --ember-grad: linear-gradient(135deg, #f2a27f 0%, #ef916d 60%, #d9673f 100%);
  --glass: rgba(29, 23, 19, 0.8);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 26px 64px rgba(0, 0, 0, 0.55);
}
body.rd { background: var(--color-bg); }

/* ---------- Wider, two-zone desktop ---------- */
@media (min-width: 1024px) { body.rd .app { max-width: 1120px; } }
@media (min-width: 1440px) { body.rd .app { max-width: 1240px; } }
@media (min-width: 1024px) {
  body.rd .capture-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-8); }
  body.rd .capture-panel { max-width: 760px; }
}
body.rd .display em, body.rd .display i { color: var(--color-accent); }

/* Primary actions: terracotta. Selected states: deep green. */
body.rd .mic-btn, .fy-btn--primary, body.rd .btn-primary { background: var(--color-accent); color: #fff; }
[data-theme='dark'] body.rd .mic-btn, [data-theme='dark'] .fy-btn--primary, [data-theme='dark'] body.rd .btn-primary { color: #1d1713; }
.tt-chip.is-on { background: var(--color-green); color: var(--color-bg); }
body.rd .input-shell:focus-within { box-shadow: var(--shadow-lg), 0 0 0 2px var(--color-accent); }

/* ---------- Try next (For you on home) ---------- */
.fy-teaser { margin-bottom: var(--space-8); }
.fy-teaser-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-green); }
.fy-teaser-title { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); }
.fy-rail .fy-card { flex-basis: 180px; }
.fy-rail { scroll-padding-inline: var(--space-5); }
@media (min-width: 900px) { .fy-rail { margin: 0; padding: 4px 0 var(--space-3); } .fy-rail .fy-card { flex-basis: 220px; } }
.fy-because strong { color: var(--color-accent); }
.fy-crowd { background: var(--color-green); }

/* ---------- Lists: bigger art; two columns on desktop ---------- */
body.rd .entry-list .entry { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; }
body.rd .entry-list.is-sortable .entry { grid-template-columns: 22px 30px 64px minmax(0, 1fr) auto; }
body.rd .entry-thumb { width: 64px; height: 64px; border-radius: 14px; }
body.rd .entry { background: var(--color-surface); box-shadow: var(--shadow-sm), 0 0 0 1px var(--color-divider); margin-bottom: 8px; }
body.rd .entry:hover { box-shadow: var(--shadow-md), 0 0 0 1px var(--color-divider); transform: translateY(-1px); }
body.rd .entry-title { font-size: 1.0625rem; }
.rank-badge { color: var(--color-accent); }
@media (min-width: 1024px) {
  body.rd #libraryList.entry-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-4); row-gap: 0; align-items: start; }
  body.rd .entry-list .entry { grid-template-columns: 76px minmax(0, 1fr) auto; }
  body.rd .entry-list.is-sortable .entry { grid-template-columns: 22px 30px 76px minmax(0, 1fr) auto; }
  body.rd .entry-thumb { width: 76px; height: 76px; }
  /* The "top 5 on your profile" divider spans both columns. */
  .entry-list.is-profile-ranked > .entry:nth-child(5)::after { display: none; }
}
.entry-list.is-profile-ranked > .entry:nth-child(-n+5) { background: var(--row-top-tint); }
.profile-caption::before { background: var(--color-green); }

/* Tighter rhythm */
body.rd .capture-panel { margin-bottom: var(--space-6); }
body.rd .chip-rail { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
   body.rd .entry { transition: none; }
   body.rd .entry:hover { transform: none; }
}

/* ---------- Designed tiles for items with no image ----------
   Same box as a photo: the initial on a warm gradient (cream text >= 4.9:1
   on every stop). Used by the top-picks hero, its mini rows and list thumbs. */
.type-tile {
  position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden;
  color: #faf4ea; background: linear-gradient(145deg, var(--tt-a), var(--tt-b));
}
.type-tile[data-tone="0"] { --tt-a: #b0442a; --tt-b: #8c3a2a; }
.type-tile[data-tone="1"] { --tt-a: #2f5d46; --tt-b: #244a37; }
.type-tile[data-tone="2"] { --tt-a: #8f6119; --tt-b: #74500f; }
.type-tile[data-tone="3"] { --tt-a: #7a3b4f; --tt-b: #5f2d3e; }
.type-tile[data-tone="4"] { --tt-a: #56622a; --tt-b: #434d1f; }
.type-tile-initial { font-family: var(--font-display); font-style: italic; line-height: 1; font-size: 1.4em; }
.type-tile::after { /* soft paper grain ring for depth */
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(120% 90% at 20% 10%, rgba(255, 255, 255, 0.16), transparent 55%);
}
.type-tile-glyph { position: absolute; right: 14px; top: 14px; opacity: 0.55; }
.type-tile-glyph svg { width: 22px; height: 22px; }
.type-tile--hero .type-tile-initial { font-size: clamp(5rem, 3rem + 6vw, 8rem); transform: translateY(-12%); }
.type-tile--hero .type-tile-glyph { display: none; }

/* Thumbs host tiles at their own size. */
/* Guard: whatever holds a tile is its box. .type-tile is absolute/inset 0, so a
   host without a positioning context made it fill the viewport (2026-10 bug). */
:where(:has(> .type-tile)) { position: relative; }
 body.rd .entry-thumb { position: relative; }
body.rd .entry-thumb .type-tile { border-radius: inherit; }
body.rd .entry-thumb .type-tile-initial { font-size: 1.9rem; }
body.rd .entry-thumb[data-has-image="false"] { box-shadow: var(--shadow-sm); background: none; }
.fy-art { position: relative; }
.fy-art .type-tile-initial { font-size: 4rem; }
@keyframes stShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---- Try next row (home) ------------------------------------------------ */
.entry-list > li.tn-slot { list-style: none; padding: 0; margin: var(--space-5) 0 var(--space-6); background: none; border: 0; box-shadow: none; display: block; }
.entry-list > li.tn-slot::before, .entry-list > li.tn-slot::after { content: none; }
.tn { margin: var(--space-6) 0; min-width: 0; }
.tn[hidden] { display: none; }
.tn-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.tn-title-h { font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); letter-spacing: -0.01em; color: var(--color-text); }
.tn-rail {
  --tn-w: 150px;
  display: flex; gap: var(--space-3); overflow-x: auto; overflow-y: visible;
  scroll-snap-type: x mandatory; scroll-padding-inline: 2px; scrollbar-width: none;
  padding: 6px 2px 10px; margin: 0 -2px;
  overscroll-behavior-x: contain;
}
.tn-rail::-webkit-scrollbar { display: none; }
.tn-rail:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 12px; }
/* 390px: two full cards and a peek of the third. */
@media (min-width: 640px) { .tn-rail { --tn-w: 176px; } }
@media (min-width: 1024px) { .tn-rail { --tn-w: 196px; } }
.tn-item { flex: 0 0 var(--tn-w); scroll-snap-align: start; display: flex; }
@keyframes tnShimmer { 50% { opacity: 0.55; } }
.fy-filter { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); }
.fy-filter strong { color: var(--color-text); }
@media (prefers-reduced-motion: reduce) {
  .tn-rail { scroll-behavior: auto; }
}
.entry-list > li.tn-slot { grid-column: 1 / -1; width: 100%; background: none !important; box-shadow: none !important; border: 0 !important; }
/* Same caption height for every category so switching pills never moves the list. */
.profile-caption { min-height: calc(2 * 1.4em); line-height: 1.4; align-items: center; }
@media (min-width: 640px) { .profile-caption { min-height: 1.4em; } }
/* Uniform For you cards so a refilled slot never changes the grid. */
.fy-grid .fy-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fy-grid .fy-because, .fy-grid .fy-reason { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }