/* fragmentum: clinical-instrument theme */
:root {
  --bg: #07101a;
  --bg-2: #0a1722;
  --panel: #0d1c2a;
  --panel-2: #102434;
  --line: rgba(120, 160, 190, 0.14);
  --line-2: rgba(120, 160, 190, 0.26);
  --ink: #e9f1f7;
  --muted: #9bb0c2;
  /* Dimmest text tier, below --muted. Lightened from #7c91a8 (5.32:1 on --panel)
     to clear WCAG AAA 7:1 there and stay well above AA on --panel-2, while
     remaining visibly fainter than --muted so the type hierarchy is preserved. */
  --faint: #97abc0;
  --teal: #5ac8dc;
  --teal-2: #2ba6c4;
  --teal-deep: #0c4655;
  --blue: #7aa7ff;
  --rose: #ff7d97;
  --display: "Fraunces", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --maxw: 1120px;
  --side-panel-w: min(460px, 94vw);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background-image:
    radial-gradient(900px 600px at 82% -8%, rgba(43, 166, 196, 0.16), transparent 60%),
    radial-gradient(700px 500px at -10% 8%, rgba(122, 167, 255, 0.09), transparent 55%),
    linear-gradient(var(--bg), var(--bg));
}

/* faint dotted grid + grain */
.grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image: radial-gradient(rgba(120, 160, 190, 0.06) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
}

main, .site-head, .site-foot { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }

/* Skip-to-content link: hidden until it receives keyboard focus, then pinned top-left so a
   keyboard user can bypass the header/nav (WCAG 2.4.1). */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--panel); color: var(--ink); padding: 0.5rem 0.9rem; border-radius: 8px; border: 1px solid var(--line-2); outline: 2px solid var(--teal); outline-offset: 2px; }

.section { max-width: var(--maxw); margin: 0 auto; padding: 5.5rem 1.5rem; }
/* Offset in-page anchor jumps so the sticky header does not cover the target heading. */
.section, .hero, #top { scroll-margin-top: 5rem; }
.section-title { font-family: var(--display); font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.6rem); letter-spacing: -0.02em; line-height: 1.14; padding-bottom: 0.05em; }
.section-sub { color: var(--muted); max-width: 62ch; margin-top: 0.8rem; }

/* header */
.site-head {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--maxw); margin: 0 auto; padding: 1.1rem 1.5rem;
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(10px);
  background: linear-gradient(rgba(7, 16, 26, 0.72), rgba(7, 16, 26, 0.5));
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 0.55rem; font-family: var(--display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; }
.brand-duck { width: 30px; height: 30px; flex: none; border-radius: 7px; }
.site-nav { display: flex; gap: 1.5rem; font-size: 0.92rem; color: var(--muted); }
.site-nav a { transition: color 0.2s; }
.site-nav a:hover { color: var(--teal); }

/* hero */
.hero {
  max-width: var(--maxw); margin: 0 auto; padding: 3.5rem 1.5rem 2.5rem;
  display: flex; flex-direction: column; gap: 1.8rem;
  position: relative;
}
.hero-intro { max-width: 62rem; }
/* Two-column hero: value prop + CTAs on the left, an illustration of the flow
   (ask -> agent picks & chains tools -> reproducible result) on the right. */
.hero-top { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 2.6rem; align-items: center; }
.hero-visual { display: flex; justify-content: center; min-width: 0; }
.hero-illo { display: block; width: 100%; max-width: 440px; height: auto; }
@media (max-width: 900px) { .hero-top { grid-template-columns: 1fr; gap: 1.6rem; } }
/* Keep the mobile hero lean: the rotating showcase below already carries the story. */
@media (max-width: 760px) { .hero-visual { display: none; } }
.hero-glow {
  position: absolute; right: 4%; top: 8%; width: 420px; height: 420px; z-index: -1;
  background: radial-gradient(circle, rgba(90, 200, 220, 0.20), transparent 65%);
  filter: blur(20px);
}
.eyebrow { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-2); }
.hero h1 { font-family: var(--display); font-weight: 600; font-size: clamp(2.5rem, 6.4vw, 4.6rem); line-height: 1.16; letter-spacing: -0.035em; margin: 1.1rem 0 0; padding-bottom: 0.14em; }
/* The italic display face has deep descenders (the "y" in "actually", the tail of
   "run"). With background-clip: text the gradient is painted only inside the
   element's box; when the inline wraps, the box fragments and the descenders fall
   outside the painted area and render transparent ("y"/"n" cut off). Padding +
   box-decoration-break did not survive the wrap. Make the span an atomic
   inline-block so it can never fragment, and pad the bottom so the descenders sit
   inside the single painted box. */
