/* Qora — dark quantum. One stylesheet for the app; docs.css builds on these tokens. */

:root {
  --bg:#0A0A0A; --bg-2:#0E0E0E; --bg-3:#151515; --bg-ink:#FFFFFF; --on-accent:#0A0A0A;
  --line:#1F1F1F; --line-2:#2C2C2C;
  --ink:#F2F2F2; --ink-2:#BDBDBD; --ink-3:#8C8C8C; --ink-4:#5F5F5F;
  --accent:#FFFFFF; --accent-ink:#FFFFFF; --accent-soft:rgba(255,255,255,.08); --accent-2:#9E9E9E;
  --ok:#3FD18A; --warn:#E8B04A; --err:#FF5F5F;
  --radius:0; --radius-sm:0; --radius-xs:0;
  --shadow-1:none; --shadow-2:0 18px 48px -12px rgba(0,0,0,.75);
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:var(--sans); /* owner: one typeface everywhere; labels keep their small size and tracking */
  --phase: conic-gradient(from 0deg,#F2F2F2,#BDD1F3,#79CDF1,#50C7D2,#36C9A6,#8BBD53,#F5B400,#FA8B36,#FD6E73,#E57CC3,#D997F9,#D6C3F5,#F2F2F2);

  --head-h:84px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { height:100%; -webkit-text-size-adjust:100%; }
body {
  margin:0; height:100%; background:var(--bg); color:var(--ink);
  font:400 14px/1.5 var(--sans); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
button, input, textarea { font:inherit; color:inherit; }
button { background:none; border:0; padding:0; cursor:pointer; }
button:disabled { cursor:default; }
a { color:inherit; text-decoration:none; }
h1, h2, h3, p, dl, dd { margin:0; }
code, pre { font-family:var(--mono); }
::selection { background:rgba(255,255,255,.24); color:var(--accent-ink); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
[hidden] { display:none !important; }
/* thin dark scrollbars with square thumbs: the WebKit pseudo-elements where they exist (Chromium, Safari),
   the standard properties elsewhere (setting those in Chromium would switch the pseudo-elements off) */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--line-2); }
::-webkit-scrollbar-thumb:hover { background:var(--ink-4); }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
}
.ic { display:block; flex:none; }
.defs { position:absolute; width:0; height:0; overflow:hidden; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip { position:fixed; z-index:100; left:12px; top:-48px; padding:8px 12px; background:var(--bg-ink); color:var(--on-accent); font-size:13px; }
.skip:focus { top:12px; }
.muted { color:var(--ink-3); }
.mono-label, .eyebrow { font:500 10px/1.4 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
.scroll-x { overflow-x:auto; overscroll-behavior-x:contain; }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:36px; padding:0 14px;
  border:1px solid transparent; font-size:13px; font-weight:500; white-space:nowrap;
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn-ink { background:var(--bg-ink); color:var(--on-accent); }
.btn-ink:hover { background:color-mix(in srgb, var(--bg-ink) 85%, var(--bg)); }
.btn-line { background:transparent; border-color:var(--line-2); color:var(--ink); }
.btn-line:hover { border-color:var(--ink-4); background:var(--bg-3); }
.btn-sm { height:32px; padding:0 12px; font-size:12.5px; }
.btn-block { width:100%; }
.icon-btn {
  display:inline-grid; place-items:center; flex:none; width:36px; height:36px; border:1px solid var(--line-2);
  background:transparent; color:var(--ink-2); transition:color .15s, border-color .15s, background .15s;
}
.icon-btn:hover { color:var(--ink); border-color:var(--ink-4); background:var(--bg-3); }
.icon-btn-sm { width:28px; height:28px; }
.copy { position:relative; }
.copy[data-copied]::after {
  content:"Copied"; position:absolute; z-index:5; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  padding:3px 7px; background:var(--bg-ink); color:var(--on-accent); font:500 10px/1.4 var(--mono);
  letter-spacing:.04em; white-space:nowrap; pointer-events:none;
}

/* ---------- live dot ---------- */
.live-dot { display:inline-block; flex:none; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 5px rgba(255,255,255,.03); } }

/* ---------- app grid ---------- */
.app { display:grid; grid-template-columns:232px minmax(0,1fr) 340px; height:100vh; height:100dvh; }
/* viewport-fit=cover: keep content clear of the notch and rounded corners (landscape phones) */
.app { padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
.topbar { display:none; }
.sidebar {
  display:flex; flex-direction:column; min-height:0; overflow-y:auto;
  padding:22px 14px calc(16px + env(safe-area-inset-bottom)); background:var(--bg-2); border-right:1px solid var(--line);
}
.sidebar > * { flex-shrink:0; }
.center { display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--bg); }
.center:focus { outline:none; }
.feed { display:flex; flex-direction:column; min-height:0; background:var(--bg-2); border-left:1px solid var(--line); }
.scrim { display:none; }

/* ---------- sidebar ---------- */
.brand { display:inline-flex; align-items:center; gap:9px; min-height:40px; color:var(--ink); }
.mark { display:block; flex:none; color:var(--ink); }
.wordmark { font-size:21px; font-weight:600; letter-spacing:-.035em; line-height:1; }
.sidebar-top { display:flex; align-items:center; justify-content:space-between; padding:0 8px; margin-bottom:20px; }
.drawer-close { display:none; }

.nav { display:flex; flex-direction:column; gap:2px; }
.nav a {
  position:relative; display:flex; align-items:center; gap:11px; height:40px; padding:0 10px;
  border:1px solid transparent; color:var(--ink-3); font-size:13.5px; font-weight:500;
  transition:background .15s, color .15s, border-color .15s;
}
.nav a:hover { background:var(--bg-3); color:var(--ink); }
.nav a[aria-current=page] { background:var(--bg-3); border-color:var(--line); color:var(--ink); box-shadow:var(--shadow-1); }
.nav a[aria-current=page]::before { content:""; position:absolute; left:-1px; top:11px; bottom:11px; width:2px; background:var(--accent); }
.nav a[aria-current=page] .ic { color:var(--accent); }
.nav small { margin-left:auto; font:500 10.5px var(--mono); color:var(--ink-3); }


.ctas { display:grid; gap:8px; margin-top:24px; }
.cta {
  display:flex; align-items:center; gap:10px; height:46px; padding:0 14px;
  font-size:13px; font-weight:500; transition:background .15s, border-color .15s;
}
.cta span { flex:1; text-align:left; }
.cta .ic:last-child { opacity:.55; transition:transform .2s var(--ease), opacity .2s; }
.cta:hover .ic:last-child { opacity:1; transform:translate(2px,-2px); }
.cta-ink { background:var(--bg-ink); color:var(--on-accent); }
.cta-ink:hover { background:color-mix(in srgb, var(--bg-ink) 85%, var(--bg)); }
.cta-line { background:transparent; border:1px solid var(--line-2); color:var(--ink); }
.cta-line:hover { border-color:var(--ink-4); background:var(--bg-3); }

.sb-stats { display:grid; grid-template-columns:1fr 1fr; margin-top:14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); overflow:hidden; }
.sb-stats div { display:flex; flex-direction:column-reverse; gap:2px; padding:12px 14px; }
.sb-stats div:nth-child(odd) { border-right:1px solid var(--line); }
.sb-stats div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
.sb-stats dt { font:500 9.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.sb-stats dd { font-size:19px; font-weight:600; letter-spacing:-.02em; line-height:1.2; font-variant-numeric:tabular-nums; }

.sb-links { display:grid; margin-top:12px; }
.sb-links a { display:flex; align-items:center; gap:10px; height:40px; padding:0 10px; font-size:12.5px; color:var(--ink-2); }
.sb-links a span { margin-left:auto; color:var(--ink-4); }
.sb-links a:hover { background:var(--bg-3); color:var(--ink); }

.sb-wallet { position:relative; margin-top:auto; padding-top:18px; }
.who-btn {
  display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px 8px 8px; border:1px solid var(--line);
  background:var(--bg); text-align:left; transition:border-color .15s;
}
.who-btn:hover { border-color:var(--ink-4); }
.who-id { display:flex; flex-direction:column; flex:1; min-width:0; }
.who-addr { font:500 12.5px var(--mono); }
.who-sub { font-size:11px; color:var(--ink-3); }
.who-usage { display:flex; align-items:center; gap:10px; margin-top:10px; padding:0 4px; font:500 10.5px var(--mono); color:var(--ink-3); white-space:nowrap; }
.meter { display:block; flex:1; height:3px; background:var(--line); overflow:hidden; }
.meter i { display:block; height:100%; width:calc(var(--fill,0) * 100%); background:var(--accent); transition:width .4s var(--ease); }
.idn { display:block; flex:none; background:var(--bg-3); color:var(--accent); }

.menu { position:absolute; z-index:30; min-width:200px; padding:6px; background:var(--bg-2); border:1px solid var(--line-2); box-shadow:var(--shadow-2); }
.menu button { display:flex; align-items:center; gap:10px; width:100%; height:36px; padding:0 10px; font-size:13px; color:var(--ink-2); text-align:left; }
.menu button:hover:not(:disabled) { background:var(--bg-3); color:var(--ink); }
.menu button:disabled { color:var(--ink-3); }
.who-menu { left:0; right:0; bottom:calc(100% - 6px); }

.sb-foot { margin-top:16px; padding:14px 10px 0; border-top:1px solid var(--line); }
.sb-foot nav { display:flex; gap:14px; font-size:11.5px; color:var(--ink-3); }
.sb-foot nav a:hover { color:var(--ink); }

/* ---------- center header ---------- */
.head {
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:var(--head-h); padding:0 28px; border-bottom:1px solid var(--line); background:var(--bg);
}
.head-title { min-width:0; }
.crumb { font:500 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.crumb span { color:var(--accent); }
.head h1 { margin-top:5px; font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1.15; }
.head-actions { display:flex; align-items:center; gap:10px; }
.pill-online { display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; border:1px solid var(--line-2); font-size:13px; font-weight:500; color:var(--ink); white-space:nowrap; }
.feed-btn { display:none; }

/* ---------- views ---------- */
.view { flex:1; min-height:0; overflow-y:auto; }
.view-console { display:flex; flex-direction:column; overflow:hidden; }
.view-pad { max-width:1040px; margin:0 auto; padding:24px 28px 48px; display:flex; flex-direction:column; gap:16px; }
.card { background:var(--bg); border:1px solid var(--line); box-shadow:var(--shadow-1); }
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:8px; }
.section-head h2 { font-size:15px; font-weight:600; letter-spacing:-.01em; }
.section-head h2 span { margin-left:4px; font:500 11px var(--mono); color:var(--ink-3); }

/* ---------- console: thread ---------- */
.thread { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.thread-inner { display:flex; flex-direction:column; min-height:100%; max-width:780px; margin:0 auto; padding:28px 28px 8px; }
.thread-note { margin:48px auto; font:500 10.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }

.empty { position:relative; isolation:isolate; display:flex; flex-direction:column; align-items:center; margin:auto 0; padding:16px 0 24px; text-align:center; }
/* Dot field behind the sphere: a static 28px grid; a few single dots (.twinkle, placed by console.js on
   grid points) light up now and then. */
.empty::before, .empty-stars {
  content:""; position:absolute; z-index:-1; left:50%; top:-32px; width:min(760px,100%); height:460px; transform:translateX(-50%);
  -webkit-mask-image:radial-gradient(ellipse 50% 46% at 50% 36%, #000 10%, transparent 72%);
  mask-image:radial-gradient(ellipse 50% 46% at 50% 36%, #000 10%, transparent 72%);
  pointer-events:none;
}
.empty::before { background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.3px); background-size:28px 28px; }
.twinkle { position:absolute; width:8px; height:8px; margin:-4px 0 0 -4px; opacity:0; background:radial-gradient(#fff 1.2px, rgba(255,255,255,.5) 2px, transparent 3.6px); }
.twinkle.on { animation:twinkle 1.8s ease-in-out; }
@keyframes twinkle { 0%, 100% { opacity:0; } 50% { opacity:1; } }
.empty h2 { font-size:28px; font-weight:600; letter-spacing:-.028em; line-height:1.15; }
.empty-sub { max-width:440px; margin-top:10px; font-size:14.5px; line-height:1.55; color:var(--ink-2); }

.chips { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; width:100%; max-width:640px; margin-top:30px; }
/* Suggestion card: a quiet graphic strip on top, then the label and the question with room to breathe. */
.chip {
  display:flex; flex-direction:column; padding:0; text-align:left; background:var(--bg); overflow:hidden;
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-1);
  transition:border-color .15s, transform .2s var(--ease);
}
.chip:hover { border-color:var(--ink-4); transform:translateY(-1px); }
.chip:hover .chip-art { color:var(--ink); }
.chip-art {
  order:-1; box-sizing:border-box; width:100%; height:72px; padding:14px 0; border-bottom:1px solid var(--line); background:var(--bg-3);
  color:var(--ink-2); fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:color .15s;
}
.chip-art text { font:500 9px var(--mono); fill:currentColor; stroke:none; text-anchor:middle; }
.chip-art .fill { fill:currentColor; stroke:none; }
.chip-art .box { fill:var(--bg-3); }
.chip-body { display:flex; flex-direction:column; gap:7px; padding:15px 18px 17px; }
.chip-tag { font:500 9.5px var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--accent); }
.chip-text { font-size:14px; line-height:1.45; color:var(--ink); }

/* Live preview of the run-card pipeline strip: the same markup and states as a real run, animated in a loop. */
.pipe-demo { width:100%; max-width:640px; margin:34px 0 0; border:1px solid var(--line); text-align:left; }

.messages { display:flex; flex-direction:column; gap:18px; padding-bottom:12px; }
.msg-user {
  align-self:flex-end; max-width:min(80%,560px); padding:10px 14px;
  background:var(--bg-3); font-size:14px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere;
}
/* one-shot entrance; app.js drops the class on animationend so re-showing a view doesn't replay it */
.enter { animation:rise .3s var(--ease); }
@keyframes rise { from { opacity:0; transform:translateY(6px); } }

/* ---------- run card ---------- */
.run { background:var(--bg); border:1px solid var(--line); box-shadow:var(--shadow-1); overflow:hidden; }
.run-head { display:flex; align-items:center; gap:10px; min-width:0; padding:11px 16px; border-bottom:1px solid var(--line); }
.run-tag { font:500 10.5px var(--mono); letter-spacing:.12em; white-space:nowrap; color:var(--accent); }
.run-chips { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 10px var(--mono); letter-spacing:.1em; color:var(--ink-3); }
.run-chips:not(:empty)::before { content:""; display:inline-block; width:1px; height:10px; margin-right:10px; vertical-align:-1px; background:var(--line-2); }
.run-time { margin-left:auto; flex:none; font:500 10.5px var(--mono); color:var(--ink-3); }

.pipe { list-style:none; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:0; padding:12px 16px 13px; background:var(--bg-2); border-bottom:1px solid var(--line); }
.pipe-step { position:relative; display:flex; flex-wrap:wrap; align-items:baseline; column-gap:6px; min-width:0; padding-top:10px; }
.pipe-step::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--line-2); transition:background .3s; }
.pipe-idx { font:500 9.5px var(--mono); color:var(--ink-4); }
.pipe-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:500; color:var(--ink-3); }
.pipe-ms { flex-basis:100%; margin-top:1px; font:400 10.5px var(--mono); font-variant-numeric:tabular-nums; color:var(--ink-3); white-space:nowrap; }
.pipe-step[data-status=active]::before { background:linear-gradient(90deg,var(--accent-soft) 0%,var(--accent) 50%,var(--accent-soft) 100%); background-size:200% 100%; animation:flow 1.1s linear infinite; }
.pipe-step[data-status=active] .pipe-name { color:var(--ink); }
.pipe-step[data-status=active] .pipe-ms { color:var(--accent); }
.pipe-step[data-status=done]::before { background:var(--ink); }
.pipe-step[data-status=done] .pipe-name { color:var(--ink-2); }
.pipe-step[data-status=done] .pipe-idx { color:var(--ink-3); }
.pipe-step[data-status=skipped]::before { background:repeating-linear-gradient(90deg,var(--line-2) 0 4px,transparent 4px 7px); }
.pipe-step[data-status=error]::before { background:var(--err); }
.pipe-step[data-status=error] .pipe-ms { color:var(--err); }
@keyframes flow { to { background-position:-200% 0; } }

.run-plan { padding:12px 16px 0; font:400 12px/1.6 var(--mono); color:var(--ink-3); overflow-wrap:anywhere; }
.run-plan b { margin-right:8px; font-weight:500; color:var(--accent); }
.run-plan strong { font-weight:500; color:var(--ink); }
.run-answer { padding:12px 16px 2px; font-size:14.5px; line-height:1.65; overflow-wrap:anywhere; }
.run-answer:empty:not(.streaming) { display:none; }
.streaming > :last-child::after, .streaming:empty::after {
  content:""; display:inline-block; width:7px; height:15px; margin-left:3px; vertical-align:-2px;
  background:var(--accent); animation:blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity:0; } }

