fallow-cli 3.29.0

/* fallow viz: developer chrome, dark-first with generous spacing
   Tokens mirror the fallow design system: Radix Sand Dark neutrals,
   semantic accents only (red=error, amber=warn, green=pass, blue=info). */

:root {
  --radius: 6px;
  --radius-sm: 4px;
  --panel-width: 420px;

  /* Keyboard focus ring. Neutral rather than a saturated accent, matching the
     chrome's own active language (the active tab and its underline are
     --text-high), so focus reads as part of the styling instead of an
     info-blue import. References --text-high, so it flips with the palette.
     Offset to float around the control's rounded edge rather than hugging it;
     applied only via :focus-visible / :focus-within (never on mouse click). */
  --focus-ring-color: var(--text-high);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* Theme-independent: only the palette flips per theme, never the face. */
  --font-mono:
    "Martian Mono", "JetBrains Mono", "Cascadia Code", "SF Mono", ui-monospace, Menlo, Consolas,
    monospace;

  /* Type scale. One step per role, so a global size change is one edit.
     Tuned for reading a dense map on a large display, not for density. */
  --fs-micro: 10px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-base: 15px;
  --fs-lg: 16px;
  --fs-xl: 18px;
}

:root[data-theme="dark"] {
  --surface-0: #111110;
  --surface-1: #191918;
  --surface-2: #222221;
  --surface-3: #2a2a28;
  --surface-4: #31312e;
  --text-high: #eeeeec;
  --text-low: #b5b3ad;
  --text-muted: #6f6d66;
  --text-disabled: #494844;
  --border-subtle: #3b3a37;
  --border-default: #494844;
  --border-strong: #62605b;
  --red: #e5484d;
  --red-text: #ff9592;
  --red-subtle: #3b1219;
  --amber: #ffc53d;
  --amber-text: #ffca16;
  --amber-subtle: #302008;
  --green: #30a46c;
  --green-text: #3dd68c;
  --green-subtle: #132d21;
  --blue: #0090ff;
  --blue-text: #70b8ff;
  --blue-subtle: #0d2847;
}

:root[data-theme="light"] {
  --surface-0: #ffffff;
  --surface-1: #f9f9f8;
  --surface-2: #f2f2f0;
  --surface-3: #ebebea;
  --surface-4: #e3e2de;
  --text-high: #21201c;
  --text-low: #6f6d66;
  --text-muted: #908e86;
  --text-disabled: #cfceca;
  --border-subtle: #e3e2de;
  --border-default: #cfceca;
  --border-strong: #a9a7a0;
  --red: #ce2c31;
  --red-text: #ce2c31;
  --red-subtle: #fff1f0;
  --amber: #e2a336;
  --amber-text: #ad5700;
  --amber-subtle: #fefbe9;
  --green: #30a46c;
  --green-text: #18794e;
  --green-subtle: #e9f9ee;
  --blue: #0090ff;
  --blue-text: #0d74ce;
  --blue-subtle: #edf6ff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--surface-0);
  color: var(--text-high);
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ── Row 1: identity left, search + quiet utilities right ────── */

#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 54px;
  box-sizing: border-box;
  padding: 0 20px;
  background: var(--surface-0);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.brand .mark {
  flex: none;
  width: 26px;
  height: 26px;
  display: block;
  color: var(--text-high);
}

.brand-text {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.brand .wordmark {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-high);
}

.brand .project {
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--text-high);
}

.brand .project::before {
  content: "· ";
  font-weight: 400;
  color: var(--text-muted);
}

/* Visually hidden, still read by assistive tech (live-region channel). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.brand .sub {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-wrap {
  position: relative;
}

.search-wrap .search-key {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1;
  padding: 2px 5px;
  color: var(--text-muted);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

.topbar-actions .divider {
  width: 1px;
  height: 16px;
  background: var(--border-subtle);
  margin: 0 4px;
}

.ghost-btn {
  height: 32px;
  min-width: 32px;
  box-sizing: border-box;
  padding: 0 8px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  color: var(--text-low);
  background: transparent;
  transition:
    background 100ms ease-out,
    color 100ms ease-out;
}

.ghost-btn:hover {
  background: var(--surface-1);
  color: var(--text-high);
}

.ghost-btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* Square icon button shared by every close and the copy-path affordance, so
   they read as one control family at one size wherever they appear. */