.grad { background: linear-gradient(105deg, var(--teal), #9fe6f0 55%, var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; display: inline-block; padding: 0 0.14em 0.2em 0; margin-right: -0.14em; white-space: nowrap; }
/* On narrow screens let the gradient headline wrap instead of overflowing (e.g. the longer
   German sales hero line). The span stays an inline-block, so it remains one painted
   gradient box even across lines. */
@media (max-width: 640px) { .hero h1 .grad { white-space: normal; } }
.lede { color: var(--muted); font-size: 1.12rem; max-width: 62ch; margin-top: 1.5rem; }
.hero-cta { display: flex; gap: 0.8rem; margin-top: 2rem; flex-wrap: wrap; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--sans); font-weight: 500; font-size: 0.95rem; padding: 0.75rem 1.3rem; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: transform 0.15s, box-shadow 0.25s, background 0.2s; }
.btn.primary { background: linear-gradient(180deg, var(--teal), var(--teal-2)); color: #042029; box-shadow: 0 8px 30px -10px rgba(90, 200, 220, 0.6); }
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -12px rgba(90, 200, 220, 0.8); }
.btn.ghost { border-color: var(--line-2); color: var(--ink); background: rgba(255, 255, 255, 0.02); }
.btn.ghost:hover { border-color: var(--teal); color: var(--teal); }
/* Pressed feedback: settle the hover lift and soften the primary glow so a click registers. */
.btn:active { transform: translateY(0); }
.btn.primary:active { box-shadow: 0 4px 16px -8px rgba(90, 200, 220, 0.6); }
/* Keyboard focus ring for every button and icon button (not just hover). */
.btn:focus-visible, .icon-btn:focus-visible, .nav-cta:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* Same visible ring for plain text links that previously had :hover only, so
   keyboard users can see the nav, footer, and source/credit links they tab to
   (WCAG 2.4.7). Matches the button pattern above. */
.site-nav a:focus-visible, .foot-right a:focus-visible, .source a:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 3px; }

/* hero showcase: a rotating use case (card, left) + that field's pipeline (art, right),
   with field pills below that double as navigation and a map of the catalog. */
/* Beside the hero the example stacks: a compact card (field + one-line ask) above its
   pipeline diagram, as one visual unit. */
.hero-show { display: flex; flex-direction: column; gap: 0.9rem; align-items: stretch; }
.hs-card { --accent: var(--teal); background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: 16px; padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; }
.hs-field { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.hs-soon { letter-spacing: 0.06em; text-transform: none; color: var(--faint); border: 1px solid var(--line-2); border-radius: 999px; padding: 0.05rem 0.5rem; font-size: 0.66rem; }
.hs-ask { font-family: var(--display); font-weight: 500; font-size: clamp(1.15rem, 2.1vw, 1.5rem); line-height: 1.3; color: var(--ink); }
.hs-blurb { color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
.hs-steps { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.2rem 0; padding: 0; }
.hs-steps li { font-family: var(--mono); font-size: 0.72rem; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid var(--line-2); border-radius: 999px; padding: 0.24rem 0.62rem; }
/* Connector between chips, rendered as its own item so it sits in the gap, never inside a
   chip border or on a wrapped line break. */
.hs-steps .hs-step-sep { background: none; border: none; padding: 0 0.05rem; color: var(--faint); font-size: 0.8rem; }
.hs-output { margin-top: auto; padding-top: 0.4rem; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.hs-output span { color: var(--accent); font-weight: 600; }
.hs-art { --accent: var(--teal); background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%), linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 16px; display: flex; align-items: center; justify-content: center; padding: 0.8rem 1rem; min-height: 288px; overflow: hidden; }
/* Cap the diagram by width (it has a variable aspect) and let height follow the viewBox, so
   tall (5-step) pipelines are not clamped and short ones are not letterboxed. */
.hs-art svg { display: block; width: 100%; max-width: 340px; height: auto; }
/* No-JS fallback: #hs-art is empty, so do not render a bare panel next to the static slide. */
.hs-art:empty { display: none; }
.hs-fade { animation: hsfade 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes hsfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.hero-fields { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.hs-pill { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); background: rgba(255, 255, 255, 0.02); border: 1px solid var(--line); border-radius: 999px; padding: 0.32rem 0.7rem; cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.hs-pill:hover { color: var(--ink); border-color: var(--line-2); }
.hs-pill.active { color: var(--teal); border-color: var(--teal); background: rgba(90, 200, 220, 0.10); }
.hs-pill.future { font-style: italic; }
.hs-pill.future::before { content: "\25C7\00a0"; color: var(--faint); }
.hs-pill.active.future::before { color: currentColor; }
.hs-pill:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* Non-interactive cue that the catalog keeps growing. */
.hs-grow { color: var(--teal-2); border-style: dashed; cursor: default; }
.hs-grow:hover { color: var(--teal-2); border-color: var(--line); }
.hero-controls { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-top: -0.6rem; }
.hs-toggle { flex: none; font-family: var(--mono); font-size: 0.72rem; color: var(--muted); background: rgba(255, 255, 255, 0.02); border: 1px solid var(--line-2); border-radius: 999px; padding: 0.3rem 0.8rem; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.hs-toggle:hover { color: var(--teal); border-color: var(--teal); }
.hs-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* On touch devices, grow the compact showcase controls to the 44px minimum tap
   target (WCAG 2.5.5) without changing the tight desktop-mouse layout. */
@media (pointer: coarse) {
  .hs-pill, .hs-toggle { min-height: 44px; }
}
.hero-fields-note { font-family: var(--mono); font-size: 0.72rem; color: var(--faint); margin: 0; }

/* "how it works" stage cards */
.stages { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.5rem; }
.stage { position: relative; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem 1.2rem; overflow: hidden; transition: border-color 0.25s, transform 0.25s; }
.stage::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--teal), transparent); opacity: 0.5; }
.stage:hover { border-color: var(--line-2); transform: translateY(-3px); }
.stage-no { font-family: var(--mono); font-size: 0.8rem; color: var(--teal-2); }
.stage h3 { font-family: var(--display); font-weight: 500; font-size: 1.18rem; margin: 0.5rem 0 0.4rem; }
.stage p { color: var(--muted); font-size: 0.92rem; }
.stage p code { font-family: var(--mono); font-size: 0.85em; color: var(--teal); }
.stage .src { display: block; margin-top: 0.9rem; font-family: var(--mono); font-size: 0.7rem; color: var(--faint); }

/* pipeline chain explainer */
.how-flow { margin-top: 3rem; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 16px; padding: 1.8rem; }
.flow-title { font-family: var(--display); font-weight: 500; font-size: 1.35rem; }
.chain { display: flex; align-items: stretch; gap: 0.6rem; margin-top: 1.6rem; flex-wrap: wrap; }
.chain-step { flex: 1 1 200px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 1rem 1.1rem; }
.cs-coord { display: block; font-family: var(--mono); font-size: 0.82rem; color: var(--teal); word-break: break-word; }
.cs-io { display: block; margin-top: 0.5rem; font-size: 0.85rem; color: var(--muted); }
.chain-arrow { align-self: center; font-family: var(--mono); color: var(--teal-2); font-size: 1.3rem; }

/* install + code */
.install-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.2rem; }
.install-grid > * { min-width: 0; }
.install-grid h3 { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-2); margin-bottom: 0.7rem; font-weight: 500; }
.install-note { color: var(--muted); font-size: 0.92rem; margin-bottom: 0.9rem; }
.install-note code, .demo-note code, .section-sub code { font-family: var(--mono); font-size: 0.85em; color: var(--teal); background: rgba(90, 200, 220, 0.08); padding: 0.05rem 0.34rem; border-radius: 5px; }
.codeblock { background: #050b12; border: 1px solid var(--line-2); border-radius: 12px; padding: 1.1rem 1.2rem; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(90, 200, 220, 0.35) transparent; }
.codeblock::-webkit-scrollbar { height: 7px; }
.codeblock::-webkit-scrollbar-thumb { background: rgba(90, 200, 220, 0.3); border-radius: 4px; }
.codeblock code { font-family: var(--mono); font-size: 0.85rem; color: #cde6ee; white-space: pre; line-height: 1.7; }
.codeblock.small code { font-size: 0.8rem; }

/* sources */
.source-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin-top: 2.2rem; }
.source { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; background: var(--panel); display: flex; flex-direction: column; gap: 0.25rem; }
.source b { font-family: var(--display); font-weight: 500; font-size: 1.05rem; }
.source span { color: var(--faint); font-size: 0.82rem; }
.source a { margin-top: 0.4rem; font-family: var(--mono); font-size: 0.74rem; color: var(--teal-2); }
.source a:hover { color: var(--teal); }

/* data and compute: plain bullets answering where inputs go and where work runs */
.data-points { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.2rem; }
.data-points li { background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--teal-2); border-radius: 12px; padding: 1rem 1.15rem; color: var(--muted); font-size: 0.92rem; line-height: 1.6; }
.data-points li b { color: var(--ink); font-family: var(--display); font-weight: 500; }
@media (max-width: 720px) { .data-points { grid-template-columns: 1fr; } }

