/* Ratings & reviews UI for the slideshow capsules */

/* Rate-row groups the audio placeholder, rate button, and aggregate.
   `order: 4` puts it after lim-text (1), lim-art (2), audio-soon (3) when
   the parent .lim.spread uses flex order. */
.lw-rate-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.35rem, 1.2vw, 0.65rem);
  margin-top: clamp(0.6rem, 2vw, 1.1rem);
  order: 4;
  width: 100%;
}

/* Rate button — small pill matching the dark ink scheme */
.lw-rate-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--ink, #2b2724);
  background: transparent;
  color: var(--ink, #2b2724);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(0.78rem, 2.1vw, 0.9rem);
  letter-spacing: 0.04em;
  padding: 0.4rem 0.75rem 0.4rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.lw-rate-btn:hover {
  background: var(--ink, #2b2724);
  color: #fff5dc;
  transform: translateY(-1px);
}
.lw-rate-btn.is-rated {
  background: rgba(43, 39, 36, 0.08);
}
.lw-star-icon {
  font-size: 1em;
  line-height: 1;
  color: #b8860b;
}
.lw-rate-btn .lw-star-icon { color: currentColor; }
.lw-rate-btn:hover .lw-star-icon { color: #f7c948; }

/* Share button — same pill aesthetic as rate button, slightly different accent */
.lw-share-btn {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--ink, #2b2724);
  background: transparent;
  color: var(--ink, #2b2724);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(0.78rem, 2.1vw, 0.9rem);
  letter-spacing: 0.04em;
  padding: 0.4rem 0.75rem 0.4rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.lw-share-btn:hover {
  background: var(--ink, #2b2724);
  color: #fff5dc;
  transform: translateY(-1px);
}
.lw-share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.lw-share-icon svg { display: block; }

/* Footnotes button — same pill shape as Rate/Share, classic editorial blue */
.lw-footnote-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #1a2348;
  background: #1a2348;
  color: #fff;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(0.78rem, 2.1vw, 0.9rem);
  letter-spacing: 0.04em;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1;
  transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.lw-footnote-btn:hover {
  background: #0f1830;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px rgba(26, 35, 72, 0.6);
}
.lw-footnote-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 35, 72, 0.35);
}

/* "no footnote" state — muted gray pill, still tappable to open editor. */
.lw-footnote-btn--empty {
  border-color: #b8b6b0;
  background: #b8b6b0;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}
.lw-footnote-btn--empty:hover {
  background: #a09e98;
  border-color: #a09e98;
  box-shadow: 0 6px 16px -8px rgba(120, 118, 112, 0.6);
}
.lw-footnote-btn--empty:focus-visible {
  box-shadow: 0 0 0 3px rgba(120, 118, 112, 0.35);
}

/* Footnotes modal body — match the .ss-footnote-intro card at top of page */
.lw-footnote-body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.55;
  color: #2b1d12;
  text-align: left;
  white-space: pre-wrap;
  margin: 0;
}
.lw-footnote-body.is-empty {
  font-style: italic;
  color: var(--ink-soft, #4a423b);
  text-align: center;
}

/* Read-only footnote drawer — appears in the capsule flow directly below
   the pill row when the Footnotes pill is tapped. No modal, no overlay. */
.lw-footnote-drawer {
  position: relative;
  margin: 10px 0 4px;
  padding: 12px 44px 12px 14px;
  background: #c4c4c4;
  border: 1px solid #a0a0a0;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16), 0 28px 50px rgba(0, 0, 0, 0.34);
  animation: lw-drawer-in 200ms ease-out;
  /* Match .lw-rate-row order+1 so it always sits below the pill row inside
     the flex-order layout of .lim.spread. */
  order: 5;
  width: 100%;
  max-width: 38rem;
  align-self: center;
}
@keyframes lw-drawer-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lw-footnote-drawer-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #6b5d4a;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lw-footnote-drawer-close:hover,
.lw-footnote-drawer-close:focus-visible {
  background: rgba(0, 0, 0, 0.06);
  color: #2b1d12;
  outline: none;
}

/* Toast that appears next to share button on copy fallback */
.lw-share-toast {
  position: absolute;
  transform: translate(-50%, -130%);
  left: 50%;
  background: var(--ink, #2b2724);
  color: #fff5dc;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  box-shadow: 0 10px 24px -10px rgba(20,17,14,.55);
  pointer-events: none;
  opacity: 0;
  animation: lw-toast-in 160ms ease-out forwards;
  white-space: nowrap;
  z-index: 50;
}
.lw-share-toast.is-out { animation: lw-toast-out 400ms ease-in forwards; }
@keyframes lw-toast-in { from { opacity: 0; transform: translate(-50%, -110%);} to { opacity: 1; transform: translate(-50%, -130%);} }
@keyframes lw-toast-out { from { opacity: 1; transform: translate(-50%, -130%);} to { opacity: 0; transform: translate(-50%, -150%);} }

/* Aggregate display */
.lw-aggregate {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(0.78rem, 2.1vw, 0.9rem);
  color: var(--ink-soft, #4a423b);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.lw-aggregate.is-empty { display: none; }
.lw-aggregate .lw-star.is-filled { color: #d4a52a; }
.lw-aggregate .lw-avg { font-weight: 700; color: var(--ink, #2b2724); }
.lw-aggregate .lw-count { color: var(--ink-faint, #837a72); }

/* ---- Modal ---- */
.lw-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(20, 17, 14, 0.55);
  z-index: 2147483000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: lw-fade-in 160ms ease-out;
}
@media (min-height: 720px) {
  .lw-modal-backdrop { align-items: center; }
}
@keyframes lw-fade-in { from { opacity: 0; } to { opacity: 1; } }

.lw-modal-panel {
  background: #fffaf0;
  border: 1px solid #2b2724;
  border-radius: 12px;
  padding: clamp(1.2rem, 4vw, 2rem);
  max-width: 460px;
  width: 100%;
  box-shadow: 0 30px 60px -20px rgba(20,17,14,.45);
  animation: lw-pop-in 200ms cubic-bezier(.2,.7,.3,1);
  /* Let the overlay scroll instead of the panel — iOS Safari handles
     overlay scroll better than inner-scroll on tall content. */
  margin: auto 0;
}
@keyframes lw-pop-in { from { transform: translateY(8px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }

.lw-modal-content {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  text-align: center;
}
.lw-modal-title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 3.4vw, 1.5rem);
  margin: 0;
  color: var(--ink, #2b2724);
}
.lw-modal-sub {
  margin: 0;
  color: var(--ink-soft, #4a423b);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.95rem;
}
.lw-modal-status {
  margin: 0;
  min-height: 1.2em;
  color: var(--ink-soft, #4a423b);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.88rem;
}

/* Star rows */
.lw-stars {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin: 0.2rem auto;
}
.lw-stars .lw-star {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: clamp(2rem, 7vw, 2.6rem);
  line-height: 1;
  color: rgba(43, 39, 36, 0.25);
  padding: 0.1rem 0.25rem;
  border-radius: 6px;
  transition: transform 100ms ease, color 100ms ease;
}
.lw-stars-picker .lw-star:hover,
.lw-stars-picker .lw-star:focus-visible { transform: scale(1.08); outline: none; }
.lw-stars-picker .lw-star:focus-visible { box-shadow: 0 0 0 3px rgba(212, 165, 42, 0.35); }
.lw-stars .lw-star.is-filled { color: #d4a52a; }
.lw-stars-static .lw-star { cursor: default; font-size: clamp(1.3rem, 4vw, 1.7rem); }

/* Textarea */
.lw-textarea {
  width: 100%;
  border: 1px solid rgba(43,39,36,.45);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.45;
  resize: vertical;
  min-height: 120px;
  background: #fff;
  color: var(--ink, #2b2724);
  box-sizing: border-box;
}
.lw-textarea:focus { outline: none; border-color: #2b2724; box-shadow: 0 0 0 3px rgba(212,165,42,0.25); }

/* Buttons */
.lw-modal-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}
.lw-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--ink, #2b2724);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease, color 140ms ease;
}
.lw-btn-primary { background: var(--ink, #2b2724); color: #fff5dc; }
.lw-btn-primary:hover { background: #1a1714; transform: translateY(-1px); }
.lw-btn-ghost { background: transparent; color: var(--ink, #2b2724); }
.lw-btn-ghost:hover { background: rgba(43,39,36,.08); }

/* ---------- Footnote editor (?editor=1) ---------- */
.lw-footnote-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 8.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(43, 39, 36, 0.35);
  border-radius: 14px;
  background: #fffbef;
  color: #2b1d12;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.55;
  resize: vertical;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.lw-footnote-input:focus {
  border-color: #1a2348;
  box-shadow: 0 0 0 3px rgba(26, 35, 72, 0.18);
}
.lw-footnote-input::placeholder {
  color: rgba(43, 39, 36, 0.45);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.lw-editor-status {
  min-height: 1.2em;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 0.82rem;
  text-align: center;
  color: rgba(43, 39, 36, 0.72);
}
.lw-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

/* ---------- Two-tile joke prompt ---------- */
.lw-tiles {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-direction: column; /* Mobile-first: stacked */
}
@media (min-width: 480px) {
  .lw-tiles { flex-direction: row; }
  .lw-tiles > * { flex: 1 1 0; }
}
.lw-tile {
  appearance: none;
  border: none;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  line-height: 1.05;
  transition: transform .08s ease, box-shadow .08s ease, filter .08s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 76px;
}
.lw-tile-line1 {
  font-size: 1.55rem;
  letter-spacing: .01em;
}
.lw-tile-line2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 0.05rem;
  opacity: 0.9;
}
.lw-tile:active { transform: translateY(1px); }
.lw-tile:focus-visible { outline: 3px solid rgba(0,0,0,.35); outline-offset: 2px; }
.lw-tile-danger {
  background: #b81d1d;
  color: #fff5dc;
}
.lw-tile-danger:hover { filter: brightness(1.05); }
.lw-tile-safe {
  background: #efe6d0;
  color: #2b2724;
  border: 1px solid rgba(60,40,22,0.25);
}
.lw-tile-safe:hover { background: #f6efdc; }

/* ---------- Editor extras ---------- */
.lw-char-counter {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.05rem;
  color: #6b5c48;
  text-align: right;
  margin-top: 0.25rem;
}
.lw-char-counter.is-near-limit { color: #b81d1d; }
.lw-clear-link {
  appearance: none;
  background: transparent;
  border: none;
  color: #6b5c48;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.1rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.5rem;
  margin: 0.75rem auto 0;
  display: block;
}
.lw-clear-link:hover { color: #2b2724; }
.lw-clear-link:disabled { opacity: 0.5; cursor: default; }