.icon-btn {
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  color: var(--text-muted);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.icon-btn:hover {
  color: var(--text-high);
  border-color: var(--border-default);
}

.icon-btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* The × glyph reads smaller than its font size, so it is sized up to match
   the copy icon's optical weight. Close is destructive, hence the red hover. */
.icon-btn.close {
  font-size: 22px;
}

.icon-btn.close:hover {
  color: var(--red-text);
}

.icon-btn svg {
  width: 15px;
  height: 15px;
}

/* ── Row 2: lens tabs (primary nav) + view segment ───────────── */

#toolbar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
  height: 46px;
  box-sizing: border-box;
  padding: 0 20px;
  background: var(--surface-0);
  border-bottom: 1px solid var(--border-subtle);
}

.lens-tabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
  /* Cancel the first tab's own 12px padding so its label's left edge lines up
     with the 20px toolbar inset shared by the brand and the lens gloss. */
  margin-left: -12px;
}

.lens-tab.overflowed {
  display: none;
}

.lens-more {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: none;
}

.lens-more[hidden] {
  display: none;
}

.lens-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 5px);
  left: 0;
  min-width: 220px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

.lens-menu[hidden],
.lens-menu-item[hidden] {
  display: none;
}

.lens-menu-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 9px;
  color: var(--text-low);
  text-align: left;
  border-radius: var(--radius-sm);
}

.lens-menu-item:hover,
.lens-menu-item:focus-visible {
  color: var(--text-high);
  background: var(--surface-3);
}

.lens-menu-item:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: -2px;
}

.lens-menu-item .menu-shortcut {
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-xs);
}

.more-button .more-active {
  max-width: 120px;
  overflow: hidden;
  color: var(--blue-text);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.more-button .more-active:not(:empty)::before {
  content: ": ";
}

.lens-menu-heading {
  margin: 4px -4px 3px;
  padding: 6px 9px 3px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.lens-menu-item .analysis-status {
  max-width: 130px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lens-menu-item .analysis-status.disabled,
.lens-menu-item .analysis-status.unavailable {
  color: var(--amber-text);
}

.lens-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: none;
  background: transparent;
  font-size: var(--fs-md);
  font-weight: 400;
  text-transform: none;
  color: var(--text-muted);
  position: relative;
  transition:
    color 100ms ease-out,
    background 100ms ease-out;
}

.lens-tab:hover {
  color: var(--text-low);
  background: var(--surface-1);
}

.lens-tab[aria-pressed="true"] {
  color: var(--text-high);
  font-weight: 700;
}

.lens-tab[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--text-high);
}

.lens-tab:focus-visible {
  /* Inset: the tabs sit in a tight 4px-gap rail, so an outset ring would
     reach into the neighbour. Rounded so it reads like the other rings. */
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: -3px;
  border-radius: var(--radius-sm);
}

.lens-tab .badge {
  font-size: var(--fs-sm);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.lens-tab .badge:empty {
  display: none;
}

.lens-tab .badge.hot {
  color: var(--amber-text);
}

.lens-tab .badge.warm {
  color: color-mix(in oklab, var(--amber-text) 55%, var(--text-muted));
}

/* Error-severity lenses (unused, boundaries) count in red, not amber. */
.lens-tab .badge.hot.error {
  color: var(--red-text);
}

.lens-tab .badge.warm.error {
  color: color-mix(in oklab, var(--red-text) 55%, var(--text-muted));
}

.lens-tab .badge.zero {
  color: var(--text-muted);
}

/* View toggle: a setting, one visual step quieter than the tabs. */
.seg {
  display: flex;
  align-items: stretch;
  align-self: center;
  gap: 2px;
  padding: 2px;
  height: 32px;
  box-sizing: border-box;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}

.seg button {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  text-transform: none;
  color: var(--text-muted);
  background: transparent;
  transition:
    background 100ms ease-out,
    color 100ms ease-out;
}

.seg button:hover {
  color: var(--text-high);
  background: var(--surface-2);
}

.seg button[aria-pressed="true"] {
  background: var(--surface-3);
  color: var(--text-high);
  font-weight: 500;
}

.seg button:focus-visible {
  /* Joined control with 2px gaps: inset so the ring hugs the button's own
     rounded rect instead of bleeding into the neighbour or the track. */
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: -2px;
}

/* Context strip: gloss + findings sentence left, arrange right. */
#lens-summary {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
  box-sizing: border-box;
  padding: 4px 20px;
  font-size: var(--fs-sm);
  color: var(--text-low);
  background: var(--surface-0);
  border-bottom: 1px solid var(--border-subtle);
}

#lens-summary.visible {
  display: flex;
}