/* disclaimer */
.disclaimer { max-width: var(--maxw); margin: 0 auto; padding: 1rem 1.5rem 4rem; }
.disclaimer p { border-left: 2px solid var(--blue); padding: 0.4rem 0 0.4rem 1.1rem; color: var(--muted); font-size: 0.9rem; max-width: 78ch; }
.disclaimer b { color: var(--ink); }

/* footer */
.site-foot { border-top: 1px solid var(--line); margin-top: 2rem; }
.site-foot { display: flex; justify-content: space-between; align-items: center; max-width: var(--maxw); margin-inline: auto; padding: 2rem 1.5rem; flex-wrap: wrap; gap: 1rem; color: var(--muted); font-size: 0.88rem; }
.brand-mini { font-family: var(--display); font-weight: 600; color: var(--ink); margin-right: 0.8rem; }
.foot-right { display: flex; gap: 1.4rem; }
.foot-right a:hover { color: var(--teal); }

/* reveal on load */
.reveal { opacity: 0; transform: translateY(16px); animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.reveal.d1 { animation-delay: 0.08s; }
.reveal.d2 { animation-delay: 0.18s; }
.reveal.d3 { animation-delay: 0.3s; }
.reveal.d4 { animation-delay: 0.42s; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

.demo-note { color: var(--faint); font-size: 0.85rem; margin-top: 1.2rem; max-width: 78ch; }

/* MCP agent demo */
.agent { padding-top: 1.5rem; }
.agent-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.2rem; margin-bottom: 1.4rem; }
.agent-status { flex: none; font-family: var(--mono); font-size: 0.72rem; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; margin-top: 0.4rem; }
.agent-status.up { color: var(--teal); border-color: var(--teal); }
.agent-status.off { color: var(--rose); border-color: var(--rose); }
/* The console is a chat: a scrollable transcript that fills the space, with the
   composer pinned at the bottom so the input is always reachable. */
.agent-console { display: flex; flex-direction: column; height: clamp(560px, 90vh, 1120px); background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-2); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8); }
/* Landing page (no body.app) recorded demo: let the console grow to fit the whole
   transcript so every tool output stays visible, instead of a fixed-height box that
   scrolls earlier outputs out of view. The page scrolls, not the box. The live chat
   (body.app, app.html) keeps its fixed-height scrolling console. */
