.recommendations-masthead {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 250px;
  gap:46px;
  align-items:end;
  margin:12px 0 28px;
}
.recommendations-masthead > * { position:relative; z-index:1; }
.rec-masthead-copy h1 { max-width:900px; }
.rec-progress-card {
  position:relative;
  border:2px solid var(--navy);
  background:#fff;
  padding:16px;
  box-shadow:calc(7px * var(--hard)) calc(7px * var(--hard)) 0 var(--pink);
  transform:rotate(calc(1.2deg * var(--tilt)));
}
.rec-progress-card::before {
  content:"";
  position:absolute;
  width:62px;
  height:15px;
  right:28px;
  top:-9px;
  background:rgba(255,227,110,.88);
  border:1px solid rgb(var(--ink-rgb,17 26 75) / .2);
  transform:rotate(calc(-5deg * var(--tilt)));
  pointer-events:none;
}
.rec-progress-top { display:flex; align-items:baseline; gap:8px; color:var(--navy); }
.rec-progress-top strong { font-size:34px; letter-spacing:-.06em; }
.rec-progress-top span { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.progress-track { display:grid; grid-template-columns:repeat(6,1fr); gap:5px; margin:10px 0; }
.progress-segment { height:8px; background:var(--tint-lilac,#e4e3f0); border-radius:999px; }
.progress-segment.is-filled { background:var(--pink); }
.progress-note { color:var(--note-ink,#4053ad); font-size:18px; line-height:.95; }
.recommendation-filter-band { margin-bottom:20px; }
/* #117: Browse's post-onboarding home — a quiet alternate-discovery link, not a competing CTA. */
.recommendation-browse-link { margin:-8px 0 20px; }

.refresh-banner {
  margin:0 0 18px;
  padding:15px 17px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  border:2px solid var(--navy);
  background:var(--tint-lime,#f4ffc8);
  box-shadow:calc(6px * var(--hard)) calc(6px * var(--hard)) 0 var(--shadow-ink,rgb(var(--ink-rgb,17 26 75) / .12));
}
.refresh-banner strong { display:block; color:var(--navy); font-size:20px; margin:2px 0; }
.refresh-banner p { margin:0; color:#465078; font-size:13px; }
.refresh-banner p.loading-basis { margin-top:6px; color:var(--navy); font-weight:600; }
.refresh-kicker { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#5a6a1c; }
.refresh-banner.is-finished { background:var(--cyan-soft); align-items:stretch; }
/* Where the last set came from. Not an end state: the demo may still have picks left. */
.refresh-banner.is-fallback { background:var(--tint-warm,#fff9e6); }
.refresh-banner.is-live { background:var(--tint-lime,#efffc2); }
.refresh-banner > div:first-child { flex:1 1 320px; min-width:0; }
.refresh-banner .action-group { flex:0 1 auto; justify-content:flex-end; }
.refresh-banner.is-finished .action-group { min-width:0; }
.refresh-banner.is-fallback .action-group,.refresh-banner.is-live .action-group { min-width:0; }

/* #54: the technical live-AI/privacy disclosure lives behind a native <details> instead of sitting inline
   in the primary flow — the short status (Live AI / Safe fallback) above already answers "was AI used?". */
.ai-disclosure { margin-top:8px; }
.ai-disclosure summary {
  cursor:pointer;
  min-height:24px;   /* WCAG 2.2 target size */
  display:inline-flex;
  align-items:center;
  padding:2px 0;
  font-size:11px;
  font-weight:700;
  color:var(--note-ink,#5749bf);
  list-style:none;
}
.ai-disclosure summary::-webkit-details-marker { display:none; }
.ai-disclosure summary::before { content:"\25b8 "; }
.ai-disclosure[open] summary::before { content:"\25be "; }
.ai-disclosure .quality-note-help { margin-top:6px; }
/* The banner shares its row with text, so its buttons may wrap (the footer's single row may not). */
.refresh-banner .recommendation-footer-actions { flex-wrap:wrap; }
.refresh-banner .recommendation-footer-actions .button { flex:0 1 auto; }
.prototype-next-step { display:inline-block; margin-top:10px; color:var(--note-ink,#4053ad); font-family:var(--hand); font-size:20px; transform:rotate(calc(-1deg * var(--tilt))); }

/* Six recommendations in a clean 3 x 2 desktop grid. */
.editorial-grid {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
}
.editorial-rec {
  position:relative;
  height:100%;
  overflow:visible;
  overflow-anchor:none;
  background:#fff;
  border:2px solid var(--navy);
  box-shadow:calc(8px * var(--hard)) calc(8px * var(--hard)) 0 var(--shadow-ink,rgb(var(--ink-rgb,17 26 75) / .12));
  display:flex;
  flex-direction:column;
  min-width:0;
}
.rec-span-4 { grid-column:span 4; }
.rec-span-5 { grid-column:span 5; }
.rec-span-6 { grid-column:span 6; }
.rec-span-7 { grid-column:span 7; }
.rec-span-12 { grid-column:span 12; }

/* Surprise Me remains visually distinct without forcing a separate full-width row. */
.rec-surprise {
  border-color:#0aaec0;
  box-shadow:calc(8px * var(--hard)) calc(8px * var(--hard)) 0 var(--cyan);
  background:var(--tint-cool,#fbffff);
}
.editorial-rec.is-rated { box-shadow:calc(8px * var(--hard)) calc(8px * var(--hard)) 0 var(--pink); }
.editorial-rec-body { padding:14px 16px 16px; display:flex; flex:1 1 auto; flex-direction:column; min-width:0; }
.editorial-rec-meta {
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#4d5780;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}
/* #67: without min-width:0 + overflow-wrap on the title, a long or heavy-font title (Bold Graphic's
   Archivo Black) can't shrink below its own content width, so the flex row grows past the card and the
   reaction stamp — the last child — gets pushed out over the neighboring card. flex-wrap is a second
   safety net: if the two still don't fit on one line, the stamp drops to its own line instead of
   overflowing sideways. */
.editorial-title-row { display:flex; align-items:flex-start; margin-top:8px; }
/* #95: a fixed clamp range that reads fine at three-per-row width, whatever the title length —
   no separate "wide layout" font size to keep in sync. */
.editorial-title-row h3 { flex:1 1 auto; min-width:0; overflow-wrap:break-word; margin:0; font-size:clamp(20px,2vw,26px); line-height:1.08; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
/* #121: a reserved band directly under the title, present whether or not a card has a status chip,
   so one-line vs. two/three-line titles never shift the chip's vertical position and a row of cards
   stays level even when only some of them carry a status. min-height is sized to the chip's own
   rendered height (padding + line height + border) so the empty state reserves the same space. */
.editorial-status-row { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:38px; margin-top:6px; }
.reaction-status-slot { display:flex; align-items:center; min-width:0; min-height:34px; }
.reaction-stamp {
  flex:0 0 auto;
  max-width:100%;
  padding:6px 9px;
  border:2px solid var(--navy);
  background:var(--yellow);
  color:var(--navy);
  font-family:var(--hand);
  font-size:16px;
  transform:rotate(calc(2deg * var(--tilt)));
}
.reaction-more { background:var(--pink-soft); border-color:var(--pink); color:var(--on-pink,#9b076e); }
.reaction-less { background:var(--tint-lilac,#e7e9ff); }
.reaction-not-tried { background:var(--violet-soft); }
.rec-favorite-star {
  appearance:none;
  flex:none;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  padding:0;
  border:1.5px solid var(--line);
  border-radius:50%;
  background:rgba(255,255,255,.72);
  color:var(--navy);
  font:inherit;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  box-shadow:none;
}
.rec-favorite-star:hover { border-color:var(--navy); background:var(--tint-warm,#fff9e6); }
.rec-favorite-star.is-favorite {
  border-color:var(--accent-text,var(--pink));
  background:var(--pink-soft);
  color:var(--accent-text,var(--pink));
}
.rec-favorite-star:focus-visible { outline:3px solid rgba(32,217,232,.55); outline-offset:2px; }
/* #95/#121: the rationale is the primary card copy — "why did Tastemake pick this?" — shown before
   the catalog synopsis, in the note-ink color used elsewhere for Tastemake's own commentary. The
   copy is truncated at a sentence/word boundary in recommendations.js before it ever reaches this
   markup, so there is no CSS line-clamp/overflow:hidden here to clip it mid-thought — min-height
   still keeps cards from feeling collapsed when the (now-bounded) text is short, and the grid's
   align-items:stretch keeps a row's cards equal height. */
.editorial-rationale {
  color:var(--note-ink,#4053ad);
  font-weight:600;
  line-height:1.42;
  font-size:14px;
  margin:8px 0 0;
}

/* #95/#121: default card copy prioritizes the recommendation rationale over the catalog synopsis —
   the synopsis string itself is capped at a clean boundary (see truncateCopy in recommendations.js)
   rather than clamped/clipped here. */
.editorial-about {
  color:var(--muted);
  line-height:1.45;
  font-size:13px;
  margin:7px 0 8px;
}
.editorial-why {
  position:relative;
  z-index:20;
  margin-top:2px;
  border-top:1px solid var(--line);
  padding-top:10px;
  overflow:visible;
}
.why-trigger {
  appearance:none;
  border:0;
  min-height:28px;   /* WCAG 2.2 target size */
  padding:2px 0;
  background:transparent;
  color:var(--note-ink,#5749bf);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.why-popover {
  position:absolute;
  left:0;
  bottom:calc(100% + 8px);
  width:min(330px,100%,calc(100vw - 48px));
  padding:12px 13px;
  border:2px solid var(--navy);
  border-radius:10px;
  background:#fff;
  box-shadow:calc(6px * var(--hard)) calc(6px * var(--hard)) 0 var(--shadow-ink,rgb(var(--ink-rgb,17 26 75) / .16));
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(5px) rotate(calc(-.4deg * var(--tilt)));
  transition:opacity .12s ease, transform .12s ease, visibility .12s ease;
}
.why-popover::after {
  content:"";
  position:absolute;
  left:18px;
  bottom:-8px;
  width:12px;
  height:12px;
  background:#fff;
  border-right:2px solid var(--navy);
  border-bottom:2px solid var(--navy);
  transform:rotate(calc(45deg * var(--tilt)));
}
.why-popover p { color:var(--muted); font-size:12px; line-height:1.45; margin:0; }
.why-kicker {
  display:block;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--note-ink,#5749bf);
  margin-bottom:6px;
}
.why-caveat { margin-top:8px !important; font-style:italic; }
.editorial-why:hover .why-popover,
.editorial-why:focus-within .why-popover,
.editorial-why.is-pinned .why-popover {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) rotate(calc(-.4deg * var(--tilt)));
}

/* #95: fixed, predictable aspect ratio; object-fit:cover on the real-artwork <img> below never
   stretches the image, and the container's own size never shifts once the layout is known — the
   image loading later cannot cause layout shift. */
.editorial-art {
  position:relative;
  overflow:hidden;
  aspect-ratio:16/10;
  width:100%;
  border-bottom:2px solid var(--navy);
  background:#151d56;
  flex:0 0 auto;
}
.editorial-art-real img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.art-kicker,.art-title,.art-corner { position:absolute; z-index:4; }
.art-kicker {
  left:14px;
  top:14px;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.8);
  color:#fff;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.art-title {
  left:14px;
  right:14px;
  bottom:14px;
  color:#fff;
  /* Preserve the actual title. Long titles may wrap and scale down rather than silently dropping words. */
  font-size:clamp(15px,2vw,26px);
  line-height:1.02;
  font-weight:700;
  letter-spacing:-.04em;
  text-transform:uppercase;
  overflow:hidden;
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}
.art-corner { right:12px; top:14px; color:#fff; font-size:9px; font-weight:700; letter-spacing:.08em; }
.art-pattern,.art-shape { position:absolute; inset:auto; pointer-events:none; }
.art-pattern {
  inset:0;
  opacity:.28;
  background-image:radial-gradient(circle,rgba(255,255,255,.7) 1.4px,transparent 1.5px);
  background-size:13px 13px;
  mix-blend-mode:overlay;
}
.art-shape-a { width:150px; height:150px; border:24px solid var(--pink); border-radius:50%; right:-45px; top:-40px; }
.art-shape-b { width:150px; height:46px; background:var(--lime); left:-30px; top:52px; transform:rotate(calc(-18deg * var(--tilt))); }
.art-eeaao { background:linear-gradient(150deg,#ea437e 0%,#6637a9 48%,#172560 100%); }
.art-barry,.art-fargo { background:linear-gradient(150deg,#6b285f 0%,#191e58 60%,#0f163e 100%); }
.art-wwdits,.art-yellowjackets { background:linear-gradient(150deg,#245b72 0%,#1b285e 58%,#432954 100%); }
.art-disco,.art-golden-idol { background:linear-gradient(150deg,#ff855f 0%,#7f2d75 52%,#19235c 100%); }
.art-inscryption,.art-lighthouse { background:linear-gradient(150deg,#173c4c 0%,#111a4b 58%,#5b5570 100%); }
.art-handmaiden { background:linear-gradient(150deg,#8b1e63,#352266 54%,#143b68); }
.art-vita-nostra { background:linear-gradient(150deg,#6242b6,#253c83 55%,#1f626a); }
.art-dnd { background:linear-gradient(150deg,#db5f67,#783a87 52%,#1d3569); }
.art-layout-2 .art-shape-a { border-radius:0; transform:rotate(calc(25deg * var(--tilt))); width:90px; height:90px; top:-30px; }
.art-layout-3 .art-pattern { background-image:linear-gradient(rgba(255,255,255,.22) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.22) 2px,transparent 2px); background-size:24px 24px; }
.art-layout-4 .art-shape-b { height:90px; width:90px; border-radius:50%; background:var(--cyan); left:26px; top:52px; bottom:auto; }

.surprise-burst {
  position:absolute;
  z-index:6;
  right:6px;
  top:-14px;
  width:84px;
  height:84px;
  display:grid;
  place-items:center;
  text-align:center;
  background:var(--lime);
  color:var(--navy);
  font-family:var(--hand);
  font-size:17px;
  line-height:.8;
  clip-path:polygon(50% 0%,61% 20%,80% 8%,82% 31%,100% 37%,84% 52%,96% 71%,73% 72%,70% 96%,51% 82%,35% 100%,29% 77%,5% 84%,16% 61%,0% 49%,22% 40%,10% 20%,34% 23%);
  transform:rotate(calc(9deg * var(--tilt)));
}

.reaction-question {
  margin-top:14px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
}
.reaction-rail {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin-top:14px;
}
.rating-button {
  appearance:none;
  min-height:44px;
  border:2px solid var(--navy);
  background:#fff;
  color:var(--navy);
  border-radius:8px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 9px;
  font-size:11px;
  font-weight:700;
  box-shadow:calc(3px * var(--hard)) calc(3px * var(--hard)) 0 var(--shadow-ink,rgb(var(--ink-rgb,17 26 75) / .08));
}
.rating-button:hover { transform:translate(-1px,-1px); box-shadow:calc(5px * var(--hard)) calc(5px * var(--hard)) 0 var(--shadow-ink,rgb(var(--ink-rgb,17 26 75) / .1)); }
.rating-button[aria-pressed="true"][data-rating="more"] { background:var(--pink); color:#fff; border-color:var(--pink); }
.rating-button[aria-pressed="true"][data-rating="less"] { background:var(--navy); color:#fff; }
.rating-button[aria-pressed="true"][data-rating="not-tried"] { background:var(--violet); color:#fff; border-color:var(--violet); }
.feedback-details { margin-top:10px; padding-top:9px; border-top:1px dashed #c9c9dd; }
.rec-favorite-action { margin-top:8px; }
.feedback-detail-prompt { display:block; color:var(--muted); font-size:11px; margin-bottom:7px; }
.detail-chip-row { display:flex; flex-wrap:wrap; gap:6px; }
.detail-chip {
  appearance:none;
  border:1px solid transparent;
  border-radius:999px;
  padding:6px 9px;
  background:var(--pink-soft);
  color:#97066c;
  font-size:10px;
  font-weight:700;
  cursor:pointer;
}
.detail-chip:nth-child(2) { background:var(--cyan-soft); color:#17707d; }
.detail-chip:nth-child(3) { background:var(--tint-lime,#efffc2); color:var(--on-lime,#53640c); }
.detail-chip:nth-child(4) { background:var(--violet-soft); color:var(--note-ink,#584bb5); }
.detail-chip[aria-pressed="true"] { border-color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy); }
.recommendation-quality-note { margin-top:10px; padding-top:9px; border-top:1px dotted #d6d6e7; }
.quality-note-row { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.quality-chip { background:var(--yellow); color:var(--navy); }
.quality-note-help { color:var(--faint,#747994); font-size:10px; line-height:1.35; flex:1 1 180px; }

/* #52: discovery-quality feedback is a step behind the primary reaction, so it reads as optional and
   quieter rather than competing with More/Less/Not tried. */
.tertiary-feedback-toggle { margin-top:8px; }
.more-feedback-toggle {
  background:transparent;
  border:1px dashed var(--line);
  color:var(--muted);
  font-weight:600;
}
.more-feedback-toggle[aria-expanded="true"] { border-style:solid; }
.tertiary-feedback[hidden] { display:none; }
.series-feedback { margin-top:10px; padding-top:9px; border-top:1px dotted #d6d6e7; }
.series-chip { background:var(--cyan-soft); color:#176672; }

.ai-inline-status {
  margin:0 0 12px;
  padding:6px 2px;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}
.ai-inline-status strong { color:var(--navy); }

/* #93: the ongoing-loop action and the optional taste-input nudge. Both sit above the per-item
   grid so they read as "keep going" rather than an end-of-list footer action. */
.keep-discovering-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin:22px 0 18px;
  padding:13px 16px;
  border:2px dashed var(--navy);
  border-radius:10px;
  background:rgba(255,255,255,.6);
}
.keep-discovering-bar p { margin:0; color:var(--text2,#3f4774); font-size:13px; flex:1 1 260px; }
.recommendation-medium-filter { display:flex; gap:6px; margin:-8px 0 16px 78px; flex-wrap:wrap; }
.recommendation-medium-button {
  appearance:none;
  border:1px solid var(--line);
  background:rgba(255,255,255,.72);
  color:var(--muted);
  border-radius:999px;
  padding:6px 11px;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.recommendation-medium-button.is-active { background:var(--navy); color:#fff; border-color:var(--navy); }
.keep-discovering-bar .button { flex:0 0 auto; }
.taste-input-prompt {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin:0 0 18px;
  padding:13px 16px;
  border:1px dashed var(--line);
  border-radius:10px;
  background:transparent;
}
.taste-input-prompt p { margin:0; color:var(--muted); font-size:13px; flex:1 1 260px; }
.taste-input-prompt-actions { display:flex; gap:8px; flex-wrap:wrap; }

.recommendation-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-top:28px;
  padding:0 10px;
}
.recommendation-footer-actions { flex-wrap:nowrap; }
.recommendation-footer-actions .button { flex:0 0 auto; }
.recommendation-empty { min-height:220px; }

/* First-load placeholders borrow the same editorial language as finished cards so the screen reads
   as "Tastemake is assembling something" rather than a disabled grey grid. Later refreshes keep the
   current cards visible instead of showing skeletons at all. */
.editorial-rec-skeleton {
  min-height:0;
  border:2px solid var(--navy);
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  box-shadow:calc(5px * var(--hard)) calc(5px * var(--hard)) 0 var(--shadow-ink,rgb(var(--ink-rgb,17 26 75) / .08));
  animation:skeleton-card-in .38s ease both;
  animation-delay:var(--skeleton-delay,0ms);
}
.skeleton-art {
  position:relative;
  aspect-ratio:16 / 10;
  overflow:hidden;
  border-bottom:2px solid var(--navy);
  background:linear-gradient(145deg,#202a69 0%,#394ca1 58%,#1b245d 100%);
}
.skeleton-art-2 { background:linear-gradient(145deg,#702c72 0%,#3e347f 56%,#1d2d69 100%); }
.skeleton-art-3 { background:linear-gradient(145deg,#1d6576 0%,#293f82 58%,#28265f 100%); }
.skeleton-art-4 { background:linear-gradient(145deg,#9b3f68 0%,#554184 55%,#22396f 100%); }
.skeleton-art::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  background:linear-gradient(105deg,transparent 24%,rgba(255,255,255,.17) 44%,transparent 64%);
  background-size:230% 100%;
  animation:skeleton-shimmer 1.55s ease-in-out infinite;
  animation-delay:var(--skeleton-delay,0ms);
}
.skeleton-art-kicker {
  position:absolute;
  z-index:4;
  left:14px;
  top:14px;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.72);
  color:#fff;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.skeleton-art-shape { position:absolute; z-index:2; display:block; }
.skeleton-art-shape-a {
  width:142px;
  height:142px;
  right:-40px;
  top:-44px;
  border:22px solid var(--pink);
  border-radius:50%;
  opacity:.85;
}
.skeleton-art-shape-b {
  width:132px;
  height:42px;
  left:-24px;
  top:58%;
  background:var(--lime);
  transform:rotate(calc(-16deg * var(--tilt)));
  opacity:.88;
}
.skeleton-art-pattern {
  position:absolute;
  inset:0;
  z-index:3;
  opacity:.2;
  background-image:radial-gradient(circle,rgba(255,255,255,.75) 1.2px,transparent 1.4px);
  background-size:14px 14px;
}
.skeleton-body { padding:16px; display:grid; gap:9px; }
.skeleton-kicker {
  color:var(--note-ink,#5749bf);
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.skeleton-line {
  display:block;
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--tint-lilac,#e7e9ff),var(--cyan-soft,#dff8fb),var(--tint-lilac,#e7e9ff));
  background-size:220% 100%;
  animation:skeleton-line-shift 1.8s ease-in-out infinite;
  animation-delay:var(--skeleton-delay,0ms);
}
.skeleton-line.is-title { width:72%; height:21px; border-radius:6px; }
.skeleton-line.is-medium { width:84%; }
.skeleton-actions { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; margin-top:8px; }
.skeleton-actions span {
  height:42px;
  border:2px solid var(--line);
  border-radius:8px;
  background:var(--tint-warm,#fff9e6);
}
@keyframes skeleton-shimmer {
  0% { background-position:210% 0; }
  100% { background-position:-110% 0; }
}
@keyframes skeleton-line-shift {
  0%,100% { background-position:0 0; }
  50% { background-position:100% 0; }
}
@keyframes skeleton-card-in {
  from { opacity:0; transform:translateY(7px); }
  to { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce) {
  .editorial-rec-skeleton,.skeleton-art::after,.skeleton-line { animation:none; }
}

.reaction-rail-binary { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:7px; }
.experience-button { font-size:12px; }
.experience-outcomes { margin-top:9px; }
.outcome-chip { min-height:34px; padding-inline:11px; }
.rec-interaction {
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:92px;
  margin-top:auto;
  padding-top:12px;
}
.reaction-complete {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:62px;
  padding-top:10px;
  border-top:1px solid var(--line);
}
.reaction-complete > span {
  color:var(--navy);
  font-size:13px;
  font-weight:800;
}
.reaction-change {
  min-width:0;
  min-height:36px;
  padding:5px 10px;
  box-shadow:none;
}

.rec-feedback-popover {
  position:absolute;
  z-index:80;
  left:12px;
  right:12px;
  bottom:12px;
  max-height:min(560px,75vh);
  overflow:auto;
  padding:14px;
  border:2px solid var(--navy);
  border-radius:14px;
  background:#fff;
  box-shadow:calc(8px * var(--hard)) calc(8px * var(--hard)) 0 var(--shadow-ink,rgb(var(--ink-rgb,17 26 75) / .18));
}
.rec-feedback-popover::after {
  content:"";
  position:absolute;
  left:26px;
  bottom:-9px;
  width:14px;
  height:14px;
  border-right:2px solid var(--navy);
  border-bottom:2px solid var(--navy);
  background:#fff;
  transform:rotate(45deg);
}
.rec-feedback-popover-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:4px;
}
.rec-feedback-popover-head > div { min-width:0; }
.rec-feedback-popover-head strong { display:block; margin-top:2px; font-size:14px; line-height:1.25; overflow-wrap:anywhere; }
.rec-feedback-kicker { color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.rec-feedback-close {
  appearance:none;
  flex:none;
  width:32px;
  height:32px;
  border:1.5px solid var(--line);
  border-radius:50%;
  background:#fff;
  color:var(--navy);
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.rec-feedback-close:hover { border-color:var(--navy); }
.rec-feedback-popover .experience-outcomes { margin-top:8px; }
.rec-feedback-popover .experience-refinement,
.rec-feedback-popover .series-feedback,
.rec-feedback-popover .recommendation-quality-note { margin-top:10px; }
.editorial-rec.has-feedback-open { z-index:70; }

.mobile-swipe-hint { display:none; }
@media (max-width:760px) and (pointer:coarse) {
  .mobile-swipe-hint {
    display:block;
    margin:7px 0 0;
    color:var(--faint,#747994);
    font-size:10px;
    text-align:center;
  }
}
.rating-button[disabled],.keep-discovering-bar .button[disabled] { opacity:.55; cursor:default; pointer-events:none; }

@media (max-width:760px) {
  .rec-feedback-popover {
    left:8px;
    right:8px;
    bottom:8px;
    max-height:72vh;
  }
}

.first-insight-nudge {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 0 18px;
  padding:14px 16px;
  border:2px solid var(--navy);
  border-radius:14px;
  background:var(--cyan-soft);
  box-shadow:calc(5px * var(--hard)) calc(5px * var(--hard)) 0 var(--shadow-ink,rgb(var(--ink-rgb,17 26 75) / .12));
}
.first-insight-nudge > div { min-width:0; }
.first-insight-nudge strong { display:block; margin:2px 0 3px; color:var(--navy); font-size:18px; }
.first-insight-nudge p { margin:0; color:var(--text2,#3f4774); font-size:12px; line-height:1.4; }
.first-insight-nudge .button { flex:none; min-width:0; }
@media (max-width:620px) {
  .first-insight-nudge { align-items:stretch; flex-direction:column; gap:10px; }
  .first-insight-nudge .button { width:100%; }
}