.md > * + * { margin-top:.7em; }
.md ul, .md ol { margin:0; padding-left:1.3em; }
.md li + li { margin-top:.3em; }
.md li::marker { color:var(--ink-3); }
.md strong { font-weight:600; }
.md a { color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
.md code { padding:.1em .35em; border:1px solid var(--line); background:var(--bg-3); font-size:.86em; }
.md pre { padding:12px 14px; border:1px solid var(--line); background:var(--bg-2); overflow-x:auto; }
.md pre code { padding:0; border:0; background:none; font-size:12.5px; }

.run-error { display:flex; align-items:flex-start; gap:12px; margin:12px 16px 2px; padding:12px 14px; border:1px solid color-mix(in srgb, var(--err) 30%, transparent); background:color-mix(in srgb, var(--err) 7%, transparent); color:var(--err); }
.run-error-text { flex:1; min-width:0; }
.run-error strong { display:block; font-size:13.5px; font-weight:600; color:var(--ink); }
.run-error p { margin-top:2px; font-size:13px; color:var(--ink-2); }
.run-error code { display:inline-block; margin-top:6px; font-size:10px; font-weight:500; letter-spacing:.08em; color:var(--ink-3); }
.run-error .btn { flex:none; }

.run-viz { margin-top:14px; border-top:1px solid var(--line); }
.tabs { display:flex; gap:20px; padding:0 16px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.tabs [role=tab] { position:relative; flex:none; height:40px; font-size:12.5px; font-weight:500; color:var(--ink-3); transition:color .15s; }
.tabs [role=tab]:hover:not(:disabled) { color:var(--ink); }
.tabs [role=tab][aria-selected=true] { color:var(--ink); }
.tabs [role=tab][aria-selected=true]::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent); }
.tabs [role=tab]:disabled { color:var(--ink-4); }
.tab-panel { padding:16px; }
.tab-panel:focus-visible { outline-offset:-2px; }
.run-foot { display:flex; flex-wrap:wrap; padding:10px 16px; border-top:1px solid var(--line); background:var(--bg-2); font:500 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.run-foot span + span::before { content:"·"; margin:0 8px; color:var(--ink-4); }

/* ---------- viz: shared ---------- */
.viz-meta { display:flex; flex-wrap:wrap; gap:4px 16px; margin-bottom:14px; font:500 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }

/* histogram */
.hist { min-width:calc(var(--n) * 40px); }
.hist-plot { position:relative; display:flex; align-items:flex-end; justify-content:center; gap:6px; height:172px; border-bottom:1px solid var(--line-2); }
.hist-plot::before { content:""; position:absolute; left:0; right:0; bottom:0; height:150px; background:linear-gradient(var(--line) 1px, transparent 1px) 0 0/100% 25%; pointer-events:none; }
.hist-col { position:relative; display:flex; flex:1 1 0; flex-direction:column; align-items:center; justify-content:flex-end; min-width:34px; max-width:64px; height:100%; }
.hist-bar { display:block; width:100%; height:calc(var(--h) * 150px); min-height:2px; background:var(--ink-2); transform:scaleY(0); transform-origin:bottom; transition:transform .7s var(--ease) calc(var(--i) * 40ms), background .15s; }
.hist-pct { margin-bottom:5px; font:500 10.5px var(--mono); color:var(--ink-2); white-space:nowrap; opacity:0; transition:opacity .3s calc(.35s + var(--i) * 40ms); }
.hist.in .hist-bar { transform:none; }
.hist.in .hist-pct { opacity:1; }
.hist-top .hist-bar, .hist-col:hover .hist-bar { background:var(--accent); }
.hist-axis { display:flex; justify-content:center; gap:6px; margin-top:8px; }
.hist-axis span { flex:1 1 0; min-width:34px; max-width:64px; text-align:center; font:500 11px var(--mono); color:var(--ink-2); white-space:nowrap; }
.hist-v .hist-axis span { writing-mode:vertical-rl; transform:rotate(180deg); text-align:left; line-height:24px; font-size:10.5px; }

/* statevector */
.sv { min-width:calc(var(--n) * 7px); }
/* one label per bar: never narrower than the labels, so a tight panel scrolls instead of overlapping them */
.sv:not(.sv-dense) { min-width:max-content; }
.sv-plot { position:relative; display:flex; align-items:flex-end; justify-content:center; gap:4px; height:150px; border-bottom:1px solid var(--line-2); }
.sv-plot::before { content:""; position:absolute; inset:0; background:linear-gradient(var(--line) 1px, transparent 1px) 0 0/100% 25%; pointer-events:none; }
.sv-col { position:relative; display:flex; align-items:flex-end; flex:1 1 0; min-width:5px; max-width:48px; height:100%; }
.sv-bar { display:block; width:100%; height:calc(var(--h) * 100%); background:var(--c); transform:scaleY(0); transform-origin:bottom; transition:transform .6s var(--ease) calc(var(--i) * 14ms); }
.sv.in .sv-bar { transform:none; }
.sv-col:hover .sv-bar { filter:brightness(1.2); }
.sv-dense .sv-plot { gap:2px; }
.sv-axis { display:flex; justify-content:center; gap:4px; margin-top:8px; }
.sv-axis span { flex:1 1 0; min-width:5px; max-width:48px; text-align:center; font:500 10.5px var(--mono); color:var(--ink-2); white-space:nowrap; }
.sv-axis-ends { justify-content:space-between; }
.sv-axis-ends span { flex:none; max-width:none; }
.sv-axis-ends span:nth-child(2) { color:var(--ink-3); }
.sv-legend { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:16px; font-size:12px; color:var(--ink-2); }
.sv-key { display:inline-flex; align-items:center; gap:8px; }
.phase-wheel { display:block; width:18px; height:18px; border-radius:50%; background:var(--phase); -webkit-mask:radial-gradient(circle, transparent 4.5px, #000 5px); mask:radial-gradient(circle, transparent 4.5px, #000 5px); }
.sv-key-bar { display:block; width:6px; height:14px; background:var(--ink-4); }

/* circuit */
.circuit { padding:2px 0 6px; }
.circuit-svg { display:block; }
.c-wire { stroke:var(--line-2); stroke-width:1.25; }
.c-qlabel { font:500 11px var(--mono); fill:var(--ink-3); }
.c-box { fill:var(--bg); stroke:var(--ink); stroke-width:1.2; }
.c-h { fill:var(--bg-ink); }
.c-name { font:600 11px var(--mono); fill:var(--ink); text-anchor:middle; }
.c-h + .c-name { fill:var(--on-accent); }
.c-param { font:400 8.5px var(--mono); fill:var(--ink-3); text-anchor:middle; }
.c-link { stroke:var(--ink); stroke-width:1.2; fill:none; }
.c-dot { fill:var(--ink); }
.c-targ { fill:var(--bg); stroke:var(--ink); stroke-width:1.2; }
.c-swap { stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; fill:none; }
.c-meter { fill:var(--bg-3); stroke:var(--ink-3); stroke-width:1.2; }
.c-needle { fill:none; stroke:var(--ink-2); stroke-width:1.2; stroke-linecap:round; }
.c-cl { stroke:var(--ink-4); stroke-width:1; }
.c-clabel { font:500 9.5px var(--mono); fill:var(--ink-3); }

.qasm-box { margin-top:14px; border:1px solid var(--line); overflow:hidden; }
.qasm-box summary { display:flex; align-items:center; gap:10px; height:38px; padding:0 6px 0 12px; list-style:none; cursor:pointer; background:var(--bg-2); font:500 10.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.qasm-box summary::-webkit-details-marker { display:none; }
.qasm-box summary .ic { transform:rotate(-90deg); transition:transform .2s var(--ease); color:var(--ink-3); }
.qasm-box[open] summary .ic:first-child { transform:none; }
.qasm-lines { color:var(--ink-3); }
.qasm-copy { display:inline-flex; align-items:center; gap:6px; margin-left:auto; height:28px; padding:0 9px; font:500 10.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); }
.qasm-copy .ic { transform:none !important; }
.qasm-copy:hover { background:var(--bg-3); color:var(--ink); }
/* .qasm-box clips its overflow, so the "Copied" tip goes beside the button instead of above it */
.qasm-copy[data-copied]::after { bottom:auto; top:50%; left:auto; right:calc(100% + 6px); transform:translateY(-50%); }
.qasm { max-height:300px; margin:0; padding:12px 14px; overflow:auto; border-top:1px solid var(--line); font-size:12px; line-height:1.65; color:var(--ink-2); }

/* verify */
.verdict { display:flex; align-items:flex-start; gap:12px; padding:14px; border:1px solid var(--line); }
.verdict-icon { display:grid; place-items:center; flex:none; width:30px; height:30px; background:color-mix(in srgb, var(--ok) 14%, transparent); color:var(--ok); }
.verdict.bad .verdict-icon { background:color-mix(in srgb, var(--err) 14%, transparent); color:var(--err); }
.verdict strong { font-size:14px; font-weight:600; }
.verdict p { margin-top:3px; font-size:13px; line-height:1.5; color:var(--ink-2); }
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:1px; margin-top:12px; border:1px solid var(--line); background:var(--line); overflow:hidden; }
.facts div { padding:10px 12px; background:var(--bg); }
.facts dt { font:500 9.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.facts dd { margin-top:2px; font:500 12.5px var(--mono); }
.diff { width:100%; margin-top:12px; border-collapse:collapse; font:12px var(--mono); }
.diff th { padding:6px 8px; text-align:left; font-weight:500; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--line); }
.diff td { padding:6px 8px; border-bottom:1px solid var(--line); }

/* ---------- Bloch sphere ---------- */
.bloch { display:block; overflow:visible; }
.connect-orb .bloch { width:100%; height:100%; }
.b-shell { stroke:var(--line-2); stroke-width:1; }
.b-back { fill:none; stroke:var(--ink-4); stroke-width:.8; stroke-dasharray:2 3; opacity:.7; }
.b-front { fill:none; stroke:var(--ink-3); stroke-width:.9; }
.b-axis { stroke:var(--ink-4); stroke-width:.8; stroke-dasharray:1.5 2.5; }
.b-label { font:500 7.5px var(--mono); fill:var(--ink-3); text-anchor:middle; }
.b-guide { fill:none; stroke:var(--accent); stroke-width:.8; stroke-dasharray:1.5 2; opacity:.55; }
.b-vec { stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; }
.b-origin { fill:var(--ink); }
.b-tip { fill:var(--accent); stroke:var(--bg); stroke-width:1.5; }

/* ---------- dock: composer ---------- */
.dock { flex:none; padding:8px 28px calc(14px + env(safe-area-inset-bottom)); }
.composer, .dock-note { max-width:724px; margin-left:auto; margin-right:auto; }
.composer { position:relative; background:var(--bg); border:1px solid var(--line-2); box-shadow:var(--shadow-2); transition:border-color .15s, box-shadow .15s; }
.composer:focus-within { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft), var(--shadow-2); }
.composer textarea { display:block; width:100%; min-height:52px; max-height:200px; padding:15px 16px 4px; border:0; outline:0; resize:none; background:transparent; font-size:14.5px; line-height:1.5; }
.composer textarea::placeholder { color:var(--ink-3); }
.composer-bar { display:flex; align-items:center; gap:10px; padding:4px 8px 8px; }
.model { position:relative; }
.model-btn { display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 9px; font-size:12.5px; font-weight:500; color:var(--ink-2); transition:background .15s; }
.model-btn:hover, .model-btn[aria-expanded=true] { background:var(--bg-3); color:var(--ink); }
.model-logo { display:block; flex:none; width:16px; height:16px; }
[disabled] .model-logo { opacity:.45; }
.model-menu { left:0; bottom:calc(100% + 8px); width:250px; }
.menu-label { padding:6px 10px 4px; font:500 9.5px var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
.menu button[aria-checked=true] { color:var(--ink); }
.menu-tag { margin-left:auto; font:500 9.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.menu-tag.live { color:var(--accent); }
.menu-note { margin-top:4px; padding:9px 10px 5px; border-top:1px solid var(--line); font-size:11.5px; line-height:1.4; color:var(--ink-3); }
.usage { display:inline-flex; align-items:center; gap:8px; font:500 10.5px var(--mono); color:var(--ink-3); white-space:nowrap; }
.usage .meter { width:40px; flex:none; }
:is(.usage,.who-usage)[data-level=high] .meter i { background:var(--warn); }
:is(.usage,.who-usage)[data-level=full] { color:var(--err); }
:is(.usage,.who-usage)[data-level=full] .meter i { background:var(--err); }
.count { margin-left:auto; font:500 10.5px var(--mono); color:var(--ink-3); }
.count[data-level=high] { color:var(--err); }
.send { position:relative; display:grid; place-items:center; flex:none; width:34px; height:34px; margin-left:auto; background:var(--bg-ink); color:var(--on-accent); transition:background .15s, color .15s; }
.count:not([hidden]) + .send { margin-left:0; }
.connect-send { margin-left:auto; }
.send:hover:not(:disabled) { background:color-mix(in srgb, var(--bg-ink) 85%, var(--bg)); }
.send:disabled { background:var(--bg-3); color:var(--ink-4); }
.composer.busy .send .ic { opacity:0; }
.composer.busy .send::after { content:""; position:absolute; width:14px; height:14px; border:1.5px solid var(--line-2); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.dock-note { margin-top:8px; text-align:center; font-size:11px; line-height:1.45; color:var(--ink-3); }


/* ---------- network ---------- */
.token { display:flex; align-items:center; gap:16px; padding:16px 18px; }
.token-mark { display:grid; place-items:center; flex:none; width:46px; height:46px; border:1px solid var(--line); background:var(--bg-2); }
.token-info { flex:1; min-width:0; }
.token-name { margin-top:4px; font-size:16px; font-weight:500; letter-spacing:-.01em; }
.token-name strong { margin-right:8px; font-weight:600; color:var(--accent); }
.token-ca { display:flex; align-items:center; gap:6px; min-width:0; margin-top:3px; }
.token-ca code { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--ink-2); }
.token-ca code.muted { color:var(--ink-3); }
.token-actions { display:flex; flex-wrap:wrap; gap:8px; }

.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.stats div { display:flex; flex-direction:column; gap:8px; min-width:0; padding:16px 18px; }
.stats div + div { border-left:1px solid var(--line); }
.stats span { font-size:12px; color:var(--ink-3); }
.stats strong { font-size:26px; font-weight:600; letter-spacing:-.025em; line-height:1; font-variant-numeric:tabular-nums; }

.chart-card { padding:18px 20px 14px; }
.chart-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.chart-total { display:flex; align-items:baseline; gap:10px; margin-top:6px; }
.chart-total strong { font-size:32px; font-weight:600; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums; }
.chart-total span { font-size:12px; color:var(--ink-3); }
.seg { display:inline-flex; flex:none; padding:3px; border:1px solid var(--line); background:var(--bg-2); }
.seg button { height:26px; padding:0 10px; font:500 10.5px var(--mono); letter-spacing:.08em; color:var(--ink-3); transition:color .15s; }
.seg button:hover { color:var(--ink); }
.seg button[aria-pressed=true] { background:var(--bg-3); color:var(--ink); box-shadow:0 0 0 1px var(--line-2); }
.chart { margin-top:16px; }
.chart-hint { margin-top:10px; font-size:11.5px; color:var(--ink-3); }
.ac { display:grid; grid-template-columns:minmax(0,1fr) 36px; column-gap:10px; }
.ac-plot { position:relative; height:200px; touch-action:pan-y; }
.ac-plot svg { display:block; width:100%; height:100%; overflow:visible; }
.ac-line { fill:none; stroke:var(--accent); stroke-width:1.75; stroke-linejoin:round; }
.ac-grid line { stroke:var(--line); stroke-width:1; }
.ac-y { position:relative; }
.ac-y span { position:absolute; left:0; transform:translateY(-50%); font:500 10px var(--mono); color:var(--ink-3); }
.ac-x { display:flex; justify-content:space-between; gap:10px; margin-top:8px; font:500 10px var(--mono); color:var(--ink-3); }
.ac-guide { position:absolute; top:0; bottom:0; width:1px; background:var(--line-2); pointer-events:none; }
.ac-dot { position:absolute; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border:2px solid var(--accent); background:var(--bg); pointer-events:none; }
.ac-tip { position:absolute; top:0; transform:translate(-50%, calc(-100% - 12px)); padding:5px 9px; background:var(--bg-ink); color:var(--on-accent); font:500 10.5px var(--mono); white-space:nowrap; pointer-events:none; box-shadow:var(--shadow-2); }
.ac-tip.below { transform:translate(-50%, 12px); }
.ac-empty { position:absolute; inset:0; display:grid; place-items:center; font-size:12px; color:var(--ink-3); pointer-events:none; }
.ac-empty span { padding:4px 10px; border:1px solid var(--line); background:var(--bg); }

.algo-cols, .algo { display:grid; grid-template-columns:minmax(0,1.8fr) 120px 56px 80px 18px; align-items:center; gap:16px; }
.algo-cols { margin:26px 0 12px; padding:0 17px; font:500 9.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.algo-cols span:nth-child(3), .algo-runs { text-align:right; }
.algo-list { display:grid; gap:8px; }
.algo {
  width:100%; min-height:70px; padding:12px 16px; text-align:left; background:var(--bg); border:1px solid var(--line);
  transition:border-color .15s, box-shadow .2s;
}
.algo:hover { border-color:var(--ink-4); box-shadow:var(--shadow-1); }
.algo > .ic { color:var(--ink-4); transition:transform .2s var(--ease), color .15s; }
.algo:hover > .ic { color:var(--ink); transform:translateX(2px); }
.algo-id { display:flex; align-items:center; gap:12px; min-width:0; }
.algo-glyph { display:grid; place-items:center; flex:none; width:42px; height:42px; border:1px solid var(--line); background:var(--bg-2); font:500 12px var(--mono); color:var(--ink); }
.algo-name { display:flex; flex-direction:column; min-width:0; }
.algo-name strong { font-size:13.5px; font-weight:600; }
.algo-name small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--ink-3); }
.algo-spark { display:flex; flex-direction:column; gap:1px; color:var(--accent); }
.algo-spark small { font:500 9.5px var(--mono); color:var(--ink-3); }
.spark { display:block; }
.spark.flat { color:var(--ink-4); }
.algo-runs { font:500 12.5px var(--mono); color:var(--ink-2); }
.algo-runs-unit { display:none; color:var(--ink-3); }
.algo-status { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-2); }
.algo-status i { width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
/* a narrow centre column (beside the sidebar, or sidebar + feed): drop the constant "Ready" column */
.view-network .view-pad { container-type:inline-size; }
@container (max-width:680px) {
  .algo, .algo-cols { grid-template-columns:minmax(0,1fr) 120px 56px 18px; }
  .algo-status, .algo-cols span:nth-child(4) { display:none; }
}

/* ---------- circuits (sessions) ---------- */
.session-list { display:grid; gap:8px; }
.session {
  display:grid; grid-template-columns:42px minmax(0,1fr) auto 18px; align-items:center; gap:14px; padding:12px 16px;
  background:var(--bg); border:1px solid var(--line); transition:border-color .15s, box-shadow .2s;
}
.session:hover { border-color:var(--ink-4); box-shadow:var(--shadow-1); }
.session > .ic { color:var(--ink-4); }
.session-glyph { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); background:var(--bg-2); color:var(--ink-2); }
.session-name { display:flex; flex-direction:column; min-width:0; }
.session-name strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; font-weight:500; }
.session-name small { font:500 10.5px var(--mono); color:var(--ink-3); }
.session-runs { font:500 11px var(--mono); color:var(--ink-3); white-space:nowrap; }
.panel-empty { display:flex; flex-direction:column; align-items:center; gap:6px; padding:44px 24px; text-align:center; border:1px dashed var(--line-2); background:var(--bg-2); }
.panel-empty h3 { font-size:15px; font-weight:600; letter-spacing:-.01em; }
.panel-empty p { max-width:380px; font-size:13px; color:var(--ink-2); }
.panel-empty .btn { margin-top:10px; }