body:not(.app) .agent-console { height: auto; overflow: visible; position: relative; min-height: 320px; }
body:not(.app) .agent-out { flex: none; overflow: visible; }
body:not(.app) .t-tool pre { max-height: none; }

/* Landing demo play control. The recorded walkthrough does not autoplay; it plays when the
   visitor hits this button, and can be replayed afterwards. */
.agent-play {
  position: absolute; inset: 0; z-index: 3; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.95rem;
  border: 0; border-radius: 18px; font: inherit; color: var(--ink);
  background: radial-gradient(120% 120% at 50% 40%, rgba(10, 16, 26, 0.55), rgba(8, 12, 20, 0.78));
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: background 0.2s ease;
}
.agent-play:hover { background: radial-gradient(120% 120% at 50% 40%, rgba(10, 16, 26, 0.42), rgba(8, 12, 20, 0.66)); }
.agent-play:focus-visible { outline: 2px solid var(--teal); outline-offset: -4px; }
.agent-play-icon {
  width: 64px; height: 64px; border-radius: 999px; background: var(--teal); color: #06121a;
  display: grid; place-items: center; font-size: 1.5rem; padding-left: 0.18em; /* optically centre the triangle */
  box-shadow: 0 14px 44px -14px rgba(0, 0, 0, 0.85); transition: transform 0.15s ease;
}
.agent-play:hover .agent-play-icon { transform: scale(1.07); }
.agent-play-label { font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.04em; color: var(--ink); }
/* Small replay pill, shown after the walkthrough finishes so the transcript stays readable. */
.agent-replay {
  position: absolute; top: 0.8rem; right: 0.8rem; z-index: 3; cursor: pointer;
  font-family: var(--mono); font-size: 0.72rem; padding: 0.32rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--panel); color: var(--muted);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.agent-replay:hover { color: var(--teal); border-color: var(--teal); }
.agent-play.is-hidden, .agent-replay.is-hidden { display: none; }
/* Once played, the console hugs its content again. */
body:not(.app) .agent-console.is-played { min-height: 0; }
.agent-composer { flex: none; padding: 1rem 1.6rem 1.2rem; border-top: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent); }
.agent-empty { margin: auto; max-width: 48ch; text-align: center; color: var(--muted); font-size: 0.92rem; }
.t-user { align-self: flex-end; width: fit-content; max-width: 85%; background: rgba(122, 167, 255, 0.12); border: 1px solid var(--blue); border-radius: 12px 12px 4px 12px; padding: 0.55rem 0.85rem; font-family: var(--mono); font-size: 0.85rem; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
#agent-prompt { width: 100%; background: var(--bg); border: 1px solid var(--line-2); border-radius: 12px; color: var(--ink); font-family: var(--mono); font-size: 0.9rem; padding: 0.8rem 0.9rem; resize: none; max-height: 180px; overflow-y: auto; line-height: 1.55; }
#agent-prompt:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(90, 200, 220, 0.12); }
.agent-row { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.7rem; flex-wrap: wrap; }
.agent-hint { color: var(--faint); font-size: 0.82rem; }
/* Persistent "working" cue on the run button while a run is in flight. */
.btn.is-working::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 0.55rem; vertical-align: -1px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* per-visit file upload (shown only when the backend reports uploads: true) */
.agent-upload { margin: 0 0 0.7rem; padding: 0.35rem 0.8rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(122, 167, 255, 0.04); }
.agent-upload[hidden] { display: none; }
.upload-summary { cursor: pointer; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-2); padding: 0.45rem 0.1rem; }
.upload-summary:hover { color: var(--teal); }
.agent-upload[open] .upload-row { margin-top: 0.5rem; }
.upload-label { display: block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-2); margin-bottom: 0.6rem; }
.upload-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.upload-row input[type="file"] { color: var(--muted); font-family: var(--sans); font-size: 0.85rem; max-width: 100%; }
.upload-row input[type="file"]::file-selector-button { font-family: var(--sans); font-size: 0.85rem; color: var(--ink); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-2); border-radius: 8px; padding: 0.4rem 0.8rem; margin-right: 0.7rem; cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.upload-row input[type="file"]::file-selector-button:hover { border-color: var(--teal); color: var(--teal); }
.upload-status { display: block; margin-top: 0.6rem; font-family: var(--mono); font-size: 0.76rem; color: var(--muted); }
.upload-list { margin: 0.5rem 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 0.25rem; max-height: 84px; overflow-y: auto; }
.upload-list li { font-family: var(--mono); font-size: 0.74rem; color: var(--teal); word-break: break-all; }

