/* --- self-hosted fonts ---------------------------------------------- *
 * Inter + JetBrains Mono shipped under /static/fonts/ so the app
 * has no third-party font CDN dependency. Both families are SIL OFL
 * 1.1 licensed; populated by `make fetch-fonts`.
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/Inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/Inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/JetBrainsMono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/JetBrainsMono-500.woff2') format('woff2');
}

/* blittermib — visual system per docs/design/handoff/.
 * Inter + JetBrains Mono (ligatures off), oklch palette, four-tier
 * --fg-* scale, ten type-family color tokens, dark default with
 * light-theme parity.
 */

/* --- tokens (dark default) ------------------------------------------- */

:root {
  --bg:            oklch(0.16 0.012 60);
  --bg-elev:       oklch(0.19 0.013 60);
  --bg-elev-2:     oklch(0.22 0.014 60);
  --bg-row-hover:  oklch(0.21 0.018 60);
  --bg-row-active: oklch(0.26 0.04 60);
  --line:          oklch(0.28 0.014 60);
  --line-soft:     oklch(0.22 0.012 60);
  --fg:            oklch(0.94 0.012 75);
  --fg-2:          oklch(0.78 0.018 75);
  --fg-3:          oklch(0.58 0.018 75);
  --fg-4:          oklch(0.42 0.014 75);
  /* Hover-border accent — debuts at parity with --fg-3 so the
   * Phase-4 split is visually identical on day one. The token
   * exists so future contrast tweaks of "tertiary text" and
   * "hover border" don't drag each other. */
  --line-strong:   oklch(0.58 0.018 75);

  --accent:        oklch(0.78 0.14 55);
  --accent-fg:     oklch(0.16 0.012 60);
  --accent-soft:   color-mix(in oklch, var(--accent) 14%, transparent);
  --accent-strong: color-mix(in oklch, var(--accent) 42%, transparent);

  /* Type-family colors — encode the SMI type taxonomy. Tag fill via
   * color-mix(in oklch, var(--c-X) 18%, transparent), border 40%.
   */
  --c-counter: oklch(0.82 0.16 75);
  --c-gauge:   oklch(0.78 0.13 200);
  --c-int:     oklch(0.74 0.16 305);
  --c-text:    oklch(0.78 0.13 140);
  --c-index:   oklch(0.76 0.16 0);
  --c-time:    oklch(0.78 0.16 50);
  --c-addr:    oklch(0.78 0.12 185);
  --c-bool:    oklch(0.78 0.12 130);
  --c-notif:   oklch(0.78 0.18 25);
  --c-struct:  oklch(0.66 0.02 75);

  /* Severity palette — diagnostics / status / KPI badges. */
  --severity-red:    #df5757;
  --severity-orange: #db7d34;
  --severity-yellow: #ccaa3a;
  --severity-green:  #6caa55;
  --severity-blue:   #5d8eb6;
  --severity-purple: #a079c5;

  --severity-red-soft:    rgba(223,  87,  87, 0.14);
  --severity-orange-soft: rgba(219, 125,  52, 0.14);
  --severity-yellow-soft: rgba(204, 170,  58, 0.14);
  --severity-green-soft:  rgba(108, 170,  85, 0.14);
  --severity-blue-soft:   rgba( 93, 142, 182, 0.14);
  --severity-purple-soft: rgba(160, 121, 197, 0.14);

  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono',
               Menlo, Consolas, monospace;

  --content-max:      72ch;
  --content-wide-max: 1440px;
  --rail-width:       260px;
  --topbar-h:         64px;
  --gutter:    clamp(16px, 4vw, 40px);

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;
}

[data-theme="light"] {
  --bg:            oklch(0.985 0.006 75);
  --bg-elev:       oklch(0.97 0.008 75);
  --bg-elev-2:     oklch(0.95 0.01 75);
  --bg-row-hover:  oklch(0.95 0.012 75);
  --bg-row-active: oklch(0.92 0.03 55);
  --line:          oklch(0.86 0.012 75);
  --line-soft:     oklch(0.92 0.008 75);
  --fg:            oklch(0.2 0.014 60);
  --fg-2:          oklch(0.36 0.014 60);
  --fg-3:          oklch(0.52 0.014 60);
  --fg-4:          oklch(0.68 0.012 60);
  --line-strong:   oklch(0.52 0.014 60);

  --accent:        oklch(0.5 0.18 50);
  --accent-fg:     oklch(0.985 0.006 75);
  --accent-soft:   color-mix(in oklch, var(--accent) 10%, transparent);
  --accent-strong: color-mix(in oklch, var(--accent) 32%, transparent);

  --c-counter: oklch(0.55 0.18 65);
  --c-gauge:   oklch(0.5 0.16 220);
  --c-int:     oklch(0.46 0.2 305);
  --c-text:    oklch(0.46 0.16 145);
  --c-index:   oklch(0.5 0.2 0);
  --c-time:    oklch(0.5 0.18 45);
  --c-addr:    oklch(0.46 0.14 185);
  --c-bool:    oklch(0.48 0.16 135);
  --c-notif:   oklch(0.55 0.2 25);
  --c-struct:  oklch(0.45 0.02 60);

  --severity-red:    #c93030;
  --severity-orange: #d97324;
  --severity-yellow: #b39c2a;
  --severity-green:  #5fa840;
  --severity-blue:   #4a87a3;
  --severity-purple: #8a5cb1;

  --severity-red-soft:    rgba(201,  48,  48, 0.10);
  --severity-orange-soft: rgba(217, 115,  36, 0.10);
  --severity-yellow-soft: rgba(179, 156,  42, 0.10);
  --severity-green-soft:  rgba( 95, 168,  64, 0.10);
  --severity-blue-soft:   rgba( 74, 135, 163, 0.10);
  --severity-purple-soft: rgba(138,  92, 177, 0.10);
}

/* --- base ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Alpine x-cloak: hide elements that have not been processed by
 * Alpine yet. Without this rule the workspace's module-picker
 * modal flashes visible during the brief window before Alpine
 * evaluates `x-show="open"`, and stays visible permanently if
 * Alpine fails to load (CDN block, CSP failure). */
[x-cloak] { display: none !important; }

/* Status-bar "empty module" pill — rendered when a module has zero
 * symbols of every family, so the workspace signals "loaded, just
 * empty" instead of dropping the count region. */
.status-count.empty {
  color: var(--fg-4);
  border-color: var(--line-soft);
}

/* Workspace list-pane chrome: kind-filter chip row + scope-clear
 * link, sit above the text-filter input. */
.kind-chips { display: flex; gap: 6px; }
.kind-chip {
  background: var(--bg-elev);
  color: var(--fg-2);
  border: 1px solid var(--line);
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  cursor: pointer;
}
.kind-chip:hover { color: var(--fg); border-color: var(--line-strong); }

/* Active state — accent ring around an accent-tinted background,
 * with accent text — matches the handoff "all" chip in image 3.
 * Solid-accent fill is intentionally avoided here; the chip is a
 * filter affordance, not a primary CTA. */
.kind-chip[data-kind-active="true"] {
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  border-color: var(--accent);
}
.list-scope-clear {
  margin-left: auto;
  font-size: 12px;
  color: var(--fg-3);
}
.list-scope-clear:hover { color: var(--accent); }

/* Tree chevron toggle: glyph rotates 90° when expanded. */
.tree-chevron {
  transition: transform 120ms ease;
  display: inline-block;
}
.tree-chevron.expanded { transform: rotate(90deg); }
.tree-children-container { list-style: none; padding-left: 18px; margin: 0; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code, .mono {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0, 'dlig' 0;
  font-variant-ligatures: none;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

::selection { background: var(--accent-soft); color: var(--fg); }
h1, h2, h3 { margin: 0; }

button { font-family: inherit; }

/* --- topbar ---------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 var(--gutter);
  height: var(--topbar-h);
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.02em;
}
.brand:hover { text-decoration: none; }

.brand-mark {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.brand-mark .bar {
  display: block;
  height: 3px;
  border-radius: 1px;
}
.brand-mark .bar-1 { width: 100%; background: var(--accent); }
.brand-mark .bar-2 { width: 70%;  background: var(--accent); opacity: 0.6; }
.brand-mark .bar-3 { width: 45%;  background: var(--accent); opacity: 0.3; }

.brand-dot { color: var(--accent); margin-left: -0.15em; }

/* Three-bar brand mark — decreasing widths and opacities, all sienna,
   doubles as a typographic nod to OID-tree depth. CSS-only. */
.brand-mark {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.brand-mark .bar {
  display: block;
  height: 3px;
  border-radius: 1px;
}
.brand-mark .bar-1 { width: 100%; background: var(--accent); }
.brand-mark .bar-2 { width: 70%;  background: var(--accent); opacity: 0.65; }
.brand-mark .bar-3 { width: 45%;  background: var(--accent); opacity: 0.35; }

/* Larger variant for the empty-state hero. */
.brand-large .brand-mark {
  width: 28px;
  height: 28px;
  gap: 4px;
  margin-right: 14px;
}
.brand-large .brand-mark .bar { height: 4px; }

.brand-tagline {
  margin-left: 12px;
  font-size: 14px;
  color: var(--fg-3);
}

.topbar-spacer { flex: 1; }
.topbar-end { display: flex; align-items: center; gap: 16px; }
.privacy-notice {
  font-size: 13px;
  color: var(--fg-3);
}
.theme-toggle {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 100ms ease;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--line-strong); }
.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: inline; }
[data-theme="light"] .theme-toggle .sun { display: inline; }
[data-theme="light"] .theme-toggle .moon { display: none; }
.search-toggle {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 13px;
  transition: all 100ms ease;
}
.search-toggle:hover { color: var(--fg); border-color: var(--line-strong); }

/* --- page wrappers --------------------------------------------------- */

.page {
  max-width: var(--content-wide-max);
  margin: 0 auto;
  padding: 32px var(--gutter) 64px;
  display: grid;
  gap: 20px;
}

.page-stack { display: grid; gap: 20px; }

.app {
  display: grid;
  grid-template-columns: var(--rail-width) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas: "topbar topbar" "rail content";
  min-height: 100vh;
}
.app .topbar { grid-area: topbar; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-areas: "topbar" "content"; }
  .rail { display: none; }
}

/* --- card ------------------------------------------------------------ */

.card {
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 24px;
}

