/* Orion — the suite demos (assets/js/suite-demos.js).
   One block per demo, set from tokens.css so it sits the same on the demos
   page, inside the suite picker and on a suite's own page. */

.sd{min-width:0;border:var(--line);border-radius:var(--r-md);background:rgba(8,8,14,.6);
  padding:var(--sp-5);font-family:var(--font-body);color:var(--text)}
.sd-head{margin:0 0 var(--sp-4);font-size:var(--fs-1);font-weight:var(--fw-semi);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--gold)}
.sd-foot{margin:var(--sp-4) 0 0;font-size:var(--fs-1);line-height:var(--lh-body);color:var(--text-3)}
.sd-foot a,.sd-suite-link{color:var(--gold);text-decoration:none;border-bottom:var(--line-strong);white-space:nowrap}
.sd-foot a:hover{color:var(--gold-bright)}
.sd-problem{margin:0;padding:var(--sp-3) var(--sp-4);border-left:2px solid var(--danger);
  font-size:var(--fs-2);line-height:var(--lh-body);color:var(--cream);background:rgba(224,133,127,.08)}

/* fields */
.sd-form{display:grid;gap:var(--sp-4)}
.sd-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.sd-field{display:grid;gap:var(--sp-2);min-width:0}
.sd-label{font-size:var(--fs-1);font-weight:var(--fw-semi);letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--text-2)}
.sd-hint{margin:0;font-size:var(--fs-1);line-height:var(--lh-body);color:var(--text-3)}
.sd-input{width:100%;min-width:0;padding:var(--sp-3);background:rgba(255,255,255,.03);
  border:1px solid rgba(240,232,213,.18);border-radius:var(--r-sm);color:var(--cream);
  font-family:var(--font-body);font-size:var(--fs-3);line-height:var(--lh-snug)}
.sd-input::placeholder{color:var(--text-3)}
.sd-input:focus{outline:none;border-color:var(--gold)}
.sd-input:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.sd-area{resize:vertical;line-height:var(--lh-body)}
.sd-doc{font-family:var(--font-mono);font-size:var(--fs-2);white-space:pre;overflow:auto}
.sd-btn{justify-self:start;padding:var(--sp-3) var(--sp-5);border:0;border-radius:var(--r-pill);
  background:var(--gold);color:#0a0a0a;cursor:pointer;font-family:var(--font-body);
  font-size:var(--fs-1);font-weight:var(--fw-bold);letter-spacing:var(--ls-caps);text-transform:uppercase}
.sd-btn:hover{background:var(--gold-bright)}
.sd-btn:disabled{opacity:.6;cursor:progress}
.sd-btn:focus-visible,.sd-try:focus-visible,.sd-pick:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sd-radios{display:flex;flex-wrap:wrap;gap:var(--sp-5)}
.sd-radio{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-3);color:var(--text);cursor:pointer}
.sd-radio input{width:18px;height:18px;margin:0;accent-color:var(--gold)}
.sd-radio input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* the chat */
.sd-log{display:grid;gap:var(--sp-4);max-height:22rem;overflow-y:auto;padding:var(--sp-2) var(--sp-2) var(--sp-2) 0}
.sd-msg{display:grid;gap:var(--sp-1);max-width:92%;min-width:0}
.sd-msg--you{justify-self:end;text-align:right}
.sd-who{font-size:var(--fs-1);font-weight:var(--fw-semi);letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--text-3)}
.sd-said{margin:0;padding:var(--sp-3) var(--sp-4);border:var(--line);border-radius:var(--r-md);
  font-size:var(--fs-3);line-height:var(--lh-body);color:var(--cream);text-align:left;
  background:rgba(255,255,255,.03);overflow-wrap:anywhere;white-space:pre-wrap}
.sd-msg--you .sd-said{background:rgba(201,168,76,.1);border-color:var(--line-strong-colour)}
.sd-msg.is-wait .sd-said{color:var(--text-3);font-style:italic}
.sd-msg.is-error .sd-said{border-color:var(--danger)}
.sd-source{font-size:var(--fs-1);color:var(--text-3)}
.sd-handover{display:grid;gap:var(--sp-2);justify-items:start}
.sd-handover-n{margin:0;font-size:var(--fs-2);line-height:var(--lh-body);color:var(--text-2)}
.sd-tag{display:inline-block;padding:2px var(--sp-3);border-radius:var(--r-sm);font-size:var(--fs-1);
  font-weight:var(--fw-bold);letter-spacing:var(--ls-caps);text-transform:uppercase}
