@azure-id/orc 1.9.1 → 2.0.2

package/bin/webui/css/panels/knowledge.css

@@ -1,116 +1,563 @@
-/* panels/knowledge.css — the Knowledge panel (v0.49.1).
-
-   Five tabs' worth of surface. Loaded by app.html in the order its <link> sits
-   in that manifest, and for CSS the load order IS the cascade order — which is
-   why 06-responsive and 04-motion come after every panel sheet.
-
-   NO COLOUR TOKEN IS DEFINED HERE. Every one of them is declared once, on bare
-   :root, in 00-tokens.css. */
-
-/* --- the header strip (v0.49.1) ------------------------------------------ */
-/* Above the tabs, on every one of them: what ORC knows about this repo, in one
-   line. A `—` means the CLI could not compute it, and that is an ANSWER. */
-.kn-strip {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--sp-4);
-  padding: var(--sp-3);
-  border: 1px solid var(--line-soft);
-  border-radius: var(--radius-sm);
-  margin-bottom: var(--sp-3);
-}
-.kn-strip-item { display: grid; gap: 2px; }
-.kn-strip-value { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
-.kn-strip-label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
-
-/* --- the per-doc tier bar + the coverage bar ------------------------------ */
-.kn-tierbar {
-  display: flex;
-  height: 8px;
-  min-width: 120px;
-  flex: 1;
-  border-radius: 4px;
-  overflow: hidden;
-  background: var(--line-soft);
-}
-.kn-tierbar-seg { width: var(--w); }
-.kn-tier-ok { background: var(--ok); }
-.kn-tier-warn { background: var(--warn); }
-.kn-tier-bad { background: var(--bad); }
-.kn-tier-idle { background: var(--idle); }
-
-.kn-coverage { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-2); }
-.kn-coverage-num { font-size: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }
-
-/* --- rows that expand IN PLACE ------------------------------------------- */
-/* One at a time, detail fetched on first open, and NO detail box below the
-   table — the Runs-row rule. */
-.kn-doc-row { cursor: pointer; }
-.kn-doc-row:hover td { background: var(--surface-2); }
-.kn-doc-row.open td { background: var(--surface-2); }
-.kn-doc-detail > td { background: var(--surface-2); padding: var(--sp-3); }
-
-/* --- revealed prose ------------------------------------------------------- */
-/* Rendered as DOM by renderMd, never as HTML. It scrolls INSIDE itself; the page
-   body never scrolls horizontally. */
-.kn-body {
-  margin-top: var(--sp-2);
-  max-height: 420px;
-  overflow: auto;
-  padding: var(--sp-3);
-  border: 1px solid var(--line-soft);
-  border-radius: var(--radius-sm);
-  scrollbar-width: thin;
-  scrollbar-color: var(--line) transparent;
-}
-.kn-body::-webkit-scrollbar { width: 8px; height: 8px; }
-.kn-body::-webkit-scrollbar-track { background: transparent; }
-.kn-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
-
-/* --- patterns ------------------------------------------------------------- */
-.kn-pattern {
-  border: 1px solid var(--line-soft);
-  border-radius: var(--radius-sm);
-  padding: var(--sp-3);
-  margin-top: var(--sp-2);
-  display: grid;
-  gap: var(--sp-2);
-}
-/* The most decision-shaped thing in a pattern file, and until now invisible
-   outside it. */
-.kn-conflicts { border-left: 3px solid var(--warn); padding-left: var(--sp-3); display: grid; gap: 4px; }
-.kn-conflicts-head { font-weight: 600; font-size: 13px; }
-
-/* --- preview-then-apply --------------------------------------------------- */
-.kn-prune { margin-top: var(--sp-3); display: grid; gap: var(--sp-2); }
-.kn-prune-head { font-weight: 600; font-size: 13px; }
-
-/* ── one doc at a time (v1.7.0) ───────────────────────────────────────────── */
-/* The resolver and the derived-reference sweep. Both are probes, so the card is
-   read-shaped: a row of results, and a command where a lane would have to run. */
-.kn-one-topic { flex: 1 1 260px; min-width: 0; }
-.kn-one-out { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: 4px; }
-.kn-one-cand {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--sp-1) var(--sp-2);
-  align-items: baseline;
-  padding-left: var(--sp-2);
-}
-.kn-one-sweep {
-  margin-top: var(--sp-3);
-  border-top: 1px solid var(--line-soft);
-  padding-top: var(--sp-2);
-}
-.kn-one-ref {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--sp-1) var(--sp-2);
-  align-items: baseline;
-  padding: 3px 0;
-}
-.kn-one-fix { padding-left: var(--sp-4); }
-
-@media (max-width: 720px) {
-  .kn-one-ref, .kn-one-cand { flex-direction: column; align-items: flex-start; gap: 2px; }
-}
+/* panels/knowledge.css — the Knowledge panel (v0.49.1).
+
+   Five tabs' worth of surface. Loaded by app.html in the order its <link> sits
+   in that manifest, and for CSS the load order IS the cascade order — which is
+   why 06-responsive and 04-motion come after every panel sheet.
+
+   NO COLOUR TOKEN IS DEFINED HERE. Every one of them is declared once, on bare
+   :root, in 00-tokens.css. */
+
+/* --- the header strip (v0.49.1) ------------------------------------------ */
+/* Above the tabs, on every one of them: what ORC knows about this repo, in one
+   line. A `—` means the CLI could not compute it, and that is an ANSWER. */
+.kn-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sp-4);
+  padding: var(--sp-3);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius-sm);
+  margin-bottom: var(--sp-3);
+}
+.kn-strip-item { display: grid; gap: 2px; }
+.kn-strip-value { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.kn-strip-label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
+
+/* --- the per-doc tier bar + the coverage bar ------------------------------ */
+.kn-tierbar {
+  display: flex;
+  height: 8px;
+  min-width: 120px;
+  flex: 1;
+  border-radius: 4px;
+  overflow: hidden;
+  background: var(--line-soft);
+}
+.kn-tierbar-seg { width: var(--w); }
+.kn-tier-ok { background: var(--ok); }
+.kn-tier-warn { background: var(--warn); }
+.kn-tier-bad { background: var(--bad); }
+.kn-tier-idle { background: var(--idle); }
+
+.kn-coverage { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-2); }
+.kn-coverage-num { font-size: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }
+
+/* --- rows that expand IN PLACE ------------------------------------------- */
+/* One at a time, detail fetched on first open, and NO detail box below the
+   table — the Runs-row rule. */
+.kn-doc-row { cursor: pointer; }
+.kn-doc-row:hover td { background: var(--surface-2); }
+.kn-doc-row.open td { background: var(--surface-2); }
+.kn-doc-detail > td { background: var(--surface-2); padding: var(--sp-3); }
+
+/* --- revealed prose ------------------------------------------------------- */
+/* Rendered as DOM by renderMd, never as HTML. It scrolls INSIDE itself; the page
+   body never scrolls horizontally. */
+.kn-body {
+  margin-top: var(--sp-2);
+  max-height: 420px;
+  overflow: auto;
+  padding: var(--sp-3);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius-sm);
+  scrollbar-width: thin;
+  scrollbar-color: var(--line) transparent;
+}
+.kn-body::-webkit-scrollbar { width: 8px; height: 8px; }
+.kn-body::-webkit-scrollbar-track { background: transparent; }
+.kn-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
+
+/* --- patterns ------------------------------------------------------------- */
+.kn-pattern {
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius-sm);
+  padding: var(--sp-3);
+  margin-top: var(--sp-2);
+  display: grid;
+  gap: var(--sp-2);
+}
+/* The most decision-shaped thing in a pattern file, and until now invisible
+   outside it. */
+.kn-conflicts { border-left: 3px solid var(--warn); padding-left: var(--sp-3); display: grid; gap: 4px; }
+.kn-conflicts-head { font-weight: 600; font-size: 13px; }
+
+/* --- preview-then-apply --------------------------------------------------- */
+.kn-prune { margin-top: var(--sp-3); display: grid; gap: var(--sp-2); }
+.kn-prune-head { font-weight: 600; font-size: 13px; }
+
+/* ── one doc at a time (v1.7.0) ───────────────────────────────────────────── */
+/* The resolver and the derived-reference sweep. Both are probes, so the card is
+   read-shaped: a row of results, and a command where a lane would have to run. */
+.kn-one-topic { flex: 1 1 260px; min-width: 0; }
+.kn-one-out { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: 4px; }
+.kn-one-cand {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sp-1) var(--sp-2);
+  align-items: baseline;
+  padding-left: var(--sp-2);
+}
+.kn-one-sweep {
+  margin-top: var(--sp-3);
+  border-top: 1px solid var(--line-soft);
+  padding-top: var(--sp-2);
+}
+.kn-one-ref {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sp-1) var(--sp-2);
+  align-items: baseline;
+  padding: 3px 0;
+}
+.kn-one-fix { padding-left: var(--sp-4); }
+
+@media (max-width: 720px) {
+  .kn-one-ref, .kn-one-cand { flex-direction: column; align-items: flex-start; gap: 2px; }
+}
+
+/* ── the Code graph tab (v1.9.2) ──────────────────────────────────────────── */
+/* Six cards: the state ladder, the pipeline, an example graph, the numbers, the
+   cost bars and the glossary. Every moving part is listed again in the ONE
+   reduced-motion block in 04-motion.css. The three INFINITE ones — the ladder
+   beacon, the pipeline dots and the edge pulses — are removed there with
+   `display: none`, because a capped infinite animation freezes mid-cycle. */
+
+.cg-sub {
+  margin-top: var(--sp-4);
+  margin-bottom: var(--sp-2);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-faint);
+  text-transform: uppercase;
+  letter-spacing: .06em;
+}
+@keyframes cg-rise {
+  from { opacity: 0; transform: translateY(10px); }
+  to   { opacity: 1; transform: none; }
+}
+@keyframes cg-pop {
+  0%   { opacity: 0; transform: scale(.6); }
+  70%  { opacity: 1; transform: scale(1.08); }
+  100% { opacity: 1; transform: none; }
+}
+
+/* --- 1. the state ladder -------------------------------------------------- */
+.cg-ladder {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(70px, .6fr) minmax(0, 1fr));
+  align-items: stretch;
+  margin-top: var(--sp-3);
+}
+.cg-step {
+  --c: var(--idle);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 6px;
+  padding: var(--sp-3) var(--sp-2);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius);
+  background: var(--surface);
+  opacity: .62;
+  animation: cg-rise 420ms var(--ease) calc(var(--i, 0) * 110ms) backwards;
+  transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
+}
+.cg-step:hover { opacity: 1; }
+.cg-step-none { --c: var(--accent); }
+.cg-step-fresh { --c: var(--ok); }
+.cg-step-drifted { --c: var(--warn); }
+.cg-step-now {
+  opacity: 1;
+  border-color: var(--c);
+  background: linear-gradient(180deg, var(--surface-2), var(--surface));
+  box-shadow: 0 0 0 1px var(--c) inset;
+}
+.cg-step-dot {
+  position: relative;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--c);
+}
+/* The current state sends a ring outward — the first INFINITE animation. */
+.cg-beacon {
+  position: absolute;
+  inset: -2px;
+  border-radius: 50%;
+  border: 2px solid var(--c);
+  animation: cg-ping 2.2s var(--ease) infinite;
+}
+@keyframes cg-ping {
+  0%   { transform: scale(1); opacity: .9; }
+  80%  { transform: scale(2.6); opacity: 0; }
+  100% { transform: scale(2.6); opacity: 0; }
+}
+.cg-step-word { font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: .06em; color: var(--c); }
+.cg-step-what { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
+.cg-step-here {
+  margin-top: 2px;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  padding: 2px 8px;
+  border-radius: 999px;
+  color: var(--bg);
+  background: var(--c);
+}
+.cg-step-link {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 4px;
+}
+.cg-step-line {
+  display: block;
+  width: 100%;
+  height: 2px;
+  border-radius: 1px;
+  background: linear-gradient(90deg, var(--line), var(--text-faint));
+  transform-origin: left center;
+  animation: cg-draw-x 380ms var(--ease) calc(var(--i, 0) * 110ms + 220ms) backwards;
+}
+@keyframes cg-draw-x { from { transform: scaleX(0); } }
+@keyframes cg-draw-y { from { transform: scaleY(0); } }
+.cg-step-next { font-size: 11px; color: var(--text-faint); text-align: center; line-height: 1.3; }
+.cg-loop {
+  margin-top: var(--sp-2);
+  text-align: right;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+.cg-now {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sp-2) var(--sp-3);
+  margin-top: var(--sp-3);
+  padding: var(--sp-3);
+  border-radius: var(--radius-sm);
+  border-left: 3px solid var(--idle);
+  background: var(--idle-wash);
+}
+.cg-now > div { flex: 1 1 260px; }
+.cg-now .cmd { margin: 0; }
+.cg-now-fresh { border-left-color: var(--ok); background: var(--ok-wash); }
+.cg-now-drifted { border-left-color: var(--warn); background: var(--warn-wash); }
+.cg-now-none { border-left-color: var(--accent); background: var(--accent-wash); }
+.cg-line { white-space: pre-wrap; word-break: break-word; }
+
+/* --- 2. the pipeline ------------------------------------------------------ */
+.cg-flow {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) repeat(4, 34px minmax(0, 1fr));
+  align-items: stretch;
+  margin-top: var(--sp-3);
+}
+.cg-station {
+  --c: var(--accent);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: var(--sp-3);
+  border: 1px solid var(--line-soft);
+  border-top: 3px solid var(--c);
+  border-radius: var(--radius);
+  background: var(--surface);
+  animation: cg-rise 460ms var(--ease) calc(var(--i, 0) * 140ms) backwards;
+  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
+}
+.cg-station:hover { transform: translateY(-3px); border-color: var(--c); }
+.cg-cost-free { --c: var(--ok); }
+.cg-cost-paid { --c: var(--warn); }
+.cg-station-num {
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-faint);
+  font-variant-numeric: tabular-nums;
+}
+.cg-station-glyph {
+  display: inline-grid;
+  place-items: center;
+  width: 44px;
+  height: 34px;
+  border-radius: var(--radius-sm);
+  font-family: var(--mono);
+  font-weight: 700;
+  font-size: 14px;
+  color: var(--c);
+  background: var(--surface-2);
+  border: 1px solid var(--line-soft);
+}
+.cg-station-name { font-weight: 600; font-size: 14px; }
+.cg-station-what { font-size: 12px; color: var(--text-dim); line-height: 1.45; }
+.cg-station-value {
+  margin-top: auto;
+  padding-top: 4px;
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--c);
+}
+.cg-link { position: relative; align-self: center; height: 2px; margin: 0 4px; background: var(--line); }
+/* Three dots run station to station — the second INFINITE animation. */
+.cg-link-dot {
+  position: absolute;
+  top: -3px;
+  left: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--accent);
+  box-shadow: 0 0 8px var(--accent);
+  opacity: 0;
+  animation: cg-travel-x 1.8s linear calc(var(--i, 1) * 180ms + var(--k, 0) * 600ms) infinite;
+}
+@keyframes cg-travel-x {
+  0%   { left: -4px; opacity: 0; }
+  15%  { opacity: 1; }
+  85%  { opacity: 1; }
+  100% { left: calc(100% - 4px); opacity: 0; }
+}
+@keyframes cg-travel-y {
+  0%   { top: -4px; opacity: 0; }
+  15%  { opacity: 1; }
+  85%  { opacity: 1; }
+  100% { top: calc(100% - 4px); opacity: 0; }
+}
+.cg-notes-layer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--sp-2);
+  margin-top: var(--sp-3);
+  padding: var(--sp-2) var(--sp-3);
+  border: 1px dashed var(--line);
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  color: var(--text-dim);
+}
+.cg-notes-tag {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  padding: 2px 8px;
+  border-radius: 999px;
+  color: var(--warn);
+  background: var(--warn-wash);
+}
+
+/* --- 3. the example graph ------------------------------------------------- */
+.cg-anatomy { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-3); }
+.cg-anatomy-scroll { grid-column: 1; grid-row: 1; }
+.cg-caption { grid-column: 1; grid-row: 2; }
+.cg-legend { grid-column: 2; grid-row: 1 / span 2; }
+.cg-svg {
+  display: block;
+  width: 100%;
+  min-width: 560px;
+  height: auto;
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius);
+  background: radial-gradient(circle at 50% 40%, var(--surface-2) 0%, var(--surface) 70%);
+}
+.cg-file { animation: cg-fade 480ms var(--ease) var(--d, 0ms) backwards; }
+.cg-file rect { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; }
+.cg-file-name { fill: var(--text-faint); font-family: var(--mono); font-size: 11px; }
+.cg-edge { transition: opacity var(--dur) var(--ease); }
+.cg-edge-line { fill: none; stroke-width: 1.6; }
+.cg-edge-call .cg-edge-line {
+  stroke: var(--accent-dim);
+  stroke-dasharray: 1;
+  animation: cg-edge-draw 620ms var(--ease) var(--d, 0ms) backwards;
+}
+.cg-edge-ref .cg-edge-line { stroke: var(--warn); stroke-dasharray: 5 4; animation: cg-fade 500ms var(--ease) var(--d, 0ms) backwards; }
+.cg-edge-import .cg-edge-line { stroke: var(--text-faint); stroke-dasharray: 1.5 4; stroke-linecap: round; animation: cg-fade 500ms var(--ease) var(--d, 0ms) backwards; }
+@keyframes cg-edge-draw { from { stroke-dashoffset: 1; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
+@keyframes cg-fade { from { opacity: 0; } }
+.cg-head-call { fill: var(--accent-dim); }
+.cg-head-ref { fill: var(--warn); }
+/* A short bright dash runs along every call, caller to callee — the third
+   INFINITE animation. */
+.cg-pulse {
+  fill: none;
+  stroke: var(--accent);
+  stroke-width: 3.5;
+  stroke-linecap: round;
+  stroke-dasharray: .06 .94;
+  animation: cg-run 2.6s linear var(--d, 0ms) infinite backwards;
+}
+@keyframes cg-run {
+  0%   { stroke-dashoffset: 1; opacity: 0; }
+  10%  { opacity: 1; }
+  90%  { opacity: 1; }
+  100% { stroke-dashoffset: 0; opacity: 0; }
+}
+.cg-sym { cursor: pointer; outline: none; transform-box: fill-box; transform-origin: center; animation: cg-pop 480ms var(--ease) var(--d, 0ms) backwards; }
+.cg-sym-halo { fill: var(--accent-wash); stroke: var(--accent); stroke-width: 1; opacity: 0; transition: opacity var(--dur) var(--ease); }
+.cg-sym-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2.5; transition: fill var(--dur) var(--ease); }
+.cg-sym-name { fill: var(--text); font-family: var(--mono); font-size: 12px; font-weight: 600; pointer-events: none; }
+.cg-sym:hover .cg-sym-halo, .cg-sym:focus-visible .cg-sym-halo, .cg-sym-hi .cg-sym-halo { opacity: 1; }
+.cg-sym:focus-visible .cg-sym-dot { stroke: var(--text); }
+/* Point at a dot: its edges light up and every other edge steps back. */
+.cg-focus .cg-edge { opacity: .18; }
+.cg-focus .cg-edge.cg-edge-hi { opacity: 1; }
+.cg-edge-hi .cg-edge-line { stroke-width: 2.6; }
+.cg-caption {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--sp-1) var(--sp-3);
+  min-height: 46px;
+  padding: var(--sp-2) var(--sp-3);
+  border-radius: var(--radius-sm);
+  background: var(--surface-2);
+  font-size: 13px;
+}
+.cg-caption-hint { color: var(--text-faint); }
+.cg-caption-sym { color: var(--accent); font-weight: 700; }
+.cg-caption-text { flex: 1 1 240px; }
+.cg-caption-cmd { color: var(--text-faint); font-size: 12px; }
+.cg-legend { display: grid; gap: var(--sp-2); align-content: start; }
+.cg-legend-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--sp-2); align-items: start; }
+.cg-legend-text { display: grid; gap: 2px; font-size: 13px; }
+.cg-lg { display: block; margin-top: 4px; width: 32px; height: 16px; }
+.cg-lg-file { border: 1px solid var(--line); background: var(--surface-2); border-radius: 4px; }
+.cg-lg-sym { width: 14px; height: 14px; margin-left: 9px; border-radius: 50%; background: var(--accent); }
+.cg-lg-call { height: 0; margin-top: 11px; border-top: 2px solid var(--accent-dim); }
+.cg-lg-ref { height: 0; margin-top: 11px; border-top: 2px dashed var(--warn); }
+.cg-lg-import { height: 0; margin-top: 11px; border-top: 2px dotted var(--text-faint); }
+
+/* --- 4. the numbers ------------------------------------------------------- */
+.cg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); }
+.cg-tile {
+  display: grid;
+  gap: 2px;
+  padding: var(--sp-3) var(--sp-4);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius);
+  background: linear-gradient(160deg, var(--surface-2), var(--surface));
+  animation: cg-rise 440ms var(--ease) calc(var(--i, 0) * 100ms) backwards;
+}
+.cg-tile-value { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
+.cg-tile-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
+.cg-tile-what { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
+.cg-behind { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
+.cg-behind-label { font-size: 13px; color: var(--text-dim); margin-right: var(--sp-1); }
+.cg-bchip {
+  --c: var(--ok);
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--c);
+  font-size: 12px;
+  animation: cg-pop 420ms var(--ease) 300ms backwards;
+}
+.cg-bchip strong { color: var(--c); font-family: var(--mono); }
+.cg-b-chg { --c: var(--warn); }
+.cg-b-del { --c: var(--bad); }
+.cg-b-zero { --c: var(--line); color: var(--text-faint); }
+.cg-bar {
+  display: flex;
+  height: 12px;
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--line-soft);
+}
+.cg-bar-sm { height: 8px; border-radius: 4px; }
+.cg-bar-lg { height: 18px; border-radius: 9px; }
+.cg-seg { width: var(--w); flex: none; animation: cg-grow 900ms var(--ease) 200ms backwards; }
+@keyframes cg-grow { from { width: 0; } }
+.cg-seg-ok { background: var(--ok); }
+.cg-seg-empty { background: repeating-linear-gradient(135deg, var(--warn) 0 6px, var(--warn-wash) 6px 10px); }
+.cg-seg-card { background: var(--accent); }
+.cg-seg-source { background: var(--accent-dim); }
+.cg-seg-hints { background: var(--warn); }
+.cg-seg-env { background: var(--idle); }
+.cg-seg-low { background: var(--ok); }
+.cg-seg-range { background: repeating-linear-gradient(135deg, var(--ok) 0 6px, var(--ok-wash) 6px 12px); }
+.cg-seg-read { background: linear-gradient(90deg, var(--accent-dim), var(--accent)); }
+.cg-bar-key { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-2); font-size: 12px; color: var(--text-dim); }
+.cg-key { display: inline-flex; align-items: center; gap: 6px; }
+.cg-key::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--kc, var(--idle)); }
+.cg-key-ok { --kc: var(--ok); }
+.cg-key-empty { --kc: var(--warn); }
+.cg-key-card { --kc: var(--accent); }
+.cg-key-source { --kc: var(--accent-dim); }
+.cg-key-hints { --kc: var(--warn); }
+.cg-key-env { --kc: var(--idle); }
+.cg-key-range::before { background: repeating-linear-gradient(135deg, var(--ok) 0 3px, var(--ok-wash) 3px 6px); }
+.cg-langs { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
+.cg-lang {
+  display: grid;
+  grid-template-columns: 70px minmax(0, 1fr) minmax(0, 240px);
+  gap: var(--sp-3);
+  align-items: center;
+  animation: cg-rise 380ms var(--ease) calc(var(--i, 0) * 90ms + 200ms) backwards;
+}
+.cg-lang-name { font-weight: 600; }
+.cg-lang-nums { font-size: 12px; color: var(--text-dim); }
+
+/* --- 5. cost and savings -------------------------------------------------- */
+.cg-gain { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
+.cg-gain-row { display: grid; grid-template-columns: 190px minmax(0, 1fr) minmax(90px, auto); gap: var(--sp-3); align-items: center; }
+.cg-gain-name { font-size: 13px; font-weight: 600; }
+.cg-gain-val { font-family: var(--mono); font-size: 13px; text-align: right; }
+.cg-reads { display: grid; gap: 6px; }
+.cg-read {
+  display: grid;
+  grid-template-columns: 90px minmax(80px, 1fr) 90px minmax(0, 2fr);
+  gap: var(--sp-3);
+  align-items: center;
+  padding: 4px 0;
+  animation: cg-rise 360ms var(--ease) calc(var(--i, 0) * 60ms + 200ms) backwards;
+}
+.cg-read-cmd { font-weight: 700; color: var(--accent); }
+.cg-read-n { font-family: var(--mono); font-size: 12px; text-align: right; }
+.cg-read-what { font-size: 12px; color: var(--text-dim); }
+.cg-read-never .cg-read-cmd, .cg-read-never .cg-read-n { color: var(--text-faint); }
+.cg-read-never .cg-read-n { font-family: var(--font); font-style: italic; }
+
+/* --- 6. the glossary ------------------------------------------------------ */
+.cg-gloss { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
+.cg-gloss-group {
+  padding: var(--sp-3);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius);
+  background: var(--surface);
+  animation: cg-rise 420ms var(--ease) calc(var(--i, 0) * 110ms) backwards;
+}
+.cg-gloss-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: var(--sp-2); }
+.cg-gloss-list { display: grid; gap: 8px; margin: 0; }
+.cg-gloss-list dt { font-weight: 600; font-size: 13px; }
+.cg-gloss-list dd { margin: 0; font-size: 12px; color: var(--text-dim); line-height: 1.45; }
+
+/* --- narrow screens ------------------------------------------------------- */
+@media (max-width: 900px) {
+  .cg-ladder, .cg-flow { grid-template-columns: minmax(0, 1fr); }
+  .cg-step-link { flex-direction: row; min-height: 34px; }
+  .cg-step-line { width: 2px; height: 22px; transform-origin: center top; animation-name: cg-draw-y; }
+  .cg-link { width: 2px; height: 28px; margin: 4px auto; }
+  .cg-link-dot { top: 0; left: -3px; animation-name: cg-travel-y; }
+  .cg-anatomy { grid-template-columns: minmax(0, 1fr); }
+  .cg-legend { grid-column: 1; grid-row: auto; }
+  .cg-loop { text-align: left; }
+}
+@media (max-width: 720px) {
+  .cg-gain-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
+  .cg-gain-val { text-align: left; }
+  .cg-read { grid-template-columns: 80px minmax(0, 1fr) 70px; }
+  .cg-read-what { grid-column: 1 / -1; }
+  .cg-lang { grid-template-columns: 56px minmax(0, 1fr); }
+  .cg-lang-nums { grid-column: 1 / -1; }
+}