/* Tweet demo. Chrome uses the shared tokens in base.css; the post itself
   keeps X's own look so participants read it as a post, not as our page. */

/* The chrome stays on screen. Two sticky rows rather than one wrapper, so
   nav.js can keep injecting the bar without owning what sits under it. */
.bar{position:sticky;top:0;z-index:80;
     background:var(--panel);border-bottom:1px solid var(--line);
     display:flex;align-items:center;gap:14px;padding:11px 22px;flex-wrap:wrap}
.bar h1{font-size:14.5px;margin:0;font-weight:650;white-space:nowrap}
.bar .sp{margin-left:auto}
#barExtraSlot{display:flex;align-items:center;gap:10px}
.bar .keywrap{display:flex;align-items:center;gap:7px}
/* Disabled, not hidden: removing either of these from the bar reflowed
   everything beside them on every toggle, which is worse than a field you
   cannot type in. They keep their space and stop responding. */
.bar .keywrap.off{opacity:.42;pointer-events:none}
.bar .keywrap.off #key{background:var(--sunk)}

/* ---- goldens, or the model ----
   Two states with very different consequences: goldens are free and prepared,
   Luna calls the model and costs money on every ask. So the live side looks
   live — pressed, it takes the cherry red rather than the neutral panel, which
   reads across a room in a moderated session. */
.src{display:flex;gap:2px;padding:2px;border:1px solid var(--line);
     border-radius:10px;background:var(--sunk)}
/* It lives in the Settings card now, so it takes the card's full width and the
   two halves share it evenly rather than sizing to their labels. */
details.cfg .src{width:100%}
details.cfg .src .srcBtn{flex:1 1 0;text-align:center}
/* Goldens disables everything under the toggle. Dimmed rather than removed, so
   the card keeps its height and nothing jumps as you toggle. */
.pop .row.off{opacity:.42}
.pop .row.off select{pointer-events:none}
.srcBtn{font-size:12px;padding:5px 11px;border-radius:8px;background:none;
        border:1px solid transparent;color:var(--muted);font-weight:500;
        white-space:nowrap;transition:background .15s ease,color .15s ease}
.srcBtn:hover{color:var(--ink)}
.srcBtn[aria-pressed="true"]{background:var(--panel);border-color:var(--line);
        color:var(--ink);font-weight:650;box-shadow:var(--shadow)}
#srcLive[aria-pressed="true"]{background:#8c2f39;border-color:#8c2f39;color:#fff}
[data-theme="dark"] #srcLive[aria-pressed="true"]{background:#b8515c;border-color:#b8515c;color:#16150f}
.bar #key{width:230px;font-size:12.5px;padding:6px 9px}
.bar #key.ok{border-color:#2f6f4f;background:color-mix(in srgb,#2f6f4f 8%,var(--panel))}
.bar .rem{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:4px}

details.cfg{position:relative}
details.cfg>summary{list-style:none;cursor:pointer;font-size:12.5px;color:var(--muted);
  border:1px solid var(--line);border-radius:8px;padding:6px 11px;background:var(--bg)}
details.cfg>summary::-webkit-details-marker{display:none}
details.cfg>summary:hover{color:var(--ink)}
details.cfg .pop{position:absolute;right:0;top:36px;z-index:40;background:var(--panel);
  border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);
  padding:14px;display:grid;gap:11px;width:230px}

/* ---- tweet picker ---- */
.picker{position:sticky;top:var(--barH,52px);z-index:79;
        display:flex;flex-direction:column;gap:9px;padding:11px 22px;
        border-bottom:1px solid var(--line);background:var(--bg)}
/* Two sets, chosen before you choose a post — so it is never ambiguous which
   list the pills below belong to. */
.modes{display:flex;gap:6px;align-items:center}
.mode{font-size:12.5px;padding:6px 13px;border-radius:9px;background:none;
      border:1px solid transparent;color:var(--muted);font-weight:500}
.mode:hover{color:var(--ink);background:var(--sunk)}
.mode[aria-pressed="true"]{background:var(--panel);border-color:var(--line);
      color:var(--ink);font-weight:650;box-shadow:var(--shadow)}