#lens-summary .summary-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

#lens-summary .summary-gloss {
  color: var(--text-high);
}

#lens-summary .summary-controls,
#lens-summary .context-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

#lens-summary .summary-controls {
  gap: 10px;
}

#lens-summary .context-label {
  color: var(--text-muted);
}

.context-button,
.context-chip,
.availability-state {
  min-height: 26px;
  padding: 2px 8px;
  color: var(--text-low);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.context-button:hover:not(:disabled) {
  color: var(--text-high);
  background: var(--surface-2);
}

.context-button[aria-pressed="true"] {
  color: var(--text-high);
  background: var(--surface-3);
  border-color: var(--border-default);
}

.context-button:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.context-button:disabled {
  color: var(--text-disabled);
  cursor: not-allowed;
}

.context-chip {
  min-height: auto;
  color: var(--text-muted);
  background: transparent;
}

.availability-state {
  min-height: auto;
  color: var(--text-muted);
  background: transparent;
  border-style: dashed;
}

.availability-state.disabled,
.availability-state.unavailable {
  color: var(--amber-text);
}

/* Arrange toggle floats at the top-right of the map (graph view only),
   just left of the detail panel. It only changes the map layout, so it
   lives on the map rather than in the lens header, and reuses the .seg
   segmented-control styling for parity with the graph/treemap toggle. */
#stage .arrange {
  position: absolute;
  top: 12px;
  right: calc(var(--panel-width) + 12px);
  z-index: 3;
}

/* Search (row 1) */
#search {
  width: 260px;
  height: 32px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: var(--fs-md);
  color: var(--text-high);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 0 30px 0 10px;
  transition: border-color 100ms ease-out;
}

#search::placeholder {
  color: var(--text-muted);
}

#search:hover {
  border-color: var(--border-default);
}

/* Text field: browsers keep :focus-visible active on click for typing
   targets, so this still shows while typing but drops the mouse-only ring
   elsewhere. A soft ring plus a tinted border, matching the other controls. */
#search:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-color: var(--focus-ring-color);
}

#search-count {
  /* Render left of the fixed-width search box (not right of it), so the
     live count grows leftward into the gap toward the brand instead of
     widening the right-anchored actions group and sliding the box. */
  order: -1;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

#search-count .n {
  color: var(--amber-text);
  font-weight: 700;
}

/* ── Stage ───────────────────────────────────────────────────── */

#stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#canvas {
  display: block;
  position: absolute;
  inset: 0;
}

/* The canvas is full width (it extends under the panel), so a CSS outline on
   it would frame the whole element. The ring is an overlay covering only the
   usable area instead, shown when the canvas takes keyboard focus. */
#canvas:focus-visible {
  outline: none;
}

.canvas-focus-ring {
  position: absolute;
  /* Right edge sits at the panel's left edge: the ring's own border stays just
     clear of the panel (which paints on top), so it reads flush, not gapped. */
  inset: 0 var(--panel-width) 0 0;
  pointer-events: none;
  border: var(--focus-ring-width) solid var(--focus-ring-color);
  display: none;
}

#stage:has(#canvas:focus-visible) .canvas-focus-ring {
  display: block;
}

/* Brief opacity dip when the canvas content swaps wholesale (view change,
   leaving ego mode). JS also guards this on prefers-reduced-motion. */
@keyframes canvas-swap {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}

#canvas.swapping {
  animation: canvas-swap 200ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  #canvas.swapping {
    animation: none;
  }
}

/* Panel: copy-path icon, status gloss, ranked lens list. The copy-path icon
   button (see .icon-btn) anchors to the frame's bottom-right corner, opposite
   the close button (panel-head is sticky, so it is the containing block). */
#panel .copy-path {
  position: absolute;
  right: 16px;
  bottom: 12px;
}

/* Terms that carry their definition in a `title` tooltip: the dotted
   underline is the only hint the panel spends space on. */
#panel .hinted {
  cursor: help;
  text-decoration: underline dotted;
  text-decoration-color: var(--border-default);
  text-underline-offset: 3px;
}

#panel .hinted:hover {
  color: var(--text-high);
  text-decoration-color: var(--text-muted);
}