/* --- doc banner ------------------------------------------------------ */

.banner {
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.banner-main { flex: 1; min-width: 0; }
.banner-title {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 22px;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  word-break: break-all;
}
.banner-meta {
  font-size: 13px;
  color: var(--fg-3);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}
.banner-meta .sep { color: var(--fg-4); }
.banner-meta strong { color: var(--fg-2); font-weight: 500; }
.banner-meta .status-clean    { color: var(--severity-green); }
.banner-meta .status-warning  { color: var(--severity-orange); }
.banner-meta .status-failed   { color: var(--severity-red); }
.banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-ghost {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--line);
  padding: 7px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 100ms ease;
}
.btn-ghost:hover { border-color: var(--line-strong); }
.btn-ghost .glyph { color: var(--fg-3); }

.btn-icon {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg-3);
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all 100ms ease;
}
.btn-icon:hover { color: var(--fg); border-color: var(--line-strong); }

.btn-primary {
  background: var(--accent);
  color: #fff;
  border: 0;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-sans);
}
.btn-primary:hover { filter: brightness(1.08); }

/* --- KPI row --------------------------------------------------------- */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
}

.kpi {
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 28px 24px 20px;
}
.kpi-value {
  font-family: var(--font-sans);
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fg);
  margin-bottom: 18px;
}
.kpi-value.alarm { color: var(--severity-red); }
.kpi-value.warn  { color: var(--severity-orange); }
.kpi-value.good  { color: var(--severity-green); }
.kpi-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  color: var(--fg-3);
  text-transform: uppercase;
}

/* --- breakdown panels ------------------------------------------------ */

.panel-row-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) {
  .panel-row-grid { grid-template-columns: 1fr; }
}

.panel {
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
}
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.panel-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.panel-total {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--fg);
}

.panel-body { display: grid; gap: 4px; }
.panel-body.scroll { max-height: 320px; overflow-y: auto; padding-right: 6px; }

.row {
  display: grid;
  grid-template-columns: 1fr 80px 70px 56px;
  gap: 14px;
  align-items: center;
  padding: 9px 12px;
  font-size: 13.5px;
  border-radius: var(--radius-md);
  margin: 0 -12px;
}
.row:hover { background: var(--bg-elev-2); }
.row.active { background: var(--bg-row-active); }
.row .name {
  color: var(--fg);
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row .name .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.row .bar {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-row-active);
  overflow: hidden;
}
.row .bar .fill {
  display: block;
  height: 100%;
  border-radius: 3px;
}
.row .count {
  font-family: var(--font-mono);
  color: var(--fg);
  text-align: right;
  font-size: 13.5px;
}
.row .pct {
  font-family: var(--font-mono);
  color: var(--fg-3);
  text-align: right;
  font-size: 12.5px;
}
.row.muted .name, .row.muted .count, .row.muted .pct { color: var(--fg-4); }

/* color helpers */
.bg-red    { background: var(--severity-red); }
.bg-orange { background: var(--severity-orange); }
.bg-yellow { background: var(--severity-yellow); }
.bg-green  { background: var(--severity-green); }
.bg-blue   { background: var(--severity-blue); }
.bg-purple { background: var(--severity-purple); }
.bg-accent { background: var(--accent); }

.fg-red    { color: var(--severity-red); }
.fg-orange { color: var(--severity-orange); }
.fg-yellow { color: var(--severity-yellow); }
.fg-green  { color: var(--severity-green); }
.fg-blue   { color: var(--severity-blue); }
.fg-purple { color: var(--severity-purple); }
.fg-accent { color: var(--accent); }

/* --- search + filter row --------------------------------------------- */

.search-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.search-large {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 11px 16px;
  font-size: 14px;
  color: var(--fg-3);
  cursor: pointer;
  transition: border-color 100ms ease;
}
.search-large:hover { border-color: var(--line-strong); }
.search-large .placeholder { flex: 1; }
.search-large .kbd {
  margin-left: auto;
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--fg-3);
}

.search-end { display: flex; gap: 14px; align-items: center; }
.search-end .quiet { color: var(--fg-3); font-size: 13px; }

/* --- chips ----------------------------------------------------------- */

.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  color: var(--fg-3);
  background: transparent;
  cursor: pointer;
  transition: all 100ms ease;
}
.chip:hover { color: var(--fg); border-color: var(--line-strong); }
.chip.active { background: var(--bg-elev-2); }
.chip-red    { color: var(--severity-red);    border-color: var(--severity-red); }
.chip-orange { color: var(--severity-orange); border-color: var(--severity-orange); }
.chip-yellow { color: var(--severity-yellow); border-color: var(--severity-yellow); }
.chip-green  { color: var(--severity-green);  border-color: var(--severity-green); }
.chip-blue   { color: var(--severity-blue);   border-color: var(--severity-blue); }
.chip-purple { color: var(--severity-purple); border-color: var(--severity-purple); }

.chip-active-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.chip-active {
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 12px;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.chip-active .x {
  color: var(--fg-3);
  cursor: pointer;
  font-family: var(--font-sans);
}
.chip-active .x:hover { color: var(--fg); }
.chip-clear {
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
  padding-left: 4px;
}

/* --- data table ------------------------------------------------------ */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  margin-top: 16px;
}
.data-table thead th {
  text-align: left;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.data-table thead th .arrow { color: var(--accent); margin-left: 4px; }
.data-table tbody td {
  padding: 14px 16px 14px 0;
  vertical-align: middle;
  border-bottom: 1px solid var(--line-soft);
}
.data-table tbody tr:hover td { background: var(--bg-elev); }
.data-table .col-name {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 14px;
  color: var(--fg);
}
.data-table .col-name .module {
  display: block;
  font-size: 11px;
  color: var(--fg-3);
  margin-bottom: 2px;
  font-weight: 400;
}
.data-table .col-name a { color: inherit; text-decoration: none; }
.data-table .col-name a:hover { color: var(--accent); }
.data-table .col-mono {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.data-table .col-mono .copy-icon {
  color: var(--fg-3);
  font-size: 11px;
  cursor: pointer;
}
.data-table .col-mono .copy-icon:hover { color: var(--fg); }
.data-table .em-dash { color: var(--fg-4); }

.pill-mono {
  display: inline-block;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 12px;
  background: var(--bg-elev-2);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  color: var(--fg);
}
.pill-status {
  display: inline-block;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 12px;
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  border: 1px solid;
}
.pill-status.current     { color: var(--severity-green);  border-color: rgba(126,202, 94,.3); background: var(--severity-green-soft); }
.pill-status.deprecated  { color: var(--severity-orange); border-color: rgba(232,137, 58,.3); background: var(--severity-orange-soft); }
.pill-status.obsolete    { color: var(--severity-red);    border-color: rgba(233, 69, 69,.3); background: var(--severity-red-soft); }

.severity-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  border-radius: 50%;
  border: 1px solid;
}
.severity-pill.crit { background: var(--severity-red-soft);    color: var(--severity-red);    border-color: rgba(233,69,69,.3); }
.severity-pill.high { background: var(--severity-orange-soft); color: var(--severity-orange); border-color: rgba(232,137,58,.3); }
.severity-pill.med  { background: var(--severity-yellow-soft); color: var(--severity-yellow); border-color: rgba(212,190,74,.3); }
.severity-pill.low  { background: var(--severity-green-soft);  color: var(--severity-green);  border-color: rgba(126,202,94,.3); }

/* --- left rail (detail pages) ---------------------------------------- */

.rail {
  grid-area: rail;
  border-right: 1px solid var(--line-soft);
  padding: 24px 0 64px;
  overflow-y: auto;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
}
.rail-section { padding: 0 var(--gutter); margin-bottom: 8px; }
.rail-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  color: var(--fg-3);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.rail-tree {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 13px;
  line-height: 1.95;
}
.rail-tree-item {
  display: block;
  padding: 0 var(--gutter);
  color: var(--fg-3);
  border-left: 2px solid transparent;
  margin-left: -2px;
}
.rail-tree-item:hover { color: var(--fg); text-decoration: none; }
.rail-tree-item.active {
  color: var(--fg);
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
.rail-tree-item .num { color: var(--fg-4); margin-right: 10px; display: inline-block; min-width: 28px; }
.rail-tree-item.active .num { color: var(--accent); }
.rail-tree-item.depth-1 { padding-left: calc(var(--gutter) + 16px); }
.rail-tree-item.depth-2 { padding-left: calc(var(--gutter) + 32px); }
.rail-tree-item.depth-3 { padding-left: calc(var(--gutter) + 48px); }

/* --- detail-page content (symbol/table) ------------------------------ */

.content { grid-area: content; padding: 32px var(--gutter) 64px; }
.content-inner { max-width: var(--content-max); margin: 0 auto; }
.content-inner.wide { max-width: 96ch; }

.breadcrumb {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 13px;
  color: var(--fg-3);
  margin-bottom: 24px;
}
.breadcrumb a { color: var(--fg-3); }
.breadcrumb a:hover { color: var(--fg); text-decoration: none; }
.breadcrumb .sep { margin: 0 8px; color: var(--fg-4); }

.symbol-name {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--fg);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.summary {
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg);
  margin: 0 0 32px;
  max-width: 60ch;
}

.oid-row { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.oid {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--fg);
}
.oid .dot { color: var(--accent); opacity: 0.7; margin: 0 1px; }

.copy {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  cursor: pointer;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: all 100ms ease;
  user-select: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.copy:hover { color: var(--fg); border-color: var(--line); }

.type-line {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 13px;
  color: var(--fg-3);
  margin-bottom: 48px;
}
.type-line .sep { margin: 0 8px; color: var(--fg-4); }
.type-line .syntax { color: var(--fg); }

.section { margin: 40px 0; }
.section-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  color: var(--fg-3);
  text-transform: uppercase;
  margin: 0 0 16px;
}

.prose { font-size: 16px; line-height: 1.65; color: var(--fg); max-width: 65ch; }
.prose p { margin: 0 0 16px; }
.prose code {
  font-size: 0.92em;
  background: var(--bg-elev-2);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}

.glossary {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--fg-4);
  color: var(--fg);
  cursor: help;
}
.glossary:hover { text-decoration-color: var(--accent); color: var(--accent); }

/* Once a user has dismissed (clicked through) a glossary term, drop
   the dotted underline so it stops nagging — the .glossary-seen class
   is added by glossary.js from a localStorage record. Hover still
   surfaces the affordance for users who want to revisit. */