.mode .n{font-size:11px;opacity:.7;margin-left:5px}

.pills{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.pills .drop{margin-left:7px;opacity:.5;font-size:14px;line-height:1;cursor:pointer;
      padding:0 2px;border-radius:4px}
.pills .drop:hover{opacity:1;background:rgba(140,47,57,.16)}
.pills .pasteOpen{border-style:dashed;color:var(--muted)}
.pills .pasteOpen:hover{color:var(--ink);border-color:var(--ink2)}
/* A post with a signed-off answer looks settled; one without is visibly the
   odd one out, because pressing it calls the model and costs money. */
.pills .hasGolden{border-color:#bcdcc9;background:#dff0e5;color:#1d5b3c;font-weight:600}
.pills .noGolden{border-style:dashed;color:var(--muted)}
.pills .noGolden:hover{color:var(--ink)}
[data-theme="dark"] .pills .hasGolden{background:#17301f;border-color:#2b4a35;color:#8fc9a9}
.pills .pastedPill{border-color:#cf94a5;background:#f6dfe5;color:#8c2f39;font-weight:650}
[data-theme="dark"] .pills .pastedPill{background:#3d2029;border-color:#7a3a49;color:#f0cbd7}
.pills .pastedPill .flag{opacity:.75;color:inherit}

/* A pasted post is session-only, so its controls are quiet and out of the way
   until asked for. */
.pasteRow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pasteRow[hidden]{display:none}
.pasteRow input,.pasteRow textarea{font-size:13px;padding:7px 10px;min-width:0}
.pasteRow #pasteUrl{flex:1;max-width:520px}
.pasteRow #manualWho{width:290px}
.pasteRow #manualText{flex:1;max-width:520px;resize:vertical}
.pasteMsg{font-size:12.5px;color:var(--muted)}
.pasteMsg.bad{color:var(--err);font-weight:600}
/* Only once there is something underneath it — a shadow over nothing is noise. */
body.scrolled .picker{box-shadow:0 6px 16px -8px rgba(70,58,40,.35)}
[data-theme="dark"] body.scrolled .picker{box-shadow:0 6px 16px -8px rgba(0,0,0,.7)}
.picker button[aria-current="true"]{background:var(--go);color:var(--goInk);
        border-color:var(--go);font-weight:650}
.picker .flag{opacity:.55;font-size:11px;margin-left:5px}

/* ---- the stage: one post, plenty of air, nothing competing ---- */
/* Feed on the left, a gutter reserved on the right. The gutter is always
   there, so nothing reflows when an answer arrives.

   The responsive ladder gives up things in order of how little they cost:
   first the centring, then the padding, then the column widths, and only at
   the very end the second column itself. Covering a post with the card is the
   last resort, not the first response to a smaller window. */
.frame{display:grid;grid-template-columns:minmax(0,620px) 680px;gap:24px;
       justify-content:center;align-items:start;padding:28px 22px 60vh;
       max-width:1370px;margin:0 auto}
.feed{display:flex;flex-direction:column;gap:16px;min-width:0}
.gutter{position:relative;height:100%}

/* Tight, but both still fit: stop centring and pull the feed to the left. */
@media (max-width:1370px){
  .frame{justify-content:start;max-width:none;margin:0;gap:18px;
         padding-left:18px;padding-right:18px}
}
/* Tighter: spend the padding and some column width rather than overlap. */
@media (max-width:1180px){
  .frame{grid-template-columns:minmax(280px,1fr) 560px;gap:12px;
         padding-left:10px;padding-right:10px}
}
@media (max-width:1000px){
  .frame{grid-template-columns:minmax(260px,1fr) 440px}
  .post .bd{font-size:17px}
}
/* Genuinely no room for two columns. Only now does the card go on top. */
@media (max-width:820px){
  .frame{grid-template-columns:minmax(0,620px);max-width:664px;margin:0 auto;
         padding:24px 16px 60vh}
  .gutter{position:static}
}

/* ---- the post ---- */
.post{border-radius:16px;border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow)}
.post .tw{padding:18px 20px 4px}
.post .bd{font-size:19px;line-height:1.45;user-select:text;padding-bottom:12px}
.post .bd::selection,.post .bd ::selection{background:#f7c8d8;color:#0f1419}
.post .bd mark{background:#f7c8d8;color:#0f1419;border-radius:3px;
       box-shadow:0 0 0 2px #f7c8d8}
[data-theme="dark"] .post .bd mark{background:#8c2f4d;color:#fff;box-shadow:0 0 0 2px #8c2f4d}
.post .meta{padding:2px 20px 12px;color:var(--xdim);font-size:14px}
/* The stats row sits outside .tw, so base.css's .tw .st rules don't reach it. */
.post .st{display:flex;gap:34px;padding:10px 20px 13px;border-top:1px solid var(--xline);
          color:var(--xdim);font-size:13px}
.post .st span{display:flex;align-items:center;gap:5px}
.post .st svg{width:16px;height:16px;fill:none;stroke:var(--xdim);stroke-width:1.8;flex:none}

.quote{margin:2px 0 12px;border:1px solid var(--xline);border-radius:13px;padding:11px 13px;
       font-size:14px;line-height:1.4}
.quote .qh{display:flex;gap:5px;align-items:center;margin-bottom:3px}
.quote .qh .nm{font-weight:700} .quote .qh .hn{color:var(--xdim)}
.quote .qb{white-space:pre-wrap}

.cnote{margin:2px 0 12px;border:1px solid var(--xline);border-radius:13px;padding:11px 13px;
       font-size:14px;line-height:1.45;background:color-mix(in srgb,var(--xdim) 6%,transparent)}
.cnote .ch{font-weight:700;margin-bottom:4px;display:flex;gap:6px;align-items:center}
.cnote .cb{white-space:pre-wrap;color:var(--xdim)}

/* ---- the trigger: within reach, coloured so it is findable ---- */
/* Right edge, half way down — where a reading cursor already lives. Bottom
   corners are a long way from the text on a tall screen. */
/* Sticky, not fixed: it holds its place on screen while the feed scrolls past,
   and stays aligned to the posts rather than to the window edge. */
/* The dock overlaps the card's left edge so the cherry sits on it. Its box must
   not swallow clicks meant for the card — a link on that line was unclickable. */
.dock{position:sticky;top:50vh;z-index:70;margin-left:-26px;pointer-events:none;
      display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.dock .trigger{pointer-events:auto}
/* Overlay mode: the button leaves the flow and its exact right offset is set in
   JS, so it keeps sitting on the card's left edge rather than its right. */
@media (max-width:820px){
  .dock{position:fixed;right:20px;top:50%;margin:0;transform:translateY(-50%)}
}
/* Blush, not the deep brand red: the cherry is red, and red on red is mud.
   A light rose keeps it a colour and lets the fruit read at 23px. */
.trigger{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;padding:0;
      background:#f6dfe5;border:1px solid #cf94a5;position:relative;
      box-shadow:0 3px 12px rgba(140,47,57,.22);
      transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.trigger .cherry{font-size:23px;line-height:1}
.trigger:hover,.trigger:focus-visible{transform:scale(1.07);background:#f0cbd7;
      border-color:#8c2f39;box-shadow:0 6px 22px rgba(140,47,57,.34)}
.trigger:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.trigger[aria-pressed="true"]{background:#f0cbd7;border-color:#8c2f39;
      box-shadow:0 0 0 4px rgba(140,47,57,.20),0 6px 22px rgba(140,47,57,.34)}
[data-theme="dark"] .trigger{background:#3d2029;border-color:#7a3a49;
      box-shadow:0 3px 12px rgba(0,0,0,.45)}
[data-theme="dark"] .trigger:hover,[data-theme="dark"] .trigger:focus-visible,
[data-theme="dark"] .trigger[aria-pressed="true"]{background:#542a36;border-color:#b0596c}

.trigger .tip{position:absolute;left:64px;top:50%;transform:translateY(-50%);
      white-space:nowrap;font-size:12.5px;font-weight:500;color:var(--goInk);
      background:var(--go);padding:6px 11px;border-radius:8px;opacity:0;pointer-events:none;
      transition:opacity .15s ease}
.trigger:hover .tip{opacity:1}
.trigger[aria-pressed="true"] .tip{opacity:0}


/* ---- highlight mode: the post is the target, so quieten everything else ---- */
/* Only the post the cherry is level with is armed. The rest recede, so it is
   never ambiguous which one an ask would be about. */
/* The chrome recedes by fading its contents, never itself. `opacity` on a
   sticky bar fades its background too, and the feed then scrolls visibly
   through it — which reads as broken, not as quiet. */
body.picking .bar > *,body.picking .picker > *{opacity:.42;transition:opacity .2s ease}
.bar,.picker{transition:opacity .2s ease}
body.picking{user-select:none}
body.picking .post{opacity:.45;transition:opacity .2s ease,box-shadow .2s ease}
body.picking .post.armed{opacity:1;box-shadow:0 0 0 3px rgba(140,47,57,.30),var(--shadow)}
body.picking .post.armed .bd{cursor:text;user-select:text}

/* ---- the card: floats over the page, never blocks it ---- */
/* Held at centre right of the screen. left/width are measured in JS so it lines
   up with the gutter at any window width; height is capped so it never reaches
   the chrome at the top. */
/* display:flex beats the hidden attribute, so say it explicitly — without this
   closing the card only pretends to. */
.ctcard[hidden]{display:none}
.ctcard{position:fixed;top:50%;z-index:65;
      
      display:flex;flex-direction:column;overflow:hidden;
      background:var(--panel);border:1px solid #cf94a5;border-radius:16px;
      box-shadow:0 2px 6px rgba(140,47,57,.10),0 18px 50px rgba(140,47,57,.20);
      /* Rest state is the visible one, so a skipped animation lands correctly
         rather than leaving the card invisible. */
      transform:translateY(-50%)}
.ctcard.opening{animation:ctOpen .24s cubic-bezier(.2,.85,.3,1)}
.ctcard.closing{animation:ctClose .18s cubic-bezier(.4,0,.8,.4) forwards}
@keyframes ctOpen{
  from{transform:translateY(-50%) scale(.1);opacity:0}
  to{transform:translateY(-50%) scale(1);opacity:1}}
@keyframes ctClose{
  from{transform:translateY(-50%) scale(1);opacity:1}
  to{transform:translateY(-50%) scale(.1);opacity:0}}
[data-theme="dark"] .ctcard{border-color:#7a3a49;
      box-shadow:0 2px 6px rgba(0,0,0,.4),0 18px 50px rgba(0,0,0,.55)}
.ctcard:focus{outline:none}

/* Same blush and brand ring as the button, so the card reads as the thing the
   button opened. The answer itself stays on plain paper — long text on a tint
   is harder to read, and the tint's job is to frame it, not to carry it. */
.ctcard .ch{display:flex;align-items:center;gap:8px;padding:11px 10px 11px 18px;
      font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
      color:#8c2f39;background:#f6dfe5;border-bottom:1px solid #e3bccb;flex:none}
[data-theme="dark"] .ctcard .ch{color:#f0cbd7;background:#3d2029;border-bottom-color:#5c2f3b}
.ctcard .ch .mark{font-size:15px;line-height:1;flex:none}
/* Download and share. Same weight as the close button so the header reads as
   one set of controls, and pushed to the right by this one rather than the X,
   which now sits at the end of the group. */
.ctcard .ch .act2{margin:0;width:28px;height:28px;padding:0;border:0;flex:none;
      background:none;color:#8c2f39;border-radius:7px;display:grid;place-items:center;opacity:.62}
.ctcard .ch .act2:first-of-type{margin-left:auto}
.ctcard .ch .act2 svg{width:16px;height:16px;fill:none;stroke:currentColor;
      stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ctcard .ch .act2:hover{opacity:1;background:rgba(140,47,57,.12)}
.ctcard .ch .act2:focus-visible{outline:2px solid #8c2f39;outline-offset:1px}
[data-theme="dark"] .ctcard .ch .act2{color:#f0cbd7}
[data-theme="dark"] .ctcard .ch .act2:hover{background:rgba(240,203,215,.14)}

.ctcard .ch .x{margin-left:4px;width:28px;height:28px;padding:0;border:0;flex:none;
      background:none;color:#8c2f39;font-size:20px;line-height:1;border-radius:7px;
      display:grid;place-items:center;opacity:.7}
.ctcard .ch .x:hover{opacity:1;background:rgba(140,47,57,.12)}
.ctcard .ch .x:focus-visible{outline:2px solid #8c2f39;outline-offset:1px}
[data-theme="dark"] .ctcard .ch .x{color:#f0cbd7}
[data-theme="dark"] .ctcard .ch .x:hover{background:rgba(240,203,215,.14)}

/* flex:1 means flex-basis:0, and a basis of zero contributes nothing to the
   card's own height — the card then collapses to its header. Grow from the
   content instead, and let max-height do the capping. */
.cscroll{position:relative;flex:1 1 auto;min-height:0;display:flex}
/* A styled scrollbar is always drawn, unlike the overlay one a Mac hides until
   you move — the whole point is being able to see there is more. */
.cbody{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:2px 0;
       /* No scrollbar-width here: where both are set the standard property
          wins, and on a Mac it draws the overlay bar that vanishes — which is
          the thing being fixed. ::-webkit-scrollbar draws one that stays. */
       }
.cbody::-webkit-scrollbar{width:9px}
.cbody::-webkit-scrollbar-track{background:transparent}
.cbody::-webkit-scrollbar-thumb{background:#dcaebb;border-radius:99px;
       border:2px solid var(--panel)}
.cbody::-webkit-scrollbar-thumb:hover{background:#cf94a5}
[data-theme="dark"] .cbody{scrollbar-color:#7a3a49 transparent}
[data-theme="dark"] .cbody::-webkit-scrollbar-thumb{background:#5c2f3b;
       border-color:var(--panel)}
.fade{position:absolute;left:0;right:0;height:34px;pointer-events:none;
      opacity:0;transition:opacity .18s ease}
.fade.on{opacity:1}
.fade.top{top:0;background:linear-gradient(var(--panel),transparent)}
.fade.bottom{bottom:0;background:linear-gradient(transparent,var(--panel))}
.quoted{border-left-color:#cf94a5}

/* What the card says before it has anything to say. */
.howto{padding:20px}
/* Scoped to the heading. An unscoped `b` also caught the bold phrase inside the
   sentence and turned it into a block, orphaning the full stop after it. */
.howto > b{display:block;font-size:15px;margin-bottom:7px;color:var(--ink)}
.howto p b{color:var(--ink);font-weight:600;white-space:nowrap}
.howto p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.howto kbd{font:inherit;font-size:12px;background:var(--sunk);border:1px solid var(--line);
      border-radius:5px;padding:1px 6px}

.quoted{padding:15px 20px 0;font-size:13.5px;line-height:1.5;color:var(--muted);
      font-style:italic;border-left:3px solid #f7c8d8;margin:15px 20px 0;padding:0 0 0 12px}
[data-theme="dark"] .quoted{border-left-color:#8c2f4d}

/* A quote of the post inside the answer wears the same bar as the strip shown
   during the wait — one signal for "these are the tweet's words, not ours",
   rather than one that appears while you wait and another that never does. */
.answer blockquote{margin:0 0 14px;padding:0 0 0 12px;border-left:3px solid #f7c8d8;
      color:var(--muted);font-size:13.5px;line-height:1.5}
.answer blockquote p{margin:0 0 6px}
.answer blockquote p:last-child{margin:0}
[data-theme="dark"] .answer blockquote{border-left-color:#8c2f4d}

.answer{padding:14px 20px 18px;font-size:15px;line-height:1.62}
.answer p{margin:0 0 13px}
.answer ul{margin:0 0 13px;padding-left:20px}
.answer li{margin-bottom:8px}
.answer a{color:var(--a);text-decoration:underline;text-underline-offset:2px}
.answer em{color:var(--ink2)}
.answer h4{margin:16px 0 8px;font-size:14px}
.answer>*:last-child{margin-bottom:0}

.loading{display:flex;align-items:center;gap:11px;padding:18px 20px}
.loading .spin{width:14px;height:14px;border:2px solid var(--line);border-top-color:#8c2f39;
      border-radius:50%;animation:sp .7s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
#loadingText{font-size:14px;color:var(--muted);transition:opacity .2s ease}

/* The ask lives with the answer, pinned so a long one never buries it. */
.act{display:flex;align-items:center;gap:11px;flex-wrap:wrap;flex:none;
     padding:12px 18px;border-top:1px solid #e3bccb;background:#faeff2}
.act[hidden]{display:none}
.act .go{background:#8c2f39;color:#fff;border-color:#8c2f39;
     padding:9px 18px;font-size:14px;border-radius:9px}
.act .go:hover{background:#7a2831}
.act .go:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.act .nudge{font-size:12px;color:var(--err);font-weight:600}
.act .nudge[hidden]{display:none}
.act .nudge.shake{animation:nudge .34s ease}
@keyframes nudge{0%,100%{transform:none}25%{transform:translateX(-4px)}
  60%{transform:translateX(4px)}}
[data-theme="dark"] .act{border-top-color:#5c2f3b;background:#2c1a1f}

/* The demo card carries no metrics — they live per trace on the Evals tab. What
   is left is a running total in the bar, quiet enough to ignore. */
.spend{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;
       padding:4px 9px;border-radius:20px;background:var(--sunk);
       border:1px solid var(--line);white-space:nowrap}
.spend[hidden]{display:none}

/* Still used by the Evals tab, under a trace. */
.foot{padding:10px 18px 12px;border-top:1px solid var(--hair);font-size:11px;
      color:var(--muted);display:flex;flex-direction:column;gap:5px;
      align-items:flex-start;flex:none}
.foot .row{display:flex;gap:13px;flex-wrap:wrap;align-items:baseline}
.foot b{color:var(--ink);font-weight:650}
.foot i{font-style:normal;color:var(--warn)}
.foot .bad{color:var(--err);font-weight:650}
.err{margin:0 20px 18px;padding:12px 14px;border-radius:9px;font-size:13.5px;
     background:var(--goldBg);color:var(--err);border:1px solid var(--line)}

@media (prefers-reduced-motion:reduce){
  .trigger,.fade,#loadingText{transition-duration:.01ms}
  .ctcard.opening,.ctcard.closing{animation-duration:.01ms}
  .act .nudge.shake{animation:none}
  .trigger:hover,.trigger:focus-visible{transform:none}
  .loading .spin{animation-duration:2s}
}

/* Expanders — used by the evals tab under a trace. */
.did{width:100%;margin-top:5px;font-size:11.5px;color:var(--muted)}
.did>summary{cursor:pointer;color:var(--muted);list-style:none}
.did>summary::-webkit-details-marker{display:none}
.did>summary::before{content:"\25B8  "}
.did[open]>summary::before{content:"\25BE  "}
.did>summary:hover{color:var(--ink)}
.grp{margin:7px 0 0}
.grp ul{margin:3px 0 0;padding-left:17px}
.grp li{margin-bottom:2px;word-break:break-all}

/* ---- tab bar ---- */
.tabs2{display:flex;gap:2px}
.tabs2 a{font-size:13px;padding:6px 13px;border-radius:8px;text-decoration:none;
         color:var(--muted);border:1px solid transparent}
.tabs2 a:hover{color:var(--ink);background:var(--sunk)}
.tabs2 a[aria-current="page"]{color:var(--ink);font-weight:650;background:var(--sunk);
         border-color:var(--line)}

/* ---- evals ---- */
.picker .fl{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.evals{max-width:1360px;margin:0 auto;padding:18px 22px 70px}

.trace{border:1px solid var(--line);border-radius:11px;background:var(--panel);
       margin-bottom:9px;overflow:hidden;box-shadow:var(--shadow)}
.trace.open{border-color:var(--ink2)}
.trace .row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
       background:none;border:0;border-radius:0;padding:11px 15px;font-weight:400;
       font-size:13px;color:var(--ink)}
.trace .row:hover{background:var(--sunk)}
.trace .tw-label{font-weight:650;white-space:nowrap}
.trace .hl{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.trace .pill{font-size:11px;padding:2px 8px;border-radius:20px;background:var(--sunk);
       border:1px solid var(--line);white-space:nowrap}
.trace .dim{color:var(--muted);font-size:12px;white-space:nowrap}
.trace .ok{color:#2f6f4f;font-size:11.5px;font-weight:650;white-space:nowrap}
.trace .bad{color:var(--err);font-size:11.5px;font-weight:650;white-space:nowrap}

.score{display:inline-grid;place-items:center;min-width:46px;padding:4px 0;border-radius:7px;
       font-variant-numeric:tabular-nums;font-weight:700;font-size:13px;
       background:var(--sunk);color:var(--muted);border:1px solid var(--line);flex:none}
.score.good{background:#dff0e5;color:#1d5b3c;border-color:#bcdcc9}
.score.ok{background:#f7efdc;color:var(--gold);border-color:#e6d5ac}
.score.poor{background:#f9e6d9;color:var(--warn);border-color:#eccdb4}
.score.zero{background:#f7dedc;color:var(--err);border-color:#eabfbc}
.score.big{min-width:64px;font-size:19px;padding:8px 0}
[data-theme="dark"] .score.good{background:#17301f;border-color:#2b4a35}
[data-theme="dark"] .score.ok{background:#2b2416;border-color:#4a3d1f}
[data-theme="dark"] .score.poor{background:#2f2214;border-color:#4d3820}
[data-theme="dark"] .score.zero{background:#331b1a;border-color:#542c2a}

.trace .body{border-top:1px solid var(--hair);padding:16px 15px}
.trace .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:1080px){ .trace .two{grid-template-columns:1fr} }
.trace h3{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
       margin:0 0 7px;font-weight:700}
.trace .two>div>h3:not(:first-child){margin-top:18px}
.postbox{background:var(--sunk);border-radius:9px;padding:12px 14px;font-size:14px;
       line-height:1.45;white-space:pre-wrap}
.postbox mark{background:#ffe08a;color:#0f1419;border-radius:2px}
.raw{background:var(--sunk);border-radius:9px;padding:11px 13px;font-size:11.5px;
       line-height:1.5;overflow-x:auto;margin:0;white-space:pre-wrap;word-break:break-word;
       max-height:280px;overflow-y:auto}

.evalbox{border-top:1px solid var(--hair);margin-top:16px;padding-top:15px}
.scoreline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.scoreline .bad{color:var(--err);font-size:13px}
.scoreline .dim{color:var(--muted);font-size:13px}
.evalbox h3{margin:14px 0 8px}

.rule{border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-bottom:7px;
      background:var(--bg)}
.rule.fail{border-color:#e4b8b5;background:color-mix(in srgb,var(--err) 5%,var(--bg))}
[data-theme="dark"] .rule.fail{border-color:#5a3230}
.rule .rh{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:5px}
.rule .rh code{font-size:11.5px}
.rule .rh .dim{color:var(--muted);font-size:11px}
.rule .rh .ok{color:#2f6f4f;font-size:11px;font-weight:650}
.rule .rh .bad{color:var(--err);font-size:11px;font-weight:700;text-transform:uppercase;
      letter-spacing:.05em}
.rule .rt{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:5px}
.rule .ev{font-size:13.5px;line-height:1.5}
.vb2{font-size:11px;padding:3px 9px;border-radius:6px;background:var(--panel);
     color:var(--muted);font-weight:500}
.vb2.on{background:var(--go);color:var(--goInk);border-color:var(--go);font-weight:650}
.note{width:100%;font-size:13.5px;margin-top:4px}

/* Prompts that think on paper (single-v2, single-v3) write their stages before
   the answer. That belongs on the trace, where it helps a judgement, and not in
   the demo card, where it is the reader's first impression. */
details.working{margin:10px 20px 16px;font-size:12.5px}
details.working>summary{cursor:pointer;color:var(--muted);padding:4px 0}
details.working>summary:hover{color:var(--ink)}
details.working pre{white-space:pre-wrap;background:var(--sunk);border:1px solid var(--line);
  border-radius:9px;padding:11px;margin:7px 0 0;font-size:12px;line-height:1.5;
  max-height:340px;overflow:auto}