/* Flat, not a 90° gradient: a bar the same colour at both ends says the same thing and the
   gradient was a mark nobody could name. */
.impbar{position:sticky;top:0;z-index:45;background:#3a2a00;color:#ffd27a;font:var(--t-body);
  padding:var(--s2) var(--s5);display:flex;align-items:center;gap:var(--s3);
  border-bottom:1px solid #6a4e12}
.impbar b{color:#fff}
.impbar button{margin-left:auto;background:rgba(255,255,255,.14);border:0;color:#fff;
  padding:var(--s2) var(--s3);border-radius:var(--r-control);font:var(--t-note);cursor:pointer}
.threadbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--s4);margin-bottom:var(--s3)}
.msg{padding:var(--s3);border-radius:var(--r-control);margin-bottom:var(--s2);font:var(--t-body);max-width:80%}
.msg.investor{background:var(--panel2);margin-left:auto;border:1px solid var(--line2)}
.msg.admin{background:rgba(56,214,200,.08);border:1px solid rgba(56,214,200,.2)}
.msg .who{font:var(--t-mono);letter-spacing:var(--tr-mono);color:var(--faint);margin-bottom:3px}
.spinner{width:26px;height:26px;border:2.5px solid var(--line2);border-top-color:var(--aqua);border-radius:50%;animation:spin .7s linear infinite;margin:var(--s8) auto}
@keyframes spin{to{transform:rotate(360deg)}}
/* ---- DST lineage ---- */
.lsteps{margin-top:var(--s4)}
.lrow{display:flex;gap:var(--s3);padding-bottom:var(--s4);position:relative}
.lrow:not(.last):after{content:"";position:absolute;left:13px;top:30px;bottom:0;width:1px;background:var(--line2)}
.lrow.last{padding-bottom:0}
.ln{width:27px;height:27px;min-width:27px;border-radius:50%;background:var(--panel2);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font:var(--t-index);letter-spacing:var(--tr-index);color:var(--dim);z-index:1}
.ln.done{background:rgba(53,201,138,.15);border-color:rgba(53,201,138,.4);color:var(--green)}
.lrow .muted{font:var(--t-note);margin-top:3px}
/* ---- assistant ---- */
/* align-items:flex-start and flex:0 0 auto are not cosmetic. A chip defaults to shrinking, and
   once a row overflowed the ones left on it were squeezed to min-content and broke their own
   labels over three lines; because a flex line takes the height of its tallest item, every other
   chip on the row grew to match. The console found the same defect on its filter bar. A chip is a
   label: it does not shrink, it does not wrap, and it is one line of type tall. */
.suggest{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s2);margin:var(--s3) 0 var(--s2)}
.chip{background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-control);
  padding:var(--s2) var(--s3);font:var(--t-body);color:var(--dim);cursor:pointer;
  flex:0 0 auto;
  transition:color var(--d1) var(--ease-flat),border-color var(--d1) var(--ease-flat)}
.chip:hover{color:var(--ink);border-color:var(--aqua)}
.chat{max-height:44vh;overflow-y:auto;margin:var(--s3) 0;padding:var(--s1) 2px;display:flex;flex-direction:column;gap:var(--s2)}
.bub{padding:var(--s3);border-radius:var(--r-control);font:var(--t-body);max-width:88%}
/* Flat aqua. It was --grad on a chat bubble, which is a gradient on a box roughly forty pixels in
   its smaller dimension and the largest breach of the rule anywhere in the product. */
.bub.u{background:var(--aqua);color:#06101a;align-self:flex-end;font-weight:500}
.bub.a{background:var(--panel2);border:1px solid var(--line2);align-self:flex-start}
.bub.thinking{opacity:.6;letter-spacing:.2em}
.cites{margin-top:var(--s2);display:flex;flex-wrap:wrap;gap:var(--s1)}
.cite{font:var(--t-mono);letter-spacing:var(--tr-mono);color:var(--faint);
  border:1px solid var(--line2);border-radius:var(--r-mark);padding:2px 7px}
.askrow{display:flex;gap:var(--s2)}
.askrow input{flex:1;background:var(--panel2);border:1px solid var(--line-ctl);
  border-radius:var(--r-control);padding:var(--s3);color:var(--ink);font:var(--t-body)}
.askrow input:focus{outline:2px solid var(--blue);outline-offset:-2px;border-color:var(--blue)}
.askrow .btn{flex:0 0 auto;min-width:104px;width:auto}
@media(max-width:560px){.askrow{flex-direction:column}.askrow .btn{width:100%}}
/* ---- accreditation ---- */
.ck{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) 0;font:var(--t-body);color:var(--dim)}
.ck input{margin-top:3px;min-width:16px;width:16px;height:16px;accent-color:var(--blue)}
#demoBar{position:fixed;left:0;right:0;bottom:0;z-index:95;background:#3a2a00;color:#ffd27a;
font:var(--t-note);text-align:center;padding:var(--s2) var(--s3);border-top:1px solid #6a4e12}
body.hasDemoBar .wrap{padding-bottom:76px}
/* The demonstration bar is fixed to the bottom of the window and sat directly over the Sign out
   control. The main column already made room for it; the sidebar did not. */
body.hasDemoBar .side{padding-bottom:44px}
/* The .metrics grid and its .metric tiles stood here. They were eight bordered rectangles per
   property, each carrying one number, and the property-performance view drew twenty-four of them
   on one screen — the row-of-tiles idiom the readout replaced everywhere else. The markup emits
   readout() now; these rules matched nothing and have gone rather than being left to be found by
   whoever next greps for a class that does not exist.
   The handset step-up for .metric .ml and .metric .mc went with them, a few rules below. */

/* ----------------------------------------------------------------------------
   Handset corrections for the view-specific components. These live here rather
   than in styles.css only because this sheet loads second: a media query adds
   no specificity, so an equally specific rule in styles.css would lose to the
   plain declarations above on source order alone.
   ---------------------------------------------------------------------------- */
@media(max-width:820px){
  /* Labels that name a figure, or attribute a message, are content. At
     10.5–11.5px they need pinching to read on a handset. */
  .msg .who{font-size:12px}
  .cite{font-size:12px}
  /* The accreditation declaration is a regulatory attestation and its control
     was a 16px box. The label around it is the hit area either way; this is so
     the checked state is legible at arm's length. */
  .ck input{width:22px;height:22px;min-width:22px;margin-top:1px}
  /* Every control that takes typing renders at 16px, below which iOS Safari
     zooms the page on focus and shifts the layout out from under the thumb.
     These carry font:inherit, hence the weight. */
  .askrow input,.threadbox input{font-size:16px!important}
  /* A 44vh transcript inside an 844px screen left barely four exchanges
     visible with the composer pushed off the fold. */
  .chat{max-height:52vh}
}