/* Compound selector beats the later `.link-list { max-height: 180px }`
   rule, so the ranked list fills the panel and the whole panel scrolls
   as one, instead of a short internal scrollbox over dead space. */
#panel .link-list.rank-list {
  max-height: none;
  overflow: visible;
  padding-bottom: 6px;
}

#panel .rank-list button {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  width: 100%;
}

/* Truncate the dim directory prefix, never the filename. The label
   grows to fill the row so it stays left-aligned (space-between would
   otherwise center it between the bullet and the metric). */
#panel .rank-label {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}

#panel .rank-label .muted {
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 2ch;
}

/* The filename truncates as a last resort (after the dir prefix), so a
   long name ellipsizes instead of colliding with the metric column. */
#panel .rank-label .rank-name {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#panel .rank-list .rank-metric {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Detail panel ────────────────────────────────────────────── */

#panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--panel-width);
  max-width: 90vw;
  /* One body size for the whole panel. Only the file name (fs-lg) and meta
     like column headers / hints / code (fs-xs) step off it: three levels. */
  font-size: var(--fs-sm);
  background: var(--surface-1);
  border-left: 1px solid var(--border-default);
  transform: translateX(100%);
  transition:
    transform 200ms ease-out,
    visibility 200ms;
  overflow-y: auto;
  z-index: 4;
  visibility: hidden;
}

#panel.open {
  transform: none;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  #panel {
    transition: none;
  }
}

#panel .panel-head {
  position: sticky;
  top: 0;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-subtle);
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  z-index: 1;
}

#panel .panel-head .file {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}

#panel .panel-head .name {
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--text-high);
}

#panel .panel-head .dir {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

#panel .panel-head .status-line {
  font-size: var(--fs-sm);
  margin-top: 4px;
}

#panel section {
  padding: 0 16px 12px;
}

/* Recessed header bar: a full-bleed tinted band delimits each section, so
   the header reads as a heading rather than a dim label bracketed by two
   near-identical hairlines. The -16px horizontal margin cancels the
   section's 16px padding so the band spans the full panel width. */
#panel section h3 {
  margin: 0 -16px 12px;
  padding: 7px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--text-high);
}

#panel .kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 16px;
  font-size: var(--fs-sm);
}

#panel .kv dt {
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0.04em;
}

#panel .kv dd {
  color: var(--text-high);
  text-align: right;
}

#panel .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: var(--fs-sm);
}

#panel .tag {
  border: 1px solid var(--border-default);
  padding: 0 6px;
  color: var(--amber-text);
}

#panel .signal-nav {
  position: sticky;
  top: 70px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 9px 16px;
  background: color-mix(in oklab, var(--surface-1) 94%, transparent);
  border-bottom: 1px solid var(--border-subtle);
}

#panel .signal-nav button {
  padding: 3px 7px;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
}

#panel .signal-nav button:hover,
#panel .signal-nav button.active {
  color: var(--text-high);
  border-color: var(--border-default);
}

#panel .signal-nav button.active {
  background: var(--surface-3);
}

#panel .signal-nav button:focus-visible,
#panel .finding-actions button:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

#panel .active-signal {
  padding-top: 8px;
}

#panel .active-signal > h2 {
  padding: 0 16px 8px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#panel .supporting-signals {
  margin: 0 16px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface-0);
}

#panel .supporting-signals > summary {
  padding: 8px 10px;
  color: var(--text-low);
  cursor: pointer;
}

#panel .supporting-signals > summary:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: -2px;
}

#panel .supporting-signals[open] > summary {
  border-bottom: 1px solid var(--border-subtle);
}

#panel .availability-state {
  margin: 6px 0;
  padding: 8px 10px;
  white-space: normal;
}

#panel .security-candidate,
#panel .analysis-finding {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}

#panel .security-candidate:last-child,
#panel .analysis-finding:last-child {
  border-bottom: 0;
}

#panel .security-candidate h4,
#panel .analysis-finding h4 {
  color: var(--text-high);
  font-size: var(--fs-sm);
}

#panel .finding-evidence {
  margin-top: 7px;
  color: var(--text-low);
  font-size: var(--fs-sm);
}

#panel .trace-list {
  margin: 8px 0 0 20px;
  color: var(--text-low);
  font-size: var(--fs-xs);
}

#panel .trace-list li + li {
  margin-top: 4px;
}