.glossary.glossary-seen {
  text-decoration: none;
  color: inherit;
}
.glossary.glossary-seen:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
}

.kv-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 24px;
  font-size: 14px;
  margin: 0 0 16px;
}
.kv-grid dt { color: var(--fg-3); font-family: var(--font-sans); font-size: 13px; }
.kv-grid dd {
  margin: 0;
  color: var(--fg);
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
}
.see-more {
  font-size: 14px;
  color: var(--accent);
  display: inline-block;
  margin-top: 8px;
}
.see-more:hover { text-decoration: underline; }

.refs {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 13px;
}
.refs td {
  padding: 9px 24px 9px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}
.refs tr:last-child td { border-bottom: 0; }
.refs td:first-child { color: var(--fg); }
.refs td.kind { color: var(--fg-3); }
.refs td.module { color: var(--fg-4); }
.refs a { color: inherit; text-decoration: none; }
.refs tr:hover td:first-child a { color: var(--accent); }

/* Search snippet row — sits underneath the result row.
   The selector specificity (`.refs td.search-snippet`) beats
   `.refs td` so we don't need !important to override the
   mono-font/inline-font defaults inherited from the refs table. */
.refs td.search-snippet {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-3);
  padding: 4px 24px 12px 0;
  line-height: 1.55;
}
.search-snippet mark {
  background: var(--accent-soft);
  color: var(--fg);
  padding: 1px 2px;
  border-radius: 2px;
}

/* --- disclosure ------------------------------------------------------ */

.disclosure {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}
.disclosure summary {
  font-size: 14px;
  color: var(--fg-3);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}
.disclosure summary:hover { color: var(--fg); }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::before {
  content: '▸';
  font-size: 9px;
  transition: transform 120ms ease;
  display: inline-block;
}
.disclosure[open] summary::before { transform: rotate(90deg); }
.disclosure-body {
  margin-top: 16px;
  padding: 16px 20px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre;
  overflow-x: auto;
  color: var(--fg);
}

/* --- table-of-tables ------------------------------------------------- */

.toc-meta {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 13px;
  color: var(--fg-3);
  margin: 0 0 12px;
}
.toc-meta strong { color: var(--fg); font-weight: 500; }

.toc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 13px;
  margin: 16px 0 24px;
}
.toc-table thead th {
  text-align: left;
  font-weight: 500;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.toc-table tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.toc-table tbody tr:hover td { background: var(--bg-elev-2); }
.toc-table .col-num { color: var(--fg-4); width: 36px; }
.toc-table .col-name { color: var(--fg); font-weight: 500; }
.toc-table .col-name a { color: inherit; text-decoration: none; }
.toc-table .col-name a:hover { color: var(--accent); }
.toc-table .col-syntax a {
  color: var(--fg);
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
}
.toc-table .col-syntax a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.toc-table .col-syntax .units { color: var(--fg-4); margin-left: 6px; }
.toc-table .col-access, .toc-table .col-status { color: var(--fg-3); }
.toc-table .col-oid-suffix { color: var(--fg-3); text-align: right; white-space: nowrap; }
.toc-table .key {
  display: inline-block;
  font-size: 9px;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  margin-left: 8px;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* --- empty state ----------------------------------------------------- */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 80px var(--gutter) 120px;
  max-width: 540px;
  margin: 0 auto;
}
.empty .brand-large {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.empty .brand-large .brand-mark { width: 26px; height: 26px; gap: 4px; }
.empty .brand-large .brand-mark .bar { height: 4px; }
.empty .tagline { font-size: 16px; color: var(--fg-3); margin: 0 0 64px; }
.empty .heading { font-size: 16px; font-weight: 500; color: var(--fg); margin: 0 0 16px; }
.empty .path {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 14px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 32px;
  color: var(--fg);
}
.empty .helper {
  color: var(--fg-3);
  font-size: 14px;
  line-height: 1.7;
  max-width: 440px;
  margin: 0 0 56px;
}
.empty .divider {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-4);
  margin-bottom: 28px;
  letter-spacing: 0.05em;
}
.empty .actions { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.empty .actions a { font-size: 14px; }

/* --- pills (status/banner) ------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  margin-left: 8px;
  vertical-align: 4px;
}
.pill-failed { color: var(--severity-red); border: 1px solid var(--severity-red); background: var(--severity-red-soft); }
.pill-warning { color: var(--severity-orange); background: var(--severity-orange-soft); border: 1px solid rgba(232,137,58,.3); }
.pill-standard { color: var(--fg-3); border: 1px solid var(--line); }

/* --- error state ----------------------------------------------------- */

.error-list {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 13px;
  margin: 16px 0 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.error-list-item {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  align-items: baseline;
}
.error-list-item:last-child { border-bottom: 0; }
.error-list-item .loc { color: var(--severity-red); font-weight: 500; }
.error-list-item .msg { color: var(--fg); }
.error-list-item .msg .lit {
  color: var(--fg-2);
  background: var(--bg-elev-2);
  padding: 0 4px;
  border-radius: var(--radius-sm);
}

.error-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 24px; }
.error-actions .action {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.error-actions .action::before {
  content: '▸';
  font-size: 9px;
  color: var(--fg-4);
}
.error-actions .action:hover { text-decoration: underline; }

/* --- landing -------------------------------------------------------- */

.landing {
  max-width: 720px;
  margin: 0 auto;
  padding: 96px var(--gutter) 96px;
}
.hero {
  text-align: center;
  margin-bottom: 80px;
}
.hero-brand {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--fg);
  margin: 0 0 12px;
  line-height: 1.05;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
}
.hero-brand .brand-mark { width: 38px; height: 38px; gap: 6px; }
.hero-brand .brand-mark .bar { height: 6px; }
.hero-tagline {
  font-size: 18px;
  color: var(--fg-3);
  margin: 0 0 56px;
}
/* Hero search — landing-page form input that submits to
 * /search?q=…. Pre-Phase-5 this was a `<button>` that just
 * popped open the ⌘K palette modal; clicking what looked like
 * an input only to get a SECOND input on top read as broken.
 * The hero now is a real `<form>` with a real `<input>`; the
 * `⌘K` kbd hint stays as a discoverability cue for the palette
 * shortcut, which still fires from any page. */
.hero-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  max-width: 520px;
  margin: 0 auto 28px;
  transition: border-color 100ms ease;
}
.hero-search:focus-within { border-color: var(--accent); }
.hero-search:hover { border-color: var(--line-strong); }
.hero-search .prompt {
  color: var(--accent);
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-weight: 700;
  font-size: 16px;
  user-select: none;
  flex-shrink: 0;
}
.hero-search-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--fg);
  font-family: inherit;
  font-size: 15px;
  min-width: 0;
  padding: 0;
}
.hero-search-input::placeholder { color: var(--fg-3); }
.hero-search .kbd {
  margin-left: auto;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--fg-3);
  flex-shrink: 0;
}
.hero-results {
  list-style: none;
  margin: -16px auto 0;
  padding: 8px;
  max-width: 520px;
  max-height: 50vh;
  overflow-y: auto;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.hero-results[data-state="hidden"] { display: none; }
.hero-result {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 80ms ease;
}
.hero-result.active { background: var(--accent-soft); }
.hero-result:hover { background: var(--bg-elev-2); }
.hero-result .palette-name { grid-column: 1; grid-row: 1; }
.hero-result .palette-oid { grid-column: 2; grid-row: 1; text-align: right; }
.hero-result .palette-meta { grid-column: 1 / 3; grid-row: 2; }
.hero-stats {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 13px;
  color: var(--fg-3);
}
.hero-stats strong { color: var(--fg); font-weight: 500; }
.hero-stats .sep { margin: 0 8px; color: var(--fg-4); }
.hero-stats .status-warning { color: var(--severity-orange); }
.hero-stats .status-clean { color: var(--severity-green); }
.hero-stats .status-failed { color: var(--severity-red); }

.hero-demos {
  border-top: 1px solid var(--line-soft);
  padding-top: 48px;
}
.demo-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  color: var(--fg-3);
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* --- footer --------------------------------------------------------- */

/* Spans the full page width with the same `--gutter` left/right padding
 * as the topbar, so the credit text sits flush with the brand wordmark
 * (left) and the theme toggle (right). No border or wrapping container —
 * the footer reads as part of the page chrome rather than a card-bound
 * sibling of the workspace. */
.footer {
  padding: 24px var(--gutter) 16px;
  font-size: 0.8125rem;
  color: var(--fg-3);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}
.footer a { color: var(--accent); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* --- command palette ------------------------------------------------ */

.palette-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 14vh;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  z-index: 1000;
}
.palette-overlay[data-state="hidden"] { display: none; }

.palette {
  width: 100%;
  max-width: 640px;
  max-height: 70vh;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.palette-input {
  border: 0;
  background: transparent;
  color: var(--fg);
  padding: 18px 20px;
  font-size: 16px;
  font-family: var(--font-sans);
  outline: 0;
  border-bottom: 1px solid var(--line-soft);
}
.palette-input::placeholder { color: var(--fg-3); }

.palette-results {
  list-style: none;
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  flex: 1;
}

.palette-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 80ms ease;
}
.palette-item.active { background: var(--accent-soft); }
.palette-item:hover { background: var(--bg-elev-2); }

.palette-name {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 14px;
  color: var(--fg);
  grid-column: 1;
  grid-row: 1;
}
.palette-oid {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 12px;
  color: var(--fg-3);
  grid-column: 2;
  grid-row: 1;
  text-align: right;
}
.palette-meta {
  font-size: 12px;
  color: var(--fg-4);
  grid-column: 1 / 3;
  grid-row: 2;
}

.palette-empty {
  padding: 24px 20px;
  color: var(--fg-3);
  font-size: 13px;
  text-align: center;
}
.palette-empty[data-state="hidden"] { display: none; }

/* --- glossary popover ----------------------------------------------- */

/* design.md: "no layered shadows; 1px borders only". A heavier
   border + raised surface gives the popover visual lift without
   resorting to box-shadow. */
.glossary-popover {
  position: absolute;
  z-index: 100;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg);
  max-width: 320px;
}
/* --- OID tree island ----------------------------------------------- */

.tree-root {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 13px;
  line-height: 1.7;
  margin-top: 16px;
}

.tree-root-list,
.tree-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tree-children { padding-left: 1.6em; }

