/* =============================================================================
   HUEMARK — Studio workspace + "Start Free" transition
   Layers over the landing artwork (.scene). Panels are always dark glass so the
   text stays legible regardless of the landing page theme.
   ============================================================================= */

html { cursor: url("assets/brush-cursor.svg") 4 28, auto; }
input, textarea, select { cursor: text; }

.studio {
  --s-panel: rgba(16, 23, 19, .82);
  --s-line: rgba(220, 235, 215, .16);
  --s-primary: #A8E063;
  --s-primary-strong: #83C944;
  --s-text: #F5F3E9;
  --s-muted: #B5B9AE;
  --s-surface: rgba(255, 255, 255, .07);
  --s-focus: #D8F58A;
  --ease: cubic-bezier(.22, 1, .36, 1);

  position: absolute; inset: 0; z-index: 8;
  display: flex; flex-direction: column;
  overflow-x: hidden; overflow-y: auto;
  color: var(--s-text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  visibility: hidden; pointer-events: none;
  scrollbar-width: thin; scrollbar-color: rgba(168,224,99,.4) transparent;
}
.studio__scrim {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,10,7,.88) 0, rgba(6,13,9,.62) 34%, rgba(8,13,11,.28) 70%, rgba(8,13,11,.4) 100%),
    radial-gradient(120% 80% at 100% 100%, rgba(0,0,0,0) 40%, rgba(5,9,6,.55) 100%);
}
.studio .ico { width: 1.25rem; height: 1.25rem; flex: none; }

/* ---------- Header ---------- */
.st-head {
  display: flex; align-items: center; gap: 1rem;
  padding: clamp(.6rem, 2dvh, 1.1rem) clamp(.9rem, 2.2vw, 2rem) .2rem;
}
.st-brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--s-primary); text-decoration: none; border-radius: 10px; }
.st-brand .ico { width: 2rem; height: 2rem; transform: rotate(-8deg); filter: drop-shadow(0 0 10px rgba(168,224,99,.45)); }
.st-logo { font-family: "Kaushan Script", cursive; font-size: 2rem; color: var(--s-text); line-height: 1; }
.st-crumb {
  margin: .35rem 0 0; padding: .15rem .7rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--s-muted); border: 1px solid var(--s-line); border-radius: 999px; background: rgba(0,0,0,.25);
}
.studio a:focus-visible, .studio button:focus-visible, .studio input:focus-visible,
.studio select:focus-visible, .studio textarea:focus-visible, .studio .mc__swatch:focus-within {
  outline: 2px solid var(--s-focus); outline-offset: 2px;
}

/* ---------- Grid + panels ---------- */
.st-grid {
  flex: 1; min-height: 0;
  display: grid; gap: clamp(.7rem, 1.4vw, 1.25rem);
  grid-template-columns: minmax(270px, 320px) minmax(0, 1fr) minmax(330px, 410px);
  padding: .6rem clamp(.9rem, 2.2vw, 2rem) .4rem;
}
.panel {
  min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: .7rem;
  padding: 1.05rem 1.1rem 1.1rem;
  background: var(--s-panel); border: 1px solid var(--s-line);
  border-radius: 22px;
  backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 18px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  scrollbar-width: thin; scrollbar-color: rgba(168,224,99,.35) transparent;
}
.panel__bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.panel__title { margin: 0; display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; font-weight: 700; color: var(--s-text); }
.panel__title .ico { color: var(--s-primary); }