/* per-visit result downloads (shown only when the backend reports downloads: true) */
.agent-results { flex: none; margin: 0; padding: 0.5rem 1.6rem 0.55rem; border-top: 1px solid var(--line-2); background: rgba(90, 200, 220, 0.05); }
.agent-results[hidden] { display: none; }
.results-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.results-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-2); }
.results-head .btn { padding: 0.4rem 0.9rem; font-size: 0.82rem; }
.results-status { display: block; margin-top: 0.6rem; font-family: var(--mono); font-size: 0.76rem; color: var(--muted); }
.results-list { margin: 0.4rem 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 0.25rem; max-height: 88px; overflow-y: auto; }
.results-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; font-family: var(--mono); font-size: 0.78rem; }
.results-list a { color: var(--teal); word-break: break-all; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.results-list a:hover { border-bottom-color: var(--teal); }
.results-size { flex: none; color: var(--muted); font-size: 0.72rem; }

.agent-out { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.4rem 1.6rem; display: flex; flex-direction: column; align-items: stretch; gap: 0.9rem; }
.t-text { background: rgba(90, 200, 220, 0.05); border-left: 2px solid var(--teal-2); padding: 0.7rem 1rem; border-radius: 0 10px 10px 0; color: var(--ink); font-size: 0.95rem; }
.t-tool { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.t-tool-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem; background: rgba(122, 167, 255, 0.07); border-bottom: 1px solid var(--line); }
.t-tool-head .ticon { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-2); border: 1px solid var(--line-2); border-radius: 5px; padding: 0.08rem 0.4rem; }
.t-tool-head .tname { font-family: var(--mono); font-size: 0.82rem; color: var(--blue); }
.t-tool-head .targs { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-tool pre { margin: 0; padding: 0.8rem 0.9rem; font-family: var(--mono); font-size: 0.76rem; color: #cde6ee; white-space: pre-wrap; max-height: 260px; overflow: auto; line-height: 1.5; }
/* pipeline visualisation card (album_visualize_pipeline) */
.t-pipeline { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, rgba(90, 200, 220, 0.05), transparent); }
.t-pipeline-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem; background: rgba(90, 200, 220, 0.07); border-bottom: 1px solid var(--line); }
.t-pipeline-head .ticon { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-2); border: 1px solid var(--line-2); border-radius: 5px; padding: 0.08rem 0.4rem; }
.t-pipeline-head .tname { font-family: var(--display); font-weight: 500; font-size: 0.98rem; color: var(--ink); }
.t-pipeline-n { margin-left: auto; font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.t-pipeline-graph { padding: 0.9rem; display: flex; justify-content: center; }
.t-pipeline-graph svg { display: block; }
.t-pipeline-foot { padding: 0.5rem 0.9rem 0.7rem; font-family: var(--mono); font-size: 0.74rem; color: var(--teal-2); border-top: 1px solid var(--line); }

/* Pipeline chip in the transcript: a compact, clickable summary that opens the diagram in
   the side panel (the diagram itself no longer renders inline). */
.t-pipeline-chip { display: inline-flex; align-items: center; gap: 0.55rem; width: fit-content; max-width: 100%; cursor: pointer; text-align: left; font: inherit; color: var(--ink); background: rgba(90, 200, 220, 0.06); border: 1px solid var(--teal-2); border-radius: 12px; padding: 0.6rem 0.9rem; transition: border-color 0.2s, background 0.2s; }
.t-pipeline-chip:hover { border-color: var(--teal); background: rgba(90, 200, 220, 0.12); }
.t-pipeline-chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.t-pipeline-chip .ticon { flex: none; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-2); border: 1px solid var(--line-2); border-radius: 5px; padding: 0.08rem 0.4rem; }
.t-pipeline-chip-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-pipeline-chip .t-pipeline-n { margin-left: 0; }
.t-pipeline-chip .t-pipeline-open { margin-left: auto; flex: none; font-family: var(--mono); font-size: 0.78rem; color: var(--teal); }

/* Side panel: a right-side drawer that slides in to show the pipeline diagram, like Claude
   Code's preview and background-task panels. Fixed overlay so it never disturbs the layout. */
.side-panel { position: fixed; top: 0; right: 0; z-index: 200; width: var(--side-panel-w); height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border-left: 1px solid var(--line-2); box-shadow: -30px 0 80px -40px rgba(0, 0, 0, 0.85); transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
.side-panel.open { transform: translateX(0); }
.side-panel-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line-2); }
.side-panel-title { font-family: var(--display); font-weight: 500; font-size: 1.05rem; }
.side-panel-close { flex: none; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.02); color: var(--ink); font-size: 1.2rem; line-height: 1; }
.side-panel-close:hover { border-color: var(--teal); color: var(--teal); }
.side-panel-close:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.side-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.2rem; }
.side-panel-graph { display: flex; justify-content: center; }
.side-panel-graph svg { display: block; max-width: 100%; height: auto; }
.side-panel-foot { margin-top: 1rem; font-family: var(--mono); font-size: 0.8rem; color: var(--teal-2); line-height: 1.5; }
/* On a small phone the drawer takes almost the whole width and tightens its header. */
@media (max-width: 460px) {
  .side-panel { width: 96vw; }
  .side-panel-head { padding: 0.8rem 0.9rem; gap: 0.6rem; }
  .side-panel-title { font-size: 0.95rem; }
  .side-panel-body { padding: 0.9rem; }
  .side-panel-close { width: 44px; height: 44px; }
}