/* ---------- live feed ---------- */
.feed-head { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; height:var(--head-h); padding:0 20px; border-bottom:1px solid var(--line); }
.feed-head h2 { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; letter-spacing:-.01em; }
.feed-head p { margin-top:4px; font:500 10px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.feed-tabs { flex:none; display:flex; gap:20px; padding:0 20px; border-bottom:1px solid var(--line); }
.feed-tabs button { position:relative; height:44px; font-size:12.5px; font-weight:500; color:var(--ink-3); transition:color .15s; }
.feed-tabs button:hover, .feed-tabs button[aria-pressed=true] { color:var(--ink); }
.feed-tabs button[aria-pressed=true]::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent); }
.feed-tabs .n { margin-left:6px; font:500 10px var(--mono); color:var(--ink-3); }
.feed-list { flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; padding:12px; overflow-y:auto; }
.ev { display:grid; grid-template-columns:30px minmax(0,1fr); gap:11px; padding:12px; background:var(--bg); border:1px solid var(--line); }
.ev-head { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:20px; }
.ev-wallet { font:500 11px var(--mono); color:var(--ink-3); }
.ket { flex:none; padding:1px 6px; background:var(--accent-soft); color:var(--accent-ink); font:500 10.5px/1.6 var(--mono); }
.ev-title { display:-webkit-box; margin-top:3px; overflow:hidden; font-size:13px; font-weight:500; line-height:1.4; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
.ev-meta { margin-top:5px; font:400 10.5px var(--mono); color:var(--ink-3); }
.feed-empty { display:flex; flex-direction:column; align-items:center; gap:6px; margin:auto 0; padding:32px 20px; text-align:center; }
.feed-empty h3 { font-size:13.5px; font-weight:600; }
.feed-empty p { max-width:250px; font-size:12.5px; line-height:1.5; color:var(--ink-2); }
.feed-empty .btn { margin-top:8px; }
.feed-empty::before { content:""; width:34px; height:34px; margin-bottom:6px; border:1.5px dashed var(--line-2); }
.feed-empty-note { margin:auto; font:500 10.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.feed-foot { flex:none; display:flex; align-items:center; gap:9px; height:calc(42px + env(safe-area-inset-bottom)); padding:0 20px env(safe-area-inset-bottom); border-top:1px solid var(--line); font:500 10px var(--mono); letter-spacing:.05em; color:var(--ink-3); white-space:nowrap; overflow:hidden; }
.feed-foot[data-ok=false] .live-dot { background:var(--warn); box-shadow:0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent); }

/* ---------- connect modal ---------- */
/* top-anchored (not centred), so the card grows downward instead of jumping when a status line appears */
.connect {
  width:460px; max-width:calc(100vw - 32px); max-height:calc(100dvh - max(16px, 10dvh) - 16px); margin:max(16px, 10dvh) auto auto;
  padding:0; border:0; background:transparent; color:var(--ink); overflow:visible;
}
.connect::backdrop { background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.connect[open] { animation:pop .22s var(--ease); }
@keyframes pop { from { opacity:0; transform:translateY(8px) scale(.985); } }
.connect-card { max-height:calc(100dvh - max(16px, 10dvh) - 16px); overflow:auto; background:var(--bg); border:1px solid var(--line-2); box-shadow:var(--shadow-2); }
.connect-hero {
  position:relative; display:flex; align-items:center; gap:22px; padding:22px 24px; border-bottom:1px solid var(--line);
  background:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.3px) 0 0/16px 16px, var(--bg-2);
}
.connect-orb { flex:none; width:96px; height:96px; padding:4px; border:1px solid var(--line); background:var(--bg); box-shadow:var(--shadow-1); }
.steps { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.steps li { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-3); transition:color .2s; }
.step-idx { font:500 10px var(--mono); color:var(--ink-4); }
.step-dot { position:relative; display:grid; place-items:center; flex:none; width:16px; height:16px; border:1.5px solid var(--line-2); border-radius:50%; background:var(--bg); transition:background .2s, border-color .2s; }
.steps [data-state=current], .steps [data-state=active] { color:var(--ink); font-weight:500; }
.steps [data-state=current] .step-dot { border-color:var(--ink-3); }
.steps [data-state=active] .step-dot { border-color:var(--accent-soft); border-top-color:var(--accent); animation:spin .9s linear infinite; }
.steps [data-state=done] { color:var(--ink-2); }
.steps [data-state=done] .step-dot { border-color:var(--ink); background:var(--ink); }
.steps [data-state=done] .step-dot::after { content:""; width:6px; height:3.5px; margin-top:-1.5px; border:solid var(--on-accent); border-width:0 0 1.5px 1.5px; transform:rotate(-45deg); }
.steps [data-state=error] { color:var(--err); }
.steps [data-state=error] .step-dot { border-color:var(--err); background:color-mix(in srgb, var(--err) 14%, transparent); }
.connect-close { position:absolute; top:14px; right:14px; }
.connect-body { padding:22px 24px 20px; }
.connect-body h2 { margin-top:10px; font-size:26px; font-weight:600; letter-spacing:-.025em; line-height:1.15; }
.connect-desc { margin-top:8px; font-size:13.5px; line-height:1.55; color:var(--ink-2); }
.connect-none { margin-top:14px; padding:10px 12px; border:1px solid var(--line); background:var(--bg-2); font-size:12.5px; line-height:1.5; color:var(--ink-2); }
.wallets { display:grid; gap:8px; margin-top:16px; }
.wallet { display:flex; align-items:center; gap:12px; width:100%; height:54px; padding:0 14px 0 12px; text-align:left; background:var(--bg); border:1px solid var(--line-2); transition:border-color .15s, box-shadow .15s; }
.wallet:hover:not(:disabled) { border-color:var(--ink); box-shadow:var(--shadow-1); }
.wallet:disabled { opacity:.55; }
.wallet-logo { display:block; flex:none; width:30px; height:30px; }
.wallet-name { flex:1; font-size:14px; font-weight:500; }
.wallet-tag { display:inline-flex; align-items:center; gap:6px; font:500 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.wallet-tag.ok { color:var(--ok); }
.wallet-tag.ok::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--ok); }
.connect-status { margin-top:14px; font-size:12.5px; line-height:1.5; color:var(--ink-2); }
.connect-status:empty { display:none; }
.connect-status[data-kind=err] { color:var(--err); }
.connect-status[data-kind=ok] { color:var(--ok); }
.connect-legal { margin-top:16px; font-size:11.5px; color:var(--ink-3); }
.connect-legal a { text-decoration:underline; text-underline-offset:2px; }
.connect-legal a:hover { color:var(--ink); }

