/* AnvixaAI dashboard — AI Knowledge Graph + AI Readiness score styles.
   Owned by the graph/readiness modules (graph.js, report.js score header,
   app.js card badge). Palette mirrors styles.css: light minusPHI language —
   white surfaces, hairline slate lines, tinted chip hues blue/green/amber/red
   plus violet/teal graph types. */

/* ---- knowledge graph tab ---- */
.graphhead {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 14px; margin: 0 0 16px;
}
.graphhead h2 { margin: 0 0 2px; }
.graphhead p { margin: 0; text-wrap: pretty; }
.gcounts { white-space: nowrap; font-variant-numeric: tabular-nums; }

.graphcard { padding: 10px 12px 12px; }
.graphempty p { margin: 0; text-wrap: pretty; }
.gscroll { overflow: auto; max-height: 78vh; }
.graphsvg { display: block; margin: 0 auto; }
.graphsvg text { font-family: inherit; }

/* guide rings + edges: recessive solid hairlines — the data is the ink */
.gring { fill: none; stroke: rgba(15, 23, 42, 0.05); stroke-width: 1; }
.gedge { stroke: rgba(15, 23, 42, 0.12); stroke-width: 1; }

/* entity pills: opaque surface fill, 1px type-tinted border (stroke
   color is set inline per type), label in ink — never in the type color */