#panel .observed-controls {
  margin-top: 8px;
  color: var(--text-low);
  font-size: var(--fs-xs);
}

#panel .observed-controls strong {
  color: var(--text-muted);
  font-weight: 500;
}

#panel .observed-controls ul {
  margin: 4px 0 0 20px;
}

#panel .observed-controls li + li {
  margin-top: 3px;
}

#panel .finding-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

#panel .finding-actions > .cmd-hint {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
}

#panel .finding-actions > .muted {
  min-width: 0;
  overflow-wrap: anywhere;
}

#panel table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

#panel th {
  text-align: left;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: 2px 8px 2px 0;
  border-bottom: 1px solid var(--border-subtle);
}

#panel td {
  padding: 3px 8px 3px 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-low);
  vertical-align: top;
}

#panel td.num,
#panel th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#panel .rank-truncated td {
  padding: 8px 0;
  text-align: center;
}

/* Only .rank-table rows with a fileCell are clickable, so the row-background
   hover is scoped to them: a plain table like complexity hotspots must not
   falsely signal interactivity, and neither should the trailing "… N more"
   summary row (it has no col-file cell). */
#panel .rank-table tr:has(td.col-file):hover td {
  background: var(--surface-3);
}

/* Keyboard focus mirrors the hover row-highlight (an outline would be clipped
   by the file cell's overflow:hidden), and underlines the filename so the
   focused row is unambiguous. :focus-within keeps it keyboard-only. */
#panel .rank-table tr:has(td.col-file):focus-within td {
  background: var(--surface-3);
}

/* The row highlight plus the filename underline are the focus affordance, so
   the button drops the default UA outline (which was rendering blue). */
#panel .rank-table td.col-file button:focus-visible {
  outline: none;
}

#panel .rank-table td.col-file button:focus-visible .rank-name {
  text-decoration: underline;
  text-decoration-color: var(--focus-ring-color);
  text-underline-offset: 2px;
}

#panel .fn-name,
#panel td .mono {
  color: var(--text-high);
}

#panel .fn-react {
  font-size: var(--fs-xs);
}

#panel .fn-react .pair + .pair {
  margin-left: 12px;
}

/* Ranked findings as a table: the label column takes the slack and
   ellipsizes, the value columns stay narrow and right-aligned. */
#panel .rank-table td.col-file {
  max-width: 0;
  overflow: hidden;
}

#panel .rank-table td.col-file button {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

#panel .rank-table td.col-file button:hover .rank-name {
  text-decoration: underline;
}

#panel .rank-details > summary {
  cursor: pointer;
  list-style-position: inside;
}

#panel .rank-details .analysis-finding {
  margin-top: 8px;
  min-width: min(28rem, 70vw);
}

#panel .rank-table th.col-val,
#panel .rank-table td.col-val {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-left: 14px;
}

/* The ordinal column: a narrow, muted, right-aligned rank in front of every
   row so a list reads as "1, 2, 3 …" at a glance. */
#panel .rank-table th.col-rank,
#panel .rank-table td.col-rank {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  padding-right: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* The magnitude meter column: a narrow bar between the file label and the
   value column, so a ranked list reads as a bar chart at a glance. */
#panel .rank-table th.col-bar,
#panel .rank-table td.col-bar {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  padding-left: 14px;
}

/* Column and term descriptions carry their text in a `data-tip` attribute;
   the cursor is the only in-panel hint that hovering explains the term. The
   tip itself renders in a single floating `.hint-tip` element appended to
   document.body (see hint.ts), so it escapes the panel's overflow clip and
   flips to stay in the viewport. Used by table headers and the facts-panel
   hinted terms alike. */
#panel [data-tip] {
  cursor: help;
}

/* The floating tip. hint.ts positions it with position:fixed left/top via
   computeTipPosition; this rule carries the visual style formerly on the
   ::after pseudo-element. Tokens keep it theme-aware; pointer-events off so
   it never blocks a click. No transition, so it is instant and honours
   prefers-reduced-motion by construction. */
.hint-tip {
  position: fixed;
  z-index: 50;
  max-width: 240px;
  padding: 7px 9px;
  white-space: normal;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-high);
  background: var(--surface-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.hint-tip[hidden] {
  display: none;
}

#panel .sev-error {
  color: var(--red-text);
}

#panel .sev-warn {
  color: var(--amber-text);
}