.sd-tag--held{background:rgba(224,133,127,.14);color:#F0A9A3;border:1px solid rgba(224,133,127,.5)}
.sd-tag--ok{background:rgba(201,168,76,.12);color:var(--gold-bright);border:var(--line-strong)}
.sd-tries{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2) var(--sp-4);margin:var(--sp-4) 0}
.sd-tries-l{font-size:var(--fs-1);font-weight:var(--fw-semi);letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--text-3)}
.sd-try{padding:0 0 1px;background:none;border:0;border-bottom:1px solid rgba(240,232,213,.3);cursor:pointer;
  font-family:var(--font-body);font-size:var(--fs-2);color:var(--text-2);text-align:left}
.sd-try:hover{color:var(--gold-bright);border-bottom-color:var(--gold)}
.sd-chatform{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-3);align-items:center}

/* results */
.sd-out{display:grid;gap:var(--sp-4);margin-top:var(--sp-5)}
.sd-out:empty{display:none}
.sd-timing{margin:0;font-size:var(--fs-2);line-height:var(--lh-body);color:var(--gold-bright)}
.sd-card{min-width:0;padding:var(--sp-4) var(--sp-5);border:var(--line);border-radius:var(--r-md);
  background:rgba(255,255,255,.02)}
.sd-card-h{margin:0 0 var(--sp-3);font-family:var(--font-body);font-size:var(--fs-1);font-weight:var(--fw-semi);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--gold)}
.sd-subject{margin:0 0 var(--sp-3);font-size:var(--fs-3);font-weight:var(--fw-semi);color:var(--cream);overflow-wrap:anywhere}
.sd-body{margin:0;font-size:var(--fs-3);line-height:var(--lh-body);color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.sd-dl{margin:0;display:grid;gap:0}
.sd-dl > div{display:grid;grid-template-columns:minmax(0,8rem) minmax(0,1fr);gap:var(--sp-4);
  padding:var(--sp-2) 0;border-top:1px solid rgba(240,232,213,.07)}
.sd-dl > div:first-child{border-top:0}
.sd-dl dt{font-size:var(--fs-1);font-weight:var(--fw-semi);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-3)}
.sd-dl dd{margin:0;font-size:var(--fs-2);line-height:var(--lh-body);color:var(--cream);overflow-wrap:anywhere}

/* documents */
.sd-picks{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.sd-pick{padding:var(--sp-2) var(--sp-4);background:rgba(255,255,255,.02);border:var(--line);border-radius:var(--r-sm);
  cursor:pointer;font-family:var(--font-body);font-size:var(--fs-2);color:var(--text-2)}
.sd-pick:hover{color:var(--cream);border-color:rgba(240,232,213,.3)}
.sd-pick.is-on{border-color:var(--gold);color:var(--gold-bright);background:rgba(201,168,76,.08)}
.sd-verdict{display:grid;gap:var(--sp-2);justify-items:start;padding:var(--sp-4) var(--sp-5);
  border-left:2px solid var(--gold);background:rgba(201,168,76,.05)}
.sd-verdict.is-held{border-left-color:var(--danger);background:rgba(224,133,127,.07)}
.sd-verdict-t{margin:0;font-size:var(--fs-3);line-height:var(--lh-body);color:var(--cream);overflow-wrap:anywhere}
.sd-scroll{overflow-x:auto;max-width:100%;position:relative}
.sd-table{width:100%;border-collapse:collapse;font-size:var(--fs-2)}
.sd-table th,.sd-table td{padding:var(--sp-2) var(--sp-4) var(--sp-2) 0;text-align:left;vertical-align:top;
  border-bottom:1px solid rgba(240,232,213,.07);line-height:var(--lh-snug);color:var(--text)}
.sd-table thead th{font-size:var(--fs-1);font-weight:var(--fw-semi);letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--text-3);border-bottom:var(--line)}
.sd-table tbody th{font-weight:var(--fw-medium);color:var(--text-2);white-space:nowrap}
.sd-table td{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.sd-table tr.is-unclear td:last-child{color:#F0A9A3;font-weight:var(--fw-semi)}
.sd-ex{margin:0;padding:0;list-style:none;display:grid;gap:var(--sp-2)}
.sd-ex li{position:relative;padding-left:var(--sp-5);font-size:var(--fs-2);line-height:var(--lh-body);color:var(--text)}
.sd-ex li::before{content:'';position:absolute;left:0;top:.68em;width:7px;height:1px;background:var(--danger)}
.sd-ex strong{color:var(--cream);font-weight:var(--fw-semi)}

@media(max-width:620px){
  .sd{padding:var(--sp-4)}
  .sd-row{grid-template-columns:minmax(0,1fr)}
  .sd-dl > div{grid-template-columns:minmax(0,1fr);gap:2px}
  .sd-msg{max-width:100%}
  .sd-table tbody th{white-space:normal}
}