/* agent-platform.css — the rules of styles/components.css that only agent-platform.html uses, moved out of the shared file
   (2026-09-30) in their original order. Loaded right after components.css on agent-platform.html only; a rule that another
   page or a prototype in claude-design-blocks/ can use stays in components.css. */
   /* keep glow inside the viewport (no overflow → sticky stays alive) */

/* ---------- Floating gradient backdrop (top of hero) ----------
   Soft blurred orbs that wander among each other (drift) and very slowly shift
   hue around our violet/cyan. All values are literal so the animation always
   runs; masked to dissolve downward into the continuous page backdrop. */
.float-bg {
  position: absolute; inset: 0 0 auto 0; height: 94vh; z-index: 0;
  overflow: hidden; pointer-events: none; opacity: 0.95;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 92%);
}
.float-bg .blob { position: absolute; border-radius: 50%; filter: blur(72px); mix-blend-mode: screen; will-change: transform; }
/* base colour = violet for all orbs; the hue sweep below carries them through the
   canon band violet → blue → turquoise → green (and back), never off-brand */
.float-bg .b1 { top: -10%; left: -8%; width: 48vw; height: 48vw; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 82%, transparent), transparent 70%); animation: fb-a 22s ease-in-out -3s infinite alternate; }
.float-bg .b2 { top: -14%; left: 52%; width: 52vw; height: 52vw; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 74%, transparent), transparent 70%); animation: fb-b 27s ease-in-out -11s infinite alternate; }
.float-bg .b3 { top: 16%;  left: 18%; width: 40vw; height: 40vw; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 68%, transparent), transparent 70%); animation: fb-c 19s ease-in-out -6s infinite alternate; }
.float-bg .b4 { top: 2%;   left: 76%; width: 38vw; height: 38vw; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent-soft) 62%, transparent), transparent 70%); animation: fb-d 24s ease-in-out -16s infinite alternate; }
/* horizontal traverse — orbs glide right↔left (alternate); some start L→R, some R→L */
@keyframes fb-a { from { transform: translate(-12vw, 3vh) scale(1); }    to { transform: translate(24vw, -4vh) scale(1.12); } }
@keyframes fb-b { from { transform: translate(20vw, -2vh) scale(1.08); } to { transform: translate(-22vw, 5vh) scale(0.92); } }
@keyframes fb-c { from { transform: translate(-22vw, -3vh) scale(0.96); }to { transform: translate(18vw, 4vh) scale(1.18); } }
@keyframes fb-d { from { transform: translate(16vw, 4vh) scale(1.1); }   to { transform: translate(-18vw, -5vh) scale(0.96); } }
/* light concepts: screen blend washes out → use normal */
[data-concept="b"] .float-bg, [data-concept="c"] .float-bg { opacity: 0.6; }
[data-concept="b"] .float-bg .blob, [data-concept="c"] .float-bg .blob { mix-blend-mode: normal; }
@media (max-width: 880px) { .float-bg { height: 70vh; }
}
@media (prefers-reduced-motion: reduce) { .float-bg .blob { animation: none; }
}
.hm-stage-grid {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: 0.82fr 1.18fr; gap: 52px; align-items: start;
}
/* LEFT — the scrolling story, kept in its own column (not centred) */
.hm-flow { position: relative; z-index: 2; }
.hm-block { display: flex; flex-direction: column; justify-content: center; }
.hm-hero2 { min-height: 80vh; }
.hm-hero2 h1 { margin-bottom: 26px; }
.hm-hero2 .lead { font-size: clamp(18px, 1.55vw, 22px); }
.hm-hero2 .hero-ctas { margin-top: 38px; }
.hm-kpi2 { min-height: 48vh; }
.hm-kpi2 .sol-kpis { width: min(880px, 168%); }   /* let the strip breathe — overlaps the faint diagram behind it */
.hm-intro2 { min-height: 50vh; max-width: 40rem; }
.hm-intro2 .h-section { margin-top: 16px; }
.hm-intro2 .lead { margin-top: 18px; }
/* chapters */
.hm-chapter {
  min-height: 86vh; display: flex; flex-direction: column; justify-content: center;
  max-width: 30rem; opacity: 0.3; transition: opacity 0.6s var(--ease);
}
.hm-chapter.is-on { opacity: 1; }
.hm-chapter:last-child { min-height: 78vh; }
.hm-k { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 18px; }
.hm-chapter h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.025em; line-height: 1.08; color: var(--text); margin-bottom: 18px; }
.hm-chapter p { color: var(--text-muted); font-size: 17px; line-height: 1.62; max-width: 28rem; }
.hm-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }   /* float forward from behind */
/* mesh fills the wide column → branches spread like Home, node cards stay their normal size */
.hm-live { width: 100%; height: 560px; }
.hm-rail-i { display: flex; align-items: center; gap: 12px; }
.hm-rail-i .tk { width: 16px; height: 2px; border-radius: 2px; background: var(--border-strong); transition: width 0.45s var(--ease-spring), background 0.45s var(--ease); }
.hm-rail-i .lb { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; color: var(--text-faint); transition: color 0.45s var(--ease); white-space: nowrap; }
.hm-stage[data-active="0"] .hm-rail-i:nth-child(1) .lb,
.hm-stage[data-active="1"] .hm-rail-i:nth-child(2) .lb,
.hm-stage[data-active="2"] .hm-rail-i:nth-child(3) .lb,
.hm-stage[data-active="3"] .hm-rail-i:nth-child(4) .lb,
.hm-stage[data-active="4"] .hm-rail-i:nth-child(5) .lb,
.hm-stage[data-active="5"] .hm-rail-i:nth-child(6) .lb { color: var(--text); }
/* diagram comes alive — node glow per chapter (only in the live phase) */
.hm-live .onode { transition: opacity 0.55s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease), background 0.5s var(--ease), transform 1.05s var(--ease-spring); }
.hm-live .onode.core { animation: none; }
.hm-stage[data-phase="live"][data-active] .hm-live .onode { opacity: 0.3; }
.hm-stage[data-phase="live"][data-active="0"] .hm-live .onode,
.hm-stage[data-phase="live"][data-active="1"] .hm-live .onode[data-role="core"],
.hm-stage[data-phase="live"][data-active="2"] .hm-live :is(.onode[data-role="support"], .onode[data-role="sales"], .onode[data-role="ops"]),
.hm-stage[data-phase="live"][data-active="3"] .hm-live .onode[data-role="tools"],
.hm-stage[data-phase="live"][data-active="4"] .hm-live :is(.onode[data-role="core"], .onode[data-role="tools"]),
.hm-stage[data-phase="live"][data-active="5"] .hm-live .onode[data-role="policy"] {
  opacity: 1;
  border-color: color-mix(in srgb, var(--nc) 55%, var(--border));
  box-shadow: 0 16px 46px -24px color-mix(in srgb, var(--nc) 75%, transparent),
              0 0 0 1px color-mix(in srgb, var(--nc) 26%, transparent),
              0 0 34px -6px color-mix(in srgb, var(--nc) 55%, transparent);
}
/* beams emphasise the active flow (data-to set by build()) */
.hm-stage[data-phase="live"][data-active] .hm-live .obeam { opacity: 0.2; transition: opacity 0.5s var(--ease); }
.hm-stage[data-phase="live"][data-active="0"] .hm-live .obeam,
.hm-stage[data-phase="live"][data-active="1"] .hm-live .obeam { opacity: 0.62; }
.hm-stage[data-phase="live"][data-active="2"] .hm-live .obeam[data-to="support"],
.hm-stage[data-phase="live"][data-active="2"] .hm-live .obeam[data-to="sales"],
.hm-stage[data-phase="live"][data-active="2"] .hm-live .obeam[data-to="ops"],
.hm-stage[data-phase="live"][data-active="3"] .hm-live .obeam[data-to="tools"],
.hm-stage[data-phase="live"][data-active="4"] .hm-live .obeam[data-to="tools"],
.hm-stage[data-phase="live"][data-active="5"] .hm-live .obeam[data-to="policy"] { opacity: 0.95; }
/* Trust — shield sweep over the whole mesh */
.hm-shield {
  position: absolute; inset: -3%; border-radius: 50%;   /* dome wraps every node card (corner nodes sit at 22/85 %) */
  border: 1px solid color-mix(in srgb, var(--warn) 42%, transparent);
  box-shadow: inset 0 0 70px -14px color-mix(in srgb, var(--warn) 34%, transparent), 0 0 44px -14px color-mix(in srgb, var(--warn) 30%, transparent);
  opacity: 0; transform: scale(0.86); transition: opacity 0.6s var(--ease), transform 0.85s var(--ease-spring);
  z-index: 2; pointer-events: none;
}
.hm-stage[data-phase="live"][data-active="5"] .hm-shield { opacity: 1; transform: scale(1); }
@media (max-width: 1080px) {
  .hm-stage-grid { grid-template-columns: 1fr; gap: 0; }
  .hm-flow, .hm-stage[data-phase="live"] .hm-flow { max-width: 100%; transform: none; }
  .hm-block { min-height: 0 !important; }
  .hm-hero2 { padding-bottom: 16px; }
  .hm-kpi2 { padding: 30px 0; }
  .hm-kpi2 .sol-kpis { grid-template-columns: 1fr; width: 100%; }
  .hm-kpi2 .sol-kpi + .sol-kpi { border-left: 0; border-top: 1px solid var(--border); }
  .hm-intro2 { max-width: 100%; padding-bottom: 8px; }
  .hm-chapter { min-height: 0; opacity: 1; max-width: 100%; padding: 34px 0; border-top: 1px solid var(--border); }
}
@media (prefers-reduced-motion: reduce) { .hm-chapter { opacity: 1; }
}
/* ---- tilted-ribbon variant — only the Model-agnostic block (Agent Platform) ---- */
.hm-integrations .tech-marquee-row { padding: 46px 0; }
.hm-integrations .tech-marquee-row + .tech-marquee-row { margin-top: 6px; }
.hm-integrations .tech-marquee { gap: 0; }
.hm-integrations .tech-marquee > .tech-card { margin-right: 28px; }
.hm-integrations .tech-card {
  width: 208px; height: 266px;
  background: linear-gradient(158deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--bg-deep) 90%, transparent));
  border-radius: 22px;
  padding: 24px 22px 22px;
  box-shadow: 0 36px 60px -34px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(6px);
  transform: perspective(1300px) rotateY(-24deg);
  transform-origin: 50% 50%;
  transition: transform 0.55s var(--ease-spring), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.hm-integrations .tech-card:hover {
  transform: perspective(1300px) rotateY(0deg) translateY(-10px) scale(1.03);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-strong));
  box-shadow: 0 44px 80px -34px color-mix(in srgb, var(--accent) 40%, rgba(0,0,0,0.8));
  z-index: 3;
}
.hm-integrations .tech-logo img { width: 108px; height: 108px; opacity: 0.16; filter: grayscale(1); transition: opacity 0.4s var(--ease), filter 0.4s var(--ease); }
.hm-integrations .tech-card:hover .tech-logo img { opacity: 0.42; filter: grayscale(0.4); }
.hm-integrations .tech-mono { display: flex; align-items: center; justify-content: center; flex: 1; font-weight: 700; font-size: 58px; letter-spacing: -0.03em; opacity: 0.16; }
.hm-integrations .tech-card:hover .tech-mono { opacity: 0.4; }
.hm-integrations .ts-name { font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); transition: color 0.35s var(--ease); }
.hm-integrations .tech-card:hover .ts-name { color: var(--text); }
.hm-integrations .ts-cat { display: none; }
.hm-demo { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 18px; align-items: start; }
/* --- scenario picker --- */
.hm-tabs { display: flex; flex-direction: column; gap: 8px; }
.hm-tab-caret { position: absolute; right: 16px; top: 50%; transform: translateY(-50%) translateX(-4px); color: var(--accent-soft); font-size: 13px; opacity: 0; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.hm-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 38%; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent); }
/* --- radio toggle: show panel + light up the active tab --- */
.hm-demo-wrap > #hsc-0:checked ~ .hm-demo #hp-0,
.hm-demo-wrap > #hsc-1:checked ~ .hm-demo #hp-1,
.hm-demo-wrap > #hsc-2:checked ~ .hm-demo #hp-2,
.hm-demo-wrap > #hsc-3:checked ~ .hm-demo #hp-3,
.hm-demo-wrap > #hsc-4:checked ~ .hm-demo #hp-4 { display: block; }
.hm-demo-wrap > #hsc-0:checked ~ .hm-demo #hp-0.hm-conv-panel,
.hm-demo-wrap > #hsc-1:checked ~ .hm-demo #hp-1.hm-conv-panel,
.hm-demo-wrap > #hsc-2:checked ~ .hm-demo #hp-2.hm-conv-panel,
.hm-demo-wrap > #hsc-3:checked ~ .hm-demo #hp-3.hm-conv-panel,
.hm-demo-wrap > #hsc-4:checked ~ .hm-demo #hp-4.hm-conv-panel { display: flex; }   /* animated panels are flex columns */
.hm-demo-wrap > #hsc-0:checked ~ .hm-demo label[for="hsc-0"],
.hm-demo-wrap > #hsc-1:checked ~ .hm-demo label[for="hsc-1"],
.hm-demo-wrap > #hsc-2:checked ~ .hm-demo label[for="hsc-2"],
.hm-demo-wrap > #hsc-3:checked ~ .hm-demo label[for="hsc-3"],
.hm-demo-wrap > #hsc-4:checked ~ .hm-demo label[for="hsc-4"] { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--surface-2); box-shadow: 0 14px 40px -28px color-mix(in srgb, var(--accent) 60%, transparent); }
.hm-demo-wrap > #hsc-0:checked ~ .hm-demo label[for="hsc-0"] .hm-tab-caret,
.hm-demo-wrap > #hsc-1:checked ~ .hm-demo label[for="hsc-1"] .hm-tab-caret,
.hm-demo-wrap > #hsc-2:checked ~ .hm-demo label[for="hsc-2"] .hm-tab-caret,
.hm-demo-wrap > #hsc-3:checked ~ .hm-demo label[for="hsc-3"] .hm-tab-caret,
.hm-demo-wrap > #hsc-4:checked ~ .hm-demo label[for="hsc-4"] .hm-tab-caret { opacity: 1; transform: translateY(-50%) translateX(0); }
/* active channel kicker brightens */
.hm-demo-wrap > #hsc-0:checked ~ .hm-demo label[for="hsc-0"] .tg,
.hm-demo-wrap > #hsc-1:checked ~ .hm-demo label[for="hsc-1"] .tg,
.hm-demo-wrap > #hsc-2:checked ~ .hm-demo label[for="hsc-2"] .tg,
.hm-demo-wrap > #hsc-3:checked ~ .hm-demo label[for="hsc-3"] .tg,
.hm-demo-wrap > #hsc-4:checked ~ .hm-demo label[for="hsc-4"] .tg { color: var(--accent-text); }
@media (max-width: 880px) { .hm-demo { grid-template-columns: 1fr; }
}   /* drop the default top hairline; we have our own bar */
.hm-conv-top { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.02); }
.hc-id { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }
.hc-id b { color: var(--accent-text); font-weight: 500; }
.hc-sc { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.hm-conv { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 22px 24px 6px; display: flex; flex-direction: column; gap: 13px; }
.hm-msg { opacity: 0; transform: translateY(10px); transition: opacity 0.33s var(--ease), transform 0.33s var(--ease-spring); max-width: 84%; }
.hm-msg.show { opacity: 1; transform: none; }
.hm-msg.cust { align-self: flex-start; }
.hm-msg.agent { align-self: flex-end; }
.hm-who { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 5px 4px; }
.hm-msg.agent .hm-who { text-align: right; margin: 0 4px 5px 0; color: var(--accent-text); }
.hm-bub { display: inline-block; padding: 12px 15px; border-radius: 14px; font-size: 14px; line-height: 1.5; color: var(--text); min-height: 43px; }
.hm-msg.cust .hm-bub { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.hm-msg.agent .hm-bub { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 9%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border)); border-bottom-right-radius: 5px; }
.hm-t { white-space: pre-wrap; }
.hm-work { align-self: stretch; display: flex; flex-direction: column; gap: 2px; margin: 1px 0; }
.hm-wrow { display: grid; grid-template-columns: 18px minmax(74px, auto) 1fr auto; gap: 12px; align-items: center; padding: 6px 0; }
.hm-wn { position: relative; justify-self: center; width: 9px; height: 9px; border-radius: 50%; background: var(--surface-solid); border: 1.5px solid var(--border-strong); transition: border-color 0.3s, box-shadow 0.3s, background 0.3s; }
.hm-wstep.active .hm-wn { border-color: var(--accent-soft); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent), 0 0 12px var(--accent); }
.hm-wstep.done .hm-wn { border-color: var(--pos); background: color-mix(in srgb, var(--pos) 60%, var(--surface-solid)); box-shadow: none; }
.hm-wa { font-family: var(--font-display); font-weight: 500; font-size: 14px; }
.hm-wtok { font-family: var(--font-mono); font-size: 11px; color: var(--accent-text); }
.hm-wlat { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); justify-self: end; font-variant-numeric: tabular-nums; }
.hm-wdet { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.27s var(--ease), opacity 0.27s var(--ease); padding-left: 30px; }
.hm-wdet.open { grid-template-rows: 1fr; opacity: 1; }
.hm-wdet-in { overflow: hidden; min-height: 0; padding: 1px 0 8px; }
.hm-classes { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-docs { display: flex; flex-direction: column; gap: 4px; }
.hm-sco { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.hm-doc.picked .hm-sco { color: var(--pos); }
.hm-verdict { margin-top: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); opacity: 0; transition: opacity 0.23s var(--ease); }
.hm-verdict.show { opacity: 1; }
.hm-verdict b { color: var(--accent-soft); font-weight: 500; }
.hc-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); margin-left: auto; }
@media (max-width: 880px) {
  .hm-panel { height: auto; min-height: 520px; }
  .hc-meta { margin-left: 0; }
}
/* ====================== AiDoc · invoice panel (canon document + canon typing) ====================== */
.hm-iv-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.hm-iv-ocr { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hm-iv-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.hm-iv-ic { width: 24px; height: 24px; flex-shrink: 0; border-radius: 7px; display: grid; place-items: center; color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 14%, transparent); }
.hm-iv-ic svg { width: 14px; height: 14px; }
.hm-iv-ic.ok { color: var(--pos); background: color-mix(in srgb, var(--pos) 16%, transparent); }
.hm-iv-l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.hm-iv-l.ok { color: var(--pos); }
.hm-iv-tag { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px; }
.hm-iv-paper { border: 1px solid var(--border); border-radius: 14px; background: var(--surface-solid); padding: 13px 16px; }
.hm-iv-steps { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--border); padding-top: 10px; }
.hm-iv-row { display: grid; grid-template-columns: 18px minmax(70px, auto) 1fr auto; gap: 12px; align-items: center; padding: 6px 0; }
.hm-iv-n { justify-self: center; width: 9px; height: 9px; border-radius: 50%; background: var(--surface-solid); border: 1.5px solid var(--border-strong); transition: border-color 0.3s, box-shadow 0.3s, background 0.3s; }
.hm-iv-step.active .hm-iv-n { border-color: var(--accent-soft); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent), 0 0 12px var(--accent); }
.hm-iv-step.done .hm-iv-n { border-color: var(--pos); background: color-mix(in srgb, var(--pos) 60%, var(--surface-solid)); }
.hm-iv-a { font-family: var(--font-display); font-weight: 500; font-size: 14px; }
.hm-iv-tok { font-family: var(--font-mono); font-size: 11px; color: var(--accent-soft); }
.hm-iv-lat { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); justify-self: end; font-variant-numeric: tabular-nums; }
.hm-iv-det { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.27s var(--ease), opacity 0.27s var(--ease); padding-left: 30px; }
.hm-iv-det.open { grid-template-rows: 1fr; opacity: 1; }
.hm-iv-det-in { overflow: hidden; min-height: 0; padding: 1px 0 7px; }
.hm-iv-pos { display: flex; flex-direction: column; gap: 4px; }
.hm-iv-po.picked .pm { color: var(--pos); }
.hm-iv-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-iv-route { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); min-height: 1.4em; }
.hm-iv-ans { font-size: 13.5px; color: var(--text); line-height: 1.5; min-height: 1.5em; margin-bottom: 9px; }
@media (max-width: 880px) { .hm-iv-ocr { grid-template-columns: 1fr; }
}
/* ====================== TextToSQL panel (question → SQL → answer table) ====================== */
.hm-sq-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.hm-sq-qt { font-family: var(--font-display); font-weight: 500; font-size: 17px; letter-spacing: -0.01em; color: var(--text); min-height: 1.4em; }
.hm-sq-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-sq-tbls { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-sq-sql { background: var(--bg-deep, #070710); border: 1px solid var(--border-strong); border-radius: 10px; padding: 11px 13px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); white-space: pre-wrap; line-height: 1.55; min-height: 1.5em; }
.hm-sq-interp { font-size: 13.5px; color: var(--text); line-height: 1.5; min-height: 1.4em; }
/* ====================== Data Ops panel (alert → error log → runbook → retry) ====================== */
.hm-do-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.hm-do-at { font-family: var(--font-mono); font-size: 12.5px; color: var(--text); }
.hm-do-at b { color: var(--warn); font-weight: 500; }
.hm-do-ameta { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); margin-top: 4px; }
/* error-log console */
.hm-do-console { background: #06060e; border: 1px solid var(--border-strong); border-radius: 10px; padding: 9px 6px; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; }
.hm-do-cl .lv { font-weight: 500; }
.hm-do-cl .lv.info { color: #5a6276; } .hm-do-cl .lv.dbg { color: #49506a; } .hm-do-cl .lv.err { color: var(--neg); }
/* pipeline mini */
.hm-do-pl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hm-do-arr { color: var(--text-faint); font-family: var(--font-mono); }
/* ====================== Trading panel (gather → cluster → summarize → compare) ====================== */
.hm-tr-feed { display: flex; flex-wrap: wrap; gap: 5px; }
.hm-tr-clusters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hm-tr-cluster .cn { font-family: var(--font-mono); font-size: 11px; color: var(--accent-soft); }
.hm-tr-cluster .cd { margin-top: 6px; display: flex; gap: 3px; }
.hm-tr-cluster .cd i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--accent-2) 55%, transparent); }
.hm-tr-summary { font-family: var(--font-body); font-size: 13px; color: var(--text-muted); line-height: 1.55; min-height: 1.4em; }
.hm-tr-compare { display: flex; align-items: center; gap: 14px; }
.hm-tr-trend { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.hm-tr-trend b { color: var(--pos); font-weight: 500; }
.hm-tr-trend .sub { color: var(--text-faint); font-size: 10.5px; }
.hm-integrations { overflow: hidden; }
/* ====================== GOVERNANCE — one full-width Audit-trail block ====================== */
.hm-gov { width: 100%; }
.hm-audit {
  position: relative; display: flex; flex-direction: column;
  padding: 30px 34px; border-radius: var(--radius-lg);
  background: linear-gradient(165deg, #0C0C16 0%, #15152e 100%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(124,58,237,0.12);
  overflow: hidden; isolation: isolate;
}
.hm-audit::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(90% 60% at 12% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 60%),
              radial-gradient(70% 50% at 100% 100%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 60%);
}
/* Grey wash covering the whole card, swept away by two soft diagonal fronts
   moving toward each other along the TL→BR axis: the top-left front clears
   ~70% of the card, the bottom-right front clears the remaining ~30%; both
   finish together. On top of the straight fronts, round "breakthrough" blobs
   sit along the seam and grow with the same fill variables, so colour locally
   punches through ahead of the line and the merge reads organic, not ruler-
   straight. All layers are intersected: grey survives only where NOTHING has
   cleared it yet, and the base fronts still guarantee a fully-clear end state.
   At rest all fills are 0% and feathers trail BEHIND the edges → the card
   starts FULLY grey. Sits behind content (z-index:-1) → text stays coloured. */
.hm-audit::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(165deg, #24242b 0%, #2f2f38 100%);
  -webkit-mask-image:
    linear-gradient(135deg, transparent calc(var(--au-fill) - 25%),  #000 var(--au-fill)),
    linear-gradient(315deg, transparent calc(var(--au-fill2) - 25%), #000 var(--au-fill2)),
    radial-gradient(circle at 88% 40%, transparent calc((var(--au-fill) - 65%) * 1.1),  #000 calc((var(--au-fill) - 65%) * 1.1 + 16%)),
    radial-gradient(circle at 66% 86%, transparent calc(var(--au-fill) - 76%),          #000 calc(var(--au-fill) - 62%)),
    radial-gradient(circle at 79% 58%, transparent calc((var(--au-fill2) - 34%) * 1.3), #000 calc((var(--au-fill2) - 34%) * 1.3 + 15%));
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(135deg, transparent calc(var(--au-fill) - 25%),  #000 var(--au-fill)),
    linear-gradient(315deg, transparent calc(var(--au-fill2) - 25%), #000 var(--au-fill2)),
    radial-gradient(circle at 88% 40%, transparent calc((var(--au-fill) - 65%) * 1.1),  #000 calc((var(--au-fill) - 65%) * 1.1 + 16%)),
    radial-gradient(circle at 66% 86%, transparent calc(var(--au-fill) - 76%),          #000 calc(var(--au-fill) - 62%)),
    radial-gradient(circle at 79% 58%, transparent calc((var(--au-fill2) - 34%) * 1.3), #000 calc((var(--au-fill2) - 34%) * 1.3 + 15%));
          mask-composite: intersect;
}
/* TL front runs the whole ~1.55s; BR front joins once TL has covered ~60%
   (0.85s in), starts gently (ease-in) and both land at the same instant. */
.hm-audit.in::after {
  animation:
    auFillTL 1.55s cubic-bezier(.45,.1,.35,.9) 0.15s forwards,
    auFillBR 0.78s cubic-bezier(.5,.1,.4,.95)  0.92s forwards;
}
@keyframes auFillTL { from { --au-fill:  0%; } to { --au-fill:  95%; } }
@keyframes auFillBR { from { --au-fill2: 0%; } to { --au-fill2: 55%; } }
@media (prefers-reduced-motion: reduce) {
  .hm-audit::after { display: none; }
}
.hm-audit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.10); }
.ha-eyebrow { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); }
.ha-run { font-family: var(--font-mono); font-size: 13px; color: rgba(255,255,255,0.5); }
.hm-audit-rows { list-style: none; margin: 0; padding: 8px 0 0; }
.hm-audit-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-family: var(--font-mono); font-size: 15px; }
.hm-audit-row:last-child { border-bottom: 0; }
.hr-step { color: #F0F0F5; }
.hr-scope { color: var(--accent-soft); }
.hr-meta { color: rgba(255,255,255,0.5); }
.hr-flag { justify-self: end; text-align: right; font-size: 14px; letter-spacing: 0.02em; }
.hr-flag.ok { color: var(--pos); }
.hr-flag.warn { color: var(--warn); }
.hm-audit-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.10); }
.haf-cell { display: flex; flex-direction: column; gap: 5px; }
.haf-k { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.haf-v { font-family: var(--font-display); font-size: 21px; font-weight: 500; color: #F0F0F5; }
/* governance points, merged into the card */
.hm-audit-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.10); }
.hm-ap h3 { font-family: var(--font-display); font-weight: 500; font-size: 16.5px; letter-spacing: -0.01em; color: #F0F0F5; margin-bottom: 8px; line-height: inherit; text-wrap: inherit; }
.hm-ap p { font-size: 14.5px; color: rgba(255,255,255,0.58); line-height: 1.55; }
/* deploy targets, merged into the card */
.hm-audit-deploy { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.10); }
.hm-deploy-k { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 12px; }
.hm-deploy-chips { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) { .hm-audit-points { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 560px) { .hm-audit-row { grid-template-columns: 1fr auto; row-gap: 3px; } .hr-scope { grid-column: 1; grid-row: 2; } .hr-meta { grid-column: 1; grid-row: 3; } .hr-flag { grid-row: 1; }
}