.gpill { fill: #fff; stroke-width: 1; }
.gnode:hover .gpill { fill: #f8fafc; }
.gglyph { font-size: 8px; font-weight: 700; text-anchor: middle; }
.gglyph.two { font-size: 6.5px; }
.glabel { font-size: 12px; fill: var(--ink); }

/* center org node — the ink-filled hub anchors the light canvas */
.gcenter rect { fill: var(--ink); stroke: var(--ink); stroke-width: 1; }
.gcname { font-size: 13.5px; font-weight: 650; fill: #fff; text-anchor: middle; }
.gctype { font-size: 9px; font-weight: 600; letter-spacing: 0.09em; fill: #94a3b8; text-anchor: middle; }

/* legend: one swatch per type present, count beside the name */
.glegend {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  border-top: 1px solid var(--line); margin-top: 10px; padding: 10px 8px 2px;
}
.gswatch {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.gswatch i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: none; }

/* ---- AI Readiness score header (Report tab) ---- */
.scorehint { margin: 0 0 16px; }
.scorehead {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 34px;
  align-items: center; margin-bottom: 16px;
}
.scoreringwrap { text-align: center; padding: 2px 6px; }
.scorering { width: 128px; height: 128px; display: block; margin: 0 auto 4px; }
.ringtrack {
  fill: none; stroke: #e2e8f0; stroke-width: 9;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.ringfill {
  fill: none; stroke-width: 9; stroke-linecap: round;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.scorering.good .ringfill { stroke: var(--green); }
.scorering.mid .ringfill { stroke: var(--amber); }
.scorering.low .ringfill { stroke: var(--red); }
/* hero number: ink (prints black via currentColor), proportional figures */
.ringnum { fill: currentColor; font-size: 34px; font-weight: 650; text-anchor: middle; }
.ringlabel {
  font-size: 11px; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
}
.ringdate { margin-top: 2px; }

/* sub-score meters: thin bar, track = lighter step of the fill's own hue */
.meters { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.meterrow {
  display: grid; grid-template-columns: 152px 1fr 34px;
  gap: 12px; align-items: center;
}
.meterlabel {
  font-size: 12.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.meterbar {
  height: 6px; border-radius: 999px; overflow: hidden;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.meterfill {
  display: block; height: 100%; border-radius: 999px;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.meterbar.good { background: rgba(2, 108, 57, 0.12); }
.meterbar.good .meterfill { background: var(--green); }
.meterbar.mid { background: rgba(245, 158, 11, 0.16); }
.meterbar.mid .meterfill { background: var(--amber); }
.meterbar.low { background: rgba(220, 38, 38, 0.1); }
.meterbar.low .meterfill { background: var(--red); }
.meterval {
  text-align: right; font-size: 12.5px;
  font-variant-numeric: tabular-nums; color: var(--ink);
}

@media (max-width: 640px) {
  .scorehead { grid-template-columns: 1fr; justify-items: center; }
  .meters { width: 100%; }
  .meterrow { grid-template-columns: 128px 1fr 30px; }
}

/* ---- home card AI Readiness badge ---- */
.footleft { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.scorebadge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  border: 1px solid; flex: none;
}
.scorebadge.good { color: var(--brand); border-color: rgba(2, 108, 57, 0.3); background: var(--brand-tint); }
.scorebadge.mid { color: #92400e; border-color: rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.13); }
.scorebadge.low { color: #b91c1c; border-color: rgba(220, 38, 38, 0.3); background: rgba(220, 38, 38, 0.09); }

/* ---- score trend (readiness.history sparkline under the ring) ---- */
.scoretrend {
  margin-top: 8px; display: inline-flex; flex-direction: column;
  align-items: center; gap: 2px;
}
.scoretrend svg { width: 96px; height: 26px; display: block; }
.scoretrend polyline {
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.scoretrend.up polyline { stroke: var(--green); }
.scoretrend.down polyline { stroke: var(--red); }
.scoretrend.flat polyline { stroke: var(--muted); }
.scoretrend.up .tiny { color: var(--green); }
.scoretrend.down .tiny { color: var(--red); }

/* ---- "How to improve" (readiness.advice, Report tab) ----
   Lighthouse-style opportunity list: one line per action (gain chip ·
   action · pillar · chevron), native <details> disclosure for the why +
   fix link. Scannable closed, self-explanatory open. */
.advicecard { margin-bottom: 16px; }
.advhead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.advhead h3 { margin: 0 0 2px; }
.advhead .tiny { display: block; color: var(--muted); }
.advtotal {
  flex: none; padding: 4px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--brand); background: var(--brand-tint);
  border: 1px solid rgba(2, 108, 57, 0.25); white-space: nowrap;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.advrow { border-top: 1px solid var(--line); }
.advrow summary {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 2px; cursor: pointer; list-style: none;
}
.advrow summary::-webkit-details-marker { display: none; }
.advrow summary:hover { background: rgba(0, 0, 0, 0.02); }
.advgain {
  flex: none; width: 44px; text-align: center;
  padding: 2px 0; border-radius: 999px;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--brand); background: var(--brand-tint);
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.advlabel {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.advpillar {
  flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--faint, var(--muted)); white-space: nowrap;
}
.advchev {
  flex: none; color: var(--faint, var(--muted)); font-size: 15px;
  transition: transform 0.15s ease; transform: rotate(0deg); line-height: 1;
}
.advrow[open] .advchev { transform: rotate(90deg); }
.advbody {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 0 2px 12px 58px; /* detail aligns under the label, past the chip */
}
.advdetail { font-size: 12.5px; color: var(--muted); max-width: 62ch; }
.advgo {
  flex: none; font-size: 12.5px; font-weight: 600;
  padding: 5px 12px; border-radius: 8px;
  border: 1px solid var(--line); color: var(--ink);
  text-decoration: none; white-space: nowrap;
}
.advgo:hover { border-color: var(--brand); color: var(--brand); }
@media (max-width: 640px) {
  .advpillar { display: none; }
  .advbody { padding-left: 2px; }
}

/* ---- print: the score header rides the Report tab's clean document.
   Fills keep their color via print-color-adjust above; text goes dark. ---- */
@media print {
  .scorehead { background: #fff; border-color: #bbb; }
  .ringtrack { stroke: #e8e8e8; }
  .ringnum { fill: #000; }
  .ringlabel, .meterlabel, .ringdate { color: #333; }
  .meterval { color: #000; }
  .meterbar.good { background: #dcece2; }
  .meterbar.mid { background: #f0e6d0; }
  .meterbar.low { background: #f2dcdb; }
  .advicecard { background: #fff; border-color: #bbb; }
  .advlabel { color: #000; }
  .advdetail, .advpillar { color: #444; }
  .advgain, .advtotal { color: #000; background: #eee; border-color: #999; }
  .advchev { display: none; }
}

/* ---- heat map tab (heat.js) — click overlay, scroll bar, element list.
   Viz classes ported from minusPHI, restored to its light palette. ---- */
.heatctl { margin: 0 0 14px; }
.heatctl select { max-width: 320px; min-width: 170px; }
.heatctl input[type='month'] { flex: none; min-width: 0; width: 165px; }

/* segmented device toggle (light twin of minusPHI's .seg) */
.heatseg {
  display: inline-flex; background: #eef2f6; border: 1px solid var(--line);
  border-radius: 8px; padding: 3px; gap: 2px; flex: none;
}
.heatseg button {
  background: transparent; border: 0; color: var(--muted); font-size: 12.5px;
  font-weight: 600; padding: 6px 13px; border-radius: 6px; white-space: nowrap;
}
.heatseg button:hover { background: #fff; color: var(--ink); opacity: 1; }
.heatseg button.on, .heatseg button.on:hover { background: var(--brand); color: #fff; }

/* the click map: .heatwrap scrolls, .heatframe inside it is the relative,
   content-sized stage (snapshot sets its height; 540px ghost without one) so
   the absolutely-positioned overlay covers the FULL page, not the scrollport.
   Same split as minusPHI's .framescroll / .pageframe. */
.heatcard { padding-bottom: 16px; }
.heatwrap {
  border-radius: 8px; border: 1px solid var(--line-dark); background: #fff;
  max-height: 70vh; overflow-y: auto; overflow-x: hidden;
}
.heatframe { position: relative; overflow: hidden; }
.heatwrap.noshot .heatframe { height: 540px; }
/* wireframe placeholder — shows where there's no snapshot (or below a short one) */
.heatframe .ghost {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.07) 0 9%, transparent 9%),
    repeating-linear-gradient(180deg, transparent 0 30px, rgba(15, 23, 42, 0.05) 30px 39px);
}
/* live-page snapshot: in-flow so it sets the frame's height at true page
   proportions; the veil + canvas are absolutely positioned over it. */
.heatframe img.shot { display: block; width: 100%; height: auto; position: relative; }
/* white veil so the thermal ramp stays readable over busy page content */
.heatframe .shotveil { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.24); }
.heatframe canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.95; }
.heatframe .noclicks {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  font-size: 13px; color: var(--muted); background: rgba(255, 255, 255, 0.55); padding: 20px;
}
.heatlegend {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 11px; color: var(--faint); margin-top: 10px;
}
.heatlegend .grad { width: 150px; height: 8px; border-radius: 99px; }

/* scroll-depth bar: 11 decile segments, ramp-tinted by reach */
.scrollbar { display: flex; gap: 3px; }
.scrollbar .sseg { flex: 1; min-width: 0; text-align: center; }
.scrollbar .sseg i {
  display: flex; align-items: center; justify-content: center;
  height: 34px; border-radius: 5px; font-style: normal;
}
.scrollbar .sseg b {
  font-size: 11px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.scrollbar .sseg span {
  display: block; margin-top: 4px; font-size: 10.5px; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  /* phones: labels collide — keep every other depth label */
  .scrollbar .sseg:nth-child(even) span { visibility: hidden; }
}

/* top clicked elements: selector · bar · count */
.heatlist .elrow {
  display: flex; align-items: center; gap: 10px; font-size: 12.5px;
  padding: 8px 0; border-top: 1px solid var(--line);
}
.heatlist .elrow:first-of-type { border-top: 0; padding-top: 2px; }
.heatlist .elrow code {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.heatlist .elrow .bar {
  width: 90px; height: 4px; border-radius: 99px;
  background: rgba(15, 23, 42, 0.08); flex: none;
}
.heatlist .elrow .bar i { display: block; height: 100%; border-radius: 99px; background: var(--blue); }
.heatlist .elrow .cnt {
  font-weight: 600; font-variant-numeric: tabular-nums; flex: none; min-width: 34px; text-align: right;
}

/* ---- "How AI assistants see you" card (Report tab, report.js) ----
   Latest visibility run: header (title + overall badge/trend/date/re-run),
   then one row per model — label | status pills | score — with the model's
   own words underneath. Pills mirror the .chip recipe so the two families
   read as one system on screen and in print. */
.viscard { margin-bottom: 16px; }
.vishead {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px 18px; flex-wrap: wrap;
}
.vishead h3 {
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
  font-size: 15px; font-weight: 600; margin: 0 0 2px;
}
.vishead .tiny { text-wrap: pretty; max-width: 52ch; }
.visright {
  display: inline-flex; align-items: center; gap: 10px;
  flex: none; flex-wrap: wrap; justify-content: flex-end;
}
.vistrend { font-size: 11px; font-weight: 700; flex: none; }
.vistrend.up { color: #047857; }
.vistrend.down { color: #b91c1c; }
.vistrend.flat { color: var(--faint); }
.visempty { margin: 12px 0 0; }
.visfoot { display: flex; align-items: center; gap: 12px; margin-top: 12px; }

/* model rows: bold label | wrapping pill set | right-aligned tabular score,
   snippet spanning under the pills */
.visrow {
  display: grid; grid-template-columns: 84px 1fr 40px;
  gap: 5px 14px; align-items: center;
  padding: 11px 0; border-top: 1px solid var(--line);
}
.visrow:first-of-type { margin-top: 12px; }
.visrow:last-of-type { padding-bottom: 2px; }
.vislabel { font-weight: 650; font-size: 13.5px; }
.vispills { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.vispill {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 10px;
  border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.12); color: var(--muted);
  background: rgba(15, 23, 42, 0.05); flex: none; white-space: nowrap;
}
.vispill.ok { color: var(--brand); border-color: rgba(2, 108, 57, 0.3); background: var(--brand-tint); }
.vispill.warn { color: #92400e; border-color: rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.13); }
.vispill.bad { color: #b91c1c; border-color: rgba(220, 38, 38, 0.3); background: rgba(220, 38, 38, 0.09); }
.vispill.dim { color: var(--faint); border-color: rgba(15, 23, 42, 0.1); background: rgba(15, 23, 42, 0.03); }
.visscore {
  text-align: right; font-size: 14px; font-weight: 650;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.vissnippet {
  grid-column: 2 / -1; min-width: 0; font-style: italic;
  font-size: 13px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .visrow { grid-template-columns: 1fr auto; }
  .vislabel { grid-row: 1; grid-column: 1; }
  .visscore { grid-row: 1; grid-column: 2; }
  .vispills { grid-row: 2; grid-column: 1 / -1; }
  .vissnippet { grid-row: 3; grid-column: 1 / -1; }
}

/* print: card surface goes white via the base .card rule (styles.css);
   pills degrade to border-only like chips, badge/trend lose their tints */
@media print {
  .vishead h3, .vislabel, .visscore { color: #000; }
  .visrow { border-top-color: #ddd; }
  .vissnippet { color: #333; }
  .vispill { background: none !important; border: 1px solid #999 !important; color: #000 !important; }
  .vispill.dim { color: #777 !important; border-color: #bbb !important; }
  .viscard .scorebadge { background: none; border-color: #999; color: #000; }
  .vistrend.up { color: #2c6e46; }
  .vistrend.down { color: #8c2f2c; }
  .vistrend.flat { color: #777; }
}

/* ---- interactive AI Brain ---- */
.graphhero{display:flex;justify-content:space-between;align-items:center;gap:28px;margin:0 0 18px}.graphhero h2{margin:3px 0 4px;font-size:27px;letter-spacing:-.025em}.graphhero p{margin:0;color:var(--muted);max-width:66ch}.geyebrow{color:var(--brand);text-transform:uppercase;letter-spacing:.13em;font-size:10px;font-weight:750}.livepulse{display:inline-flex;align-items:center;vertical-align:middle;margin-left:7px;padding:3px 8px;border-radius:99px;background:#ecfdf5;color:#047857;font-size:9px;letter-spacing:.08em;text-transform:uppercase}.livepulse:before{content:"";width:5px;height:5px;margin-right:5px;border-radius:50%;background:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.12);animation:brainpulse 2s infinite}
.brainhealth{width:290px;min-width:260px;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.72)}.healthtop{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}.healthtop span,.brainhealth small{display:block;color:var(--muted);font-size:10px}.healthtop span{text-transform:uppercase;letter-spacing:.07em;font-weight:650}.healthtop strong{display:block;font-size:13px;line-height:1.25;margin-top:2px}.healthtop>b{font-size:22px;line-height:1;letter-spacing:-.04em;color:var(--brand);font-variant-numeric:tabular-nums}.healthbar{height:5px;margin:9px 0 7px;border-radius:99px;background:#e5eaf0;overflow:hidden}.healthbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#059669,var(--brand))}.brainhealth small{font-size:10.5px}
.brainstats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:14px}.brainstats>div{padding:12px 16px;border-left:1px solid var(--line)}.brainstats>div:first-child{border-left:0}.brainstats b,.brainstats span{display:block}.brainstats b{font-size:19px}.brainstats span{font-size:10.5px;color:var(--muted);margin-top:2px}.brainworkspace{display:grid;grid-template-columns:minmax(0,1fr) 286px;gap:14px;align-items:stretch}.braincanvas{padding:0;overflow:hidden;min-width:0;background:radial-gradient(circle at 50% 46%,rgba(2,108,57,.055),transparent 36%),linear-gradient(#fff,#fbfcfd)}
.brainbar{min-height:53px;padding:9px 11px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line)}.gfilters{display:flex;gap:5px;flex-wrap:wrap}.gfilter{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:7px;font-size:10.5px}.gfilter i{width:6px;height:6px;background:var(--node);border-radius:50%}.gfilter b{font-size:9px;background:#f1f5f9;border-radius:99px;padding:1px 5px}.gfilter:not(.on){opacity:.42;filter:grayscale(1)}.gtools{display:flex;flex:none}.gtools button{background:#fff;color:var(--muted);border:1px solid var(--line);border-right:0;padding:5px 9px;font-size:11px}.gtools button:first-child{border-radius:7px 0 0 7px}.gtools button:last-child{border-radius:0 7px 7px 0;border-right:1px solid var(--line)}
.brainstage{height:540px;position:relative;overflow:hidden;touch-action:none}.brainstage svg{display:block;width:100%;height:100%;cursor:grab;user-select:none}.brainstage svg.dragging{cursor:grabbing}.brainworld{transform-box:fill-box;transform-origin:center;transition:transform .18s ease}.dragging .brainworld{transition:none}.brainrings ellipse{fill:none;stroke:rgba(15,23,42,.055);stroke-width:1;stroke-dasharray:3 7}.brain-edges line{stroke:rgba(2,108,57,.17);stroke-width:1;transition:.25s}.brain-edges line.selected{stroke:var(--brand);stroke-width:2;stroke-dasharray:4 4;animation:dash 1.2s linear infinite}.brain-edges line.hidden{opacity:0}
.brain-node{cursor:pointer;opacity:0;animation:nodein .42s ease forwards;animation-delay:var(--delay);transition:.2s}.brain-node.hidden{opacity:.04!important;pointer-events:none}.brain-node rect{fill:#fff;stroke:color-mix(in srgb,var(--node) 40%,#fff);stroke-width:1}.brain-node circle:not(.node-aura){fill:color-mix(in srgb,var(--node) 14%,#fff)}.brain-node .node-aura{fill:transparent;stroke:transparent}.brain-node:hover rect,.brain-node.selected rect{stroke:var(--node);stroke-width:1.5;filter:drop-shadow(0 6px 9px rgba(15,23,42,.12))}.brain-node.selected .node-aura{fill:color-mix(in srgb,var(--node) 9%,transparent);stroke:var(--node);stroke-opacity:.25}.node-label{font-family:inherit;font-size:10px;font-weight:600;fill:var(--ink)}.node-glyph{font-family:inherit;font-size:7px;font-weight:750;text-anchor:middle;fill:var(--node)}
.brain-core .coreglow{fill:rgba(2,108,57,.08);animation:coreglow 3s ease-in-out infinite}.coreouter{fill:#fff;stroke:rgba(2,108,57,.25);stroke-width:1.5}.coreinner{fill:#071d16;filter:drop-shadow(0 8px 16px rgba(2,31,22,.25))}.brain-core text{font-family:inherit;text-anchor:middle}.coremark{font-size:14px;fill:#6ee7b7}.corename{font-size:10px;font-weight:700;fill:#fff}.coretype{font-size:5.8px;letter-spacing:.14em;font-weight:700;fill:#8aa99e}.stagehint{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:99px;padding:5px 10px;color:var(--muted);font-size:9.5px;pointer-events:none;white-space:nowrap}
.brainpanel{padding:0;display:flex;flex-direction:column;overflow:hidden}.gdetail{padding:21px;min-height:300px;flex:1}.gdetail-empty{text-align:center;color:var(--muted);padding:50px 6px}.gdetail-empty h3{color:var(--ink);margin:12px 0 4px;font-size:15px}.gdetail-empty p{font-size:12px;line-height:1.55}.gdetail-orb{display:grid;place-items:center;margin:auto;width:46px;height:46px;border-radius:50%;background:var(--brand-tint);color:var(--brand);font-size:17px}.gdetail-kind{display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.08em;font-size:9px;font-weight:700;color:var(--muted)}.gdetail-kind i{width:7px;height:7px;border-radius:50%;background:var(--node)}.gdetail-content h3{font-size:18px;margin:10px 0 2px}.gdetail-sub{font-size:11px;color:var(--muted);margin:0}.gmeaning{background:#f8fafc;border:1px solid var(--line);border-radius:9px;padding:11px;margin:16px 0}.gmeaning b{font-size:10px;text-transform:uppercase}.gmeaning p{font-size:11.5px;line-height:1.5;color:var(--muted);margin:5px 0 0}.gdetail dl{margin:0}.gdetail dl div{padding:7px 0;border-bottom:1px solid var(--line)}.gdetail dt{font-size:9px;text-transform:uppercase;color:var(--muted)}.gdetail dd{font-size:11.5px;margin:2px 0 0;overflow-wrap:anywhere}.gsource{display:block;color:#047857;font-size:10px;margin-top:14px}.gdetail-note{color:var(--muted);font-size:11px}.brainnext{border-top:1px solid var(--line);padding:16px 20px;background:#fbfcfd}.brainnext span{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:8.5px;color:var(--muted)}.brainnext strong{display:block;font-size:13px;margin-top:5px}.brainnext p{font-size:10.5px;color:var(--muted);margin:3px 0 9px}.brainnext a{color:var(--brand);font-size:11px;font-weight:650;text-decoration:none}.graphempty{text-align:center;padding:60px 30px}.graphempty>span{font-size:25px;color:var(--brand)}.graphempty h3{margin:12px 0 4px}.graphempty p{color:var(--muted);margin:0 0 18px}.graphempty a{text-decoration:none;display:inline-block}
@keyframes brainpulse{50%{box-shadow:0 0 0 7px rgba(16,185,129,0)}}@keyframes coreglow{50%{opacity:.45}}@keyframes nodein{to{opacity:1}}@keyframes dash{to{stroke-dashoffset:-8}}@media(max-width:900px){.brainworkspace{grid-template-columns:1fr}.brainstage{height:480px}}@media(max-width:640px){.graphhero{align-items:flex-start;flex-direction:column}.brainhealth{min-width:0}.brainstats{grid-template-columns:1fr 1fr}.brainstats>div:nth-child(3){border-left:0;border-top:1px solid var(--line)}.brainstats>div:nth-child(4){border-top:1px solid var(--line)}.brainstage{height:430px}.stagehint{display:none}}@media(prefers-reduced-motion:reduce){.livepulse:before,.brain-core .coreglow,.brain-node,.brain-edges line.selected{animation:none}.brain-node{opacity:1}}

/* The brain is the primary workspace: controls and inspector float over one
   uninterrupted canvas instead of shrinking it into a two-column layout. */
.brainworkspace{display:block;position:relative;min-width:0;outline:0}.braincanvas{position:relative;margin:0}.brainbar{position:absolute;z-index:6;top:14px;left:14px;right:14px;min-height:0;padding:7px;background:rgba(255,255,255,.88);border:1px solid rgba(15,23,42,.1);border-radius:10px;box-shadow:0 8px 24px rgba(15,23,42,.07);backdrop-filter:blur(12px)}.brainstage{height:clamp(680px,76vh,940px);padding-top:0}.brainpanel{position:absolute;z-index:7;top:76px;right:16px;bottom:16px;width:310px;margin:0;background:rgba(255,255,255,.94);box-shadow:0 16px 45px rgba(15,23,42,.13);backdrop-filter:blur(14px);transition:transform .25s ease,opacity .2s ease}.brainpanel .gdetail{overflow:auto}.panelclose{position:absolute;z-index:2;top:10px;right:10px;width:28px;height:28px;padding:0;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--muted);font-size:17px;line-height:1}.panel-hidden .brainpanel{transform:translateX(calc(100% + 30px));opacity:0;pointer-events:none}.gtools .focusbtn{border-left:1px solid var(--line);border-radius:7px!important;margin-left:6px;color:var(--brand);font-weight:650}.focus-mode{position:fixed;z-index:1000;inset:0;padding:14px;background:var(--bg)}.focus-mode .braincanvas{height:100%;border-radius:14px}.focus-mode .brainstage{height:100%}.focus-mode .brainbar{right:14px}.focus-mode .brainpanel{top:76px;right:30px;bottom:30px}.focus-mode .stagehint{bottom:18px}
@media(max-width:900px){.brainstage{height:clamp(620px,70vh,800px)}.brainpanel{width:290px}}
@media(max-width:640px){.brainstage{height:620px}.brainbar{top:8px;left:8px;right:8px;align-items:flex-start}.gfilters{max-height:70px;overflow:auto}.gtools{flex-wrap:wrap;justify-content:flex-end}.gtools .focusbtn{margin-left:0;margin-top:4px}.brainpanel{top:auto;left:8px;right:8px;bottom:8px;width:auto;max-height:55%;transform:none}.panel-hidden .brainpanel{transform:translateY(calc(100% + 20px))}.focus-mode{padding:0}.focus-mode .braincanvas{border-radius:0}.focus-mode .brainpanel{left:8px;right:8px;bottom:8px;top:auto}}

/* Restore the graph's living, staged presentation while the controls and
   inspector remain in the newer floating workspace. */
.brain-edges line{stroke-dasharray:1;stroke-dashoffset:1;animation:edgeReveal .8s cubic-bezier(.22,.75,.25,1) forwards;animation-delay:var(--delay)}
.brain-edges line.selected{stroke-dasharray:.075 .045;animation:signalFlow 1.1s linear infinite;stroke-linecap:round}
.brain-node{animation:nodeReveal .6s cubic-bezier(.2,.85,.25,1.15) both;animation-delay:var(--delay)}
.node-body{transform-box:fill-box;transform-origin:center;animation:nodeBloom .6s cubic-bezier(.2,.85,.25,1.15) both;animation-delay:var(--delay)}
.brain-node:hover .node-body,.brain-node.selected .node-body{transform:scale(1.045)}
.brain-node.selected .node-aura{animation:auraBreath 2.2s ease-in-out infinite}
.brain-core .coreglow{transform-box:fill-box;transform-origin:center;animation:coreLiving 3.2s ease-in-out infinite}
.brain-core .coreouter{transform-box:fill-box;transform-origin:center;animation:coreOrbit 9s linear infinite;stroke-dasharray:4 6}
@keyframes edgeReveal{to{stroke-dashoffset:0}}
@keyframes signalFlow{to{stroke-dashoffset:-.24}}
@keyframes nodeReveal{from{opacity:0}to{opacity:1}}
@keyframes nodeBloom{from{transform:scale(.55)}to{transform:scale(1)}}
@keyframes auraBreath{50%{r:29;fill:color-mix(in srgb,var(--node) 13%,transparent)}}
@keyframes coreLiving{0%,100%{opacity:.75;transform:scale(.94)}50%{opacity:.28;transform:scale(1.12)}}
@keyframes coreOrbit{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.brain-edges line,.brain-node,.node-body,.brain-node.selected .node-aura,.brain-core .coreglow,.brain-core .coreouter{animation:none}.brain-edges line{stroke-dasharray:none;stroke-dashoffset:0}}

/* Sharper diagram language: hierarchy comes from lines, type marks and
   typography—not capsules nested inside more capsules. */
.braincanvas{border-radius:4px}.brainbar{border-radius:4px;padding:6px 10px;background:rgba(255,255,255,.92)}
.gfilters{gap:0}.gfilter{position:relative;border:0;border-right:1px solid var(--line);border-radius:0;background:transparent;padding:7px 12px;color:var(--muted)}.gfilter:first-child{padding-left:5px}.gfilter:last-child{border-right:0}.gfilter:hover{background:rgba(15,23,42,.025);color:var(--ink)}.gfilter.on{color:var(--ink)}.gfilter.on:after{content:"";position:absolute;left:10px;right:10px;bottom:-7px;height:2px;background:var(--node)}.gfilter b{padding:0;margin-left:2px;background:transparent;border-radius:0;color:var(--faint);font-weight:600}.gfilter i{width:7px;height:7px;border-radius:1px}
.gtools button,.gtools button:first-child,.gtools button:last-child,.gtools .focusbtn{border-radius:0!important;box-shadow:none}.gtools .focusbtn{border-radius:3px!important}.stagehint{border-radius:3px}.brainpanel{border-radius:4px;box-shadow:0 12px 35px rgba(15,23,42,.11)}.panelclose{border-radius:2px}
.brain-node .node-surface{fill:#fff;stroke:color-mix(in srgb,var(--node) 32%,#cbd5e1);stroke-width:1}.brain-node .node-mark,.brain-node:hover .node-mark,.brain-node.selected .node-mark{fill:var(--node);stroke:none;filter:none}.brain-node:hover .node-surface,.brain-node.selected .node-surface{fill:#fff;stroke:var(--node);stroke-width:1.25;filter:drop-shadow(0 5px 8px rgba(15,23,42,.1))}.brain-node .node-aura{fill:transparent;stroke:transparent}.node-label{font-size:10px;font-weight:650}.node-glyph{font-size:6.5px}.brain-node.selected .node-aura{stroke-width:1}
.healthbar,.healthbar i{border-radius:1px}.brainstats,.brainhealth{border-radius:4px}

/* The stats strip lives inside the canvas as a compact bottom-left overlay,
   giving its former vertical space back to the graph. */
.brainstage .brainstats{position:absolute;z-index:6;left:14px;bottom:14px;margin:0;display:flex;flex-wrap:wrap;max-width:calc(100% - 28px);border:1px solid rgba(15,23,42,.1);background:rgba(255,255,255,.88);backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(15,23,42,.07)}
.brainstage .brainstats>div{padding:7px 12px;border-left:1px solid var(--line);border-top:0}
.brainstage .brainstats>div:first-child{border-left:0}
.brainstage .brainstats b{font-size:14px}
.brainstage .brainstats span{font-size:9px;margin-top:1px}
@media(max-width:640px){.brainstage .brainstats{left:8px;bottom:8px;max-width:calc(100% - 16px)}.brainstage .brainstats>div{padding:6px 9px}}