#panel .sev-ok {
  color: var(--green-text);
}

#panel .sev-info {
  color: var(--blue-text);
}

#panel .muted {
  color: var(--text-muted);
}

#panel .bar {
  color: var(--text-disabled);
  letter-spacing: -0.05em;
}

#panel .bar .fill-warn {
  color: var(--amber);
}

#panel .bar .fill-error {
  color: var(--red);
}

/* Neutral fill: a magnitude that is not a defect (how depended-on a file is,
   a query's footprint), so it must not borrow the amber/red severity ink. */
#panel .bar .fill-neutral {
  color: var(--text-low);
}

/* A meter sitting inline with its number: blast-radius facts, the duplication
   density line, and the search totals. */
#panel .meter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* The number beside a meter: right-aligned and tabular so stacked rows line
   up and their bars share one x (see countWithBar's labelWidthCh). */
#panel .meter .meter-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Syntax highlighting for the clone-preview snippet. */
#panel pre .tok-kw {
  color: var(--blue-text);
}
#panel pre .tok-str {
  color: var(--green-text);
}
#panel pre .tok-num {
  color: var(--amber-text);
}
#panel pre .tok-com {
  color: var(--text-muted);
  font-style: italic;
}

/* Context-window clone preview: each source line is a full-width block
   row. Copied lines are highlighted with a faint amber wash and a left
   accent bar; surrounding context lines are dimmed. min-height keeps
   blank lines from collapsing away. */
#panel pre .dup-line,
#panel pre .ctx-line {
  display: block;
  min-height: 1.5em;
  padding-left: 6px;
}
#panel pre .ctx-line {
  opacity: 0.55;
}
#panel pre .dup-line {
  background: var(--amber-subtle);
  box-shadow: inset 2px 0 0 var(--amber);
}
#panel pre .more-line {
  display: block;
  padding-left: 6px;
  margin-top: 4px;
  color: var(--text-muted);
  font-style: italic;
}

#panel pre {
  border-radius: var(--radius-sm);
  background: var(--surface-0);
  border: 1px solid var(--border-subtle);
  padding: 8px 10px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-low);
  margin-top: 6px;
  /* Grow to full content and wrap long lines so the code preview never
     scrolls on its own; only the panel scrolls. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Quieter, themed scrollbars for the panel and its scrollable lists,
   replacing the default heavy OS bars. */
#panel {
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}

#panel::-webkit-scrollbar,
#panel ::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

#panel::-webkit-scrollbar-thumb,
#panel ::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 5px;
}

#panel::-webkit-scrollbar-thumb:hover,
#panel ::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

#panel::-webkit-scrollbar-track,
#panel ::-webkit-scrollbar-track {
  background: transparent;
}

/* Copyable command row: a label, the ellipsized command, and a copy button
   (replaces the bare "verify: <code>" hint). */
#panel .cmd-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 5px 6px 5px 10px;
  background: var(--surface-0);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

#panel .cmd-hint .cmd-label {
  flex: none;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

#panel .cmd-hint code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: inherit;
  font-size: var(--fs-xs);
  color: var(--green-text);
}

#panel .cmd-hint .cmd-copy {
  flex: none;
  padding: 2px 8px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

#panel .cmd-hint .cmd-copy:hover {
  color: var(--text-high);
  background: var(--surface-3);
}

#panel .clone-row {
  margin-bottom: 10px;
}

#panel .clone-row .clone-head {
  font-size: var(--fs-sm);
  color: var(--text-low);
}

#panel .clone-row .clone-head .n {
  color: var(--amber-text);
  font-weight: 700;
}

/* ── Tooltip ─────────────────────────────────────────────────── */

#tooltip {
  border-radius: var(--radius);
  position: fixed;
  display: none;
  background: var(--surface-3);
  color: var(--text-high);
  border: 1px solid var(--border-strong);
  padding: 9px 12px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  max-width: 380px;
  pointer-events: none;
  z-index: 10;
}

#tooltip .tip-name-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

#tooltip .tip-size {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

#tooltip .tip-wires {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--surface-2);
  font-size: var(--fs-sm);
  color: var(--text-low);
  white-space: nowrap;
}

#tooltip .tip-wires .wire-dot {
  display: inline;
  color: var(--blue);
  font-size: var(--fs-micro);
}

#tooltip .tip-dir {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}

#tooltip .tip-name {
  font-weight: 700;
  font-size: var(--fs-md);
  overflow-wrap: anywhere;
}

