/* Text Generator only (workspace styles live in assets/workspace.css) */
.toast{bottom:84px}

/* ---------- bar ---------- */
.usage.low b{color:var(--coral-hover)}
.usage .meter{cursor:help}

/* ---------- control pane ---------- */
.ctrl-sec > .lbl label{cursor:pointer}
.ctrl-sec > .lbl .v{font-weight:400;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.composer textarea{min-height:96px}
.composer .cf .lnk{font-size:12px;line-height:16px;font-weight:600;color:var(--ink-2);padding:4px 6px;border-radius:6px;transition:background .2s,color .2s}
.composer .cf .lnk:hover{background:var(--surface-2);color:var(--ink)}
.composer .cf .meta.over{color:var(--coral-hover)}
.composer.nudge{animation:nudge .42s var(--expo);border-color:var(--coral)}
.composer.filled{animation:filled 1.2s var(--expo)}
@keyframes nudge{20%{transform:translateX(-4px)}45%{transform:translateX(3px)}70%{transform:translateX(-2px)}}
@keyframes filled{0%{border-color:var(--coral-muted);box-shadow:0 0 0 4px var(--coral-light)}}
.picks .pick .n{font:500 12px/16px var(--mono);color:var(--faint);margin-left:2px}
.picks .pick[aria-pressed="true"] .n{color:var(--muted)}
.tile-btn .fr{height:22px;display:grid;place-items:center}
.seg.full{display:flex;width:100%}
.seg.full button{flex:1;padding:0 6px}
.lbl2{display:flex;justify-content:space-between;gap:8px;font-size:12px;line-height:16px;font-weight:500;color:var(--muted);margin:18px 0 6px}
.lbl2 b{font-weight:500;color:var(--ink-2)}
.rng-ends{display:flex;justify-content:space-between;font-size:12px;line-height:16px;color:var(--faint);margin-top:2px}
.pick-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 12px 8px 10px;border:1px solid var(--border-2);border-radius:10px;background:var(--surface);text-align:left;transition:border-color .2s,box-shadow .2s}
.pick-btn:hover,.pick-btn[aria-expanded="true"]{border-color:var(--ink)}
.pick-btn[aria-expanded="true"]{box-shadow:0 0 0 3px rgba(26,25,23,.05)}
.pick-btn .ic{flex:none;width:32px;height:32px;border-radius:7px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border);overflow:hidden;color:var(--muted)}
.pick-btn .ic img{width:100%;height:100%;object-fit:cover}
.pick-btn .tx{flex:1;min-width:0}
.pick-btn .tx b{display:block;font-size:14px;line-height:20px;font-weight:500;color:var(--ink)}
.pick-btn .tx small{display:block;font-size:12px;line-height:16px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-btn .chev{flex:none;color:var(--muted);transition:transform .35s var(--expo)}
.pick-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.ctrl .pop{left:0;right:0;min-width:0;top:calc(100% + 8px);transform-origin:50% 0}
.ctrl .pop.flipup{top:auto;bottom:calc(100% + 8px);transform-origin:50% 100%}
.adv .field{margin-bottom:14px}
.adv .label{font-size:12px;line-height:16px;color:var(--ink-2)}
.adv .switch{font-size:14px;line-height:20px;color:var(--ink-2)}
.adv .hint{margin-top:6px}
.ctrl-f .cost.over b,.ctrl-f .cost.over span{color:var(--coral-hover)}
#go{height:44px}
#go .kb{display:inline-flex;gap:3px;margin-left:4px}
#go .kbd{background:transparent;border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.85)}
#go.busy{pointer-events:none;background:var(--ink)}
#go .spinner{display:inline-block;vertical-align:-2px;margin-right:8px;border-color:rgba(255,255,255,.3);border-top-color:#fff}
.short{font-size:12px;line-height:16px;color:var(--ink-2);background:var(--coral-light);border:1px solid var(--coral-muted);border-radius:8px;padding:8px 10px}
.short b{font-weight:600}
.short a{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--coral-muted);text-underline-offset:2px}
.short.flash{animation:nudge .42s var(--expo)}

/* ---------- stage ---------- */
.stage{background:#efebe4}
.tg-empty{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:24px 28px 72px;overflow-y:auto;transition:opacity .45s var(--expo),transform .6s var(--expo)}
.tg-empty.gone{opacity:0;transform:translateY(8px);pointer-events:none}
.tg-empty .in{width:100%;max-width:640px}
.tg-empty h2{font-size:18px;line-height:28px}
.tg-empty .sub{font-size:14px;line-height:20px;color:var(--muted);margin-top:4px;max-width:32em}
.ideas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:20px}
.idea-c{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;width:100%;padding:8px 14px 8px 8px;background:var(--surface);border:1px solid var(--border);border-radius:12px;text-align:left;transition:border-color .25s,box-shadow .35s var(--expo),transform .45s var(--expo)}
.idea-c:hover{border-color:var(--border-2);box-shadow:0 14px 32px -20px rgba(26,25,23,.4);transform:translateY(-1px)}
.idea-c .ph{width:72px;height:72px;border-radius:8px}
.idea-c .ph img{transition:opacity .9s var(--expo),transform .8s var(--expo)}
.idea-c:hover .ph img{transform:scale(1.07)}
.idea-c .t{display:block;font-size:14px;line-height:20px;color:var(--ink)}
.idea-c .m{display:block;font-size:12px;line-height:16px;color:var(--muted);margin-top:4px}
.tg-empty .hint2{margin-top:16px;font-size:12px;line-height:16px;color:var(--muted)}
.tg-empty .hint2 .kbd{margin:0 1px}