/* Scrim behind the side-panel drawer: dims the page and gives a click-outside-to-close
   target. Shown whenever the panel is open, except on wide app screens where the chat
   reflows beside the drawer (margin-right) and so should not be dimmed. */
.side-panel-scrim { position: fixed; inset: 0; z-index: 199; background: rgba(4, 9, 15, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.28s; }
body.panel-open .side-panel-scrim { opacity: 1; pointer-events: auto; }
@media (min-width: 821px) {
  body.app.panel-open .side-panel-scrim { opacity: 0; pointer-events: none; }
}

/* When the panel is open, the chat re-centres into the space to its left (the new centre)
   instead of being overlaid, the way Claude Code's main view yields to its side panels.
   The main column animates its right margin to match the drawer width. */
.app-main { transition: margin-right 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
body.app.panel-open .app-main { margin-right: var(--side-panel-w); }
/* Below the layout breakpoint (where the sidebar is already off-canvas) the drawer overlays
   full width, so do not shrink the chat. Matched to the 820px sidebar breakpoint so the chat
   is never pinched to a sliver in the 761-820px band. */
@media (max-width: 820px) {
  body.app.panel-open .app-main { margin-right: 0; }
}

/* Diagram nodes are clickable: each opens its solution definition in the panel. */
.pl-node { transition: opacity 0.12s; }
.pl-node:hover { opacity: 0.82; }
.pl-node:focus-visible { outline: none; }
.pl-node:focus-visible rect { stroke: var(--teal); stroke-width: 2; }

/* The connecting code (album run commands threading each step's files) and section headers. */
.side-panel-h { margin: 1.1rem 0 0.4rem; font-family: var(--display); font-weight: 500; font-size: 0.92rem; color: var(--ink); }
.side-panel-hint { margin-top: 0.7rem; font-size: 0.82rem; color: var(--muted); text-align: center; }
.side-panel-code { font-family: var(--mono); font-size: 0.76rem; line-height: 1.55; color: var(--teal); background: rgba(255, 255, 255, 0.02); border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.8rem; overflow-x: auto; white-space: pre; }

/* The "back to the diagram" control and the solution-definition view. */
.side-panel-back { margin-bottom: 0.9rem; padding: 0.35rem 0.7rem; border-radius: 8px; cursor: pointer; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.02); color: var(--muted); font-family: var(--mono); font-size: 0.78rem; }
.side-panel-back:hover { border-color: var(--teal); color: var(--teal); }
.sol-detail-title { font-family: var(--display); font-weight: 500; font-size: 1.15rem; color: var(--ink); }
.sol-detail-coord { margin-top: 0.2rem; font-family: var(--mono); font-size: 0.78rem; color: var(--teal-2); }
.sol-detail-desc { margin-top: 0.7rem; font-size: 0.9rem; line-height: 1.6; color: var(--muted); }
.sol-detail-host { margin-top: 0.6rem; font-size: 0.82rem; color: var(--blue); }
.sol-detail-license { margin-top: 1rem; font-size: 0.78rem; color: var(--faint); }
.sol-args { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.sol-args th, .sol-args td { text-align: left; padding: 0.3rem 0.45rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.sol-args th { color: var(--faint); font-weight: 500; font-family: var(--mono); }
.sol-args td { color: var(--ink); }
.sol-args td:first-child { font-family: var(--mono); color: var(--teal); }
.sol-cite { margin: 0.2rem 0 0 1rem; font-size: 0.8rem; line-height: 1.5; color: var(--muted); }
.sol-cite a { color: var(--teal); }

.t-answer { background: linear-gradient(180deg, rgba(90, 200, 220, 0.1), rgba(90, 200, 220, 0.03)); border: 1px solid var(--teal); border-radius: 12px; padding: 1rem 1.1rem; color: var(--ink); }
.t-answer::before { content: "Answer"; display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); margin-bottom: 0.4rem; }
.t-appear { animation: rise 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.err { color: var(--rose); font-size: 0.88rem; font-family: var(--mono); }

/* in-progress tool line and heartbeat status line: muted, with a small pulsing
   dot so a long-running tool call (an install that runs for minutes) shows it is
   still working rather than looking frozen. */
.t-running, .t-status { display: flex; align-items: center; gap: 0.55rem; font-family: var(--mono); font-size: 0.8rem; color: var(--muted); padding: 0.4rem 0.2rem; }
.t-running-name { color: var(--blue); }
.t-status { color: var(--muted); }
.t-pulse { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); animation: pulse 1.3s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } }

/* End-of-turn marker: a static (non-pulsing) line shown when the run finishes
   without a closing answer, so a completed transcript reads as done, not stuck. */
.t-done { display: flex; align-items: center; gap: 0.55rem; font-family: var(--mono); font-size: 0.8rem; color: var(--teal); padding: 0.5rem 0.2rem; border-top: 1px solid var(--line-2); margin-top: 0.4rem; }
.t-check { flex: none; font-weight: 700; }

/* markdown content inside reasoning + answer bubbles */
.t-text p, .t-answer p { margin: 0 0 0.4rem; }
.t-text p:last-child, .t-answer p:last-child { margin-bottom: 0; }
.t-text ul, .t-text ol, .t-answer ul, .t-answer ol { margin: 0.3rem 0 0.5rem; padding-left: 1.3rem; }
.t-text li, .t-answer li { margin: 0.25rem 0; }
.t-answer ol li::marker, .t-answer ul li::marker { color: var(--teal); font-family: var(--mono); font-size: 0.85em; }
.t-answer strong, .t-text strong { color: var(--ink); }
.t-text code, .t-answer code { font-family: var(--mono); font-size: 0.85em; background: rgba(90, 200, 220, 0.08); padding: 0.05rem 0.32rem; border-radius: 4px; color: var(--teal); }
.t-text em, .t-answer em { color: var(--muted); }
.md-h { font-weight: 600; font-family: var(--display); }

/* responsive */
@media (max-width: 900px) {
  .hero { padding-top: 2.5rem; }
  .hero-show { grid-template-columns: 1fr; }
  .hs-card, .hs-art { min-height: 0; }
  .stages { grid-template-columns: 1fr 1fr; }
  .install-grid { grid-template-columns: 1fr; }
  .source-grid { grid-template-columns: 1fr 1fr; }
  .chain-arrow { transform: rotate(90deg); }
  .site-nav { gap: 1rem; font-size: 0.85rem; }
}
@media (max-width: 540px) {
  .stages, .source-grid { grid-template-columns: 1fr; }
  .section { padding: 3.5rem 1.2rem; }
  .site-nav a:not(:last-child) { display: none; }
  /* The lone visible nav control on phones meets the 44px tap-target minimum. */
  .nav-cta { min-height: 44px; padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .how-flow { padding: 1.15rem; }
  .agent-console { height: clamp(440px, 74vh, 820px); }
  .agent-out, .agent-results, .agent-composer { padding-left: 1.15rem; padding-right: 1.15rem; }
  .agent-head { flex-wrap: wrap; }
  .agent-status { margin-top: 0; }
  .hero-glow { width: 240px; height: 240px; right: 8px; top: 0; }
  .codeblock { padding: 1rem 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================================
   Full-page chat app (app.html) + account page (account.html).
   Everything here is scoped under body.app so the marketing landing
   (index.html) is unaffected. Reuses the existing tokens, .grain, .btn
   variants, and every .t-* / composer / upload / results rule verbatim.
   ========================================================================= */
/* The HTML `hidden` attribute must always win: several app elements set a
   display (.login-view/.app-shell grid, .btn inline-flex) that would otherwise
   override the UA `[hidden] { display:none }` and leak a hidden node onscreen. */
[hidden] { display: none !important; }

body.app { height: 100dvh; overflow: hidden; }

/* small header CTA used on the landing nav */
.nav-cta { padding: 0.45rem 0.9rem; font-size: 0.88rem; }

/* ---- login overlay (auth-on only) ---- */
.login-view { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 1.5rem; }
.login-card { width: min(420px, 100%); display: flex; flex-direction: column; gap: 0.8rem; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-2); border-radius: 18px; padding: 2rem 1.8rem; box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.8); }
.login-brand { align-self: center; margin-bottom: 0.3rem; }
.login-title { font-family: var(--display); font-weight: 500; font-size: 1.5rem; text-align: center; }
.login-sub { color: var(--muted); font-size: 0.9rem; text-align: center; margin-bottom: 0.4rem; }
.login-sub--reg { color: var(--faint); font-size: 0.82rem; margin-top: -0.2rem; }
/* Themed placeholders so the composer/login hints are not low-contrast browser defaults. */
#agent-prompt::placeholder, .login-field input::placeholder { color: var(--faint); opacity: 1; }
.login-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem; color: var(--muted); }
.login-field input { background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px; color: var(--ink); font-family: var(--sans); font-size: 0.95rem; padding: 0.7rem 0.8rem; }
.login-field input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(90, 200, 220, 0.12); }
.login-submit, .login-card .btn.ghost { justify-content: center; }
.login-submit { margin-top: 0.4rem; }
/* Two-mode login card. The form's data-mode ("signin" default, "create") decides
   which pieces show: the name/institution fields, the promo sub-line, the ghost
   "Create an account" button, and which inline toggle prompt appears. Default to the
   signin layout so the card is correct before app.js sets data-mode. */