.tree-node { position: relative; }

/* OID tree island row — distinct from the workspace navigator's
 * `.tree-list .tree-row`, hence the `.tree-root` ancestor scope so
 * the two row variants don't fight over the same selector. */
.tree-root .tree-row {
  display: grid;
  grid-template-columns: 1.6em 4em 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  margin-left: -2px;
}
.tree-root .tree-row:hover { background: var(--bg-elev-2); }

.tree-node[data-expanded="true"] > .tree-row { color: var(--fg); }

.tree-expand {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  padding: 0;
  width: 1.4em;
  text-align: center;
}
.tree-expand:hover { color: var(--fg); }
.tree-expand:disabled { color: var(--fg-4); cursor: default; }
.tree-expand:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

.tree-num {
  color: var(--fg-4);
  text-align: right;
}

.tree-name {
  color: var(--fg);
  text-decoration: none;
}
.tree-name:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.tree-meta {
  color: var(--fg-3);
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}

.tree-loading,
.tree-empty,
.tree-error {
  color: var(--fg-3);
  padding: 8px 12px;
  font-style: normal;
}
.tree-error { color: var(--severity-red); }

.glossary-popover .glossary-term {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  display: block;
}

/* --- workspace shell ------------------------------------------------ *
 * The 3-pane workspace breaks out of Base's narrow `.content-inner`
 * container so the navigator + inspector + detail panes can span the
 * full viewport width. The `:has()` selectors are scoped to the
 * workspace surface so other pages still get the centered prose
 * layout from `.page` / `.content-inner`.
 */
main.page:has(.workspace-grid) {
  max-width: none;
  padding: 0;
  display: block;
}
main.page:has(.workspace-grid) .content-inner,
.content-inner:has(.workspace-grid) {
  max-width: none;
  margin: 0;
  padding: 0;
}

.workspace-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 380px;
  height: calc(100vh - var(--topbar-h) - 40px - 56px);
  min-height: 420px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 1100px) {
  .workspace-grid { grid-template-columns: 280px minmax(0, 1fr); }
  .workspace-detail { display: none; }
}
@media (max-width: 760px) {
  .workspace-grid { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .workspace-tree { display: none; }
}

.workspace-tree {
  border-right: 1px solid var(--line);
  background: var(--bg);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  padding: 8px 0;
  min-width: 0;
}
.workspace-tree::-webkit-scrollbar { width: 8px; }
.workspace-tree::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.workspace-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--bg);
}

.workspace-detail {
  border-left: 1px solid var(--line);
  background: var(--bg-elev);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  padding: 18px 18px 24px;
  min-width: 0;
}
.workspace-detail::-webkit-scrollbar { width: 8px; }
.workspace-detail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* --- workspace status bar ------------------------------------------- */

.status-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 12px;
}
.status-bar-label {
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--fg-3);
}
/* Module-name pill — accent-tinted background + 1px border at
 * 0.4 alpha. Sits between the MODULE label and the module's OID
 * in the status bar; clicking it opens the module-picker modal. */
.status-bar-module {
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  letter-spacing: -0.005em;
}
.status-bar-module:hover {
  background: color-mix(in oklch, var(--accent) 22%, transparent);
}
.status-bar-oid {
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
}
.status-bar-oid .dot { color: var(--fg-4); }

.status-bar-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-left: auto;
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
}
/* Each count is "<n> objects": the <strong> number is painted in
 * the family color, the .lbl tail stays muted. No leading dot or
 * border — the bare typography is what the handoff calls for. */
.status-count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 11px;
  color: var(--fg-3);
}
.status-count strong {
  color: var(--c, var(--fg));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.status-count .lbl { color: var(--fg-3); }
.status-count.t-counter { --c: var(--c-counter); }
.status-count.t-gauge   { --c: var(--c-gauge); }
.status-count.t-int     { --c: var(--c-int); }
.status-count.t-text    { --c: var(--c-text); }
.status-count.t-index   { --c: var(--c-index); }
.status-count.t-time    { --c: var(--c-time); }
.status-count.t-addr    { --c: var(--c-addr); }
.status-count.t-bool    { --c: var(--c-bool); }
.status-count.t-notif   { --c: var(--c-notif); }
.status-count.t-struct  { --c: var(--fg); }
.status-count.empty {
  color: var(--fg-4);
  border: 1px dashed var(--line-soft);
  border-radius: var(--radius-pill);
  padding: 1px 9px;
}

/* --- workspace tree (left pane) ------------------------------------- */

/* TREE band — uppercase label + collapse-all / expand-all square
 * buttons on the right. Sits flush above the tree list and shares
 * the workspace-tree's left border. */
.tree-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.tree-head-title {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
}
.tree-head-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg-3);
  width: 20px;
  height: 20px;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tree-head-btn:hover { color: var(--fg); background: var(--bg-elev); }

.tree-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 12px;
}
/* Tree-children container — left padding makes room for the
 * branch-line guides drawn by per-row ::before / ::after pseudos.
 * `position: relative` is intentionally NOT set here; each row
 * positions its own pseudos relative to the row, not the container,
 * so an ancestor's guide line can extend past the row's box and
 * span the entire descendant subtree. */
.workspace-tree .tree-children-container {
  list-style: none;
  margin: 0;
  padding-left: 16px;
}

/* Loading placeholder — visible only while htmx.ajax for the
 * children-fragment is in flight; once `fetching` flips back to
 * false, x-show hides this li but keeps it in the DOM. */
.workspace-tree .tree-loading {
  padding: 4px 4px 4px 4px;
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 11px;
  font-style: italic;
}

/* Branch-line guides — pure-CSS approximation of the design's
 * ├── / └── tree glyphs. Each row gets:
 *   1. ::before on `.tree-row-head` — the L-shape (vertical top
 *      half + horizontal connector) drawn via 1px borders. The
 *      L's elbow sits at the row's vertical center, where the
 *      chevron / bullet sits.
 *   2. ::after on `.tree-row` (non-last children only) — the
 *      vertical CONTINUATION below the row's center, extending
 *      through any descendants so the line passes by intermediate
 *      generations. Suppressed on `:last-child` so the last
 *      sibling renders as `└──` instead of `├──`.
 *
 * The 10px offset (left: -10px, width: 10px) places the guide
 * line at column 6px inside the parent container's 16px padding,
 * matching the chevron's visual axis once the row's own padding
 * is accounted for. */
.workspace-tree .tree-children-container > .tree-row {
  position: relative;
}
.workspace-tree .tree-children-container > .tree-row > .tree-row-head::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 0;
  width: 10px;
  height: 12px;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  pointer-events: none;
}
.workspace-tree .tree-children-container > .tree-row:not(:last-child)::after {
  content: '';
  position: absolute;
  left: -10px;
  top: 12px;
  bottom: 0;
  width: 1px;
  background: var(--line);
  pointer-events: none;
}
/* Tree row container — block-level so the children-container
 * (rendered as a sibling `<ul>`) breaks to its own row underneath
 * the head. Selection styling and the family stripe live on the
 * `<li>` itself; the actual chevron + link sit inside the head. */
.workspace-tree .tree-row {
  display: block;
  position: relative;
  border-left: 2px solid transparent;
  margin-left: 0;
}
.workspace-tree .tree-row-head {
  display: flex;
  align-items: center;
  padding: 0 12px 0 8px;
  height: 24px;
  color: var(--fg-2);
  white-space: nowrap;
  position: relative;
}
.workspace-tree .tree-row-head:hover { background: var(--bg-row-hover); color: var(--fg); }
.workspace-tree .tree-row[aria-current="true"] > .tree-row-head,
.workspace-tree .tree-row.selected > .tree-row-head {
  background: var(--bg-row-active);
  color: var(--fg);
}
.workspace-tree .tree-row[aria-current="true"],
.workspace-tree .tree-row.selected {
  border-left-color: var(--accent);
}
/* Stretched-link affordance: the row-link's ::before fills the
 * full row-head box so a click anywhere on the row navigates,
 * not just on the visible name text. The chevron's `click.stop`
 * keeps expand-toggle clicks from also navigating. */
.workspace-tree .tree-row-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.workspace-tree .tree-row-head .tree-chevron {
  position: relative;
  z-index: 2;
}
.tree-chevron {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 11px;
  font-weight: 600;
  width: 14px;
  height: 14px;
  padding: 0;
  margin-right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.tree-chevron:hover { color: var(--fg); }
.tree-chevron-spacer,
.tree-leaf-bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  flex-shrink: 0;
  color: var(--fg-4);
  font-weight: 700;
}
.tree-row-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
  flex: 1;
}
.tree-row-link:hover { text-decoration: none; }
.tree-row-name {
  color: inherit;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
/* The pre/tail split encodes the name's distinguishing portion
 * via COLOR only — keeping the same weight for both. Earlier
 * iterations set the tail heavier (500/600) but the contrast
 * read as "bold" against the dim prefix and made the wall of
 * names visually noisy. */
.tree-row-name .pre { color: var(--fg-4); font-weight: inherit; }
.tree-row-name .tail { color: inherit; font-weight: inherit; }
.workspace-tree .tree-row.selected .tree-row-name .pre { color: var(--fg-2); }
.workspace-tree .tree-row.selected .tree-row-name .tail { color: var(--fg); }

/* Leaf rows recolor the `·` glyph by family so a wall of leaves
 * still encodes type at a glance. */
.workspace-tree .tree-row.t-counter .tree-leaf-bullet { color: var(--c-counter); }
.workspace-tree .tree-row.t-gauge   .tree-leaf-bullet { color: var(--c-gauge); }
.workspace-tree .tree-row.t-int     .tree-leaf-bullet { color: var(--c-int); }
.workspace-tree .tree-row.t-text    .tree-leaf-bullet { color: var(--c-text); }
.workspace-tree .tree-row.t-index   .tree-leaf-bullet { color: var(--c-index); }
.workspace-tree .tree-row.t-time    .tree-leaf-bullet { color: var(--c-time); }
.workspace-tree .tree-row.t-addr    .tree-leaf-bullet { color: var(--c-addr); }
.workspace-tree .tree-row.t-bool    .tree-leaf-bullet { color: var(--c-bool); }
.workspace-tree .tree-row.t-notif   .tree-leaf-bullet { color: var(--c-notif); }
.workspace-tree .tree-row.t-counter .tree-chevron { color: var(--c-counter); }
.workspace-tree .tree-row.t-gauge   .tree-chevron { color: var(--c-gauge); }
.workspace-tree .tree-row.t-int     .tree-chevron { color: var(--c-int); }
.workspace-tree .tree-row.t-text    .tree-chevron { color: var(--c-text); }
.workspace-tree .tree-row.t-index   .tree-chevron { color: var(--c-index); }
.workspace-tree .tree-row.t-time    .tree-chevron { color: var(--c-time); }
.workspace-tree .tree-row.t-addr    .tree-chevron { color: var(--c-addr); }
.workspace-tree .tree-row.t-bool    .tree-chevron { color: var(--c-bool); }
.workspace-tree .tree-row.t-notif   .tree-chevron { color: var(--c-notif); }

/* --- workspace list pane (center) ----------------------------------- */

.list-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
}
.list-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  height: 30px;
}
.list-search:focus-within { border-color: var(--accent); }
.list-search .prompt {
  color: var(--accent);
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-weight: 700;
  user-select: none;
}
.list-filter {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--fg);
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 12px;
  height: 100%;
  min-width: 0;
}
.list-filter::placeholder { color: var(--fg-4); }
.list-search .kbd {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 10px;
  color: var(--fg-3);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 5px;
  flex-shrink: 0;
}