/* ---------- ≤ 1180px: live feed becomes a right drawer ---------- */
@media (max-width:1180px) {
  .app { grid-template-columns:232px minmax(0,1fr); }
  .feed {
    position:fixed; z-index:60; top:0; right:0; bottom:0; width:min(360px,92vw); box-shadow:var(--shadow-2);
    padding-right:env(safe-area-inset-right);
    transform:translateX(100%); visibility:hidden; transition:transform .25s var(--ease), visibility 0s .25s;
  }
  .feed.open { transform:none; visibility:visible; transition:transform .25s var(--ease); }
  .feed-btn, .feed .drawer-close { display:inline-grid; }
  .scrim { display:block; position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.6); }
}

/* ---------- ≤ 820px: sidebar becomes a top bar + left drawer ---------- */
@media (max-width:820px) {
  :root { --head-h:72px; }
  .app { grid-template-columns:minmax(0,1fr); grid-template-rows:56px minmax(0,1fr); }
  .topbar { display:flex; align-items:center; gap:10px; padding:0 16px; background:var(--bg-2); border-bottom:1px solid var(--line); }
  .topbar .brand { margin-right:auto; }
  .sb-foot nav a { display:inline-flex; align-items:center; min-height:40px; }
  .topbar .wordmark { font-size:19px; }
  .chip-who { display:flex; align-items:center; gap:8px; height:40px; padding:0 10px 0 6px; border:1px solid var(--line-2); background:var(--bg); }
  .chip-addr { font:500 12px var(--mono); }
  .sidebar {
    position:fixed; z-index:60; top:0; left:0; bottom:0; width:min(300px,88vw); box-shadow:var(--shadow-2);
    padding-left:max(14px, env(safe-area-inset-left));
    transform:translateX(-100%); visibility:hidden; transition:transform .25s var(--ease), visibility 0s .25s;
  }
  .sidebar.open { transform:none; visibility:visible; transition:transform .25s var(--ease); }
  .sidebar .drawer-close { display:inline-grid; }
  .head { padding:0 16px; }
  .head h1 { margin-top:3px; font-size:22px; }
  .thread-inner { padding:20px 16px 8px; }
  .dock { padding:8px 16px calc(10px + env(safe-area-inset-bottom)); }
  .view-pad { padding:16px 16px 40px; }
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats div:nth-child(3) { border-left:0; }
  .stats div:nth-child(n+3) { border-top:1px solid var(--line); }
  .algo-cols { display:none; }
  .algo { grid-template-columns:minmax(0,1fr) auto 18px; }
  .algo-spark, .algo-status { display:none; }
  .algo-runs-unit { display:inline; font-size:10.5px; }
  .btn, .icon-btn, .send, .model-btn, .seg button, .cta { min-height:40px; }
  .icon-btn, .send { min-width:40px; }
  .btn-sm { height:40px; }
  .menu button, .qasm-box summary { min-height:44px; }
  .qasm-copy { height:40px; }
  .seg button { min-width:44px; }
  .tabs [role=tab] { min-width:44px; padding:0 4px; }
  /* iOS zooms the page into any focused field under 16px */
  .composer textarea { font-size:16px; }
}