#tooltip .tip-stats {
  display: flex;
  gap: 16px;
  margin: 7px 0 2px;
}

#tooltip .tip-stat .v {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-high);
  font-variant-numeric: tabular-nums;
}

#tooltip .tip-stat .v.sev-error {
  color: var(--red-text);
}

#tooltip .tip-stat .v.sev-warn {
  color: var(--amber-text);
}

#tooltip .tip-stat .l {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-top: -2px;
}

#tooltip .tip-line {
  margin-top: 4px;
}

#tooltip .tip-line .fn {
  color: var(--text-high);
}

#tooltip .tip-dim {
  color: var(--text-low);
}

#tooltip .tip-muted {
  color: var(--text-muted);
}

#tooltip .sev-error {
  color: var(--red-text);
}

#tooltip .sev-warn {
  color: var(--amber-text);
}

#tooltip .sev-info {
  color: var(--blue-text);
}

#tooltip .sev-ok {
  color: var(--green-text);
}

/* ── Help overlay ────────────────────────────────────────────── */

#help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

#help-overlay.open {
  display: flex;
}

#help-overlay .help-box {
  border-radius: 8px;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  max-width: 980px;
  width: calc(100% - 64px);
  max-height: 84vh;
  overflow-y: auto;
}

#help-overlay .help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-subtle);
}

#help-overlay h2 {
  font-size: var(--fs-base);
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--text-high);
}

#help-overlay .help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 28px;
  padding: 16px 20px;
}

#help-overlay h3 {
  font-size: var(--fs-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

#help-overlay dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin-bottom: 16px;
}

#help-overlay dt {
  font-size: var(--fs-sm);
  color: var(--amber-text);
  white-space: nowrap;
}

#help-overlay dd {
  font-size: var(--fs-sm);
  color: var(--text-low);
  line-height: 1.5;
}

#help-overlay .help-foot {
  padding: 10px 20px 14px;
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Status line ─────────────────────────────────────────────── */

#statusline {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 5px 16px;
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-1);
  font-size: var(--fs-sm);
  color: var(--text-low);
  white-space: nowrap;
  overflow: hidden;
}

#crumbs {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

#crumbs button {
  color: var(--text-low);
  font-size: var(--fs-sm);
  padding: 0 3px;
}

#crumbs button:hover {
  color: var(--blue-text);
  text-decoration: underline;
}

#crumbs button:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

#crumbs .sep {
  color: var(--text-muted);
}

#crumbs .current {
  color: var(--text-high);
  padding: 0 3px;
}

#crumbs .collapsed {
  color: var(--text-muted);
  padding: 0 3px;
}

/* Keycap chips separated by space alone; no interpunct between them.
   margin-left:auto pins the hints to the right, with the drill crumbs (when
   present) on the left. */
#hints {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin-left: auto;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

#hints b {
  color: var(--text-low);
  font-weight: 400;
  border: 1px solid var(--border-subtle);
  padding: 0 3px;
  margin: 0 1px;
}

@media (max-width: 900px) {
  #toolbar {
    gap: 12px;
  }

  #lens-summary .diff-group {
    display: none;
  }

  #hints {
    display: none;
  }

  #stats {
    display: none;
  }
}

@media (max-width: 700px) {
  #topbar,
  #toolbar,
  #lens-summary {
    padding-left: 12px;
    padding-right: 12px;
  }

  #topbar {
    gap: 12px;
  }

  .brand .sub {
    display: none;
  }

  .brand .project {
    max-width: 26vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #search {
    width: clamp(120px, 30vw, 210px);
  }

  #lens-summary .summary-left {
    gap: 6px;
  }

  #lens-summary .context-chip {
    display: none;
  }

  #lens-summary .summary-controls {
    gap: 6px;
  }

  #lens-summary .entity-group button:disabled {
    display: none;
  }
}

@media (max-width: 520px) {
  #panel {
    width: 100vw;
    max-width: none;
    border-left: 0;
  }

  .brand .project,
  .search-key,
  #search-count,
  #lens-summary .summary-gloss,
  #lens-summary .filters-button,
  .more-button .more-active {
    display: none;
  }

  #topbar-actions {
    gap: 5px;
  }

  #search {
    width: min(42vw, 170px);
  }

  .view-seg button {
    padding-right: 7px;
    padding-left: 7px;
  }
}