/* Tech admin
 * The runtime health page. See design-documents/tech-admin.md.
 *
 * Borrows admin.css's instance grid and data rows rather than inventing a
 * second visual language for label-over-value facts. What is new here is only
 * what that page does not need: the stat cards with their trails, the memory
 * bar, and sections that fold.
 *
 * Phone rules at the bottom, next to what they override, for the reason
 * admin.css gives.
 */

.tech-status {
  font-size: 13px;
  color: var(--ink-faint);
  margin: 0 0 4px;
}

/* ── Stat cards ──────────────────────────────────────────────────────────── */

.tech-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.tech-stat { padding: 16px; }
.tech-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.tech-spark {
  display: block;
  width: 100%;
  height: 28px;
  margin-top: 10px;
}
.tech-spark polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.tech-stat-range {
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* ── Folding sections ────────────────────────────────────────────────────── */

.tech-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.tech-summary::-webkit-details-marker { display: none; }
.tech-summary h2.sectiontitle { margin: 0; }
.tech-summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  rotate: -45deg;
}
.tech-section[open] > .tech-summary::after { rotate: 45deg; }
.tech-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 6px;
}

.tech-gap { margin-top: 16px; }
/* p.sectionhint sets its own margin and outranks a lone class. */
p.sectionhint.tech-gap { margin-top: 16px; }

/* ── Memory bar ──────────────────────────────────────────────────────────── */

.tech-membar {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
}
.tech-seg { display: block; height: 100%; }
.tech-memkey {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-soft);
}
.tech-memkey-item { display: inline-flex; align-items: center; gap: 6px; }
.tech-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}
.tech-seg-1 { background: var(--series-1); }
.tech-seg-2 { background: var(--series-7); }
.tech-seg-3 { background: var(--series-3); }
.tech-seg-4 { background: var(--series-4); }

/* ── Tables ──────────────────────────────────────────────────────────────── */

.tech-table-name {
  font-size: 15px;
  color: var(--ink);
  word-break: break-all;
}
.tech-table-num {
  flex: none;
  font-size: 13.5px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 84px;
}

/* ── Phone ───────────────────────────────────────────────────────────────── */

@media (max-width: 620px) {
  .tech-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  /* admin.css stacks .datarow on a phone, which suits an invite with a tag
     and a button. A table row is a name and two short numbers, and stacked
     they read backwards — numbers first, name underneath. Kept on one line. */
  .datarow.tech-row { flex-wrap: nowrap; align-items: center; }
  .tech-row .datamain { flex: 1 1 auto; order: 0; }

  .tech-stats { gap: 10px; }
  .tech-stat { padding: 12px; }
  .tech-stat-value { font-size: 19px; }
  .tech-table-num { min-width: 0; }
}