.login-reg-only { display: contents; }
.login-card:not([data-mode="create"]) .login-reg-only { display: none; }
.login-card[data-mode="create"] .login-sub--reg,
.login-card[data-mode="create"] #login-register { display: none; }
.login-toggle { text-align: center; font-size: 0.82rem; color: var(--muted); margin-top: 0.2rem; }
.login-card[data-mode="create"] .login-toggle--create,
.login-card:not([data-mode="create"]) .login-toggle--signin { display: none; }
.linkbtn { background: none; border: none; padding: 0; color: var(--teal); font: inherit; cursor: pointer; text-decoration: underline; }
.linkbtn:hover { color: var(--ink); }

/* ---- app shell: topbar / [sidebar | main] ---- */
.app-shell { display: grid; grid-template-columns: 280px 1fr; grid-template-rows: auto 1fr; grid-template-areas: "topbar topbar" "sidebar main"; height: 100dvh; }
.app-topbar { grid-area: topbar; display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--line); background: linear-gradient(var(--bg), rgba(7, 16, 26, 0.5)); }
.brand-sm { font-size: 1.05rem; }
.brand-sm .brand-duck { width: 26px; height: 26px; }
.app-topbar .agent-status { margin-left: auto; margin-top: 0; }
.icon-btn { display: none; background: none; border: 1px solid var(--line-2); border-radius: 8px; color: var(--ink); font-size: 1rem; width: 36px; height: 34px; cursor: pointer; }