/* The kind-chip row pre-existed in styles.css, but inside the
 * workspace toolbar it sits next to the prompt-style search and
 * needs tighter chip metrics, a row-flex container, and a leading
 * colored dot per family chip per the handoff. */
.list-controls .kind-chips { gap: 6px; flex-shrink: 0; }
.list-controls .kind-chip {
  height: 30px;
  padding: 0 10px;
  line-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  text-transform: lowercase;
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 500;
}
.list-controls .kind-chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c, var(--fg-4));
  flex-shrink: 0;
}
.list-controls .kind-chip.kind-scalar { --c: var(--c-gauge); }
.list-controls .kind-chip.kind-table  { --c: var(--c-struct); }
.list-controls .kind-chip.kind-notif  { --c: var(--c-notif); }
.list-controls .list-scope-clear {
  margin-left: 4px;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 11px;
  color: var(--fg-3);
  flex-shrink: 0;
}
.list-controls .list-scope-clear:hover { color: var(--accent); }

/* Scope-bar — clickable breadcrumb path through the OID tree
 * (`axMgmt / axSystem / axSysCpu / axSysCpuTable`) with an
 * "<n> objects" count anchored right. Each segment links to its
 * own scope; the trailing segment is the current scope and
 * renders in accent without a link. Suppressed when no URL scope
 * is set so the unscoped landing on a module renders flush. */
.list-scope-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 14px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 11px;
  color: var(--fg-3);
}
.scope-breadcrumb {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 4px;
  min-width: 0;
}
.scope-crumb {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 11px;
  color: var(--fg-2);
  text-decoration: none;
  padding: 1px 4px;
  border-radius: 3px;
}
.scope-crumb:hover {
  background: var(--bg-elev-2);
  color: var(--fg);
  text-decoration: none;
}
.scope-crumb-current {
  color: var(--accent);
  font-weight: 600;
  cursor: default;
}
.scope-crumb-current:hover {
  background: transparent;
}
.scope-sep {
  color: var(--fg-4);
  user-select: none;
}
.list-scope-count {
  color: var(--fg-3);
  flex-shrink: 0;
}

/* List table — sticky header + 5-col grid (badge / name / syntax /
 * access / oid). Implemented with display:grid on rows so column
 * widths line up `ls -l`-style across the whole list, even when the
 * user filters or scopes the dataset. */
.workspace-list .list-table {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  overflow: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.workspace-list .list-table::-webkit-scrollbar { width: 10px; height: 10px; }
.workspace-list .list-table::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }

.workspace-list .list-table thead,
.workspace-list .list-table tbody,
.workspace-list .list-table tr {
  display: contents;
}
.workspace-list .list-table {
  display: grid;
  grid-template-columns: 28px minmax(220px, 1.6fr) minmax(110px, max-content) 70px minmax(180px, 1fr);
  align-items: stretch;
  align-content: start;
}
.workspace-list .list-head-cell {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--fg-3);
  padding: 8px 12px 8px 0;
  text-align: left;
  height: 28px;
  display: flex;
  align-items: center;
}
.workspace-list .list-head-cell:first-child { padding-left: 12px; }

.workspace-list .list-row {
  display: contents;
}
.workspace-list .list-row > td,
.workspace-list .list-row > th {
  height: var(--row-h, 28px);
  padding: 0 12px 0 0;
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 12px;
  border-bottom: 1px solid var(--line-soft);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  transition: background 50ms ease;
}
.workspace-list .list-row:hover > td { background: var(--bg-row-hover); }
.workspace-list .list-row.selected > td { background: var(--bg-row-active); }
.workspace-list .list-row.selected > td:first-child {
  border-left-color: var(--accent);
}
.workspace-list .list-row.selected .list-cell-name a { color: var(--fg); }
.workspace-list .list-row.selected .list-cell-name .pre { color: var(--fg-2); }
.workspace-list .list-row.selected .list-cell-name .tail { color: var(--fg); font-weight: inherit; }
.workspace-list .list-cell-name .pre { color: var(--fg-4); font-weight: inherit; }
.workspace-list .list-cell-name .tail { color: var(--fg); font-weight: inherit; }

/* 2px family stripe on the leftmost cell — drawn as a left border
 * on the first cell (rather than `::before` on the row) because
 * each row is rendered as `display: contents` and has no box of
 * its own. design.md mandates "no layered shadows", so border —
 * not inset box-shadow — is the correct primitive here.
 *
 * Padding is tuned so the 28px badge column actually fits the
 * 18px tlet square: 28 - 6(left) - 2(right) - 2(border) = 18px.
 * The inherited 12px right-padding from the generic cell rule
 * would otherwise leave only 4px for the badge and flex would
 * shrink it to ~8px wide. */
.workspace-list .list-row > td:first-child {
  padding-left: 6px;
  padding-right: 2px;
  border-left: 2px solid var(--row-c, transparent);
}
.workspace-list .list-row.t-counter > td:first-child { --row-c: var(--c-counter); }
.workspace-list .list-row.t-gauge   > td:first-child { --row-c: var(--c-gauge); }
.workspace-list .list-row.t-int     > td:first-child { --row-c: var(--c-int); }
.workspace-list .list-row.t-text    > td:first-child { --row-c: var(--c-text); }
.workspace-list .list-row.t-index   > td:first-child { --row-c: var(--c-index); }
.workspace-list .list-row.t-time    > td:first-child { --row-c: var(--c-time); }
.workspace-list .list-row.t-addr    > td:first-child { --row-c: var(--c-addr); }
.workspace-list .list-row.t-bool    > td:first-child { --row-c: var(--c-bool); }
.workspace-list .list-row.t-notif   > td:first-child { --row-c: var(--c-notif); }
.workspace-list .list-row.t-struct  > td:first-child { --row-c: var(--c-struct); }

/* Tlet sits as a flex item inside the badge cell — flex-shrink: 0
 * so it never collapses below its 18×18 target if a future cell
 * change tightens the chrome budget. */
.tlet { flex-shrink: 0; }
/* Name cell — `padding-left: 8px` opens up breathing room between
 * the badge (in the previous cell) and the name text. The 28px
 * badge column itself is sized to fit the 18×18 tlet exactly, so
 * the spacing has to live on the name cell, not the badge cell. */
.list-cell-name {
  color: var(--fg);
  font-weight: 500;
  padding-left: 8px;
}
.list-cell-name a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.list-cell-name a:hover { color: var(--accent); }
.list-cell-name code { font-family: var(--font-mono); font-feature-settings: 'liga' 0, 'calt' 0; }

/* Inline copy buttons in the list-pane name + OID cells. One
 * button per row * two columns; default-quiet (low-contrast
 * grey, low opacity) so they don't shout in dense lists, then
 * tint to accent on hover and flash green on a successful copy.
 * The row-level click-to-navigate handler bails out when the
 * click target is inside a `<button>` (existing rule), so the
 * icon click only copies — no row navigation. */
.workspace-list .list-cell-name .copy-btn,
.workspace-list .list-cell-oid .copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 6px 0 0;
  cursor: pointer;
  color: var(--fg-4);
  opacity: 0.55;
  vertical-align: -2px;
  transition: color 120ms ease, opacity 120ms ease;
}
.workspace-list .list-row:hover .copy-btn,
.workspace-list .list-row.selected .copy-btn {
  opacity: 1;
}
.workspace-list .list-cell-name .copy-btn:hover,
.workspace-list .list-cell-oid .copy-btn:hover {
  color: var(--accent);
  opacity: 1;
}
.workspace-list .list-cell-name .copy-btn.copied,
.workspace-list .list-cell-oid .copy-btn.copied {
  color: oklch(72% 0.16 145);
  opacity: 1;
}
.workspace-list .list-cell-name .copy-btn svg,
.workspace-list .list-cell-oid .copy-btn svg {
  display: block;
}
.list-cell-syntax {
  font-size: 11px;
  color: var(--c, var(--fg-2));
  font-weight: 500;
}
.workspace-list .list-row.t-counter .list-cell-syntax { --c: var(--c-counter); }
.workspace-list .list-row.t-gauge   .list-cell-syntax { --c: var(--c-gauge); }
.workspace-list .list-row.t-int     .list-cell-syntax { --c: var(--c-int); }
.workspace-list .list-row.t-text    .list-cell-syntax { --c: var(--c-text); }
.workspace-list .list-row.t-index   .list-cell-syntax { --c: var(--c-index); }
.workspace-list .list-row.t-time    .list-cell-syntax { --c: var(--c-time); }
.workspace-list .list-row.t-addr    .list-cell-syntax { --c: var(--c-addr); }
.workspace-list .list-row.t-bool    .list-cell-syntax { --c: var(--c-bool); }
.workspace-list .list-row.t-notif   .list-cell-syntax { --c: var(--c-notif); }
.workspace-list .list-row.t-struct  .list-cell-syntax { --c: var(--c-struct); }

.list-cell-access {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
}
.list-cell-access.ro { color: var(--c-gauge); }
.list-cell-access.rw { color: var(--c-counter); }
.list-cell-access.na { color: var(--fg-4); }

