/* 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: near-black canvas, #111
   surfaces, 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: #191919; stroke-width: 1; }
.gedge { stroke: #2a2a2a; stroke-width: 1; }

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

/* center org node */
.gcenter rect { fill: #181818; stroke: #3a3a3a; stroke-width: 1; }
.gcname { font-size: 13.5px; font-weight: 650; fill: var(--ink); text-anchor: middle; }
.gctype { font-size: 9px; font-weight: 600; letter-spacing: 0.09em; fill: var(--muted); 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 #1a1a1a; 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: #1e1e1e; 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(63, 157, 99, 0.16); }
.meterbar.good .meterfill { background: var(--green); }
.meterbar.mid { background: rgba(181, 138, 47, 0.16); }
.meterbar.mid .meterfill { background: var(--amber); }
.meterbar.low { background: rgba(176, 65, 62, 0.16); }
.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: #6cc492; border-color: rgba(63, 157, 99, 0.45); background: rgba(63, 157, 99, 0.12); }
.scorebadge.mid { color: #d8b25e; border-color: rgba(181, 138, 47, 0.45); background: rgba(181, 138, 47, 0.12); }
.scorebadge.low { color: #d97b78; border-color: rgba(176, 65, 62, 0.5); background: rgba(176, 65, 62, 0.12); }

/* ---- 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; }
}

/* ---- heat map tab (heat.js) — click overlay, scroll bar, element list.
   Viz classes ported from minusPHI, recolored for the obsidian theme. ---- */
.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 (dark twin of minusPHI's .seg) */
.heatseg {
  display: inline-flex; background: #0d0d0d; border: 1px solid #2c2c2c;
  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: #191919; color: var(--ink); opacity: 1; }
.heatseg button.on, .heatseg button.on:hover { background: #fff; color: #0a0a0a; }

/* 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 #2a2a2a; background: #0d0d0d;
  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(242, 243, 245, 0.07) 0 9%, transparent 9%),
    repeating-linear-gradient(180deg, transparent 0 30px, rgba(242, 243, 245, 0.045) 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; }
/* dark veil so the thermal ramp stays readable over bright page content */
.heatframe .shotveil { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.32); }
.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(10, 10, 10, 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 #1a1a1a;
}
.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(242, 243, 245, 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;
}