/* ---- sidebar: new chat + conversation list + account box ---- */
.app-sidebar { grid-area: sidebar; display: flex; flex-direction: column; gap: 0.4rem; padding: 0.9rem; border-right: 1px solid var(--line); background: var(--bg-2); min-height: 0; }
.new-chat { justify-content: center; }
.conv-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.5rem; }
.conv-item { display: flex; align-items: center; gap: 0.2rem; border: 1px solid transparent; border-radius: 9px; transition: background 0.15s, border-color 0.15s; }
.conv-item:hover { background: rgba(255, 255, 255, 0.03); }
.conv-item.active { background: rgba(90, 200, 220, 0.1); border-color: var(--line-2); }
.conv-open { flex: 1 1 auto; min-width: 0; text-align: left; background: none; border: none; color: var(--muted); font-family: var(--sans); font-size: 0.85rem; padding: 0.5rem 0.6rem; cursor: pointer; }
.conv-item:hover .conv-open, .conv-item.active .conv-open { color: var(--ink); }
.conv-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-del { flex: none; background: none; border: none; opacity: 0; color: var(--faint); font-size: 1rem; line-height: 1; padding: 0.3rem 0.5rem; border-radius: 5px; cursor: pointer; }
.conv-item:hover .conv-del, .conv-item.active .conv-del, .conv-item:focus-within .conv-del { opacity: 1; }
.conv-del:hover, .conv-del:focus-visible { color: var(--rose); }
.conv-open:focus-visible, .conv-del:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.account-box { flex: none; border-top: 1px solid var(--line); padding-top: 0.7rem; display: flex; flex-direction: column; gap: 0.4rem; }
.account-link { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--teal-2); }
.account-link:hover { color: var(--teal); }
.account-id { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.account-email { font-size: 0.82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.account-plan { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line-2); border-radius: 999px; padding: 0.1rem 0.5rem; }
.account-plan.is-paid { color: var(--teal); border-color: var(--teal); }
.account-logout { padding: 0.4rem 0.8rem; font-size: 0.8rem; align-self: flex-start; }

/* ---- main: thread + composer, centered to a readable measure ---- */
.app-main { grid-area: main; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
body.app .agent-out { flex: 1 1 auto; min-height: 0; }
body.app .agent-out > * { max-width: 46rem; margin-inline: auto; width: 100%; }
body.app .agent-composer { background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent); }
.composer-row { display: flex; align-items: flex-end; gap: 0.6rem; max-width: 46rem; margin-inline: auto; }
.composer-row #agent-prompt { flex: 1 1 auto; }
.send-btn { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; justify-content: center; font-size: 1.15rem; }
.send-btn.is-working { font-size: 0; }
.send-btn.is-working::after { margin-left: 0; }
.send-btn:disabled, .btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Screen-reader-only utility: present in the accessibility tree, hidden visually. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
body.app .agent-row, body.app .agent-results > * { max-width: 46rem; margin-inline: auto; }
body.app .agent-row { justify-content: space-between; }

/* ---- account page ---- */
body.app.account-page { height: auto; overflow: auto; }
.account-main { max-width: 640px; margin: 0 auto; padding: 2.5rem 1.5rem; }
.acc-card { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-2); border-radius: 18px; padding: 2rem 1.8rem; }
.acc-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.acc-title { font-family: var(--display); font-weight: 500; font-size: 1.6rem; }
.acc-sub { color: var(--muted); margin-top: 0.5rem; }
.acc-sub a { color: var(--teal); border-bottom: 1px solid transparent; }
.acc-sub a:hover { border-bottom-color: var(--teal); }
.acc-h2 { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-2); margin: 1.6rem 0 0.7rem; }
.acc-id { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.2rem; }
.acc-id div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: 0.5rem; }
.acc-id dt { color: var(--faint); font-size: 0.85rem; }
.acc-id dd { color: var(--ink); font-family: var(--mono); font-size: 0.85rem; min-width: 0; word-break: break-word; text-align: right; }
.acc-meter { margin: 0.7rem 0; }
.acc-meter-head { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.35rem; }
.acc-meter-val { font-family: var(--mono); color: var(--ink); }
.acc-bar { height: 8px; background: var(--bg); border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.acc-bar-fill { height: 100%; background: linear-gradient(90deg, var(--teal-2), var(--teal)); border-radius: 999px; }
.acc-note { color: var(--faint); font-size: 0.85rem; margin-top: 0.6rem; }
.acc-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.2rem; }
.acc-card .account-plan { font-size: 0.7rem; }

/* ---- responsive: sidebar becomes an off-canvas drawer below 820px ---- */
@media (max-width: 820px) {
  .app-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
  .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
  .app-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; z-index: 40; transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: 0 0 60px -10px rgba(0, 0, 0, 0.7); }
  body.app.sidebar-open .app-sidebar { transform: translateX(0); }
}