/* OID column — prefix dim, last segment bright bold ("highlighted
 * index indicator" per the handoff). The pre/tail split happens
 * server-side via SplitOIDLast, so the dim/bright treatment
 * survives client-side filtering and works without JS. */
.list-cell-oid {
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
}
.list-cell-oid .pre { color: var(--fg-4); }
.list-cell-oid .tail {
  color: var(--fg);
  font-weight: 600;
}
.workspace-list .list-row.selected .list-cell-oid .pre { color: var(--fg-3); }
.workspace-list .list-row.selected .list-cell-oid .tail { color: var(--accent); }

/* type-letter badge — single capital letter in an 18×18 family-tinted
 * rounded-square. The `.t-*` color class controls --c via the row's
 * family class (set above for syntax), so only the badge's own
 * structural rules live here. */
.tlet {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-weight: 700;
  font-size: 10px;
  color: var(--c, var(--fg-3));
  background: color-mix(in oklch, var(--c, var(--fg-3)) 18%, transparent);
  border: 1px solid color-mix(in oklch, var(--c, var(--fg-3)) 40%, transparent);
}
.workspace-list .list-row.t-counter .tlet { --c: var(--c-counter); }
.workspace-list .list-row.t-gauge   .tlet { --c: var(--c-gauge); }
.workspace-list .list-row.t-int     .tlet { --c: var(--c-int); }
.workspace-list .list-row.t-text    .tlet { --c: var(--c-text); }
.workspace-list .list-row.t-index   .tlet { --c: var(--c-index); }
.workspace-list .list-row.t-time    .tlet { --c: var(--c-time); }
.workspace-list .list-row.t-addr    .tlet { --c: var(--c-addr); }
.workspace-list .list-row.t-bool    .tlet { --c: var(--c-bool); }
.workspace-list .list-row.t-notif   .tlet { --c: var(--c-notif); }
.workspace-list .list-row.t-struct  .tlet { --c: var(--c-struct); }

/* --- workspace detail pane (right) ---------------------------------- */

/* Reset the wrapper padding so the inner .detail-head and
 * .detail-body own their own padding (matches the handoff: each
 * section has its own padding for a clean visual separation). */
.workspace-detail { padding: 0; }

.workspace-detail .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 12px;
  padding: 32px 18px;
}
.workspace-detail .empty-title {
  font-size: 13px;
  color: var(--fg-2);
  margin: 0 0 6px;
  font-weight: 500;
}
.workspace-detail .empty-hint {
  margin: 0;
  max-width: 32ch;
  line-height: 1.55;
}

/* Compact detail-pane head — kind label + colored dot, big mono
 * name, type/access/status pills, action row. The relative
 * positioning anchors the close-X affordance pinned to the
 * top-right corner. */
.workspace-detail .detail-head {
  position: relative;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
}
/* Close X pinned in the detail-pane corner — replaces the prior
 * "Close" text button. The X is the universal "dismiss" glyph
 * for sub-panels; visually anchored top-right with a small
 * hover background so the click target is forgiving without
 * shouting on idle render. */
.workspace-detail .detail-close-x {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  text-decoration: none;
  color: var(--fg-3);
  background: transparent;
  font-size: 14px;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.workspace-detail .detail-close-x:hover {
  color: var(--fg);
  background: color-mix(in oklch, var(--fg) 8%, transparent);
  border-color: var(--line);
  text-decoration: none;
}
.workspace-detail .detail-kind {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.workspace-detail .detail-kind .kdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c, var(--fg-3));
  flex-shrink: 0;
}
.workspace-detail .detail-kind.t-counter { --c: var(--c-counter); }
.workspace-detail .detail-kind.t-gauge   { --c: var(--c-gauge); }
.workspace-detail .detail-kind.t-int     { --c: var(--c-int); }
.workspace-detail .detail-kind.t-text    { --c: var(--c-text); }
.workspace-detail .detail-kind.t-index   { --c: var(--c-index); }
.workspace-detail .detail-kind.t-time    { --c: var(--c-time); }
.workspace-detail .detail-kind.t-addr    { --c: var(--c-addr); }
.workspace-detail .detail-kind.t-bool    { --c: var(--c-bool); }
.workspace-detail .detail-kind.t-notif   { --c: var(--c-notif); }
.workspace-detail .detail-kind.t-struct  { --c: var(--c-struct); }

.workspace-detail .detail-name {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--fg);
  margin: 0;
  word-break: break-word;
}
.workspace-detail .detail-name code { font-family: inherit; }

.workspace-detail .detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.workspace-detail .detail-meta .pill {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 2px 8px;
  border-radius: 3px;
  color: var(--fg-2);
  margin: 0;
  vertical-align: 0;
}
.workspace-detail .detail-meta .pill.type {
  color: var(--c, var(--fg-2));
  border-color: color-mix(in oklch, var(--c, var(--fg-2)) 40%, transparent);
  background: color-mix(in oklch, var(--c, var(--fg-2)) 14%, transparent);
}
.workspace-detail .detail-meta .pill.type.t-counter { --c: var(--c-counter); }
.workspace-detail .detail-meta .pill.type.t-gauge   { --c: var(--c-gauge); }
.workspace-detail .detail-meta .pill.type.t-int     { --c: var(--c-int); }
.workspace-detail .detail-meta .pill.type.t-text    { --c: var(--c-text); }
.workspace-detail .detail-meta .pill.type.t-index   { --c: var(--c-index); }
.workspace-detail .detail-meta .pill.type.t-time    { --c: var(--c-time); }
.workspace-detail .detail-meta .pill.type.t-addr    { --c: var(--c-addr); }
.workspace-detail .detail-meta .pill.type.t-bool    { --c: var(--c-bool); }
.workspace-detail .detail-meta .pill.type.t-notif   { --c: var(--c-notif); }

.workspace-detail .detail-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}
.workspace-detail .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg-2);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 11px;
  cursor: pointer;
  transition: all 80ms ease;
  text-decoration: none;
}
.workspace-detail .btn:hover {
  background: var(--bg-elev-2);
  color: var(--fg);
  text-decoration: none;
}
.workspace-detail .btn.primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
  font-weight: 600;
}
.workspace-detail .btn.primary:hover { filter: brightness(1.08); }

/* Detail body sections + dashed-trail section titles. */
.workspace-detail .detail-body {
  padding: 14px 18px 24px;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 12px;
}
.workspace-detail .section-title {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  margin: 16px 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.workspace-detail .section-title:first-child { margin-top: 0; }
.workspace-detail .section-title::after {
  content: '';
  flex: 1;
  border-bottom: 1px dashed var(--line);
}

/* Description block — `white-space: normal` (the default) so the
 * SMI source's hard-wrap newlines + continuation indentation
 * collapse into a flowing paragraph. The text is also pre-
 * collapsed at template time via `collapseWhitespace` so this
 * reflows correctly even if a future CSS change reintroduces
 * pre-wrap. */
.workspace-detail .desc {
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.55;
  color: var(--fg-2);
}

/* OID decode — one row per dotted segment. Numeric segment is
 * right-aligned in a 28px gutter, label takes the remainder, and
 * the last row is accent-colored + bold. */
.workspace-detail .oid-decode {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 11px;
}
.workspace-detail .oid-decode .step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: center;
  padding: 3px 4px;
}
.workspace-detail .oid-decode .step .n {
  text-align: right;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.workspace-detail .oid-decode .step .lbl { color: var(--fg-2); }
.workspace-detail .oid-decode .step.last .n {
  color: var(--accent);
  font-weight: 700;
}
.workspace-detail .oid-decode .step.last .lbl {
  color: var(--fg);
  font-weight: 600;
}

/* Properties grid — 76px label column, value column. Labels are
 * uppercase tracked, values mono. */
.workspace-detail .kvbox {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 11px;
  overflow: hidden;
}
.workspace-detail .kvbox .k {
  background: var(--bg-elev);
  color: var(--fg-3);
  padding: 5px 8px;
  border-bottom: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.workspace-detail .kvbox .v {
  padding: 5px 8px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--fg);
  word-break: break-all;
}
/* Inline clipboard icon button — replaces the prior "Copy OID"
 * and "Copy name" text buttons. Sits flush against the value
 * with a small right margin so the icon and the text read as a
 * unit. Subtle by default; tints to accent on hover, briefly
 * flips green-ish on a successful copy via the per-button
 * Alpine `copied` flag. */
.workspace-detail .kvbox .v .copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0 4px 0 0;
  margin: 0 4px 0 0;
  cursor: pointer;
  color: var(--fg-4);
  vertical-align: -2px;
  transition: color 120ms ease;
}
.workspace-detail .kvbox .v .copy-btn:hover {
  color: var(--accent);
}
.workspace-detail .kvbox .v .copy-btn.copied {
  color: oklch(72% 0.16 145);
}
.workspace-detail .kvbox .v .copy-btn svg {
  display: block;
}
.workspace-detail .kvbox .k:nth-last-of-type(1),
.workspace-detail .kvbox .v:nth-last-of-type(1) {
  border-bottom: 0;
}

