/* --- Table base ------------------------------------------- */
.t-table-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.t-table-wrap::-webkit-scrollbar { height: 8px; width: 8px; }
.t-table-wrap::-webkit-scrollbar-track { background: transparent; }
.t-table-wrap::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 4px;
}
.t-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }
.t-table { font-size: 12.5px; }
.t-table thead th {
  font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 14px 12px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  user-select: none;
}
.t-table thead th.num { text-align: right; }
.t-table thead th.sortable { cursor: pointer; }
.t-table thead th.sortable:hover { color: var(--ink-dim); }
.t-table thead th .t-sort-arrow { margin-left: 4px; color: var(--accent); display: inline-block; width: 8px; }
.t-table tbody tr {
  border-bottom: 1px solid var(--line);
  transition: background 0.08s;
}
.t-table tbody tr.t-row { cursor: pointer; }
.t-table tbody tr.t-row:hover { background: var(--bg-1); }
.t-table tbody tr.t-detail { cursor: default; }
.t-table tbody td { padding: 14px 12px; vertical-align: middle; }
.t-chev {
  width: 22px;
  color: var(--ink-muted);
  font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
  font-size: 11px;
}

/* PM cell */
.t-pm { display: flex; align-items: center; gap: 12px; }
.t-pm-glyph {
  width: 24px; height: 24px;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  color: var(--ink-dim);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: var(--bg-1);
}
.t-pm-glyph-letter {
  font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
  font-size: 11px;
}
.t-pm-glyph-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--bg-1);
}
.t-pm-name { font-weight: 500; color: var(--ink); font-size: 13px; }
.t-pm-meta { font-family: "JetBrains Mono", "IBM Plex Mono", monospace; font-size: 11px; color: var(--ink-muted); }
.t-pm-meta-link {
  font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.1s, border-color 0.1s;
}
.t-pm-meta-link:hover {
  color: var(--accent);
  border-bottom-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.t-pm-meta-ext {
  font-size: 9px;
  color: var(--ink-faint);
  transition: color 0.1s;
}
.t-pm-meta-link:hover .t-pm-meta-ext { color: var(--accent); }

/* Category badge */
.t-cat {
  font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
  font-size: 10px;
  text-transform: lowercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border: 1px solid var(--line-2);
  display: inline-block;
  color: var(--ink-dim);
}
.t-cat-dec,
.t-cat-cefi,
.t-cat-play { color: var(--ink-dim); border-color: var(--line-2); }

/* Chain and volume */
.t-vol { font-family: "JetBrains Mono", "IBM Plex Mono", monospace; font-size: 12.5px; color: var(--ink); text-align: right; }
.t-vol-muted { color: var(--ink-muted); font-style: italic; font-size: 11px; }

/* --- Tool pills ------------------------------------------- */
.t-tools { display: flex; gap: 5px; flex-wrap: wrap; }
.t-pill {
  font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
  font-size: 10px;
  padding: 2px 7px;
  border: 1px solid var(--line-2);
  color: var(--ink-dim);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.t-pill-api    { color: var(--pill-api);   border-color: var(--pill-api-bd); }
.t-pill-sdk    { color: var(--pill-sdk);   border-color: var(--pill-sdk-bd); }
.t-pill-cli    { color: var(--pill-cli);   border-color: var(--pill-cli-bd); }
.t-pill-mcp    { color: var(--pill-mcp);   border-color: var(--pill-mcp-bd); }
.t-pill-skill  { color: var(--pill-skill); border-color: var(--pill-skill-bd); }
.t-pill-fw     { color: var(--pill-fw);    border-color: var(--pill-fw-bd); }
.t-pill-ws     { color: var(--pill-api);   border-color: var(--pill-api-bd); }
.t-pill-none   { color: var(--ink-muted); border-color: transparent; padding-left: 0; }

/* --- Testing grade badges --------------------------------- */
.t-grade {
  font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border: 1px solid var(--line-2);
  display: inline-block;
  color: var(--ink-dim);
  letter-spacing: 0.4px;
}
.t-grade-a { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.t-grade-b { color: var(--cyan);   border-color: color-mix(in srgb, var(--cyan)   40%, transparent); }
.t-grade-c { color: #c084fc;       border-color: #4a2a6f; }
.t-grade-d { color: var(--warn);   border-color: color-mix(in srgb, var(--warn)   40%, transparent); }
.t-grade-f { color: var(--red);    border-color: color-mix(in srgb, var(--red)    40%, transparent); }
.t-grade-na { color: var(--ink-muted); border-color: var(--line); border-style: dashed; }
.t-grade-fwprod      { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.t-grade-fwusable    { color: var(--cyan);   border-color: color-mix(in srgb, var(--cyan) 40%, transparent); }
.t-grade-fwexp       { color: var(--warn);   border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.t-grade-fwabandoned { color: var(--red);    border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.t-cell-tools { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--ink-muted); min-width: 32px; text-align: left; }
.t-cell { display: inline-flex; align-items: center; gap: 6px; }

/* --- Stable table layout (no column shift on expand) ------ */
.t-table { table-layout: fixed; width: 100%; }
.t-table col.col-chev    { width: 28px;  }
.t-table col.col-pm      { width: 275px; }
.t-table col.col-cat     { width: 140px; }
.t-table col.col-vol     { width: 265px; }
.t-table col.col-dev     { width: 210px; }
.t-table col.col-agent   { width: 218px; }
.t-table td, .t-table th { overflow: hidden; }
.t-table td .t-tools { overflow: visible; }
.t-pm > div:last-child { min-width: 0; flex: 1 1 auto; }
.t-pm-name, .t-pm-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-vol { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-cat { white-space: nowrap; }

/* Right-align volume only (numeric); dev + agent tool pill clusters
   stay left-aligned under their header labels for a consistent
   vertical gridline. */
#pmTable thead th.num,
#pmTable tbody td.t-vol { text-align: right; }

/* Testing table: dev tools count (4), AA (5), cli (6), skill (7), framework (8) */
#testTable thead th:nth-child(n+4),
#testTable tbody td:nth-child(n+4) { text-align: right; }

/* Testing table column widths */
.t-table col.col-tdev    { width: 90px; }
.t-table col.col-grade   { width: 92px; }