/* The product's header, shared by the analysis (/) and the model behind a
   report's answers (/explore), so the two read as one product. */
.p-top{position:sticky;top:0;z-index:6;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.p-head{display:flex;align-items:center;gap:1.25rem;padding:.75rem 1.6rem;border-bottom:1px solid var(--line2)}
.p-brand{display:flex;align-items:center;gap:.9rem;flex:none}
.p-rule{width:1px;height:1.4rem;background:var(--line)}
.p-product{font-weight:700;font-size:.95rem;letter-spacing:.01rem}
.mark-tg .vial-body{fill:none;stroke:var(--accent);stroke-width:1.6}
.mark-tg .vial-line{stroke:var(--accent);stroke-width:1.6}
.mark-tg .vial-dot{fill:var(--accent)}
.mark-tg .wordmark{fill:var(--ink);font-family:var(--sans);font-size:13px;font-weight:700}
.p-summary{flex:1;display:flex;gap:.5rem;flex-wrap:wrap;min-width:0}
.sum-chip{font-size:.78rem;background:var(--sunk);border:1px solid var(--line);border-radius:var(--radius-rounded);
  padding:.25rem .7rem;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:26rem}
.sum-chip b{color:var(--ink)}
.p-head-ctl{display:flex;gap:.6rem;align-items:center}
.p-nav{font-size:.82rem;font-weight:600;color:var(--ink2);text-decoration:none;padding:.3rem .7rem;border-radius:var(--radius-rounded)}
.p-nav:hover{color:var(--ink);background:var(--sunk)}

/* Which question, asset and gate the model on screen is answering. */
.p-context{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.6rem 1.6rem;font-size:.84rem;color:var(--ink2)}
.p-context b{color:var(--ink);font-weight:600}
.p-context .ctx-label{font-size:.66rem;font-weight:700;letter-spacing:.06rem;text-transform:uppercase;color:var(--accent)}
.p-context .ctx-q{flex:1;min-width:14rem}
.p-context .ctx-back{font-weight:600;text-decoration:none;white-space:nowrap;border:1px solid var(--accent);
  border-radius:var(--radius-rounded);padding:.3rem .8rem}
.p-context .ctx-back:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.p-context{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem 1rem}
.p-context .crumbs{grid-column:1;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.82rem}
.p-context .ctx-q{grid-column:1;min-width:0}
.p-context .ctx-back{grid-column:2;grid-row:1 / span 2;align-self:center}
.crumb{color:var(--ink2);text-decoration:none;font-weight:600}
a.crumb{color:var(--accent)}
a.crumb:hover{text-decoration:underline}
.crumb-sep{color:var(--ink3)}