/* ---------- phones ---------- */
@media (max-width:560px) {
  .pill-online { display:none; }
  .head .btn span { display:none; }
  .head .btn { width:40px; padding:0; }
  .empty h2 { font-size:24px; }
  .chips { grid-template-columns:minmax(0,1fr); margin-top:22px; }
  .chip-art { height:60px; padding:11px 0; }
  .chip-body { padding:13px 15px 15px; }
  .pipe-demo { margin-top:26px; }
  .msg-user { max-width:88%; }
  .run-head, .run-plan, .run-answer, .tab-panel, .run-foot { padding-left:14px; padding-right:14px; }
  .tabs { padding:0 14px; gap:16px; }
  .run-error { margin-left:14px; margin-right:14px; flex-wrap:wrap; }
  .pipe { gap:6px; padding:10px 14px 12px; }
  .pipe-idx { display:none; }
  .pipe-name { font-size:11px; }
  .pipe-ms { font-size:9.5px; }
  .run-chips, .run-foot span:nth-child(2) { display:none; }
  /* 8 outcomes (3 qubits) fit a 375px or 360px panel without scrolling */
  .hist { min-width:calc(var(--n) * 36px); }
  .hist-plot, .hist-axis { gap:4px; }
  .hist-col, .hist-axis span { min-width:32px; }
  .hist-pct { font-size:9.5px; }
  .composer-bar .usage .meter { display:none; }
  .dock-note { font-size:10.5px; }
  .token { flex-wrap:wrap; }
  .token-actions { width:100%; }
  .chart-card { padding:16px 14px 12px; }
  .chart-total strong { font-size:26px; }
  .stats strong { font-size:22px; }
  .stats div { padding:14px; }
  .algo { gap:12px; padding:12px 14px; }
  .session { grid-template-columns:42px minmax(0,1fr) 18px; }
  .session-runs { display:none; }
  .connect-hero { padding:18px 18px; gap:16px; }
  .connect-orb { width:80px; height:80px; }
  .connect-body { padding:18px 18px 16px; }
  .connect-body h2 { font-size:23px; }
}

/* ---------- short screens (768-900px laptops, phones): keep the wallet and footer in view ---------- */
@media (max-height:900px) {
  .sb-links { display:none; } /* "How it works" is also a CTA above; both pages are linked from the docs */
  .sidebar-top { margin-bottom:14px; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0s !important; scroll-behavior:auto !important; }
  .twinkle { display:none; }
}