.lbl { margin: .35rem 0 -.1rem; font-size: .88rem; font-weight: 700; color: var(--s-text); display: block; }
.lbl small { font-weight: 400; color: var(--s-muted); }
.note { margin: 0; font-size: .8rem; color: var(--s-muted); min-height: 1.1em; }
.note.is-bad { color: #ffb4a2; }
.note.is-ok { color: var(--s-primary); }
.err { margin: -.3rem 0 0; font-size: .8rem; color: #ffb4a2; min-height: 0; }
.err:empty { display: none; }

/* Inputs */
.input {
  width: 100%; box-sizing: border-box; padding: .62rem .8rem; font: inherit; font-size: .92rem;
  color: var(--s-text); background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 12px;
  color-scheme: dark;
}
.input::placeholder { color: rgba(181,185,174,.7); }
textarea.input { resize: vertical; min-height: 4.5rem; }
.input--sm { padding: .3rem .5rem; font-size: .8rem; width: auto; }
select.input option { background: #16201a; color: #F5F3E9; }

/* Main colour */
.mc { display: flex; gap: .8rem; align-items: center; }
.mc__swatch {
  position: relative; width: 4.3rem; height: 4.3rem; border-radius: 14px; flex: none; cursor: pointer;
  background: var(--main, #A8E063); border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 0 22px color-mix(in srgb, var(--main, #A8E063) 50%, transparent);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.mc__swatch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.mc__fields { flex: 1; min-width: 0; }
.field-hex {
  display: flex; align-items: center; background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 12px; padding-inline-end: .25rem;
}
.field-hex input {
  flex: 1; min-width: 0; background: none; border: 0; color: var(--s-text); font: inherit; font-family: Consolas, "Cascadia Mono", monospace;
  font-size: .95rem; padding: .6rem .7rem; text-transform: uppercase;
}
.field-hex.is-bad { border-color: #ff8f78; }
.icon-btn {
  display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; cursor: pointer; flex: none;
  border: 0; border-radius: 8px; background: none; color: var(--s-muted);
}
.icon-btn:hover { color: var(--s-primary); background: rgba(255,255,255,.07); }
.icon-btn svg { width: 1.1rem; height: 1.1rem; }
.mc__name { margin: .3rem 0 0 .2rem; color: var(--s-muted); font-size: .88rem; }
.chips-q { display: flex; gap: .55rem; flex-wrap: wrap; }
.chips-q button {
  width: 1.7rem; height: 1.7rem; border-radius: 50%; padding: 0; cursor: pointer; background: var(--c);
  border: 2px solid rgba(255,255,255,.25); transition: transform .15s ease;
}
.chips-q button:hover { transform: scale(1.14); }
.chips-q button[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px rgba(168,224,99,.7); }

/* Segmented */
.seg { display: flex; border: 1px solid var(--s-line); border-radius: 12px; background: rgba(0,0,0,.22); padding: 3px; gap: 2px; }
.seg button {
  flex: 1; padding: .45rem .3rem; border: 0; border-radius: 9px; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 600;
  background: none; color: var(--s-muted); transition: background-color .2s ease, color .2s ease;
}
.seg button:hover { color: var(--s-text); }
.seg button[aria-checked="true"], .seg button[aria-pressed="true"], .seg button[aria-selected="true"] {
  background: var(--s-primary); color: #14200a; box-shadow: 0 0 14px rgba(168,224,99,.45);
}
.seg--pill { border-radius: 999px; }
.seg--pill button { border-radius: 999px; padding: .4rem .9rem; flex: none; }

/* Mood chips */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips button {
  padding: .32rem .75rem; border-radius: 999px; font: inherit; font-size: .82rem; cursor: pointer;
  color: var(--s-text); background: var(--s-surface); border: 1px solid var(--s-line); transition: all .18s ease;
}
.chips button:hover { border-color: rgba(168,224,99,.6); }
.chips button[aria-pressed="true"] { background: var(--s-primary); color: #14200a; border-color: transparent; font-weight: 700; }

/* Buttons */
.actions { display: grid; gap: .55rem; margin-top: auto; padding-top: .4rem; }
.actions--row { grid-template-columns: 1fr auto; }
.btn-go, .btn-ghost {
  font: inherit; font-weight: 700; font-size: .98rem; padding: .75rem 1rem; border-radius: 14px; cursor: pointer;
  transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
}
.btn-go {
  border: 0; color: #14200a; background: linear-gradient(180deg, #B7EC72, var(--s-primary-strong));
  box-shadow: 0 0 22px rgba(168,224,99,.4), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-go:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-ghost { color: var(--s-text); background: rgba(255,255,255,.05); border: 1px solid var(--s-line); }
.btn-ghost:hover { border-color: rgba(168,224,99,.6); background: rgba(255,255,255,.09); }
.btn-ghost[disabled], .btn-go[disabled] { opacity: .6; cursor: progress; }

/* ---------- Palette cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: .9rem; align-content: start; }
.card {
  position: relative; display: flex; flex-direction: column; gap: .4rem; text-align: start; font: inherit; color: var(--s-text);
  padding: .6rem .6rem .75rem; border-radius: 16px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid var(--s-line);
  transition: transform .2s var(--ease), border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.card:hover { transform: translateY(-2px); border-color: rgba(168,224,99,.45); }
.card[aria-pressed="true"] {
  border-color: var(--s-primary); border-width: 2px; padding: calc(.6rem - 1px) calc(.6rem - 1px) calc(.75rem - 1px);
  background: rgba(168,224,99,.08); box-shadow: 0 0 0 3px rgba(168,224,99,.18), 0 0 28px rgba(168,224,99,.28);
}
.sw { display: flex; border-radius: 10px; overflow: hidden; height: 6.4rem; position: relative; }
.sw span {
  flex: 1; display: flex; align-items: flex-end; justify-content: center; padding-bottom: .4rem; min-width: 0;
  font: 700 .68rem Consolas, "Cascadia Mono", monospace; color: var(--fg);
}
.card h3 { margin: .15rem .25rem 0; font-size: 1rem; }
.card p { margin: 0 .25rem; font-size: .84rem; color: var(--s-muted); line-height: 1.35; }
.card__tag { margin: 0 .25rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--s-primary); }
.card__copy { position: absolute; inset-inline-end: .55rem; bottom: .55rem; }
.card__sel {
  position: absolute; top: .95rem; inset-inline-end: .95rem; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: none; place-items: center; background: #14200a; color: var(--s-primary); border: 2px solid var(--s-primary);
}
.card[aria-pressed="true"] .card__sel { display: grid; }
.card__sel svg { width: 1rem; height: 1rem; }
.empty { grid-column: 1 / -1; text-align: center; padding: 2.2rem 1rem; color: var(--s-muted); border: 1px dashed var(--s-line); border-radius: 16px; }
.empty b { display: block; color: var(--s-text); margin-bottom: .3rem; }

/* ---------- Preview ---------- */
.pv {
  --bg: #F7F8F3; --surface: #fff; --text: #142915; --muted: #5A725B; --p: #4C8A50; --s: #8DBB78; --a: #E8B45B; --on-p: #fff; --on-s: #142915;
  background: var(--bg); color: var(--text); border-radius: 16px; padding: .85rem; display: grid; gap: .6rem;
  transition: background-color .35s ease, color .35s ease;
}
.pv__nav { display: flex; align-items: center; justify-content: space-between; background: var(--surface); padding: .45rem .7rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.pv__nav b { color: var(--p); font-size: .92rem; }
.pv__burger { width: 1rem; height: .7rem; background: linear-gradient(var(--muted) 0 0) top/100% 2px no-repeat, linear-gradient(var(--muted) 0 0) center/100% 2px no-repeat, linear-gradient(var(--muted) 0 0) bottom/100% 2px no-repeat; }
.pv__h { margin: .2rem 0 0; font-size: 1.3rem; line-height: 1.15; color: var(--text); }
.pv__p { margin: 0; font-size: .86rem; color: var(--muted); }
.pv__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.pv__btn { padding: .45rem .9rem; border-radius: 999px; font-size: .84rem; font-weight: 700; }
.pv__btn--1 { background: var(--p); color: var(--on-p); }
.pv__btn--2 { background: var(--s); color: var(--on-s); }
.pv__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.pv__card { display: flex; align-items: center; gap: .4rem; background: var(--surface); border-radius: 10px; padding: .45rem .5rem; font-size: .78rem; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.dot { width: .7rem; height: .7rem; border-radius: 50%; flex: none; }
.dot--p { background: var(--p); } .dot--s { background: var(--s); } .dot--a { background: var(--a); }
.pv__contrast { margin: 0; font-size: .72rem; color: var(--muted); }

/* ---------- Output ---------- */
.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--s-line); }
.tabs button {
  font: inherit; font-weight: 600; font-size: .88rem; padding: .45rem .8rem; cursor: pointer; background: none; border: 0;
  color: var(--s-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0;
}
.tabs button[aria-selected="true"] { color: var(--s-primary); border-bottom-color: var(--s-primary); }
.tw-ver { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--s-muted); }
.tw-ver[hidden] { display: none; }
.code {
  flex: 1; min-height: 11rem; box-sizing: border-box; width: 100%; resize: none; padding: .8rem;
  font: .8rem/1.55 Consolas, "Cascadia Mono", monospace; color: #E6F3D4; background: rgba(0,0,0,.4);
  border: 1px solid var(--s-line); border-radius: 14px; tab-size: 2;
}

.st-foot { margin: 0; padding: .4rem 1rem .7rem; display: flex; justify-content: center; align-items: center; gap: .4rem; font-size: .82rem; color: var(--s-muted); }
.st-foot .ico { color: var(--s-primary); width: 1rem; height: 1rem; }
.st-foot strong { color: var(--s-text); }

.toast {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: .6rem 1.1rem; border-radius: 999px; font-size: .9rem; font-weight: 600;
  background: #14200a; color: var(--s-primary); border: 1px solid var(--s-primary); box-shadow: 0 8px 30px rgba(0,0,0,.5);
  transition: opacity .25s ease, transform .35s var(--ease); z-index: 20;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast.is-bad { color: #ffb4a2; border-color: #ffb4a2; }

/* =============================================================================
   TRANSITION  Landing -> Studio
   1. copy column drifts left and fades
   2. a forest-green veil blooms outward from the Start Free button
   3. studio layer appears under the veil, the veil dissolves, panels rise in
   ============================================================================= */
.veil {
  position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0; visibility: hidden;
  --cx: 20%; --cy: 70%;
  background:
    radial-gradient(circle at var(--cx) var(--cy), rgba(168,224,99,.35), transparent 38%),
    linear-gradient(135deg, #07100a, #0f2314 55%, #07100a);
  clip-path: circle(0 at var(--cx) var(--cy));
}
html.st-enter .veil { visibility: visible; opacity: 1; clip-path: circle(150vmax at var(--cx) var(--cy)); transition: clip-path .85s cubic-bezier(.7, 0, .2, 1); }
html.st-on .veil { opacity: 0; transition: opacity .7s ease .1s; }

.hm-stage .copy, .hm-stage .topbar, .hm-stage .scrim, .hm-stage .drift { transition: opacity .55s ease, transform .7s var(--ease, ease), filter .55s ease; }
html.st-enter .copy { opacity: 0; transform: translateX(-60px) scale(.97); filter: blur(6px); pointer-events: none; }
html.st-enter .topbar, html.st-enter .scrim { opacity: 0; pointer-events: none; }
.scene { transition: transform 1.6s cubic-bezier(.22, 1, .36, 1), filter 1.2s ease; }
html.st-on .scene { transform: scale(1.06); filter: saturate(1.1) brightness(.92); }

html.st-on .studio { visibility: visible; pointer-events: auto; }
.st-head, .panel, .st-foot { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(8px); }
html.st-on .st-head, html.st-on .panel, html.st-on .st-foot {
  opacity: 1; transform: none; filter: none;
  transition: opacity .7s ease, transform .9s var(--ease), filter .7s ease;
}
html.st-on .st-head { transition-delay: .1s; }
html.st-on .panel { transition-delay: calc(.22s + var(--i, 0) * .13s); }
html.st-on .st-foot { transition-delay: .75s; }
html.st-on .studio__scrim { animation: stFade .9s ease both; }
@keyframes stFade { from { opacity: 0; } }

/* leaving the studio: quick, symmetric fade */
html.st-leave .studio { visibility: visible; opacity: 0; transition: opacity .4s ease; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .st-grid { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); }
  .st-output { grid-column: 1 / -1; }
  .st-grid { height: auto; }
  .panel { overflow: visible; }
  .code { min-height: 14rem; }
}
@media (max-width: 720px) {
  .st-grid { grid-template-columns: minmax(0, 1fr); }
  .st-logo { font-size: 1.7rem; }
  .sw { overflow-x: auto; }
  .sw span { min-width: 3.6rem; }
  .actions--row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .veil, html.st-enter .veil { transition: opacity .3s ease !important; clip-path: none !important; }
  .st-head, .panel, .st-foot { transform: none !important; filter: none !important; }
  html.st-on .st-head, html.st-on .panel, html.st-on .st-foot { transition: opacity .3s ease !important; transition-delay: 0s !important; }
  html.st-on .scene { transform: none; }
  html.st-enter .copy { transform: none; filter: none; }
}

#h-main:focus, #h-main:focus-visible { outline: none; box-shadow: none; }

/* ---- Colored wordmark: plain white + green ---- */
.st-logo { font-size: 2.15rem; padding: 0 .02em .08em; color: var(--s-text); filter: drop-shadow(0 2px 8px rgba(0,0,0,.45)); }
.st-logo .l1 { color: var(--s-text); }
.st-logo .l2 { color: var(--s-primary); }
.studio[dir="rtl"] .st-logo .l1 { color: var(--s-primary); }   /* رنگ in green, ین in white */
.studio[dir="rtl"] .st-logo .l2 { color: var(--s-text); }
.rank-note { margin: 0; font-size: .8rem; color: var(--s-muted); }

/* ---- Quick colours: 8 per row ---- */
.chips-q { display: grid; grid-template-columns: repeat(8, 1fr); gap: .45rem; justify-items: center; }
.chips-q button { width: 1.6rem; height: 1.6rem; }

/* ---- Cards ---- */
.card__tag { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.card__score { text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--s-muted); padding-inline-end: 2.1rem; }
.card__score.is-best { color: var(--s-primary); }
.sw--dense span { writing-mode: vertical-rl; transform: rotate(180deg); padding: .4rem 0 0; align-items: flex-start; justify-content: flex-start; font-size: .62rem; }
.sw--dense span { align-items: center; justify-content: flex-start; }
#countSeg button { padding-inline: .1rem; }

/* ---- Language pill inside the studio header ---- */
.st-lang { margin-inline-start: auto; margin-top: .3rem; padding: .35rem .85rem; gap: .5rem; font-size: .88rem;
  background: rgba(16,23,19,.78); border-color: var(--s-line); color: var(--s-text); }
.st-lang button { color: var(--s-text); }
.st-lang button[aria-pressed="true"] { color: var(--s-primary); }
.st-lang .bar { background: var(--s-line); }
.st-lang .ico { width: 1.05rem; height: 1.05rem; }

/* ---- Persian / RTL ---- */
.studio[dir="rtl"] { font-family: "Vazirmatn", Tahoma, "Segoe UI", sans-serif; }
.studio[dir="rtl"] .st-logo { font-family: "Vazirmatn", Tahoma, sans-serif; font-weight: 800; font-size: 1.9rem; line-height: 1.5; }
.studio[dir="rtl"] .st-brand .ico { transform: rotate(8deg) scaleX(-1); }
.studio[dir="rtl"] .st-crumb { letter-spacing: 0; text-transform: none; }
.studio[dir="rtl"] .card__tag { letter-spacing: 0; }
.studio[dir="rtl"] .lbl, .studio[dir="rtl"] .panel__title, .studio[dir="rtl"] .card h3 { letter-spacing: 0; }
.studio[dir="rtl"] .card p, .studio[dir="rtl"] .note, .studio[dir="rtl"] .pv__p { line-height: 1.7; }
.studio[dir="rtl"] .sw, .studio[dir="rtl"] .field-hex, .studio[dir="rtl"] .st-lang, .studio[dir="rtl"] .tw-ver select { direction: ltr; }
.studio[dir="rtl"] .st-lang button[lang="fa"] { font-family: "Vazirmatn", Tahoma, sans-serif; }
.studio[dir="rtl"] .code { font-family: "Vazirmatn", Consolas, monospace; line-height: 1.8; }
.studio[dir="rtl"] .code[dir="ltr"] { font-family: Consolas, "Cascadia Mono", monospace; line-height: 1.55; }
.studio[dir="rtl"] .mc__name { margin: .3rem .2rem 0; }
.studio[dir="rtl"] select.input { background-position: left .6rem center; }

/* ---- Tablet & mobile: single scrolling page, no overlapping panels ---- */
@media (max-width: 1100px) {
  .st-grid { flex: 0 0 auto; }
  .panel { min-height: auto; }
}
@media (max-width: 720px) {
  .st-head { flex-wrap: wrap; gap: .5rem; padding-top: .7rem; }
  .st-lang { margin-top: 0; }
  .st-crumb { display: none; }
  .st-grid { padding-inline: .7rem; gap: .8rem; }
  .panel { padding: .9rem .9rem 1rem; border-radius: 18px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .code { min-height: 16rem; font-size: .78rem; }
  .btn-go, .btn-ghost { min-height: 2.9rem; }
  .chips-q button { width: 1.75rem; height: 1.75rem; }
  .seg button { min-height: 2.5rem; }
  .toast { max-width: 90vw; text-align: center; }
}

/* ---- AI ---- */
.btn-ai { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-ai::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; opacity: .5; }
.btn-ai:not([aria-disabled="true"])::before { background: var(--s-primary); opacity: 1; box-shadow: 0 0 8px var(--s-primary); }
.btn-ai[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-ai.is-busy::before { animation: aiPulse 1s ease-in-out infinite; }
@keyframes aiPulse { 50% { transform: scale(1.7); opacity: .35; } }
.seg button.has-items::after { content: "•"; margin-inline-start: .3rem; color: var(--s-primary); }
.seg button[aria-selected="true"].has-items::after { color: #14200a; }
.card__ai {
  display: inline-block; margin-inline-end: .4rem; padding: .05rem .35rem; border-radius: 5px; vertical-align: 1px;
  font-size: .62rem; font-weight: 800; letter-spacing: .08em; color: #14200a; background: var(--s-primary);
}
.empty span { display: block; max-width: 34ch; margin-inline: auto; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .btn-ai.is-busy::before { animation: none; opacity: 1; } }

/* ---- Left panel: no internal scrolling in the wide 3-column layout ----
   The panel has a fixed height there, so it is compacted to fit; the compaction is
   scoped to wide screens so mobile/tablet keep their comfortable touch targets. */
@media (min-width: 1101px) {
  .st-controls { gap: .5rem; padding: 1rem 1rem 1.05rem; overflow-y: hidden; }
  .st-controls .lbl { margin: .15rem 0 -.05rem; }
  .st-controls .mc { gap: .65rem; }
  .st-controls .mc__swatch { width: 3.9rem; height: 3.9rem; }
  .st-controls textarea.input { min-height: 3.6rem; }
  .st-controls .chips { gap: .3rem; }
  .st-controls .chips button { padding: .26rem .62rem; font-size: .79rem; }
  .st-controls .chips-q { gap: .38rem; }
  .st-controls .chips-q button { width: 1.45rem; height: 1.45rem; }
  .st-controls .seg button { padding-block: .38rem; }
  .st-controls .actions { gap: .4rem; padding-top: .2rem; }
  .st-controls .btn-go, .st-controls .btn-ghost { padding-block: .62rem; }
  .st-controls .note { font-size: .76rem; line-height: 1.35; }
}
@media (min-width: 1101px) and (max-height: 780px) {
  .st-controls { overflow-y: auto; }   /* short window: scroll rather than clip the buttons */
}

/* keep the card tag on one line: harmony may ellipsis, the score never wraps */
.card__tag { flex-wrap: nowrap; }
.card__tag > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__score { white-space: nowrap; flex: none; }