/* Detail-pane enum table — same dark-paper style as kvbox. */
.workspace-detail .enum-tbl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 11px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.workspace-detail .enum-tbl td,
.workspace-detail .enum-tbl th {
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1px solid var(--line-soft);
}
.workspace-detail .enum-tbl tr:last-child td { border-bottom: 0; }
.workspace-detail .enum-tbl th {
  background: var(--bg-elev);
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--fg-3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.workspace-detail .enum-tbl td.v {
  color: var(--c-int);
  width: 50px;
  font-variant-numeric: tabular-nums;
}

/* Module-info bar — collapsible row between the status bar and
 * the workspace grid. Native `<details>` element; summary is
 * always visible (one-line preview + imports count), body
 * expands on click for the full description / organization /
 * imports list. Lets the user reach module metadata without
 * having to clear their symbol selection. */
.module-info {
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  padding: 8px 18px;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 12px;
  color: var(--fg-3);
}
.module-info[open] {
  background: var(--bg);
  padding-bottom: 14px;
}
.module-info-summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.module-info-summary::-webkit-details-marker { display: none; }
.module-info-chevron {
  flex-shrink: 0;
  font-size: 9px;
  color: var(--fg-4);
  transition: transform 120ms ease;
  display: inline-block;
  transform-origin: 50% 60%;
}
.module-info[open] .module-info-chevron {
  transform: rotate(90deg);
}
.module-info-preview {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-2);
}
.module-info-preview.muted { color: var(--fg-4); }
.module-info[open] .module-info-preview {
  color: var(--fg-3);
  /* Once expanded, the preview line is just a recap; let the
   * full body do the heavy lifting. */
  font-style: italic;
}
.module-info-stats {
  flex-shrink: 0;
  color: var(--fg-3);
  font-size: 11px;
}
.module-info-stats strong {
  color: var(--fg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-right: 2px;
}
.module-info-body {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px 18px;
  align-items: baseline;
}
.module-info-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--fg-3);
  align-self: start;
  padding-top: 2px;
}
.module-info-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 80ch;
}
.module-info-imports {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
}
.module-info-imports .imports-group {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: baseline;
  border-bottom: 1px solid var(--line-soft);
  padding: 4px 0;
}
.module-info-imports .imports-group:last-child { border-bottom: 0; }
.module-info-imports .imports-source {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding: 1px 4px;
  border-radius: 3px;
  align-self: start;
  word-break: break-word;
}
.module-info-imports .imports-source:hover {
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  text-decoration: none;
}
.module-info-imports .imports-symbols {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.module-info-imports .imports-symbol {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 11px;
  color: var(--fg-2);
  text-decoration: none;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg-elev);
}
.module-info-imports .imports-symbol code { font-family: inherit; }
.module-info-imports .imports-symbol:hover {
  color: var(--accent);
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  text-decoration: none;
}

/* Download links in the module-info summary row — small, text-
 * only, right of the imports count. `x-on:click.stop` on each
 * link stops the click from bubbling to the surrounding
 * `<summary>` and toggling the details element open/closed
 * unintentionally. */
.module-info-downloads {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--fg-3);
}
.module-info-download-link {
  color: var(--accent);
  text-decoration: none;
  padding: 1px 4px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
}
.module-info-download-link:hover {
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  text-decoration: none;
}
.module-info-download-sep {
  color: var(--fg-4);
  user-select: none;
}

/* Download row inside the expanded body — labeled `DOWNLOAD`
 * row matching the existing label / value cadence. Two
 * prominent buttons; primary one (single MIB) gets the accent
 * fill, secondary one (bundle) is the bordered variant. */
.module-info-download-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.module-info-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 12px;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--fg-2);
  transition: all 80ms ease;
}
.module-info-download-btn:hover {
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--accent);
  text-decoration: none;
}
.module-info-download-btn.primary {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 18%, transparent);
  color: var(--accent);
  font-weight: 600;
}
.module-info-download-btn.primary:hover {
  background: color-mix(in oklch, var(--accent) 28%, transparent);
}

/* Status pill — small uppercase badge that flags a symbol's
 * SMI STATUS when it's not `current`. Surfaces on the workspace
 * list rows and the type-definitions bar (the workspace tree
 * dims deprecated/obsolete rows but is too narrow to carry the
 * pill cleanly).
 *
 * deprecated → muted grey, says "use the replacement"
 * obsolete   → warmer orange tint, says "may be removed entirely"
 *
 * The selectors `.deprecated` / `.obsolete` apply via the
 * status string emitted from `model.Status` (`StatusDeprecated`
 * = "deprecated", `StatusObsolete` = "obsolete"), keeping the
 * Go-side string and CSS class in lockstep.
 */
.status-pill {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}
.status-pill.deprecated {
  background: color-mix(in oklch, var(--fg-3) 22%, transparent);
  color: var(--fg-3);
}
.status-pill.obsolete {
  background: color-mix(in oklch, oklch(72% 0.16 30) 24%, transparent);
  color: oklch(72% 0.16 30);
}

/* Dim deprecated and obsolete rows uniformly across the three
 * surfaces that surface SMI status (workspace tree, list pane,
 * type-definitions bar) so the row visually recedes — the user
 * can still read it but the active eye-attractors are the
 * supported symbols. Selected rows recover most of the opacity
 * so the selection highlight stays visible.
 */
.list-row.status-deprecated,
.list-row.status-obsolete,
.tree-row.status-deprecated,
.tree-row.status-obsolete,
.type-defs-row.status-deprecated,
.type-defs-row.status-obsolete {
  opacity: 0.6;
}
.list-row.status-deprecated.selected,
.list-row.status-obsolete.selected,
.tree-row.status-deprecated.selected,
.tree-row.status-obsolete.selected {
  opacity: 0.9;
}

/* Type Definitions bar — sibling of `.module-info`. Lists the
 * module's Textual Conventions with a parsed base-type pill and
 * a constraint phrase per row. Hidden when the module declares
 * zero TCs (the templ skips the element entirely). Default
 * closed; expanding shows the list with an internal max-height +
 * scroll so vendor MIBs declaring 50+ TCs don't push the
 * workspace grid off-screen.
 *
 * Mirrors `.module-info`'s typography (mono, 12px, fg-3) and
 * 8/18px padding so the two bars stack as one chrome strip. */
.type-defs {
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  padding: 8px 18px;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 12px;
  color: var(--fg-3);
}
.type-defs[open] {
  background: var(--bg);
  padding-bottom: 14px;
}
.type-defs-summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.type-defs-summary::-webkit-details-marker { display: none; }
.type-defs-chevron {
  flex-shrink: 0;
  font-size: 9px;
  color: var(--fg-4);
  transition: transform 120ms ease;
  display: inline-block;
  transform-origin: 50% 60%;
}
.type-defs[open] .type-defs-chevron {
  transform: rotate(90deg);
}
.type-defs-title {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--fg-3);
}
.type-defs-count {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.type-defs-body {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  background: var(--bg);
}
/* Six-column grid:
 *   1. name        (min 180px so short names align across rows)
 *   2. status pill (deprecated/obsolete badge; collapses to 0 when absent)
 *   3. base pill   (Integer32, OctetString, OID, BITS, …)
 *   4. constraint  (range/size/enum phrase, content-sized)
 *   5. toggle      (chevron, sits adjacent to its constraint)
 *   6. spacer (1fr) absorbs remaining width so columns 1-5
 *      cluster on the left rather than spreading edge-to-edge
 *
 * Each child names its column explicitly so a missing optional
 * cell (e.g. a TC with no constraint phrase) doesn't shift the
 * toggle into the constraint slot.
 */
.type-defs-row {
  display: grid;
  grid-template-columns: minmax(180px, auto) auto auto auto auto 1fr;
  gap: 4px 12px;
  align-items: baseline;
  padding: 3px 2px;
  border-bottom: 1px solid var(--line-soft);
}
.type-defs-row:last-child { border-bottom: 0; }
.type-defs-name {
  grid-column: 1;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
  word-break: break-word;
}
.type-defs-name:hover {
  color: var(--accent);
  text-decoration: underline;
}
/* Status pill in column 2 — between name and base-type pill.
 * Empty when the TC's status is `current`, taking 0 width so
 * the row layout collapses cleanly. */
.type-defs-row > .status-pill {
  grid-column: 2;
  align-self: center;
}
.type-defs-pill {
  grid-column: 3;
  display: inline-block;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: color-mix(in oklch, var(--accent) 18%, transparent);
  color: var(--accent);
  white-space: nowrap;
  align-self: center;
}
.type-defs-constraint {
  grid-column: 4;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 11px;
  color: var(--fg-3);
  align-self: center;
  white-space: nowrap;
}
.type-defs-enum-toggle {
  grid-column: 5;
  background: transparent;
  border: 0;
  padding: 0 4px;
  cursor: pointer;
  color: var(--fg-4);
  font-size: 10px;
  align-self: center;
}
.type-defs-enum-toggle:hover {
  color: var(--accent);
}
/* Enum reveal spans columns 2-5 (everything except the name)
 * so the values indent under the pill / constraint cluster
 * rather than left-flushing under the name. Visually associates
 * the values with their toggle, which now lives in column 4. */
.type-defs-enum-list {
  grid-column: 2 / -1;
  margin: 4px 0;
  padding: 6px 10px;
  list-style: none;
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 11px;
  color: var(--fg-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Per-row enum body bounds itself the same way the outer bar
   * does — IANAifType has 270 entries; without this a single
   * row could blow the layout. */
  max-height: 200px;
  overflow-y: auto;
}

/* Module imports — shown in the right pane's module-overview
 * (the unscoped workspace landing replaces the "Pick a symbol"
 * empty state with this). Each row groups the symbols imported
 * from a single source module: clickable header on the left
 * (jumps to that module's workspace), clickable symbol pills on
 * the right. The visual cadence matches the kvbox / enum-tbl
 * pattern used elsewhere in the right pane (1px border, soft
 * row separators, same typography). */
.workspace-detail .imports {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.workspace-detail .imports-group {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 10px;
  align-items: baseline;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.workspace-detail .imports-group:last-child { border-bottom: 0; }
.workspace-detail .imports-source {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding: 1px 4px;
  border-radius: 3px;
  align-self: start;
  word-break: break-word;
}
.workspace-detail .imports-source:hover {
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  text-decoration: none;
}
.workspace-detail .imports-symbols {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.workspace-detail .imports-symbol {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 11px;
  color: var(--fg-2);
  text-decoration: none;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg-elev);
}
.workspace-detail .imports-symbol code { font-family: inherit; }
.workspace-detail .imports-symbol:hover {
  color: var(--accent);
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  text-decoration: none;
}

/* Notification objects — the SMIv2 NOTIFICATION-TYPE OBJECTS
 * clause, surfaced as a clickable list in the right pane so a
 * reader can jump from "what does linkDown carry?" to the
 * variable-binding's detail. Visually a stack of pill-style
 * links with the cross-module hint right-aligned. */
.workspace-detail .notify-objects {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.workspace-detail .notify-objects li { margin: 0; }
.workspace-detail .notify-object {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  text-decoration: none;
  color: var(--fg);
  border-bottom: 1px solid var(--line-soft);
  transition: background 50ms ease;
}
.workspace-detail .notify-objects li:last-child .notify-object {
  border-bottom: 0;
}
.workspace-detail .notify-object:hover {
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--accent);
  text-decoration: none;
}
.workspace-detail .notify-object code {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 12px;
}
.workspace-detail .notify-object-module {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 10px;
  color: var(--fg-4);
}
.workspace-detail .notify-object:hover .notify-object-module {
  color: var(--accent);
  opacity: 0.7;
}

/* --- module picker overlay ------------------------------------------ *
 * Body-mounted Alpine overlay triggered by clicking the module name in
 * the status bar. Centered card on a translucent backdrop; the search
 * input is sticky at the top, the result list scrolls underneath, and
 * a footer surfaces "+N more — keep typing to narrow" when the
 * filtered set exceeds the visible window. design.md says no layered
 * shadows, so the lift comes from a 1px border + elevated surface
 * tone, not box-shadow.
 */
.module-picker {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: color-mix(in oklch, var(--bg) 75%, transparent);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 14vh var(--gutter, 16px) var(--gutter, 16px);
}
.module-picker-card {
  width: 100%;
  max-width: 560px;
  max-height: 70vh;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.module-picker-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-elev);
  position: sticky;
  top: 0;
  z-index: 1;
}
.module-picker-search .prompt {
  color: var(--accent);
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-weight: 700;
  font-size: 14px;
  user-select: none;
  flex-shrink: 0;
}
.module-picker-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--fg);
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 14px;
  height: 24px;
  padding: 0;
  min-width: 0;
}
.module-picker-input::placeholder { color: var(--fg-4); }
.module-picker-search .kbd {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 10px;
  color: var(--fg-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 6px;
  flex-shrink: 0;
}

.module-picker-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.module-picker-list::-webkit-scrollbar { width: 8px; }
.module-picker-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.module-picker-item {
  margin: 0;
}
.module-picker-item a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.module-picker-item a:hover,
.module-picker-item[data-active="true"] a {
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  text-decoration: none;
}
.module-picker-name {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 13px;
  color: var(--fg);
  font-weight: 500;
}
.module-picker-item[data-active="true"] .module-picker-name { color: var(--accent); }
.module-picker-oid {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 11px;
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
}

.module-picker-empty {
  padding: 36px 18px;
  text-align: center;
  color: var(--fg-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.module-picker-empty-title {
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 13px;
  font-weight: 500;
}
.module-picker-empty-hint {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 11px;
  color: var(--fg-4);
}

.module-picker-footer {
  padding: 8px 16px;
  border-top: 1px solid var(--line-soft);
  background: var(--bg);
  text-align: center;
}
.module-picker-more {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-size: 11px;
  color: var(--fg-3);
}

/* ----------------------------------------------------------- *
 * Trap simulator modal — surfaces a snmptrap command generator
 * for NOTIFICATION-TYPE / TRAP-TYPE symbols. Triggered by the
 * "Simulate" button in the workspace right-pane action row;
 * dispatches `simulate:open` on the window. Modal layout
 * mirrors the module-picker pattern (fixed inset, semi-opaque
 * backdrop, centered card with max-width). All form values
 * stay client-side; nothing is POSTed.
 * ----------------------------------------------------------- */
.notify-objects-empty {
  display: none;          /* metadata-only UL for empty-OBJECTS notifications */
}
.simulate-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh var(--gutter, 16px) var(--gutter, 16px);
  box-sizing: border-box;
}
.simulate-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: color-mix(in oklch, var(--bg) 75%, transparent);
}
.simulate-modal {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 84vh;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 18px 20px 16px;
  gap: 12px;
}
.simulate-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 10px;
  margin-bottom: 4px;
}
.simulate-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
.simulate-title-name {
  font-family: var(--font-mono);
  color: var(--accent);
  margin-left: 8px;
  font-weight: 500;
}
.simulate-close {
  background: transparent;
  border: 0;
  color: var(--fg-3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}
.simulate-close:hover { color: var(--fg-1); }
.simulate-disclaimer {
  font-size: 12px;
  color: var(--fg-3);
  margin: 0;
}
.simulate-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
}
.simulate-section:first-of-type { border-top: 0; padding-top: 0; }
.simulate-label {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 600;
}
.simulate-radio-row {
  display: flex;
  gap: 16px;
  font-size: 13px;
}
.simulate-field-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.simulate-field-row label {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: var(--fg-3);
  flex: 1 1 auto;
  min-width: 140px;
  gap: 4px;
}
.simulate-field-row input,
.simulate-field-row select {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg-1);
}
.simulate-field-row input:focus,
.simulate-field-row select:focus {
  outline: none;
  border-color: var(--accent);
}
.simulate-error {
  color: var(--severity-red);
  font-size: 11px;
}
/* Row-identity rows: label on the left, input + error stacked
   in a column on the right. align-items: center vertically
   centers the label text on the input field, and the error
   span flows naturally below the input rather than crowding it
   on the right. */