.board{position:absolute;inset:0;overflow-y:auto;padding:20px 28px 96px;scrollbar-width:thin;transition:opacity .22s var(--expo),transform .45s var(--expo)}
.board.fading{opacity:0;transform:translateY(6px)}
.run-h{max-width:760px;margin:0 auto 14px;display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
.run-h .q{flex:1 1 240px;min-width:0;font-size:14px;line-height:20px;font-weight:500;color:var(--ink)}
.run-h .m{font-size:12px;line-height:16px;color:var(--muted);font-variant-numeric:tabular-nums}
.notes{max-width:760px;margin:-6px auto 14px;display:grid;gap:4px}
.notes p{font-size:12px;line-height:16px;color:var(--muted)}
.notes mark{background:var(--coral-light);color:var(--ink);border-radius:3px;padding:0 3px}
.vlist{max-width:760px;margin:0 auto;display:grid;gap:12px}

/* variation card */
.vc{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 1px 2px rgba(26,25,23,.03);outline:0;transition:border-color .3s,box-shadow .35s var(--expo)}
.vc:hover{border-color:var(--border-2)}
.vc.cur{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink),0 14px 34px -22px rgba(26,25,23,.45)}
.vc.enter{animation:vcIn .7s var(--expo) both}
@keyframes vcIn{from{opacity:0;transform:translateY(14px) scale(.985)}}
.vc-h{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 8px 0 16px}
.vc-h .vn{font-size:12px;line-height:16px;font-weight:600;color:var(--ink);white-space:nowrap}
.vc-h .vm{display:inline-flex;align-items:center;gap:6px;font:400 12px/16px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.vc-h .vm .spinner{width:10px;height:10px;border-width:1.5px}
.vc-h .ref{font-size:12px;line-height:16px;color:var(--coral-hover);white-space:nowrap}
.vc-h .ref button{font-weight:600;color:var(--ink-2);padding:2px 4px;border-radius:4px}
.vc-h .ref button:hover{background:var(--surface-2);color:var(--ink)}
.vc-h .grow{flex:1}
.star{width:30px;height:30px;color:var(--faint)}
.star:hover{color:var(--ink-2)}
.star svg{transition:transform .4s var(--expo)}
.star[aria-pressed="true"]{color:var(--coral)}
.star[aria-pressed="true"] svg{animation:pop .4s var(--expo)}
.star[aria-pressed="true"] path{fill:currentColor}
.vc .ptext{padding:6px 16px 14px;min-height:0;transition:opacity .25s}
.vc .ptext.dim{opacity:.4}
.vc .ptext.wait{padding-top:10px}
.vc-a{display:flex;align-items:center;gap:2px;padding:6px 8px;border-top:1px solid var(--border);opacity:0;transform:translateY(3px);transition:opacity .4s var(--expo),transform .5s var(--expo);overflow-x:auto;scrollbar-width:none}
.vc-a::-webkit-scrollbar{display:none}
.vc.ready .vc-a{opacity:1;transform:none}
.vc:not(.ready) .vc-a{pointer-events:none}
.vc-a .grow{flex:1}
.va{flex:none;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px;border-radius:6px;font-size:12px;line-height:16px;font-weight:600;color:var(--ink-2);white-space:nowrap;transition:background .2s,color .2s}
.va:hover,.va[aria-expanded="true"]{background:var(--surface-2);color:var(--ink)}
.va svg{flex:none;color:var(--muted)}
.va.copied svg{color:var(--ok);animation:pop .4s var(--expo)}
.clp{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--expo)}
.clp > div{overflow:hidden;min-height:0}
.clp.open{grid-template-rows:1fr}
.clp .pad{padding:4px 16px 14px;opacity:0;transition:opacity .3s}
.clp.open .pad{opacity:1;transition-delay:.08s}
.rf-f{display:flex;gap:6px;padding-top:6px}
.rf-f .input{height:32px;font-size:14px;line-height:20px}
.rf-f .btn{height:32px;flex:none}
.rf-s{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rf-s button{height:24px;padding:0 8px;border-radius:6px;border:1px solid var(--border);font-size:12px;line-height:16px;color:var(--ink-2);transition:border-color .2s,color .2s}
.rf-s button:hover{border-color:var(--border-2);color:var(--ink)}
.bd .groups{gap:12px;padding-top:6px}
.chip.lock{cursor:default;background:var(--surface-2)}
.chip.low[aria-pressed="false"]{text-decoration:none;color:var(--muted)}
.chip.lock:active{transform:none}

/* compare */
.board.cmp .run-h,.board.cmp .notes{max-width:none}
.board.cmp .vlist{max-width:none;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity;scrollbar-width:thin}
.board.cmp .vc{scroll-snap-align:start}
.board.cmp .vc-a,.board.cmp .clp{display:none}
.board.cmp .vc .ptext{font-size:13px}
.board.cmp .vc-h .vm,.board.cmp .vc-h .ref button{display:none}
.board.cmp .vc-h{padding-right:4px}
.ptext mark.df{background:var(--coral-light);color:var(--ink);border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.vc .base{font-size:12px;line-height:16px;color:var(--muted);white-space:nowrap}

/* toolbar */
.tools{z-index:9;gap:4px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .35s var(--expo),transform .5s var(--expo),visibility .35s}
.stage.has-run .tools{opacity:1;visibility:visible;transform:none}
.tools .seg{padding:2px;border:0;background:var(--surface-2);border-radius:8px}
.tools .seg button{height:28px;padding:0 10px;border-radius:6px}
.tools .seg .seg-ind{top:2px;bottom:2px;border-radius:6px}
.tools .seg[aria-disabled="true"]{opacity:.4;pointer-events:none}
.tools .tl{font:400 12px/16px var(--mono);color:var(--muted);padding:0 8px 0 4px;font-variant-numeric:tabular-nums}

/* ---------- history rail ---------- */
.hist-h .grow{flex:1}
.hist-list{gap:2px;padding:2px 8px 12px}
.hi{position:relative;border-radius:10px;transition:background .25s,box-shadow .25s}
.hi:hover{background:rgba(255,255,255,.7)}
.hi[aria-current="true"]{background:var(--surface);box-shadow:0 0 0 1px var(--border),0 1px 2px rgba(26,25,23,.04)}
.hi .go2{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:center;width:100%;padding:8px;text-align:left;border-radius:10px}
.hi .sw{width:32px;height:32px;border-radius:7px;overflow:hidden;background:#e9e5de}
.hi .sw img{width:100%;height:100%;object-fit:cover}
.hi .t{display:block;font-size:14px;line-height:20px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:20px}
.hi .m{display:flex;gap:6px;font-size:12px;line-height:16px;color:var(--muted);white-space:nowrap;overflow:hidden}
.hi .m span{overflow:hidden;text-overflow:ellipsis}
.hi .m time{flex:none;margin-left:auto;color:var(--ink-2)}
.hi .rm{position:absolute;right:6px;top:6px;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:var(--muted);opacity:0;transition:opacity .2s,background .2s,color .2s}
.hi:hover .rm,.hi:focus-within .rm{opacity:1}
.hi .rm:hover{background:var(--surface-2);color:var(--ink)}
.hi.enter{animation:hiIn .6s var(--expo) both}
@keyframes hiIn{from{opacity:0;transform:translateY(-8px)}}
.hi.leave{animation:itemOut .35s var(--expo) both}
.hi.busy .m time{color:var(--coral-hover)}
.ghost{display:grid;gap:6px;padding:4px 16px 0}
.ghost i{display:block;height:48px;border-radius:10px;border:1px dashed var(--border-2)}
.ghost i:nth-child(2){opacity:.6}.ghost i:nth-child(3){opacity:.3}

/* ---------- below the workspace ---------- */
.how{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border)}
.how div{padding:20px 24px 0 0}
.how div + div{padding-left:24px;border-left:1px solid var(--border)}
.how .n{font:500 12px/16px var(--mono);color:var(--muted);margin-bottom:8px}
.how h3{font-size:16px;line-height:24px;margin-bottom:4px}
.how p{font-size:14px;line-height:20px;color:var(--muted)}
.how .prompt-block{margin-top:12px;font-size:13px}
.faq2{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:80px}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .stage{height:auto;min-height:520px}
  .tg-empty{position:relative;inset:auto;padding:40px 16px 48px;overflow:visible}
  .tg-empty.gone{display:none}
  .board{position:relative;inset:auto;overflow:visible;padding:20px 16px 88px}
  .how{grid-template-columns:1fr 1fr}
  .how div:nth-child(odd){padding-left:0;border-left:0}
  .faq2{grid-template-columns:1fr;gap:32px}
}
@media (max-width:720px){
  .ideas{grid-template-columns:1fr}
  .idea-c{grid-template-columns:56px minmax(0,1fr)}
  .idea-c .ph{width:56px;height:56px}
  .vc-h{padding-left:14px}
  .vc .ptext{padding-left:14px;padding-right:14px}
  .va .lg{display:none}
  .vc-a{flex-wrap:wrap;overflow:visible}
  .vc-a .grow{display:none}
  .board.cmp .vlist{grid-auto-columns:minmax(260px,84%)}
  .how{grid-template-columns:1fr}
  .how div,.how div + div{padding:20px 0 0;border-left:0}
}

/* WordPress additions */
.vc .neg{margin:0 16px 4px}
.vc .neg .prompt-block{font-size:13px}
.short a{font-weight:600}