/* ============================================================
   ui-anima-playground.css — "Say anything" prompt playground.
   Scoped under .ua-play-* · chrome (chips, window frame, status)
   uses site tokens (warm-light theme). The mini page INSIDE the
   window is "someone else's website" — each skin carries its own
   literal palette, so it may go dark or pastel while the site
   around it stays cream.
   ============================================================ */
.ua-play {
  display: grid; grid-template-columns: minmax(240px, 305px) minmax(0, 1fr);
  gap: 28px; align-items: stretch; margin-top: var(--space-xl, 48px);
  font-family: var(--font-sans, sans-serif); color: var(--color-text, #1a1a17);
}

/* ---- prompt chips ------------------------------------------ */
.ua-play-side { display: flex; flex-direction: column; min-width: 0; }
.ua-play-side-h { font: 600 12px/1 var(--font-mono, monospace); letter-spacing: .11em; text-transform: uppercase; color: var(--color-muted, #6c6b61); margin: 0 0 12px; }
.ua-play-chips { display: flex; flex-direction: column; gap: 8px; }
.ua-play-chip {
  text-align: left; font: 500 13px/1.35 var(--font-sans, sans-serif); letter-spacing: -.01em;
  border: 1px solid var(--color-border, #e0ddd1); background: var(--color-bg, #f5f4ef);
  color: var(--color-text, #1a1a17); border-radius: 10px; padding: 9px 13px; cursor: pointer;
  transition: border-color .25s, background-color .25s, color .25s;
}
.ua-play-chip::before { content: "\201C"; color: var(--color-muted, #6c6b61); }
.ua-play-chip::after  { content: "\201D"; color: var(--color-muted, #6c6b61); }
.ua-play-chip:hover { border-color: var(--accent, #d9542b); color: var(--accent, #d9542b); }
.ua-play-chip:focus-visible { outline: 2px solid var(--accent, #d9542b); outline-offset: 2px; }
.ua-play-chip.ua-play-act { border-color: var(--accent, #d9542b); background: var(--accent-soft, rgba(217,84,43,.1)); color: var(--accent, #d9542b); }
.ua-play-chip.ua-play-act::before, .ua-play-chip.ua-play-act::after { color: var(--accent, #d9542b); }

/* ---- window + status --------------------------------------- */
.ua-play-main { min-width: 0; display: flex; flex-direction: column; }
.ua-play-win {
  display: flex; flex-direction: column; height: 390px;
  border: 1px solid var(--color-border, #e0ddd1); border-radius: var(--radius-lg, 10px);
  overflow: hidden; background: var(--color-bg, #f5f4ef);
  box-shadow: var(--shadow-lg, 0 24px 60px -20px rgba(26,26,23,.14));
}
.ua-play-tb { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--color-surface, #eae7dd); border-bottom: 1px solid var(--color-border, #e0ddd1); }
.ua-play-tb-dots { display: flex; gap: 5px; flex: none; }
.ua-play-tb-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border, #e0ddd1); }
.ua-play-tb-url { flex: 1; min-width: 0; max-width: 280px; margin: 0 auto; text-align: center; font-family: var(--font-mono, monospace); font-size: 12px; color: var(--color-muted, #6c6b61); border: 1px solid var(--color-border, #e0ddd1); background: var(--color-surface, #eae7dd); border-radius: 999px; padding: 3px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ua-play-status { margin: 12px 0 0; min-height: 16px; text-align: center; font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .02em; color: var(--color-muted, #6c6b61); }
.ua-play-s { opacity: 0; transition: opacity .28s; }
.ua-play-s + .ua-play-s { margin-left: 6px; }
.ua-play-s.ua-play-s-on { opacity: 1; }
.ua-play-s b { font-weight: 600; color: var(--color-text, #1a1a17); }

/* ---- the mini page (base skeleton) ------------------------- */
.ua-play-page { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px 16px 11px; overflow: hidden; transition: background-color .4s ease, color .4s ease; }
.ua-play-head { flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; transition: border-color .4s, padding .4s; }
.ua-play-mark { flex: none; width: 10px; height: 10px; border-radius: 3px; transition: all .4s; }
.ua-play-site { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .4s, font-size .4s, letter-spacing .4s; }
.ua-play-tag { flex: none; margin-left: auto; white-space: nowrap; transition: all .4s; }
.ua-play-notes { flex: 1; min-height: 0; overflow: hidden; align-content: start; margin: 10px 0; transition: gap .4s; }
.ua-play-note { min-width: 0; transition: background-color .4s, border-color .4s, padding .4s, border-radius .4s; }
.ua-play-n-m, .ua-play-n-t, .ua-play-n-b { display: block; transition: color .4s, font-size .4s; }
.ua-play-btn { flex: none; align-self: flex-start; cursor: default; user-select: none; white-space: nowrap; transition: all .4s; }

/* ---- skin · plain (the original page) ---------------------- */
.ua-play-skin-plain { background: #ffffff; color: #22261e; }
.ua-play-skin-plain .ua-play-mark { background: #4a8b57; }
.ua-play-skin-plain .ua-play-site { font-size: 14px; font-weight: 600; color: #22261e; }
.ua-play-skin-plain .ua-play-tag { font-size: 12px; color: #6d7265; background: #f0f1ec; border-radius: 999px; padding: 4px 9px; }
.ua-play-skin-plain .ua-play-notes { display: flex; flex-direction: column; gap: 8px; }
.ua-play-skin-plain .ua-play-note { background: #fdfdfb; border: 1px solid #e6e7e0; border-radius: 8px; padding: 6px 11px; }
.ua-play-skin-plain .ua-play-n-m { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #878b7d; }
.ua-play-skin-plain .ua-play-n-t { font-size: 13.5px; font-weight: 600; color: #22261e; margin: 2px 0 1px; }
.ua-play-skin-plain .ua-play-n-b { font-size: 12.5px; line-height: 1.4; color: #5d6156; }
.ua-play-skin-plain .ua-play-btn { background: #3f7a4c; color: #ffffff; font-size: 12.5px; font-weight: 600; border-radius: 8px; padding: 7px 12px; }

/* ---- skin · print newspaper -------------------------------- */
.ua-play-skin-news { background: #f6f1e3; color: #241f14; }
.ua-play-skin-news .ua-play-head { display: block; text-align: center; border-bottom: 3px double #a4966f; padding-bottom: 8px; }
.ua-play-skin-news .ua-play-mark { display: none; }
.ua-play-skin-news .ua-play-site { display: block; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 17px; letter-spacing: .1em; text-transform: uppercase; color: #241f14; }
.ua-play-skin-news .ua-play-tag { display: inline-block; margin: 4px 0 0; font-family: Georgia, serif; font-style: italic; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8a7c58; background: transparent; padding: 0; }
.ua-play-skin-news .ua-play-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
.ua-play-skin-news .ua-play-note { border-top: 1px solid #d3c7a4; padding-top: 8px; }
.ua-play-skin-news .ua-play-n-m { font-family: Georgia, serif; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8a7c58; }
.ua-play-skin-news .ua-play-n-t { font-family: Georgia, serif; font-size: 14.5px; line-height: 1.2; font-weight: 700; color: #241f14; margin: 3px 0; }
.ua-play-skin-news .ua-play-n-b { font-family: Georgia, serif; font-size: 12.5px; line-height: 1.5; color: #5c5138; }
.ua-play-skin-news .ua-play-btn { align-self: center; background: transparent; border: 1px solid #b3a377; border-radius: 0; font-family: Georgia, serif; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #6d6041; padding: 5px 12px; }

/* ---- skin · calm dark dashboard ---------------------------- */
.ua-play-skin-dark { background: #15171c; color: #d6dae2; }
.ua-play-skin-dark .ua-play-mark { width: 8px; height: 8px; border-radius: 2px; background: #7fa8c9; }
.ua-play-skin-dark .ua-play-site { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #aeb6c2; }
.ua-play-skin-dark .ua-play-tag { font-family: var(--font-mono, monospace); font-size: 12px; color: #8b93a1; background: #1d2027; border: 1px solid #2a2f38; border-radius: 6px; padding: 4px 8px; }
.ua-play-skin-dark .ua-play-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ua-play-skin-dark .ua-play-note { background: #1b1e24; border: 1px solid #272c35; border-radius: 12px; padding: 11px 12px; }
.ua-play-skin-dark .ua-play-n-m { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #7fa8c9; }
.ua-play-skin-dark .ua-play-n-t { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; color: #e8ebf0; margin: 5px 0 3px; }
.ua-play-skin-dark .ua-play-n-b { font-size: 12.5px; line-height: 1.5; color: #98a0ad; }
.ua-play-skin-dark .ua-play-note::after { content: ""; display: block; height: 3px; border-radius: 2px; margin-top: 10px; background: linear-gradient(90deg, #7fa8c9 0 62%, #272c35 62%); }
.ua-play-skin-dark .ua-play-note:nth-child(2)::after { background: linear-gradient(90deg, #7fa8c9 0 38%, #272c35 38%); }
.ua-play-skin-dark .ua-play-note:nth-child(3)::after { background: linear-gradient(90deg, #7fa8c9 0 81%, #272c35 81%); }
.ua-play-skin-dark .ua-play-btn { background: #7fa8c9; color: #10141a; font-size: 12.5px; font-weight: 600; border-radius: 8px; padding: 7px 12px; }

/* ---- skin · museum reading gallery ------------------------- */
.ua-play-skin-gallery { background: #faf7ef; color: #26221a; }
.ua-play-skin-gallery .ua-play-head { border-bottom: 1px solid #ddd5bd; padding-bottom: 8px; }
.ua-play-skin-gallery .ua-play-mark { display: none; }
.ua-play-skin-gallery .ua-play-site { font-family: Georgia, serif; font-style: italic; font-size: 18px; letter-spacing: .02em; color: #26221a; }
.ua-play-skin-gallery .ua-play-tag { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #6f6544; background: #f2edda; border-radius: 999px; padding: 4px 9px; }
.ua-play-skin-gallery .ua-play-notes { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0 22px; }
.ua-play-skin-gallery .ua-play-note { border-top: 1px solid #e5deca; padding: 8px 0; }
.ua-play-skin-gallery .ua-play-note:first-child { grid-row: span 2; border-top: none; background: #fffdf4; border: 1px solid #e5deca; border-radius: 4px; padding: 14px 16px; margin: 2px 0; }
.ua-play-skin-gallery .ua-play-n-m { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #948a68; }
.ua-play-skin-gallery .ua-play-n-t { font-family: Georgia, serif; font-size: 14px; line-height: 1.25; font-weight: 700; color: #26221a; margin: 3px 0; }
.ua-play-skin-gallery .ua-play-note:first-child .ua-play-n-t { font-size: 18px; line-height: 1.2; }
.ua-play-skin-gallery .ua-play-n-b { font-family: Georgia, serif; font-size: 12.5px; line-height: 1.55; color: #5e5640; }
.ua-play-skin-gallery .ua-play-note:not(:first-child) .ua-play-n-b { display: none; }
.ua-play-skin-gallery .ua-play-btn { background: transparent; border: 1px solid #d5cdb2; border-radius: 999px; font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #6f6544; padding: 5px 12px; }

/* ---- skin · terminal (tasteful near-black) ----------------- */
.ua-play-skin-term { background: #0c110d; color: #c6e8cd; font-family: var(--font-mono, monospace); }
.ua-play-skin-term .ua-play-head { border-bottom: 1px solid #1c2a1f; padding-bottom: 8px; }
.ua-play-skin-term .ua-play-mark { width: 8px; height: 8px; border-radius: 1px; background: #74e08c; }
.ua-play-skin-term .ua-play-site { font-size: 12.5px; text-transform: lowercase; color: #8fd99b; }
.ua-play-skin-term .ua-play-site::before { content: "$ "; color: #5e8168; }
.ua-play-skin-term .ua-play-tag { font-size: 12px; color: #5e8168; background: transparent; padding: 0; }
.ua-play-skin-term .ua-play-tag::before { content: "["; }
.ua-play-skin-term .ua-play-tag::after { content: "]"; }
.ua-play-skin-term .ua-play-notes { display: flex; flex-direction: column; gap: 8px; }
.ua-play-skin-term .ua-play-n-m { font-size: 12px; letter-spacing: .04em; color: #57a06a; }
.ua-play-skin-term .ua-play-n-m::before { content: "# "; color: #3f5c46; }
.ua-play-skin-term .ua-play-n-t { font-size: 13px; color: #cdeed3; margin: 1px 0; }
.ua-play-skin-term .ua-play-n-t::before { content: "> "; color: #74e08c; }
.ua-play-skin-term .ua-play-n-b { font-size: 12.5px; line-height: 1.5; color: #7fa387; }
.ua-play-skin-term .ua-play-btn { background: #111a13; border: 1px solid #2a3c2e; border-radius: 4px; font-size: 12.5px; color: #74e08c; padding: 6px 10px; }
.ua-play-skin-term .ua-play-btn::after { content: "▊"; margin-left: 6px; animation: ua-play-blink 1.1s steps(1) infinite; }
@keyframes ua-play-blink { 50% { opacity: 0; } }

/* ---- skin · pastel weekend journal ------------------------- */
.ua-play-skin-pastel { background: #faf3f8; color: #4b4356; }
.ua-play-skin-pastel .ua-play-mark { width: 10px; height: 10px; border-radius: 50%; background: #f3b8cc; }
.ua-play-skin-pastel .ua-play-site { font-size: 14px; font-weight: 700; color: #7a5c86; }
.ua-play-skin-pastel .ua-play-tag { font-size: 12px; color: #8a6d99; background: #f1e7f7; border-radius: 999px; padding: 4px 9px; }
.ua-play-skin-pastel .ua-play-notes { display: flex; flex-direction: column; gap: 8px; }
.ua-play-skin-pastel .ua-play-note { border-radius: 14px; padding: 5px 12px; background: #e9f5ec; border: 1px solid #d3e9da; }
.ua-play-skin-pastel .ua-play-note:nth-child(2) { background: #fdf4dd; border-color: #f2e3ba; }
.ua-play-skin-pastel .ua-play-note:nth-child(3) { background: #edeafb; border-color: #d9d3f0; }
.ua-play-skin-pastel .ua-play-n-m { font-size: 12px; line-height: 1.3; text-transform: uppercase; letter-spacing: .06em; color: #64997a; }
.ua-play-skin-pastel .ua-play-note:nth-child(2) .ua-play-n-m { color: #a8863c; }
.ua-play-skin-pastel .ua-play-note:nth-child(3) .ua-play-n-m { color: #7a71b3; }
.ua-play-skin-pastel .ua-play-n-t { font-size: 13.5px; font-weight: 700; color: #4b4356; margin: 1px 0 0; }
.ua-play-skin-pastel .ua-play-n-b { font-size: 12.5px; line-height: 1.35; color: #6f677c; }
.ua-play-skin-pastel .ua-play-btn { background: #f3b8cc; color: #71394f; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 7px 14px; }

/* ---- skin · big type, high contrast ------------------------ */
.ua-play-skin-contrast { background: #ffffff; color: #000000; }
.ua-play-skin-contrast .ua-play-head { border-bottom: 4px solid #000000; padding-bottom: 8px; }
.ua-play-skin-contrast .ua-play-mark { display: none; }
.ua-play-skin-contrast .ua-play-site { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: #000000; }
.ua-play-skin-contrast .ua-play-tag { background: #000000; color: #ffffff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-radius: 0; padding: 4px 8px; }
.ua-play-skin-contrast .ua-play-notes { display: flex; flex-direction: column; gap: 0; }
.ua-play-skin-contrast .ua-play-note { border-bottom: 2px solid #000000; padding: 7px 0; }
.ua-play-skin-contrast .ua-play-n-m { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #000000; }
.ua-play-skin-contrast .ua-play-n-t { font-size: 17.5px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: #000000; margin: 2px 0 0; }
.ua-play-skin-contrast .ua-play-n-b { display: none; }
.ua-play-skin-contrast .ua-play-btn { background: #000000; color: #ffffff; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border-radius: 0; padding: 9px 14px; }

/* ---- skin · compact data table ----------------------------- */
.ua-play-skin-table { background: #fbfbf7; color: #33362e; }
.ua-play-skin-table .ua-play-head { border-bottom: 1px solid #d9d9cd; padding-bottom: 7px; }
.ua-play-skin-table .ua-play-mark { width: 7px; height: 7px; border-radius: 1px; background: #9a9d90; }
.ua-play-skin-table .ua-play-site { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #4a4d42; }
.ua-play-skin-table .ua-play-tag { font-family: var(--font-mono, monospace); font-size: 12px; color: #85897b; background: transparent; border: 1px solid #d9d9cd; border-radius: 4px; padding: 3px 7px; }
.ua-play-skin-table .ua-play-notes { display: flex; flex-direction: column; gap: 0; margin: 10px 0; }
.ua-play-skin-table .ua-play-notes::before { content: "entry log — 3 rows"; font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #85897b; display: block; padding: 2px 4px 6px; border-bottom: 1px solid #d9d9cd; }
.ua-play-skin-table .ua-play-note { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 10px; padding: 5px 4px; border-bottom: 1px solid #e4e4d9; }
.ua-play-skin-table .ua-play-note:nth-child(odd) { background: #f3f3ea; }
.ua-play-skin-table .ua-play-n-m { grid-column: 1; font-family: var(--font-mono, monospace); font-size: 12px; color: #85897b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 2px; }
.ua-play-skin-table .ua-play-n-t { grid-column: 2; font-family: var(--font-mono, monospace); font-size: 12.5px; font-weight: 500; color: #33362e; }
.ua-play-skin-table .ua-play-n-b { grid-column: 2; font-family: var(--font-mono, monospace); font-size: 12px; color: #7c8071; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ua-play-skin-table .ua-play-btn { font-family: var(--font-mono, monospace); font-size: 12px; background: #f0f0e6; border: 1px solid #c9c9bb; border-radius: 4px; color: #4a4d42; padding: 5px 9px; }

/* ---- reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ua-play-page, .ua-play-head, .ua-play-mark, .ua-play-site, .ua-play-tag,
  .ua-play-notes, .ua-play-note, .ua-play-n-m, .ua-play-n-t, .ua-play-n-b,
  .ua-play-btn, .ua-play-chip, .ua-play-s { transition: none; }
  .ua-play-skin-term .ua-play-btn::after { animation: none; }
  .ua-play-s { opacity: 1; }
}

/* ---- responsive -------------------------------------------- */
@media (max-width: 900px) {
  .ua-play { grid-template-columns: 1fr; gap: 18px; }
  .ua-play-side { order: 2; }
  .ua-play-main { order: 1; }
  .ua-play-chips { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .ua-play-chip { flex: 0 1 auto; font-size: 12.5px; padding: 8px 11px; }
  .ua-play-side-h { margin-bottom: 10px; }
}
@media (max-width: 640px) {
  .ua-play-skin-news .ua-play-notes, .ua-play-skin-dark .ua-play-notes, .ua-play-skin-gallery .ua-play-notes { grid-template-columns: 1fr; gap: 8px; }
  .ua-play-skin-gallery .ua-play-note:first-child { grid-row: auto; }
  .ua-play-skin-news .ua-play-site { font-size: 14px; letter-spacing: .06em; }
  .ua-play-page .ua-play-n-b { display: none; }
  .ua-play-skin-term .ua-play-n-b { display: block; }
  .ua-play-skin-dark .ua-play-note { padding: 8px 11px; }
  .ua-play-skin-dark .ua-play-note::after { margin-top: 7px; }
  .ua-play-skin-contrast .ua-play-n-t { font-size: 16px; }
  .ua-play-skin-table .ua-play-note { grid-template-columns: 88px minmax(0, 1fr); }
  .ua-play-tb-url { max-width: 200px; }
}

/* honest-label caption under the status line */
.ua-play-note-cap { margin-top: 6px; text-align: center; font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .02em; color: var(--color-muted, #6c6b61); }