.simulate-row-identity {
  align-items: center;
}
.simulate-row-identity > label {
  flex: 0 0 auto;
}
.simulate-input-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.simulate-input-cell > input,
.simulate-input-cell > select {
  width: 100%;
  box-sizing: border-box;
}
.simulate-column-error {
  display: block;
}
.simulate-hint {
  font-size: 11px;
  color: var(--fg-3);
  margin: 0;
}
.simulate-preview {
  font-size: 11px;
  color: var(--fg-3);
  margin: 6px 0 0;
}
.simulate-preview code {
  font-family: var(--mono, monospace);
  color: var(--fg-1);
}
.simulate-warning {
  background: var(--severity-yellow-bg, #3a2e0d);
  color: var(--severity-yellow, #f0b429);
  border: 1px solid var(--severity-yellow, #f0b429);
  border-radius: 4px;
  padding: 8px 10px;
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.4;
}
.simulate-warning code {
  font-family: var(--mono, monospace);
  background: rgba(255, 255, 255, 0.08);
  padding: 0 4px;
  border-radius: 3px;
}
.simulate-varbind {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0;
  border-top: 1px solid var(--line-soft);
}
.simulate-varbind:first-child {
  border-top: 0;
}
.simulate-varbind-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.simulate-varbind-name {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-1);
  word-break: break-all;
}
.simulate-varbind-syntax {
  font-size: 11px;
  color: var(--fg-3);
}
.simulate-varbind input,
.simulate-varbind select {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg-1);
  width: 100%;
  box-sizing: border-box;
}
.simulate-command {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--fg-1);
  margin: 0;
}
.simulate-footer {
  font-size: 11px;
  color: var(--fg-3);
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

/* --- legal pages (imprint, privacy) ---------------------------------- */

.legal-page {
  max-width: 64ch;
  margin: 0 auto;
  color: var(--fg-1);
}
.legal-page h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.legal-page h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 28px 0 8px;
  color: var(--fg-1);
}
.legal-page p,
.legal-page address,
.legal-page ul {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0 0 12px;
}
.legal-page address {
  font-style: normal;
}
.legal-page ul {
  padding-left: 1.25rem;
}
.legal-page li + li {
  margin-top: 4px;
}
.legal-page a {
  color: var(--accent);
}
.legal-page code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  padding: 0 4px;
  border-radius: var(--radius-sm);
}

/* --- drop zone (web upload) ----------------------------------------- */

.drop-zone {
  margin: 16px auto 0;
  max-width: 64ch;
  padding: 18px 20px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  color: var(--fg-2);
  text-align: center;
  transition: border-color 120ms ease, background 120ms ease;
}
.drop-zone[data-state="dragover"] {
  border-color: var(--accent);
  background: var(--bg-row-hover);
}
.drop-zone[data-state="error"] {
  border-color: var(--line-strong);
}
.drop-zone-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.drop-zone-icon {
  font-size: 22px;
  line-height: 1;
  color: var(--fg-3);
}
.drop-zone-headline {
  font-size: 14px;
  margin: 0;
  color: var(--fg-1);
}
.drop-zone-browse {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.drop-zone-hint {
  font-size: 12px;
  margin: 0;
  color: var(--fg-3);
}
.drop-zone-hint code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  padding: 0 4px;
}
.drop-zone-progress {
  font-size: 13px;
  color: var(--fg-2);
}
.drop-zone-results {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  text-align: left;
  font-size: 12px;
  font-family: var(--font-mono);
}
.drop-zone-results li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 4px 8px;
  border-top: 1px solid var(--line-soft);
}
.drop-zone-results li:first-child { border-top: none; }
.drop-zone-results li[data-ok="true"]::before  { content: "✓"; color: var(--accent); }
.drop-zone-results li[data-ok="false"]::before { content: "✗"; color: var(--line-strong); }
.drop-zone-result-name { color: var(--fg-1); }
.drop-zone-result-detail { color: var(--fg-3); }
.drop-zone-result-detail a { color: var(--accent); }
.drop-zone-replace {
  margin-left: auto;
  background: var(--bg);
  color: var(--fg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1px 8px;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
}
.drop-zone-replace:hover { border-color: var(--accent); }

/* --- /upload management page ---------------------------------------- */

.upload-page {
  max-width: 80ch;
  margin: 0 auto;
}
.upload-page h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.upload-page h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 24px 0 8px;
  color: var(--fg-1);
}
.upload-tagline {
  font-size: 14px;
  color: var(--fg-2);
  margin: 0 0 16px;
}
.upload-tagline code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  padding: 0 4px;
}
.upload-empty {
  color: var(--fg-3);
  font-size: 13px;
  padding: 12px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.upload-empty code {
  font-family: var(--font-mono);
  font-size: 12px;
}
.upload-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
}
.upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto auto;
  gap: 10px;
  align-items: baseline;
  padding: 6px 8px;
  border-top: 1px solid var(--line-soft);
}
.upload-row:first-child { border-top: none; }
.upload-row[data-state="parse error"]      { background: var(--bg-elev); }
.upload-row[data-state="non-MIB skipped"]   { color: var(--fg-3); }
.upload-row-name a { color: var(--fg-1); }
.upload-row-name a:hover { color: var(--accent); }
.upload-row-state {
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.upload-row-size { color: var(--fg-3); }
.upload-row-diags { color: var(--accent); }
.upload-row-shadow {
  color: var(--fg-3);
  font-size: 11px;
}
.upload-row-shadow code {
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  padding: 0 3px;
}
.upload-row-delete {
  background: var(--bg);
  color: var(--fg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1px 8px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.upload-row-delete:hover {
  border-color: var(--line-strong);
  color: var(--fg-1);
}

/* --- module-info bar inline delete (when source ∈ mibs/upload/) ----- */

.module-info-delete {
  background: var(--bg);
  color: var(--fg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1px 7px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  margin-left: 8px;
}
.module-info-delete:hover {
  border-color: var(--line-strong);
  color: var(--fg-1);
}